/* SmarterEventing — one shared stylesheet. Change the semantic tokens here
   to update the portal, planner, public documents and TV workspace together. */
:root {
  color-scheme: light;
  --background: #f2efeb;
  --brand-background-image: url("/event-scenes/directory.webp");
  --brand-backdrop:
    linear-gradient(90deg, #181719aa, #18171922),
    var(--brand-background-image) center / cover no-repeat, #1d1c1c;
  --surface: #fffdf9;
  --surface-raised: #f6f2ec;
  --surface-input: #ffffff;
  --surface-hover: #f0e9df;
  --border: #e1dbd3;
  --border-strong: #a69987;
  --border-gold: #ded4c4;
  --text: #242321;
  --text-muted: #625d56;
  --text-subtle: #756d63;
  --gold: #8c612b;
  --gold-bright: #ae7d37;
  --gold-deep: #795020;
  --gold-ink: #251c10;
  --gold-fill: linear-gradient(180deg, #eac780, #cba15b);
  --selected: #f1e4ce;
  --success: #326447;
  --success-surface: #e7efe6;
  --warning: #79551d;
  --warning-surface: #f5ebd8;
  --danger: #9a3634;
  --danger-surface: #f8e5e2;
  --radius: 16px;
  --shadow: 0 10px 32px #473b2809;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  font: 14px/1.5 var(--font-body);
  color: var(--text);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--gold-ink);
  background: var(--gold-fill);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 160ms,
    background-color 160ms,
    box-shadow 160ms;
}
button:hover {
  box-shadow: 0 0 0 2px #edbd681a;
  border-color: var(--gold-bright);
}
button:active {
  filter: brightness(0.93);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
a {
  color: var(--gold);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--gold-bright);
}
input,
select,
textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-input);
  color: var(--text);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-subtle);
  opacity: 1;
}
textarea {
  resize: vertical;
}
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--gold);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}
label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}
h1,
h2,
h3 {
  color: var(--text);
}
h1 {
  font: 500 clamp(30px, 3vw, 44px)/1.15 var(--font-display);
  letter-spacing: -0.025em;
  margin: 8px 0;
}
h2 {
  font: 600 21px/1.25 var(--font-display);
  margin: 0 0 18px;
}
h3 {
  font-size: 16px;
}
p {
  color: var(--text-muted);
  line-height: 1.6;
}
small {
  font-size: 12px;
}
summary {
  cursor: pointer;
}
.ui-icon {
  flex: none;
  vertical-align: middle;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 22px var(--font-display);
  letter-spacing: -0.04em;
  color: var(--text);
  white-space: nowrap;
}
.brand .ui-icon {
  color: var(--gold);
  width: 29px;
  height: 29px;
}
.brand-dot {
  color: var(--gold);
}
.center {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--brand-backdrop);
}
.login {
  width: min(100%, 440px);
  padding: 38px;
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  background: linear-gradient(150deg, #132b23, var(--surface) 70%);
  box-shadow: 0 24px 80px #0005;
}
.login .brand {
  margin-bottom: 38px;
}
.login h1 {
  font-size: 36px;
}
.login form {
  display: grid;
  gap: 20px;
  margin-top: 26px;
}
.login form > button {
  margin-top: 6px;
}
.layout {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  min-height: 100vh;
  background:
    linear-gradient(180deg, #03121018, #031210f5 720px),
    var(--brand-background-image) right top / 100% auto no-repeat,
    var(--background);
}
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 30px 18px 22px;
  border-right: 1px solid var(--border);
  background: #061a15;
}
.app-sidebar .brand {
  margin: 0 8px;
}
.side-label {
  margin: 46px 14px 12px;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.app-sidebar nav {
  display: grid;
  gap: 6px;
}
.app-sidebar nav button {
  width: 100%;
  justify-content: flex-start;
  gap: 14px;
  padding: 12px 15px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  text-align: left;
  font-weight: 500;
}
.app-sidebar nav button .ui-icon {
  color: var(--gold);
  width: 21px;
  height: 21px;
}
.app-sidebar nav button:hover {
  background: var(--surface-hover);
  box-shadow: none;
  color: var(--text);
}
.app-sidebar nav button.selected {
  background: linear-gradient(120deg, #78552b, #3b301c);
  border-color: #c4944b;
  color: var(--text);
  box-shadow:
    inset 0 1px 0 #f9dc9c33,
    0 3px 14px #0002;
}
.sidebar-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: auto 12px 28px;
  padding-top: 42px;
  font: italic 19px/1.5 var(--font-display);
  color: var(--gold-bright);
}
.sidebar-note .ui-icon {
  width: 26px;
  height: 26px;
}
.account {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  font-size: 12px;
  border-top: 1px solid var(--border);
  padding: 20px 8px 0;
}
.account-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid #987946;
  border-radius: 50%;
  background: linear-gradient(145deg, #775d38, #2b3226);
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 600;
}
.account > .account-avatar {
  grid-row: span 2;
}
.account small {
  overflow-wrap: anywhere;
  color: var(--text-subtle);
  font-size: 10px;
}
.account button {
  grid-column: 1 / -1;
  justify-content: flex-start;
  font-size: 12px;
  padding: 10px 0;
}
.account button:first-of-type {
  margin-top: 16px;
}
.account .ui-icon {
  width: 17px;
  height: 17px;
}
.quiet {
  background: transparent;
  color: var(--gold);
  border: 1px solid transparent;
  padding: 8px 0;
  font-weight: 500;
}
.quiet:hover {
  background: transparent;
  border-color: transparent;
  color: var(--gold-bright);
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.content {
  width: 100%;
  min-width: 0;
  max-width: 1700px;
  padding: 0 30px 36px;
}
.app-topbar {
  min-height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.breadcrumb {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--text-subtle);
  font-size: 12px;
}
.breadcrumb strong {
  color: var(--text);
  font-weight: 500;
}
.breadcrumb > span {
  color: var(--border-strong);
}
.topbar-account {
  display: flex;
  align-items: center;
  gap: 24px;
}
.workspace-indicator {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--text-subtle);
  font-size: 11px;
}
.workspace-indicator::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #91be9e;
}
.profile-button {
  display: flex;
  color: var(--text);
  gap: 10px;
  font-size: 12px;
  text-align: left;
}
.profile-button small {
  display: block;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 400;
}
.company-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 146px;
  padding: 16px 12px 26px;
  background: none;
}
.company-hero h1 {
  font-size: clamp(36px, 4vw, 48px);
  margin: 3px 0 7px;
}
.company-hero p {
  margin: 0;
  max-width: 670px;
  font-size: 13px;
}
.overline {
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 66px;
  border: 1px solid #7c6239;
  border-radius: 13px;
  background: linear-gradient(145deg, #60492d, var(--surface-raised) 85%);
  box-shadow: inset 0 1px 0 #eec27644;
  color: var(--gold);
}
.hero-icon .ui-icon {
  width: 35px;
  height: 35px;
}
.section-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.section-nav > button,
.section-nav > .current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
}
.section-nav .ui-icon {
  color: var(--gold);
  width: 19px;
  height: 19px;
}
.section-nav > .current {
  background: linear-gradient(120deg, #4a371c, #24291b);
  border-color: #68502d;
  color: var(--text);
}
.section-nav > button:hover {
  color: var(--text);
  background: var(--surface);
}
.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 22px;
  padding: 18px 8px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  background: linear-gradient(130deg, #12271f, #081b16);
}
.overview-stats > div {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 2px 20px;
  border-right: 1px solid var(--border);
}
.overview-stats > div:last-child {
  border: 0;
}
.overview-stats .ui-icon {
  width: 26px;
  height: 26px;
  color: var(--gold);
}
.overview-stats strong {
  display: block;
  font: 500 30px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.overview-stats span {
  color: var(--text-muted);
  font-size: 11px;
}
.company-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
  gap: 18px;
}
.panel {
  min-width: 0;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface), var(--surface) 85%);
  box-shadow: var(--shadow);
}
.company-grid > .panel {
  margin: 0;
  padding: 22px;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.panel-title {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.panel-title > .ui-icon {
  margin-top: 2px;
  color: var(--gold);
  width: 25px;
  height: 25px;
}
.panel-title h2 {
  margin: 0 0 4px;
  font-size: 21px;
}
.panel-title p {
  margin: 0;
  font-size: 11px;
}
.panel-heading > .quiet {
  font-size: 11px;
  white-space: nowrap;
}
.panel-heading > .quiet .ui-icon {
  width: 15px;
  height: 15px;
}
.count-badge {
  display: grid;
  place-items: center;
  min-width: 29px;
  height: 27px;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  border-radius: 7px;
  color: var(--gold-bright);
  font-size: 12px;
}
.search-field {
  position: relative;
  margin-bottom: 18px;
}
.search-field > .ui-icon {
  position: absolute;
  top: 12px;
  left: 13px;
  width: 17px;
  height: 17px;
  color: var(--text-subtle);
}
.search-field input {
  padding-left: 40px;
  font-size: 12px;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
th,
td {
  border-bottom: 1px solid var(--border);
  padding: 14px 10px;
  vertical-align: middle;
}
th {
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 500;
}
td {
  color: var(--text-muted);
}
td:first-child {
  color: var(--text);
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: #a4c6a905;
}
.table-wrap {
  overflow-x: auto;
}
.company-directory th:first-child,
.company-directory td:first-child {
  padding-left: 0;
}
.company-directory td {
  font-size: 11px;
}
.company-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 165px;
}
.company-cell strong {
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.company-monogram {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  flex: none;
  background: linear-gradient(135deg, #2c4938, #102b20);
  border: 1px solid #567451;
  border-radius: 9px;
  color: var(--gold-bright);
  font: 500 14px var(--font-display);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}
.status-badge::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.status-active,
.status-completed {
  color: var(--success);
  background: var(--success-surface);
  border-color: #2b5c45;
}
.status-draft {
  color: var(--gold-bright);
  background: var(--warning-surface);
  border-color: var(--border-gold);
}
.status-cancelled {
  color: var(--danger);
  background: var(--danger-surface);
  border-color: #754a45;
}
.company-create {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 15px;
}
.company-create > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  width: fit-content;
  color: var(--gold);
  font-size: 12px;
}
.company-create > summary::-webkit-details-marker {
  display: none;
}
.company-create > summary .ui-icon {
  width: 16px;
  height: 16px;
}
.company-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: end;
  margin-top: 20px;
}
.company-form > button {
  grid-column: 1/-1;
  justify-self: start;
  font-size: 12px;
}
.workspace-guide {
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #172b20, #0c1b14 70%);
}
.guide-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 30px 0 12px;
  color: var(--gold-bright);
}
.guide-emblem > .ui-icon {
  width: 39px;
  height: 39px;
}
.guide-emblem > span {
  font: italic 29px var(--font-display);
}
.workspace-guide > p {
  max-width: 290px;
  align-self: center;
  text-align: center;
  font-size: 12px;
  margin-bottom: 24px;
}
.workspace-guide > button {
  justify-content: space-between;
  margin-top: auto;
  font-size: 12px;
}
.workspace-guide > small {
  color: var(--text-subtle);
  text-align: center;
  font-size: 10px;
  margin-top: 12px;
}
.recent-event-list {
  display: grid;
}
.recent-event {
  display: flex;
  justify-content: flex-start;
  gap: 13px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-weight: 400;
}
.recent-event:last-child {
  border: 0;
}
.recent-event:hover {
  background: #a4c6a908;
  box-shadow: none;
}
.event-date {
  width: 40px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--surface-raised);
  border: 1px solid var(--border-gold);
  border-radius: 7px;
  color: var(--gold-bright);
}
.event-date strong {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
}
.event-date small {
  font-size: 9px;
}
.event-title {
  flex: 1;
  min-width: 0;
}
.event-title strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.event-title small {
  display: block;
  font-size: 10px;
  color: var(--text-subtle);
}
.recent-event > .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--gold);
}
.organisation-access .panel-title {
  margin-bottom: 15px;
}
.shortcut-row {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 18px 0;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
}
.shortcut-row > .ui-icon {
  width: 20px;
  height: 20px;
  color: var(--gold);
}
.shortcut-row > .ui-icon:last-child {
  width: 15px;
  height: 15px;
}
.shortcut-row > span {
  flex: 1;
}
.shortcut-row strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.shortcut-row small {
  display: block;
  font-size: 10px;
  color: var(--text-subtle);
  margin-top: 4px;
}
.shortcut-row:hover {
  background: #a4c6a908;
  box-shadow: none;
}
.workspace-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 21px;
  color: var(--text-subtle);
  font-size: 10px;
}
.workspace-footer .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--success);
}
.empty-state {
  padding: 30px 16px;
  text-align: center;
}
.empty-state > .ui-icon {
  color: var(--gold);
  width: 32px;
  height: 32px;
}
.empty-state h3 {
  margin: 12px 0 5px;
  font: 500 22px var(--font-display);
}
.empty-state p {
  font-size: 12px;
}
.empty-state.compact {
  padding: 12px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}
.page-heading p {
  margin: 10px 0 0;
}
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: end;
}
.event-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.event-form .wide,
.form-actions {
  grid-column: 1/-1;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}
.location-form {
  margin-top: 24px;
}
.panel h3 {
  font-size: 15px;
  margin: 24px 0 10px;
}
.action {
  padding: 5px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.invitation {
  margin-top: 22px;
  padding: 16px;
  background: var(--success-surface);
  border: 1px solid #517661;
  border-radius: 8px;
}
.invitation input {
  font-size: 13px;
}
.error {
  color: var(--danger);
}
.notice {
  font-size: 13px;
}
.preview-notice {
  color: var(--warning);
  background: var(--warning-surface);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  font-size: 12px;
  padding: 10px 12px;
  margin: 14px 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  padding: 10px 20px;
  z-index: 30000;
  background: var(--gold);
  color: var(--gold-ink);
  border-radius: 6px;
}
.skip-link:focus {
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.planning-content {
  max-width: none;
  min-width: 0;
  padding: 12px;
}
.planning-layout {
  display: block;
  min-height: 100vh;
  background: var(--background);
}
.planning-layout > .app-sidebar {
  display: none;
}
.planning-layout .planning-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 12px;
}
.planning-layout .planning-content .planner-v2 {
  margin-top: 0;
  min-height: calc(100vh - 24px);
}
@media (max-width: 1180px) {
  .layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .app-sidebar {
    padding-inline: 12px;
  }
  .app-sidebar .brand {
    font-size: 20px;
    gap: 7px;
  }
  .content {
    padding-inline: 22px;
  }
  .company-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(265px, 1fr);
  }
  .company-grid > .panel {
    padding: 18px;
  }
  .overview-stats > div {
    padding-inline: 14px;
    gap: 10px;
  }
  .section-nav > button,
  .section-nav > .current {
    padding-inline: 13px;
  }
}
@media (max-width: 1000px) {
  .company-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-guide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
  }
  .workspace-guide .panel-title {
    grid-column: 1;
  }
  .workspace-guide .guide-emblem {
    display: none;
  }
  .workspace-guide > p {
    grid-column: 1;
    text-align: left;
    margin: 0;
  }
  .workspace-guide > button {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .workspace-guide > small {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    align-self: start;
  }
}
@media (max-width: 760px) {
  .layout {
    display: block;
  }
  .app-sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 18px 16px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--border-gold);
    background: var(--surface-input);
  }
  .app-sidebar .brand {
    margin: 0 0 17px;
    font-size: 23px;
  }
  .app-sidebar .side-label,
  .sidebar-note,
  .account {
    display: none;
  }
  .app-sidebar nav {
    display: flex;
    gap: 6px;
  }
  .app-sidebar nav button {
    justify-content: center;
    gap: 7px;
    width: auto;
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
  }
  .content {
    padding: 0 16px 28px;
  }
  .app-topbar {
    min-height: 66px;
    margin-bottom: 8px;
  }
  .workspace-indicator,
  .profile-button > span:last-child {
    display: none;
  }
  .profile-button {
    padding: 6px;
  }
  .company-hero {
    min-height: 154px;
    gap: 14px;
    padding-inline: 0;
    background-size: 450px;
  }
  .hero-icon {
    width: 52px;
    height: 58px;
  }
  .company-hero p {
    font-size: 12px;
  }
  .overline {
    font-size: 9px;
  }
  .section-nav {
    overflow-x: auto;
    gap: 4px;
  }
  .section-nav > button,
  .section-nav > .current {
    flex: none;
    padding: 9px 12px;
    font-size: 11px;
  }
  .overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 0;
    gap: 0;
  }
  .overview-stats > div {
    padding: 14px 18px;
  }
  .overview-stats > div:nth-child(2) {
    border: 0;
  }
  .overview-stats > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }
  .overview-stats strong {
    font-size: 28px;
  }
  .panel {
    padding: 18px;
  }
  .workspace-guide {
    display: flex;
    gap: 0;
  }
  .workspace-guide .guide-emblem {
    display: flex;
    margin: 24px 0 12px;
  }
  .workspace-guide > p {
    text-align: center;
    margin: 0 auto 20px;
  }
  .workspace-guide > button {
    align-self: stretch;
  }
  .workspace-guide > small {
    margin-top: 12px;
    align-self: center;
  }
  .company-form,
  .event-form {
    grid-template-columns: 1fr;
  }
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .breadcrumb {
    gap: 8px;
    font-size: 11px;
  }
  .recent-event {
    gap: 8px;
  }
  .recent-event > .ui-icon {
    display: none;
  }
  .event-title strong {
    font-size: 11px;
  }
  .planning-layout .planning-content {
    padding: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-contrast: more) {
  :root {
    --text-muted: #e2e8df;
    --text-subtle: #d1dcd2;
    --border: #82998a;
    --border-gold: #c5a369;
  }
}

/* Planner: event-planning */
/* Layout and timeline styles adapted from migration/reference/event_planning_V2.html.txt. */
.planner-v2 {
  --fg: var(--text);
  --mut: var(--text-muted);
  --card: var(--surface);
  --surface-2: var(--surface-raised);
  --surface-3: var(--surface-input);
  --border-strong: var(--border);
  --panel-gradient: linear-gradient(
    180deg,
    rgba(14, 19, 42, 0.96),
    rgba(10, 15, 32, 0.98)
  );
  margin-top: 24px;
  padding: 16px;
  border-radius: 12px;
  background: var(--background);
  color: var(--fg);
  font-size: 13px;
}
.planner-v2 p,
.planner-v2 label {
  color: var(--mut);
}
.planner-v2 button,
.planner-v2 input {
  font: inherit;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  padding: 8px 12px;
}
.planner-v2 input {
  background: var(--surface-input);
  border-color: var(--border);
}
.planner-v2-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.planner-v2-header h2 {
  font-size: 20px;
  margin: 0;
}
.planner-v2-header span {
  color: var(--mut);
}
.planner-v2-notice {
  font-size: 12px;
}
.planner-v2-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 12px;
}
.planner-v2-sidebar,
.planner-v2-main {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.planner-v2-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
}
.planner-v2-section {
  background: var(--panel-gradient);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 8px;
  display: grid;
  gap: 7px;
}
.planner-v2-section b {
  font-size: 11px;
}
.planner-v2-section span {
  color: var(--mut);
}
.planner-v2-active,
.planner-v2 .planner-v2-primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-color: var(--gold-deep);
  color: #fff;
}
.planner-v2-active {
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
}
.planner-v2-date {
  display: flex;
  gap: 5px;
}
.planner-v2-date input {
  min-width: 0;
  padding: 6px;
}
.planner-v2-date button {
  padding: 6px 10px;
}
.planner-v2-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.planner-v2-toolbar div div {
  color: var(--mut);
  font-size: 12px;
}
.planner-v2-toolbar input {
  max-width: 240px;
}
.planner-v2-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 4px 18px 0;
}
.planner-v2 .timeline-slot {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 4px;
  align-items: stretch;
}
.planner-v2 .timeline-time {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-3);
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.planner-v2 .timeline-time strong {
  font-size: 14px;
  line-height: 1;
}
.planner-v2 .timeline-time span {
  font-size: 9px;
  color: var(--mut);
}
.planner-v2 .timeline-dropzone {
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 4px 6px;
  background: var(--surface-3);
  min-height: 28px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.planner-v2 .timeline-item-card {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 6px;
  display: grid;
  gap: 5px;
}
.planner-v2 .timeline-item-card span {
  color: var(--mut);
  font-size: 11px;
}
.planner-v2-form {
  display: grid;
  gap: 12px;
  max-width: 480px;
  background: var(--panel-gradient);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 14px;
}
.planner-v2-form h3 {
  margin: 0;
}
.planner-v2-form label {
  display: grid;
  gap: 6px;
}
@media (max-width: 700px) {
  .planner-v2-layout {
    grid-template-columns: 1fr;
  }
  .planner-v2-toolbar input {
    max-width: none;
  }
}
.planner-v2 select,
.planner-v2 textarea {
  font: inherit;
  color: var(--fg);
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  width: 100%;
}
.planner-v2 select[multiple] {
  min-height: 80px;
}
.planner-v2-form {
  max-width: none;
  margin-top: 16px;
}
.planner-v2-form fieldset {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.planner-v2-form legend {
  font-weight: 700;
}
.planner-v2-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.planner-v2-form .planner-v2-check {
  display: flex;
  align-items: center;
}
.planner-v2-check input {
  width: auto;
}
.planner-v2 .timeline-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.planner-item-actions {
  display: flex;
  gap: 4px;
}
.planner-item-actions button {
  padding: 5px;
}
.planner-delete-confirm {
  font-size: 12px;
  padding: 8px;
}
.planner-deleted {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
@media (max-width: 700px) {
  .planner-v2-fields {
    grid-template-columns: 1fr;
  }
}
.planner-day-label {
  display: grid;
  gap: 6px;
}
.planner-day-label label {
  display: grid;
  gap: 4px;
}
.planner-view-toggle {
  display: flex;
  gap: 4px;
}
.planner-view-toggle button {
  flex: 1;
  padding: 7px 4px;
  font-size: 11px;
}
.planner-calendar {
  --fc-border-color: var(--border);
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-raised);
  --fc-today-bg-color: rgba(42, 73, 255, 0.1);
  --fc-event-bg-color: var(--gold-deep);
  --fc-event-border-color: var(--gold);
  --fc-list-event-hover-bg-color: var(--surface-raised);
  min-width: 0;
  overflow: auto;
}
.planner-calendar .fc {
  min-width: 550px;
}
.planner-calendar .fc .fc-toolbar-title {
  font-size: 17px;
}
.planner-calendar .fc .fc-button {
  font-size: 12px;
}
.planner-calendar a {
  color: inherit;
}
.planner-calendar .fc-event {
  cursor: pointer;
}
.planner-section-content {
  display: grid;
  gap: 12px;
}
.planner-section-content h3,
.planner-section-content h4,
.planner-section-content p {
  margin: 0;
}
.planner-section-content > input {
  max-width: 360px;
}
.planner-stat-grid,
.planner-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.planner-stat-grid > div,
.planner-person,
.planner-list-row {
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px;
}
.planner-stat-grid > div {
  display: grid;
  gap: 5px;
}
.planner-stat-grid strong {
  font-size: 24px;
}
.planner-stat-grid span {
  color: var(--mut);
}
.planner-person {
  display: flex;
  gap: 10px;
}
.planner-person a {
  display: block;
  color: var(--gold-bright);
  overflow-wrap: anywhere;
}
.planner-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  font-weight: 700;
}
.planner-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.planner-config-form {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}
.planner-config-form label {
  display: grid;
  gap: 4px;
}
.planner-resource-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.planner-v2 .panel {
  color: var(--text);
  background: var(--surface-raised);
}
.planner-gantt {
  overflow: auto;
}
.planner-gantt-hours {
  display: flex;
  justify-content: space-between;
  margin-left: 180px;
  min-width: 600px;
  color: var(--mut);
}
.planner-gantt-row {
  display: flex;
  min-width: 780px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.planner-gantt-name {
  width: 172px;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-gantt-track {
  position: relative;
  flex: 1;
  height: 30px;
  border: 1px solid var(--border-strong);
  background: repeating-linear-gradient(
    to right,
    var(--surface-input) 0,
    var(--surface-input) calc(25% - 1px),
    var(--border) calc(25% - 1px),
    var(--border) 25%
  );
}
.planner-gantt-track button {
  position: absolute;
  top: 3px;
  height: 22px;
  min-width: 5px;
  padding: 0;
  background: var(--gold);
  border-color: var(--gold);
  border-radius: 4px;
}
.planner-gantt-track button:disabled {
  opacity: 1;
}
.planner-tv {
  padding: 20px;
  background: var(--background);
  min-height: 60vh;
}
.planner-tv-item {
  display: flex;
  gap: 24px;
  padding: 20px;
  border-bottom: 1px solid var(--border-strong);
  font-size: clamp(20px, 3vw, 36px);
}
.planner-tv-item time {
  color: var(--gold-bright);
}
.partner-board {
  display: grid;
  grid-auto-columns: minmax(220px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}
.partner-lane {
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  min-height: 180px;
}
.partner-lane h4 {
  margin: 0 0 10px;
}
.partner-card {
  display: grid;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 10px;
}
.partner-card p {
  margin: 0;
}
.partner-card button {
  justify-self: start;
}
.planner-checklist-item {
  display: flex;
  gap: 8px;
  align-items: center;
}
.planner-checklist-item input {
  width: auto;
}
.planner-public-link {
  color: var(--gold-bright);
  overflow-wrap: anywhere;
}
.planner-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.planner-photo-grid figure {
  margin: 0;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.planner-photo-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
}
.planner-photo-grid p {
  margin: 4px 0;
}
.planner-photo-grid small {
  color: var(--text-muted);
}
.planner-photo-grid figcaption {
  overflow-wrap: anywhere;
}
.planner-v2 .timeline-slot {
  min-height: 38px;
}
.planner-v2 .timeline-time {
  justify-content: flex-start;
}
.planner-v2 .timeline-time .timeline-new {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 999px;
}
.planner-v2 .timeline-dropzone {
  justify-content: center;
  min-height: 36px;
}
.planner-v2 .timeline-empty-add {
  align-self: start;
  padding: 2px 7px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-subtle);
  border-style: dashed;
  font-size: 10px;
}
.planner-v2 .timeline-item-card {
  align-items: flex-start;
  gap: 10px;
}
.timeline-card-main {
  min-width: 0;
  flex: 1;
}
.timeline-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.timeline-card-heading time {
  color: var(--gold-bright);
  font-weight: 700;
  white-space: nowrap;
}
.timeline-card-heading strong {
  font-size: 14px;
}
.timeline-status {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}
.timeline-card-main p {
  margin: 4px 0;
  white-space: pre-wrap;
}
.timeline-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.timeline-card-chips span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}
.planner-person-button {
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.planner-person-button[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--selected);
}
.planner-avatar {
  overflow: hidden;
}
.planner-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.planner-person-detail {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
}
.planner-person-detail h4 {
  margin: 0 0 6px;
  font-size: 19px;
}
.planner-person-detail a {
  display: block;
  color: var(--gold-bright);
}
.planner-person-photo {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gold);
  display: grid;
  place-items: center;
  font-size: 40px;
  font-weight: 700;
}
.planner-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.planner-resource-buttons button[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
}
.regie-columns {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(230px, 1.5fr) minmax(
      220px,
      1.3fr
    );
  gap: 10px;
}
.regie-columns section {
  min-width: 0;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.regie-columns section h4 {
  margin: 0 0 4px;
}
.regie-columns section button {
  text-align: left;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.regie-columns section button[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
}
.regie-columns section small {
  color: var(--mut);
}
.regie-columns section label {
  display: grid;
  gap: 5px;
}
@media (max-width: 1050px) {
  .regie-columns {
    grid-template-columns: 1fr;
  }
}
.planner-rundown-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.planner-rundown-filters label {
  display: grid;
  gap: 5px;
  min-width: 190px;
}
.planner-rundown-day {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
}
.planner-rundown-day h4 {
  background: var(--surface-raised);
  padding: 12px;
  margin: 0;
}
.planner-rundown-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-top: 1px solid var(--border-strong);
}
.planner-rundown-item p {
  white-space: pre-wrap;
  margin: 5px 0;
}
.planner-rundown-time {
  display: grid;
  gap: 3px;
  color: var(--gold-bright);
  font-weight: 700;
}
.planner-rundown-time small {
  font-weight: 400;
  color: var(--mut);
}
.planner-rundown-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.planner-rundown-heading span {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
}
@media (max-width: 700px) {
  .planner-rundown-item {
    grid-template-columns: 1fr;
  }
  .planner-rundown-time {
    display: flex;
    gap: 8px;
  }
}

.planner-resource-sidebar {
  display: grid;
  gap: 9px;
  margin-top: 4px;
  min-width: 0;
}
.planner-resource-search {
  display: flex;
  align-items: center;
  gap: 4px;
}
.planner-resource-search input {
  min-width: 0;
  width: 100%;
  font-size: 12px;
  padding: 8px;
}
.planner-resource-search button {
  padding: 5px 8px;
}
.planner-resource-switches {
  display: grid;
  gap: 5px;
}
.planner-resource-switches button {
  text-align: left;
  font-size: 12px;
  padding: 6px 9px;
}
.planner-resource-switches button[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--selected);
}
.planner-resource-solo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-raised);
  font-size: 11px;
}
.planner-resource-solo-bar button {
  font-size: 10px;
  padding: 4px 6px;
  white-space: nowrap;
}
.planner-resource-section {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-3);
  padding: 5px;
  min-width: 0;
}
.planner-resource-section header {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.planner-resource-section header strong {
  font-size: 11px;
  flex: 1;
  min-width: 0;
}
.planner-resource-section header small {
  color: var(--mut);
  font-weight: 400;
}
.planner-resource-section header button {
  padding: 3px 6px;
  font-size: 11px;
}
.planner-resource-list {
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 3px;
  padding-top: 5px;
}
.planner-resource-list > button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 4px 6px;
  font-size: 11px;
  min-width: 0;
}
.planner-resource-list > button > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.planner-resource-list > button[aria-pressed="true"] {
  background: var(--selected);
  border-color: var(--gold);
}
.planner-resource-list img,
.planner-resource-initial {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gold);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}
.planner-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.planner-focus-badge {
  border: 1px solid #ae7519;
  border-radius: 999px;
  padding: 7px 10px;
  background: #453118;
  color: #ffbe52;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.planner-toolbar-actions button {
  font-size: 12px;
}
.smoelenboek-upload {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.smoelenboek-upload label {
  display: grid;
  gap: 5px;
}
.item-attachments-list {
  display: grid;
  gap: 6px;
}
.item-attachment-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 7px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
}
.item-attachment-row a {
  color: var(--gold-bright);
  overflow-wrap: anywhere;
}
.item-attachment-row small {
  color: var(--mut);
}
.item-attachment-row button {
  margin-left: auto;
}
/* Event Planning V2 fills the available portal viewport, like the source planner. */
.planner-v2 {
  padding: 0;
  background: var(--background);
  min-height: 100vh;
}
.planner-v2-header {
  min-height: 132px;
  margin-bottom: 14px;
  padding: 20px 32px;
  border: 1px solid var(--border);
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 12%, #251846 0, transparent 36%),
    radial-gradient(circle at 15% 0, var(--surface-raised) 0, transparent 37%),
    var(--surface);
  align-items: flex-start;
}
.planner-v2-header h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 76px);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -0.055em;
  background: linear-gradient(
    105deg,
    var(--text) 2%,
    var(--gold-bright) 39%,
    #b5a2f5 67%,
    #91f1ba 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.planner-v2-header button {
  flex: none;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--surface-input);
  border-color: var(--border);
}
.planner-v2-layout {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.planner-v2-sidebar,
.planner-v2-main {
  border-color: var(--border);
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    var(--surface-raised),
    var(--surface) 45%,
    var(--surface)
  );
  min-width: 0;
}
.planner-v2-sidebar {
  padding: 18px;
  gap: 8px;
}
.planner-v2-sidebar > strong {
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--border);
}
.planner-v2-section {
  padding: 8px;
  border-radius: 14px;
}
.planner-v2-section button {
  text-align: left;
  border-radius: 999px;
  background: var(--surface-input);
  border-color: var(--border);
  padding: 6px 12px;
  font-weight: 700;
}
.planner-v2-section .planner-v2-primary {
  background: linear-gradient(var(--gold), var(--gold-deep));
  border-color: var(--gold);
}
.planner-v2-section:has(> b:nth-child(1)) > button {
  width: 100%;
}
.planner-v2-main {
  padding: 20px;
}
.planner-v2-toolbar {
  padding: 12px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.planner-v2-toolbar strong {
  font-size: 17px;
}
.planner-v2 .timeline-time {
  border-color: var(--border);
}
.planner-v2 .timeline-dropzone {
  border-color: var(--border);
}
@media (max-width: 850px) {
  .planner-v2-layout {
    grid-template-columns: 1fr;
  }
  .planner-v2-header {
    min-height: 100px;
    padding: 18px;
    border-radius: 24px;
  }
  .planner-v2-header h2 {
    font-size: clamp(30px, 5vw, 55px);
  }
}
@media (max-width: 520px) {
  .planner-v2-header {
    align-items: flex-start;
  }
  .planner-v2-header button {
    padding: 6px 9px;
  }
  .planner-v2-main,
  .planner-v2-sidebar {
    padding: 11px;
  }
  .planner-v2-header h2 {
    font-size: 31px;
  }
}
.timeline-signature {
  display: grid;
  justify-items: start;
  gap: 3px;
  margin-top: 7px;
  color: var(--gold-bright);
  font-size: 11px;
}
.timeline-signature img {
  display: block;
  max-width: 150px;
  max-height: 50px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--text);
}
.rundown-archive {
  padding: 14px;
  margin: 12px 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-3);
}
.rundown-archive h4 {
  margin: 0 0 6px;
}
.rundown-archive details {
  margin-top: 12px;
}
.rundown-archive summary {
  cursor: pointer;
}
.rundown-orphan {
  border-top: 1px solid var(--border-strong);
  padding: 10px 0;
  display: grid;
  gap: 4px;
}
.rundown-orphan span {
  font-size: 12px;
  color: var(--mut);
}
.item-linked-checklist {
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-3);
  display: grid;
  gap: 7px;
}
.item-linked-checklist .planner-list-row {
  margin: 0;
}
.item-linked-checklist p {
  margin: 0;
}
.item-linked-checklist .planner-checklist-item {
  font-weight: 500;
}
.item-linked-checklist .planner-checklist-item small {
  color: var(--mut);
}
.timeline-checklist-progress {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 8px;
  border: 1px solid #2e7849;
  border-radius: 999px;
  background: #143725;
  color: #9ff0af;
  font-size: 11px;
  font-weight: 700;
}
.planner-legacy-table {
  overflow: auto;
}
.planner-legacy-table table {
  min-width: 760px;
  color: var(--fg);
}
.planner-legacy-table th,
.planner-legacy-table td {
  border-color: var(--border-strong);
}
.planner-legacy-table input[type="checkbox"] {
  width: auto;
}
.planner-legacy-table button {
  padding: 5px 8px;
}
.planner-v2.planner-max-focus > .planner-v2-header,
.planner-v2.planner-max-focus .planner-v2-sidebar {
  display: none;
}
.planner-v2.planner-max-focus .planner-v2-layout {
  grid-template-columns: minmax(0, 1fr);
}
.planner-v2.planner-max-focus .planner-v2-main {
  min-height: calc(100vh - 16px);
}
.planner-v2 .timeline-item-card .timeline-select {
  width: auto;
  flex: none;
  margin: 5px 0;
  accent-color: var(--gold);
}
.planner-v2 .timeline-item-selected {
  border-color: var(--gold);
  background: var(--selected);
  box-shadow: inset 3px 0 var(--gold);
}
.planner-v2 .timeline-inline input {
  width: auto;
  min-width: 0;
  padding: 4px 7px;
  border-radius: 999px;
}
.planner-v2 .timeline-inline input[type="time"] {
  width: 92px;
}
.planner-v2 .timeline-inline .timeline-inline-name {
  flex: 1;
  min-width: 180px;
  font-weight: 700;
  font-size: 14px;
}
.planner-v2 .timeline-inline .timeline-inline-type {
  width: 110px;
}
.planner-v2 .timeline-item-card[draggable="true"] {
  cursor: grab;
}
.planner-focus-menu {
  position: relative;
}
.planner-focus-menu > summary {
  cursor: pointer;
  border: 1px solid #9b701d;
  border-radius: 999px;
  padding: 8px 12px;
  color: #ffc35c;
  background: #3b301d;
  font-weight: 700;
}
.planner-focus-options {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  width: min(420px, 90vw);
  max-height: 65vh;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-input);
  box-shadow: 0 12px 35px #0009;
}
.planner-focus-options fieldset {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 8px 0;
  max-height: 180px;
  overflow: auto;
}
.planner-focus-options label {
  display: flex;
  align-items: center;
  font-weight: 500;
}
.planner-focus-options input {
  width: auto;
}
.planner-v2 .timeline-dimmed {
  opacity: 0.42;
}
.planner-v2 .timeline-spotlight {
  border-color: #e5ae39;
  box-shadow: inset 3px 0 #e5ae39;
}
.planner-v2 .timeline-assignment {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.planner-v2 .timeline-assignment button {
  border: 0;
  border-radius: 0;
  padding: 2px 6px;
  font-size: 11px;
  background: transparent;
  color: var(--text-muted);
}
.planner-v2 .timeline-assignment button:hover {
  background: var(--border);
}
.planner-v2 .timeline-assignment-add {
  width: auto;
  max-width: 170px;
  min-width: 85px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
}
.timeline-checkin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
}
.timeline-checkin time {
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--gold-deep);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.timeline-checkin-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--gold-deep);
  flex: none;
}
.timeline-checkin-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.timeline-checkin-content {
  min-width: 0;
}
.timeline-checkin-content > strong {
  font-size: 14px;
}
.timeline-checkin-content > span {
  color: var(--text-muted);
}
.timeline-checkin-points {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}
.timeline-checkin-points label {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #e6c773;
  font-size: 11px;
}
.timeline-checkin-points input {
  width: auto;
  accent-color: #b99127;
}
.timeline-checkin-points small {
  color: var(--text-muted);
}
.planner-day-jumps {
  display: flex;
  gap: 5px;
}
.planner-day-jumps button {
  flex: 1;
  font-size: 11px;
  padding: 6px;
}
.planner-v2-date button[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--selected);
}
.planner-day-label select {
  font-size: 12px;
  padding: 6px;
}
.planner-resource-row {
  display: flex;
  gap: 3px;
  min-width: 0;
}
.planner-resource-list .planner-resource-select {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 4px 6px;
  font-size: 11px;
}
.planner-resource-select > span:nth-child(2) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-resource-select[aria-pressed="true"] {
  background: var(--selected);
  border-color: var(--gold);
}
.planner-resource-list .planner-resource-mute {
  padding: 3px 6px;
  font-size: 11px;
}
.planner-resource-mute[aria-pressed="true"] {
  background: #633c31;
  border-color: #c97751;
}
.planner-v2 .timeline-muted {
  opacity: 0.32;
  filter: saturate(0.4);
}
.planner-recipe-card[draggable="true"] {
  cursor: grab;
}
.planner-recipe-card[draggable="true"]:active {
  cursor: grabbing;
}
.directory-admin [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.directory-admin [role="tab"][aria-selected="true"] {
  background: var(--selected);
  color: #fff;
}
.directory-admin td input[type="text"] {
  min-width: 180px;
  width: 100%;
}
.directory-card {
  background: #fff;
  border: 1px solid #dde2ee;
  border-radius: 12px;
  padding: 12px;
}
.directory-section-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.directory-section-head h3 {
  margin: 0;
  margin-right: auto;
}
.directory-section-head input {
  max-width: 240px;
}
.directory-primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)) !important;
  border-color: var(--gold-deep) !important;
  color: #fff !important;
}
.directory-active,
.directory-inactive {
  display: inline-block;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
}
.directory-active {
  background: #22c55e;
  color: #000;
}
.directory-inactive {
  background: #64748b;
  color: white;
}
.directory-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.directory-dialog {
  background: #fff;
  color: #1c2333;
  border: 1px solid #dde2ee;
  border-radius: 14px;
  padding: 16px;
  width: min(580px, 94vw);
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.directory-dialog h3 {
  margin: 0 0 8px;
}
.directory-dialog label {
  display: block;
  color: #5b6478;
  font-size: 13px;
  margin: 8px 0 4px;
}
.directory-dialog input:not([type="checkbox"]),
.directory-dialog textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
}
.directory-dialog textarea {
  min-height: 72px;
}
.directory-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.directory-dialog .directory-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
}
.directory-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
@media (max-width: 720px) {
  .directory-form-grid {
    grid-template-columns: 1fr;
  }
}
.directory-side {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.directory-side .directory-dialog {
  width: min(480px, 96vw);
  max-height: none;
  border-radius: 0;
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.45);
}
.directory-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #dde2ee;
}
.directory-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.directory-section-head select {
  width: auto;
  max-width: 170px;
}
.directory-availability-list {
  display: grid;
  gap: 7px;
  max-height: 300px;
  overflow: auto;
  margin-top: 10px;
}
.directory-availability-row {
  display: grid;
  grid-template-columns: 105px 100px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid #dde2ee;
  border-radius: 9px;
  background: #f7f9fd;
}
@media (max-width: 720px) {
  .directory-availability-row {
    grid-template-columns: 1fr 1fr;
  }
}
.directory-check-list {
  display: grid;
  gap: 4px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid #cfd6e6;
  border-radius: 10px;
  padding: 8px;
  background: #f7f9fd;
}
.directory-check-list label {
  color: #1c2333;
  margin: 0;
  padding: 3px 4px;
}

