/* Pluven Design System v0.20.26 — pre-staging realtime pressure/Presence transport hardening on the approved Pluven UI foundation. */
:root{
  --pluven-carbon:#0F1115;
  --pluven-carbon-2:#181B20;
  --pluven-crimson:#E21D2A;
  --pluven-crimson-hover:#C91824;
  --pluven-crimson-active:#B11520;
  --pluven-crimson-soft:#FDEBED;
  --pluven-graphite:#3A3F45;
  --pluven-steel:#667085;
  --pluven-silver:#E6E8EB;
  --pluven-fog:#F5F6F7;
  --pluven-white:#FFFFFF;
  --pluven-success:#18864B;
  --pluven-warning:#B76E00;
  --pluven-danger:#B42318;
  --pluven-info:#305D7A;

  --pl-bg:var(--pluven-fog);
  --pl-surface:var(--pluven-white);
  --pl-surface-raised:var(--pluven-white);
  --pl-surface-subtle:#FAFAFB;
  --pl-surface-inverse:var(--pluven-carbon);
  --pl-text:var(--pluven-carbon);
  --pl-text-secondary:#5F6670;
  --pl-text-muted:#858C96;
  --pl-text-inverse:#FFFFFF;
  --pl-border:#D9DDE2;
  --pl-border-strong:#BFC5CC;
  --pl-accent:var(--pluven-crimson);
  --pl-accent-hover:var(--pluven-crimson-hover);
  --pl-focus:rgba(226,29,42,.22);
  --pl-radius-xs:5px;
  --pl-radius-sm:8px;
  --pl-radius-md:11px;
  --pl-radius-lg:15px;
  --pl-radius-xl:20px;
  --pl-shadow-sm:0 1px 2px rgba(15,17,21,.06),0 1px 5px rgba(15,17,21,.04);
  --pl-shadow-md:0 10px 30px rgba(15,17,21,.10);
  --pl-shadow-lg:0 24px 70px rgba(15,17,21,.18);
  --pl-transition-fast:120ms ease;
  --pl-transition:180ms ease;
  --pl-z-menu:1200;
  --pl-z-modal:1300;
  --pl-z-toast:1400;
  --planning-user-color:#2563EB;

  /* Legacy semantic bridge. New UI consumes --pl-*; old hot paths stay stable. */
  --app-bg:var(--pl-bg);
  --panel:var(--pl-surface);
  --text:var(--pl-text);
  --muted:var(--pl-text-secondary);
  --danger:var(--pluven-danger);
  --shadow:var(--pl-shadow-lg);
}

html[data-theme="dark"]{
  --pl-bg:#0B0D10;
  --pl-surface:#12151A;
  --pl-surface-raised:#171A20;
  --pl-surface-subtle:#0F1216;
  --pl-surface-inverse:#FFFFFF;
  --pl-text:#F5F6F7;
  --pl-text-secondary:#B4BAC2;
  --pl-text-muted:#818891;
  --pl-text-inverse:#0F1115;
  --pl-border:#2D3239;
  --pl-border-strong:#424850;
  --pl-focus:rgba(226,29,42,.34);
  --pl-shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --pl-shadow-md:0 12px 32px rgba(0,0,0,.34);
  --pl-shadow-lg:0 28px 80px rgba(0,0,0,.48);
}

html,body{font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif;background:var(--pl-bg);color:var(--pl-text)}
button,input,select,textarea{font-family:inherit}
::selection{background:rgba(226,29,42,.18);color:inherit}

