/* Shared theme tokens. Brand red/navy buttons remain untouched. */
:root{color-scheme:light;--mode-page:#f3f5f9;--mode-surface:#fff;--mode-surface-alt:#f8f9fc;--mode-text:#17233b;--mode-muted:#68758b;--mode-border:#e2e7ef;--mode-shadow:0 4px 16px rgba(22,34,55,.055)}
:root[data-theme="dark"]{color-scheme:dark;--mode-page:#111318;--mode-surface:#1b1e25;--mode-surface-alt:#252a33;--mode-text:#f3f4f6;--mode-muted:#b2bac8;--mode-border:#383e49;--mode-shadow:0 8px 24px rgba(0,0,0,.18)}
html{background-color:var(--mode-page)}body{background-color:var(--mode-page);color:var(--mode-text)}
/* Fast theme transition: animate only visible UI surfaces and common text controls.
   Avoid a universal body * selector: cards.php has a larger table/modal DOM and
   transitioning every descendant + pseudo-element can delay the repaint. */
html.theme-switching,
html.theme-switching body,
html.theme-switching .top-header,
html.theme-switching #sidebar,
html.theme-switching .sidebar-brand-logo,
html.theme-switching .sidebar-identity,
html.theme-switching .sidebar-footer,
html.theme-switching .nav-item,
html.theme-switching .nav-subitem,
html.theme-switching .submenu,
html.theme-switching main,
html.theme-switching main > *,
html.theme-switching .main-content,
html.theme-switching .content-wrapper,
html.theme-switching .page-content,
html.theme-switching .adv-dashboard .form-card.dash-main-container,
html.theme-switching .adv-dashboard .dash-main-container,
html.theme-switching .page-header,
html.theme-switching .card,
html.theme-switching .panel,
html.theme-switching .content-card,
html.theme-switching .table-container,
html.theme-switching .table-responsive,
html.theme-switching .form-container,
html.theme-switching .stat-card,
html.theme-switching .dashboard-card,
html.theme-switching table,
html.theme-switching table thead,
html.theme-switching table th,
html.theme-switching table td,
html.theme-switching table tbody tr,
html.theme-switching input,
html.theme-switching textarea,
html.theme-switching select,
html.theme-switching h1,
html.theme-switching h2,
html.theme-switching h3,
html.theme-switching h4,
html.theme-switching p,
html.theme-switching label,
html.theme-switching .text-muted,
html.theme-switching .text-secondary,
html.theme-switching .page-title,
html.theme-switching .desktop-greeting-title,
html.theme-switching .desktop-greeting-message,
html.theme-switching .profile-menu,
html.theme-switching .dropdown-menu,
html.theme-switching .modal-content,
html.theme-switching .card-view-dialog,
html.theme-switching .card-view-header,
html.theme-switching .card-details-body,
html.theme-switching .card-images-modal-body,
html.theme-switching .card-assign-body,
html.theme-switching .form-alert,
html.theme-switching .flash-message,
html.theme-switching .cards-list-page .form-card,
html.theme-switching .cards-list-page .cards-filter-label,
html.theme-switching .cards-list-page .cards-status-filter,
html.theme-switching .cards-list-page .cards-date-filter,
html.theme-switching .cards-list-page .cards-date-clear,
html.theme-switching .cards-list-page .cards-table-wrap,
html.theme-switching .cards-list-page .cards-table,
html.theme-switching .cards-list-page .card-status-action,
html.theme-switching .cards-list-page .admin-edit-action,
html.theme-switching .cards-list-page .card-share-action,
html.theme-switching .cards-list-page .card-assign-action,
html.theme-switching .cards-list-page .card-info-action,
html.theme-switching .cards-list-page .card-youtube-action,
html.theme-switching .cards-list-page .card-created-by-badge,
html.theme-switching .cards-list-page .card-assigned-client-badge,
html.theme-switching .cards-list-page .cards-no-results,
html.theme-switching .cards-list-page .cards-pagination-button,
html.theme-switching .theme-toggle,
html.theme-switching .create-card-page .create-card-section-title {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke !important;
  transition-duration: 0ms !important;
  transition-timing-function: linear !important;
}

/* Dashboard outer container must repaint in the same theme-switch frame. */
html.theme-switching .adv-dashboard .form-card.dash-main-container,
html.theme-switching .adv-dashboard .dash-main-container {
  transition: none !important;
  animation: none !important;
  background-color: var(--surface-card, var(--card-bg, var(--mode-surface))) !important;
  color: var(--mode-text) !important;
}
\n@media (prefers-reduced-motion: reduce) {
  html.theme-switching,
  html.theme-switching body,
  html.theme-switching .top-header,
  html.theme-switching #sidebar,
  html.theme-switching .nav-item,
  html.theme-switching .nav-subitem,
  html.theme-switching main,
  html.theme-switching main > *,
  html.theme-switching .card,
  html.theme-switching .panel,
  html.theme-switching .content-card,
  html.theme-switching .table-container,
  html.theme-switching table th,
  html.theme-switching table td,
  html.theme-switching input,
  html.theme-switching textarea,
  html.theme-switching select,
  html.theme-switching .card-view-dialog,
  html.theme-switching .theme-toggle {
    transition-duration: 0s !important;
  }
}
/* Light mode: soften the page canvas and turn dark panels into white surfaces. */
:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) body main,
:root:not([data-theme="dark"]) body .main-content,
:root:not([data-theme="dark"]) body .content-wrapper,
:root:not([data-theme="dark"]) body .page-content{background-color:var(--mode-page);color:var(--mode-text)}
:root:not([data-theme="dark"]) .top-header,:root:not([data-theme="dark"]) .sidebar,:root:not([data-theme="dark"]) aside,:root:not([data-theme="dark"]) .profile-menu,:root:not([data-theme="dark"]) .submenu,:root:not([data-theme="dark"]) .modal-content,:root:not([data-theme="dark"]) .dropdown-menu,:root:not([data-theme="dark"]) .card,:root:not([data-theme="dark"]) .panel,:root:not([data-theme="dark"]) .content-card,:root:not([data-theme="dark"]) .table-container,:root:not([data-theme="dark"]) .form-container,:root:not([data-theme="dark"]) .stat-card,:root:not([data-theme="dark"]) .dashboard-card{background-color:var(--mode-surface);color:var(--mode-text);border-color:var(--mode-border);box-shadow:var(--mode-shadow)}
:root:not([data-theme="dark"]) h1,:root:not([data-theme="dark"]) h2,:root:not([data-theme="dark"]) h3,:root:not([data-theme="dark"]) h4,:root:not([data-theme="dark"]) .page-title,:root:not([data-theme="dark"]) .desktop-greeting-title{color:#64748b}
:root:not([data-theme="dark"]) p,:root:not([data-theme="dark"]) label,:root:not([data-theme="dark"]) .nav-item,:root:not([data-theme="dark"]) .nav-subitem,:root:not([data-theme="dark"]) td,:root:not([data-theme="dark"]) th{color:var(--mode-text)}
:root:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),:root:not([data-theme="dark"]) textarea,:root:not([data-theme="dark"]) select{background-color:#f8fafc;color:#17233b;border-color:#dce2eb}
:root:not([data-theme="dark"]) input::placeholder,:root:not([data-theme="dark"]) textarea::placeholder{color:#8994a7}
:root:not([data-theme="dark"]) table th{background-color:#f4f6fa;color:#24334d}:root:not([data-theme="dark"]) table td{border-color:var(--mode-border);color:var(--mode-text)}
:root:not([data-theme="dark"]) .desktop-greeting-message,:root:not([data-theme="dark"]) .text-muted,:root:not([data-theme="dark"]) .text-secondary{color:var(--mode-muted)}
/* Dark mode retains the existing dark appearance. */
:root[data-theme="dark"] .top-header,:root[data-theme="dark"] .sidebar,:root[data-theme="dark"] aside,:root[data-theme="dark"] .profile-menu,:root[data-theme="dark"] .submenu,:root[data-theme="dark"] .modal-content,:root[data-theme="dark"] .dropdown-menu{background-color:var(--mode-surface);color:var(--mode-text);border-color:var(--mode-border)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .panel,:root[data-theme="dark"] .content-card,:root[data-theme="dark"] .table-container,:root[data-theme="dark"] .form-container,:root[data-theme="dark"] .stat-card,:root[data-theme="dark"] .dashboard-card{background-color:var(--mode-surface);color:var(--mode-text);border-color:var(--mode-border)}
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),:root[data-theme="dark"] textarea,:root[data-theme="dark"] select{background-color:#292e38;color:#f3f4f6;border-color:#454c59}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#a4adbc}
:root[data-theme="dark"] table th{background-color:#242933;color:#f3f4f6}:root[data-theme="dark"] table td{border-color:var(--mode-border);color:var(--mode-text)}
:root[data-theme="dark"] .desktop-greeting-message,:root[data-theme="dark"] .text-muted,:root[data-theme="dark"] .text-secondary{color:var(--mode-muted)}
.theme-toggle{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:42px;padding:0 12px;border:1px solid var(--mode-border);border-radius:9px;background:var(--mode-surface);color:var(--mode-text);cursor:pointer;flex-shrink:0;transition:background 0s,border-color 0s,transform 0s}
.theme-toggle:hover{border-color:var(--primary,#d7263d);transform:translateY(-1px)}.theme-toggle i{font-size:16px;width:20px;text-align:center}.theme-toggle-label{font-size:12px;font-weight:600}
.sidebar-theme-toggle{margin:0 0 8px;width:100%}.sidebar.collapsed .sidebar-theme-toggle{justify-content:center;padding:0}.sidebar.collapsed .sidebar-theme-toggle .theme-toggle-label{display:none}
@media(max-width:640px){.sidebar-theme-toggle{min-height:42px}}

/* Sidebar theme toggle: stack above Logout while keeping Logout at the bottom. */
#sidebar > .sidebar-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: .4rem !important;
  height: auto !important;
  min-height: 6.5rem !important;
  padding: .45rem .65rem .55rem !important;
  box-sizing: border-box !important;
}
#sidebar > .sidebar-footer > .sidebar-theme-toggle {
  order: 1 !important;
  display: flex !important;
  flex: 0 0 34px !important;
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#sidebar > .sidebar-footer > [data-title="Logout"] {
  order: 2 !important;
  display: flex !important;
  flex: 0 0 34px !important;
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 767px) {
  #sidebar > .sidebar-footer {
    min-height: 6.8rem !important;
    padding: .45rem .65rem .55rem !important;
  }
  #sidebar > .sidebar-footer > .sidebar-theme-toggle,
  #sidebar > .sidebar-footer > [data-title="Logout"] {
    flex-basis: 38px !important;
    min-height: 38px !important;
    height: 38px !important;
  }
}

/* Sidebar refinements requested: dark submenu should blend into the sidebar,
   and Light Mode Logout should use a solid red button with white text. */
:root[data-theme="dark"] #sidebar .submenu {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #sidebar > .sidebar-footer > a[data-title="Logout"] {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  background-image: none !important;
  border: 1px solid #dc2626 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #sidebar > .sidebar-footer > a[data-title="Logout"] i,
:root[data-theme="light"] #sidebar > .sidebar-footer > a[data-title="Logout"] span {
  color: #ffffff !important;
}
:root[data-theme="light"] #sidebar > .sidebar-footer > a[data-title="Logout"]:hover {
  background: #b91c1c !important;
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

/* Light Mode flash messages: soft, clean SaaS colors (no gradients). */
:root[data-theme="light"] .form-alert.form-alert-success,
:root[data-theme="light"] .flash-message.success,
:root[data-theme="light"] main.card .content > .flash {
  background: #eaf7ef !important;
  background-color: #eaf7ef !important;
  border: 1px solid #c5e5d0 !important;
  color: #215e3b !important;
  box-shadow: 0 2px 8px rgba(33, 94, 59, .06) !important;
}
:root[data-theme="light"] .form-alert.form-alert-error,
:root[data-theme="light"] .flash-message.error,
:root[data-theme="light"] .login-error,
:root[data-theme="light"] main.card .content > .error {
  background: #fff0f0 !important;
  background-color: #fff0f0 !important;
  border: 1px solid #f1caca !important;
  color: #8a3030 !important;
  box-shadow: 0 2px 8px rgba(138, 48, 48, .06) !important;
}
:root[data-theme="light"] .form-alert.form-alert-success *,
:root[data-theme="light"] .flash-message.success *,
:root[data-theme="light"] main.card .content > .flash *,
:root[data-theme="light"] .form-alert.form-alert-error *,
:root[data-theme="light"] .flash-message.error *,
:root[data-theme="light"] .login-error *,
:root[data-theme="light"] main.card .content > .error * {
  color: inherit !important;
}
:root[data-theme="light"] .form-alert.form-alert-success > i,
:root[data-theme="light"] .flash-message.success > i {
  color: #23834d !important;
}
:root[data-theme="light"] .form-alert.form-alert-error > i,
:root[data-theme="light"] .flash-message.error > i,
:root[data-theme="light"] .login-error > i {
  color: #c04444 !important;
}


/* Company-name availability states: accessible soft status chips in both themes. */
:root[data-theme="light"] .company-name-status-available {
  color: #17663a !important;
  background: #eaf7ef !important;
  background-color: #eaf7ef !important;
  border-color: #bfe4cc !important;
  box-shadow: 0 1px 2px rgba(23,102,58,.05) !important;
}
:root[data-theme="light"] .company-name-status-available i { color: #168046 !important; }
:root[data-theme="light"] .company-name-status-error {
  color: #a12e3a !important;
  background: #fff0f1 !important;
  background-color: #fff0f1 !important;
  border-color: #f1c6cc !important;
  box-shadow: 0 1px 2px rgba(161,46,58,.05) !important;
}
:root[data-theme="light"] .company-name-status-error i { color: #cf3548 !important; }
:root[data-theme="light"] .company-name-status-checking {
  color: #475569 !important;
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-color: #dbe3ed !important;
}
:root[data-theme="light"] .company-name-status-checking i { color: #64748b !important; }

:root[data-theme="dark"] .company-name-status-available {
  color: #a7f3c4 !important;
  background: #172a21 !important;
  background-color: #172a21 !important;
  border-color: #2e6242 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
}
:root[data-theme="dark"] .company-name-status-available i { color: #4ade80 !important; }
:root[data-theme="dark"] .company-name-status-error {
  color: #fda4af !important;
  background: #311f23 !important;
  background-color: #311f23 !important;
  border-color: #743944 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
}
:root[data-theme="dark"] .company-name-status-error i { color: #fb7185 !important; }
:root[data-theme="dark"] .company-name-status-checking {
  color: #cbd5e1 !important;
  background: #252a33 !important;
  background-color: #252a33 !important;
  border-color: #454c59 !important;
}
:root[data-theme="dark"] .company-name-status-checking i { color: #a4adbc !important; }


/* Smooth theme switching: keep color/surface transitions armed before the user clicks.
   The theme attribute changes synchronously; these transitions animate from the current paint
   without a wait-state or delayed class activation. */
html,
body,
.top-header,
#sidebar,
.sidebar-brand-logo,
.sidebar-identity,
.sidebar-footer,
.nav-item,
.nav-subitem,
.submenu,
.main-wrapper,
main,
.main-content,
.content-wrapper,
.page-content,
.page-header,
.card,
.panel,
.content-card,
.table-container,
.table-responsive,
.form-container,
.stat-card,
.dashboard-card,
table,
table thead,
table th,
table td,
table tbody tr,
input,
textarea,
select,
h1,
h2,
h3,
h4,
p,
label,
.text-muted,
.text-secondary,
.page-title,
.desktop-greeting-title,
.desktop-greeting-message,
.profile-menu,
.dropdown-menu,
.modal-content,
.card-view-dialog,
.card-view-header,
.card-details-body,
.card-images-modal-body,
.card-assign-body,
.form-alert,
.flash-message,
.theme-toggle {
  transition-property: background, background-color, color, border-color, box-shadow, fill, stroke, transform;
  transition-duration: 80ms;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  html, body, .top-header, #sidebar, .nav-item, .nav-subitem, main,
  .card, .panel, .content-card, .table-container, table th, table td,
  input, textarea, select, .card-view-dialog, .theme-toggle {
    transition-duration: 0.01ms !important;
  }
}

/* Fresh cache-busted fast theme override (v6). */
html.theme-switching,html.theme-switching body,html.theme-switching .adv-dashboard,html.theme-switching .adv-dashboard *,html.theme-switching .card,html.theme-switching .panel,html.theme-switching .content-card,html.theme-switching .stat-card,html.theme-switching .dashboard-card{transition-duration:70ms!important;transition-delay:0ms!important;animation-duration:70ms!important;animation-delay:0ms!important}

/* Instant theme switch: disable every transition/animation while the theme token changes.
   The switching class is kept for 100ms so browsers paint the new palette before it is removed. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}


/* Instant page-canvas switching: update the whole page background in the same paint
   as the rounded dashboard container and metric cards. */
html.theme-switching,
html.theme-switching body,
html.theme-switching body .app-shell,
html.theme-switching body .main-wrapper,
html.theme-switching body #mainContent,
html.theme-switching body .main-content,
html.theme-switching body .content-wrapper,
html.theme-switching body .page-content,
html.theme-switching body main,
html.theme-switching body main > .form-card,
html.theme-switching body .page-content > .form-card,
html.theme-switching body .adv-dashboard,
html.theme-switching body .adv-dashboard .form-card.dash-main-container {
  transition: none !important;
  animation: none !important;
  background-image: none !important;
  background-color: var(--mode-page) !important;
}
html.theme-switching body .adv-dashboard .form-card.dash-main-container {
  background-color: var(--surface-card, var(--card-bg, var(--mode-surface))) !important;
}


/* Dashboard date-range filter: switch its surfaces instantly with the global theme */
.adv-dashboard .dash-filter,
.adv-dashboard .dash-filter .dash-field,
.adv-dashboard .dash-filter label {
  background-color: var(--mode-surface) !important;
  color: var(--mode-text) !important;
  border-color: var(--mode-border) !important;
}
.adv-dashboard .dash-filter input,
.adv-dashboard .dash-filter select {
  background-color: var(--mode-surface-alt) !important;
  color: var(--mode-text) !important;
  border-color: var(--mode-border) !important;
  color-scheme: light;
}
:root[data-theme="dark"] .adv-dashboard .dash-filter input,
:root[data-theme="dark"] .adv-dashboard .dash-filter select {
  color-scheme: dark;
}
html.theme-switching .adv-dashboard .dash-filter,
html.theme-switching .adv-dashboard .dash-filter *,
html.theme-switching .adv-dashboard .dash-filter input,
html.theme-switching .adv-dashboard .dash-filter select,
html.theme-switching .adv-dashboard .dash-filter button {
  transition: none !important;
  animation: none !important;
  transition-duration: 0ms !important;
}

/* Calendar/date picker controls: transparent background in both themes */
.adv-dashboard .dash-filter input[type="date"],
.adv-dashboard .dash-filter input[type="datetime-local"],
.adv-dashboard .dash-filter input[type="month"],
.adv-dashboard .dash-filter input[type="time"]{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] .adv-dashboard .dash-filter input[type="date"],
:root[data-theme="dark"] .adv-dashboard .dash-filter input[type="datetime-local"],
:root[data-theme="dark"] .adv-dashboard .dash-filter input[type="month"],
:root[data-theme="dark"] .adv-dashboard .dash-filter input[type="time"],
:root:not([data-theme="dark"]) .adv-dashboard .dash-filter input[type="date"],
:root:not([data-theme="dark"]) .adv-dashboard .dash-filter input[type="datetime-local"],
:root:not([data-theme="dark"]) .adv-dashboard .dash-filter input[type="month"],
:root:not([data-theme="dark"]) .adv-dashboard .dash-filter input[type="time"]{
  background:transparent!important;
  background-color:transparent!important;
}

/* Clean date-range filter: remove the enclosing panel fill in both themes */
.adv-dashboard .dash-filter{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
.adv-dashboard .dash-filter .dash-field,
.adv-dashboard .dash-filter label{
  background:transparent!important;
  background-color:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.adv-dashboard .dash-filter input[type="date"]{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
html.theme-switching .adv-dashboard .dash-filter,
html.theme-switching .adv-dashboard .dash-filter *,
html.theme-switching .adv-dashboard .dash-filter input[type="date"]{
  transition:none!important;
  animation:none!important;
}