.tv-mode-frame {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--background);
}
.tv-mode-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.directory-admin .directory-inline {
  min-width: 110px;
  padding: 6px 8px;
  font-size: 13px;
}
.directory-admin .directory-name {
  min-width: 150px;
  font-weight: 600;
}
.directory-admin .directory-section-head input,
.directory-admin .directory-section-head select {
  background: #f7f9fd;
  border: 1px solid #cfd6e6;
  border-radius: 10px;
  padding: 8px;
  color: #1c2333;
}
.directory-admin .directory-card th,
.directory-admin .directory-card td {
  padding: 8px;
  border-bottom: 1px solid #dde2ee;
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
}
.directory-admin .directory-card button {
  border-radius: 10px;
  padding: 8px 10px;
}
.directory-admin [role="tablist"] {
  background: #fff;
  border: 1px solid #dde2ee;
  border-radius: 12px;
  padding: 12px 12px 0;
  gap: 6px;
}
.directory-admin [role="tab"] {
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
  padding: 10px 14px;
}
.directory-admin [role="tab"][aria-selected="true"] {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-color: var(--gold-deep);
}
/* Directory uses the same dark palette as the Kimi administration page. */
.directory-admin {
  color: var(--text);
}
.directory-admin .directory-card,
.directory-admin [role="tablist"] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.directory-admin .directory-card h3,
.directory-admin .directory-card th,
.directory-admin .directory-card td {
  color: var(--text);
}
.directory-admin .directory-card th,
.directory-admin .directory-card td {
  border-color: var(--border);
}
.directory-admin .directory-section-head input,
.directory-admin .directory-section-head select,
.directory-admin .directory-inline {
  background: var(--surface-input);
  border: 1px solid var(--border);
  color: var(--text);
}
.directory-admin .directory-dialog {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.directory-admin .directory-dialog label {
  color: var(--text-muted);
}
.directory-admin .directory-dialog input:not([type="checkbox"]),
.directory-admin .directory-dialog textarea,
.directory-admin .directory-dialog select {
  background: var(--surface-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 8px;
}
.directory-admin .directory-check-list,
.directory-admin .directory-availability-row {
  background: var(--surface-input);
  border-color: var(--border);
}
.directory-admin .directory-check-list label {
  color: var(--text);
}
.directory-admin .directory-member {
  border-color: var(--border);
}
.directory-photo-preview {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-input);
  margin-top: 6px;
}
.timeline-agent-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
}
.timeline-agent-list span {
  font-size: 11px;
  background: #301a3a;
  border: 1px solid #60406b;
  color: #f5d8fc;
  border-radius: 999px;
  padding: 3px 8px;
}
.planner-availability-warning {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #a66a16;
  border-radius: 10px;
  background: #3d2b12;
  color: #ffdf9c;
}
.planner-availability-warning p {
  margin: 5px 0 0;
}
.directory-group-picker {
  position: relative;
  min-width: 190px;
}
.directory-admin .directory-group-picker-toggle {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
}
.directory-group-picker-panel {
  position: fixed;
  z-index: 20010;
  overflow: auto;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.directory-group-picker-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.directory-group-picker-option:hover {
  background: var(--surface-raised);
}
.directory-group-picker-option input {
  width: auto;
  flex: 0 0 auto;
}
.directory-picker-error {
  display: block;
  color: #ffb4b4;
  font-size: 12px;
}
.planner-v2 .planner-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 240px;
  max-width: calc(100vw - 8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 30px #0009;
}
.planner-v2 .planner-context-menu button {
  text-align: left;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 8px 10px;
}
.planner-v2 .planner-context-menu button:hover,
.planner-v2 .planner-context-menu button:focus {
  background: var(--surface-2);
}
.planner-v2 .timeline-slot.timeline-slot-selected .timeline-time {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.planner-v2 .timeline-time .timeline-slot-select {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
}
.planner-v2 .timeline-time .timeline-slot-select:focus-visible {
  outline: 2px solid var(--gold-bright);
}
.planner-conflict-list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow: auto;
}
.planner-conflict-list article {
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.planner-v2 .planner-conflict-list button {
  padding: 2px 4px;
  margin: 2px 0;
  background: transparent;
  text-align: left;
}

/* Planner: planner-legacy */
.planner-legacy-table td input:not([type="checkbox"]) {
  min-width: 120px;
  padding: 5px 7px;
  font-size: 12px;
}
.planner-legacy-table td input[type="datetime-local"] {
  min-width: 170px;
}
.planner-legacy-table td small[role="alert"] {
  display: block;
  color: #ff9ca8;
}
.planner-legacy-table th {
  position: relative;
}
.planner-column-resize {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
}
.planner-column-resize:hover,
.planner-column-resize:focus-visible {
  background: var(--gold);
  outline: none;
}
.planner-legacy-table td:first-child {
  position: relative;
}
.planner-row-resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  cursor: row-resize;
  touch-action: none;
}
.planner-row-resize:hover,
.planner-row-resize:focus-visible {
  background: var(--gold);
  outline: none;
}
.planner-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.planner-filter-card {
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 8px;
}
.planner-filter-card legend {
  font-weight: 700;
}
.planner-filter-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mut);
}
.planner-v2 .planner-filter-card-head button {
  padding: 3px 7px;
}
.planner-v2 .planner-filter-card input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0;
}
.planner-filter-options {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
  margin-top: 6px;
}
.planner-filter-options label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.planner-v2 .planner-filter-options input {
  width: auto;
}

/* Planner: planner-sidebar-collapse */
.planner-v2 .planner-sidebar-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.planner-v2 .planner-sidebar-header strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planner-v2 .planner-sidebar-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 10px;
  font-size: 15px;
}
.planner-v2 .planner-v2-layout.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}
.planner-v2 .sidebar-collapsed .planner-v2-sidebar {
  padding: 14px;
  align-items: center;
}
.planner-v2 .sidebar-collapsed .planner-sidebar-header {
  border: 0;
  padding: 0;
}
.planner-v2 .sidebar-collapsed .planner-sidebar-header strong,
.planner-v2 .sidebar-collapsed .planner-v2-sidebar > .planner-v2-section,
.planner-v2 .sidebar-collapsed .planner-resource-sidebar {
  display: none;
}
.planner-v2 .sidebar-collapsed .planner-sidebar-toggle {
  border-color: var(--gold);
  background: var(--surface-raised);
}
@media (max-width: 850px) {
  .planner-v2 .planner-v2-layout.sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .planner-v2 .sidebar-collapsed .planner-v2-sidebar {
    align-items: flex-start;
  }
}
.planner-v2.planner-max-focus .planner-v2-layout.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}
.planner-v2 .planner-v2-date select {
  min-width: 0;
  flex: 1;
  padding: 6px;
  border-radius: 10px;
  color: var(--fg);
  background: var(--surface-input);
  border: 1px solid var(--border);
  font: inherit;
}

/* Planner: planner-work-context */
.planner-work-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.planner-work-context summary {
  cursor: pointer;
  font-weight: 700;
}
.planner-work-context label {
  display: grid;
  gap: 4px;
  font-size: 12px;
}
.planner-work-context select {
  min-width: 0;
  color: var(--fg);
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  font: inherit;
}
.planner-work-context .planner-checklist-item {
  display: flex;
  align-items: center;
  gap: 7px;
}
.planner-context-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 5px;
}
.planner-context-metrics > div,
.planner-context-checks > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12px;
}
.planner-context-checks {
  display: grid;
  gap: 4px;
}
.planner-context-checks .is-present {
  border-color: #28785d;
}
.planner-context-checks .is-missing {
  border-color: #755a32;
}
.planner-context-checks small {
  color: var(--mut);
}
@media (max-width: 850px) {
  .planner-work-context {
    grid-template-columns: 1fr;
  }
}
.planner-phase-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.planner-v2 .planner-phase-chips button {
  font-size: 11px;
  padding: 5px 8px;
}
.planner-v2 .planner-phase-chips button[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--selected);
}
.planner-v2 .timeline-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.planner-v2 .timeline-flag > span {
  color: #ffd58c;
  font-size: 11px;
}
.planner-v2 .timeline-flag summary {
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 4px 7px;
}
.planner-v2 .timeline-flag form {
  position: absolute;
  z-index: 5;
  min-width: 240px;
}
.planner-v2 .timeline-item-card.timeline-trigger {
  border-style: dashed;
}
.planner-v2 .timeline-item-card.timeline-queue {
  border-color: #9d6a20;
}
.planner-v2 .timeline-signature-required {
  display: inline-flex;
  width: max-content;
  border: 1px solid #846532;
  border-radius: 9px;
  padding: 3px 6px;
  color: #f3d69a;
  font-size: 11px;
}
.planner-context-partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}
.planner-context-partner span {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px 6px;
}

/* Published public-rundown */
html.public-rundown {
  color-scheme: dark;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: var(--background);
  color: var(--text);
}
html.public-rundown * {
  box-sizing: border-box;
}
html.public-rundown body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 10% 0%, #183456, var(--background) 45%);
}
html.public-rundown main {
  max-width: 1150px;
  margin: 0 auto;
  padding: 28px 16px 80px;
}
html.public-rundown header {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(120deg, #132e4d, #171b3c 65%, #1b3152);
  padding: 26px;
  margin-bottom: 18px;
}
html.public-rundown header span {
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 700;
}
html.public-rundown h1 {
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.1;
  margin: 10px 0 18px;
}
html.public-rundown header p {
  color: var(--text-muted);
  margin: 0;
}
html.public-rundown .rundown-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
}
html.public-rundown .rundown-item time {
  color: var(--gold-bright);
  font-weight: 750;
}
html.public-rundown .rundown-item time small {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-weight: 400;
}
html.public-rundown .rundown-item h2 {
  font-size: 17px;
  margin: 0 0 6px;
}
html.public-rundown .rundown-item p {
  white-space: pre-wrap;
  color: var(--text-muted);
  margin: 8px 0;
}
html.public-rundown .rundown-item .feedback {
  border-left: 3px solid #5b79cd;
  padding-left: 10px;
}
html.public-rundown .badges,
html.public-rundown .files,
html.public-rundown .checklist-links {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
html.public-rundown .badges span,
html.public-rundown .files a,
html.public-rundown .checklist-links a {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}
html.public-rundown .files {
  margin-top: 12px;
}
html.public-rundown .files a,
html.public-rundown .checklist-links a {
  color: var(--gold-bright);
}
html.public-rundown .files a:hover,
html.public-rundown .checklist-links a:hover {
  text-decoration: underline;
}
html.public-rundown .photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
html.public-rundown .photos img {
  width: 130px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
html.public-rundown .checklist-links {
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-input);
}
html.public-rundown .checklist-links strong {
  margin-right: 8px;
}
@media (max-width: 650px) {
  html.public-rundown .rundown-item {
    grid-template-columns: 1fr;
  }
  html.public-rundown .rundown-item time small {
    display: inline;
    margin-left: 8px;
  }
}
html.public-rundown .signature {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 12px;
}
html.public-rundown .signature img {
  max-width: 200px;
  max-height: 75px;
  object-fit: contain;
  background: #f2f5fa;
  border: 1px solid #51658f;
  border-radius: 7px;
}
html.public-rundown .sign-form {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
html.public-rundown .sign-form summary {
  cursor: pointer;
  color: var(--gold-bright);
  font-weight: 700;
}
html.public-rundown .sign-form form {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  max-width: 600px;
}
html.public-rundown .sign-form label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 13px;
}
html.public-rundown .sign-form input,
html.public-rundown .sign-form textarea {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-input);
  color: #fff;
}
html.public-rundown .sign-form canvas {
  display: block;
  width: 100%;
  height: auto;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  touch-action: none;
}
html.public-rundown .sign-form button {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--gold-deep);
  color: #fff;
  cursor: pointer;
}
html.public-rundown .sign-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Published public-checklist */
html.public-checklist {
  color-scheme: dark;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: var(--background);
  color: var(--text);
}
html.public-checklist * {
  box-sizing: border-box;
}
html.public-checklist body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 10% 0%, #183456, var(--background) 45%);
}
html.public-checklist main {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 16px 80px;
}
html.public-checklist header {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(120deg, #132e4d, #171b3c 65%, #1b3152);
  padding: 24px;
  margin-bottom: 18px;
}
html.public-checklist header span {
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 700;
}
html.public-checklist h1 {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.1;
  margin: 10px 0 18px;
}
html.public-checklist header p {
  color: var(--text-muted);
  margin: 0;
}
html.public-checklist .checklist {
  display: grid;
  gap: 9px;
}
html.public-checklist .item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 8px 12px;
}
html.public-checklist .item.done {
  border-color: #25755d;
  background: #102a2c;
}
html.public-checklist .item button {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 8px 0;
  width: 100%;
  text-align: left;
  color: inherit;
  font: 600 16px system-ui;
  cursor: pointer;
}
html.public-checklist .item button:hover {
  color: var(--gold-bright);
}
html.public-checklist .item .check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid #849bc5;
  border-radius: 6px;
  color: #dcfff0;
}
html.public-checklist .item.done .check {
  background: #1f9971;
  border-color: #1f9971;
}
html.public-checklist .item.done button > span:last-child {
  text-decoration: line-through;
  color: #adc7c0;
}
html.public-checklist .item p {
  white-space: pre-wrap;
  margin: 0 0 8px 36px;
  color: var(--text-muted);
  font-size: 13px;
}
html.public-checklist button:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 4px;
}

/* TV workspace: common — display themes and broadcast layout retained. */
/* SmartVisitor Admin - Common Styles */
/* Gedeelde CSS voor alle pagina's */
/* Build: 2026-01-07-v1 */

/* =====================================   CUSTOM SCROLLBARS
   ============================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
html.tv-workspace ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.tv-workspace ::-webkit-scrollbar-track {
  background: var(--surface-input);
  border-radius: 5px;
}

html.tv-workspace ::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
  border: 2px solid var(--surface-input);
}

html.tv-workspace ::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

html.tv-workspace ::-webkit-scrollbar-thumb:active {
  background: var(--gold);
}

html.tv-workspace ::-webkit-scrollbar-corner {
  background: var(--surface-input);
}

/* Firefox */
html.tv-workspace * {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--surface-input);
}

/* Sidebar specific scrollbar (slightly thinner) */
html.tv-workspace .nav-sidebar::-webkit-scrollbar {
  width: 6px;
}

html.tv-workspace .nav-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 1px solid var(--surface-input);
}

html.tv-workspace .nav-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

/* Table containers scrollbar */
html.tv-workspace .table-container::-webkit-scrollbar,
html.tv-workspace .modal-body::-webkit-scrollbar,
html.tv-workspace .panel-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Code/pre blocks scrollbar */
html.tv-workspace pre::-webkit-scrollbar,
html.tv-workspace code::-webkit-scrollbar,
html.tv-workspace .code-block::-webkit-scrollbar {
  height: 6px;
}

html.tv-workspace pre::-webkit-scrollbar-thumb,
html.tv-workspace code::-webkit-scrollbar-thumb,
html.tv-workspace .code-block::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}

/* =====================================   BREADCRUMBS
   ============================================ */

html.tv-workspace #breadcrumbs {
  padding: 8px 16px;
  background: var(--surface-input);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

html.tv-workspace .breadcrumb-link {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s;
}

html.tv-workspace .breadcrumb-link:hover {
  color: var(--gold-bright);
  text-decoration: underline;
}

html.tv-workspace .breadcrumb-separator {
  color: var(--text-muted);
  margin: 0 4px;
}

html.tv-workspace .breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}

/* =====================================   TERUG KNOP
   ============================================ */

html.tv-workspace #btnBack {
  display: none;
  margin-right: 8px;
}

html.tv-workspace #btnBack::before {
  content: "←";
  margin-right: 4px;
}

/* =====================================   TOOLTIPS
   ============================================ */

html.tv-workspace .tooltip {
  animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Tooltip arrow */
html.tv-workspace .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--surface-raised);
}

/* =====================================   MODAL STYLES
   ============================================ */

html.tv-workspace .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 16px;
  animation: fadeIn 0.2s ease-out;
}

html.tv-workspace .modal.active {
  display: flex;
}

html.tv-workspace .modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  width: 90%;
  flex-shrink: 0;
  overflow-x: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.3s ease-out;
}

html.tv-workspace body.modal-open {
  overflow: hidden;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  z-index: 2600;
  align-items: center;
  justify-content: center;
  padding: 72px 32px 32px;
  background: rgba(3, 7, 18, 0.72);
  animation: none;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  overscroll-behavior: contain;
}

html.tv-workspace body.admin-wow > .modal[data-modal-ux="shared-form"] {
  position: fixed;
  inset: 0;
  z-index: 2600;
}

html.tv-workspace .modal[data-modal-ux="shared-form"].active {
  display: flex;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-content,
html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-dialog,
html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-card {
  width: min(1280px, calc(100vw - 64px));
  max-width: none;
  max-height: calc(100vh - 104px);
  overflow-x: hidden;
  overflow-y: hidden !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(68, 88, 132, 0.92);
  background: linear-gradient(
    180deg,
    rgba(18, 24, 44, 0.98) 0%,
    rgba(10, 16, 32, 0.98) 100%
  );
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55);
  animation: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-content > h3,
html.tv-workspace .modal[data-modal-ux="shared-form"] .modal-header {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 0 0 14px;
  background: linear-gradient(
    180deg,
    rgba(18, 24, 44, 0.99) 72%,
    rgba(18, 24, 44, 0.92) 100%
  );
  border-bottom: 1px solid rgba(68, 88, 132, 0.4);
}

html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-content > h3 {
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* Keep the primary modal actions in the user's viewport. The modal shell
   owns the height; its content areas scroll underneath the sticky title and
   action bars instead of pushing the buttons below the fold. */
html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-content > h3,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .modal-header,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-dialog
  > .modal-header,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-card
  > .modal-header {
  order: 0;
  flex: 0 0 auto;
  padding: 22px 22px 14px;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-content > form,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .agreement-form,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .modal-form,
html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-dialog > form,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-dialog
  > .agreement-form,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-dialog
  > .modal-form,
html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-card > form,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-card
  > .agreement-form,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-card
  > .modal-form {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  order: 2;
  gap: 14px;
}

html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .modal-grid,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-dialog
  > .modal-grid,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-card
  > .modal-grid,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .signature-dashboard,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-dialog
  > .signature-dashboard,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-card
  > .signature-dashboard {
  order: 2;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 22px;
}

html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .modal-footer,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .modal-actions,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-dialog
  > .modal-footer,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-dialog
  > .modal-actions,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-card
  > .modal-footer,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-card
  > .modal-actions {
  order: 1;
  position: sticky;
  top: 0;
  bottom: auto;
  z-index: 4;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 22px;
  background: linear-gradient(
    180deg,
    rgba(18, 24, 44, 0.99) 0%,
    rgba(18, 24, 44, 0.96) 82%,
    rgba(18, 24, 44, 0) 100%
  );
  border-top: 0;
  border-bottom: 1px solid rgba(68, 88, 132, 0.4);
}

html.tv-workspace .modal[data-modal-ux="shared-form"] form > .modal-footer,
html.tv-workspace .modal[data-modal-ux="shared-form"] form > .modal-actions {
  order: -1;
}

html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .modal-footer
  + *,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-dialog
  > .modal-footer
  + *,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-card
  > .modal-footer
  + *,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .modal-actions
  + *,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-dialog
  > .modal-actions
  + *,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-card
  > .modal-actions
  + * {
  min-height: 0;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] .agreement-body,
html.tv-workspace .modal[data-modal-ux="shared-form"] .signature-form-body {
  min-height: 0;
  overflow: auto;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] .signature-editor {
  min-height: 0;
  overflow: hidden;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] .signature-form-footer {
  order: -1;
  top: 0;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-content > form,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .agreement-form,
html.tv-workspace
  .modal[data-modal-ux="shared-form"]
  > .modal-content
  > .modal-form {
  display: grid;
  gap: 14px;
  min-height: 0;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] input,
html.tv-workspace .modal[data-modal-ux="shared-form"] select,
html.tv-workspace .modal[data-modal-ux="shared-form"] textarea {
  background: var(--surface-input);
  border-color: #30426d;
  color: #eef4ff;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] label {
  color: #c8d4ef;
}

html.tv-workspace .modal[data-modal-ux="shared-form"] .modal-footer,
html.tv-workspace .modal[data-modal-ux="shared-form"] .modal-actions,
html.tv-workspace .modal[data-modal-ux="shared-form"] form > div:last-child {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 2px;
  background: linear-gradient(
    180deg,
    rgba(18, 24, 44, 0) 0%,
    rgba(18, 24, 44, 0.92) 24%,
    rgba(18, 24, 44, 0.99) 100%
  );
}

html.tv-workspace .modal[data-modal-ux="shared-form"] .modal-footer,
html.tv-workspace .modal[data-modal-ux="shared-form"] .modal-actions {
  border-top: 1px solid rgba(68, 88, 132, 0.4);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =====================================   GLOBAL SEARCH
   ============================================ */

html.tv-workspace #btnGlobalSearch {
  position: relative;
}

html.tv-workspace #btnGlobalSearch::after {
  content: "⌘K";
  margin-left: 8px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: normal;
}

/* Voor Windows gebruikers */
@media (platform: windows) {
  html.tv-workspace #btnGlobalSearch::after {
    content: "Ctrl+K";
  }
}

/* Search results styling */
html.tv-workspace #searchResults a {
  transition: background 0.2s;
}

html.tv-workspace #searchResults a:hover {
  background: var(--surface-raised);
}

/* Search accordion styling */
html.tv-workspace .search-accordion {
  overflow: hidden;
}

html.tv-workspace .search-accordion-header {
  user-select: none;
}