/* Brand lockup */
.pluven-lockup{display:flex;align-items:center;gap:12px;min-width:0}
.pluven-lockup-mark{width:39px;height:39px;aspect-ratio:1/1;object-fit:contain;display:block;flex:0 0 auto}
.pluven-lockup-copy{min-width:0;line-height:1;display:flex;flex-direction:column;justify-content:center}
.pluven-lockup-master{display:block;margin:0 0 4px;font-size:9px;font-weight:800;letter-spacing:.22em;color:var(--pl-text-muted)}
.pluven-lockup-product{display:block;font-size:17px;font-weight:800;letter-spacing:.055em;color:var(--pl-text)}
.pluven-lockup-subtitle{display:block;margin-top:5px;font-size:10px;color:var(--pl-text-secondary)}
.pluven-lockup.inverse .pluven-lockup-master{color:#AEB4BD}
.pluven-lockup.inverse .pluven-lockup-product{color:#fff}
.pluven-lockup.inverse .pluven-lockup-subtitle{color:#AEB4BD}
.pluven-lockup.compact .pluven-lockup-mark{width:31px;height:31px}
.pluven-lockup.compact .pluven-lockup-product{font-size:14px}

/* Primitive: buttons */
:where(.pl-button,.btn,.format-btn,.week-scroll-arrow,.add-week,.mobile-nav-toggle,.mobile-quick-toggle,.mobile-quick-icon,.mobile-day-arrow,.calendar-nav){
  border:1px solid var(--pl-border);border-radius:var(--pl-radius-sm);font-weight:650;transition:background var(--pl-transition-fast),border-color var(--pl-transition-fast),color var(--pl-transition-fast),box-shadow var(--pl-transition-fast),transform var(--pl-transition-fast);
}
:where(.pl-button,.btn)[data-pluven-variant="primary"],:where(.btn,.pl-button).primary{
  background:var(--pl-accent);border-color:var(--pl-accent);color:#fff;box-shadow:0 1px 2px rgba(226,29,42,.18)
}
:where(.pl-button,.btn)[data-pluven-variant="primary"]:hover,:where(.btn,.pl-button).primary:hover{background:var(--pl-accent-hover);border-color:var(--pl-accent-hover);color:#fff}
:where(.pl-button,.btn)[data-pluven-variant="secondary"],:where(.btn,.pl-button).light{
  background:var(--pl-surface);border-color:var(--pl-border);color:var(--pl-text)
}
:where(.pl-button,.btn)[data-pluven-variant="secondary"]:hover,:where(.btn,.pl-button).light:hover{background:var(--pl-surface-subtle);border-color:var(--pl-border-strong);color:var(--pl-text)}
:where(.pl-button,.btn)[data-pluven-variant="danger"],:where(.btn,.pl-button).danger{background:var(--pluven-danger);border-color:var(--pluven-danger);color:#fff}
:where(.pl-button,.btn)[data-pluven-variant="danger"]:hover,:where(.btn,.pl-button).danger:hover{filter:brightness(.93)}
:where(.pl-button,.btn)[data-pluven-variant="icon"]{display:inline-grid;place-items:center}
:where(.pl-button,.btn,.format-btn,.week-scroll-arrow,.add-week,.mobile-nav-toggle,.mobile-quick-toggle,.mobile-quick-icon,.mobile-day-arrow,.calendar-nav):focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--pl-focus);border-color:var(--pl-accent)
}
:where(.pl-button,.btn,.format-btn,.week-scroll-arrow,.add-week,.mobile-nav-toggle,.mobile-quick-toggle,.mobile-quick-icon,.mobile-day-arrow,.calendar-nav):active:not(:disabled){transform:translateY(1px)}
:where(.pl-button,.btn,.format-btn,.week-scroll-arrow,.add-week,.mobile-nav-toggle,.mobile-quick-toggle,.mobile-quick-icon,.mobile-day-arrow,.calendar-nav):disabled{opacity:.42;cursor:not-allowed;transform:none}

/* Primitive: form controls. Planner hot-path editors are intentionally excluded. */
:where(.pl-input,textarea.pl-input),:where(.pl-select){border-color:var(--pl-border);background:var(--pl-surface);color:var(--pl-text);transition:border-color var(--pl-transition-fast),box-shadow var(--pl-transition-fast),background var(--pl-transition-fast)}
:where(.pl-input,textarea.pl-input):focus,:where(.pl-select):focus{outline:none;border-color:var(--pl-accent);box-shadow:0 0 0 3px var(--pl-focus)}
:where(.pl-input,.pl-select):disabled{opacity:.55;cursor:not-allowed}

/* Primitive: cards / overlays / menus */
.pl-card{background:var(--pl-surface);border:1px solid var(--pl-border);border-radius:var(--pl-radius-lg);box-shadow:var(--pl-shadow-sm)}
:where(.pl-modal,.modal,.auth-card,.auth-access-modal,.auth-user-editor){background:var(--pl-surface-raised);color:var(--pl-text);border:1px solid var(--pl-border);box-shadow:var(--pl-shadow-lg)}
:where(.pl-menu,.context-menu,.smart-dropdown,.floating-picker,.auth-account-menu){background:var(--pl-surface-raised);color:var(--pl-text);border-color:var(--pl-border);box-shadow:var(--pl-shadow-md)}
:where(.pl-toast,.toast){background:var(--pluven-carbon);color:#fff;border:1px solid #2A2E34;box-shadow:var(--pl-shadow-md)}
:where(.pl-badge,.summary-pill){border-radius:999px;font-weight:700}

/* Branded application shell. Planning grid intentionally stays on its existing optimized visual contract during v0.18.x. */
.topbar{
  min-height:62px;height:62px;padding:0 14px;background:linear-gradient(180deg,#12151A 0%,#0F1115 100%);border-bottom:1px solid #2A2E34;color:#fff;box-shadow:0 3px 16px rgba(15,17,21,.22);gap:10px
}
.brand{gap:10px;min-width:168px;padding-right:3px}
.brand-badge{width:38px;height:38px;border-radius:0;background:transparent;box-shadow:none;padding:0;overflow:visible;display:grid;place-items:center;flex:0 0 auto}
.brand-badge img{width:38px;height:38px;object-fit:contain;display:block}
.brand-copy{display:flex;min-width:0;flex-direction:column;justify-content:center;line-height:1}
.brand-master{font-size:8px;font-weight:800;letter-spacing:.22em;color:#B6BDC6;margin:0 0 4px 1px;white-space:nowrap}
.brand-title{font-size:14px;font-weight:800;letter-spacing:.075em;white-space:nowrap;color:#fff}
.small-label{color:#D4D9DF}.small-label.dark{color:var(--pl-text-secondary)}
.workspace-control{gap:7px}
.workspace-select{height:36px;background:#1D2025;border-color:#3A4048;color:#fff;border-radius:9px;min-width:165px;padding:0 11px;font-weight:650;box-shadow:none}
.workspace-select span,.workspace-select .chev{color:#fff}
.workspace-select:hover{background:#262A30;border-color:#555C65;color:#fff}
.workspace-select:focus-visible{outline:none;border-color:#6E747C;box-shadow:0 0 0 3px rgba(255,255,255,.10)}
.toolbar{gap:5px}
.toolbar .btn{height:34px;background:#1D2025;border-color:#343940;color:#F5F6F7;border-radius:8px;padding:0 9px;font-size:11px;font-weight:650}
.toolbar .btn:hover{background:#2A2E34;border-color:#50565E;color:#fff}
.toolbar .btn.primary{background:var(--pluven-crimson);border-color:var(--pluven-crimson);color:#fff}
.toolbar .btn.primary:hover{background:var(--pluven-crimson-hover);border-color:var(--pluven-crimson-hover)}
.toolbar .btn.active-toggle{background:#331419;border-color:#7D252E;color:#FFCDD2}
.toolbar-group{position:relative}
.toolbar-group+.toolbar-group{padding-left:7px;margin-left:2px}
.toolbar-group+.toolbar-group::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:#30343A}

.weekbar{height:50px;background:var(--pl-surface);border-bottom:1px solid var(--pl-border);box-shadow:0 1px 0 rgba(15,17,21,.02)}
.year-picker{background:var(--pl-surface-subtle);color:var(--pl-text);border-color:var(--pl-border);font-weight:700}
.year-picker:hover{background:var(--pl-surface);border-color:var(--pl-border-strong)}
.week-scroll-arrow{color:var(--pl-text-secondary);background:transparent;border-color:transparent}
.week-scroll-arrow:hover{background:var(--pl-surface-subtle);color:var(--pl-accent)}
.week-tab{background:var(--pl-surface-subtle);color:var(--pl-text-secondary);border-color:var(--pl-border);font-weight:700}
.week-tab:hover{background:var(--pl-surface)}
.week-tab.active{background:var(--pl-surface);color:var(--pl-text);border-color:var(--pl-border-strong);box-shadow:inset 0 3px 0 var(--pl-accent),var(--pl-shadow-sm)}
.add-week{background:var(--pl-surface);border-color:var(--pl-border);color:var(--pl-text);font-weight:700}
.add-week:hover{background:var(--pluven-crimson-soft);border-color:#F2AAB0;color:#A6121C;box-shadow:none}

.formatbar{height:42px;background:var(--pl-surface-subtle);border-bottom:1px solid var(--pl-border)}
.format-btn,.zoom-readout{background:var(--pl-surface);color:var(--pl-text-secondary);border-color:var(--pl-border);border-radius:7px}
.format-btn:hover,.zoom-readout:hover{background:var(--pl-surface);border-color:var(--pl-border-strong);color:var(--pl-text)}
.format-btn.active,.format-btn.active-toggle{background:var(--pluven-crimson-soft);border-color:#F2AAB0;color:#A6121C}
.font-size-label{color:var(--pl-text-secondary)}
.format-select{background:var(--pl-surface);color:var(--pl-text);border-color:var(--pl-border)}

.statusbar{background:var(--pl-surface-subtle);border-top-color:var(--pl-border);color:var(--pl-text-secondary)}
.kbd{background:var(--pl-surface);border-color:var(--pl-border);color:var(--pl-text)}

/* Standard modal shell */
.modal{border-radius:var(--pl-radius-lg)}
.modal-head{background:var(--pluven-carbon);color:#fff;padding:14px 17px;border-bottom:1px solid #292D33}
.modal-head h3{font-size:16px;font-weight:750;letter-spacing:-.01em}
.modal-sub{color:#B8BEC6}
.modal-head>button{color:#C9CED4;border-radius:7px;width:32px;height:32px;display:grid;place-items:center}
.modal-head>button:hover{background:#262A30;color:#fff}
.modal-body{background:var(--pl-surface-raised)}
.modal-foot{background:var(--pl-surface-subtle);border-top-color:var(--pl-border)}
.settings-nav{background:var(--pl-surface-subtle);border-right-color:var(--pl-border)}
.settings-nav button{color:var(--pl-text-secondary)}
.settings-nav button:hover{background:var(--pl-surface)}
.settings-nav button.active{background:var(--pluven-carbon);color:#fff;box-shadow:inset 3px 0 0 var(--pl-accent)}
.setting-section h4{color:var(--pl-text)}
.field label{color:var(--pl-text-secondary)}
.note{color:var(--pl-text-secondary)}

/* Context/dropdown surfaces */
.context-menu,.smart-dropdown,.floating-picker{border-radius:var(--pl-radius-md)}
.context-menu button,.smart-option{color:var(--pl-text);background:transparent}
.context-menu button:hover,.smart-option:hover,.smart-option.active{background:var(--pl-surface-subtle)}
.context-menu .sep{background:var(--pl-border)}
.context-menu .menu-label{color:var(--pl-text-muted)}

/* Auth shell */
.auth-overlay{background:radial-gradient(circle at 14% 10%,rgba(226,29,42,.10),transparent 34%),linear-gradient(145deg,#F7F7F8 0%,#FFFFFF 47%,#F3F4F5 100%)}
.auth-card{width:min(455px,100%);border-radius:20px;padding:30px;border-color:var(--pl-border);box-shadow:0 26px 90px rgba(15,17,21,.16)}
.auth-brand{margin-bottom:28px}
.auth-brand .pluven-lockup-mark{width:44px;height:auto;aspect-ratio:137/156;background:transparent;border-radius:0;padding:0;box-shadow:none}
.auth-brand .pluven-lockup-copy strong{font-size:18px}
.auth-brand .pluven-lockup-copy small{color:var(--pl-text-muted)}
.auth-card h1{font-size:27px;letter-spacing:-.035em;color:var(--pl-text)}
.auth-copy{color:var(--pl-text-secondary)}
.auth-form label{color:var(--pl-text-secondary)}
.auth-form input{height:48px;border-radius:10px;border-color:var(--pl-border);background:var(--pl-surface);color:var(--pl-text)}
.auth-form input:focus{border-color:var(--pl-accent);box-shadow:0 0 0 3px var(--pl-focus)}
.auth-code-head{color:var(--pl-text-secondary)}.auth-code-head strong{color:var(--pl-text)}
.auth-dev-code{border-color:#F3A5AC;background:var(--pluven-crimson-soft);color:#8F131C}
.auth-dev-code span{background:#F8C9CD;color:#8F131C}
.auth-status{color:var(--pl-text-secondary)}.auth-status.ok{color:var(--pluven-success)}.auth-status.error{color:var(--pluven-danger)}
.auth-foot{border-top-color:var(--pl-border);color:var(--pl-text-muted)}
.auth-account-button{background:#181B20;color:#fff;border-color:#363B42}
.auth-account-button:hover{background:#24282E}
.auth-avatar{background:#35161A;color:#FFCDD2;border:1px solid #6B242C}
.auth-account-menu{border-radius:13px}
.auth-account-menu button{color:var(--pl-text)}
.auth-account-menu button:hover{background:var(--pl-surface-subtle)}
.auth-admin-badge{background:var(--pluven-crimson-soft);color:#A6121C}

/* System / empty fatal state */
.pl-system-state{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 18% 8%,rgba(226,29,42,.09),transparent 32%),var(--pl-bg)}
.pl-system-state-card{width:min(680px,100%);padding:28px;box-shadow:var(--pl-shadow-md)}
.pl-system-state-content{margin-top:28px}
.pl-system-state-content h1{margin:0 0 10px;font-size:27px;letter-spacing:-.035em}
.pl-system-state-content p{margin:0;color:var(--pl-text-secondary);line-height:1.6}
.pl-system-state-content pre{margin:18px 0 0;padding:12px 14px;white-space:pre-wrap;overflow:auto;background:var(--pl-surface-subtle);border:1px solid var(--pl-border);border-radius:var(--pl-radius-sm);color:var(--pl-text-secondary);font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
.pl-system-state-actions{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.pl-system-state-actions .pl-button{min-height:38px;padding:0 14px}

/* Dark theme shell overrides. */
html[data-theme="dark"] .weekbar,html[data-theme="dark"] .formatbar,html[data-theme="dark"] .statusbar{background:var(--pl-surface)}
html[data-theme="dark"] .week-tab{background:#15181D;color:#AEB4BD;border-color:#30353C}
html[data-theme="dark"] .week-tab.active{background:#1A1E23;color:#fff;border-color:#41474F}
html[data-theme="dark"] .year-picker,html[data-theme="dark"] .add-week,html[data-theme="dark"] .format-btn,html[data-theme="dark"] .zoom-readout,html[data-theme="dark"] .format-select{background:#171A20;color:#D8DCE1;border-color:#333840}
html[data-theme="dark"] .add-week:hover,html[data-theme="dark"] .format-btn:hover,html[data-theme="dark"] .zoom-readout:hover{background:#21252B;border-color:#484E56;color:#fff}
html[data-theme="dark"] .modal-head{background:#0D0F12}
html[data-theme="dark"] .auth-overlay{background:radial-gradient(circle at 14% 10%,rgba(226,29,42,.12),transparent 34%),#0B0D10}
html[data-theme="dark"] .auth-card,html[data-theme="dark"] .auth-account-menu,html[data-theme="dark"] .auth-access-modal,html[data-theme="dark"] .auth-user-editor{background:var(--pl-surface-raised);color:var(--pl-text);border-color:var(--pl-border)}
html[data-theme="dark"] .auth-form input,html[data-theme="dark"] .auth-add-user input,html[data-theme="dark"] .auth-user-editor input,html[data-theme="dark"] .auth-user-editor select,html[data-theme="dark"] .auth-plan-access-row select{background:var(--pl-surface);color:var(--pl-text);border-color:var(--pl-border-strong)}
html[data-theme="dark"] .auth-add-user,html[data-theme="dark"] .auth-plan-access-grid,html[data-theme="dark"] .auth-user-editor-section-head{background:var(--pl-surface-subtle);border-color:var(--pl-border)}

@media(max-width:1050px){.brand{min-width:auto}.brand-master{display:none}.brand-title{font-size:12px}.brand-badge,.brand-badge img{width:31px;height:31px}}
@media(max-width:760px){
  .topbar{min-height:58px;height:auto;padding:7px 8px}
  .brand{min-width:0}.brand-title{max-width:none;overflow:visible;text-overflow:clip}.brand-master{display:none}
  .workspace-select{height:36px}
  .auth-card{padding:24px;border-radius:17px}.auth-brand .pluven-lockup-mark{width:40px;height:auto}
  .pl-system-state{padding:18px}.pl-system-state-card{padding:22px}
}

/* Presence and compact mobile shell inherit the same chrome while collaborator colors stay identity-driven. */
.plan-presence{margin-right:8px}
.presence-avatar,.presence-more{background:#181B20;color:#fff;box-shadow:0 0 0 2px #0F1115;border-width:2px}
.presence-avatar:hover,.presence-more:hover{background:#25292F}
.topbar .mobile-nav-toggle,.topbar .mobile-quick-toggle{background:#1D2025;border-color:#343940;color:#fff}
.topbar .mobile-nav-toggle:hover,.topbar .mobile-quick-toggle:hover{background:#2A2E34;border-color:#50565E}


/* v0.18.1 — UI consistency pass ------------------------------------------------ */
/* Light mode stays intentionally light. All normal form controls share one visual
   contract; Planner/Aantallen/Aanvraag hot-path editors remain excluded by PluvenUI. */
html:not([data-theme="dark"]) :is(.pl-input,.pl-select),
html:not([data-theme="dark"]) :is(.modal,.auth-card,.auth-access-modal,.auth-user-editor) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),select,textarea),
html:not([data-theme="dark"]) :is(.settings-content,.settings-table,.history-toolbar,.employee-center-toolbar,.employee-status-toolbar,.archive-body,.floating-picker) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),select,textarea){
  box-sizing:border-box;background:#FFFFFF;color:#0F1115;border:1px solid #C9CFD6;border-radius:8px;box-shadow:none;
}
html:not([data-theme="dark"]) :is(.pl-input,.pl-select):hover,
html:not([data-theme="dark"]) :is(.modal,.auth-card,.auth-access-modal,.auth-user-editor,.settings-content,.settings-table,.history-toolbar,.employee-center-toolbar,.employee-status-toolbar,.archive-body,.floating-picker) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),select,textarea):hover{
  border-color:#AEB5BD;background:#FFFFFF;color:#0F1115;
}
html:not([data-theme="dark"]) :is(.pl-input,.pl-select):focus,
html:not([data-theme="dark"]) :is(.modal,.auth-card,.auth-access-modal,.auth-user-editor,.settings-content,.settings-table,.history-toolbar,.employee-center-toolbar,.employee-status-toolbar,.archive-body,.floating-picker) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),select,textarea):focus{
  outline:none;border-color:var(--pl-accent);box-shadow:0 0 0 3px var(--pl-focus);background:#FFFFFF;color:#0F1115;
}

/* Native selects use one arrow, spacing and surface everywhere. */
select.pl-select,
:is(.modal,.settings-content,.settings-table,.history-toolbar,.employee-center-toolbar,.employee-status-toolbar,.archive-body) select{
  appearance:none;-webkit-appearance:none;min-height:36px;padding:7px 34px 7px 10px;background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233A3F45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] select.pl-select,
html[data-theme="dark"] :is(.modal,.settings-content,.settings-table,.history-toolbar,.employee-center-toolbar,.employee-status-toolbar,.archive-body) select{
  background-color:var(--pl-surface);color:var(--pl-text);border-color:var(--pl-border-strong);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23D8DCE1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select.pl-select:disabled{background-color:var(--pl-surface-subtle);color:var(--pl-text-muted);cursor:not-allowed}

/* Settings fields and tables consume the same control geometry. */
.settings-content .field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),select,textarea){width:100%;min-height:38px;padding:8px 10px}
.settings-table :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),select,textarea){min-height:34px;padding:6px 9px;border-radius:7px}
.settings-table th{background:#F0F2F4;color:#252A30;border-color:#D4D9DE;font-weight:750}
.settings-table td{border-color:#D9DDE2;color:var(--pl-text)}
html[data-theme="dark"] .settings-table th{background:#20242A;color:#F4F5F6;border-color:#3B4149}
html[data-theme="dark"] .settings-table td{border-color:#343A42}
.setting-section h4{color:var(--pl-text);font-weight:750}
.field label{color:var(--pl-text-secondary)}

/* Buttons share focus/disabled geometry while feature-specific classes retain layout. */
button.pl-button{font-family:inherit}
button.pl-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pl-focus)}
button.pl-button:disabled{opacity:.46;cursor:not-allowed;transform:none}
.modal-foot .btn,.settings-content .btn,.settings-table .btn,.auth-card .btn,.auth-access-modal .btn,.auth-user-editor .btn{min-height:36px;border-radius:8px;padding:0 12px;font-weight:650}

/* Floating dropdowns are bright in light mode and dark only in dark mode. */
html:not([data-theme="dark"]) :is(.context-menu,.smart-dropdown,.floating-picker,.auth-account-menu){background:#FFFFFF;color:#0F1115;border:1px solid #D2D7DD;box-shadow:0 14px 42px rgba(15,17,21,.14)}
html:not([data-theme="dark"]) :is(.context-menu,.smart-dropdown,.auth-account-menu) button{color:#20242A}
html:not([data-theme="dark"]) :is(.context-menu,.smart-dropdown,.auth-account-menu) button:hover,
html:not([data-theme="dark"]) .smart-option.active{background:#F3F4F6;color:#0F1115}
html[data-theme="dark"] :is(.context-menu,.smart-dropdown,.floating-picker,.auth-account-menu){background:var(--pl-surface-raised);color:var(--pl-text);border-color:var(--pl-border-strong)}
html[data-theme="dark"] :is(.context-menu,.smart-dropdown,.auth-account-menu) button{color:var(--pl-text)}
html[data-theme="dark"] :is(.context-menu,.smart-dropdown,.auth-account-menu) button:hover,
html[data-theme="dark"] .smart-option.active{background:#252A31;color:#FFFFFF}

/* Header identity is a product banner, never an URL-style lockup. */
.topbar .brand{user-select:none}
@media(max-width:760px){.brand-badge{width:30px!important;height:30px!important}.brand-badge img{width:30px!important;height:30px!important;object-fit:contain}}

/* v0.18.2 — branded select, navigation visibility and interaction polish -------- */
/* Native Windows select popups cannot be branded consistently. The original
   <select> remains the value/event source; PluvenSelect owns the visible UI. */
.pl-select-shell{position:relative;display:inline-flex;align-items:stretch;width:100%;min-width:0;vertical-align:middle}
.pl-select-shell.compact{width:auto;flex:0 0 auto}
.pl-select-shell.disabled{opacity:.58}
.pl-select-native{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important}
.pl-select-trigger{width:100%;min-width:0;min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px 7px 11px;border:1px solid #C9CFD6;border-radius:8px;background:#FFFFFF;color:#0F1115;font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:border-color var(--pl-transition-fast),box-shadow var(--pl-transition-fast),background var(--pl-transition-fast),color var(--pl-transition-fast)}
.pl-select-trigger:hover{border-color:#AEB5BD;background:#FFFFFF}
.pl-select-trigger:focus-visible,.pl-select-shell.open .pl-select-trigger{outline:none;border-color:var(--pl-accent);box-shadow:0 0 0 3px var(--pl-focus)}
.pl-select-trigger:disabled{cursor:not-allowed;background:#F3F4F5;color:#858C96}
.pl-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-select-chevron{width:9px;height:9px;flex:0 0 9px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.72;transition:transform var(--pl-transition-fast)}
.pl-select-shell.open .pl-select-chevron{transform:translateY(2px) rotate(225deg)}
.pl-select-shell.compact .pl-select-trigger{width:auto;min-width:56px;min-height:29px;height:29px;padding:0 8px;gap:7px;border-radius:7px;font-size:11px}
.pl-select-shell.compact .pl-select-value{min-width:20px;text-align:center}
.pl-select-menu{position:fixed;font-size:13px;z-index:16000;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:5px;background:#FFFFFF;color:#0F1115;border:1px solid #D2D7DD;border-radius:10px;box-shadow:0 16px 44px rgba(15,17,21,.18);scrollbar-width:thin;scrollbar-color:#B8BEC5 transparent}
.pl-select-menu[hidden]{display:none!important}
.pl-select-menu::-webkit-scrollbar{width:8px}.pl-select-menu::-webkit-scrollbar-track{background:transparent}.pl-select-menu::-webkit-scrollbar-thumb{background:#B8BEC5;border:2px solid #fff;border-radius:999px}
.pl-select-group-label{position:sticky;top:-5px;z-index:2;margin:2px 0 3px;padding:7px 9px 5px;background:#FFFFFF;color:#6C737D;border-bottom:1px solid #ECEEF0;font-size:10px;font-weight:800;letter-spacing:.035em;text-transform:none}
.pl-select-option{width:100%;min-height:35px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:#20242A;text-align:left;font:inherit;cursor:pointer;transition:background var(--pl-transition-fast),color var(--pl-transition-fast),border-color var(--pl-transition-fast)}
.pl-select-option:hover,.pl-select-option.active{background:#FDEBED;border-color:#F7C5C9;color:#95131B}
.pl-select-option[aria-selected="true"]{font-weight:700;color:#B11520}
.pl-select-option[aria-selected="true"]:not(.active){background:#FFF7F8}
.pl-select-option:disabled{opacity:.42;cursor:not-allowed;background:transparent;border-color:transparent;color:#858C96}
.pl-select-option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-select-option-check{width:16px;flex:0 0 16px;color:var(--pl-accent);font-size:13px;font-weight:900;text-align:center}
.pl-select-empty{padding:10px;color:var(--pl-text-muted);font-size:12px}

html[data-theme="dark"] .pl-select-trigger{background:#171A20;color:#F5F6F7;border-color:#3A4048}
html[data-theme="dark"] .pl-select-trigger:hover{background:#1D2127;border-color:#535A63}
html[data-theme="dark"] .pl-select-trigger:disabled{background:#12151A;color:#777F89}
html[data-theme="dark"] .pl-select-menu{background:#171A20;color:#F5F6F7;border-color:#3A4048;box-shadow:0 18px 52px rgba(0,0,0,.48);scrollbar-color:#555C65 transparent}
html[data-theme="dark"] .pl-select-menu::-webkit-scrollbar-thumb{background:#555C65;border-color:#171A20}
html[data-theme="dark"] .pl-select-group-label{background:#171A20;color:#AEB4BD;border-bottom-color:#30353C}
html[data-theme="dark"] .pl-select-option{color:#E8EAED}
html[data-theme="dark"] .pl-select-option:hover,html[data-theme="dark"] .pl-select-option.active{background:#35161A;border-color:#6B242C;color:#FFD9DC}
html[data-theme="dark"] .pl-select-option[aria-selected="true"]{color:#FF8B94}
html[data-theme="dark"] .pl-select-option[aria-selected="true"]:not(.active){background:#251216}

/* Reusable Settings/table layouts size the custom shell instead of the hidden select. */
.settings-content .field>.pl-select-shell,.settings-table td>.pl-select-shell,.auth-user-editor .pl-select-shell,.auth-plan-access-row .pl-select-shell,.present-test-source-controls .pl-select-shell{width:100%}
.settings-content .field>.pl-select-shell .pl-select-trigger{min-height:38px}
.settings-table td>.pl-select-shell .pl-select-trigger{min-height:34px;padding:6px 9px;border-radius:7px}
.font-size-label>.pl-select-shell{width:58px}

/* Smart Planner suggestions use the same Pluven interaction language. */
html:not([data-theme="dark"]) .smart-dropdown{border-color:#D2D7DD;border-radius:10px;box-shadow:0 16px 44px rgba(15,17,21,.16);padding:5px}
html:not([data-theme="dark"]) .smart-section-label{background:#FFFFFF;color:#6C737D;border-bottom:1px solid #ECEEF0;border-radius:0;padding:7px 9px 5px;margin:0 0 3px;font-size:10px;letter-spacing:.035em;text-transform:none}
html:not([data-theme="dark"]) .smart-option{border:1px solid transparent;border-radius:7px;background:#FFFFFF;color:#20242A}
html:not([data-theme="dark"]) .smart-option:hover,html:not([data-theme="dark"]) .smart-option.active{background:#FDEBED!important;border-color:#F7C5C9;color:#95131B}

/* Week tabs and compact toolbar controls now expose the Crimson interaction accent. */
.week-tab:hover{background:var(--pl-surface);color:var(--pl-text);border-color:#E8A1A7;box-shadow:inset 0 3px 0 rgba(226,29,42,.72)}
.week-tab.active:hover{border-color:#D9868D;box-shadow:inset 0 3px 0 var(--pl-accent),var(--pl-shadow-sm)}
.format-btn:hover,.zoom-readout:hover{background:var(--pluven-crimson-soft);border-color:#F2AAB0;color:#A6121C}
.year-picker:hover{background:var(--pluven-crimson-soft);border-color:#F2AAB0;color:#A6121C}
.week-scroll-arrow:hover{background:var(--pluven-crimson-soft);color:var(--pl-accent);border-color:#F5BEC3}
html[data-theme="dark"] .week-tab:hover,html[data-theme="dark"] .format-btn:hover,html[data-theme="dark"] .zoom-readout:hover,html[data-theme="dark"] .year-picker:hover,html[data-theme="dark"] .week-scroll-arrow:hover{background:#2A1519;border-color:#713039;color:#FFB1B7}

/* Account control: strong readable typography, subtle brand hover, no persistent halo. */
.auth-account-button{color:#F5F6F7!important;font-weight:650;border-color:#3A4048!important;box-shadow:none!important}
.auth-account-button:hover{background:#251519!important;border-color:#713039!important;color:#FFFFFF!important}
.auth-account-button:focus:not(:focus-visible){box-shadow:none!important}
.auth-account-button:focus-visible{border-color:#8E3942!important;box-shadow:0 0 0 3px rgba(226,29,42,.20)!important}
.auth-account-name{color:inherit!important;font-size:11px;font-weight:700;letter-spacing:.005em}
.auth-avatar{background:#181B20!important;color:#FFFFFF!important;border:2px solid var(--presence-color,var(--planning-user-color,#2563EB))!important}

/* v0.20.0 — Pluven auth shell + account-security consistency */
.auth-overlay{display:grid;place-items:center;padding:32px;overflow:auto;background:radial-gradient(circle at 12% 8%,rgba(226,29,42,.12),transparent 32%),linear-gradient(145deg,#F6F7F8 0%,#FFFFFF 58%,#F1F2F4 100%)}
.auth-shell{width:min(940px,100%);min-height:570px;display:grid;grid-template-columns:minmax(290px,.86fr) minmax(430px,1.14fr);border:1px solid #DADDE1;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 34px 100px rgba(15,17,21,.19)}
.auth-brand-panel{position:relative;overflow:hidden;background:linear-gradient(160deg,#0F1115 0%,#171A20 60%,#100D0E 100%);color:#fff;padding:46px 42px;display:flex;align-items:flex-end}
.auth-brand-panel::before{content:"";position:absolute;inset:-20% -65% auto auto;width:410px;height:410px;border:54px solid rgba(226,29,42,.12);transform:rotate(28deg);border-radius:32px}
.auth-brand-panel::after{content:"";position:absolute;left:-80px;bottom:-105px;width:360px;height:190px;border-top:2px solid rgba(226,29,42,.7);transform:rotate(-20deg);box-shadow:0 -18px 55px rgba(226,29,42,.13)}
.auth-brand-panel-inner{position:relative;z-index:2}.auth-brand-mark{margin-bottom:30px}.auth-brand-logo{display:block;width:96px;height:96px;object-fit:contain;object-position:center;background:transparent}
.auth-brand-eyebrow{font-size:11px;font-weight:800;letter-spacing:.34em;color:#C8CDD3}.auth-brand-title{margin-top:7px;font-size:36px;line-height:1;font-weight:850;letter-spacing:.075em;color:#fff}.auth-brand-panel p{margin:22px 0 0;font-size:15px;line-height:1.65;color:#C6CBD1}.auth-brand-domain{margin-top:32px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13);font-size:11px;font-weight:700;letter-spacing:.12em;color:#F26D76}.auth-brand-accent{position:absolute;right:0;top:0;bottom:0;width:4px;background:linear-gradient(#E21D2A,transparent 34%,transparent 66%,#E21D2A)}
.auth-shell>.auth-card{width:auto;min-width:0;min-height:570px;margin:0;padding:58px 56px 34px;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;background:#fff}.auth-mobile-brand{display:none}.auth-stage-head{margin-bottom:28px}.auth-stage-kicker{display:block;margin-bottom:9px;color:#B11520;font-size:10px;font-weight:850;letter-spacing:.18em}.auth-stage-head h1{margin:0 0 9px;font-size:31px;letter-spacing:-.04em;color:#0F1115}.auth-stage-head p{margin:0;max-width:470px;color:#656D77;font-size:14px;line-height:1.58}.auth-stage-head p strong{color:#25292F}
.auth-form{display:grid;gap:9px}.auth-form label{margin-top:4px;color:#4A515A;font-size:11px;font-weight:750}.auth-form input{width:100%;height:46px;border:1px solid #C9CFD6;border-radius:9px;padding:0 12px;box-sizing:border-box;background:#fff;color:#0F1115;font:inherit}.auth-form input:hover{border-color:#AEB5BD}.auth-form input:focus{outline:none;border-color:#E21D2A!important;box-shadow:0 0 0 3px rgba(226,29,42,.12)!important}.auth-primary{height:44px;margin-top:8px}.auth-secondary{height:42px}.auth-password-field{position:relative}.auth-password-field input{padding-right:72px}.auth-password-field>button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#7A818A;font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:6px}.auth-password-field>button:hover{color:#B11520}.auth-login-links{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:5px}.auth-text-action{border:0!important;background:transparent!important;box-shadow:none!important;padding:5px 0!important;min-height:0!important;color:#6D747D!important;font-size:11px!important;font-weight:700!important;cursor:pointer}.auth-text-action:hover{color:#B11520!important;text-decoration:underline}.auth-status{min-height:19px;margin-top:5px;font-size:11px;line-height:1.45}.auth-foot{margin-top:auto;padding-top:21px;border-top:1px solid #E3E6E9;color:#9298A0;font-size:10px;line-height:1.45}.auth-foot-dot{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#E21D2A}
.auth-password-policy{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:3px 0 7px;padding:11px 12px;border:1px solid #E2E5E8;border-radius:9px;background:#F7F8F9}.auth-password-policy>div{position:relative;padding-left:19px;color:#8B929A;font-size:10px}.auth-password-policy>div::before{content:attr(data-status);position:absolute;left:0;top:-1px;width:14px;font-size:12px;font-weight:900}.auth-password-policy>div.ok{color:#198754}.auth-password-policy>div.ok::before{color:#198754}.auth-password-policy>div.missing::before{color:#B8BDC3}
.auth-credential-backdrop{position:fixed;inset:0;z-index:18000;display:grid;place-items:center;padding:24px;background:rgba(15,17,21,.58);backdrop-filter:blur(3px)}.auth-credential-modal{width:min(620px,96vw);border:1px solid #D8DCE0;border-radius:18px;background:#fff;color:#0F1115;box-shadow:0 32px 100px rgba(0,0,0,.28);padding:24px}.auth-credential-head span{color:#B11520;font-size:9px;font-weight:850;letter-spacing:.18em}.auth-credential-head h3{margin:5px 0 0;font-size:21px}.auth-credential-warning{margin:15px 0;padding:11px 12px;border-left:3px solid #E21D2A;background:#FFF5F6;color:#6D3135;font-size:11px;line-height:1.5}.auth-credential-grid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 14px;align-items:center;padding:4px 0}.auth-credential-grid>span{color:#747B84;font-size:10px;font-weight:750}.auth-credential-grid code,.auth-credential-grid strong{min-width:0;overflow-wrap:anywhere;font-size:12px}.auth-credential-secret{display:flex;align-items:center;gap:8px;min-width:0}.auth-credential-secret code{flex:1;padding:11px;border:1px solid #F0B6BB;border-radius:8px;background:#FFF7F8;color:#96131C;font-size:15px;font-weight:800;letter-spacing:.04em}.auth-credential-actions{display:flex;justify-content:flex-end;margin-top:20px}
.auth-reset-requests{margin-bottom:18px}.auth-reset-request-list{display:grid;gap:7px}.auth-reset-request{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 12px;border:1px solid #E4C8CB;border-radius:11px;background:#FFF8F8}.auth-reset-request>div:first-child{min-width:0}.auth-reset-request strong,.auth-reset-request small{display:block}.auth-reset-request strong{font-size:12px}.auth-reset-request small{margin-top:3px;color:#858C95;font-size:10px}.auth-reset-request>div:last-child{display:flex;gap:7px}.auth-user-login-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid #DADDE1;border-radius:999px;background:#F6F7F8;color:#555D66;font-size:9px;font-weight:750;white-space:nowrap}
.auth-add-user form{grid-template-columns:minmax(130px,.8fr) minmax(180px,1.1fr) minmax(175px,.9fr) auto}.auth-user-account-grid.compact{grid-template-columns:minmax(230px,1.2fr) minmax(170px,.7fr) minmax(210px,.9fr)}.auth-user-security-actions{flex-wrap:wrap}

html[data-theme="dark"] .auth-shell{border-color:#343941;background:#111419}html[data-theme="dark"] .auth-shell>.auth-card{background:#111419;color:#F4F5F6}html[data-theme="dark"] .auth-stage-head h1{color:#F4F5F6}html[data-theme="dark"] .auth-stage-head p{color:#AAB0B8}html[data-theme="dark"] .auth-form label{color:#C7CBD0}html[data-theme="dark"] .auth-form input{background:#171A20;color:#F5F6F7;border-color:#3A4048}html[data-theme="dark"] .auth-password-policy{background:#171A20;border-color:#343941}html[data-theme="dark"] .auth-foot{border-color:#30353B}html[data-theme="dark"] .auth-credential-modal{background:#15181D;color:#F4F5F6;border-color:#3B4047}html[data-theme="dark"] .auth-credential-warning{background:#2B1518;color:#F1BFC3}html[data-theme="dark"] .auth-credential-secret code{background:#271316;border-color:#683038;color:#FFB1B7}html[data-theme="dark"] .auth-reset-request{background:#241416;border-color:#593038}html[data-theme="dark"] .auth-user-login-badge{background:#1B1F24;border-color:#3A4048;color:#C6CBD1}

@media(max-width:820px){.auth-overlay{padding:0}.auth-shell{width:100%;min-height:100vh;grid-template-columns:1fr;border:0;border-radius:0}.auth-brand-panel{display:none}.auth-shell>.auth-card{min-height:100vh;padding:34px 24px}.auth-mobile-brand{display:block;margin-bottom:38px}.auth-password-policy{grid-template-columns:1fr}.auth-add-user form{grid-template-columns:1fr}.auth-credential-grid{grid-template-columns:1fr;gap:4px}.auth-credential-grid>span{margin-top:8px}.auth-reset-request{align-items:flex-start;flex-direction:column}.auth-reset-request>div:last-child{width:100%}.auth-reset-request button{flex:1}}

/* v0.20.1 — local spreadsheet identity color. The signed-in user receives the same
   deterministic Presence color locally and remotely, so collaborators never swap meaning. */
.selected-cell{box-shadow:inset 0 0 0 2px var(--planning-user-color,#2563EB)!important}.selection-edge{outline-color:var(--planning-user-color,#2563EB)!important}.selected-range{box-shadow:inset 0 0 0 9999px color-mix(in srgb,var(--planning-user-color,#2563EB) 5.5%,transparent)}.row-control.row-selection-active{background:color-mix(in srgb,var(--planning-user-color,#2563EB) 16%,var(--pl-surface))!important;color:var(--pl-text)!important;box-shadow:inset 0 0 0 2px var(--planning-user-color,#2563EB)!important}.col-head.col-selection-active{background:color-mix(in srgb,var(--planning-user-color,#2563EB) 14%,var(--pl-surface))!important;color:var(--pl-text)!important;box-shadow:inset 0 -3px 0 var(--planning-user-color,#2563EB)!important}.select-all-head.all-selection-active{background:color-mix(in srgb,var(--planning-user-color,#2563EB) 20%,var(--pl-surface))!important;color:var(--pl-text)!important;box-shadow:inset 0 0 0 2px var(--planning-user-color,#2563EB)!important}

/* v0.20.1 — header formatting uses one spreadsheet-style range overlay instead of
   independent hover-looking boxes. Blank header companions are selectable as well. */
.planning-table th[data-header-format-key]{position:relative}.planning-table th.header-format-selected::after{content:"";position:absolute;inset:0;pointer-events:none;box-sizing:border-box;z-index:3;background:color-mix(in srgb,var(--planning-user-color,#2563EB) 6%,transparent);border:0 solid var(--planning-user-color,#2563EB)}.planning-table th.header-sel-top::after{border-top-width:2px}.planning-table th.header-sel-bottom::after{border-bottom-width:2px}.planning-table th.header-sel-left::after{border-left-width:2px}.planning-table th.header-sel-right::after{border-right-width:2px}.planning-table th.header-sel-handle::before{content:"";position:absolute;right:-5px;bottom:-5px;width:9px;height:9px;border-radius:50%;background:var(--planning-user-color,#2563EB);border:2px solid #fff;box-sizing:border-box;z-index:5;pointer-events:none}.planning-table th[data-header-format-key]:hover{box-shadow:none}
.planning-table .group-row>td{z-index:24!important;isolation:isolate}.planning-table .group-row>.row-control{z-index:25!important}.planning-table .aant-preview-row>td,.planning-table .aant-preview-total>td,.planning-table .aant-preview-group>td{z-index:1}.planning-table [data-aant-row][data-aant-day].aant-selected{z-index:2!important}.planning-table .aant-target-input{z-index:3!important}
[data-aant-row][data-aant-day].aant-selected::after{background:color-mix(in srgb,var(--planning-user-color,#2563EB) 5%,transparent)!important;border-color:var(--planning-user-color,#2563EB)!important}.aant-proxy-selected{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--planning-user-color,#2563EB) 24%,transparent)!important}.aant-preview-group.aant-group-selected .aant-preview-group-title{box-shadow:inset 0 0 0 2px var(--planning-user-color,#2563EB)!important}

/* Local edit focus follows the same identity color; product chrome itself stays Crimson. */
.cell-input:focus{box-shadow:inset 0 0 0 2px var(--planning-user-color,#2563EB)!important}
.aant-preview-target input:focus,.aant-target-cell input:focus{box-shadow:inset 0 0 0 2px var(--planning-user-color,#2563EB)!important}
.group-selected .group-label{box-shadow:inset 0 0 0 2px var(--planning-user-color,#2563EB),0 1px 0 rgba(0,0,0,.15)!important}
.settings-feature-card button,.settings-content .btn,.settings-content button[data-pluven-component="button"]{min-height:34px;border-radius:8px;font-weight:700}
.settings-feature-card button:hover{border-color:#E8A1A7!important;color:#A6121C!important;background:#FFF2F3!important}
html[data-theme="dark"] .settings-feature-card button:hover{background:#2A1519!important;border-color:#713039!important;color:#FFB1B7!important}

/* v0.20.0 — Full Pluven UI consistency + interaction hardening ---------------- */
/* Reusable surfaces share one premium light/dark contract. Application-specific
   hot paths remain lightweight, but their chrome follows the same brand tokens. */
:root{
  --pl-accent-soft:#FFF1F2;
  --pl-accent-soft-strong:#FFE3E6;
  --pl-accent-border:#F2AAB0;
  --pl-panel-muted:#F7F8FA;
}
html[data-theme="dark"]{
  --pl-accent-soft:#2A1519;
  --pl-accent-soft-strong:#35161A;
  --pl-accent-border:#713039;
  --pl-panel-muted:#15181D;
}

/* Modal shell: consistent rhythm, header and action footer across the app. */
.modal-backdrop{background:rgba(15,17,21,.55)!important;backdrop-filter:blur(2px)}
.modal{border:1px solid var(--pl-border)!important;border-radius:16px!important;box-shadow:0 30px 90px rgba(15,17,21,.23)!important}
.modal-head{position:relative;min-height:62px;box-sizing:border-box;padding:14px 18px!important;background:#0F1115!important;border-bottom:1px solid #2C3036!important}
.modal-head::after{content:"";position:absolute;left:18px;bottom:-1px;width:42px;height:2px;background:var(--pl-accent);border-radius:999px}
.modal-head h3{font-size:16px!important;font-weight:780!important;letter-spacing:-.015em!important}
.modal-sub{margin-top:4px!important;color:#AEB4BD!important;line-height:1.35}
.modal-head>button{width:34px!important;height:34px!important;border-radius:9px!important;font-size:20px!important;transition:background var(--pl-transition-fast),color var(--pl-transition-fast),transform var(--pl-transition-fast)}
.modal-head>button:hover{background:#32161A!important;color:#FFD9DC!important;transform:none!important}
.modal-body{padding:18px!important;background:var(--pl-surface-raised)!important}
.modal-foot{min-height:58px;box-sizing:border-box;padding:10px 16px!important;background:var(--pl-panel-muted)!important;border-top:1px solid var(--pl-border)!important;align-items:center}
.modal-foot .btn{min-height:38px!important;padding:0 14px!important}

/* Secondary actions use Crimson only as an interaction accent, never as a loud fill. */
:where(.btn,.pl-button,.format-btn):not(.primary):not(.danger):hover{
  background:var(--pl-accent-soft)!important;border-color:var(--pl-accent-border)!important;color:#A6121C!important;
}
html[data-theme="dark"] :where(.btn,.pl-button,.format-btn):not(.primary):not(.danger):hover{color:#FFB1B7!important}
:where(input[type="checkbox"],input[type="radio"]){accent-color:var(--pl-accent)}

/* Menus and custom selects: no native-blue interaction states. */
.context-menu,.smart-dropdown,.floating-picker,.pl-select-menu,.auth-account-menu{border:1px solid var(--pl-border)!important;border-radius:12px!important;box-shadow:0 18px 50px rgba(15,17,21,.18)!important}
.context-menu{padding:6px!important}
.context-menu button{min-height:35px;padding:7px 10px!important;border-radius:8px!important;color:var(--pl-text)!important;transition:background var(--pl-transition-fast),color var(--pl-transition-fast)}
.context-menu button:hover,.context-menu button:focus-visible{background:var(--pl-accent-soft)!important;color:#A6121C!important;outline:none}
.context-menu button.danger:hover{background:#FFF0F1!important;color:#A40F1A!important}
.context-menu .menu-label{padding:7px 10px 5px!important;color:var(--pl-text-muted)!important}
.context-menu .sep{background:var(--pl-border)!important;margin:5px 4px!important}
.pl-select-menu{max-height:min(360px,calc(100dvh - 20px));scrollbar-gutter:stable}
.pl-select-option{min-height:38px!important}
.pl-select-trigger{min-height:38px;font-size:13px}
.pl-select-shell.open .pl-select-trigger{background:var(--pl-surface)!important}

/* Calendar/date picker gets the same Crimson language. */
.calendar-nav:hover{background:var(--pl-accent-soft)!important;border-color:var(--pl-accent-border)!important;color:#A6121C!important}
.calendar-day:hover{background:var(--pl-accent-soft)!important;color:#8F131C!important}
.calendar-day.selected-week{background:#FDEBED!important;color:#8F131C!important}
.calendar-day.selected-monday{background:var(--pl-accent)!important;color:#fff!important;box-shadow:0 3px 10px rgba(226,29,42,.23)}
.calendar-week-no{background:#F2F3F5!important;color:#5E6670!important}
.calendar-grid:has(.calendar-day.selected-monday) .calendar-week-no{border-color:transparent}
html[data-theme="dark"] .calendar-day.selected-week{background:#32161A!important;color:#FFC9CD!important}
html[data-theme="dark"] .calendar-day:hover{background:#2A1519!important;color:#FFB1B7!important}
html[data-theme="dark"] .calendar-week-no{background:#20242A!important;color:#AEB4BD!important}

/* Local spreadsheet selection uses the signed-in user's deterministic Presence
   color, including the pseudo overlay and drag handle. */
.selected-range::after{background:color-mix(in srgb,var(--planning-user-color,#2563EB) 7.5%,transparent)!important;border-color:var(--planning-user-color,#2563EB)!important}
td.selected-cell.selected-range::before{background:var(--planning-user-color,#2563EB)!important;border-color:#FFFFFF!important}
html[data-theme="dark"] td.selected-cell.selected-range::before{border-color:#171A20!important}
.selection-edge{outline-color:var(--planning-user-color,#2563EB)!important}

/* Header-format selection is a first-class spreadsheet interaction. Normal drag
   selects one continuous range; the small grid handle selects whole data columns. */
.planning-table th[data-header-format-key]{cursor:cell;user-select:none}
.planning-table th.header-format-selected::after{z-index:28!important}
.col-data-select-handle{position:absolute;left:3px;top:3px;z-index:29;width:16px;height:16px;display:grid;place-items:center;border:1px solid rgba(15,17,21,.22);border-radius:5px;background:rgba(255,255,255,.76);color:#4E5862;font-size:9px;line-height:1;opacity:0;cursor:pointer;transition:opacity var(--pl-transition-fast),background var(--pl-transition-fast),color var(--pl-transition-fast),border-color var(--pl-transition-fast)}
.col-head:hover .col-data-select-handle,.col-head.header-format-selected .col-data-select-handle{opacity:1}
.col-data-select-handle:hover{background:#E21D2A;color:#fff;border-color:#B11520}
body.header-format-dragging,body.header-format-dragging *{cursor:cell!important;user-select:none!important}
html[data-theme="dark"] .col-data-select-handle{background:rgba(15,17,21,.82);color:#D5D9DE;border-color:#555C65}

/* Aantallen preview is a distinct table body. It must cover the last sticky
   Planning section while staying below the real column headers. */
.planning-table .aant-preview-body{position:relative;z-index:26}
.planning-table .aant-preview-body>tr>td{position:relative;z-index:26!important}
.planning-table .aant-preview-body>tr>.row-control{z-index:28!important}
.planning-table .aant-preview-body [data-aant-row][data-aant-day].aant-selected{z-index:29!important}
.planning-table .aant-preview-body .aant-target-input{position:relative;z-index:30!important}
.planning-table thead{z-index:40!important}

/* Auth administration: clear global-default section and rows that do not collide. */
.auth-global-settings{display:grid;grid-template-columns:minmax(260px,1fr) minmax(230px,320px);gap:22px;align-items:center;margin-bottom:14px;padding:15px 16px;border:1px solid #E7C7CA;border-radius:13px;background:linear-gradient(135deg,#FFF8F8,#FFFFFF)}
.auth-global-settings-copy>span{display:block;margin-bottom:4px;color:#B11520;font-size:9px;font-weight:850;letter-spacing:.12em}
.auth-global-settings-copy h3{margin:0 0 4px;font-size:14px}.auth-global-settings-copy p{margin:0;color:#6D747D;font-size:11px;line-height:1.45}
.auth-global-mode-field{display:grid;gap:5px}.auth-global-mode-field>span{font-size:10px;font-weight:800;color:#555D66}.auth-global-mode-field>small{color:#858C96;font-size:9px}
.auth-global-mode-field .pl-select-shell{width:100%}
.auth-add-user{grid-template-columns:minmax(220px,.75fr) minmax(560px,1.8fr)!important;align-items:center!important}
.auth-add-user form{grid-template-columns:minmax(160px,.9fr) minmax(220px,1.2fr) minmax(215px,1fr) auto!important}
.auth-user-row{grid-template-columns:auto minmax(210px,1.15fr) minmax(250px,1.25fr) minmax(160px,.7fr) auto!important;gap:14px!important;padding:11px 13px!important}
.auth-user-row-meta{flex-wrap:wrap!important;align-content:center}.auth-user-row-access{padding-left:4px}
.auth-user-login-badge{max-width:180px;overflow:hidden;text-overflow:ellipsis}
html[data-theme="dark"] .auth-global-settings{background:linear-gradient(135deg,#241416,#15181D);border-color:#573038}
html[data-theme="dark"] .auth-global-settings-copy p,html[data-theme="dark"] .auth-global-mode-field>span,html[data-theme="dark"] .auth-global-mode-field>small{color:#B8BEC6}

/* History filter bar: two calm rows instead of seven controls fighting for width. */
.history-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px 12px!important;padding:13px 16px!important;background:var(--pl-panel-muted)!important}
.history-toolbar label>span{margin-left:2px;color:var(--pl-text-muted)!important}
.history-toolbar :is(.pl-select-trigger,input){min-height:39px!important}
.history-clear-filters{align-self:end;min-height:39px!important}

/* Employee center / R-numbers / archive / view manager share card hierarchy. */
.employee-center-tabs{border-color:var(--pl-border)!important;gap:7px!important}.employee-center-tabs .btn.active{background:#0F1115!important;border-color:#0F1115!important;color:#fff!important;box-shadow:inset 0 -3px 0 #E21D2A}
.employee-center-search{border-radius:10px!important;border-color:var(--pl-border)!important;background:var(--pl-surface)!important}
.employee-center-search:focus-within{border-color:var(--pl-accent)!important;box-shadow:0 0 0 3px var(--pl-focus)}
.employee-summary-card{border-radius:12px!important;background:var(--pl-surface)!important;border-color:var(--pl-border)!important;box-shadow:var(--pl-shadow-sm)}
.employee-summary-card.selected,.employee-summary-card:has(.active){border-color:var(--pl-accent-border)!important}
.employee-center-scroll,.table-scroll{border-radius:11px!important;border-color:var(--pl-border)!important;background:var(--pl-surface)}
.resource-toolbar{padding:2px 0 4px}.summary-pill{background:#FFF1F2!important;border:1px solid #F3BEC3!important;color:#97141D!important}
.resource-table{border-collapse:separate;border-spacing:0;width:100%}.resource-table th{background:#F1F3F5!important;color:#353B42!important}.resource-table tr:hover td{background:#FFF8F8}.resource-input:focus{border-color:var(--pl-accent)!important;box-shadow:0 0 0 3px var(--pl-focus)!important}
.archive-summary{padding:14px!important;border-radius:13px!important;background:var(--pl-panel-muted)!important;border-color:var(--pl-border)!important}.archive-summary-cards{gap:10px!important}.archive-summary-cards>div{min-height:70px;justify-content:center;padding:12px 13px!important;border-radius:11px!important;border-color:var(--pl-border)!important;box-shadow:var(--pl-shadow-sm)}.archive-summary-cards b{font-size:23px!important;color:#11151A}.archive-note{padding-left:10px;border-left:2px solid #E0E3E7}.archive-foot{gap:8px!important}
.column-manager-summary{border-color:var(--pl-border)!important;background:var(--pl-panel-muted)!important}.column-manager-summary strong{color:#A6121C!important}.column-manager-search{border-color:var(--pl-border)!important;border-radius:10px!important}.column-manager-search:focus-within{border-color:var(--pl-accent)!important;box-shadow:0 0 0 3px var(--pl-focus)}.column-manager-group{border-radius:12px!important;border-color:var(--pl-border)!important;background:var(--pl-surface)!important}.column-manager-group-head{background:#F4F5F7!important;border-color:var(--pl-border)!important}.column-manager-group-head strong{color:#252A30!important}.column-manager-group-count{color:#8F131C!important;border-color:#F3C4C8!important;background:#FFF6F7!important}.column-manager-item:hover{background:#FFF8F8!important}
.view-list{border-color:var(--pl-border)!important;border-radius:11px!important}.view-item{border-color:var(--pl-border)!important}.view-item:hover{background:#FFF8F8}

/* Transport: preserve semantic warning colors while moving all interaction chrome to Pluven. */
.transport-day-tab{border-color:var(--pl-border)!important;border-radius:9px!important;transition:border-color var(--pl-transition-fast),background var(--pl-transition-fast),color var(--pl-transition-fast),box-shadow var(--pl-transition-fast)}
.transport-day-tab:hover{background:#FFF1F2!important;border-color:#F2AAB0!important;color:#A6121C!important}.transport-day-tab.active{background:#0F1115!important;border-color:#0F1115!important;color:#fff!important;box-shadow:inset 0 -3px 0 #E21D2A!important}.transport-day-tab.active small{color:#D2D6DB!important}
.transport-card,.transport-source-card{border-radius:12px!important;border-color:var(--pl-border)!important;transition:border-color var(--pl-transition-fast),box-shadow var(--pl-transition-fast),transform var(--pl-transition-fast)}
.transport-card:hover,.transport-source-card:hover{border-color:#E8A1A7!important;box-shadow:0 7px 20px rgba(15,17,21,.08)}
.transport-person:hover{background:#FFF5F6!important;border-color:#F1C0C4!important}.transport-card-action:hover,.transport-driver-btn:hover,.transport-person-more:hover{background:#FFF1F2!important;border-color:#F2AAB0!important;color:#A6121C!important}
.transport-drop-active{outline-color:#E21D2A!important;background:#FFF1F2!important}

html[data-theme="dark"] .archive-summary-cards b{color:#F4F5F6}
html[data-theme="dark"] .column-manager-group-head,html[data-theme="dark"] .resource-table th{background:#20242A!important;color:#ECEEF0!important}
html[data-theme="dark"] .column-manager-group-head strong{color:#F4F5F6!important}
html[data-theme="dark"] .column-manager-item:hover,html[data-theme="dark"] .view-item:hover,html[data-theme="dark"] .resource-table tr:hover td,html[data-theme="dark"] .transport-person:hover{background:#26161A!important}
html[data-theme="dark"] .transport-day-tab.active{background:#0D0F12!important}

@media(max-width:1050px){
  .auth-user-row{grid-template-columns:auto minmax(190px,1fr) minmax(220px,1fr) auto!important}.auth-user-row-access{display:none}.auth-manage-user-button{grid-column:auto!important;grid-row:auto!important}
  .auth-add-user{grid-template-columns:1fr!important}.auth-add-user form{grid-template-columns:1fr 1fr minmax(210px,1fr) auto!important}
}
@media(max-width:820px){
  .auth-global-settings{grid-template-columns:1fr}.auth-add-user form{grid-template-columns:1fr!important}
  .history-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){.history-toolbar{grid-template-columns:1fr!important}.auth-user-row{grid-template-columns:auto 1fr!important}}

/* v0.20.0 release override: legacy .btn.primary rules have higher specificity than
   the original :where() primitive. Keep the visible brand source unambiguous. */
button.btn.primary,button.pl-button.primary,button[data-pluven-variant="primary"]{
  background:#E21D2A!important;border-color:#E21D2A!important;color:#FFFFFF!important;box-shadow:0 2px 7px rgba(226,29,42,.18)!important;
}
button.btn.primary:hover,button.pl-button.primary:hover,button[data-pluven-variant="primary"]:hover{background:#C91824!important;border-color:#C91824!important;color:#fff!important}
button.btn.primary:active,button.pl-button.primary:active,button[data-pluven-variant="primary"]:active{background:#B11520!important;border-color:#B11520!important}
button.btn.active,.employee-center-filters .btn.active,.present-sheet-tabs button.active{background:#0F1115!important;border-color:#0F1115!important;color:#fff!important;box-shadow:inset 0 -3px 0 #E21D2A!important}
button.btn.active-toggle{background:#FFF1F2!important;border-color:#F2AAB0!important;color:#A6121C!important}
html[data-theme="dark"] button.btn.active-toggle{background:#2A1519!important;border-color:#713039!important;color:#FFB1B7!important}


/* v0.20.0 — cross-module layout consistency pass. Reusable fields, manager
   toolbars and modal bodies share the same rhythm instead of relying on
   historical one-off widths. */
.modal label.field,.modal .field:has(>input),.modal .field:has(>.pl-select-shell){display:grid;gap:6px;min-width:0}
.modal label.field>span,.modal .field>label:first-child{color:var(--pl-text-muted);font-size:10px;font-weight:800;letter-spacing:.01em}
.modal label.field>input:not([type="checkbox"]):not([type="radio"]),.modal label.field>textarea,.modal label.field>.pl-select-shell,.modal .field>.pl-select-shell{width:100%;min-width:0;box-sizing:border-box}
.modal .pl-select-trigger{width:100%;min-width:0}
.modal .modal-body,.modal .settings-content{scrollbar-gutter:stable}
.history-toolbar>*{min-width:0}.history-toolbar label{display:grid;gap:5px;align-content:end}.history-toolbar .pl-select-shell{width:100%;min-width:0}
.employee-center-toolbar,.employee-status-toolbar{gap:10px!important;align-items:center}.employee-center-filters{gap:7px!important;flex-wrap:wrap}.employee-center-filters .btn{min-height:38px}
.employee-center-table th,.resource-table th{font-size:10px;letter-spacing:.01em}.employee-center-table td,.resource-table td{vertical-align:middle}
.column-manager-toolbar{gap:10px!important;align-items:center!important}.column-manager-actions{gap:7px!important;flex-wrap:wrap!important}.column-manager-groups{gap:12px!important}.column-manager-group{overflow:hidden}
.view-item{min-height:46px}.view-item>span{min-width:0}.view-item strong{color:var(--pl-text)}.view-item small{color:var(--pl-text-muted)}
.archive-grid{gap:10px!important;align-items:end}.archive-grid .field{min-width:0}.archive-grid .pl-select-shell{width:100%}.archive-foot{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.resource-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.resource-table .resource-input{min-height:36px;border-radius:8px}

/* Filter manager reads as three equal cards and remains usable at narrower
   modal widths. */
.filter-summary,.planner-filter-summary{border-radius:12px!important;border-color:var(--pl-border)!important;background:var(--pl-accent-soft)!important}
.filter-groups,.planner-filter-groups{gap:12px!important}.filter-group,.planner-filter-group{border-radius:12px!important;border-color:var(--pl-border)!important;background:var(--pl-surface)!important;overflow:hidden}
.filter-group-head,.planner-filter-group-head{background:var(--pl-panel-muted)!important;border-color:var(--pl-border)!important}
.filter-group label:hover,.planner-filter-group label:hover{background:var(--pl-accent-soft)!important}

/* Menus opened from Export / More / Plan / Columns / Sections all share the
   same selected/hover state; no browser-blue remnants. */
.context-menu :is(button,.menu-item):hover,.context-menu :is(button,.menu-item).active,
.pl-menu :is(button,.menu-item):hover,.pl-menu :is(button,.menu-item).active{background:var(--pl-accent-soft)!important;color:#98151E!important}
.context-menu :is(button,.menu-item):focus-visible,.pl-menu :is(button,.menu-item):focus-visible{outline:0;box-shadow:inset 0 0 0 2px rgba(226,29,42,.32)!important}

/* Aantallen is visually its own lower table zone. Give its real cells a
   stacking context that reliably wins over sticky Planning section rows in
   Chromium's table painting order. */
.planning-table .aant-preview-body{isolation:isolate!important}
.planning-table .aant-preview-body>tr{position:relative;z-index:26!important}
.planning-table .aant-preview-body>tr>td{background-clip:padding-box}

/* Header-only formatting selection should read as one continuous identity-colored
   operation; the compact grid icon is the explicit whole-column data handle. */
.planning-table th[data-header-format-key]{cursor:cell}
.planning-table .col-head .col-data-select-handle{cursor:default}
.planning-table th.header-format-selected{outline:0!important}

html[data-theme="dark"] .view-item strong{color:#F3F4F5}
html[data-theme="dark"] .filter-group-head,html[data-theme="dark"] .planner-filter-group-head{background:#20242A!important}
html[data-theme="dark"] .filter-group label:hover,html[data-theme="dark"] .planner-filter-group label:hover{background:#26161A!important}
html[data-theme="dark"] .context-menu :is(button,.menu-item):hover,html[data-theme="dark"] .context-menu :is(button,.menu-item).active,
html[data-theme="dark"] .pl-menu :is(button,.menu-item):hover,html[data-theme="dark"] .pl-menu :is(button,.menu-item).active{background:#2A1519!important;color:#FFB1B7!important}

@media(max-width:900px){
  .column-manager-toolbar{align-items:stretch!important;flex-direction:column}.column-manager-search{width:100%!important}.column-manager-actions{width:100%}
  .archive-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:620px){.archive-grid{grid-template-columns:1fr!important}}


/* v0.20.1 — screenshot-driven polish: menu keyboard state and Aantallen tabs stay
   inside the Carbon/Crimson product language instead of legacy blue chrome. */
.context-menu button.menu-keyboard-active,.context-menu button:focus-visible{background:var(--pl-accent-soft)!important;color:#A6121C!important;outline:0!important;box-shadow:inset 0 0 0 1px var(--pl-accent-border)!important}
html[data-theme="dark"] .context-menu button.menu-keyboard-active,html[data-theme="dark"] .context-menu button:focus-visible{background:#2A1519!important;color:#FFB1B7!important;outline:0!important;box-shadow:inset 0 0 0 1px #713039!important}
.aant-tab:hover,.aant-preview-tab:hover{background:var(--pl-accent-soft)!important;border-color:var(--pl-accent-border)!important;color:#A6121C!important}.aant-tab.active,.aant-preview-tab.active{background:#0F1115!important;border-color:#0F1115!important;color:#fff!important;box-shadow:inset 0 -3px 0 var(--pl-accent)!important}html[data-theme="dark"] .aant-tab.active,html[data-theme="dark"] .aant-preview-tab.active{background:#F5F6F7!important;border-color:#F5F6F7!important;color:#0F1115!important;box-shadow:inset 0 -3px 0 var(--pl-accent)!important}

/* Stable Plan metadata rows: helper copy reserves its own track instead of pushing
   neighboring inputs out of alignment. */
.plan-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:14px;align-items:start}.plan-meta-field{display:grid!important;grid-template-rows:auto 40px minmax(31px,auto);gap:5px!important;align-content:start;min-width:0}.plan-meta-field>label{margin:0!important;align-self:end}.plan-meta-field>input{height:40px!important;box-sizing:border-box}.plan-meta-help{min-height:31px;margin:0!important;line-height:1.35}.plan-meta-help.is-empty{visibility:hidden}
@media(max-width:820px){.plan-meta-grid{grid-template-columns:1fr}.plan-meta-field{grid-template-rows:auto 40px auto}.plan-meta-help{min-height:0}.plan-meta-help.is-empty{display:none}}


/* v0.20.2 — focused Planner editor must not look like a second selected cell.
   The range overlay is the sole local selection border; the primary cell is expressed
   only by the spreadsheet handle. This also keeps the underlying cell fill unchanged. */
.planning-table td.selected-range > .cell-input:focus,
.planning-table td.selected-range .name-wrap > .cell-input:focus{
  box-shadow:none!important;
  background:transparent!important;
}

/* v0.20.2 — the signed-in user's identity color remains visible on the complete
   navbar account control, not only on its initials avatar. Hover/focus never replace
   the identity border with product-chrome Crimson/Graphite. */
.auth-account-button{
  border-color:var(--presence-color,var(--planning-user-color,#2563EB))!important;
}
.auth-account-button:hover{
  border-color:var(--presence-color,var(--planning-user-color,#2563EB))!important;
}
.auth-account-button:focus-visible{
  border-color:var(--presence-color,var(--planning-user-color,#2563EB))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--presence-color,var(--planning-user-color,#2563EB)) 24%,transparent)!important;
}

/* v0.20.2 — PLAN selector must stay high-contrast even while its menu is focused/open.
   It deliberately remains Carbon; Crimson is reserved for menu interaction accents. */
.workspace-select{
  background:#1D2025!important;
  border-color:#3A4048!important;
  color:#FFFFFF!important;
}
.workspace-select>span,.workspace-select>.chev{color:#FFFFFF!important}
.workspace-select:hover{
  background:#282C32!important;
  border-color:#5A616A!important;
  color:#FFFFFF!important;
}
.workspace-select:active,.workspace-select:focus{
  background:#23272D!important;
  color:#FFFFFF!important;
}
.workspace-select:focus-visible{
  border-color:#737A84!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.11)!important;
}

/* v0.20.2 — keep the automatic-text-color marker fully inside the compact A badge.
   It must never protrude beyond the format button's box. */
.format-btn.text-color-swatch{box-sizing:border-box;overflow:hidden}
.text-color-swatch>#formatTextColorDot{box-sizing:border-box;overflow:hidden}
.text-color-swatch>#formatTextColorDot[data-auto="1"]::after{
  margin:0!important;
  right:1px;
  bottom:0;
  font-size:6px;
  line-height:1;
  color:currentColor;
}


/* v0.20.3 — screenshot-driven live QA ---------------------------------------
   1) The primary/drag-end cell must not draw its historical selected-cell box
      on top of the continuous range outline. The range overlay is authoritative.
   2) Collaborator avatar rings are always their Presence identity color.
   3) PLAN switcher remains Carbon/white under hover/focus regardless of the
      generic button registry.
   4) Text-color picker actions stay inside the popup at desktop widths. */
.planning-table td.selected-cell.selected-range{
  box-shadow:none!important;
}

.plan-presence .presence-avatar{
  border:2px solid var(--presence-color,#64748b)!important;
  box-shadow:0 0 0 2px #0F1115!important;
}
.plan-presence .presence-avatar:hover,
.plan-presence .presence-avatar:focus-visible{
  border-color:var(--presence-color,#64748b)!important;
}
.plan-presence .presence-avatar:focus-visible{
  outline:2px solid color-mix(in srgb,var(--presence-color,#64748b) 38%,transparent)!important;
  outline-offset:2px;
}

button#workspaceSelect,
button#workspaceSelect[data-pluven-component="button"]{
  background:#1D2025!important;
  border-color:#3A4048!important;
  color:#FFFFFF!important;
}
button#workspaceSelect:hover,
button#workspaceSelect[data-pluven-component="button"]:hover,
button#workspaceSelect:focus,
button#workspaceSelect:focus-visible,
button#workspaceSelect:active{
  background:#282C32!important;
  border-color:#5A616A!important;
  color:#FFFFFF!important;
}
button#workspaceSelect:hover > *,
button#workspaceSelect:focus > *,
button#workspaceSelect:focus-visible > *,
button#workspaceSelect:active > *{
  color:#FFFFFF!important;
}

.floating-picker .picker-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px!important;
  width:100%;
  min-width:0;
}
.floating-picker .picker-actions .btn{
  min-width:0!important;
  max-width:100%;
  min-height:38px!important;
  padding:0 9px!important;
  font-size:13px!important;
  line-height:1.1;
}
.floating-picker #pickerClear{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.floating-picker #pickerApply{
  width:auto;
}


/* v0.20.4 — focused light/dark/responsive QA -------------------------------
   This layer deliberately targets application chrome, managers and mobile
   navigation only. Planner/status/cell colors remain user/data semantics. */

/* Long plan/account names may never push Presence or the action toolbar out of
   the shell. Truncate copy, not controls. */
.workspace-control{min-width:0}
.workspace-select{min-width:0;max-width:260px}
.workspace-select #workspaceName{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-account-button{min-width:0;max-width:220px}
.auth-account-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-presence{min-width:0;flex:0 1 auto}
@media(max-width:1350px) and (min-width:901px){
  .workspace-select{max-width:190px}
  .auth-account-button{max-width:175px}
  .auth-account-name{max-width:112px}
}
@media(max-width:1050px) and (min-width:901px){
  .workspace-select{max-width:165px}
  .auth-account-button{max-width:142px}
  .auth-account-name{max-width:80px}
}
@media(max-width:900px){
  .workspace-select{max-width:none}
  .workspace-select #workspaceName{max-width:100%}
  .auth-account-button{max-width:none}
}

/* Dark reusable chrome is Carbon/Graphite + Crimson, never the legacy blue
   navigation theme. Semantic Planner cyan/status colors are intentionally not
   touched here. */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .settings-content{background:var(--pl-surface-raised)!important;color:var(--pl-text)!important}
html[data-theme="dark"] .modal-head{background:#0D0F12!important;color:#FFFFFF!important;border-color:var(--pl-border)!important}
html[data-theme="dark"] .modal-foot{background:#0F1216!important;border-color:var(--pl-border)!important}
html[data-theme="dark"] .settings-nav{background:#0F1216!important;border-color:var(--pl-border)!important}
html[data-theme="dark"] .settings-nav button{color:#C7CBD1!important;border-color:transparent!important}
html[data-theme="dark"] .settings-nav button:hover{background:#251519!important;color:#FFB1B7!important}
html[data-theme="dark"] .settings-nav button.active{background:#35161A!important;color:#FFD9DC!important;box-shadow:inset 3px 0 0 var(--pl-accent)!important}
html[data-theme="dark"] :is(.interface-settings-card,.template-card,.setting-toggle-card,.check-card,.view-list,.view-item,.filter-group,.filter-option,.column-manager-group,.column-manager-list,.column-manager-item,.column-manager-summary,.archive-item,.employee-profile-card){background:#171A20!important;color:var(--pl-text)!important;border-color:#343940!important}
html[data-theme="dark"] :is(.column-manager-group-head,.history-toolbar,.employee-center-toolbar,.employee-status-toolbar){background:#12151A!important;border-color:#343940!important;color:var(--pl-text)!important}
html[data-theme="dark"] .column-manager-search{background:#171A20!important;border-color:#424850!important}
html[data-theme="dark"] .column-manager-search input{color:var(--pl-text)!important}
html[data-theme="dark"] .column-manager-summary strong,
html[data-theme="dark"] .column-manager-group-head strong{color:#F5F6F7!important}
html[data-theme="dark"] .column-manager-summary span,
html[data-theme="dark"] .column-manager-group-head small{color:#AEB4BD!important}

/* Mobile/tablet navigation used to retain the old blue active state. The active
   destination now follows the same Crimson interaction contract as desktop. */
.mobile-day-tab.active,
.mobile-nav-item.active,
.mobile-week-year.active,
.mobile-week-card.active,
.mobile-week-list-item.active{
  background:var(--pluven-crimson-soft)!important;
  border-color:#E8A1A7!important;
  color:#A6121C!important;
}
.mobile-day-tab.active{box-shadow:inset 0 0 0 1px #E8A1A7!important}
.mobile-week-list-item.active{box-shadow:inset 3px 0 0 var(--pl-accent)!important}
.mobile-nav-item.active .mobile-nav-item-icon{background:#F8CDD1!important;color:#95131B!important}
.mobile-nav-item.active .mobile-nav-item-badge{background:#FFFFFF!important;color:#A6121C!important}
.mobile-day-tab.active small,
.mobile-week-card.active small,
.mobile-week-list-item.active strong,
.mobile-week-list-item.active span{color:#A6121C!important}
.mobile-quick-actions button:active{background:var(--pluven-crimson-soft)!important;border-color:#E8A1A7!important;color:#A6121C!important}

html[data-theme="dark"] .mobile-nav-panel{background:#12151A!important;border-color:#343940!important}
html[data-theme="dark"] :is(.mobile-nav-item,.mobile-week-year,.mobile-week-card,.mobile-week-list-item,.mobile-format-select,.mobile-zoom-row button,.mobile-zoom-row strong){background:#171A20!important;border-color:#3A4048!important;color:#E8EAED!important}
html[data-theme="dark"] .mobile-nav-item-icon{background:#24282E!important;color:#E8EAED!important}
html[data-theme="dark"] .mobile-nav-section-title{color:#AEB4BD!important}
html[data-theme="dark"] :is(.mobile-day-tab.active,.mobile-nav-item.active,.mobile-week-year.active,.mobile-week-card.active,.mobile-week-list-item.active){background:#35161A!important;border-color:#713039!important;color:#FFD9DC!important}
html[data-theme="dark"] .mobile-week-list-item.active{box-shadow:inset 3px 0 0 var(--pl-accent)!important}
html[data-theme="dark"] .mobile-nav-item.active .mobile-nav-item-icon{background:#4A1C22!important;color:#FFD9DC!important}
html[data-theme="dark"] .mobile-nav-item.active .mobile-nav-item-badge{background:#0F1115!important;color:#FF9FA7!important}
html[data-theme="dark"] .mobile-day-tab.active small,
html[data-theme="dark"] .mobile-week-card.active small,
html[data-theme="dark"] .mobile-week-list-item.active strong,
html[data-theme="dark"] .mobile-week-list-item.active span{color:#FFB1B7!important}

/* Viewport-safe overlays and bottom sheets. No popup should be able to extend
   beyond a phone viewport or sit under the device safe area. */
@media(max-width:900px), (orientation:landscape) and (max-height:640px) and (max-width:1280px){
  .pl-select-menu,.floating-picker{max-width:calc(100vw - 12px)!important}
  .floating-picker{max-height:calc(100dvh - 12px)!important;overflow:auto}
  .modal-foot{padding-bottom:max(9px,env(safe-area-inset-bottom))!important}
  .mobile-nav-panel{padding-bottom:max(10px,env(safe-area-inset-bottom))!important}
  .context-menu:not(.anchored-menu){margin-bottom:env(safe-area-inset-bottom)}
}


/* v0.20.6 — screenshot-driven dark QA / surface stability -----------------
   Keep the Planner's semantic colors untouched; this pass repairs dark shell
   composition, Smart Afdeling interaction, Aantallen focus artifacts, Transport,
   Filters and the content-dependent Settings modal size. */

/* In dark mode the application navbar is true Carbon. The Planner below may keep
   its semantic cyan/dark palette, but the product shell itself is not blue. */
html[data-theme="dark"] .topbar{
  background:#0F1115!important;
  border-bottom:1px solid #2D3238!important;
  box-shadow:0 2px 12px rgba(0,0,0,.34)!important;
}

/* Smart Afdeling: an active department no longer becomes a solid legacy-blue
   block beside its time chips. Use a calm surface plus the Crimson identity of
   product interaction, so the department and hour badges still read as one row. */
.smart-department-row .smart-option-main:hover,
.smart-department-row .smart-option-main.active{
  background:#FFF3F4!important;
  border-color:#F0B9BE!important;
  color:#95131B!important;
  box-shadow:inset 3px 0 0 #E21D2A!important;
}
html[data-theme="dark"] .smart-department-row .smart-option-main{
  background:#171A20!important;
  color:#E8EAED!important;
}
html[data-theme="dark"] .smart-department-row .smart-option-main:hover,
html[data-theme="dark"] .smart-department-row .smart-option-main.active{
  background:#26161A!important;
  border-color:#713039!important;
  color:#FFD9DC!important;
  box-shadow:inset 3px 0 0 #E21D2A!important;
}
html[data-theme="dark"] .smart-section-label{
  background:#111419!important;
  border-color:#343940!important;
  color:#B8BEC6!important;
}

/* Aantallen owns one logical selection frame. A focused target inside that range
   must never render a second inner box/background; dragging also blurs the stale
   editor in JS once the range has actually moved. */
.aant-target-cell.aant-selected .aant-target-input:focus,
.aant-preview-target.aant-selected .aant-target-input:focus{
  box-shadow:none!important;
  background:transparent!important;
}

/* Transport edit view — dark mode is a coherent Carbon workspace. Share/export
   mode is intentionally excluded so printable/sendable output keeps its existing
   light semantic morning/afternoon design. */
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-body,
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-toolbar{
  background:#111419!important;
  color:#E8EAED!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-toolbar{
  border-bottom:1px solid #2D3238;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-day-tab{
  background:#171A20!important;
  border-color:#3A4048!important;
  color:#E8EAED!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-day-tab small{color:#9FA6AE!important}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-day-tab:hover{
  background:#26161A!important;
  border-color:#713039!important;
  color:#FFD9DC!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-day-tab.active{
  background:#0F1115!important;
  border-color:#555C65!important;
  color:#FFFFFF!important;
  box-shadow:inset 0 -3px 0 #E21D2A!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .btn:not(.primary):not(.danger){
  background:#20242A!important;
  border-color:#3A4048!important;
  color:#E8EAED!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .btn:not(.primary):not(.danger):hover{
  background:#2A1519!important;
  border-color:#713039!important;
  color:#FFB1B7!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) :is(.transport-card,.transport-source-card){
  background:#15181D!important;
  border-color:#3A4048!important;
  box-shadow:0 5px 18px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card-head{
  background:#20242A!important;
  border-bottom-color:#3A4048!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card-head strong,
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-person-main strong{color:#F5F6F7!important}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card-head small,
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card-head .transport-start-time,
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-person-main small{color:#AEB4BD!important}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card.transport-shift-ochtend:not(.card-conflict){
  background:#1C190F!important;
  border-color:#62582F!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card.transport-shift-ochtend:not(.card-conflict) .transport-card-head{
  background:#302A13!important;
  border-bottom-color:#62582F!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card.transport-shift-middag:not(.card-conflict){
  background:#111A22!important;
  border-color:#355268!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card.transport-shift-middag:not(.card-conflict) .transport-card-head{
  background:#192A36!important;
  border-bottom-color:#355268!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-person{
  background:#171A20!important;
  border-color:transparent!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-person:hover{
  background:#26161A!important;
  border-color:#713039!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-person.is-driver{
  background:#463A16!important;
  border-color:#8A7328!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-person.has-conflict{
  background:#32181B!important;
  border-color:#8E3C45!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) :is(.transport-capacity,.transport-card-action){
  background:#111419!important;
  border-color:#454B53!important;
  color:#DDE1E5!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) :is(.transport-card-action,.transport-driver-btn,.transport-person-more):hover{
  background:#2A1519!important;
  color:#FFB1B7!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-source-title{
  background:#20242A!important;
  border-color:#3A4048!important;
  color:#DDE1E5!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-source-group>strong,
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-empty{color:#9FA6AE!important}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card.card-conflict{
  background:#211417!important;
  border-color:#8E3C45!important;
}
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card.card-conflict .transport-card-head,
html[data-theme="dark"] .transport-modal:not(.share-mode) .transport-card-warning{
  background:#32181B!important;
  border-color:#8E3C45!important;
  color:#FFB1B7!important;
}

/* Filters — dark modal internals are actual dark surfaces instead of white cards
   inside a Carbon shell. Selection uses Crimson, while checkbox semantics stay native. */
html[data-theme="dark"] .filter-modal .planner-filter-preview{
  background:#171A20!important;
  border-color:#3A4048!important;
  color:#C7CBD1!important;
}
html[data-theme="dark"] .filter-modal .planner-filter-preview strong{color:#FF7B85!important}
html[data-theme="dark"] .filter-modal .planner-filter-multi,
html[data-theme="dark"] .filter-modal .planner-filter-check{
  background:#171A20!important;
  border-color:#3A4048!important;
  color:#E8EAED!important;
}
html[data-theme="dark"] .filter-modal .planner-filter-multi-head{
  background:#20242A!important;
  border-color:#3A4048!important;
}
html[data-theme="dark"] .filter-modal .planner-filter-multi-head>label,
html[data-theme="dark"] .filter-modal .planner-filter-check strong{color:#F1F3F5!important}
html[data-theme="dark"] .filter-modal .planner-filter-multi-count,
html[data-theme="dark"] .filter-modal .planner-filter-check small{color:#AEB4BD!important}
html[data-theme="dark"] .filter-modal .planner-filter-clear-group{color:#FF8B94!important}
html[data-theme="dark"] .filter-modal .planner-filter-clear-group:hover:not(:disabled){background:#2A1519!important}
html[data-theme="dark"] .filter-modal .planner-filter-option{color:#DDE1E5!important}
html[data-theme="dark"] .filter-modal .planner-filter-option:hover{background:#22262C!important}
html[data-theme="dark"] .filter-modal .planner-filter-option:has(input:checked){
  background:#35161A!important;
  color:#FFD9DC!important;
}
html[data-theme="dark"] .filter-modal :is(.planner-filter-option input,.planner-filter-check input){accent-color:#E21D2A!important}
html[data-theme="dark"] .filter-modal .planner-filter-note{
  background:#14171C!important;
  border-left-color:#E21D2A!important;
  color:#AEB4BD!important;
}
html[data-theme="dark"] .filter-modal .planner-filter-note strong{color:#F1F3F5!important}

/* Settings keeps one stable desktop viewport instead of resizing when switching
   between short and long tabs. Its inner content scrolls; the shell does not jump. */
#settingsBackdrop .settings-modal{
  width:min(1320px,88vw)!important;
  height:min(840px,82vh);
  max-height:82vh!important;
}
#settingsBackdrop .settings-modal .settings-layout{flex:1;min-height:0}
#settingsBackdrop .settings-modal .settings-content{min-height:0;overflow:auto}
@media(max-width:900px){
  #settingsBackdrop .settings-modal{
    width:100vw!important;
    height:92dvh!important;
    max-height:92dvh!important;
  }
}


/* v0.20.6 — Aantallen editor/focus handoff --------------------------------
   Clicking a read-only PLAN/proxy cell while a target input is in caret mode
   must leave exactly one logical selection frame. JS materializes + blurs the
   editor before preventDefault(); this rule is a visual safety net for any
   stale focused input that is no longer the selected logical cell. */
.aant-target-cell:not(.aant-selected) .aant-target-input:focus,
.aant-preview-target:not(.aant-selected) .aant-target-input:focus{
  box-shadow:none!important;
  background:transparent!important;
  outline:0!important;
}


/* v0.20.7 — Aantallen preview full-cell editor surface ----------------------
   In dark mode the global input theme used to reveal the 21px target editor as
   a darker inset strip inside a 32px Aantallen table cell. The cell itself owns
   the semantic background and logical selection frame, so the inline editor must
   fill the complete target cell and remain visually transparent. */
.planning-table .aant-preview-target .aant-preview-target-wrap{
  width:100%!important;
  height:100%!important;
  min-height:32px!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}
.planning-table .aant-preview-target .aant-target-input{
  flex:1 1 auto!important;
  width:100%!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .planning-table .aant-preview-target .aant-target-input,
html[data-theme="dark"] .planning-table .aant-preview-target .aant-target-input:focus{
  background:transparent!important;
  color:inherit!important;
}