
/* Global Quorly theme policy. Admin is intentionally excluded. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] .quorly-logo-image { content:url('/logo-mark-dark.png') !important; }
html[data-theme="light"] .quorly-logo-image { content:url('/logo-mark-light.png') !important; }
html[data-theme="dark"] body { background:#11121a !important; color:#ececf4 !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .billing-card { background:#191b26 !important; color:#ececf4 !important; border-color:#2b2e3d !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:#151720 !important; color:#ececf4 !important; border-color:#343746 !important; }
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .back { color:#9ca3b5 !important; }
html[data-theme="dark"] button:not(.danger):not(.btn-danger),
html[data-theme="dark"] .primary,
html[data-theme="dark"] .a { border-color:#6C20FF; }
html[data-theme="dark"] .theme-toggle { display:inline-flex; }
html[data-theme="dark"][data-theme-mono="true"] .theme-toggle { display:none !important; }

html[data-theme="dark"] .m{background-image:url('/logo-mark-dark.png')!important}
html[data-theme="light"] .m{background-image:url('/logo-mark-light.png')!important}
html[data-theme="dark"]{--blue:#6C20FF;--blue-2:#5917d8;--blue-soft:#241a42;--bg:#0d101b;--panel:#151925;--border:#30384d;--text:#f5f3ff;--muted:#9ca7bd}
html[data-theme="dark"] body{background:radial-gradient(circle at 15% 18%,rgba(108,32,255,.18),transparent 27%),radial-gradient(circle at 86% 82%,rgba(108,32,255,.13),transparent 30%),#0d101b!important}
html[data-theme="dark"] .form-side{background:radial-gradient(circle at 15% 15%,rgba(108,32,255,.08),transparent 34%),#101522!important}html[data-theme="dark"] .auth-card{border-color:#3b3471!important;background:#101522!important;box-shadow:0 30px 90px rgba(0,0,0,.38)!important}html[data-theme="dark"] .auth-heading h1{color:#f5f3ff!important}html[data-theme="dark"] .auth-heading p,html[data-theme="dark"] .field-hint{color:#9ca7bd!important}html[data-theme="dark"] .auth-heading .eyebrow,html[data-theme="dark"] .auth-card a{color:#a970ff}html[data-theme="dark"] .field input{background:#111827!important;color:#f5f3ff!important;border-color:#34405a!important}html[data-theme="dark"] .field input:focus{border-color:#6C20FF!important;box-shadow:0 0 0 3px rgba(108,32,255,.18)!important}html[data-theme="dark"] .primary-button{background:linear-gradient(90deg,#6C20FF,#861cff)!important}html[data-theme="dark"] .visual-overlay{background:radial-gradient(circle at 78% 24%,rgba(108,32,255,.55),transparent 28%),radial-gradient(circle at 25% 75%,rgba(108,32,255,.28),transparent 34%),linear-gradient(145deg,#17153d 0%,#151343 45%,#5114d8 100%)!important}
html[data-theme="dark"] .modal-panel,html[data-theme="dark"] .employee-modal-panel{background:#171a26!important;border-color:#303446!important;color:#f5f3ff!important}html[data-theme="dark"] .modal-foot,html[data-theme="dark"] .modal-actions{background:#171a26!important;border-color:#303446!important}html[data-theme="dark"] .modal-panel input:disabled,html[data-theme="dark"] .modal-panel select:disabled,html[data-theme="dark"] .modal-panel textarea:disabled{background:#11141d!important;color:#7f8798!important;border-color:#303446!important;opacity:1!important}
html[data-theme="dark"] .account-page{--account-bg:#0d101b;--account-border:#2d3242;--account-muted:#9ca7bd;background:#0d101b!important;color:#f5f3ff!important}html[data-theme="dark"] .account-topbar,html[data-theme="dark"] .billing-topbar{background:#111522!important;border-color:#2d3242!important}html[data-theme="dark"] .account-card,html[data-theme="dark"] .account-modal-card,html[data-theme="dark"] .billing-summary-grid article,html[data-theme="dark"] .billing-plan-card,html[data-theme="dark"] .billing-pack-card,html[data-theme="dark"] .billing-history{background:#171a26!important;border-color:#303446!important;color:#f5f3ff!important}html[data-theme="dark"] .account-company-list article,html[data-theme="dark"] .account-subscription div,html[data-theme="dark"] .account-meta{border-color:#303446!important}html[data-theme="dark"] .account-danger{background:#1d171d!important;border-color:#5d2d3a!important}html[data-theme="dark"] .account-danger>p{color:#d9a0ad!important}
html[data-theme="dark"] .billing-page{background:#0d101b!important;color:#f5f3ff!important}html[data-theme="dark"] .billing-plan-card.is-featured,html[data-theme="dark"] .billing-pack-card.is-featured{border-color:#6C20FF!important}html[data-theme="dark"] .billing-notice{background:#17142a!important;border-color:#4e3384!important;color:#d9d2ef!important}html[data-theme="dark"] .billing-notice p,html[data-theme="dark"] .billing-summary-grid span,html[data-theme="dark"] .billing-price span,html[data-theme="dark"] .billing-pack-card p,html[data-theme="dark"] .billing-table-wrap th{color:#9ca7bd!important}html[data-theme="dark"] .billing-table-wrap th,html[data-theme="dark"] .billing-table-wrap td{border-color:#303446!important}


/* =========================================================
   DARK THEME FINAL POLISH — 2026-09-07
   Keep dashboard neutral; use the same surface palette as
   department preview cards and remove legacy light buttons.
   ========================================================= */