html.tv-workspace .search-accordion-content {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* =====================================   UTILITY CLASSES
   ============================================ */

/* Hover effects voor klikbare items */
html.tv-workspace .clickable {
  cursor: pointer;
  transition: background 0.2s;
}

html.tv-workspace .clickable:hover {
  background: var(--surface-raised);
}

/* Loading spinner */
html.tv-workspace .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-muted);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Fade in animation */
html.tv-workspace .fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide in animation */
html.tv-workspace .slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================   RESPONSIVE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  html.tv-workspace body {
    overflow-x: hidden;
  }

  html.tv-workspace #breadcrumbs {
    font-size: 11px;
    padding: 6px 12px;
  }

  html.tv-workspace .breadcrumb-separator {
    margin: 0 2px;
  }

  html.tv-workspace #btnGlobalSearch::after {
    display: none;
  }

  html.tv-workspace main,
  html.tv-workspace .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html.tv-workspace .card,
  html.tv-workspace .panel,
  html.tv-workspace .modal-content,
  html.tv-workspace .module-card,
  html.tv-workspace .hero-panel,
  html.tv-workspace .task-card,
  html.tv-workspace .task-list-row {
    border-radius: 14px;
  }

  html.tv-workspace .modal {
    padding: 12px;
  }

  html.tv-workspace .modal-content {
    width: calc(100vw - 24px);
    max-width: none;
    padding: 16px;
  }

  html.tv-workspace .card {
    padding: 12px;
  }

  html.tv-workspace .card table,
  html.tv-workspace .table-container,
  html.tv-workspace .table-wrap,
  html.tv-workspace .webhosting-table-wrap,
  html.tv-workspace .signature-library-list,
  html.tv-workspace .signature-library-editor {
    max-width: 100%;
  }

  html.tv-workspace table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.tv-workspace th,
  html.tv-workspace td {
    padding: 8px 10px;
    font-size: 12px;
  }

  html.tv-workspace .hero-panel,
  html.tv-workspace .split-grid,
  html.tv-workspace .product-workspace-hero,
  html.tv-workspace .tasks-layout,
  html.tv-workspace .agreements-grid,
  html.tv-workspace .finance-preview,
  html.tv-workspace .profile-shell,
  html.tv-workspace .signature-library,
  html.tv-workspace .agreement-grid,
  html.tv-workspace .task-form-grid,
  html.tv-workspace .agreement-form-grid,
  html.tv-workspace .party-form-grid {
    grid-template-columns: 1fr !important;
  }

  html.tv-workspace .stats-grid,
  html.tv-workspace .tasks-stat-grid,
  html.tv-workspace .webhosting-stat-grid,
  html.tv-workspace .finance-grid,
  html.tv-workspace .workspace-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.tv-workspace .kanban-board,
  html.tv-workspace .profile-form.two-col,
  html.tv-workspace .profile-form-grid {
    grid-template-columns: 1fr !important;
  }

  html.tv-workspace .hero-side,
  html.tv-workspace .finance-preview-panel {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  html.tv-workspace .module-card,
  html.tv-workspace .stat-card,
  html.tv-workspace .task-stat-card,
  html.tv-workspace .agreement-stat-card,
  html.tv-workspace .webhosting-stat-card {
    padding: 12px;
  }

  html.tv-workspace button,
  html.tv-workspace .btn,
  html.tv-workspace .link-btn,
  html.tv-workspace input,
  html.tv-workspace select,
  html.tv-workspace textarea {
    min-height: 40px;
  }

  html.tv-workspace .modal .modal-dialog {
    max-height: calc(100vh - 24px);
  }
}

@media (max-width: 760px) {
  html.tv-workspace .modal[data-modal-ux="shared-form"] {
    align-items: flex-start;
    padding: 64px 10px 10px;
  }

  html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-content,
  html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-dialog,
  html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-card {
    width: min(100vw - 20px, 100%);
    max-width: none;
    max-height: calc(100vh - 74px);
    padding: 14px 14px 12px;
    border-radius: 18px;
    gap: 12px;
  }

  html.tv-workspace .modal[data-modal-ux="shared-form"] > .modal-content > h3 {
    font-size: 22px;
    padding-bottom: 10px;
  }
}

/* =====================================   FORM ELEMENTS - GLOBAL STYLING
   ============================================ */

/* Remove browser default appearance for select dropdowns */
html.tv-workspace select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa4b2' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Ensure select has proper cursor */
html.tv-workspace select {
  cursor: pointer;
}

/* =====================================   ACCESSIBILITY
   ============================================ */

/* Focus styles */
html.tv-workspace button:focus,
html.tv-workspace input:focus,
html.tv-workspace select:focus,
html.tv-workspace textarea:focus,
html.tv-workspace a:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Skip to content link */
html.tv-workspace .skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--gold);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

html.tv-workspace .skip-link:focus {
  top: 0;
}

/* =====================================   PRINT STYLES
   ============================================ */

@media print {
  html.tv-workspace #breadcrumbs,
  html.tv-workspace #btnBack,
  html.tv-workspace #btnGlobalSearch,
  html.tv-workspace button,
  html.tv-workspace .modal {
    display: none !important;
  }

  html.tv-workspace body {
    background: white;
    color: black;
  }

  html.tv-workspace .card {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
}

/* =====================================   ENHANCED TABLE STYLES
   ============================================ */

/* Hover effect op table rows */
html.tv-workspace tbody tr {
  transition: background 0.15s;
}

html.tv-workspace tbody tr:hover {
  background: rgba(96, 165, 250, 0.05);
}

/* Sticky table headers */
html.tv-workspace .sticky-header thead {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* =====================================   STATUS INDICATORS
   ============================================ */

html.tv-workspace .status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

html.tv-workspace .status-indicator.online {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

html.tv-workspace .status-indicator.offline {
  background: #6b7280;
}

html.tv-workspace .status-indicator.warning {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

html.tv-workspace .status-indicator.error {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Pulsing animation voor live status */
html.tv-workspace .status-indicator.pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* =====================================   NOTIFICATION TOAST
   ============================================ */

html.tv-workspace .toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 2000;
  animation: toastSlideIn 0.3s ease-out;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.tv-workspace .toast.success {
  border-color: #22c55e;
  background: #1e3a2c;
}

html.tv-workspace .toast.error {
  border-color: #ef4444;
  background: #3a1e1e;
}

html.tv-workspace .toast.warning {
  border-color: #f59e0b;
  background: #3a2e1e;
}

/* =====================================   CONTEXT MENU (right-click)
   ============================================ */

html.tv-workspace .context-menu {
  position: fixed;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 3000;
  min-width: 150px;
}

html.tv-workspace .context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
}

html.tv-workspace .context-menu-item:hover {
  background: var(--border);
}

html.tv-workspace .context-menu-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* =====================================   FLOATING ACTION BUTTON (FAB)
   ============================================ */

html.tv-workspace .fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}

html.tv-workspace .fab-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #3b82f6 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

html.tv-workspace .fab-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(96, 165, 250, 0.5);
}

html.tv-workspace .fab-button:active {
  transform: scale(0.95);
}

html.tv-workspace .fab-icon {
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.tv-workspace .fab-button.active .fab-icon {
  transform: rotate(45deg);
}

html.tv-workspace .fab-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.tv-workspace .fab-actions.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

html.tv-workspace .fab-action {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 10px 20px 10px 12px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  min-height: 44px;
}

html.tv-workspace .fab-action:hover {
  background: var(--border);
  border-color: var(--border-strong);
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

html.tv-workspace .fab-action-icon {
  font-size: 20px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.tv-workspace .fab-action-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* Hide FAB on login page */
html.tv-workspace body.login-page .fab-container {
  display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  html.tv-workspace .fab-container {
    bottom: 16px;
    right: 16px;
  }

  html.tv-workspace .fab-button {
    width: 48px;
    height: 48px;
  }

  html.tv-workspace .fab-icon {
    font-size: 24px;
  }

  html.tv-workspace .fab-action {
    padding: 8px 16px 8px 10px;
    min-height: 40px;
  }

  html.tv-workspace .fab-action-icon {
    font-size: 18px;
    width: 20px;
    height: 20px;
  }

  html.tv-workspace .fab-action-label {
    font-size: 13px;
  }
}

/* TV workspace: style — display themes and broadcast layout retained. */

html.tv-workspace {
  --bg: var(--background);
  --surface: #0b1d19;
  --surface2: var(--surface-raised);
  --line: var(--border);
  --fg: var(--text);
  --mut: var(--text-muted);
  --accent: var(--gold);
  --ok: #36c275;
  --warn: #f4b942;
  --danger: #f06b75;
}
html.tv-workspace * {
  box-sizing: border-box;
}
html.tv-workspace,
html.tv-workspace body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1000px 500px at 80% -10%, #233c79 0, transparent 62%),
    var(--bg);
  color: var(--fg);
  font-family:
    Inter,
    system-ui,
    Segoe UI,
    Roboto,
    Arial;
}
html.tv-workspace body.theme-light {
  --bg: var(--se-page);
  --surface: var(--se-text-inverse);
  --surface2: var(--se-surface-2);
  --line: var(--se-border);
  --fg: var(--se-text);
  --mut: var(--se-text-muted);
  --accent: var(--se-primary);
  background: var(--se-page);
}
html.tv-workspace button,
html.tv-workspace input,
html.tv-workspace select,
html.tv-workspace textarea {
  font: inherit;
}
html.tv-workspace button {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface2);
  color: var(--fg);
  padding: 8px 11px;
  cursor: pointer;
  font-weight: 650;
}
html.tv-workspace button:hover {
  border-color: var(--accent);
}
html.tv-workspace button.primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  border-color: var(--gold);
  color: #fff;
}
html.tv-workspace button.danger {
  color: #ffd9dc;
  border-color: #6d3039;
  background: #321c25;
}
html.tv-workspace button.ghost {
  background: transparent;
}
html.tv-workspace button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
html.tv-workspace input,
html.tv-workspace select,
html.tv-workspace textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--fg);
  border-radius: 9px;
  padding: 9px;
}
html.tv-workspace textarea {
  min-height: 78px;
  resize: vertical;
}
html.tv-workspace label {
  display: block;
  font-size: 12px;
  color: var(--mut);
  margin: 0 0 5px;
}
html.tv-workspace .mut {
  color: var(--mut);
}
html.tv-workspace .small {
  font-size: 12px;
}
html.tv-workspace .page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px;
}
html.tv-workspace .topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
html.tv-workspace .topbar h1 {
  margin: 0;
  font-size: 24px;
}
html.tv-workspace .topbar .event-meta {
  color: var(--mut);
  font-size: 13px;
}
html.tv-workspace .topbar .actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
html.tv-workspace .hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(39, 68, 132, 0.8),
    rgba(17, 26, 50, 0.88)
  );
  margin-bottom: 18px;
}
html.tv-workspace .hero h2 {
  margin: 0 0 7px;
  font-size: 30px;
}
html.tv-workspace .hero p {
  margin: 0;
  color: var(--text-muted);
  max-width: 680px;
  line-height: 1.5;
}
html.tv-workspace .hero .hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
html.tv-workspace .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
html.tv-workspace .grid > aside {
  display: none;
}
html.tv-workspace .card {
  background: rgba(17, 26, 50, 0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
}
html.tv-workspace body.theme-light .card {
  background: var(--se-surface);
}
html.tv-workspace .card h3 {
  margin: 0 0 4px;
  font-size: 16px;
}
html.tv-workspace .card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 13px;
}
html.tv-workspace .card-head p {
  margin: 0;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.45;
}
html.tv-workspace .mode-list {
  display: grid;
  gap: 10px;
}
html.tv-workspace .mode-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: linear-gradient(
    135deg,
    rgba(26, 42, 78, 0.75),
    rgba(12, 21, 42, 0.72)
  );
}
html.tv-workspace .mode-card:hover {
  border-color: #628bff;
}
html.tv-workspace .mode-card h4 {
  margin: 0 0 5px;
  font-size: 15px;
}
html.tv-workspace .mode-card p {
  margin: 0;
  color: var(--mut);
  font-size: 12px;
}
html.tv-workspace .mode-card .mode-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
html.tv-workspace .status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 99px;
  background: rgba(54, 194, 117, 0.13);
  color: #79e0a5;
  border: 1px solid rgba(54, 194, 117, 0.3);
}
html.tv-workspace .empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: var(--mut);
  line-height: 1.5;
}
html.tv-workspace .stats {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}
html.tv-workspace .stat {
  font-size: 11px;
  color: var(--mut);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 8px;
}
html.tv-workspace .preview-shell {
  background: #050914;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
html.tv-workspace .preview-toolbar {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 9px;
  border-bottom: 1px solid #263961;
  background: #0d1730;
}
html.tv-workspace .preview-toolbar select {
  width: auto;
  min-width: 100px;
  padding: 6px 8px;
  font-size: 12px;
}
html.tv-workspace .preview-toolbar input {
  width: 180px;
  padding: 6px 8px;
  font-size: 12px;
}
html.tv-workspace .preview-screen {
  min-height: 360px;
  padding: 18px;
  background: linear-gradient(135deg, #101b38, #071022);
}
html.tv-workspace .preview-screen h2 {
  margin: 0 0 14px;
  font-size: 25px;
}
html.tv-workspace .preview-screen .screen-sub {
  display: none;
}
html.tv-workspace .screen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
html.tv-workspace .screen-zone {
  min-height: 155px;
  padding: 15px;
  border-radius: 16px;
  background: linear-gradient(145deg, #203d7c 0%, #14264c 72%);
  border: 1px solid rgba(130, 166, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 28px rgba(0, 0, 0, 0.18);
}
html.tv-workspace .screen-zone h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.01em;
}
html.tv-workspace .screen-item {
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 12px;
}
html.tv-workspace .screen-item time {
  display: block;
  color: #9bbcff;
  font-size: 11px;
  margin-bottom: 2px;
}
html.tv-workspace .screen-item.past {
  opacity: 0.58;
}
html.tv-workspace .screen-item .delay {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 99px;
  background: rgba(240, 107, 117, 0.18);
  border: 1px solid rgba(240, 107, 117, 0.5);
  color: #ffacb2;
  font-size: 10px;
}
html.tv-workspace .screen-lane {
  margin-top: 11px;
}
html.tv-workspace .screen-lane-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
html.tv-workspace .screen-lane-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(150, 180, 235, 0.18);
}
html.tv-workspace .screen-lane.lane-live .screen-lane-title {
  color: #86efac;
}
html.tv-workspace .screen-lane.lane-live .screen-lane-title::after {
  background: rgba(74, 222, 128, 0.45);
}
html.tv-workspace .screen-lane.lane-live .screen-item {
  position: relative;
  padding: 10px 12px;
  margin: 5px 0;
  border: 1px solid rgba(74, 222, 128, 0.75);
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(22, 101, 52, 0.72),
    rgba(9, 58, 35, 0.8)
  );
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.12),
    0 0 18px rgba(34, 197, 94, 0.22);
}
html.tv-workspace .screen-lane.lane-live .screen-item time {
  color: #bbf7d0;
}
html.tv-workspace .screen-lane.lane-live .screen-item strong {
  color: #f0fdf4;
}
html.tv-workspace .screen-lane.lane-live .screen-item:first-of-type {
  animation: tvNowPulse 2s ease-in-out infinite;
}
@keyframes tvNowPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(74, 222, 128, 0.12),
      0 0 14px rgba(34, 197, 94, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(74, 222, 128, 0.42),
      0 0 27px rgba(34, 197, 94, 0.52);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.tv-workspace .screen-lane.lane-live .screen-item:first-of-type {
    animation: none;
  }
}
html.tv-workspace .screen-delay {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 5px 8px;
  border-radius: 99px;
  background: rgba(244, 185, 66, 0.15);
  border: 1px solid rgba(244, 185, 66, 0.5);
  color: #ffd47a;
  font-size: 11px;
}
html.tv-workspace .screen-alert {
  padding: 7px 9px;
  margin: 6px 0;
  border-radius: 9px;
  background: rgba(240, 107, 117, 0.13);
  border-left: 3px solid #f06b75;
  color: #ffd2d5;
  font-size: 11px;
}
html.tv-workspace .screen-widget-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
html.tv-workspace .screen-widget {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid rgba(145, 181, 255, 0.4);
  border-radius: 15px;
  background: linear-gradient(
    145deg,
    rgba(42, 75, 145, 0.72),
    rgba(18, 35, 72, 0.92)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 12px 25px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  color: #cbdcff;
}
html.tv-workspace .screen-widget strong {
  font-size: 23px;
  line-height: 1;
  display: block;
  color: #f5f8ff;
  letter-spacing: -0.03em;
}
html.tv-workspace .screen-widget.widget-clock,
html.tv-workspace .screen-widget.widget-date {
  min-width: 114px;
}
html.tv-workspace .screen-widget.widget-clock::before {
  content: "◷";
  color: var(--gold-bright);
  font-size: 22px;
}
html.tv-workspace .screen-widget.widget-date::before {
  content: "▣";
  color: var(--gold-bright);
  font-size: 17px;
}
html.tv-workspace .screen-widget.widget-weather::before {
  content: "☼";
  color: #ffdb83;
  font-size: 25px;
}
html.tv-workspace .screen-widget.widget-logo {
  min-width: 88px;
}
html.tv-workspace .screen-widget.widget-logo img {
  max-width: 92px;
  max-height: 42px;
  object-fit: contain;
}
html.tv-workspace .screen-widget.widget-alert {
  border-color: rgba(244, 185, 66, 0.55);
  background: linear-gradient(
    145deg,
    rgba(121, 85, 29, 0.7),
    rgba(48, 39, 26, 0.9)
  );
}
html.tv-workspace .preview-empty {
  padding: 45px 20px;
  text-align: center;
  color: var(--text-muted);
}
html.tv-workspace .wizard {
  display: none;
}
html.tv-workspace .wizard.active {
  display: block;
}
html.tv-workspace .stepper {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  overflow: auto;
}
html.tv-workspace .step {
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 99px;
  background: var(--surface2);
  color: var(--mut);
  font-size: 11px;
  border: 1px solid var(--line);
}
html.tv-workspace .step.active {
  background: rgba(79, 124, 255, 0.2);
  border-color: var(--accent);
  color: var(--fg);
}
html.tv-workspace .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
html.tv-workspace .form-grid .full {
  grid-column: 1/-1;
}
html.tv-workspace .template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
html.tv-workspace .template-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface2);
  cursor: pointer;
  text-align: left;
}
html.tv-workspace .template-card:hover,
html.tv-workspace .template-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.2);
}
html.tv-workspace .template-card .template-icon {
  font-size: 24px;
  margin-bottom: 8px;
}
html.tv-workspace .template-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}
html.tv-workspace .template-card span {
  display: block;
  color: var(--mut);
  font-size: 11px;
  line-height: 1.4;
}
html.tv-workspace .page-config {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(9, 16, 34, 0.35);
  margin-bottom: 10px;
}
html.tv-workspace .page-config-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 11px;
}
html.tv-workspace .page-config-head strong {
  font-size: 14px;
}
html.tv-workspace .page-config select {
  max-width: 260px;
}
html.tv-workspace .zone-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
html.tv-workspace .zone-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface2);
  font-size: 12px;
  cursor: pointer;
}
html.tv-workspace .zone-option input {
  width: auto;
}
html.tv-workspace .widget-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
html.tv-workspace .widget-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface2);
  font-size: 11px;
}
html.tv-workspace .widget-option input {
  width: auto;
}
html.tv-workspace .wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
html.tv-workspace .wizard-actions .right {
  display: flex;
  gap: 8px;
}
html.tv-workspace .toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  padding: 12px 14px;
  border-radius: 10px;
  background: #132448;
  border: 1px solid #5579cd;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: none;
}
html.tv-workspace .toast.show {
  display: block;
}
html.tv-workspace .public-page {
  min-height: 100vh;
  padding: clamp(20px, 4vw, 56px);
  background:
    radial-gradient(900px 500px at 80% 0, #233c79 0, transparent 65%),
    var(--background);
}
html.tv-workspace .public-page .public-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}
html.tv-workspace .public-page h1 {
  font-size: clamp(28px, 5vw, 58px);
  margin: 0 0 8px;
}
html.tv-workspace .public-page .public-sub {
  color: var(--text-muted);
}
html.tv-workspace .public-page .public-clock {
  text-align: right;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
}
html.tv-workspace .public-page .public-date {
  color: var(--text-muted);
  font-size: 13px;
}
html.tv-workspace .public-page .screen-grid {
  grid-template-columns: repeat(var(--page-columns, 3), minmax(0, 1fr));
}
html.tv-workspace .public-page .screen-zone {
  min-height: 220px;
}
html.tv-workspace .public-page .public-foot {
  margin-top: 22px;
  color: #8ea5d0;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
html.tv-workspace .public-page .public-widget {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
html.tv-workspace .public-page .screen-widget {
  font-size: 14px;
  padding: 10px 13px;
}
html.tv-workspace .public-page .screen-widget strong {
  font-size: 26px;
}
html.tv-workspace .public-page .public-progress {
  height: 4px;
  background: #1b2b50;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 14px;
}
html.tv-workspace .public-page .public-progress span {
  display: block;
  height: 100%;
  background: #5f8cff;
  width: 0;
  transition: width linear;
}
html.tv-workspace .simulation-page {
  padding-bottom: 34px;
}
html.tv-workspace .simulation-back {
  margin-bottom: 14px;
  background: transparent;
}
html.tv-workspace .simulation-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(13, 23, 48, 0.9);
}
html.tv-workspace .simulation-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #c8d8f8;
}
html.tv-workspace .simulation-status strong {
  font-size: 16px;
  color: #fff;
}
html.tv-workspace .simulation-status span {
  font-size: 12px;
  color: var(--text-muted);
}
html.tv-workspace .simulation-controls {
  display: flex;
  gap: 7px;
  align-items: end;
  flex-wrap: wrap;
}
html.tv-workspace .simulation-controls label {
  min-width: 205px;
  margin: 0;
}
html.tv-workspace .simulation-controls input {
  margin-top: 5px;
  padding: 7px 8px;
}
html.tv-workspace .simulation-speeds {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
html.tv-workspace .simulation-speeds button {
  padding: 7px 9px;
}
html.tv-workspace .simulation-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--text-muted);
}
html.tv-workspace .simulation-footer span {
  font-weight: 700;
}
html.tv-workspace .simulation-page .public-sub {
  color: var(--text-muted);
}
html.tv-workspace .tv-wizard-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(2, 7, 20, 0.72) !important;
  backdrop-filter: blur(4px) !important;
}
html.tv-workspace .tv-wizard-modal[hidden] {
  display: none !important;
}
html.tv-workspace .tv-wizard-dialog {
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid #3a5794;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface-input));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
html.tv-workspace .tv-wizard-content {
  padding: 20px;
}
html.tv-workspace .tv-wizard-content .wizard {
  display: block;
}
html.tv-workspace .tv-wizard-content .card-head {
  position: sticky;
  top: -20px;
  z-index: 2;
  margin: -20px -20px 18px;
  padding: 20px;
  background: linear-gradient(180deg, var(--surface) 80%, rgba(17, 26, 50, 0));
}
html.tv-workspace .tv-wizard-content .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.tv-workspace .tv-wizard-content .template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html.tv-workspace .tv-wizard-content .wizard-actions {
  position: sticky;
  bottom: -20px;
  padding: 14px 0 0;
  background: linear-gradient(
    0deg,
    var(--surface-input) 72%,
    rgba(11, 18, 40, 0)
  );
}
html.tv-workspace .wizard-page-preview {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #304775;
  border-radius: 14px;
  background: var(--background);
}
html.tv-workspace .wizard-page-preview-title {
  margin-bottom: 8px;
  color: #a9c4f5;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
html.tv-workspace .wizard-page-preview .preview-screen {
  min-height: 220px;
  padding: 12px;
}
html.tv-workspace .wizard-page-preview .screen-zone {
  min-height: 110px;
  padding: 11px;
}
html.tv-workspace .wizard-page-preview .screen-item {
  font-size: 11px;
}
html.tv-workspace .wizard-page-preview .screen-widget {
  min-height: 48px;
  padding: 7px 10px;
}
html.tv-workspace .wizard-page-preview .screen-widget strong {
  font-size: 18px;
}
@media (max-width: 700px) {
  html.tv-workspace .tv-wizard-modal {
    padding: 10px !important;
  }
  html.tv-workspace .tv-wizard-dialog {
    width: 100%;
    max-height: calc(100vh - 20px);
  }
  html.tv-workspace .tv-wizard-content .form-grid,
  html.tv-workspace .tv-wizard-content .template-grid {
    grid-template-columns: 1fr;
  }
}
html.tv-workspace .screen-widget::before {
  content: none !important;
}
html.tv-workspace .widget-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.tv-workspace .screen-widget.widget-clock,
html.tv-workspace .screen-widget.widget-date {
  min-width: 116px;
}
html.tv-workspace .screen-widget.widget-clock strong,
html.tv-workspace .screen-widget.widget-date strong {
  font-size: 27px;
}
html.tv-workspace .screen-widget.widget-weather {
  display: block;
  min-width: 178px;
  padding: 9px 13px;
  background: linear-gradient(145deg, #f7c657, #efaf38);
  border-color: #ffd979;
  color: #fff8df;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 12px 25px rgba(180, 123, 27, 0.25);
}
html.tv-workspace .weather-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.92;
}
html.tv-workspace .weather-main {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
}
html.tv-workspace .weather-main .widget-icon {
  width: 29px;
  height: 29px;
}
html.tv-workspace .weather-main strong {
  font-size: 28px !important;
  color: #fff;
}
html.tv-workspace .weather-meta {
  font-size: 11px;
  margin-top: 1px;
  color: #fff7da;
}
html.tv-workspace .screen-widget.widget-logo {
  min-width: 112px;
  min-height: 64px;
  justify-content: center;
  background: #f7f4ee;
  border-color: #ded8cc;
}
html.tv-workspace .screen-widget.widget-logo[data-tone="dark"] {
  background: linear-gradient(145deg, #1d315d, #101e3d);
  border-color: rgba(145, 181, 255, 0.4);
}
html.tv-workspace .screen-widget.widget-logo img {
  max-width: 108px;
  max-height: 42px;
  object-fit: contain;
}
html.tv-workspace .screen-widget.widget-logo strong {
  color: #18233b;
}
html.tv-workspace .screen-widget.widget-alert {
  min-width: 220px;
}
html.tv-workspace .screen-widget.widget-alert .widget-icon {
  color: #ffd878;
}
@media (max-width: 980px) {
  html.tv-workspace .grid {
    grid-template-columns: 1fr;
  }
  html.tv-workspace .screen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.tv-workspace .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.tv-workspace .public-page .screen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  html.tv-workspace .page {
    padding: 14px;
  }
  html.tv-workspace .hero {
    display: block;
  }
  html.tv-workspace .hero .hero-actions {
    margin-top: 15px;
  }
  html.tv-workspace .form-grid,
  html.tv-workspace .screen-grid,
  html.tv-workspace .public-page .screen-grid {
    grid-template-columns: 1fr;
  }
  html.tv-workspace .template-grid,
  html.tv-workspace .widget-picker,
  html.tv-workspace .zone-picker {
    grid-template-columns: 1fr;
  }
  html.tv-workspace .mode-card {
    grid-template-columns: 1fr;
  }
  html.tv-workspace .mode-card .mode-actions {
    justify-content: flex-start;
  }
  html.tv-workspace .public-page .public-head {
    display: block;
  }
  html.tv-workspace .public-page .public-clock {
    text-align: left;
    margin-top: 15px;
  }
}

/* KOHA / Klassiek op het Amstelveld live-screen theme. The data renderer
       stays unchanged; this layer gives the public canvas and admin preview
       the same warm festival identity. */
html.tv-workspace .public-page,
html.tv-workspace .preview-screen {
  --koha-ink: #211912;
  --koha-terracotta: #b66035;
  --koha-terracotta-dark: #8f4528;
  --koha-cream: #f7f1e8;
  --koha-paper: #fffdf8;
  --koha-teal: #315d50;
  --koha-teal-soft: #dce8df;
  --koha-pink: #f2d1ca;
  background-color: var(--koha-cream);
  background-image:
    radial-gradient(
      circle at 12% 18%,
      rgba(182, 96, 53, 0.14) 0 9%,
      transparent 9.3%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(49, 93, 80, 0.13) 0 12%,
      transparent 12.3%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(33, 25, 18, 0.018) 0 1px,
      transparent 1px 5px
    );
  color: var(--koha-ink);
  font-family: Georgia, "Times New Roman", serif;
}
html.tv-workspace .public-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 3.2vw, 52px);
  min-height: 100vh;
}
html.tv-workspace .public-page::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 34vw;
  height: 22vw;
  min-width: 280px;
  min-height: 180px;
  right: -7vw;
  top: -8vw;
  background: var(--koha-pink);
  border-radius: 8% 0 12% 28%;
  transform: rotate(-8deg);
  opacity: 0.88;
}
html.tv-workspace .public-page::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 28vw;
  height: 18vw;
  min-width: 240px;
  min-height: 150px;
  left: -9vw;
  bottom: 5vw;
  background: var(--koha-terracotta);
  border-radius: 0 28% 0 0;
  transform: rotate(7deg);
  opacity: 0.84;
}
html.tv-workspace .public-page > * {
  position: relative;
  z-index: 1;
}
html.tv-workspace .public-page .public-head {
  align-items: center;
  margin: 0 auto clamp(18px, 2.4vw, 32px);
  max-width: 1800px;
  padding-bottom: 18px;
  border-bottom: 2px solid rgba(182, 96, 53, 0.55);
}
html.tv-workspace .public-page .public-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
html.tv-workspace .public-page h1 {
  margin: 0;
  color: var(--koha-ink);
  font-size: clamp(30px, 4.7vw, 74px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.055em;
}
html.tv-workspace .public-page .public-sub {
  color: var(--koha-terracotta-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 1vw, 15px);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
html.tv-workspace .public-page .public-clock {
  color: var(--koha-ink);
  font-size: clamp(30px, 4.1vw, 64px);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.06em;
}
html.tv-workspace .public-page .public-date {
  color: var(--koha-terracotta-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html.tv-workspace .public-page .screen-widget-row {
  gap: 12px;
  margin: 0 auto clamp(16px, 2vw, 26px);
  max-width: 1800px;
}
html.tv-workspace .public-page .screen-widget {
  min-height: 76px;
  padding: 12px 16px;
  border: 1px solid rgba(33, 25, 18, 0.12);
  border-radius: 5px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 8px 22px rgba(74, 45, 29, 0.09);
  color: var(--koha-ink);
  font-family: Arial, Helvetica, sans-serif;
}
html.tv-workspace .public-page .screen-widget strong {
  color: var(--koha-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1;
}
html.tv-workspace .public-page .screen-widget .widget-icon {
  color: var(--koha-terracotta);
  width: 28px;
  height: 28px;
}
html.tv-workspace .public-page .screen-widget.widget-weather {
  background: var(--koha-terracotta);
  border-color: var(--koha-terracotta-dark);
  color: #fff7ed;
  box-shadow: 0 8px 22px rgba(143, 69, 40, 0.2);
}
html.tv-workspace .public-page .screen-widget.widget-weather strong,
html.tv-workspace .public-page .screen-widget.widget-weather .widget-icon {
  color: #fff7ed;
}
html.tv-workspace .public-page .screen-widget.widget-logo {
  background: var(--koha-paper);
  border-color: rgba(33, 25, 18, 0.16);
}
html.tv-workspace .public-page .screen-widget.widget-logo strong {
  color: var(--koha-ink);
}
html.tv-workspace .public-page .screen-widget.widget-alert {
  min-width: 220px;
  background: var(--koha-teal);
  border-color: var(--koha-teal);
  color: #f4fbf5;
}
html.tv-workspace .public-page .screen-widget.widget-alert .widget-icon,
html.tv-workspace .public-page .screen-widget.widget-alert strong {
  color: #f4fbf5;
}
html.tv-workspace .public-page h2 {
  margin: 0 auto 16px;
  max-width: 1800px;
  color: var(--koha-ink);
  font-size: clamp(24px, 2.7vw, 46px);
  letter-spacing: -0.045em;
}
html.tv-workspace .public-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100vh;
}
html.tv-workspace .public-page #publicScreen {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
html.tv-workspace .public-page .screen-grid {
  flex: 1;
  min-height: 0;
  gap: 12px;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
  align-items: stretch;
}
html.tv-workspace .public-page .screen-zone {
  min-height: 0;
  height: 100%;
  padding: 0 0 14px;
  border: 1px solid rgba(33, 25, 18, 0.16);
  border-radius: 4px;
  background: var(--koha-paper);
  box-shadow: 0 12px 26px rgba(74, 45, 29, 0.12);
  overflow: hidden;
  color: var(--koha-ink);
}
html.tv-workspace .public-page .screen-zone:nth-child(3n + 1) {
  --zone-accent: var(--koha-terracotta);
}
html.tv-workspace .public-page .screen-zone:nth-child(3n + 2) {
  --zone-accent: #d88c70;
}
html.tv-workspace .public-page .screen-zone:nth-child(3n) {
  --zone-accent: var(--koha-teal);
}
html.tv-workspace .public-page .screen-zone h3 {
  margin: 0 0 10px;
  padding: 14px 16px 12px;
  background: var(--zone-accent);
  color: #fffaf3;
  font-size: clamp(18px, 1.65vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
html.tv-workspace .public-page .screen-zone > .screen-delay,
html.tv-workspace .public-page .screen-zone > .screen-alert,
html.tv-workspace .public-page .screen-zone > .screen-lane {
  margin-left: 16px;
  margin-right: 16px;
}
html.tv-workspace .public-page .screen-lane-title {
  color: var(--koha-terracotta-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
html.tv-workspace .public-page .screen-lane-title::after {
  background: rgba(182, 96, 53, 0.35);
}
html.tv-workspace .public-page .screen-item {
  padding: 9px 0;
  border-top-color: rgba(33, 25, 18, 0.16);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.05vw, 17px);
}
html.tv-workspace .public-page .screen-item strong {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.14;
}
html.tv-workspace .public-page .screen-widget.widget-qr {
  position: fixed;
  right: clamp(18px, 3vw, 54px);
  bottom: clamp(72px, 6vh, 96px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 230px;
  min-width: 230px;
  min-height: 146px;
  padding: 8px 12px;
  box-shadow: 0 10px 28px rgba(74, 45, 29, 0.2);
}
html.tv-workspace .public-page .screen-widget.widget-qr img {
  width: 126px !important;
  height: 126px !important;
  flex: 0 0 126px;
  padding: 4px;
  background: #fff;
  border-radius: 3px;
  image-rendering: auto;
}
html.tv-workspace .public-page .screen-widget.widget-qr span {
  font-size: 12px;
  line-height: 1.25;
}
html.tv-workspace .public-page #publicScreen:has(.widget-qr) .screen-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
html.tv-workspace .public-page .tv-template-timeline {
  grid-template-columns: 1fr;
}
html.tv-workspace .public-page .tv-template-timeline .screen-zone {
  display: block;
}
html.tv-workspace .public-page .tv-template-timeline .screen-lane {
  margin-left: 16px;
  margin-right: 16px;
}
html.tv-workspace .public-page .tv-template-artists {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html.tv-workspace .public-page .tv-template-artists .screen-zone {
  height: auto;
  overflow: hidden;
}
html.tv-workspace .artist-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid rgba(33, 25, 18, 0.15);
}
html.tv-workspace .artist-card img,
html.tv-workspace .artist-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #e9d9c9;
}
html.tv-workspace .artist-avatar {
  display: grid;
  place-items: center;
  color: var(--koha-teal);
  font:
    700 25px Georgia,
    serif;
}
html.tv-workspace .artist-card time {
  display: block;
  color: var(--koha-terracotta-dark);
  font:
    800 clamp(14px, 1.1vw, 18px) Arial,
    sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 3px;
}
html.tv-workspace .artist-card strong {
  display: block;
  font:
    700 clamp(16px, 1.2vw, 22px)/1.1 Georgia,
    serif;
}
html.tv-workspace .public-page .tv-template-focus {
  grid-template-columns: 1fr;
}
html.tv-workspace .public-page .tv-template-focus .screen-zone {
  height: auto;
}
html.tv-workspace .public-page .tv-template-focus .screen-item {
  padding: 18px 0;
  font-size: clamp(20px, 2vw, 34px);
}
html.tv-workspace .public-page .tv-template-artists {
  grid-template-columns: 1fr;
}
html.tv-workspace .public-page .tv-template-artists .screen-zone,
html.tv-workspace .public-page .tv-template-artists .screen-zone:only-child {
  display: block;
  height: 100%;
  overflow: hidden;
}
html.tv-workspace .public-page .tv-template-artist-arrivals {
  grid-template-columns: 1fr;
}
html.tv-workspace .public-page .tv-template-artist-arrivals.is-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.tv-workspace .public-page .tv-template-artist-arrivals .screen-zone {
  height: 100%;
  overflow: hidden;
}
html.tv-workspace .public-page .tv-template-artist-arrivals .artist-card {
  grid-template-columns: 112px 1fr;
  gap: 16px;
  padding: 16px 18px;
}
html.tv-workspace .public-page .tv-template-artist-arrivals .artist-card img,
html.tv-workspace .public-page .tv-template-artist-arrivals .artist-avatar {
  width: 112px;
  height: 112px;
}
html.tv-workspace .public-page .tv-template-artists .artist-grid {
  height: calc(100% - 62px);
  align-content: stretch;
  grid-auto-rows: minmax(0, 1fr);
}
html.tv-workspace .artist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}
html.tv-workspace .artist-card {
  min-width: 0;
}
html.tv-workspace .artist-card time {
  white-space: nowrap;
}
html.tv-workspace .artist-card strong,
html.tv-workspace .artist-card .small {
  overflow-wrap: anywhere;
}
html.tv-workspace .public-page .artist-card .small {
  display: block;
  color: var(--koha-terracotta-dark);
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 700;
  line-height: 1.2;
}
html.tv-workspace .artist-item-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 280px;
  overflow: auto;
  padding: 2px;
}
html.tv-workspace .artist-item-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface2);
  cursor: pointer;
}
html.tv-workspace .artist-item-option input {
  width: auto;
  margin-top: 2px;
}
html.tv-workspace .artist-item-option strong,
html.tv-workspace .artist-item-option small {
  display: block;
}
html.tv-workspace .artist-item-option strong {
  color: var(--fg);
  font-size: 12px;
}
html.tv-workspace .artist-item-option small {
  color: var(--mut);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
}
html.tv-workspace .public-page .screen-item time {
  display: block;
  color: var(--koha-terracotta-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(14px, 1.2vw, 20px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 4px;
}
html.tv-workspace .public-page .artist-card .delay {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 99px;
  background: #f1dfcf;
  border: 1px solid #dfbda4;
  color: var(--koha-terracotta-dark);
  font:
    800 11px/1 Arial,
    sans-serif;
}
html.tv-workspace .public-page .tv-template-timeline .screen-zone {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  position: relative;
}
html.tv-workspace .public-page .tv-template-timeline .screen-zone h3 {
  grid-column: 1/-1;
}
html.tv-workspace .public-page .tv-template-timeline .screen-lane {
  min-width: 0;
}
html.tv-workspace
  .public-page
  .tv-template-timeline
  .screen-lane.lane-later
  .screen-lane-title {
  color: var(--koha-terracotta-dark);
}
html.tv-workspace
  .public-page
  #publicScreen:has(.tv-template-timeline)
  .screen-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
html.tv-workspace .public-page .timeline-qr {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 230px;
  min-height: 146px;
  padding: 8px 12px;
  border: 1px solid rgba(33, 25, 18, 0.12);
  border-radius: 5px;
  background: rgba(255, 253, 248, 0.97);
  box-shadow: 0 10px 28px rgba(74, 45, 29, 0.2);
  font-family: Arial, Helvetica, sans-serif;
}
html.tv-workspace .public-page .timeline-qr img {
  width: 126px;
  height: 126px;
  flex: 0 0 126px;
  padding: 4px;
  background: #fff;
  border-radius: 3px;
  image-rendering: auto;
}
html.tv-workspace .public-page .timeline-qr span {
  font-size: 12px;
  line-height: 1.25;
}
html.tv-workspace .public-page .tv-template-timeline .screen-lane.lane-later {
  padding-bottom: 170px;
}
html.tv-workspace .public-page .screen-item strong {
  font-weight: 700;
}
html.tv-workspace .public-page .screen-lane.lane-live .screen-lane-title {
  color: var(--koha-teal);
}
html.tv-workspace
  .public-page
  .screen-lane.lane-live
  .screen-lane-title::after {
  background: rgba(49, 93, 80, 0.5);
}
html.tv-workspace .public-page .screen-lane.lane-live .screen-item {
  border-color: var(--koha-teal);
  background: var(--koha-teal-soft);
  box-shadow: none;
  color: var(--koha-ink);
}
html.tv-workspace .public-page .screen-lane.lane-live .screen-item time,
html.tv-workspace .public-page .screen-lane.lane-live .screen-item strong {
  color: var(--koha-teal);
}
html.tv-workspace .public-page .screen-delay {
  background: #f1dfcf;
  border-color: #dfbda4;
  color: var(--koha-terracotta-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}
html.tv-workspace .public-page .screen-alert {
  background: #f8e2dc;
  border-left-color: var(--koha-terracotta);
  color: var(--koha-terracotta-dark);
  font-family: Arial, Helvetica, sans-serif;
}
html.tv-workspace .public-page .screen-zone:only-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}
html.tv-workspace .public-page .screen-zone:only-child h3,
html.tv-workspace .public-page .screen-zone:only-child > .screen-delay,
html.tv-workspace .public-page .screen-zone:only-child > .screen-alert {
  grid-column: 1/-1;
}
html.tv-workspace .public-page .screen-zone:only-child > .screen-lane {
  grid-column: span 1;
  min-width: 0;
}
html.tv-workspace .public-page .public-progress {
  height: 5px;
  max-width: 1800px;
  margin: clamp(16px, 2vw, 28px) auto 0;
  background: rgba(49, 93, 80, 0.18);
}
html.tv-workspace .public-page .public-progress span {
  background: var(--koha-terracotta);
}
html.tv-workspace .public-page .public-foot {
  max-width: 1800px;
  margin: 10px auto 0;
  padding-top: 14px;
  color: #f7f1e8;
  background: var(--koha-teal);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html.tv-workspace .public-controls {
  position: fixed;
  right: 18px;
  bottom: 62px;
  z-index: 20;
  display: flex;
  gap: 8px;
  opacity: 0.18;
  transition: opacity 0.2s;
}
html.tv-workspace .public-controls:hover,
html.tv-workspace .public-controls:focus-within {
  opacity: 1;
}
html.tv-workspace .public-controls button {
  padding: 8px 11px;
  border: 1px solid rgba(33, 25, 18, 0.25);
  border-radius: 4px;
  background: rgba(255, 253, 248, 0.94);
  color: var(--koha-ink);
  font:
    700 11px Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(74, 45, 29, 0.12);
}
html.tv-workspace .public-controls button[data-active="true"] {
  background: var(--koha-teal);
  border-color: var(--koha-teal);
  color: #fff;
}
html.tv-workspace .public-controls button[hidden] {
  display: none;
}
html.tv-workspace .preview-screen {
  border-radius: 3px !important;
  color: var(--koha-ink) !important;
}
html.tv-workspace .preview-screen .screen-zone {
  min-height: 155px;
}
html.tv-workspace .preview-screen .screen-lane.lane-live .screen-item {
  box-shadow: none;
}
@media (max-width: 700px) {
  html.tv-workspace .public-page {
    padding: 20px 14px;
  }
  html.tv-workspace .public-page .public-head {
    align-items: start;
  }
  html.tv-workspace .public-page .public-head > div:last-child {
    text-align: left;
  }
  html.tv-workspace .public-page .public-foot {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  html.tv-workspace .public-page .screen-widget-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.tv-workspace .public-page .screen-widget {
    min-width: 0 !important;
  }
  html.tv-workspace .public-page .screen-widget.widget-alert {
    grid-column: 1/-1;
  }
  html.tv-workspace .public-page .screen-widget.widget-qr {
    position: static;
    width: auto;
    min-width: 0;
    min-height: 76px;
    grid-column: 1/-1;
  }
  html.tv-workspace .public-page .screen-widget.widget-qr img {
    width: 96px !important;
    height: 96px !important;
    flex-basis: 96px;
  }
  html.tv-workspace .public-page .screen-zone:only-child {
    display: block;
    height: auto;
  }
  html.tv-workspace .public-page .screen-zone:only-child > .screen-lane {
    margin-left: 16px;
    margin-right: 16px;
  }
  html.tv-workspace .public-page .tv-template-timeline .screen-zone {
    grid-template-columns: 1fr;
  }
  html.tv-workspace .public-page .tv-template-artist-arrivals.is-split {
    grid-template-columns: 1fr;
  }
  html.tv-workspace .public-page .timeline-qr {
    position: static;
    grid-column: 1/-1;
    width: auto;
    min-height: 76px;
  }
  html.tv-workspace .public-page .timeline-qr img {
    width: 96px;
    height: 96px;
    flex-basis: 96px;
  }
  html.tv-workspace .public-controls {
    right: 10px;
    bottom: 52px;
    opacity: 0.7;
    flex-direction: column;
  }
}

html.tv-workspace .public-controls #publicDisplayStatus {
  max-width: 260px;
  padding: 8px 11px;
  border: 1px solid rgba(33, 25, 18, 0.25);
  border-radius: 4px;
  background: #fffdf8;
  color: #211912;
  font:
    700 11px/1.4 Arial,
    Helvetica,
    sans-serif;
  box-shadow: 0 5px 18px rgba(74, 45, 29, 0.12);
}
html.tv-workspace .public-controls #publicDisplayStatus[hidden] {
  display: none;
}
html.tv-workspace .public-controls:has(#publicDisplayStatus:not([hidden])) {
  opacity: 1;
}

/* Retained preview features: src/event-planning.css */
.directory-availability-list {
  display: grid;
  gap: 7px;
  max-height: 300px;
  overflow: auto;
  margin-top: 10px;
}
.directory-availability-row {
  display: grid;
  grid-template-columns: 105px 90px 90px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid #dde2ee;
  border-radius: 9px;
  background: #f7f9fd;
}
@media (max-width: 720px) {
  .directory-availability-row {
    grid-template-columns: 1fr 1fr;
  }
  .directory-availability-row .directory-availability-reason {
    grid-column: 1/-1;
  }
}

.rundown-composer {
  margin: 12px 0;
}
.rundown-composer-panel {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--panel-gradient);
}
.rundown-composer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.rundown-composer-head h4 {
  margin: 0;
}
.rundown-composer-head p {
  margin: 4px 0 12px;
}
.rundown-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rundown-choice-card {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px;
  min-width: 0;
}
.rundown-choice-card legend {
  font-weight: 700;
}
.rundown-choice-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--mut);
  font-size: 12px;
}
.rundown-choice-head button {
  padding: 4px 8px;
}
.rundown-choice-list {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
  margin-top: 8px;
}
.rundown-choice-list label,
.rundown-option-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.rundown-choice-list input,
.rundown-option-grid input {
  width: auto;
}
.rundown-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 14px 0;
}
.rundown-composer-actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 700px) {
  .rundown-choice-grid {
    grid-template-columns: 1fr;
  }
  .rundown-composer-head {
    flex-direction: column;
  }
}
.rundown-library {
  margin: 14px 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-3);
  padding: 16px;
}
.rundown-library-heading {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.rundown-library-heading > div {
  margin-right: auto;
}
.rundown-library-heading span,
.rundown-library-heading p {
  font-size: 12px;
  color: var(--mut);
}
.rundown-library-heading h4 {
  font-size: 18px;
  margin: 4px 0;
}
.rundown-library-heading p {
  margin: 4px 0;
}
.rundown-library-heading label {
  min-width: min(100%, 260px);
}
.rundown-library-filters {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: 14px 0;
  color: var(--mut);
  font-size: 12px;
}
.rundown-library-filters label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.rundown-library-filters input {
  width: auto;
}
.rundown-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.rundown-folder {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--panel-gradient);
  padding: 12px;
}
.rundown-folder span,
.rundown-folder small {
  font-size: 11px;
  color: var(--mut);
}
.rundown-folder strong {
  overflow-wrap: anywhere;
}
.rundown-share-controls {
  border-top: 1px solid var(--border-strong);
  margin-top: 14px;
  padding-top: 12px;
}
.rundown-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-strong);
}
.rundown-share-row a {
  color: #b9ceff;
}
.rundown-bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rundown-folder label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rundown-folder input {
  width: auto;
}
.rundown-live-banner {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid #ccd5e4;
  border-radius: 14px;
  background: #f4f7ff;
  color: #152238;
  margin: 16px 0;
}
.rundown-live-banner p {
  margin: 4px 0;
}
.rundown-live-banner label,
.rundown-live-item summary label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rundown-live-item {
  border: 1px solid #d9e0ea;
  border-radius: 12px;
  background: #fff;
  color: #152238;
  margin: 8px 0;
  overflow: hidden;
}
.rundown-live-item.is-done {
  border-color: #86c7a5;
  background: #f2fbf5;
}
.rundown-live-item summary {
  display: grid;
  grid-template-columns: 125px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
}
.rundown-live-item summary time {
  font-weight: 700;
}
.rundown-live-item summary small {
  display: block;
  font-weight: 400;
  color: #65758a;
}
.rundown-live-body {
  padding: 0 16px 16px 153px;
}
.rundown-live-body label {
  display: grid;
  gap: 6px;
}
.rundown-live-body textarea {
  width: 100%;
  min-height: 80px;
}
.rundown-live-body button {
  margin-top: 8px;
}
@media (max-width: 600px) {
  .rundown-live-item summary {
    grid-template-columns: 1fr auto;
  }
  .rundown-live-item summary time {
    grid-column: 1/-1;
  }
  .rundown-live-body {
    padding-left: 16px;
  }
}
.rundown-item-extras {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #d9e0ea;
  border-radius: 8px;
}
.rundown-item-extras summary {
  cursor: pointer;
  font-weight: 600;
}
.rundown-item-extras section label {
  display: flex;
  align-items: start;
  gap: 8px;
  margin: 7px 0;
}
.rundown-item-photos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rundown-item-photos figure {
  margin: 0;
}
.rundown-item-photos img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
}
.rundown-signature {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #d9e0ea;
  border-radius: 8px;
}
.rundown-signature summary {
  font-weight: 600;
  cursor: pointer;
}
.rundown-signature form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.rundown-signature form label {
  display: grid;
  gap: 4px;
}
.rundown-signature canvas {
  width: 100%;
  height: 160px;
  border: 1px solid #aab5c3;
  background: #fff;
  touch-action: none;
  border-radius: 6px;
}
.rundown-signature-image {
  display: block;
  max-width: 320px;
  max-height: 100px;
  background: #fff;
  border: 1px solid #e4e7eb;
}
.rundown-highlight {
  position: relative;
  margin: 12px 0;
}
.rundown-highlight summary {
  cursor: pointer;
  font-weight: 600;
}
.rundown-highlight > div {
  display: grid;
  gap: 5px;
  max-height: 180px;
  overflow: auto;
  padding: 8px;
}
.rundown-highlight > div label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rundown-highlight input[type="checkbox"] {
  width: auto;
}
.rundown-highlight-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.rundown-settings {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-3);
}
.rundown-settings summary {
  font-weight: 700;
  cursor: pointer;
}
.rundown-settings form,
.rundown-settings section {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.rundown-settings label {
  display: grid;
  gap: 5px;
}
.rundown-settings-image {
  max-width: 220px;
  max-height: 120px;
  object-fit: contain;
  object-position: left center;
}
.rundown-event-info {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-3);
}
.rundown-event-info summary {
  cursor: pointer;
  font-weight: 700;
}
.rundown-event-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.rundown-event-kpis span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px;
}
.rundown-event-kpis strong {
  font-size: 20px;
}
.rundown-event-table {
  overflow-x: auto;
}
.rundown-event-table table {
  width: 100%;
  border-collapse: collapse;
}
.rundown-event-table th,
.rundown-event-table td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--border-strong);
}
.rundown-library-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.rundown-folder {
  --folder-accent: #222;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px 13px 13px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(26, 34, 54, 0.99),
    rgba(17, 22, 35, 0.99)
  );
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.rundown-folder:before,
.rundown-folder:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    var(--folder-accent),
    color-mix(in srgb, var(--folder-accent) 72%, white)
  );
}
.rundown-folder:before {
  top: 0;
  height: 12px;
}
.rundown-folder:after {
  bottom: 0;
  height: 4px;
}
.rundown-folder.is-selected {
  border-color: var(--folder-accent);
}
.rundown-folder-day {
  --folder-accent: var(--gold);
}
.rundown-folder-saved {
  --folder-accent: #d06a00;
}
.rundown-folder-location {
  --folder-accent: #1e7d4d;
}
.rundown-folder-contact {
  --folder-accent: #b36b00;
}
.rundown-folder-group {
  --folder-accent: #7d4ef0;
}
.rundown-folder-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.rundown-folder-top input {
  accent-color: var(--folder-accent);
}
.rundown-folder-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #111a2d, #0a1020);
  color: #f8fbff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rundown-folder-body {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}
.rundown-folder-body strong {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.12;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.rundown-folder-body small {
  color: #bac4da;
}
.rundown-folder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.rundown-folder-actions button {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 9px 10px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
}
.rundown-folder-actions .rundown-folder-primary {
  background: linear-gradient(180deg, #4b68ff, #3048d8);
  color: #fff;
  border-color: #5870ff;
}
.rundown-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1500px) {
  .rundown-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .rundown-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .rundown-library-grid {
    grid-template-columns: 1fr;
  }
}
.rundown-folder:has(.rundown-share-controls) {
  grid-column: 1/-1;
}
.rundown-folder .rundown-share-controls {
  width: 100%;
}
.rundown-folder .rundown-share-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rundown-folder .rundown-share-controls input[type="checkbox"] {
  width: auto;
}
.planner-rundown-filters label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
}
.planner-rundown-filters input[type="checkbox"] {
  width: auto;
}
.rundown-regie-control {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.rundown-regie-control summary {
  cursor: pointer;
  font-weight: 600;
}
.rundown-history-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
.rundown-history-filters label {
  display: grid;
  gap: 4px;
  min-width: 180px;
}
.rundown-orphan small {
  color: var(--mut);
}

/* Draaiboekmenu, gebaseerd op de indeling van event_rundown.html. */
.planner-rundown .rundown-menu-card {
  margin: 12px 0 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  color: #16181d;
  overflow: hidden;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}
.planner-rundown .rundown-menu-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px;
  text-align: left;
  background: #fff;
  color: #16181d;
  border: 0;
  border-radius: 0;
}
.planner-rundown .rundown-menu-summary strong,
.planner-rundown .rundown-menu-summary small {
  display: block;
}
.planner-rundown .rundown-menu-summary strong {
  font-size: 16px;
}
.planner-rundown .rundown-menu-summary small {
  margin-top: 3px;
  color: #69717b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}
.planner-rundown .rundown-menu-shell {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.planner-rundown .rundown-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.planner-rundown .rundown-menu-header strong {
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.planner-rundown .rundown-menu-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #69717b;
}
.planner-rundown .rundown-menu-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.planner-rundown .rundown-menu-tabs button {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid #deded8;
  background: linear-gradient(180deg, #fff, #f5f4ef);
  color: #16181d;
  font-weight: 800;
  font-size: 13px;
  text-align: left;
  padding: 11px 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 18px rgba(0, 0, 0, 0.05);
}
.planner-rundown .rundown-menu-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, #314acb, #2237a5);
  color: #fff;
  border-color: #2436a0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 10px 20px rgba(49, 74, 203, 0.24);
}
.planner-rundown .rundown-menu-content [role="tabpanel"][hidden] {
  display: none;
}
.planner-rundown .rundown-menu-content .rundown-composer {
  margin: 0;
}
.planner-rundown .rundown-menu-content .rundown-composer-panel {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.planner-rundown .rundown-menu-content .rundown-settings,
.planner-rundown .rundown-menu-content .rundown-event-info {
  margin: 0;
  padding: 16px;
  border: 1px solid #deded8;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfbf8, #f3f2ec);
  color: #16181d;
}
.planner-rundown .rundown-menu-content .rundown-settings > summary,
.planner-rundown .rundown-menu-content .rundown-event-info > summary {
  display: none;
}
.planner-rundown .rundown-menu-content .rundown-choice-card {
  border: 1px solid #deded8;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #faf9f4);
  color: #16181d;
}
.planner-rundown .rundown-menu-content .rundown-choice-head,
.planner-rundown .rundown-menu-content .rundown-composer-head p {
  color: #69717b;
}
.planner-rundown .rundown-menu-content input:not([type="checkbox"]),
.planner-rundown .rundown-menu-content select,
.planner-rundown .rundown-menu-content textarea {
  background: #fff;
  color: #16181d;
  border: 1px solid #c9c9c2;
}
.planner-rundown .rundown-menu-content label,
.planner-rundown .rundown-menu-content h3,
.planner-rundown .rundown-menu-content h4 {
  color: #16181d;
}
@media (max-width: 700px) {
  .planner-rundown .rundown-menu-tabs {
    grid-template-columns: 1fr;
  }
  .planner-rundown .rundown-menu-summary {
    align-items: flex-start;
  }
}
.planner-rundown .rundown-generated-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 18px;
  margin: 18px 0 0;
  border: 1px solid #deded8;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f7f7f3);
  color: #16181d;
}
.planner-rundown .rundown-generated-toolbar h4,
.planner-rundown .rundown-generated-toolbar p {
  margin: 3px 0;
  color: #16181d;
}
.planner-rundown .rundown-generated-toolbar small {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #69717b;
}
.planner-rundown .rundown-generated-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.planner-rundown .rundown-generated-toolbar .rundown-share-controls {
  flex-basis: 100%;
  color: #16181d;
}
.planner-rundown .rundown-theme-card,
.planner-rundown .rundown-logo-scale {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #deded8;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #faf9f4);
  color: #16181d;
}
.planner-rundown .rundown-theme-card h4,
.planner-rundown .rundown-theme-card p,
.planner-rundown .rundown-logo-scale p {
  margin: 0;
}
.planner-rundown .rundown-theme-card p,
.planner-rundown .rundown-logo-scale p {
  color: #69717b;
  font-size: 12px;
}
.planner-rundown .rundown-theme-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 320px;
}
.planner-rundown .rundown-theme-buttons button {
  border: 1px solid #d5d5cf;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  color: #16181d;
  font-weight: 700;
}
.planner-rundown .rundown-theme-buttons button[aria-pressed="true"] {
  background: #314acb;
  color: #fff;
  border-color: #2436a0;
}
.planner-rundown .rundown-logo-scale > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
}
.planner-rundown .rundown-logo-scale > div:last-child span {
  min-width: 48px;
  text-align: center;
  font-weight: 700;
}
.planner-rundown .rundown-generated-preview {
  margin: 18px 0;
  border: 1px solid #deded8;
  border-radius: 16px;
  background: #fff;
  color: #16181d;
  overflow: hidden;
}
.planner-rundown .rundown-generated-preview > summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 800;
  background: linear-gradient(180deg, #fff, #f7f7f3);
}
.planner-rundown .rundown-generated-preview[open] > summary {
  border-bottom: 1px solid #deded8;
}
.planner-rundown .rundown-generated-preview > .planner-rundown-filters,
.planner-rundown .rundown-generated-preview > .planner-rundown-day {
  margin: 16px 18px;
}
.planner-rundown .rundown-generated-preview > .rundown-generated-toolbar {
  margin: 16px 18px;
}
.planner-rundown .rundown-menu-shell[hidden] {
  display: none;
}
.directory-header {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
}
.directory-header h2 {
  font-size: 20px;
  margin: 0;
}
.directory-context {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}
.directory-context label {
  display: block;
  min-width: 260px;
  color: var(--text-muted);
  font-size: 13px;
}
.directory-context select {
  display: block;
  width: 100%;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--surface-input);
  color: var(--text);
}
.directory-muted {
  color: var(--text-muted);
  font-size: 12px;
}
.directory-admin .directory-danger {
  background: #3a1320;
  border-color: #5a1b2f;
  color: #fff;
}
.directory-admin .directory-actions-column {
  min-width: 230px;
}
.directory-avatar-wrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-input);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.directory-admin .directory-card small {
  color: var(--text-muted);
}
.directory-admin .directory-side .directory-inactive {
  margin-left: 5px;
}
.directory-standalone {
  min-height: 100vh;
  padding: 0;
  background: var(--background);
  font-size: 14px;
}
.directory-standalone .directory-admin {
  padding: 16px;
  gap: 12px;
}
.directory-standalone .directory-header {
  margin: -16px -16px 0;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.directory-standalone .directory-context {
  margin-top: 0;
}
.directory-standalone .directory-admin [role="tablist"] {
  margin: 0;
}
.directory-standalone .directory-admin .directory-card {
  padding: 12px;
}

/* Kimi's directory also accepts ?theme=light. */
.directory-standalone-light {
  background: #f3f5fb;
  color: #1c2333;
}
.directory-standalone-light .directory-admin {
  color: #1c2333;
}
.directory-standalone-light .directory-header {
  border-color: #dde2ee;
}
.directory-standalone-light .directory-admin .directory-card,
.directory-standalone-light .directory-admin [role="tablist"],
.directory-standalone-light .directory-admin .directory-dialog {
  background: #fff;
  border-color: #dde2ee;
  color: #1c2333;
}
.directory-standalone-light .directory-admin .directory-card h3,
.directory-standalone-light .directory-admin .directory-card th,
.directory-standalone-light .directory-admin .directory-card td {
  color: #1c2333;
}
.directory-standalone-light .directory-admin .directory-card th,
.directory-standalone-light .directory-admin .directory-card td,
.directory-standalone-light .directory-admin .directory-member {
  border-color: #dde2ee;
}
.directory-standalone-light
  .directory-admin
  button:not(.directory-primary):not(.directory-danger):not(
    .directory-success
  ):not([aria-selected="true"]) {
  background: #eef1fa;
  border-color: #c9d2e8;
  color: #1c2333;
}
.directory-standalone-light .directory-admin .directory-section-head input,
.directory-standalone-light .directory-admin .directory-section-head select,
.directory-standalone-light .directory-admin .directory-inline,
.directory-standalone-light .directory-context select,
.directory-standalone-light
  .directory-admin
  .directory-dialog
  input:not([type="checkbox"]),
.directory-standalone-light .directory-admin .directory-dialog textarea,
.directory-standalone-light .directory-admin .directory-dialog select,
.directory-standalone-light .directory-admin .directory-check-list,
.directory-standalone-light .directory-admin .directory-availability-row,
.directory-standalone-light .directory-avatar-wrap {
  background: #f7f9fd;
  border-color: #cfd6e6;
  color: #1c2333;
}
.directory-standalone-light .directory-admin .directory-check-list label {
  color: #1c2333;
}
.directory-standalone-light .directory-context label,
.directory-standalone-light .directory-muted,
.directory-standalone-light .directory-admin .directory-dialog label,
.directory-standalone-light .directory-admin .directory-card small {
  color: #5b6478;
}
body:has(.directory-standalone-light) .directory-group-picker-panel {
  background: #fff;
  border-color: #dde2ee;
  color: #1c2333;
}
body:has(.directory-standalone-light) .directory-group-picker-option:hover {
  background: #eef1fa;
}

.directory-member-add {
  display: flex;
  align-items: center;
  gap: 8px;
}
.directory-member-add select {
  flex: 1;
  min-width: 0;
}
.directory-member-add button {
  white-space: nowrap;
}

.directory-photo-fields {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.directory-photo-fields > div {
  flex: 1;
  min-width: 0;
}
.directory-photo-fields small {
  display: block;
  margin-top: 4px;
}
.directory-photo-fields .directory-photo-preview {
  flex: none;
  margin-top: 0;
}
.planner-rundown .rundown-photo-gallery {
  position: fixed;
  width: min(1160px, 96vw);
  max-width: none;
  height: min(90vh, 900px);
  max-height: none;
  padding: 24px;
  border: 1px solid #d8d2c7;
  border-radius: 24px;
  background: #f8f6f1;
  color: #172033;
  overflow: auto;
}
.planner-rundown .rundown-photo-gallery::backdrop {
  background: rgba(0, 0, 0, 0.75);
}
.planner-rundown .rundown-photo-gallery > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.planner-rundown .rundown-photo-gallery h2 {
  margin: 6px 0;
}
.planner-rundown .rundown-photo-gallery header span {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}
.planner-rundown .rundown-photo-gallery button,
.planner-rundown .rundown-photo-gallery select,
.planner-rundown .rundown-photo-gallery input {
  font: inherit;
}
.planner-rundown .rundown-photo-filters {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  padding: 16px;
  margin: 16px 0;
  background: white;
  border: 1px solid #d8d2c7;
  border-radius: 16px;
}
.planner-rundown .rundown-photo-filters label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
}
.planner-rundown .rundown-photo-filters input,
.planner-rundown .rundown-photo-filters select {
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #172033;
}
.planner-rundown .rundown-photo-filters span {
  font-size: 12px;
  color: #64748b;
}
.planner-rundown .rundown-photo-section {
  padding: 16px;
  margin: 12px 0;
  background: #fff;
  border: 1px solid #d8d2c7;
  border-radius: 16px;
}
.planner-rundown .rundown-photo-section h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 12px;
}
.planner-rundown .rundown-photo-section h3 small {
  font-weight: 400;
  color: #64748b;
}
.planner-rundown .rundown-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.planner-rundown .rundown-photo-grid article {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fafafa;
}
.planner-rundown .rundown-photo-thumb {
  display: block;
  width: 100%;
  height: 160px;
  padding: 0;
  border: 0;
  background: #e2e8f0;
  cursor: pointer;
}
.planner-rundown .rundown-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.planner-rundown .rundown-photo-grid article > div {
  padding: 10px;
  overflow-wrap: anywhere;
}
.planner-rundown .rundown-photo-grid p {
  margin: 4px 0;
  color: #64748b;
  font-size: 12px;
}
.planner-rundown .rundown-photo-grid a {
  font-size: 13px;
}
.planner-rundown .rundown-photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 55px 20px 20px;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
}
.planner-rundown .rundown-photo-lightbox button {
  position: absolute;
  top: 15px;
  right: 20px;
}
.planner-rundown .rundown-photo-lightbox img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}
.planner-rundown .rundown-photo-lightbox p {
  text-align: center;
}
.planner-rundown.theme-dark .rundown-photo-gallery {
  background: #101728;
  color: #eef2fb;
  border-color: #4b5c8b;
}
.planner-rundown.theme-dark .rundown-photo-filters,
.planner-rundown.theme-dark .rundown-photo-section,
.planner-rundown.theme-dark .rundown-photo-grid article {
  background: #1a2032;
  color: #eef2fb;
  border-color: #4b5c8b;
}
@media (max-width: 650px) {
  .planner-rundown .rundown-photo-gallery {
    padding: 14px;
  }
  .planner-rundown .rundown-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  }
}
.planner-rundown .rundown-delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 10px;
  margin-top: 12px;
}
.planner-rundown .rundown-delivery-card {
  padding: 14px;
  border: 1px solid #deded8;
  border-radius: 14px;
  background: #fff;
  color: #16181d;
  overflow-wrap: anywhere;
}
.planner-rundown .rundown-delivery-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.planner-rundown .rundown-delivery-card header span {
  align-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef3ff;
  font-size: 12px;
}
.planner-rundown .rundown-delivery-card p {
  margin: 6px 0;
  font-size: 13px;
}
.planner-rundown .rundown-delivery-card details {
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.planner-rundown.theme-dark .rundown-delivery-card {
  background: #161c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
.planner-rundown.theme-dark .rundown-delivery-card header span {
  background: #273654;
  color: #eef2fb;
}
.planner-rundown .rundown-mail {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
  background: #faf8f3;
}
.planner-rundown .rundown-mail > summary {
  cursor: pointer;
  font-weight: 700;
}
.planner-rundown .rundown-mail > label {
  display: grid;
  gap: 5px;
  margin: 10px 0;
}
.planner-rundown .rundown-mail input[type="text"],
.planner-rundown .rundown-mail input:not([type]),
.planner-rundown .rundown-mail textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
}
.planner-rundown .rundown-mail-people {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}
.planner-rundown .rundown-mail-people label {
  display: flex;
  gap: 8px;
  align-items: center;
}
.planner-rundown.theme-dark .rundown-mail {
  background: #161c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
.planner-rundown .rundown-mail-manual {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #d8d2c7;
  border-radius: 10px;
}
.planner-rundown .rundown-mail-manual > div {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.planner-rundown .rundown-mail-manual label {
  display: grid;
  gap: 4px;
  min-width: 150px;
}
.planner-rundown .rundown-mail-manual input {
  padding: 7px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
}
.planner-rundown.theme-dark .rundown-mail-manual {
  border-color: #4b5c8b;
}
/* Keuzekaarten en instellingen volgens de Kimi-samensteller. */
.planner-rundown .rundown-menu-content .rundown-choice-card {
  --rundown-choice-accent: var(--gold);
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #deded8;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--rundown-choice-accent) 12%, white),
    #fff 56%
  );
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.planner-rundown .rundown-choice-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--rundown-choice-accent);
}
.planner-rundown .rundown-choice-zones {
  --rundown-choice-accent: #1e7d4d !important;
}
.planner-rundown .rundown-choice-contacts {
  --rundown-choice-accent: #b36b00 !important;
}
.planner-rundown .rundown-choice-groups {
  --rundown-choice-accent: #7d4ef0 !important;
}
.planner-rundown .rundown-choice-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}
.planner-rundown .rundown-choice-head strong {
  display: block;
  color: #16181d;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.planner-rundown .rundown-choice-head span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
  color: #69717b;
  overflow-wrap: anywhere;
}
.planner-rundown .rundown-choice-head button {
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}
.planner-rundown .rundown-choice-list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  margin-top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
.planner-rundown .rundown-choice-list label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #deded8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s,
    background 0.15s;
}
.planner-rundown .rundown-choice-list label:hover {
  border-color: #bcbcb4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.planner-rundown .rundown-choice-list label.is-selected {
  border-color: #bcbcb4;
  background: rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.planner-rundown .rundown-choice-list label span {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.planner-rundown .rundown-choice-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  flex: 0 0 auto;
}
.planner-rundown .rundown-choice-list p {
  margin: 0;
  padding: 12px;
  border: 1px dashed #deded8;
  border-radius: 12px;
  background: #fff;
  color: #69717b;
  font-size: 12px;
}
.planner-rundown .rundown-option-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0;
}
.planner-rundown .rundown-option-grid label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #deded8;
  border-radius: 12px;
  background: #fafaf7;
  font-size: 14px;
  font-weight: 700;
}
.planner-rundown .rundown-option-grid input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
}
.directory-admin .directory-row-actions button:not(:last-child) {
  margin-right: 4px;
}
.directory-admin select {
  appearance: none;
}
.directory-admin .directory-section-head select[aria-label="Filter type"] {
  width: 170px;
}
.directory-admin .directory-section-head select[aria-label="Filter status"] {
  width: 140px;
}
.directory-admin .directory-section-head input[aria-label="Zoek persoon"] {
  max-width: 260px;
}