html[data-theme="dark"] body{
  background:var(--bg)!important;
}
html[data-theme="dark"] .topbar{
  background:var(--panel)!important;
  border-bottom-color:var(--border)!important;
}
html[data-theme="dark"] .topbar .week-selector,
html[data-theme="dark"] .topbar .dept-pill,
html[data-theme="dark"] .topbar .btn-ghost,
html[data-theme="dark"] .topbar .icon-btn,
html[data-theme="dark"] .topbar .theme-toggle{
  background:#202330!important;
  color:#d7d9e4!important;
  border-color:var(--border)!important;
}
html[data-theme="dark"] .topbar .btn-ghost:hover,
html[data-theme="dark"] .topbar .icon-btn:hover,
html[data-theme="dark"] .topbar .theme-toggle:hover{
  background:#2b2e3d!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .topbar .week-label,
html[data-theme="dark"] .topbar .brand-name,
html[data-theme="dark"] .topbar .dept-pill strong{color:var(--text)!important}
html[data-theme="dark"] .topbar .brand-sub,
html[data-theme="dark"] .topbar .dept-pill{color:var(--muted)!important}

/* Every non-primary interactive control stays on a dark surface. */
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-solid),
html[data-theme="dark"] button.btn-ghost,
html[data-theme="dark"] .billing-page .btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-solid),
html[data-theme="dark"] .account-page .btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-solid){
  background:#222532!important;
  color:#d7d9e4!important;
  border-color:var(--border)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-solid):hover:not(:disabled),
html[data-theme="dark"] button.btn-ghost:hover:not(:disabled){
  background:#2b2e3d!important;
  color:var(--text)!important;
  border-color:#44495a!important;
}
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] button:disabled{
  background:#1c1f2a!important;
  color:#717889!important;
  border-color:#303446!important;
  opacity:1!important;
}

/* Billing: legacy literal text colors were still light-theme values. */
html[data-theme="dark"] .billing-plan-card h3,
html[data-theme="dark"] .billing-price strong,
html[data-theme="dark"] .billing-pack-card>div:first-child>strong,
html[data-theme="dark"] .billing-pack-card>div:last-child>strong,
html[data-theme="dark"] .billing-summary-grid strong,
html[data-theme="dark"] .billing-section-head h2,
html[data-theme="dark"] .billing-history strong{
  color:var(--text)!important;
}
html[data-theme="dark"] .billing-pack-card>div:last-child{
  border-top-color:var(--border)!important;
}
html[data-theme="dark"] .billing-pack-card.is-featured:before{
  background:var(--blue-soft)!important;
  color:#cbb7ff!important;
  border:1px solid #4c4375!important;
}
html[data-theme="dark"] .billing-pack-card:hover{
  border-color:#4b5060!important;
  box-shadow:0 16px 38px rgba(0,0,0,.18)!important;
}


/* ===== Quorly dark polish v4 ===== */
html[data-theme="dark"]{
  --primary:#6C20FF;
  --primary-dark:#5917d8;
  --primary-light:#8f5cff;
  --primary-soft:#241a42;
}