.directory-admin .directory-success {
  background: #22c55e;
  border-color: #22c55e;
  color: #000;
}
/* The directory is a full-page view with Kimi's own control typography. */
.planning-layout .planning-content:has(.directory-standalone) {
  padding: 0;
}
.planning-layout .planning-content .directory-standalone {
  margin: 0;
  min-height: 100vh;
  border-radius: 0;
}
.directory-standalone {
  margin: 0;
  border-radius: 0;
  font-family: Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial;
}
.directory-admin label {
  font-weight: 400;
}
.directory-admin button {
  padding: 8px 10px;
  font-weight: 600;
}
.directory-avatar-wrap {
  font-size: 16px;
}
.directory-standalone-light {
  --fg: #1c2333;
  --mut: #5b6478;
  --card: #fff;
}
.directory-standalone-light
  .directory-admin
  .directory-card
  input:not([type="checkbox"]):not([type="radio"]) {
  background: #f7f9fd;
  border-color: #cfd6e6;
  color: #1c2333;
}
.directory-standalone-light .directory-photo-preview {
  background: #f7f9fd;
  border-color: #cfd6e6;
}

.directory-availability-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 5px;
  color: #f59e0b;
  font-size: 11px;
}
.directory-availability-row > span:not(:empty) {
  font-size: 12px;
}
.directory-admin .directory-group-picker-toggle {
  overflow: hidden;
  text-overflow: ellipsis;
}
.directory-side .directory-member:last-child {
  border-bottom: none;
}

/* Retained preview features: public/public-rundown.css */
html.public-rundown .rundown-feedback-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  background: #f5f7fa;
  border: 1px solid #d9e0e9;
  border-radius: 10px;
}
html.public-rundown .rundown-feedback-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
html.public-rundown .rundown-feedback-form input,
html.public-rundown .rundown-feedback-form select,
html.public-rundown .rundown-feedback-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #bac5d3;
  border-radius: 6px;
  font: inherit;
}
html.public-rundown .rundown-feedback-form textarea {
  min-height: 64px;
  resize: vertical;
}
html.public-rundown .rundown-feedback-form button {
  justify-self: start;
  border: 0;
  border-radius: 6px;
  background: #203963;
  color: white;
  padding: 9px 15px;
  font-weight: 600;
  cursor: pointer;
}
html.public-rundown .rundown-public-checklists {
  margin-top: 14px;
}
html.public-rundown .rundown-public-checklists section {
  border: 1px solid #d9e0e9;
  border-radius: 10px;
  padding: 12px;
  margin: 8px 0;
}
html.public-rundown .rundown-public-checklists h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
html.public-rundown .rundown-public-point {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  flex-wrap: wrap;
}
html.public-rundown .rundown-public-point small {
  color: #64748b;
}
html.public-rundown .rundown-public-point form {
  margin-left: auto;
}
html.public-rundown .rundown-public-point button {
  border: 1px solid #b9c7d7;
  border-radius: 6px;
  background: white;
  padding: 6px 10px;
  cursor: pointer;
}
html.public-rundown .rundown-public-logo {
  display: block;
  max-width: 280px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 14px;
}
html.public-rundown .rundown-public-regie {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
html.public-rundown .theme-dark {
  background: #0f1320;
  color: #eef2fb;
}
html.public-rundown .theme-dark main header,
html.public-rundown .theme-dark .rundown-item {
  background: #161c2d;
  color: #eef2fb;
  border-color: #2a3350;
}
html.public-rundown .theme-dark .rundown-feedback-form,
html.public-rundown .theme-dark .rundown-public-checklists section {
  background: #1a2032;
  color: #eef2fb;
  border-color: #4b5c8b;
}
html.public-rundown .theme-light {
  color-scheme: light;
  background: linear-gradient(180deg, #efefe9, #f7f7f4);
  color: #121212;
}
html.public-rundown .theme-light main header,
html.public-rundown .theme-light .rundown-item {
  background: #fff;
  color: #121212;
  border-color: #cfcfc8;
}
html.public-rundown .theme-light header p,
html.public-rundown .theme-light .rundown-item p {
  color: #454545;
}
html.public-rundown .theme-light .rundown-item time {
  color: #30476c;
}
html.public-rundown .theme-light .badges span,
html.public-rundown .theme-light .files a {
  border-color: #cfcfc8;
  color: var(--border);
}
html.public-rundown .theme-light .rundown-public-checklists section {
  border-color: #cfcfc8;
}
html.public-rundown .theme-light .signature {
  color: #454545;
}
html.public-rundown .theme-light .rundown-feedback-form {
  background: #f4f4f1;
  color: #121212;
  border-color: #cfcfc8;
}
html.public-rundown .theme-light .rundown-feedback-form input,
html.public-rundown .theme-light .rundown-feedback-form textarea,
html.public-rundown .theme-light .rundown-feedback-form select {
  background: #fff;
  color: #121212;
}
html.public-rundown .theme-dark .rundown-feedback-form input,
html.public-rundown .theme-dark .rundown-feedback-form textarea,
html.public-rundown .theme-dark .rundown-feedback-form select {
  background: #151c2d;
  color: #f5f8ff;
  border-color: #4b5c8b;
}
html.public-rundown .theme-dark .rundown-public-point button {
  background: #151c2d;
  color: #f5f8ff;
  border-color: #4b5c8b;
}
html.public-rundown .rundown-identity-form {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
  margin-top: 14px;
}
html.public-rundown .rundown-identity-form label {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
}
html.public-rundown .rundown-identity-form select,
html.public-rundown .rundown-identity-form button {
  padding: 8px;
  border: 1px solid #aab5c3;
  border-radius: 6px;
  font: inherit;
}
html.public-rundown .rundown-identity-form small {
  flex-basis: 100%;
  font-size: 12px;
}
html.public-rundown .rundown-regie-note {
  border-left: 3px solid #d38d32;
  padding-left: 10px;
}
/* Selection page: source Kimi hero, day groups and responsive timeline. */
html.public-rundown .rundown-selection {
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}
html.public-rundown .rundown-selection[hidden],
html.public-rundown .rundown-selection [hidden] {
  display: none !important;
}
html.public-rundown .rundown-selection.theme-light {
  background:
    radial-gradient(circle at top left, rgba(0, 0, 0, 0.06), transparent 28%),
    linear-gradient(180deg, #efe9de, #f8f6f1);
  color: #111;
}
html.public-rundown .rundown-selection main {
  max-width: 1320px;
  padding: 28px 20px 80px;
}
html.public-rundown .rundown-selection main > header {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 28px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.82)
  );
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  padding: 24px;
}
html.public-rundown .rundown-selection .rundown-public-eyebrow {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid #d8d2c7;
  border-radius: 999px;
  background: #fff;
  color: #5a5a57;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html.public-rundown .rundown-selection h1 {
  margin: 14px 0 8px;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
html.public-rundown .rundown-selection header p {
  font-size: 16px;
  line-height: 1.55;
  color: #5a5a57;
}
html.public-rundown .rundown-selection .rundown-public-toolbar {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid #d8d2c7;
  border-radius: 16px;
  background: #fff;
}
html.public-rundown .rundown-selection .rundown-public-toolbar label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #5a5a57;
}
html.public-rundown .rundown-selection .rundown-public-toolbar input,
html.public-rundown .rundown-selection .rundown-public-toolbar select,
html.public-rundown .rundown-selection .rundown-public-toolbar button {
  font: inherit;
  border: 1px solid #d8d2c7;
  border-radius: 10px;
  padding: 9px 12px;
  background: #fff;
  color: #111;
}
html.public-rundown .rundown-selection .rundown-public-day {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}
html.public-rundown .rundown-selection .rundown-public-day-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -18px -18px 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #d8d2c7;
  border-radius: 24px 24px 0 0;
  background: #faf8f3;
}
html.public-rundown .rundown-selection .rundown-public-day-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}
html.public-rundown .rundown-selection .rundown-public-day-head span {
  font-size: 12px;
  color: #5a5a57;
}
html.public-rundown .rundown-selection .rundown-item {
  border-radius: 16px;
  border-color: #d8d2c7;
  background: #fff;
  color: #111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.035);
}
html.public-rundown .rundown-selection .rundown-item h2 {
  font-size: 17px;
  color: inherit;
}
html.public-rundown .rundown-selection.theme-dark {
  background: linear-gradient(180deg, var(--background), #11172a);
  color: #eef2fb;
}
html.public-rundown .rundown-selection.theme-dark main > header,
html.public-rundown .rundown-selection.theme-dark .rundown-public-day,
html.public-rundown .rundown-selection.theme-dark .rundown-item,
html.public-rundown .rundown-selection.theme-dark .rundown-public-toolbar {
  background: #161c2d;
  color: #eef2fb;
  border-color: #2a3350;
}
html.public-rundown .rundown-selection.theme-dark .rundown-public-day-head {
  background: #1a2032;
  color: #eef2fb;
  border-color: #2a3350;
}
html.public-rundown .rundown-selection.theme-dark .rundown-public-toolbar input,
html.public-rundown
  .rundown-selection.theme-dark
  .rundown-public-toolbar
  select,
html.public-rundown
  .rundown-selection.theme-dark
  .rundown-public-toolbar
  button {
  background: #0f1524;
  color: #eef2fb;
  border-color: #4b5c8b;
}
html.public-rundown .rundown-selection.theme-dark header p,
html.public-rundown .rundown-selection.theme-dark .rundown-public-day-head span,
html.public-rundown
  .rundown-selection.theme-dark
  .rundown-public-toolbar
  label {
  color: #bac4da;
}
@media (max-width: 650px) {
  html.public-rundown .rundown-selection main {
    padding: 12px 12px 70px;
  }
  html.public-rundown .rundown-selection .rundown-public-day {
    padding: 14px;
    border-radius: 18px;
  }
  html.public-rundown .rundown-selection .rundown-public-day-head {
    margin: -14px -14px 12px;
    padding: 14px;
    border-radius: 18px 18px 0 0;
  }
  html.public-rundown .rundown-selection .rundown-item {
    grid-template-columns: 1fr;
  }
}
@media print {
  html.public-rundown .rundown-selection,
  html.public-rundown .rundown-selection.theme-dark {
    background: #fff !important;
    color: #000 !important;
  }
  html.public-rundown .rundown-selection main {
    max-width: none;
    padding: 0;
  }
  html.public-rundown .rundown-selection .rundown-public-toolbar,
  html.public-rundown .rundown-selection .rundown-identity-form,
  html.public-rundown .rundown-selection .rundown-feedback-form,
  html.public-rundown .rundown-selection .sign-form,
  html.public-rundown .rundown-selection .rundown-public-point form {
    display: none !important;
  }
  html.public-rundown .rundown-selection main > header,
  html.public-rundown .rundown-selection .rundown-public-day,
  html.public-rundown .rundown-selection .rundown-item,
  html.public-rundown .rundown-selection .rundown-public-day-head {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border-color: #aaa !important;
  }
  html.public-rundown .rundown-selection .rundown-public-day-head {
    position: static;
  }
  html.public-rundown .rundown-selection .rundown-item {
    break-inside: avoid;
  }
  html.public-rundown .rundown-selection .rundown-item p,
  html.public-rundown .rundown-selection header p,
  html.public-rundown .rundown-selection .rundown-item time {
    color: #000 !important;
  }
  html.public-rundown .rundown-selection .rundown-public-day {
    break-inside: auto;
  }
}
html.public-rundown .rundown-selection .rundown-checkin {
  border-left: 5px solid #e3a845;
  background: #fffaf0;
}
html.public-rundown .rundown-selection .rundown-checkin-label {
  display: inline-block;
  margin-bottom: 6px;
  color: #835713;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
html.public-rundown .rundown-selection .rundown-checkin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
html.public-rundown .rundown-selection .rundown-checkin-actions form {
  margin: 0;
}
html.public-rundown .rundown-selection .rundown-checkin-actions button,
html.public-rundown .rundown-selection .rundown-checkin-actions span {
  display: inline-block;
  border: 1px solid #d8d2c7;
  border-radius: 9px;
  background: #fff;
  padding: 7px 10px;
  color: #29312b;
  font: inherit;
  font-size: 12px;
}
html.public-rundown
  .rundown-selection
  .rundown-checkin-actions
  button[aria-pressed="true"] {
  background: #eaf5ee;
  border-color: #9bc8a5;
  color: #1f5f33;
}
html.public-rundown .rundown-selection.theme-dark .rundown-checkin {
  background: #292416;
  border-left-color: #e3a845;
}
html.public-rundown
  .rundown-selection.theme-dark
  .rundown-checkin-actions
  button,
html.public-rundown
  .rundown-selection.theme-dark
  .rundown-checkin-actions
  span {
  background: #151c2d;
  border-color: #4b5c8b;
  color: #eef2fb;
}
html.public-rundown .rundown-selection .rundown-photo-upload {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
}
html.public-rundown .rundown-selection .rundown-photo-upload summary {
  cursor: pointer;
  font-weight: 700;
}
html.public-rundown .rundown-selection .rundown-photo-upload form,
html.public-rundown .rundown-selection .rundown-photo-upload label {
  display: grid;
  gap: 6px;
}
html.public-rundown .rundown-selection .rundown-photo-upload form {
  margin-top: 10px;
}
html.public-rundown .rundown-selection .rundown-photo-upload p {
  font-size: 12px;
}
html.public-rundown .rundown-selection .rundown-photo-upload input {
  max-width: 100%;
  font: inherit;
}
html.public-rundown .rundown-selection .rundown-photo-upload button {
  justify-self: start;
  padding: 8px 12px;
  border: 1px solid #b9c7d7;
  border-radius: 8px;
  background: #fff;
  color: #111;
}
html.public-rundown .rundown-selection.theme-dark .rundown-photo-upload {
  border-color: #4b5c8b;
}
html.public-rundown .rundown-selection.theme-dark .rundown-photo-upload button {
  background: #151c2d;
  border-color: #4b5c8b;
  color: #eef2fb;
}
@media print {
  html.public-rundown .rundown-selection .rundown-photo-upload {
    display: none !important;
  }
}
html.public-rundown .rundown-selection .rundown-public-menu {
  position: relative;
}
html.public-rundown .rundown-selection .rundown-public-menu > summary {
  cursor: pointer;
  list-style: none;
  border: 1px solid #d8d2c7;
  border-radius: 10px;
  padding: 9px 12px;
  background: #fff;
  color: #111;
  font-size: 13px;
}
html.public-rundown .rundown-selection .rundown-public-menu-body {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  max-height: 320px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
  background: #fff;
  color: #111;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
html.public-rundown .rundown-selection .rundown-public-menu-body label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
html.public-rundown
  .rundown-selection
  .rundown-public-menu-body
  input[type="checkbox"] {
  width: auto;
}
html.public-rundown
  .rundown-selection
  .rundown-public-menu-body
  label:has(select) {
  display: grid;
}
html.public-rundown .rundown-selection .rundown-hl-0 {
  border-left: 6px solid #edb224;
  background: #fff9e9;
}
html.public-rundown .rundown-selection .rundown-hl-1 {
  border-left: 6px solid #ee82a2;
  background: #fff2f6;
}
html.public-rundown .rundown-selection .rundown-hl-2 {
  border-left: 6px solid #4ca9b3;
  background: #ecfafb;
}
html.public-rundown .rundown-selection .rundown-hl-3 {
  border-left: 6px solid #9873d6;
  background: #f6f1ff;
}
html.public-rundown .rundown-selection .rundown-hl-4 {
  border-left: 6px solid #72a54d;
  background: #f1f9eb;
}
html.public-rundown .rundown-selection .rundown-hl-5 {
  border-left: 6px solid #ec8550;
  background: #fff4ed;
}
html.public-rundown
  .rundown-selection.theme-dark
  .rundown-public-menu
  > summary,
html.public-rundown .rundown-selection.theme-dark .rundown-public-menu-body {
  background: #151c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
html.public-rundown .rundown-selection.theme-dark .rundown-hl-0,
html.public-rundown .rundown-selection.theme-dark .rundown-hl-1,
html.public-rundown .rundown-selection.theme-dark .rundown-hl-2,
html.public-rundown .rundown-selection.theme-dark .rundown-hl-3,
html.public-rundown .rundown-selection.theme-dark .rundown-hl-4,
html.public-rundown .rundown-selection.theme-dark .rundown-hl-5 {
  background: #20283b;
}
@media print {
  html.public-rundown .rundown-selection .rundown-public-menu {
    display: none !important;
  }
}
html.public-rundown .rundown-selection .rundown-public-lightbox {
  width: min(96vw, 1100px);
  height: min(92vh, 900px);
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  background: #111827;
  color: #fff;
}
html.public-rundown .rundown-selection .rundown-public-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.86);
}
html.public-rundown .rundown-selection .rundown-public-lightbox button {
  display: block;
  margin: 0 0 10px auto;
  padding: 8px 12px;
  border: 1px solid #64748b;
  border-radius: 8px;
  background: var(--surface-raised);
  color: #fff;
}
html.public-rundown .rundown-selection .rundown-public-lightbox img {
  display: block;
  width: 100%;
  height: calc(100% - 46px);
  object-fit: contain;
}
html.public-rundown .rundown-selection .rundown-public-team {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #d8d2c7;
  border-radius: 16px;
  background: #fff;
  color: #111;
}
html.public-rundown .rundown-selection .rundown-public-team > summary {
  cursor: pointer;
  font-weight: 800;
}
html.public-rundown .rundown-selection .rundown-public-team > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
html.public-rundown .rundown-selection .rundown-public-team article {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
  background: #faf8f3;
}
html.public-rundown .rundown-selection .rundown-public-team img,
html.public-rundown .rundown-selection .rundown-public-team article > span {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  background: #e8e5df;
}
html.public-rundown .rundown-selection .rundown-public-team article > span {
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
}
html.public-rundown .rundown-selection .rundown-public-team small {
  color: #5a5a57;
}
html.public-rundown .rundown-selection.theme-dark .rundown-public-team,
html.public-rundown .rundown-selection.theme-dark .rundown-public-team article {
  background: #161c2d;
  color: #eef2fb;
  border-color: #2a3350;
}
html.public-rundown .rundown-selection.theme-dark .rundown-public-team small {
  color: #bac4da;
}
html.public-rundown .rundown-selection .rundown-public-subgroup {
  margin: 20px 0 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--gold);
  color: #384667;
  background: #eef3ff;
  font-size: 14px;
}
html.public-rundown .rundown-selection.theme-dark .rundown-public-subgroup {
  color: #e0eaff;
  background: #1b2746;
}
html.public-rundown .rundown-selection .rundown-lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
html.public-rundown .rundown-selection .rundown-lightbox-toolbar button,
html.public-rundown .rundown-selection .rundown-lightbox-toolbar a {
  display: inline-block;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #64748b;
  border-radius: 8px;
  background: var(--surface-raised);
  color: #fff;
  text-decoration: none;
}
html.public-rundown
  .rundown-selection
  .rundown-lightbox-toolbar
  button:disabled {
  opacity: 0.4;
}
html.public-rundown .rundown-selection .rundown-lightbox-canvas {
  height: calc(100% - 55px);
  overflow: auto;
  display: grid;
  place-items: center;
}
html.public-rundown .rundown-selection .rundown-lightbox-canvas img {
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
html.public-rundown .rundown-selection .rundown-lightbox-canvas img.zoom-2 {
  width: 150%;
  max-width: none;
  max-height: none;
}
html.public-rundown .rundown-selection .rundown-lightbox-canvas img.zoom-3 {
  width: 200%;
  max-width: none;
  max-height: none;
}
html.public-rundown .rundown-selection .photos figure {
  display: grid;
  gap: 4px;
  justify-items: start;
  margin: 0;
}
html.public-rundown .rundown-selection .photos figcaption {
  max-width: 150px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
html.public-rundown .rundown-selection .photos form {
  margin: 0;
}
html.public-rundown .rundown-selection .photos form button {
  padding: 5px 8px;
  border: 1px solid #d8d2c7;
  border-radius: 7px;
  background: #fff;
  color: #8d1f1f;
  font-size: 12px;
}
html.public-rundown .rundown-selection.theme-dark .photos form button {
  background: #151c2d;
  border-color: #4b5c8b;
  color: #ffadad;
}
@media print {
  html.public-rundown .rundown-selection .photos form {
    display: none !important;
  }
}
html.public-rundown .rundown-selection .rundown-office-viewer {
  width: min(96vw, 1100px);
  height: min(90vh, 850px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8d2c7;
  border-radius: 20px;
  background: #fff;
  color: #111;
}
html.public-rundown .rundown-selection .rundown-office-viewer::backdrop {
  background: rgba(0, 0, 0, 0.72);
}
html.public-rundown .rundown-selection .rundown-office-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid #d8d2c7;
}
html.public-rundown .rundown-selection .rundown-office-toolbar strong {
  flex: 1;
  min-width: 130px;
  overflow-wrap: anywhere;
}
html.public-rundown .rundown-selection .rundown-office-toolbar button,
html.public-rundown .rundown-selection .rundown-office-toolbar select,
html.public-rundown .rundown-selection .rundown-office-toolbar a {
  padding: 7px 10px;
  border: 1px solid #c9c9c2;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
}
html.public-rundown
  .rundown-selection
  .rundown-office-viewer
  > [data-office-status] {
  margin: 0;
  padding: 8px 16px;
  color: #5a5a57;
  font-size: 12px;
}
html.public-rundown .rundown-selection .rundown-office-scroll {
  height: calc(100% - 104px);
  overflow: auto;
  padding: 18px;
  background: #edf0f6;
}
html.public-rundown .rundown-selection .rundown-office-content {
  min-height: 100%;
  width: max-content;
  min-width: 100%;
  padding: 24px;
  background: #fff;
  color: #111;
  line-height: 1.55;
  transform-origin: top left;
}
html.public-rundown .rundown-selection .rundown-office-content p {
  white-space: pre-wrap;
  margin: 0.5em 0;
}
html.public-rundown .rundown-selection .rundown-office-content.office-zoom-75 {
  zoom: 0.75;
}
html.public-rundown .rundown-selection .rundown-office-content.office-zoom-125 {
  zoom: 1.25;
}
html.public-rundown .rundown-selection .rundown-office-content.office-zoom-150 {
  zoom: 1.5;
}
html.public-rundown .rundown-selection .rundown-office-table {
  border-collapse: collapse;
  table-layout: auto;
}
html.public-rundown .rundown-selection .rundown-office-table th,
html.public-rundown .rundown-selection .rundown-office-table td {
  min-width: 80px;
  max-width: 340px;
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  vertical-align: top;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
}
html.public-rundown .rundown-selection .rundown-office-table th {
  min-width: 42px;
  background: #f3f4f6;
  color: var(--border-strong);
  text-align: right;
}
html.public-rundown .rundown-selection.theme-dark .rundown-office-viewer {
  background: #161c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
html.public-rundown
  .rundown-selection.theme-dark
  .rundown-office-toolbar
  button,
html.public-rundown
  .rundown-selection.theme-dark
  .rundown-office-toolbar
  select,
html.public-rundown .rundown-selection.theme-dark .rundown-office-toolbar a {
  background: #151c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
html.public-rundown
  .rundown-selection.theme-dark
  .rundown-office-viewer
  > [data-office-status] {
  color: #bac4da;
}
@media (max-width: 700px) {
  html.public-rundown .rundown-selection .rundown-office-viewer {
    width: 96vw;
    height: 94vh;
  }
  html.public-rundown .rundown-selection .rundown-office-scroll {
    padding: 8px;
  }
  html.public-rundown .rundown-selection .rundown-office-content {
    padding: 12px;
  }
}
html.public-rundown .rundown-selection .rundown-doc-list {
  padding-left: 22px;
  position: relative;
}
html.public-rundown .rundown-selection .rundown-doc-list::before {
  content: "•";
  position: absolute;
  left: 5px;
}
html.public-rundown .rundown-selection .rundown-doc-table {
  margin: 12px 0;
}
html.public-rundown .rundown-selection .rundown-doc-table td {
  min-width: 80px;
}
html.public-rundown .rundown-selection .rundown-doc-table p {
  margin: 0;
}
html.public-rundown .rundown-selection .rundown-office-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px 0;
}
html.public-rundown .rundown-selection .rundown-office-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
html.public-rundown .rundown-selection .rundown-office-pages span {
  font-size: 12px;
  color: #5a5a57;
}
html.public-rundown .rundown-selection .rundown-office-pages button:disabled {
  opacity: 0.4;
}
html.public-rundown .rundown-selection .rundown-office-doc-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
html.public-rundown .rundown-selection .rundown-office-doc-pages span {
  font-size: 12px;
  color: #5a5a57;
}
html.public-rundown
  .rundown-selection
  .rundown-office-doc-pages
  button:disabled {
  opacity: 0.4;
}

html.public-rundown .rundown-selection .rundown-office-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  margin: 0;
}

html.public-rundown .rundown-selection .rundown-office-slide {
  position: relative;
  container-type: inline-size;
  width: min(960px, 100%);
  min-height: 100px;
  background: #fff;
  border: 1px solid #cbd5e1;
  overflow: hidden;
  color: #111;
}
html.public-rundown .rundown-selection .rundown-office-slide-shape {
  overflow: hidden;
  font-size: 2cqw;
  line-height: 1.2;
}
html.public-rundown .rundown-selection .rundown-office-slide-shape p {
  margin: 0;
  white-space: pre-wrap;
}
html.public-rundown
  .rundown-selection
  .rundown-office-content
  img.rundown-office-slide-image {
  margin: 0;
  object-fit: contain;
  max-width: none;
}
html.public-rundown .rundown-selection .rundown-office-slide-unpositioned {
  position: relative;
  max-width: 100%;
}

html.public-rundown .rundown-selection .rundown-office-pdf {
  display: block;
  border: 0;
  width: min(960px, 100%);
  height: 70vh;
  background: #fff;
}

/* planning-gantt.css */
.se-gantt {
  padding: 20px;
  min-width: 0;
}
.se-gantt-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.se-gantt-header h2 {
  margin: 0;
}
.se-gantt-header p {
  color: var(--mut);
  margin: 6px 0 16px;
}
.se-gantt-toolbar {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.se-gantt-toolbar label {
  display: flex;
  gap: 5px;
  flex-direction: column;
  font-size: 12px;
  font-weight: 700;
}
.se-gantt-toolbar [role="group"] {
  display: flex;
  gap: 4px;
}
.se-gantt-toolbar button[aria-pressed="true"] {
  background: var(--gold);
  color: white;
}
.se-gantt-scroll {
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  max-height: 70vh;
}
.se-gantt-grid {
  min-width: 950px;
}
.se-gantt-scale,
.se-gantt-row {
  display: grid;
  grid-template-columns: 240px minmax(700px, 1fr);
}
.se-gantt-scale {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card, var(--surface-raised));
  border-bottom: 1px solid var(--border-strong);
}
.se-gantt-scale > strong,
.se-gantt-name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card, var(--surface-raised));
  padding: 10px;
  border-right: 1px solid var(--border-strong);
}
.se-gantt-scale-cells {
  display: grid;
  grid-template-columns: repeat(var(--gantt-columns), 1fr);
}
.se-gantt-scale-cells span {
  padding: 10px 3px;
  font-size: 11px;
  border-right: 1px solid var(--border-strong);
  white-space: nowrap;
}
.se-gantt-group {
  position: sticky;
  left: 0;
  background: var(--card-2, #1a2540);
  margin: 0;
  padding: 8px 10px;
  font-size: 13px;
}
.se-gantt-row {
  min-height: 54px;
  border-bottom: 1px solid var(--border-strong);
}
.se-gantt-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.se-gantt-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.se-gantt-name small {
  color: var(--mut);
  font-size: 11px;
}
.se-gantt-track {
  position: relative;
  background: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / var(--gantt-columns) - 1px),
    var(--border-strong) calc(100% / var(--gantt-columns) - 1px),
    var(--border-strong) calc(100% / var(--gantt-columns))
  );
}
.se-gantt-bar {
  position: absolute;
  top: 12px;
  height: 28px;
  background: var(--gold);
  color: white;
  border: 1px solid var(--gold);
  border-radius: 5px;
  padding: 0 5px;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  min-width: 4px;
}
.se-gantt-bar.milestone {
  width: 13px;
  height: 13px;
  top: 20px;
  transform: translateX(-50%) rotate(45deg);
  padding: 0;
}
.se-gantt-bar.conflict {
  outline: 2px solid #ef5d6e;
}
.se-gantt-bar.completed {
  opacity: 0.6;
  text-decoration: line-through;
}
.se-gantt-bar:focus-visible {
  outline: 3px solid #f5b942;
  z-index: 1;
}
.se-gantt-empty {
  padding: 12px;
  color: var(--mut);
}
.se-gantt-bar:disabled {
  opacity: 1;
  cursor: default;
}
.se-gantt-bar.completed:disabled {
  opacity: 0.6;
}
.se-gantt-resize {
  position: absolute;
  top: 11px;
  width: 10px;
  height: 30px;
  transform: translateX(-50%);
  padding: 0;
  border: 1px solid #c6d2ff;
  background: #6282fa;
  cursor: ew-resize;
  z-index: 1;
}
.se-gantt-resize:focus-visible {
  outline: 3px solid #f5b942;
}
.planner-v2 .se-gantt-track .se-gantt-bar {
  background: var(--gold);
  color: #fff;
  border: 1px solid var(--gold);
  padding: 0 5px;
  min-width: 4px;
}
.planner-v2 .se-gantt-track .se-gantt-bar.milestone {
  min-width: 13px;
  padding: 0;
}
.planner-v2 .se-gantt-track .se-gantt-resize {
  min-width: 10px;
  width: 10px;
  padding: 0;
  border: 1px solid #c6d2ff;
  background: #6282fa;
  border-radius: 2px;
}
.se-gantt-grid {
  position: relative;
}
.se-gantt-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.se-gantt-lines path {
  stroke: #91a8f8;
  stroke-width: 1.5;
  fill: none;
}
.se-gantt-lines path.violation {
  stroke: #ef5d6e;
}
.se-gantt-links {
  position: relative;
  margin-bottom: 12px;
}
.se-gantt-links-panel {
  margin-top: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px;
}
.se-gantt-links-panel form {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}
.se-gantt-links-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.se-gantt-links-panel select {
  max-width: 240px;
}
.se-gantt-links-panel ul {
  padding-left: 18px;
  max-height: 200px;
  overflow: auto;
}
.se-gantt-links-panel li {
  margin: 5px 0;
}
.se-gantt-links-panel li button {
  margin-left: 8px;
}
.se-gantt-sandbox {
  margin-bottom: 12px;
}
.se-gantt-sandbox .se-gantt-links-panel form {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}
.se-gantt-sandbox .se-gantt-links-panel label {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.se-gantt-sandbox li {
  margin: 6px 0;
}
.se-gantt-sandbox li button {
  margin-left: 6px;
}
.planner-v2 .se-gantt-track .se-gantt-bar.sandbox {
  border-style: dashed;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.25) 0 6px,
    transparent 6px 12px
  );
}
.planner-v2 .se-gantt-group button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font-weight: 800;
  cursor: pointer;
}
.planner-v2 .se-gantt-track .se-gantt-bar.hit {
  box-shadow:
    0 0 0 2px #f5b942,
    0 0 8px #f5b942;
}
.se-gantt-presence .se-gantt-name {
  font-weight: 600;
}
.se-gantt-presence-bar {
  position: absolute;
  top: 14px;
  height: 25px;
  border: 1px dashed #81a0ff;
  background: rgba(70, 103, 246, 0.2);
  border-radius: 4px;
}
.se-gantt-checkin {
  position: absolute;
  top: 20px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: #d99b39;
  border: 1px solid #f8c373;
}
.planner-v2 .se-gantt-track .se-gantt-link-point {
  position: absolute;
  top: 20px;
  width: 9px;
  min-width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid #fff;
  background: #bdd0ff;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  cursor: crosshair;
}
.se-gantt-track:hover .se-gantt-link-point,
.planner-v2 .se-gantt-track .se-gantt-link-point:focus-visible {
  opacity: 1;
}
.se-gantt-name {
  padding-right: 30px;
}
.se-gantt-item-menu {
  position: absolute;
  top: 8px;
  right: 7px;
}
.se-gantt-item-menu summary {
  cursor: pointer;
  list-style: none;
  padding: 1px 5px;
}
.se-gantt-item-menu > div {
  position: absolute;
  right: 0;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  padding: 6px;
  background: var(--card, var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  z-index: 5;
}
.se-gantt-row:has(.se-gantt-item-menu[open]) .se-gantt-name {
  z-index: 4;
}
.planner-v2.planner-gantt-active {
  padding: 0;
}
.planner-gantt-active > .planner-v2-header,
.planner-gantt-active > .planner-v2-notice,
.planner-gantt-active .planner-v2-sidebar,
.planner-gantt-active .planner-v2-toolbar {
  display: none;
}
.planner-gantt-active .planner-v2-layout {
  display: block;
}
.planner-gantt-active .planner-v2-main {
  min-width: 0;
  width: 100%;
}
.planner-v2 .se-gantt-back {
  margin: 0 0 8px;
  padding: 5px 9px;
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-artist {
  background: #8b5cf6;
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-production {
  background: #3b82f6;
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-hospitality {
  background: #d99137;
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-planning {
  background: var(--gold);
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-custom {
  background: #22a57a;
}
.planner-v2 .se-gantt-track .se-gantt-bar.cancelled {
  opacity: 0.42;
  text-decoration: line-through;
}
.planner-v2 .se-gantt-track .se-gantt-bar.delayed {
  box-shadow: inset 0 0 0 2px #f5b942;
}
.planner-v2 .se-gantt-track .se-gantt-bar.in-progress {
  box-shadow: inset 0 0 0 2px #53c987;
}
.se-gantt-search {
  position: relative;
}
.se-gantt-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-height: 280px;
  overflow: auto;
  background: var(--card, var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px;
}
.planner-v2 .se-gantt-suggestions button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 7px;
}
.se-gantt-suggestions small {
  white-space: nowrap;
  color: var(--mut);
}
/* Gantt has its own compact workspace, matching the planning reference. */
.planner-v2.planner-gantt-active {
  position: fixed;
  inset: 0;
  z-index: 40;
  margin: 0;
  border-radius: 0;
  background: #0a0f1e;
  overflow: auto;
}
.planner-gantt-active .planner-v2-main {
  padding: 0;
  border: 0;
  border-radius: 0;
}
.se-gantt {
  --gantt-bg: #0a0f1e;
  --gantt-top: #0f1526;
  --gantt-control: #1a2242;
  --gantt-input: #0d1327;
  --card: #131a2e;
  --card-2: #0f1730;
  --fg: var(--text);
  --mut: #98a3b6;
  --border-strong: #2e3a5f;
  min-height: 100vh;
  padding: 0 14px 14px;
  background: var(--gantt-bg);
  color: var(--fg);
}
.se-gantt-light {
  --gantt-bg: #eef1f7;
  --gantt-top: #e4e9f2;
  --gantt-control: #eef1f7;
  --gantt-input: #f5f7fb;
  --card: #fff;
  --card-2: #f2f5fa;
  --fg: #1a2333;
  --mut: #5b6a82;
  --border-strong: #c2cddd;
  color-scheme: light;
}
.se-gantt-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 -14px 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--gantt-top);
}
.se-gantt-header {
  align-items: center;
  gap: 10px;
}
.se-gantt-header h2 {
  font-size: 16px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.se-gantt-header small {
  font-size: 12px;
  color: var(--mut);
}
.planner-v2 .se-gantt-back {
  margin: 0;
  padding: 7px 10px;
}
.se-gantt-toolbar {
  align-items: center;
  flex: 1;
  gap: 7px;
  margin: 0;
}
.se-gantt-toolbar label {
  margin: 0;
}
.se-gantt-switch {
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--card-2);
}
.planner-v2 .se-gantt button,
.planner-v2 .se-gantt input,
.planner-v2 .se-gantt select,
.planner-v2 .se-gantt textarea {
  color: var(--fg);
  background: var(--gantt-control);
  border-color: var(--border-strong);
}
.planner-v2 .se-gantt input,
.planner-v2 .se-gantt select,
.planner-v2 .se-gantt textarea {
  background: var(--gantt-input);
}
.planner-v2 .se-gantt-switch button {
  padding: 6px 9px;
  background: transparent;
  border-color: transparent;
  white-space: nowrap;
}
.planner-v2 .se-gantt-toolbar button[aria-pressed="true"] {
  background: rgba(59, 108, 255, 0.2);
  border-color: #3b6cff;
  color: var(--fg);
}
.planner-v2 .se-gantt .planner-v2-primary {
  background: linear-gradient(180deg, #3b6cff, #2a49d6);
  color: white;
  border-color: #2a49d6;
}
.se-gantt-scroll {
  max-height: calc(100vh - 155px);
  min-height: 240px;
  background: var(--card);
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-artist {
  background: #a06bff;
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-production {
  background: #3b8cff;
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-hospitality {
  background: #ff9f43;
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-planning {
  background: #2dd4a7;
}
.planner-v2 .se-gantt-track .se-gantt-bar.type-custom {
  background: #e561a8;
}
@media (max-width: 850px) {
  .se-gantt-topbar {
    align-items: flex-start;
  }
  .se-gantt-switch {
    max-width: 100%;
    overflow-x: auto;
  }
  .se-gantt-scroll {
    max-height: 65vh;
  }
}
.se-gantt-toolbar .se-gantt-links,
.se-gantt-toolbar .se-gantt-sandbox {
  position: relative;
  margin: 0;
}
.se-gantt-toolbar .se-gantt-links-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  width: min(620px, 90vw);
  max-height: 70vh;
  overflow: auto;
  background: var(--card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.se-gantt-scale,
.se-gantt-row {
  grid-template-columns: 594px minmax(700px, 1fr);
}
.se-gantt-grid {
  min-width: 1294px;
}
.se-gantt-columns,
.se-gantt-name {
  display: grid;
  grid-template-columns: 230px 104px 110px 150px;
  gap: 0;
}
.se-gantt-columns {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card-2);
  border-right: 1px solid var(--border-strong);
}
.se-gantt-columns strong,
.se-gantt-name > strong,
.se-gantt-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 7px 9px;
  border-right: 1px solid var(--border-strong);
}
.se-gantt-name {
  padding: 0;
}
.se-gantt-name > strong {
  padding-right: 28px;
}
.se-gantt-name > span {
  color: var(--fg);
  font-size: 12px;
}
.se-gantt-item-menu {
  left: 201px;
  right: auto;
  top: 3px;
}
.se-gantt-item-menu > div {
  right: auto;
  left: 0;
}
.se-gantt-row {
  min-height: 34px;
}
.se-gantt-bar {
  top: 3px;
  height: 28px;
}
.se-gantt-bar.milestone {
  top: 10px;
}
.se-gantt-resize {
  top: 2px;
}
.planner-v2 .se-gantt-track .se-gantt-link-point {
  top: 12px;
}
.se-gantt-presence-bar {
  top: 4px;
}
.se-gantt-checkin {
  top: 11px;
}
.se-gantt-row:hover .se-gantt-name,
.se-gantt-row:hover .se-gantt-track {
  background-color: rgba(127, 150, 255, 0.1);
}
.se-gantt {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.se-gantt-topbar {
  flex: none;
}
.se-gantt-scroll {
  flex: 1;
  max-height: none;
  min-height: 200px;
}
.planner-v2 .se-gantt .se-gantt-group button {
  background: transparent;
  border-color: transparent;
  color: var(--fg);
}
.se-gantt-scale-cells {
  display: block;
}
.se-gantt-scale-periods,
.se-gantt-scale-units {
  display: grid;
  grid-template-columns: repeat(var(--gantt-columns), 1fr);
}
.se-gantt-scale-periods {
  border-bottom: 1px solid var(--border-strong);
}
.se-gantt-scale-cells span {
  padding: 5px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-gantt-columns {
  align-items: stretch;
}
.se-gantt-columns strong {
  display: flex;
  align-items: center;
}
.gantt-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.58);
}
.gantt-editor-panel {
  position: fixed;
  z-index: 56;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  overflow-y: auto;
  padding: 18px;
  background: #131a2e;
  border-left: 1px solid #2e3a5f;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.3);
}
.planner-v2 .gantt-editor-panel .planner-v2-form {
  max-width: none;
  margin: 0 0 12px;
}
.planner-v2 .gantt-editor-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  font-size: 18px;
  padding: 4px 10px;
}
.planner-gantt-active:has(.se-gantt-light) .gantt-editor-panel {
  --fg: #1a2333;
  --mut: #5b6a82;
  --border-strong: #c2cddd;
  --panel-gradient: linear-gradient(#fff, #f2f5fa);
  background: #fff;
  color: #1a2333;
}
.planner-gantt-active:has(.se-gantt-light) .gantt-editor-panel input,
.planner-gantt-active:has(.se-gantt-light) .gantt-editor-panel select,
.planner-gantt-active:has(.se-gantt-light) .gantt-editor-panel textarea {
  background: #f5f7fb;
  border-color: #c2cddd;
  color: #1a2333;
}
.gantt-editor-panel:has(.gantt-edit-form) {
  padding: 0;
}
.gantt-edit-form {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: var(--fg);
}
.gantt-edit-form header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-strong);
}
.gantt-edit-form header h3 {
  margin: 0;
  padding-right: 35px;
  font-size: 16px;
}
.gantt-edit-body {
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  flex: 1;
}
.gantt-edit-body label {
  display: grid;
  gap: 5px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 600;
}
.gantt-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.gantt-edit-body fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.gantt-edit-body legend {
  color: var(--mut);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
}
.gantt-edit-options {
  display: grid;
  gap: 2px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 5px;
}
.gantt-edit-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  color: var(--fg);
}
.gantt-edit-options input {
  width: auto;
}
.gantt-edit-form footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #131a2e;
  border-top: 1px solid var(--border-strong);
}
.gantt-edit-form footer span {
  flex: 1;
}
.planner-v2 .gantt-edit-delete {
  color: #ef5d6e;
  border-color: rgba(239, 93, 110, 0.45);
}
.planner-gantt-active:has(.se-gantt-light) .gantt-edit-form footer {
  background: #fff;
}
.planner-v2 .gantt-editor-panel .gantt-editor-close {
  position: fixed;
  right: 12px;
  top: 12px;
  float: none;
}
.gantt-edit-body {
  align-content: start;
}
.planner-v2 .se-gantt .se-gantt-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding: 7px 28px 7px 9px;
  border: 0;
  border-right: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  font-weight: 700;
}
/* One continuous timeline spans the event at every zoom level. */
.se-gantt-grid {
  width: calc(594px + var(--gantt-timeline-width));
  min-width: 100%;
}
.se-gantt-scale,
.se-gantt-row {
  grid-template-columns: 594px var(--gantt-timeline-width);
}
.se-gantt-scale-units {
  grid-template-columns: repeat(
    var(--gantt-columns),
    var(--gantt-column-width)
  );
}
.se-gantt-scale-periods {
  grid-template-columns: repeat(
    var(--gantt-columns),
    var(--gantt-column-width)
  );
}
.se-gantt-group {
  position: relative;
  left: auto;
  display: grid;
  grid-template-columns: 594px var(--gantt-timeline-width);
  width: 100%;
  padding: 0;
  min-height: 34px;
}
.se-gantt-group-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: var(--card-2);
  border-right: 1px solid var(--border-strong);
}
.se-gantt-group-track {
  position: relative;
  min-height: 34px;
  background: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--gantt-column-width) - 1px),
    var(--border-strong) calc(var(--gantt-column-width) - 1px),
    var(--border-strong) var(--gantt-column-width)
  );
}
.planner-v2 .se-gantt .se-gantt-mini {
  position: absolute;
  top: 3px;
  height: 28px;
  min-width: 4px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  background: #2dd4a7;
}
.planner-v2 .se-gantt .se-gantt-mini.type-artist {
  background: #a06bff;
}
.planner-v2 .se-gantt .se-gantt-mini.type-production {
  background: #3b8cff;
}
.planner-v2 .se-gantt .se-gantt-mini.type-hospitality {
  background: #ff9f43;
}
.planner-v2 .se-gantt .se-gantt-mini.type-custom {
  background: #e561a8;
}
.se-gantt-mini.cancelled {
  opacity: 0.35;
}
.planner-v2 .se-gantt-context {
  position: fixed;
  z-index: 55;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 25px #0007;
}
.planner-v2 .se-gantt-context button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px;
}
.planner-v2 .se-gantt-context .danger {
  color: #ef5d6e;
}

/* rundown-office-viewer-admin.css */
.planner-rundown .rundown-office-viewer {
  width: min(96vw, 1100px);
  height: min(90vh, 850px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8d2c7;
  border-radius: 20px;
  background: #fff;
  color: #111;
}
.planner-rundown .rundown-office-viewer::backdrop {
  background: rgba(0, 0, 0, 0.72);
}
.planner-rundown .rundown-office-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid #d8d2c7;
}
.planner-rundown .rundown-office-toolbar strong {
  flex: 1;
  min-width: 130px;
  overflow-wrap: anywhere;
}
.planner-rundown .rundown-office-toolbar button,
.planner-rundown .rundown-office-toolbar select,
.planner-rundown .rundown-office-toolbar a {
  padding: 7px 10px;
  border: 1px solid #c9c9c2;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
}
.planner-rundown .rundown-office-viewer > [data-office-status] {
  margin: 0;
  padding: 8px 16px;
  color: #5a5a57;
  font-size: 12px;
}
.planner-rundown .rundown-office-scroll {
  height: calc(100% - 104px);
  overflow: auto;
  padding: 18px;
  background: #edf0f6;
}
.planner-rundown .rundown-office-content {
  min-height: 100%;
  width: max-content;
  min-width: 100%;
  padding: 24px;
  background: #fff;
  color: #111;
  line-height: 1.55;
  transform-origin: top left;
}
.planner-rundown .rundown-office-content p {
  white-space: pre-wrap;
  margin: 0.5em 0;
}
.planner-rundown .rundown-office-content.office-zoom-75 {
  zoom: 0.75;
}
.planner-rundown .rundown-office-content.office-zoom-125 {
  zoom: 1.25;
}
.planner-rundown .rundown-office-content.office-zoom-150 {
  zoom: 1.5;
}
.planner-rundown .rundown-office-table {
  border-collapse: collapse;
  table-layout: auto;
}
.planner-rundown .rundown-office-table th,
.planner-rundown .rundown-office-table td {
  min-width: 80px;
  max-width: 340px;
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  vertical-align: top;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.planner-rundown .rundown-office-table th {
  min-width: 42px;
  background: #f3f4f6;
  color: var(--border-strong);
  text-align: right;
}
.planner-rundown.theme-dark .rundown-office-viewer {
  background: #161c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
.planner-rundown.theme-dark .rundown-office-toolbar button,
.planner-rundown.theme-dark .rundown-office-toolbar select,
.planner-rundown.theme-dark .rundown-office-toolbar a {
  background: #151c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
.planner-rundown.theme-dark .rundown-office-viewer > [data-office-status] {
  color: #bac4da;
}
@media (max-width: 700px) {
  .planner-rundown .rundown-office-viewer {
    width: 96vw;
    height: 94vh;
  }
  .planner-rundown .rundown-office-scroll {
    padding: 8px;
  }
  .planner-rundown .rundown-office-content {
    padding: 12px;
  }
}
.planner-rundown .rundown-doc-list {
  padding-left: 22px;
  position: relative;
}
.planner-rundown .rundown-doc-list::before {
  content: "•";
  position: absolute;
  left: 5px;
}
.planner-rundown .rundown-doc-table {
  margin: 12px 0;
}
.planner-rundown .rundown-doc-table td {
  min-width: 80px;
}
.planner-rundown .rundown-doc-table p {
  margin: 0;
}
.planner-rundown .rundown-office-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px 0;
}
.planner-rundown .rundown-office-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.planner-rundown .rundown-office-pages[hidden] {
  display: none;
}
.planner-rundown .rundown-office-pages span {
  font-size: 12px;
  color: #5a5a57;
}
.planner-rundown .rundown-office-pages button:disabled {
  opacity: 0.4;
}
.planner-rundown .rundown-office-doc-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.planner-rundown .rundown-office-doc-pages[hidden] {
  display: none;
}
.planner-rundown .rundown-office-doc-pages span {
  font-size: 12px;
  color: #5a5a57;
}
.planner-rundown .rundown-office-doc-pages button:disabled {
  opacity: 0.4;
}

.planner-rundown .rundown-office-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  margin: 0;
}

.planner-rundown .rundown-office-slide {
  position: relative;
  container-type: inline-size;
  width: min(960px, 100%);
  min-height: 100px;
  background: #fff;
  border: 1px solid #cbd5e1;
  overflow: hidden;
  color: #111;
}
.planner-rundown .rundown-office-slide-shape {
  overflow: hidden;
  font-size: 2cqw;
  line-height: 1.2;
}
.planner-rundown .rundown-office-slide-shape p {
  margin: 0;
  white-space: pre-wrap;
}
.planner-rundown .rundown-office-content img.rundown-office-slide-image {
  margin: 0;
  object-fit: contain;
  max-width: none;
}
.planner-rundown .rundown-office-slide-unpositioned {
  position: relative;
  max-width: 100%;
}

.planner-rundown .rundown-office-pdf {
  display: block;
  border: 0;
  width: min(960px, 100%);
  height: 70vh;
  background: #fff;
}

/* Shared finish: the same forest / champagne identity in every workspace. */
.planner-v2 {
  --fg: var(--text);
  --mut: var(--text-muted);
  --card: var(--surface);
  --surface-2: var(--surface-raised);
  --surface-3: var(--surface-input);
  --panel-gradient: linear-gradient(145deg, #10271e, #071b16);
  --border-strong: #65796b;
  background: var(--background);
  border-radius: var(--radius);
  font-size: 13px;
}
.planner-v2-header {
  min-height: 116px;
  border-radius: 14px;
  border-color: var(--border-gold);
  padding: 24px;
  background: var(--brand-backdrop);
}
.planner-v2-header h2 {
  font: 500 clamp(29px, 3vw, 48px)/1.15 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: var(--text);
}
.planner-v2-header button {
  border-radius: 8px;
  margin-top: 0;
}
.planner-v2-sidebar,
.planner-v2-main {
  background: linear-gradient(140deg, var(--surface), var(--surface));
  border-color: var(--border-gold);
  border-radius: var(--radius);
}
.planner-v2-layout {
  grid-template-columns: minmax(260px, 290px) minmax(0, 1fr);
}
.planner-v2-sidebar {
  padding: 16px;
}
.planner-v2-section,
.planner-v2-section button {
  border-radius: 8px;
}
.planner-v2 button {
  border-radius: 7px;
}
.planner-v2 button:hover {
  border-color: var(--gold);
}
.planner-v2 button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
.planner-v2 .planner-v2-primary,
.planner-v2-active,
.directory-primary,
.directory-admin [role="tab"][aria-selected="true"] {
  background: var(--gold-fill) !important;
  border-color: var(--gold) !important;
  color: var(--gold-ink) !important;
}
.planner-v2 .planner-v2-active {
  font-weight: 600;
}
.planner-v2 input,
.planner-v2 select,
.planner-v2 textarea {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-input);
}
.planner-v2 .timeline-item-selected {
  border-color: var(--gold);
  background: var(--selected);
  box-shadow: inset 3px 0 var(--gold);
}
.planner-v2 .timeline-select {
  accent-color: var(--gold);
}
.planner-v2 .planner-resource-buttons button[aria-pressed="true"],
.planner-v2 .regie-columns button[aria-pressed="true"] {
  background: var(--selected);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.planner-calendar {
  --fc-border-color: var(--border);
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-raised);
  --fc-today-bg-color: #edbd6812;
  --fc-event-bg-color: #36563b;
  --fc-event-border-color: var(--gold-deep);
  --fc-list-event-hover-bg-color: var(--surface-hover);
}
.planner-calendar.fc .fc-button-primary {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-strong);
}
.planner-calendar.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--selected);
  border-color: var(--gold);
}
.directory-admin .directory-card,
.directory-admin [role="tablist"],
.directory-admin .directory-dialog,
.directory-group-picker-panel {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.directory-admin .directory-section-head input,
.directory-admin .directory-section-head select,
.directory-admin .directory-inline,
.directory-admin .directory-dialog input:not([type="checkbox"]),
.directory-admin .directory-dialog textarea,
.directory-admin .directory-dialog select,
.directory-admin .directory-check-list,
.directory-admin .directory-availability-row {
  background: var(--surface-input);
  color: var(--text);
  border-color: var(--border-strong);
}
.directory-dialog {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.directory-dialog label,
.directory-admin .directory-dialog label {
  color: var(--text-muted);
}
.directory-active {
  color: var(--success);
  background: var(--success-surface);
}
.directory-inactive {
  color: var(--text-muted);
  background: var(--surface-hover);
}
.directory-admin .directory-card th,
.directory-admin .directory-card td {
  color: var(--text);
}
.planner-gantt-track {
  background: repeating-linear-gradient(
    to right,
    var(--surface-input) 0,
    var(--surface-input) calc(25% - 1px),
    var(--border) calc(25% - 1px),
    var(--border) 25%
  );
}
.planner-gantt-track button {
  background: var(--gold-deep);
  border-color: var(--gold);
}
.timeline-signature img {
  background: #f3f1e9;
}
html.public-rundown,
html.public-checklist {
  background: var(--background);
  color: var(--text);
}
html.public-rundown body,
html.public-checklist body {
  background: var(--brand-backdrop);
}
html.public-rundown header,
html.public-checklist header {
  background: linear-gradient(120deg, var(--surface-raised), var(--surface));
  border-color: var(--border-gold);
  border-radius: 12px;
}
html.public-rundown h1,
html.public-checklist h1 {
  font-family: var(--font-display);
  font-weight: 500;
}
html.public-rundown .rundown-item,
html.public-checklist .item {
  background: var(--surface);
  border-color: var(--border);
}
html.public-rundown .sign-form canvas {
  background: white;
}
html.tv-workspace {
  --bg: var(--background);
  --surface2: var(--surface-raised);
  --line: var(--border);
  --fg: var(--text);
  --mut: var(--text-muted);
  --accent: var(--gold);
}
html.tv-workspace body {
  background: var(--background);
}
html.tv-workspace .hero {
  background: var(--brand-backdrop);
  border-color: var(--border-gold);
}
html.tv-workspace .hero h2,
html.tv-workspace .topbar h1 {
  font-family: var(--font-display);
  font-weight: 500;
}
html.tv-workspace .card {
  background: var(--surface);
  border-color: var(--border-gold);
}
html.tv-workspace button.primary {
  color: var(--gold-ink);
  background: var(--gold-fill);
  border-color: var(--gold);
}
/* Screens have their own selectable presentation themes. Keep their colors intact. */
@media (max-width: 850px) {
  .planner-v2-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .planner-v2-header {
    padding: 18px 12px;
    gap: 8px;
  }
  .planner-v2-header h2 {
    font-size: 28px;
  }
  .planner-v2-header button {
    font-size: 11px;
  }
}

/* Reflow dense working controls without hiding actions or table data. */
.planner-v2 .timeline-slot {
  grid-template-columns: 76px minmax(0, 1fr);
}
.planner-v2 .timeline-dropzone,
.planner-v2 .timeline-item-card {
  min-width: 0;
}
@media (max-width: 760px) {
  .app-sidebar .account {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 7px 0 0;
    margin-top: 9px;
  }
  .app-sidebar .account > .account-avatar,
  .app-sidebar .account > strong,
  .app-sidebar .account > small {
    display: none;
  }
  .app-sidebar .account button {
    margin: 0;
    padding: 5px 2px;
    font-size: 11px;
  }
  .planner-v2 .timeline-item-card {
    flex-wrap: wrap;
  }
  .planner-v2 .timeline-card-main {
    flex-basis: calc(100% - 28px);
  }
  .planner-v2 .planner-item-actions {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .planner-v2 .timeline-inline .timeline-inline-name {
    min-width: 0;
    flex-basis: 100%;
  }
  .planner-v2 .timeline-inline .timeline-inline-type {
    max-width: 100%;
  }
}

.planner-calendar .fc-toolbar {
  flex-wrap: wrap;
  gap: 10px;
}

/* Shared metadata chips added by the current timeline implementation. */
.planner-v2 .timeline-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0;
}
.planner-v2 .timeline-card-meta span {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Latest deployed Gantt and timeline controls. */

.planner-v2 .timeline-inline .timeline-inline-time {
  width: 92px;
}
.se-gantt-scale-hours {
  display: grid;
  grid-template-columns: repeat(
    var(--gantt-columns),
    var(--gantt-column-width)
  );
  border-bottom: 1px solid var(--border-strong);
}

/* Preserve current Gantt date labels. */
.se-gantt-period-label {
  position: sticky;
  left: 594px;
  display: inline-block;
  max-width: 100%;
  border: 0 !important;
  padding: 0 !important;
}
.planner-v2 .se-gantt-track .se-gantt-resize {
  opacity: 0;
}
.planner-v2 .se-gantt-track:hover .se-gantt-resize,
.planner-v2 .se-gantt-track .se-gantt-resize:focus-visible {
  opacity: 1;
}
@media (max-width: 420px) {
  .app-sidebar nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-sidebar nav button {
    min-width: 0;
    width: 100%;
  }
}

/* Styles added by the rundown release. */
.rundown-selection .rundown-checkin-description {
  white-space: pre-wrap;
}
.rundown-selection .rundown-item.rundown-focus-match {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.14);
}
.rundown-selection .rundown-item.rundown-focus-muted {
  opacity: 0.38;
}
.rundown-selection .rundown-item {
  transition:
    opacity 0.15s,
    box-shadow 0.15s;
}
.rundown-selection .rundown-public-menu-body label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rundown-selection .rundown-public-menu-body input[type="checkbox"] {
  width: auto;
}
.rundown-selection .rundown-public-focus-menu {
  min-width: min(330px, 80vw);
}
.rundown-selection .rundown-public-focus-options {
  max-height: min(45vh, 380px);
  overflow: auto;
  display: grid;
  gap: 8px;
}
.rundown-selection .rundown-public-focus-options fieldset {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 8px;
  border: 1px solid #d8d2c7;
  border-radius: 8px;
}
.rundown-selection .rundown-public-focus-options legend {
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
}
.rundown-selection .rundown-public-focus-options label {
  font-weight: 400;
}
.rundown-selection.theme-dark .rundown-public-focus-options fieldset {
  border-color: #4b5c8b;
}
.rundown-selection .rundown-public-people-open {
  margin: 8px 0;
  padding: 7px 10px;
  border: 1px solid #d8d2c7;
  border-radius: 9px;
  background: #faf8f3;
  color: #172033;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rundown-selection .rundown-public-people-dialog {
  width: min(560px, 92vw);
  max-height: 80vh;
  border: 1px solid #d8d2c7;
  border-radius: 20px;
  padding: 18px;
  background: #fff;
  color: #172033;
}
.rundown-selection .rundown-public-people-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}
.rundown-selection .rundown-public-people-dialog header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.rundown-selection .rundown-public-people-dialog h2 {
  margin: 0;
  font-size: 19px;
}
.rundown-selection .rundown-public-people-dialog button {
  padding: 7px 10px;
  border: 1px solid #d8d2c7;
  border-radius: 8px;
  background: #faf8f3;
  color: #172033;
}
.rundown-selection .rundown-public-people-list {
  display: grid;
  gap: 9px;
}
.rundown-selection .rundown-public-people-list article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
}
.rundown-selection .rundown-public-people-list img,
.rundown-selection .rundown-public-people-list .rundown-person-initial {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8e5df;
}
.rundown-selection .rundown-public-people-list small {
  display: block;
  color: #64748b;
}
.rundown-selection.theme-dark .rundown-public-people-dialog {
  background: #161c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
.rundown-selection.theme-dark .rundown-public-people-list article {
  border-color: #4b5c8b;
}
.rundown-selection.theme-dark .rundown-public-people-list small {
  color: #bac4da;
}
.rundown-selection .rundown-public-live-status {
  display: grid;
  gap: 5px;
  margin: 8px 0;
}
.rundown-selection .rundown-public-live-status > span {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf2ff;
  color: #314acb;
  font-size: 12px;
  font-weight: 700;
}
.rundown-selection .rundown-public-live-status p {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid #d38d32;
  background: #fff8e9;
  white-space: pre-wrap;
}
.rundown-selection.theme-dark .rundown-public-live-status > span {
  background: #25365d;
  color: #dce6ff;
}
.rundown-selection.theme-dark .rundown-public-live-status p {
  background: #302717;
  color: #f9e8bd;
}

.rundown-selection .rundown-office-content img.rundown-office-image {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
.rundown-selection .rundown-public-item-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rundown-selection .rundown-public-item-heading h2 {
  flex: 1;
}
.rundown-selection .rundown-public-done {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #b8c6ae;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #eef3e9);
  color: #4a5b43;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}
.rundown-selection .rundown-public-done:disabled {
  cursor: default;
  opacity: 0.65;
}
.rundown-selection .rundown-item.rundown-item-done {
  background: linear-gradient(180deg, #e5ffd8, #a3ff39);
  border-color: #46d818;
  color: #0d1f00;
}
.rundown-selection .rundown-item-done .rundown-public-done {
  background: linear-gradient(180deg, #dcffc0, #a7ff3c);
  border-color: #33cf10;
  color: #0d1f00;
}
.rundown-selection .rundown-item-done p,
.rundown-selection .rundown-item-done h2 {
  color: #0d1f00;
}
.rundown-selection.theme-dark .rundown-item.rundown-item-done {
  background: linear-gradient(180deg, #254b2f, #1a3522);
  border-color: #55b963;
  color: #e9ffe8;
}
.rundown-selection.theme-dark .rundown-item-done p,
.rundown-selection.theme-dark .rundown-item-done h2 {
  color: #e9ffe8;
}

/* Kimi summary chips for the public selection. */
.rundown-selection .rundown-item {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 14px 16px;
}
.rundown-selection .rundown-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rundown-selection .rundown-item-meta time,
.rundown-selection .rundown-item-type,
.rundown-selection .rundown-item-zone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.rundown-selection .rundown-item-meta time {
  background: #171717;
  color: #fff;
  font-weight: 800;
  flex-wrap: wrap;
}
.rundown-selection .rundown-item-meta time small {
  margin: 0;
  color: inherit;
}
.rundown-selection .rundown-item-type {
  background: #f2efe7;
  color: #333;
  border: 1px solid #ddd5c6;
}
.rundown-selection .rundown-item-zone {
  background: #eef4ff;
  color: #1f3f8f;
  border: 1px solid #ccdafc;
}
.rundown-selection.theme-dark .rundown-item-meta time {
  background: #eef2fb;
  color: #101827;
}
.rundown-selection.theme-dark .rundown-item-type,
.rundown-selection.theme-dark .rundown-item-zone {
  background: #242e44;
  color: #eef2fb;
  border-color: #4b5c8b;
}
@media print {
  .rundown-selection .rundown-item-meta time,
  .rundown-selection .rundown-item-type,
  .rundown-selection .rundown-item-zone {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #aaa;
  }
}
.rundown-selection .rundown-public-note-open {
  width: 42px;
  height: 42px;
  border: 1px solid #d8d2c7;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #f8f6f1);
  font-size: 18px;
  cursor: pointer;
}
.rundown-selection.theme-dark .rundown-public-note-open {
  background: #242e44;
  color: #eef2fb;
  border-color: #4b5c8b;
}
.rundown-selection .rundown-public-note-dialog {
  width: min(92vw, 560px);
  max-height: 85vh;
  padding: 22px;
  border: 1px solid #d8d2c7;
  border-radius: 20px;
  background: #fff;
  color: #171717;
  box-shadow: 0 20px 60px #0004;
}
.rundown-selection .rundown-public-note-dialog::backdrop {
  background: #0009;
}
.rundown-selection .rundown-public-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rundown-selection .rundown-public-note-header h2 {
  margin: 0;
  font-size: 20px;
}
.rundown-selection .rundown-public-note-dialog label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}
.rundown-selection .rundown-public-note-dialog textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #d8d2c7;
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  line-height: 1.5;
}
.rundown-selection .rundown-public-note-dialog button {
  padding: 8px 12px;
  border: 1px solid #d8d2c7;
  border-radius: 10px;
  background: #fff;
  color: #171717;
  cursor: pointer;
}
.rundown-selection .rundown-public-note-dialog [data-public-note-status] {
  font-size: 13px;
  color: #5a5a57;
}
.rundown-selection.theme-dark .rundown-public-note-dialog,
.rundown-selection.theme-dark .rundown-public-note-dialog button,
.rundown-selection.theme-dark .rundown-public-note-dialog textarea {
  background: #161c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
@media print {
  .rundown-selection .rundown-public-note-open,
  .rundown-selection .rundown-public-note-dialog {
    display: none !important;
  }
}
.rundown-selection .rundown-item .rundown-inline-description,
.rundown-selection .rundown-item .rundown-inline-location-notes,
.rundown-selection .rundown-item [data-public-live-note] {
  border-left: 3px solid #d8d2c7;
  padding: 8px 12px;
  background: #fbfaf7;
  border-radius: 0 12px 12px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #2a2a28;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rundown-selection .rundown-item .rundown-inline-description::before,
.rundown-selection .rundown-item .rundown-inline-location-notes::before,
.rundown-selection .rundown-item [data-public-live-note]::before {
  display: block;
  margin-bottom: 4px;
  color: #5a5a57;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rundown-selection .rundown-item .rundown-inline-description::before {
  content: "Beschrijving";
}
.rundown-selection .rundown-item .rundown-inline-location-notes::before {
  content: "Locatie-notities";
}
.rundown-selection .rundown-item [data-public-live-note] {
  border-left-color: #ff7a7a;
  background: #fff5f5;
}
.rundown-selection .rundown-item [data-public-live-note]::before {
  content: "Opmerking";
  color: #b00020;
}
.rundown-selection.theme-dark .rundown-item .rundown-inline-description,
.rundown-selection.theme-dark .rundown-item .rundown-inline-location-notes {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: rgba(165, 182, 214, 0.35);
  color: #eef2fb;
}
.rundown-selection.theme-dark .rundown-item [data-public-live-note] {
  background: rgba(255, 122, 122, 0.1);
  color: #eef2fb;
}
.rundown-selection.theme-dark .rundown-item .rundown-inline-description::before,
.rundown-selection.theme-dark
  .rundown-item
  .rundown-inline-location-notes::before {
  color: #bac4da;
}
.rundown-selection.theme-dark .rundown-item [data-public-live-note]::before {
  color: #ff9a9a;
}
.rundown-selection .rundown-public-item-heading .rundown-public-people-open {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin: 0;
  padding: 0;
  border: 1px solid #d8d2c7;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #f8f6f1);
  font-size: 18px;
  cursor: pointer;
}
.rundown-selection.theme-dark
  .rundown-public-item-heading
  .rundown-public-people-open {
  background: #242e44;
  color: #eef2fb;
  border-color: #4b5c8b;
}
@media print {
  .rundown-selection .rundown-public-item-heading .rundown-public-people-open {
    display: none !important;
  }
}

.planner-rundown .rundown-checkin-settings {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #deded8;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #faf9f4);
  color: #16181d;
}
.planner-rundown .rundown-checkin-settings h4,
.planner-rundown .rundown-checkin-settings p {
  margin: 0;
}
.planner-rundown .rundown-checkin-settings p {
  font-size: 12px;
  color: #69717b;
}
.planner-rundown .rundown-checkin-settings label {
  display: grid;
  gap: 5px;
}
.planner-rundown .rundown-checkin-settings input,
.planner-rundown .rundown-checkin-settings textarea {
  width: 100%;
  padding: 8px;
  font: inherit;
}
.planner-rundown .rundown-mail-history {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #d8d2c7;
  border-radius: 10px;
}
.planner-rundown .rundown-mail-history p {
  margin: 4px 0;
}
.planner-rundown .rundown-mail-history summary {
  cursor: pointer;
}
.planner-rundown.theme-dark .rundown-mail-history {
  border-color: #4b5c8b;
}

.planner-rundown .rundown-office-content img.rundown-office-image {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.se-gantt-scale-units span {
  font-size: 10px;
  padding-left: 2px;
  padding-right: 2px;
  letter-spacing: -0.15px;
}
.se-gantt-bar-label {
  position: absolute;
  top: 8px;
  white-space: nowrap;
  color: var(--fg);
  font-size: 12px;
  pointer-events: none;
}
.se-gantt-conflict-row .se-gantt-name,
.se-gantt-conflict-row .se-gantt-track {
  background-color: rgba(239, 93, 110, 0.08);
}
.se-gantt-hit-row .se-gantt-name,
.se-gantt-hit-row .se-gantt-track {
  background-color: rgba(245, 185, 66, 0.12);
}
.se-gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef5d6e;
  pointer-events: none;
  z-index: 2;
}

.rundown-selection .rundown-public-attachment-open {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin: 0;
  padding: 0;
  border: 1px solid #d8d2c7;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #f8f6f1);
  font-size: 18px;
  cursor: pointer;
}
.rundown-selection .rundown-public-attachment-open span {
  position: absolute;
  right: -3px;
  top: -3px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 50%;
  background: #1f3f8f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.rundown-selection.theme-dark .rundown-public-attachment-open {
  background: #242e44;
  color: #eef2fb;
  border-color: #4b5c8b;
}
@media print {
  .rundown-selection .rundown-public-attachment-open {
    display: none !important;
  }
}

.rundown-selection .rundown-public-photo-open {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin: 0;
  padding: 0;
  border: 1px solid #d8d2c7;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #f8f6f1);
  font-size: 18px;
  cursor: pointer;
}
.rundown-selection .rundown-public-photo-open span {
  position: absolute;
  right: -3px;
  top: -3px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 50%;
  background: #1f3f8f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.rundown-selection.theme-dark .rundown-public-photo-open {
  background: #242e44;
  color: #eef2fb;
  border-color: #4b5c8b;
}
@media (max-width: 500px) {
  .rundown-selection .rundown-public-item-heading {
    flex-wrap: wrap;
  }
  .rundown-selection .rundown-public-item-heading h2 {
    flex-basis: 100%;
  }
}
@media print {
  .rundown-selection .rundown-public-photo-open {
    display: none !important;
  }
}

.rundown-selection .rundown-checklist-progress {
  align-self: center;
  display: inline-flex;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid #d8d2c7;
  border-radius: 999px;
  background: #f2efe7;
  color: #333;
  font-size: 12px;
  font-weight: 700;
}
.rundown-selection.theme-dark .rundown-checklist-progress {
  background: #242e44;
  color: #eef2fb;
  border-color: #4b5c8b;
}

.rundown-selection .rundown-public-photo-dialog {
  width: min(92vw, 720px);
  max-height: 85vh;
  padding: 22px;
  border: 1px solid #d8d2c7;
  border-radius: 20px;
  background: #fff;
  color: #171717;
  box-shadow: 0 20px 60px #0004;
}
.rundown-selection .rundown-public-photo-dialog::backdrop {
  background: #0009;
}
.rundown-selection .rundown-public-photo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rundown-selection .rundown-public-photo-header h2 {
  margin: 0;
  font-size: 20px;
}
.rundown-selection .rundown-public-photo-header button {
  padding: 8px 12px;
  border: 1px solid #d8d2c7;
  border-radius: 10px;
  background: #fff;
  color: #171717;
  cursor: pointer;
}
.rundown-selection.theme-dark .rundown-public-photo-dialog,
.rundown-selection.theme-dark .rundown-public-photo-header button {
  background: #161c2d;
  color: #eef2fb;
  border-color: #4b5c8b;
}
@media print {
  .rundown-selection .rundown-public-photo-dialog {
    display: none !important;
  }
}
/* Retained current Gantt name layout. */
/* Preserve the Gantt reference typography and left-aligned item names. */
.planner-v2 .se-gantt {
  font-family:
    Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.planner-v2 .se-gantt-header h2 {
  font-family: inherit;
}
.planner-v2 .se-gantt .se-gantt-item-name {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

.rundown-selection .rundown-item-arrival {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #d8d2c7;
  border-radius: 999px;
  background: #f2efe7;
  color: #333;
  font-size: 12px;
  font-weight: 700;
}
.rundown-selection.theme-dark .rundown-item-arrival {
  background: #242e44;
  color: #eef2fb;
  border-color: #4b5c8b;
}

.rundown-selection .rundown-person-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.rundown-selection .rundown-person-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid #ced8ce;
  border-radius: 999px;
  background: #edf7ef;
  color: #1f5f33;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.rundown-selection .rundown-person-contact a:hover {
  text-decoration: underline;
}
.rundown-selection.theme-dark .rundown-person-contact a {
  background: #1a3528;
  color: #c7f5d2;
  border-color: #466d52;
}

.rundown-selection .rundown-photo-queue {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}
.rundown-selection .rundown-photo-queue li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #d8d2c7;
  border-radius: 10px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.rundown-selection .rundown-photo-queue button {
  flex: 0 0 auto;
}
.rundown-selection.theme-dark .rundown-photo-queue li {
  border-color: #4b5c8b;
}

.rundown-selection .rundown-item.rundown-highlight-active {
  position: relative;
  border-left-color: var(--se-highlight-strong);
  background: var(--se-highlight-soft);
}
.rundown-selection .rundown-item.rundown-highlight-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 5px;
  background: var(--se-highlight-stripe);
}
.rundown-selection.theme-dark .rundown-item.rundown-highlight-active {
  background: #20283b;
  border-left-color: var(--se-highlight-strong);
}
@media print {
  .rundown-selection .rundown-item.rundown-highlight-active {
    background: var(--se-highlight-soft) !important;
  }
}

.rundown-selection .rundown-public-team article > a,
.rundown-selection .rundown-public-people-dialog article > a {
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}
.rundown-selection .rundown-public-team article > a:focus-visible,
.rundown-selection .rundown-public-people-dialog article > a:focus-visible {
  outline: 3px solid #4f7cff;
  outline-offset: 3px;
}
.se-gantt-tools {
  position: relative;
}
.se-gantt-tools summary {
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  padding: 7px 12px;
  background: var(--gantt-control);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  font-weight: 600;
}
.se-gantt-tools summary::-webkit-details-marker {
  display: none;
}
.se-gantt-tools-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 25px #0007;
}
.planner-v2 .se-gantt .se-gantt-tools-panel button {
  text-align: left;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  padding: 8px;
}
.se-gantt-tooltip {
  position: fixed;
  z-index: 58;
  max-width: 320px;
  max-height: 230px;
  overflow: auto;
  pointer-events: none;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg);
  font-size: 12px;
  box-shadow: 0 8px 25px #0007;
}
.se-gantt-tooltip strong {
  display: block;
  margin-bottom: 5px;
}
.se-gantt-tooltip > div {
  margin-top: 3px;
}
.se-gantt-tooltip-warning {
  color: #e98b8b;
}
.planner-v2 .se-gantt-suggestions button.is-active {
  background: rgba(59, 108, 255, 0.2);
}
.planner-calendar .fc-event {
  border-radius: 4px;
  border: 0;
  border-left: 3px solid #6b7280;
  font-size: 11px;
  background: #374151;
}
.planner-calendar .calendar-type-arrival {
  background: #1e3a8a;
  border-left-color: #3b82f6;
}
.planner-calendar .calendar-type-soundcheck {
  background: #5b21b6;
  border-left-color: #8b5cf6;
}
.planner-calendar .calendar-type-performance {
  background: #be123c;
  border-left-color: #f43f5e;
}
.planner-calendar .calendar-type-setup {
  background: #0d9488;
  border-left-color: #14b8a6;
}
.planner-calendar .calendar-type-breakdown {
  background: #b45309;
  border-left-color: #f59e0b;
}
.planner-calendar .calendar-type-catering {
  background: #059669;
  border-left-color: #10b981;
}
.planner-calendar .calendar-type-technical {
  background: #7c3aed;
  border-left-color: #a78bfa;
}
.planner-calendar .calendar-type-logistics {
  background: #ea580c;
  border-left-color: #fb923c;
}
.planner-calendar .calendar-type-meeting {
  background: #475569;
  border-left-color: #94a3b8;
}
.planner-calendar .calendar-type-deadline {
  background: #dc2626;
  border-left-color: #ef4444;
}
.planner-calendar .calendar-type-appointment {
  background: #0284c7;
  border-left-color: #0ea5e9;
}
.planner-calendar .calendar-type-queue {
  background: #4338ca;
  border-left-color: #6366f1;
}
.planner-calendar .calendar-status-completed {
  filter: grayscale(1);
  opacity: 0.68;
}
.planner-calendar .calendar-status-cancelled {
  filter: grayscale(1);
  opacity: 0.34;
}
.planner-v2 .planner-calendar-menu {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 5px;
  background: var(--surface, #151a2c);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 25px #0007;
}
.planner-v2 .planner-calendar-menu button {
  text-align: left;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  padding: 8px;
}

.rundown-selection .rundown-public-extra {
  margin-top: 10px;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
}
.rundown-selection .rundown-public-extra > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
}
.rundown-selection .rundown-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}
.rundown-selection .rundown-extra-grid > div {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #d8d2c7;
  border-radius: 10px;
  background: #fbfaf7;
}
.rundown-selection .rundown-extra-grid strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5a5a57;
}
.rundown-selection .rundown-extra-grid span {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.rundown-selection.theme-dark .rundown-public-extra,
.rundown-selection.theme-dark .rundown-extra-grid > div {
  border-color: #4b5c8b;
}
.rundown-selection.theme-dark .rundown-extra-grid > div {
  background: #1a2032;
}
.rundown-selection.theme-dark .rundown-extra-grid strong {
  color: #bac4da;
}
/* Let the browser defer painting long public event days while retaining search and focus. */
@supports (content-visibility: auto) {
  @media screen {
    .rundown-selection .rundown-item {
      content-visibility: auto;
      contain-intrinsic-size: auto 180px;
    }
  }
}
.se-gantt-error {
  margin: 0 0 8px;
  padding: 8px 12px;
  background: #4a1e2a;
  color: #fff;
  border: 1px solid #bd5b6c;
  border-radius: 6px;
}
/* Shared module: directory-group-dialog.css */
.directory-check-group-title {
  margin: 10px 0 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Shared module: directory-toasts.css */
.directory-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20020;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  max-width: min(360px, calc(100vw - 40px));
  pointer-events: none;
}
.directory-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface-raised);
  font:
    13px/1.4 Inter,
    system-ui,
    sans-serif;
  box-shadow: 0 4px 18px #0005;
  pointer-events: auto;
}
.directory-toast-success {
  border-color: var(--success);
  color: var(--success);
}
.directory-toast-error {
  border-color: var(--danger);
  color: var(--danger);
}
.directory-toast span:nth-child(2) {
  flex: 1;
}
.directory-toast button {
  background: none;
  border: 0;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  padding: 0 0 0 4px;
  opacity: 0.7;
  line-height: 1;
}
/* Shared module: planner-calendar.css */
/* Calendar controls share the current workspace palette. */
.planner-v2.planner-calendar-active {
  --card: #fffdf9;
  --surface: #f8f4ed;
  --surface-raised: #f4eee5;
  --surface-hover: #ede2d1;
  --border: #ded4c5;
  --border-strong: #b6a386;
  --text: #242321;
  --selected: #d7b16c;
  background: #f2efeb;
  color: #242321;
}
.planner-v2.planner-calendar-active .planner-v2-main {
  background: #fffdf9;
  color: #242321;
  border-color: #ded4c5;
}
.planner-v2.planner-calendar-active .planner-calendar.fc {
  --fc-page-bg-color: #fffdf9;
  --fc-neutral-bg-color: #f8f4ed;
  --fc-border-color: #ded4c5;
  --fc-today-bg-color: rgba(178, 137, 66, 0.1);
  --fc-event-bg-color: #87612f;
  --fc-event-border-color: #bd914b;
  --fc-list-event-hover-bg-color: #f4eee5;
  color: #242321;
  background: #fffdf9;
  border-radius: 12px;
}
.planner-v2.planner-calendar-active .planner-calendar .fc-col-header-cell,
.planner-v2.planner-calendar-active .planner-calendar .fc-multimonth-month,
.planner-v2.planner-calendar-active .planner-calendar .fc-multimonth-header {
  background: #f8f4ed;
}
.planner-v2.planner-calendar-active .planner-calendar .fc-toolbar-title,
.planner-v2.planner-calendar-active .planner-calendar a {
  color: #242321;
}
.planner-v2.planner-calendar-active .planner-calendar .fc-toolbar {
  flex-wrap: wrap;
  gap: 10px;
}
.planner-v2.planner-calendar-active .planner-calendar .fc-button {
  background: #f4eee5 !important;
  border-color: #b6a386 !important;
  color: #242321 !important;
  font-size: 12px !important;
}
.planner-v2.planner-calendar-active .planner-calendar .fc-button:hover {
  background: #ede2d1 !important;
}
.planner-v2.planner-calendar-active .planner-calendar .fc-button-active {
  background: #d7b16c !important;
  border-color: #ab813f !important;
}
.planner-v2.planner-calendar-active .planner-calendar .fc-event {
  cursor: pointer;
}

/* Retained active preview features: public/smartereventing.css */
@supports (content-visibility: auto) {
  @media screen {
    .rundown-selection .rundown-item:has(dialog[open]) {
      content-visibility: visible;
    }
  }
}

/* Retained active preview features: src/planner-calendar.css */
.planner-v2 .planner-calendar .fc-event {
  border-radius: 4px;
  border: 0;
  border-left: 3px solid #6b7280;
  font-size: 11px;
  background: #374151;
}
.planner-v2 .planner-calendar .calendar-type-arrival {
  background: #1e3a8a;
  border-left-color: #3b82f6;
}
.planner-v2 .planner-calendar .calendar-type-soundcheck {
  background: #5b21b6;
  border-left-color: #8b5cf6;
}
.planner-v2 .planner-calendar .calendar-type-performance {
  background: #be123c;
  border-left-color: #f43f5e;
}
.planner-v2 .planner-calendar .calendar-type-setup {
  background: #0d9488;
  border-left-color: #14b8a6;
}
.planner-v2 .planner-calendar .calendar-type-breakdown {
  background: #b45309;
  border-left-color: #f59e0b;
}
.planner-v2 .planner-calendar .calendar-type-catering {
  background: #059669;
  border-left-color: #10b981;
}
.planner-v2 .planner-calendar .calendar-type-technical {
  background: #7c3aed;
  border-left-color: #a78bfa;
}
.planner-v2 .planner-calendar .calendar-type-logistics {
  background: #ea580c;
  border-left-color: #fb923c;
}
.planner-v2 .planner-calendar .calendar-type-meeting {
  background: #475569;
  border-left-color: #94a3b8;
}
.planner-v2 .planner-calendar .calendar-type-deadline {
  background: #dc2626;
  border-left-color: #ef4444;
}
.planner-v2 .planner-calendar .calendar-type-appointment {
  background: #0284c7;
  border-left-color: #0ea5e9;
}
.planner-v2 .planner-calendar .calendar-type-queue {
  background: #4338ca;
  border-left-color: #6366f1;
}
.planner-v2 .planner-calendar .calendar-status-completed {
  filter: grayscale(1);
  opacity: 0.68;
}
.planner-v2 .planner-calendar .calendar-status-cancelled {
  filter: grayscale(1);
  opacity: 0.34;
}
.planner-v2 .planner-calendar-menu {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 5px;
  background: #151a2c;
  border: 1px solid #26365f;
  border-radius: 8px;
  box-shadow: 0 8px 25px #0007;
}
.planner-v2 .planner-calendar-menu button {
  text-align: left;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  padding: 8px;
}

/* Event-scoped Lex widget */
.lex-widget {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 110;
}
.lex-launch,
.lex-panel form button {
  background: #b99a54;
  color: #142b24;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px #0003;
}
.lex-panel {
  width: min(390px, calc(100vw - 2rem));
  height: min(580px, calc(100vh - 4rem));
  display: flex;
  flex-direction: column;
  background: #f8f6ef;
  color: #1c352b;
  border: 1px solid #c9c3af;
  border-radius: 16px;
  box-shadow: 0 14px 45px #0004;
  overflow: hidden;
}
.lex-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #203f32;
  color: #fff;
  padding: 1rem;
}
.lex-panel header strong,
.lex-panel header small {
  display: block;
}
.lex-panel header button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}
.lex-toolbar {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #dfdbcd;
}
.lex-toolbar label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lex-toolbar select {
  min-width: 0;
  flex: 1;
}
.lex-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}
.lex-message {
  border-radius: 10px;
  margin-bottom: 0.7rem;
  padding: 0.6rem 0.75rem;
  background: #e8eee7;
}
.lex-user {
  background: #ede4cf;
  margin-left: 1.5rem;
}
.lex-message p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0.25rem 0 0;
}
.lex-note,
.lex-notice,
.lex-error {
  font-size: 0.75rem;
  margin: 0.3rem 1rem;
}
.lex-notice {
  color: #855400;
}
.lex-error {
  color: #a42d2d;
}
.lex-panel form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
  align-items: end;
}
.lex-input {
  flex: 1;
}
.lex-input textarea {
  width: 100%;
  resize: vertical;
}
.lex-panel form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 500px) {
  .lex-widget {
    right: 0.5rem;
    bottom: 0.5rem;
  }
  .lex-panel {
    height: min(580px, calc(100dvh - 1rem));
  }
}
.lex-action {
  margin-top: 0.65rem;
  padding: 0.65rem;
  border: 1px solid #bca663;
  border-radius: 8px;
  background: #fffdf6;
}
.lex-action button {
  margin-top: 0.5rem;
  border: 1px solid #9e8c58;
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  background: #ede4cf;
  color: #1c352b;
  cursor: pointer;
}