/* Login / registro: eliminar restos azules */
html[data-theme="dark"] .auth-submit{
  background:linear-gradient(135deg,#6C20FF,#861cff)!important;
  color:#fff!important;
  border-color:#6C20FF!important;
  box-shadow:0 5px 14px rgba(108,32,255,.28)!important;
}
html[data-theme="dark"] .auth-submit:hover{
  background:#5917d8!important;
  box-shadow:0 6px 18px rgba(108,32,255,.34)!important;
}
html[data-theme="dark"] .link-button,
html[data-theme="dark"] .mobile-switch button,
html[data-theme="dark"] #forgotPasswordBtn{
  color:#9b62ff!important;
}
html[data-theme="dark"] .password-toggle{
  color:#a970ff!important;
  border-color:#4a356d!important;
  background:#211934!important;
}
html[data-theme="dark"] .checkbox input{accent-color:#6C20FF!important}

/* Dashboard: dropdown exactamente en la familia de superficies del panel lateral */
html[data-theme="dark"] .user-menu-dropdown{
  background:var(--panel)!important;
  border-color:var(--border)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.34)!important;
}
html[data-theme="dark"] .user-menu-item{color:var(--text)!important}
html[data-theme="dark"] .user-menu-item:hover{
  background:#1a1f2d!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .user-menu-separator{background:var(--border)!important}

/* Billing: una sola familia de grises y acentos morados */
html[data-theme="dark"] .billing-page{
  --billing-surface:#171a26;
  --billing-surface-hover:#1b1f2c;
  --billing-border:#303446;
}
html[data-theme="dark"] .billing-summary-grid article,
html[data-theme="dark"] .billing-plan-card,
html[data-theme="dark"] .billing-pack-card,
html[data-theme="dark"] .billing-history,
html[data-theme="dark"] .billing-balance,
html[data-theme="dark"] .billing-notice{
  background:var(--billing-surface)!important;
  border-color:var(--billing-border)!important;
  color:#f5f3ff!important;
}
html[data-theme="dark"] .billing-plan-card:hover,
html[data-theme="dark"] .billing-pack-card:hover{
  background:var(--billing-surface-hover)!important;
  border-color:#4a4f62!important;
}
html[data-theme="dark"] .billing-plan-card.is-featured,
html[data-theme="dark"] .billing-pack-card.is-featured{
  border-color:#6C20FF!important;
  box-shadow:0 16px 40px rgba(108,32,255,.12)!important;
}
html[data-theme="dark"] .billing-eyebrow,
html[data-theme="dark"] .billing-plan-code,
html[data-theme="dark"] .billing-pack-card>div:first-child>span{
  color:#8f5cff!important;
}
html[data-theme="dark"] .billing-pack-card.is-featured:before{
  background:#261b43!important;
  color:#b893ff!important;
  border:1px solid #51318a!important;
}
html[data-theme="dark"] .billing-plan-card .btn,
html[data-theme="dark"] .billing-pack-card .btn{
  background:#221f2c!important;
  color:#ececf4!important;
  border-color:#3b4052!important;
}
html[data-theme="dark"] .billing-plan-card .btn:not(:disabled):hover,
html[data-theme="dark"] .billing-pack-card .btn:not(:disabled):hover{
  background:#2a2537!important;
  border-color:#6C20FF!important;
}
html[data-theme="dark"] .billing-plan-card .btn.btn-primary,
html[data-theme="dark"] .billing-plan-card .btn-primary,
html[data-theme="dark"] .billing-pack-card .btn.btn-primary,
html[data-theme="dark"] .billing-pack-card .btn-primary{
  background:#6C20FF!important;
  color:#fff!important;
  border-color:#6C20FF!important;
}
html[data-theme="dark"] .billing-plan-card .btn:disabled,
html[data-theme="dark"] .billing-pack-card .btn:disabled{
  background:#24242b!important;
  color:#777d8b!important;
  border-color:#343746!important;
  opacity:1!important;
}

/* =========================================================
   UI POLISH · 2026-09-08
   Targeted visual adjustments requested after dark-mode pass.
   ========================================================= */

/* Billing: remove only the large plan hero bubble; keep credit balance card. */
html[data-theme="dark"] .billing-hero{
  padding:8px 0 2px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .billing-hero>div:first-child{
  padding:8px 0!important;
}
html[data-theme="dark"] .billing-balance{
  background:var(--billing-surface,#171a26)!important;
  border:1px solid var(--billing-border,#303446)!important;
  border-radius:18px!important;
}

/* Manager auth: same purple ambient background family as Employee auth. */
html[data-theme="dark"] body:not(.app-page):has(.auth-shell){
  background:
    radial-gradient(circle at 8% 12%,rgba(108,32,255,.12),transparent 25%),
    radial-gradient(circle at 92% 86%,rgba(108,32,255,.10),transparent 28%),
    #0d101b!important;
}
html[data-theme="dark"] .auth-card .brand-text strong,
html[data-theme="dark"] .auth-card .visual-panel .brand strong{
  color:#fff!important;
}
html[data-theme="dark"] .auth-card .brand-text small{
  color:rgba(255,255,255,.68)!important;
}

/* Every dashboard modal gets one very subtle, fine outline. */
html[data-theme="dark"] body:not(.billing-page):not(.account-page) .modal-panel,
html[data-theme="dark"] body:not(.billing-page):not(.account-page) .employee-modal-panel{
  border:1px solid rgba(255,255,255,.075)!important;
}

/* Management team: soften the inner bubbles and avoid strong framed blocks. */
html[data-theme="dark"] .organization-summary>div,
html[data-theme="dark"] .organization-toolbar,
html[data-theme="dark"] .organization-section,
html[data-theme="dark"] .organization-row{
  border-color:rgba(255,255,255,.065)!important;
}
html[data-theme="dark"] .organization-section-head span{
  background:#1d202c!important;
  color:var(--muted)!important;
}

/* Department selector: active department is a complete bubble, not a flat hover strip. */
html[data-theme="dark"] .department-selector-item.is-active,
html[data-theme="dark"] .department-selector-item.is-active:hover{
  margin:5px 0!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:12px!important;
  background:#151721!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .department-selector-item.is-active .department-selector-main{
  border-radius:12px!important;
}

/* Department delete uses the exact visual language of "Eliminar asignación". */
html[data-theme="dark"] .department-selector-delete{
  border:1px solid #5d2d3a!important;
  color:#f87171!important;
  background:#2a191c!important;
  border-radius:8px!important;
}
html[data-theme="dark"] .department-selector-delete:hover{
  border-color:#7f3343!important;
  color:#fecaca!important;
  background:#351b20!important;
}

/* Keep every "Borrar" control visually identical to the existing .btn-danger / Eliminar asignación button. */
html[data-theme="dark"] .department-selector-delete.btn-danger{
  background:#fee2e2!important;
  color:var(--red)!important;
  border-color:#fecaca!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .department-selector-delete.btn-danger:hover{
  background:#fecaca!important;
  color:var(--red)!important;
  border-color:#fecaca!important;
}

/* =========================================================
   Dashboard onboarding tour — force the Driver.js chrome to
   use Quorly's dark surfaces. This stylesheet is loaded after
   driver.css, so the tour cannot fall back to its light theme.
   ========================================================= */
html[data-theme="dark"] .driver-popover.quorly-tour-popover{
  background:#191b26!important;
  color:#ececf4!important;
  border:1px solid #2b2e3d!important;
  box-shadow:0 24px 70px rgba(0,0,0,.52)!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-title{
  color:#f5f3ff!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-description,
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-progress-text{
  color:#9ca3b5!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-footer-btn{
  background:#222532!important;
  color:#d7d9e4!important;
  border:1px solid #343746!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-footer-btn:hover{
  background:#2b2e3d!important;
  color:#f5f3ff!important;
  border-color:#44495a!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-next-btn,
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-done-btn{
  background:#6C20FF!important;
  color:#fff!important;
  border-color:#6C20FF!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-next-btn:hover,
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-done-btn:hover{
  background:#5917d8!important;
  border-color:#5917d8!important;
  color:#fff!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-close-btn{
  background:transparent!important;
  color:#9ca3b5!important;
  border-color:transparent!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-close-btn:hover{
  color:#f5f3ff!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow{
  border-left-color:#191b26!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow{
  border-right-color:#191b26!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow{
  border-top-color:#191b26!important;
}
html[data-theme="dark"] .driver-popover.quorly-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow{
  border-bottom-color:#191b26!important;
}