/* Retained latest preview: public/smartereventing.css */

.rundown-selection .rundown-checklist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rundown-selection .rundown-checklist-head h3 {
  margin: 0;
}
.rundown-selection .rundown-checklist-head span {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rundown-selection .rundown-checklist-track {
  height: 7px;
  margin: 8px 0 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #e9e5dd;
}
.rundown-selection .rundown-checklist-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #39b84a;
  transition: width 0.15s;
}
.rundown-selection .rundown-public-point form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.rundown-selection .rundown-public-point label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.rundown-selection .rundown-public-point input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #39b84a;
}
.rundown-selection
  .rundown-public-point[data-public-point-done="1"]
  [data-public-point-label] {
  text-decoration: line-through;
  opacity: 0.7;
}
.rundown-selection.theme-dark .rundown-checklist-track {
  background: #37445e;
}

.rundown-selection progress.rundown-checklist-track {
  display: block;
  width: 100%;
  height: 7px;
  border: 0;
  appearance: none;
  background: #e9e5dd;
}
.rundown-selection progress.rundown-checklist-track::-webkit-progress-bar {
  background: #e9e5dd;
  border-radius: 999px;
}
.rundown-selection progress.rundown-checklist-track::-webkit-progress-value {
  background: #39b84a;
  border-radius: 999px;
}
.rundown-selection progress.rundown-checklist-track::-moz-progress-bar {
  background: #39b84a;
  border-radius: 999px;
}
.rundown-selection.theme-dark
  progress.rundown-checklist-track::-webkit-progress-bar {
  background: #37445e;
}

/* Retained latest preview: src/planner-calendar.css */

.planner-v2 .planner-calendar .calendar-resource-muted {
  opacity: 0.28;
  filter: grayscale(0.8);
}

/* Retained calendar color controls from current preview. */
.planner-v2 .planner-calendar .calendar-resource-muted {
  background: #9f2424 !important;
  border-color: #fca5a5 !important;
  color: #fff1f2 !important;
  opacity: 0.92;
  filter: none;
}
/* Retained active preview styles: src/planner-calendar.css */
.planner-v2 .planner-calendar .calendar-resource-muted{background:#9f2424!important;border-color:#fca5a5!important;color:#fff1f2!important;opacity:.92}

.planner-v2 .planner-calendar .calendar-ghost{opacity:.3;pointer-events:none}
.planner-v2 .planner-calendar .calendar-ghost .fc-event-title{font-style:italic}

/* Shared active module: planner-resources.css */
.planner-v2 .planner-resource-subgroup {min-width:0}
.planner-v2 .planner-resource-subgroup-title {width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;text-align:left;font-size:11px;font-weight:700}
.planner-v2 .planner-resource-subgroup-title span:first-child {overflow:hidden;text-overflow:ellipsis}
.planner-v2 .planner-resource-subgroup-rows {display:grid;gap:3px;padding:4px 0 3px 8px;border-left:1px solid var(--border-strong)}


/* Retained active preview styles: src/planner-resources.css */

.planner-v2 .planner-resource-count {align-self:center;min-width:1.4em;text-align:right;color:var(--mut);font-size:10px;font-weight:700}
.planner-v2 .planner-resource-subgroup-title {text-transform:uppercase;letter-spacing:.08em;color:#d6e3ff;border-radius:8px}
@media (hover:hover) {
  .planner-v2 .planner-resource-row .planner-resource-mute {opacity:0;pointer-events:none}
  .planner-v2 .planner-resource-row:hover .planner-resource-mute,
  .planner-v2 .planner-resource-row:focus-within .planner-resource-mute,
  .planner-v2 .planner-resource-row .planner-resource-mute[aria-pressed="true"] {opacity:1;pointer-events:auto}
}
/* Editorial event workspace: charcoal navigation, warm ivory and champagne. */
h1,
h2,
h3 {
  font-family: var(--font-body);
  letter-spacing: -0.025em;
}
h1 {
  font-weight: 650;
}
h2 {
  font-size: 21px;
  font-weight: 650;
}
.brand {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.045em;
}
.layout {
  grid-template-columns: 250px minmax(0, 1fr);
  background: var(--background);
}
.content {
  max-width: none;
  padding: 0 32px 38px;
}
.app-sidebar {
  --text: #f7f3ed;
  --text-muted: #d1ccc3;
  --text-subtle: #a7a096;
  --gold: #e6bd73;
  --gold-bright: #f0cf92;
  --surface-hover: #333132;
  --border: #454142;
  background: linear-gradient(145deg, #242324, #19191b 80%);
  border-right: 1px solid #373435;
  padding: 32px 18px 22px;
}
.app-sidebar .brand {
  margin: 0 7px;
  gap: 10px;
}
.app-sidebar .brand .ui-icon {
  width: 30px;
  height: 30px;
}
.side-label {
  margin-top: 42px;
  margin-bottom: 14px;
  font-size: 10px;
}
.app-sidebar nav {
  gap: 7px;
}
.app-sidebar nav button {
  min-height: 45px;
  font-size: 13px;
  border-radius: 10px;
  padding: 11px 15px;
}
.app-sidebar nav button .ui-icon {
  color: #e7e2d9;
}
.app-sidebar nav button.selected {
  background: var(--gold-fill);
  border-color: #e2bc77;
  color: #241d12;
  box-shadow: inset 0 1px 0 #fff4d86b;
}
.app-sidebar nav button.selected .ui-icon {
  color: #5c421e;
}
.sidebar-note {
  font: 500 14px/1.65 var(--font-body);
  color: #cbb58d;
  margin-bottom: 24px;
}
.account {
  border-color: #494344;
}
.account-avatar {
  background: linear-gradient(140deg, #e5c58d, #ac8249);
  border-color: #d2ad70;
  color: #302316;
}
.account .quiet {
  color: #d4c2a2;
}
.page-masthead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 272px;
  margin: 0 -32px 0;
  padding: 0 38px;
  background: #242223;
  color: #fffaf2;
  --text: #fffaf2;
  --text-muted: #eee8df;
  --text-subtle: #d3c9ba;
  --gold: #ebc47a;
  --gold-bright: #f1d59d;
}
.masthead-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}
.page-masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #1b1a1be8 0%, #1b1a1bab 34%, #1b1a1b12 73%),
    linear-gradient(0deg, #1b1a1b42, transparent 70%);
}
.app-topbar {
  min-height: 75px;
  margin: 0;
  border: 0;
}
.breadcrumb {
  padding: 9px 14px;
  border: 1px solid #ffffff24;
  border-radius: 30px;
  background: #ffffff0a;
  font-size: 11px;
  color: #ded5c7;
}
.breadcrumb > span {
  color: #b2a390;
}
.breadcrumb strong {
  color: #fffaf2;
}
.profile-button {
  color: #fffaf2;
}
.profile-button small,
.workspace-indicator {
  color: #e2d9ca;
}
.workspace-indicator::before {
  background: #dfbe82;
}
.masthead-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 38px;
}
.masthead-caption h1 {
  margin: 7px 0 10px;
  font-size: clamp(30px, 3.3vw, 43px);
  line-height: 1.12;
  font-weight: 650;
  color: #fffaf2;
}
.masthead-caption p {
  max-width: 650px;
  margin: 0;
  font-size: 13px;
  color: #eee8df;
}
.page-masthead .overline {
  color: #edc479;
  font-size: 11px;
  letter-spacing: 0.2em;
}
.masthead-actions {
  flex: none;
}
.masthead-actions button {
  background: #24212299;
  border: 1px solid #ddc8a366;
  color: #fffaf2;
  border-radius: 9px;
}
.section-nav {
  min-height: 62px;
  gap: 9px;
  margin-bottom: 22px;
  padding: 10px 0;
  border-color: #ded7cd;
}
.section-nav > button,
.section-nav > .current {
  min-height: 40px;
  padding: 9px 18px;
  font-size: 12px;
  color: #292622;
  border-radius: 10px;
}
.section-nav > .current {
  background: var(--gold-fill);
  border-color: #cfaa6b;
  color: #251c10;
}
.section-nav .ui-icon {
  color: #9c763e;
}
.section-nav > .current .ui-icon {
  color: #685027;
}
.company-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 1fr);
  gap: 20px;
  margin: 0 0 20px;
}
.company-profile {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px;
  border: 1px solid #3b3530;
  border-radius: 16px;
  background: linear-gradient(125deg, #474039, #252323 72%);
  color: #fffaf3;
  min-width: 0;
}
.profile-symbol {
  display: grid;
  place-items: center;
  width: 94px;
  height: 102px;
  flex: none;
  border: 1px solid #92816a;
  border-radius: 14px;
  background: linear-gradient(135deg, #50483b, #242323);
}
.profile-symbol .ui-icon {
  width: 49px;
  height: 49px;
  color: #e1b86e;
  stroke-width: 1.2;
}
.profile-copy {
  flex: 1;
  min-width: 0;
}
.profile-copy h2 {
  margin: 5px 0 8px;
  color: #fffaf3;
  font-size: 25px;
  overflow-wrap: anywhere;
}
.profile-copy .overline {
  color: #d9b476;
  font-size: 9px;
}
.profile-copy p {
  margin: 0 0 10px;
  color: #e3dace;
  font-size: 11px;
}
.profile-copy > span:last-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e3dace;
  font-size: 11px;
}
.profile-copy > span:last-child .ui-icon {
  width: 16px;
  height: 16px;
}
.profile-action {
  align-self: flex-start;
  padding: 7px 10px;
  border: 1px solid #b2a28a;
  background: transparent;
  color: #fffaf2;
  font-size: 10px;
  border-radius: 9px;
  white-space: nowrap;
}
.profile-action .ui-icon {
  width: 13px;
  height: 13px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 16px;
}
.company-intro-grid .workspace-guide {
  margin: 0;
  display: flex;
  padding: 24px;
  background: linear-gradient(145deg, #fffdfa, #f4f0e9);
  border-color: var(--border);
  gap: 0;
}
.workspace-guide .panel-title {
  gap: 12px;
  margin: 0 0 12px;
}
.workspace-guide .panel-title h2 {
  font-size: 20px;
}
.workspace-guide .panel-title p {
  max-width: 300px;
  font-size: 11px;
}
.workspace-guide > button {
  margin-top: auto;
  justify-content: space-between;
  padding: 10px 15px;
  color: #302519;
  font-size: 12px;
}
.workspace-guide > small {
  font-size: 10px;
  margin-top: 10px;
}
.overview-stats {
  border: 0;
  background: none;
  padding: 0;
  gap: 18px;
  margin-bottom: 20px;
}
.overview-stats > div,
.overview-stats > div:last-child {
  padding: 19px 22px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow);
  gap: 19px;
}
.overview-stats .ui-icon {
  color: #a0793b;
  width: 30px;
  height: 30px;
}
.overview-stats strong {
  font: 650 28px/1.15 var(--font-body);
  color: #1d1c1a;
}
.overview-stats span {
  color: #514c46;
  font-size: 11px;
}
.company-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.company-grid > .panel {
  padding: 22px;
}
.panel-title h2 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 650;
}
.panel-title p {
  font-size: 11px;
}
.panel-title > .ui-icon {
  color: #a17a3b;
}
.count-badge {
  background: #f0e9de;
  color: #6e542e;
  border-color: #e1d5c2;
}
.company-monogram {
  background: #f0e8da;
  border-color: #d5c2a1;
  color: #795b29;
  font-family: var(--font-body);
}
.company-cell strong {
  font-size: 12px;
}
.search-field input {
  border-color: #cfc5b6;
  background: #fffdfa;
}
.status-badge {
  border: 1px solid transparent;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 8px;
}
.status-badge::before {
  display: none;
}
.recent-event {
  gap: 14px;
  padding: 10px 0;
}
.event-thumbnail {
  width: 88px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  object-position: right center;
  flex: none;
}
.recent-event .event-date {
  display: none;
}
.event-title strong {
  font-size: 12px;
  font-weight: 600;
}
.event-title small {
  color: #6a635a;
  margin-top: 4px;
}
.event-title {
  flex: 1;
}
.upcoming-event {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 15px 0;
  text-align: left;
  color: var(--text);
}
.upcoming-event:last-child {
  border: 0;
}
.upcoming-event > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.upcoming-event strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.upcoming-event small {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
}
.upcoming-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 34px;
  flex: none;
  border: 1px solid #e0d4bf;
  border-radius: 8px;
  background: #f6efdf;
  color: #96703a;
}
.upcoming-icon .ui-icon {
  width: 18px;
  height: 18px;
}
.upcoming-event > .ui-icon {
  width: 15px;
  height: 15px;
  color: #98703a;
}
.page-heading {
  padding: 23px 0 3px;
}
.page-heading h2 {
  margin: 0 0 6px;
  font-size: 24px;
}
.page-heading p {
  font-size: 13px;
}
.center {
  background: var(--brand-backdrop);
}
.login {
  background: #fffaf5f5;
  border: 1px solid #ffffff77;
  border-radius: 18px;
  box-shadow: 0 24px 80px #0004;
}
.login .brand {
  color: #242220;
}
.login .brand .ui-icon {
  color: #a37938;
}
.login h1 {
  font-size: 34px;
}
.login input {
  background: #fffdfa;
}
.planning-layout {
  background: var(--background);
}
.planning-layout .planning-content {
  padding: 0 24px 24px;
}
.planner-v2 {
  --fg: var(--text);
  --mut: var(--text-muted);
  --card: var(--surface);
  --surface-2: var(--surface-raised);
  --surface-3: var(--surface-input);
  --panel-gradient: linear-gradient(145deg, #fffdf9, #f5f1ea);
  --border-strong: #c6bbaa;
  background: var(--background);
}
.planner-v2 .page-masthead {
  margin: 0 -24px 22px;
  padding: 28px 34px;
  min-height: 190px;
  border: 0;
  border-radius: 0;
  display: block;
}
.planner-v2 .masthead-caption {
  padding: 18px 0;
}
.planner-v2 .masthead-caption h1 {
  font-size: 33px;
  max-width: 760px;
}
.planner-v2 .masthead-actions button {
  margin: 0;
  color: #fffaf2;
  background: #24212299;
  border: 1px solid #ddc8a366;
}
.planner-v2-layout {
  gap: 18px;
  grid-template-columns: minmax(250px, 275px) minmax(0, 1fr);
}
.planner-v2-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}
.planner-v2-sidebar {
  --text: #f4f0e9;
  --text-muted: #c9c3b9;
  --text-subtle: #aaa094;
  --fg: #f4f0e9;
  --mut: #c9c3b9;
  --surface: #262425;
  --surface-raised: #302c2c;
  --surface-input: #211f20;
  --surface-3: #211f20;
  --surface-2: #302c2c;
  --border: #514a46;
  --border-strong: #645950;
  --gold: #e4bc76;
  --gold-bright: #f4d79e;
  --selected: #4b3e29;
  --panel-gradient: linear-gradient(145deg, #302c2b, #252324);
  background: #282526;
  border: 1px solid #443d39;
  border-radius: 14px;
}
.planner-v2-sidebar .planner-v2-section {
  background: #282526;
  border-color: #514941;
}
.planner-v2-sidebar button {
  background: #302c2b;
  color: #f4f0e9;
  border-color: #685b4d;
}
.planner-v2-sidebar input,
.planner-v2-sidebar select {
  background: #211f20;
  color: #f4f0e9;
  border-color: #786957;
}
.planner-v2-sidebar p,
.planner-v2-sidebar label {
  color: #c9c3b9;
}
.planner-v2-sidebar .planner-resource-section {
  background: #211f20;
}
.planner-v2
  button:not(.planner-v2-primary):not(.directory-primary):not(
    [aria-selected="true"]
  ):not([aria-pressed="true"]) {
  background: var(--surface-raised);
  color: var(--fg);
}
.planner-v2 .timeline-item-card {
  background: #fcfaf6;
  border-color: #d8cdbd;
}
.planner-v2 .timeline-item-selected {
  background: #fbf0db;
  border-color: #af8543;
  box-shadow: inset 3px 0 #bd944c;
}
.planner-v2 .timeline-time,
.planner-v2 .timeline-dropzone {
  background: #f9f6f0;
  border-color: #d6cbbd;
}
.planner-v2 .timeline-card-heading time,
.planner-rundown-time {
  color: #8d652e;
}
.planner-v2 .timeline-status {
  background: #eaece5;
  color: #465540;
  border-color: #d4d9cd;
}
.planner-v2 input,
.planner-v2 select,
.planner-v2 textarea {
  color: var(--fg);
  background: var(--surface-input);
  border-color: #bcae99;
}
.planner-v2-sidebar input,
.planner-v2-sidebar select {
  color: #f4f0e9;
  background: #211f20;
  border-color: #786957;
}
.planner-v2 .planner-v2-primary,
.directory-primary {
  color: #271e12 !important;
}
.planner-v2 .directory-card,
.planner-v2 .directory-dialog,
.directory-dialog,
.directory-group-picker-panel {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.planner-v2 .directory-admin .directory-card th,
.planner-v2 .directory-admin .directory-card td {
  color: var(--text);
  border-color: var(--border);
}
.directory-standalone {
  padding: 0 24px 24px;
  background: var(--background);
}
.directory-standalone > .directory-admin {
  padding-top: 22px;
}
.directory-standalone .directory-header {
  margin-bottom: 20px;
}
.planner-v2.planner-calendar-active {
  --card: #fffdf9;
  --surface: #fffdf9;
  --surface-raised: #f6f2ec;
  --surface-hover: #f0e9df;
  --border: #e1dbd3;
  --border-strong: #c6bbaa;
  --text: #242321;
  --selected: #f1e4ce;
  background: var(--background);
  color: #242321;
}
html.tv-workspace {
  color-scheme: light;
  --bg: #f2efeb;
  --surface: #fffdf9;
  --surface2: #f6f2ec;
  --line: #ded6c9;
  --fg: #242321;
  --mut: #625d56;
  --accent: #94682d;
}
html.tv-workspace body {
  background: #f2efeb;
}
html.tv-workspace .card {
  background: #fffdf9;
  border-color: #e1dbd3;
  color: #242321;
}
@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 224px minmax(0, 1fr);
  }
  .app-sidebar {
    padding-inline: 14px;
  }
  .app-sidebar .brand {
    font-size: 19px;
    gap: 7px;
  }
  .content {
    padding-inline: 24px;
  }
  .page-masthead {
    margin-inline: -24px;
    padding-inline: 28px;
  }
  .company-intro-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  }
  .company-profile {
    padding: 20px;
    gap: 16px;
  }
  .profile-symbol {
    width: 72px;
    height: 86px;
  }
  .profile-action {
    display: none;
  }
  .overview-stats > div {
    padding: 17px 15px;
    gap: 12px;
  }
  .overview-stats strong {
    font-size: 25px;
  }
  .section-nav > button,
  .section-nav > .current {
    padding-inline: 13px;
  }
}
@media (max-width: 1000px) {
  .company-intro-grid {
    grid-template-columns: 1fr;
  }
  .company-profile {
    min-height: 150px;
  }
  .profile-action {
    display: inline-flex;
  }
  .company-intro-grid .workspace-guide {
    display: flex;
  }
  .company-grid {
    grid-template-columns: 1fr;
  }
  .overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 850px) {
  .planner-v2-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .layout {
    display: block;
  }
  .app-sidebar {
    position: static;
    height: auto;
    padding: 17px 16px 10px;
  }
  .app-sidebar .brand {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .content {
    padding: 0 16px 26px;
  }
  .page-masthead {
    margin-inline: -16px;
    padding-inline: 20px;
    min-height: 248px;
  }
  .masthead-photo {
    object-position: 64% center;
  }
  .page-masthead::after {
    background: linear-gradient(90deg, #1b1a1be8, #1b1a1b70 90%);
  }
  .app-topbar {
    min-height: 62px;
  }
  .masthead-caption {
    padding: 22px 0 30px;
  }
  .masthead-caption h1 {
    font-size: 31px;
  }
  .masthead-caption p {
    font-size: 12px;
  }
  .section-nav {
    margin-bottom: 16px;
  }
  .company-intro-grid {
    gap: 15px;
    margin-bottom: 16px;
  }
  .company-profile {
    gap: 14px;
    padding: 20px;
    flex-wrap: wrap;
  }
  .profile-symbol {
    width: 68px;
    height: 78px;
  }
  .profile-symbol .ui-icon {
    width: 38px;
    height: 38px;
  }
  .profile-copy h2 {
    font-size: 23px;
  }
  .profile-action {
    display: none;
  }
  .company-intro-grid .workspace-guide {
    padding: 20px;
  }
  .overview-stats {
    gap: 12px;
  }
  .overview-stats > div,
  .overview-stats > div:last-child {
    padding: 17px 14px;
    gap: 13px;
  }
  .overview-stats .ui-icon {
    width: 25px;
    height: 25px;
  }
  .company-grid {
    gap: 16px;
  }
  .company-grid > .panel {
    padding: 19px;
  }
  .panel-title h2 {
    font-size: 19px;
  }
  .event-thumbnail {
    width: 63px;
    height: 48px;
  }
  .recent-event {
    gap: 10px;
  }
  .recent-event .status-badge {
    padding: 4px 6px;
    font-size: 9px;
  }
  .planning-layout .planning-content {
    padding: 0 12px 20px;
  }
  .planner-v2 .page-masthead {
    margin-inline: -12px;
    padding: 16px 20px;
    min-height: 184px;
  }
  .planner-v2 .masthead-caption h1 {
    font-size: 27px;
  }
  .masthead-actions {
    align-self: flex-start;
  }
  .masthead-actions button {
    padding: 7px 9px;
    font-size: 10px;
  }
  .directory-standalone {
    padding: 0 12px 20px;
  }
  .directory-standalone > .directory-admin {
    padding-top: 18px;
  }
}
@media (max-width: 420px) {
  .app-sidebar nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-sidebar nav button {
    min-width: 0;
    width: 100%;
  }
  .breadcrumb {
    font-size: 10px;
    padding: 8px 10px;
  }
  .profile-copy {
    min-width: 150px;
  }
}
.app-sidebar {
  color: var(--text);
}
/* Shared photographic headers for standalone TV and published documents. */
html.tv-workspace .page > .topbar {
  min-height: 195px;
  margin: -24px -24px 24px;
  padding: 30px 34px;
  background:
    linear-gradient(90deg, #201e1fe8, #201e1f66 65%, #201e1f22),
    url("/event-scenes/config.webp") right center/cover no-repeat,
    #242223;
  color: #fffaf2;
  --fg: #fffaf2;
  --mut: #e4dbce;
  --surface2: #302b28;
  --line: #998363;
}
html.tv-workspace .page > .topbar h1 {
  color: #fffaf2;
  font-family: var(--font-body);
  font-size: 27px;
  font-weight: 650;
}
html.tv-workspace .page > .topbar .event-meta {
  color: #e4dbce;
}
html.public-rundown body,
html.public-checklist body {
  background: var(--background);
}
html.public-rundown main > header,
html.public-checklist main > header {
  --text: #fffaf2;
  --text-muted: #e5dcd0;
  --gold: #ebc47a;
  padding: 32px;
  min-height: 200px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(90deg, #201e1fe8, #201e1f77 60%, #201e1f22),
    url("/event-scenes/rundown.webp") right center/cover no-repeat,
    #242223;
  color: #fffaf2;
}
html.public-checklist main > header {
  background-image:
    linear-gradient(90deg, #201e1fe8, #201e1f77 60%, #201e1f22),
    url("/event-scenes/rundown.webp");
}
html.public-rundown main > header h1,
html.public-checklist main > header h1 {
  font-family: var(--font-body);
  font-weight: 650;
  color: #fffaf2;
}
html.public-rundown main > header p,
html.public-checklist main > header p {
  color: #e5dcd0;
}
.planner-v2
  .page-masthead
  button:not(.planner-v2-primary):not(.directory-primary) {
  color: #fffaf2;
  background: #242122aa;
  border-color: #ddc8a366;
}
@media (max-width: 760px) {
  html.tv-workspace .page > .topbar {
    padding: 24px 20px;
    flex-wrap: wrap;
  }
  html.public-rundown main > header,
  html.public-checklist main > header {
    padding: 25px 20px;
  }
}
@media print {
  html.public-rundown main > header,
  html.public-checklist main > header {
    background: #fff !important;
    color: #000 !important;
  }
  html.public-rundown main > header h1,
  html.public-checklist main > header h1,
  html.public-rundown main > header p,
  html.public-checklist main > header p {
    color: #000 !important;
  }
}
.section-heading {
  margin-top: 26px;
  margin-bottom: 8px;
}
.planner-v2 .page-masthead .overline {
  color: #edc479;
}
.planner-v2 .page-masthead p {
  color: #eee8df;
}
.planner-v2-sidebar {
  color: #f4f0e9;
}
.planner-v2
  .page-masthead
  .masthead-actions
  button:not(.planner-v2-primary):not(.directory-primary) {
  color: #fffaf2;
  background: #242122aa;
  border-color: #ddc8a366;
}
.topbar-account {
  padding: 5px 10px;
  border-radius: 30px;
  background: #1b191b66;
}
.page-masthead[data-scene="team"] .masthead-photo,
.page-masthead[data-scene="people"] .masthead-photo,
.page-masthead[data-scene="directory"] .masthead-photo,
.page-masthead[data-scene="gantt"] .masthead-photo,
.page-masthead[data-scene="config"] .masthead-photo,
.page-masthead[data-scene="photos"] .masthead-photo {
  object-position: center top;
}
.planner-v2.planner-gantt-active {
  background: var(--background);
}
.se-gantt-light {
  --gantt-bg: #f2efeb;
  --gantt-top: #f7f3ec;
  --gantt-control: #f4eee4;
  --gantt-input: #fffdf9;
  --card: #fffdf9;
  --card-2: #f4eee4;
  --fg: #242321;
  --text: #242321;
  --mut: #6c645a;
  --text-muted: #6c645a;
  --border-strong: #d7cbb9;
  --surface-raised: #f4eee4;
  --surface-input: #fffdf9;
  --selected: #eeddbf;
}
.se-gantt-dark {
  --gantt-bg: #222123;
  --gantt-top: #2b2727;
  --gantt-control: #37302d;
  --gantt-input: #242123;
  --card: #2b2727;
  --card-2: #342e2b;
  --fg: #f4eee3;
  --text: #f4eee3;
  --mut: #c7bbab;
  --text-muted: #c7bbab;
  --border-strong: #665c4f;
  --surface-raised: #37302d;
  --surface-input: #242123;
  --selected: #554328;
  color-scheme: dark;
}
.se-gantt .se-gantt-header h2 {
  color: var(--fg);
}
.planner-v2 .se-gantt .se-gantt-toolbar button {
  background: var(--gantt-control);
  color: var(--fg);
  border-color: var(--border-strong);
}
.planner-v2 .se-gantt .se-gantt-toolbar button[aria-pressed="true"] {
  background: var(--selected);
  border-color: #b68b47;
  color: var(--fg);
}
.planner-v2 .se-gantt .se-gantt-toolbar .planner-v2-primary {
  background: var(--gold-fill);
  color: #251c10;
  border-color: #b68b47;
}
.planner-v2 .se-gantt-track .se-gantt-bar {
  background: #dab77b;
  border-color: #ad8447;
  color: #302413;
}
.planner-v2 .se-gantt .se-gantt-item-name {
  background: transparent;
  color: var(--fg);
}
.planner-v2 .se-gantt .se-gantt-group button {
  background: transparent;
  color: var(--fg);
}
.planner-v2 .se-gantt .se-gantt-item-menu summary {
  color: var(--fg);
}
.planner-v2 .se-gantt input {
  background: var(--gantt-input);
  color: var(--fg);
  border-color: var(--border-strong);
}
.planner-gantt-active .page-masthead {
  min-height: 156px;
  padding: 16px 34px;
  margin-bottom: 16px;
}
.planner-gantt-active .se-gantt {
  height: calc(100svh - 172px);
  min-height: 400px;
}
.planner-gantt-active:has(.se-gantt-light) .gantt-editor-panel {
  --fg: #242321;
  --mut: #625d56;
  --border-strong: #cbbda7;
  --panel-gradient: linear-gradient(#fffdf9, #f4eee5);
  background: #fffdf9;
  color: #242321;
}
.planner-gantt-active:has(.se-gantt-dark) .gantt-editor-panel {
  --fg: #f4eee3;
  --mut: #c7bbab;
  --border-strong: #665c4f;
  --panel-gradient: linear-gradient(#342e2b, #2b2727);
  background: #2b2727;
  color: #f4eee3;
}
@media (max-width: 760px) {
  .topbar-account {
    padding: 3px;
    background: #1b191b66;
  }
  .planner-gantt-active .page-masthead {
    padding: 12px 18px;
  }
  .planner-gantt-active .se-gantt {
    height: calc(100svh - 172px);
  }
}
.masthead-caption > div:first-child {
  min-width: 0;
  flex: 1;
}
.masthead-caption h1 {
  overflow-wrap: anywhere;
}

/* Lex and calendar menus share the warm workspace surfaces. */
.lex-panel {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.lex-panel header {
  background: #2d2928;
  color: #fffaf2;
}
.lex-panel header button {
  background: transparent !important;
  color: #fffaf2 !important;
}
.lex-panel .lex-message {
  background: #f4eee3;
  color: #242321;
}
.lex-panel .lex-user {
  background: #eee0c7;
}
.lex-launch,
.lex-panel form button {
  background: var(--gold-fill);
  color: #251c10;
}
.planner-v2 .planner-calendar-menu {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.rundown-selection progress.rundown-checklist-track{display:block;width:100%;height:7px;border:0;appearance:none;background:#e9e5dd}.rundown-selection progress.rundown-checklist-track::-webkit-progress-bar{background:#e9e5dd;border-radius:999px}.rundown-selection progress.rundown-checklist-track::-webkit-progress-value{background:#39b84a;border-radius:999px}.rundown-selection progress.rundown-checklist-track::-moz-progress-bar{background:#39b84a;border-radius:999px}.rundown-selection.theme-dark progress.rundown-checklist-track::-webkit-progress-bar{background:#37445e}

.rundown-mail-mode{display:grid;gap:7px;margin:10px 0;padding:10px;border:1px solid var(--border-strong,#d8d2c7);border-radius:10px}.rundown-mail-mode legend{font-weight:700}.rundown-mail-mode label{display:flex;align-items:center;gap:7px}
html.public-checklist .public-checklist-toggle{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer}
html.public-checklist .public-checklist-toggle input{width:22px;height:22px;flex:none;accent-color:#3558dc}
html.public-checklist .public-checklist-toggle span{font-weight:700}
html.public-checklist #checklist-status{min-height:1.2em}

/* Event Planning V2 and TV control room: shared SmarterEventing workspace.
   Keep presentation screens scoped separately so selectable TV themes still work. */
.planner-v2 {
  --panel-gradient: linear-gradient(145deg, var(--surface), var(--surface-raised));
}
.planner-v2.planner-calendar-active {
  --fg: var(--text);
  --mut: var(--text-muted);
  --panel-gradient: linear-gradient(145deg, var(--surface), var(--surface-raised));
}
.planner-v2.planner-calendar-active .planner-calendar.fc {
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-raised);
  --fc-border-color: var(--border);
  --fc-today-bg-color: var(--selected);
  --fc-list-event-hover-bg-color: var(--surface-hover);
  background: var(--surface);
  color: var(--text);
}
.planner-v2.planner-calendar-active .planner-calendar .fc-col-header-cell,
.planner-v2.planner-calendar-active .planner-calendar .fc-multimonth-month,
.planner-v2.planner-calendar-active .planner-calendar .fc-multimonth-header {
  background: var(--surface-raised);
}
.planner-v2.planner-calendar-active .planner-calendar .fc-toolbar-title,
.planner-v2.planner-calendar-active .planner-calendar a { color: var(--text); }
.planner-v2.planner-calendar-active .planner-calendar .fc-event,
.planner-v2.planner-calendar-active .planner-calendar .fc-event .fc-event-title,
.planner-v2.planner-calendar-active .planner-calendar .fc-event .fc-event-time { color: #fff; }
.planner-v2.planner-calendar-active .planner-calendar .fc-button {
  background: var(--surface-raised) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  font-size: 13px !important;
}
.planner-v2.planner-calendar-active .planner-calendar .fc-button:hover { background: var(--surface-hover) !important; }
.planner-v2.planner-calendar-active .planner-calendar .fc-button-active {
  background: var(--selected) !important;
  border-color: var(--gold) !important;
}
.planner-v2-main { min-width: 0; }
.planner-v2 .planner-calendar-menu { background: var(--surface); color: var(--text); border-color: var(--border); }

html.tv-workspace,
html.tv-workspace body.theme-light {
  color-scheme: light;
  --bg: var(--background);
  --surface2: var(--surface-raised);
  --line: var(--border);
  --fg: var(--text);
  --mut: var(--text-muted);
  --accent: var(--gold);
  background: var(--background);
  color: var(--text);
}
html.tv-workspace body { background: var(--background); color: var(--text); }
html.tv-workspace .page .card,
html.tv-workspace .tv-wizard-dialog {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html.tv-workspace .page .mode-card,
html.tv-workspace .tv-wizard-dialog .page-config,
html.tv-workspace .tv-wizard-dialog .wizard-page-preview {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border);
}
html.tv-workspace .page .mode-card:hover { border-color: var(--gold); }
html.tv-workspace .page .status { color: #285c39; background: #e7f2e8; border-color: #b8d5bd; }
html.tv-workspace .page .mode-card h4,
html.tv-workspace .tv-wizard-dialog h3,
html.tv-workspace .tv-wizard-dialog strong { color: var(--text); }
html.tv-workspace .page .mode-card p,
html.tv-workspace .tv-wizard-dialog label,
html.tv-workspace .tv-wizard-dialog .mut { color: var(--text-muted); }
html.tv-workspace .page .mode-card p,
html.tv-workspace .tv-wizard-dialog label,
html.tv-workspace .tv-wizard-dialog .small,
html.tv-workspace .tv-wizard-dialog .template-card span { font-size: 13px; line-height: 1.45; }
html.tv-workspace .tv-wizard-dialog input,
html.tv-workspace .tv-wizard-dialog select,
html.tv-workspace .tv-wizard-dialog textarea { background: var(--surface-input); color: var(--text); border-color: var(--border-strong); }
html.tv-workspace .tv-wizard-dialog .step.active { background: var(--selected); color: var(--text); border-color: var(--gold); }
html.tv-workspace .tv-wizard-dialog .template-card:hover,
html.tv-workspace .tv-wizard-dialog .template-card.selected { box-shadow: 0 0 0 2px var(--selected); }
html.tv-workspace .tv-wizard-content .card-head { background: var(--surface); }
html.tv-workspace .tv-wizard-content .wizard-actions { background: var(--surface); }
html.tv-workspace .tv-wizard-dialog { max-height: calc(100dvh - 48px); overflow: auto; }
html.tv-workspace .page button:focus-visible,
html.tv-workspace .tv-wizard-dialog :is(button,input,select,textarea):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html.tv-workspace .preview-screen,
html.tv-workspace .public-page {
  --text: #f8fafc;
  --text-muted: #cbd5e1;
  --fg: #f8fafc;
  --mut: #cbd5e1;
  color: var(--text);
}
@media (max-width: 760px) {
  html.tv-workspace .mode-card { grid-template-columns: minmax(0, 1fr); }
  html.tv-workspace .mode-card .mode-actions { justify-content: flex-start; }
  html.tv-workspace .tv-wizard-content :is(.form-grid,.template-grid,.zone-picker,.widget-picker) { grid-template-columns: minmax(0, 1fr); }
  html.tv-workspace .tv-wizard-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  html.tv-workspace .tv-wizard-modal { padding: 12px !important; }
}