/* ============================================================
   stlweb.dev brand — ERPNext/Frappe v15
   Matches stlweb.dev light + dark palette exactly.
   Targets both CSS-variable-based and compiled-static rules.
   ============================================================ */

/* ── 1. Light theme CSS variables ───────────────────────── */
:root,
[data-theme="light"] {
  --bg-color:    #F7F6F3;
  --fg-color:    #FFFFFF;
  --subtle-fg:   #EFEDE7;
  --subtle-accent: #F5F3EF;
  --modal-bg:    #FFFFFF;
  --popover-bg:  #FFFFFF;
  --card-bg:     #FFFFFF;
  --navbar-bg:   #FFFFFF;
  --awesomebar-focus-bg: #FFFFFF;

  --primary:        #0052CC;
  --primary-color:  #0052CC;
  --btn-primary:    #0052CC;
  --border-primary: #0052CC;
  --brand-color:    #0052CC;

  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #0052CC;
  --blue-600: #0040A8;
  --blue-700: #003285;
  --blue-800: #002462;
  --blue-900: #00163F;

  --checkbox-gradient: linear-gradient(180deg, #0052CC -124.51%, #00A3FF 100%);
  --checkbox-focus-shadow: 0 0 0 2px rgba(0,82,204,0.35);
  --focus-default: 0 0 0 2px rgba(0,82,204,0.35);
  --highlight-shadow: 1px 1px 10px var(--blue-50), 0px 0px 4px var(--blue-400);
  --date-active-bg: #0052CC;
  --progress-bar-bg: #0052CC;
}

/* ── 2. Dark theme CSS variables (stlweb.dev dark palette) ── */
[data-theme="dark"] {
  --bg-color:    #0C0C0C;
  --fg-color:    #171717;
  --subtle-fg:   #1C1C1C;
  --subtle-accent: #222222;
  --modal-bg:    #171717;
  --popover-bg:  #1C1C1C;
  --card-bg:     #171717;
  --navbar-bg:   #111111;
  --awesomebar-focus-bg: #1C1C1C;

  --primary:        #3B82F6;
  --primary-color:  #3B82F6;
  --btn-primary:    #3B82F6;
  --border-primary: #3B82F6;
  --brand-color:    #3B82F6;

  --blue-50:  #1e3a5f;
  --blue-100: #1e40af;
  --blue-200: #1d4ed8;
  --blue-300: #2563eb;
  --blue-400: #3b82f6;
  --blue-500: #3b82f6;
  --blue-600: #60a5fa;
  --blue-700: #93c5fd;
  --blue-800: #bfdbfe;
  --blue-900: #dbeafe;

  --text-color:    #F0F0F0;
  --heading-color: #F0F0F0;
  --text-muted:    #8A909C;
  --text-light:    #9CA3AF;

  --border-color:      rgba(255,255,255,0.08);
  --dark-border-color: rgba(255,255,255,0.12);

  --checkbox-gradient: linear-gradient(180deg, #3B82F6 -124.51%, #60A5FA 100%);
  --checkbox-focus-shadow: 0 0 0 2px rgba(59,130,246,0.4);
  --focus-default: 0 0 0 2px rgba(59,130,246,0.4);
  --highlight-shadow: 1px 1px 10px rgba(59,130,246,0.2), 0px 0px 4px rgba(59,130,246,0.4);
  --date-active-bg: #3B82F6;
  --progress-bar-bg: #3B82F6;

  --scrollbar-thumb-color: #383838;
  --scrollbar-track-color: #1C1C1C;

  --sidebar-select-color: #1C1C1C;
  --timeline-badge-bg:    #1C1C1C;
  --skeleton-bg:          #1C1C1C;
  --highlight-color:      #222222;
  --placeholder-color:    #383838;
}

/* ── 3. Light page background ───────────────────────────── */
[data-theme="light"] body,
[data-theme="light"] .main-section,
[data-theme="light"] .page-body,
[data-theme="light"] .layout-main-section-wrapper,
[data-theme="light"] .desk-page,
[data-theme="light"] .page-container,
[data-theme="light"] html {
  background-color: #F7F6F3 !important;
}

/* ── 4. Dark page background ────────────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] .main-section,
[data-theme="dark"] .page-body,
[data-theme="dark"] .layout-main-section-wrapper,
[data-theme="dark"] .desk-page,
[data-theme="dark"] .page-container,
[data-theme="dark"] html {
  background-color: #0C0C0C !important;
}

/* ── 5. Light Navbar ────────────────────────────────────── */
[data-theme="light"] .navbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.04) !important;
}

/* ── 6. Dark Navbar ─────────────────────────────────────── */
[data-theme="dark"] .navbar {
  background: #111111 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ── 7. Logo sizing + currentColor text control ─────────── */
.navbar-home .app-logo,
.navbar-brand .app-logo {
  max-height: 28px;
  width: auto;
}
/* light theme: wordmark text = dark (default) */
[data-theme="light"] .navbar-home,
[data-theme="light"] .navbar-brand {
  color: #0C0C0C;
}
/* dark theme: wordmark text = near-white */
[data-theme="dark"] .navbar-home,
[data-theme="dark"] .navbar-brand {
  color: #F0F0F0;
}
/* web-page brand (no data-theme): always dark bg — white text */
.navbar .navbar-brand {
  color: #F0F0F0;
}

/* ── 7b. Web page (login/home) navbar — always dark ─────── */
.navbar.navbar-light,
.navbar-light {
  background: #111111 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-brand span {
  color: #D1D5DB !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: #60A5FA !important;
}
/* Web page navbar logo */
.navbar-light .navbar-brand img,
.navbar .navbar-brand img {
  max-height: 28px;
  width: auto;
}
/* Hamburger icon on mobile */
.navbar-light .navbar-toggler {
  border-color: rgba(255,255,255,0.2) !important;
}
.navbar-light .navbar-toggler .icon {
  stroke: #D1D5DB !important;
}

/* ── 7c. Web page footer — dark, compact ─────────────────── */
footer,
.web-footer,
.footer {
  background: #111111 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: #9CA3AF !important;
  min-height: 0 !important;
  padding: 0.75rem 0 !important;
}
footer a, .web-footer a, .footer a {
  color: #60A5FA !important;
}
footer a:hover, .web-footer a:hover, .footer a:hover {
  color: #93C5FD !important;
}
/* Suppress unused footer block */
.web-footer .footer-subscribe {
  display: none !important;
}

/* ── 7d. Web page navbar — compact, consistent height ─────── */
.navbar.navbar-light,
.navbar-light.navbar {
  min-height: 0 !important;
  padding: 0.5rem 1rem !important;
}
.navbar-light .navbar-brand img,
.navbar .navbar-brand img,
.navbar-home .app-logo,
.navbar-brand .app-logo {
  max-height: 28px !important;
  height: 28px !important;
  width: auto !important;
  display: inline-block !important;
}

/* ── 8. Light Primary buttons ───────────────────────────── */
[data-theme="light"] .btn-primary,
[data-theme="light"] div#driver-popover-item .driver-popover-footer button.driver-next-btn {
  background-color: #0052CC !important;
  border-color:     #0052CC !important;
  color: #fff !important;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] div#driver-popover-item .driver-popover-footer button.driver-next-btn:hover {
  background-color: #0040A8 !important;
  border-color:     #0040A8 !important;
}
[data-theme="light"] .btn-primary:focus,
[data-theme="light"] .btn-primary.focus {
  background-color: #0040A8 !important;
  border-color:     #0040A8 !important;
  box-shadow: 0 0 0 2px rgba(0,82,204,0.45) !important;
}
[data-theme="light"] .btn-primary:active,
[data-theme="light"] .btn-primary:not(:disabled):not(.disabled):active {
  background-color: #003285 !important;
  border-color:     #003285 !important;
}
[data-theme="light"] .btn-primary.disabled,
[data-theme="light"] .btn-primary:disabled {
  background-color: #0052CC !important;
  border-color:     #0052CC !important;
  opacity: 0.65;
}

/* ── 9. Dark Primary buttons ────────────────────────────── */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] div#driver-popover-item .driver-popover-footer button.driver-next-btn {
  background-color: #3B82F6 !important;
  border-color:     #3B82F6 !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] div#driver-popover-item .driver-popover-footer button.driver-next-btn:hover {
  background-color: #2563EB !important;
  border-color:     #2563EB !important;
}
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .btn-primary.focus {
  background-color: #2563EB !important;
  border-color:     #2563EB !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.45) !important;
}
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled):active {
  background-color: #1D4ED8 !important;
  border-color:     #1D4ED8 !important;
}
[data-theme="dark"] .btn-primary.disabled,
[data-theme="dark"] .btn-primary:disabled {
  background-color: #3B82F6 !important;
  border-color:     #3B82F6 !important;
  opacity: 0.65;
}

/* ── 10. Dark sidebar/card backgrounds ──────────────────── */
[data-theme="dark"] .layout-side-section,
[data-theme="dark"] .sidebar-menu {
  background-color: #111111 !important;
}

[data-theme="dark"] .frappe-card,
[data-theme="dark"] .card,
[data-theme="dark"] .widget,
[data-theme="dark"] .form-section,
[data-theme="dark"] .section-head,
[data-theme="dark"] .form-page {
  background-color: #171717 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── 11. Dark sidebar selection ─────────────────────────── */
[data-theme="dark"] .standard-sidebar-item.selected,
[data-theme="dark"] .standard-sidebar-item[data-selected="true"] {
  background: rgba(59,130,246,0.15) !important;
  border-radius: 6px;
}
[data-theme="dark"] .standard-sidebar-item.selected .sidebar-item-label,
[data-theme="dark"] .standard-sidebar-item[data-selected="true"] .sidebar-item-label {
  color: #60A5FA !important;
}
[data-theme="dark"] .standard-sidebar-item.selected .sidebar-item-icon svg use,
[data-theme="dark"] .standard-sidebar-item[data-selected="true"] .sidebar-item-icon svg use {
  stroke: #60A5FA !important;
}
[data-theme="dark"] .standard-sidebar-item:hover {
  background: rgba(59,130,246,0.08) !important;
}

/* ── 12. Light sidebar ──────────────────────────────────── */
[data-theme="light"] .layout-side-section,
[data-theme="light"] .sidebar-menu {
  background-color: #FFFFFF !important;
}
[data-theme="light"] .standard-sidebar-item.selected,
[data-theme="light"] .standard-sidebar-item[data-selected="true"] {
  background: rgba(0,82,204,0.08) !important;
  border-radius: 6px;
}
[data-theme="light"] .standard-sidebar-item.selected .sidebar-item-label,
[data-theme="light"] .standard-sidebar-item[data-selected="true"] .sidebar-item-label {
  color: #0052CC !important;
}
[data-theme="light"] .standard-sidebar-item.selected .sidebar-item-icon svg use,
[data-theme="light"] .standard-sidebar-item[data-selected="true"] .sidebar-item-icon svg use {
  stroke: #0052CC !important;
}
[data-theme="light"] .standard-sidebar-item:hover {
  background: rgba(0,82,204,0.05) !important;
}

/* ── 13. Links ──────────────────────────────────────────── */
[data-theme="light"] a { color: #0052CC !important; }
[data-theme="light"] a:hover { color: #0040A8 !important; }
[data-theme="dark"]  a { color: #60A5FA !important; }
[data-theme="dark"]  a:hover { color: #93C5FD !important; }

/* Fallback for web pages without data-theme */
a { color: #0052CC !important; }
a:hover { color: #0040A8 !important; }

/* ── 14. Tabs ───────────────────────────────────────────── */
[data-theme="light"] .nav-tabs .nav-link.active,
[data-theme="light"] .nav-tabs .nav-item.show .nav-link {
  color: #0052CC !important;
  border-bottom-color: #0052CC !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  color: #60A5FA !important;
  border-bottom-color: #60A5FA !important;
}

/* ── 15. Progress bars ──────────────────────────────────── */
[data-theme="light"] .progress-bar { background-color: #0052CC !important; }
[data-theme="dark"]  .progress-bar { background-color: #3B82F6 !important; }

/* ── 16. Form focus ─────────────────────────────────────── */
[data-theme="light"] .frappe-control.has-focus .control-input,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #0052CC !important;
  box-shadow: 0 0 0 2px rgba(0,82,204,0.15) !important;
}
[data-theme="dark"] .frappe-control.has-focus .control-input,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2) !important;
}

/* ── 17. Checkboxes ─────────────────────────────────────── */
[data-theme="light"] input[type="checkbox"]:checked { accent-color: #0052CC; }
[data-theme="dark"]  input[type="checkbox"]:checked { accent-color: #3B82F6; }

/* ── 18. Indicators / pills ─────────────────────────────── */
[data-theme="light"] .indicator-pill.blue,
[data-theme="light"] .indicator-pill[data-color="blue"] {
  background: rgba(0,82,204,0.10) !important;
  color: #0052CC !important;
}
[data-theme="light"] .indicator.blue::before { background: #0052CC !important; }
[data-theme="dark"] .indicator-pill.blue,
[data-theme="dark"] .indicator-pill[data-color="blue"] {
  background: rgba(59,130,246,0.15) !important;
  color: #60A5FA !important;
}
[data-theme="dark"] .indicator.blue::before { background: #3B82F6 !important; }

/* ── 19. Datepicker ─────────────────────────────────────── */
[data-theme="light"] .datepicker td.active,
[data-theme="light"] .datepicker td.active:hover {
  background: #0052CC !important;
  color: #fff !important;
}
[data-theme="dark"] .datepicker td.active,
[data-theme="dark"] .datepicker td.active:hover {
  background: #3B82F6 !important;
  color: #fff !important;
}

/* ── 20. Pagination ─────────────────────────────────────── */
[data-theme="light"] .pagination .page-item.active .page-link {
  background-color: #0052CC !important;
  border-color:     #0052CC !important;
}
[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: #3B82F6 !important;
  border-color:     #3B82F6 !important;
}

/* ── 21. Outline primary ────────────────────────────────── */
[data-theme="light"] .btn-outline-primary {
  color: #0052CC !important;
  border-color: #0052CC !important;
}
[data-theme="light"] .btn-outline-primary:hover {
  background-color: #0052CC !important;
  border-color:     #0052CC !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-outline-primary {
  color: #60A5FA !important;
  border-color: #3B82F6 !important;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background-color: #3B82F6 !important;
  border-color:     #3B82F6 !important;
  color: #fff !important;
}

/* ── 22. Splash screen ──────────────────────────────────── */
[data-theme="light"] .splash { background: #F7F6F3 !important; }
[data-theme="dark"]  .splash { background: #0C0C0C !important; }
.splash { background: #0C0C0C !important; }

/* ── 23. Web pages — always dark (office-only tool) ─────── */
/* Page background */
body,
.main-section,
.page-body,
.for-login,
.for-signup,
.for-forgot,
.for-update-password {
  background-color: #0C0C0C !important;
  color: #E5E7EB;
}
/* Login / web cards */
.page-card,
.login-content,
.page-card-head {
  background-color: #171717 !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #F0F0F0 !important;
}
/* Logo color in card head (currentColor SVG) */
.page-card-head {
  color: #F0F0F0 !important;
}
/* Form labels on web pages */
label,
.help-box,
.page-card p,
.login-content p {
  color: #9CA3AF !important;
}
/* Inputs */
input, textarea, select {
  background-color: #1C1C1C !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #F0F0F0 !important;
}
input::placeholder, textarea::placeholder {
  color: #6B7280 !important;
}
/* Primary button */
.btn-primary {
  background-color: #3B82F6 !important;
  border-color:     #3B82F6 !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: #2563EB !important;
  border-color:     #2563EB !important;
}
/* Links on web pages */
a { color: #60A5FA; }
a:hover { color: #93C5FD; }

/* ── 25. Bootstrap --primary variable ───────────────────── */
:root { --bs-primary: #0052CC; }
[data-theme="dark"] { --bs-primary: #3B82F6; }

/* ── 26. Text selection ─────────────────────────────────── */
[data-theme="light"] ::selection { background: rgba(0,82,204,0.15); }
[data-theme="dark"]  ::selection { background: rgba(59,130,246,0.25); }

/* ── 27. Module home card hover ─────────────────────────── */
[data-theme="light"] .widget.shortcut-widget-box:hover,
[data-theme="light"] .widget.links-widget-box:hover {
  border-color: rgba(0,82,204,0.30) !important;
  box-shadow: 0 0 0 1px rgba(0,82,204,0.15) !important;
}
[data-theme="dark"] .widget.shortcut-widget-box:hover,
[data-theme="dark"] .widget.links-widget-box:hover {
  border-color: rgba(59,130,246,0.30) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.15) !important;
}

/* ── 28. Breadcrumb links ───────────────────────────────── */
[data-theme="light"] #navbar-breadcrumbs a { color: #0052CC !important; }
[data-theme="dark"]  #navbar-breadcrumbs a { color: #60A5FA !important; }

/* ── 29. /apps switcher page ─────────────────────────────── */
/* Override the CSS variables apps.css uses — var() calls resolve dark automatically */
body[data-path="apps"] {
  --bg-light-gray: #0C0C0C;
  --gray-100:      #0C0C0C;
  --fg-color:      #111111;
  --gray-900:      #E5E7EB;
  --border-color:  rgba(255,255,255,0.12);
  --border-radius-md: 12px;
}
/* apps.css sets height:100vh on .container — fix all containers on this page */
body[data-path="apps"] .container { height: auto !important; }
/* Gap between navbar and content card */
body[data-path="apps"] > .container { padding-top: 3rem !important; padding-bottom: 3rem !important; }
/* Hide Frappe's empty footer skeleton */
body[data-path="apps"] .web-footer { display: none !important; }

/* ── Office footer ─────────────────────────────────────── */
.office-footer {
  background: #111111;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 3rem 0 1.5rem;
}
.office-footer .container { padding: 0 1.5rem !important; height: auto !important; }
.office-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.office-footer-logo {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none !important;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.office-footer-logo .logo-domain { color: #F0F0F0; }
.office-footer-logo .logo-tld    { color: #60A5FA; }
.office-footer-brand p {
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 260px;
  margin-top: 0.5rem;
}
.office-footer-col h3 {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin-bottom: 1rem;
}
.office-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.office-footer-links a {
  font-size: 0.875rem;
  color: #6B7280 !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
.office-footer-links a:hover { color: #D1D5DB !important; }
.office-footer-bottom {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.office-footer-legal {
  font-size: 0.78rem;
  color: #6B7280;
}
.office-footer-legal a { color: #6B7280 !important; text-decoration: none !important; }
.office-footer-legal a:hover { color: #9CA3AF !important; }
.office-footer-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.office-footer-badge {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: #6B7280;
}
.office-footer-badge.green {
  color: #10B981;
  border-color: rgba(16,185,129,0.25);
  background: rgba(16,185,129,0.08);
}
.office-footer-badge.accent {
  color: #60A5FA;
  border-color: rgba(96,165,250,0.25);
  background: rgba(96,165,250,0.08);
}
@media (max-width: 900px) {
  .office-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 575px) {
  .office-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .office-footer { padding: 2rem 0 1rem; }
}
/* App logo card (apps.css only sets size/border-radius, no bg/border) */
.app-logo {
  background-color: #1C1C1C !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.app-icon:hover .app-logo {
  border-color: rgba(59,130,246,0.45) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.18) !important;
}
.app-logo img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}
/* apps.css hardcodes background-color:#fff !important on .logout-btn;
   two-class selector (0,2,0) beats single-class (0,1,0) even with !important */
.apps-container .logout-btn {
  background-color: #1C1C1C !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #D1D5DB !important;
}
.apps-container .logout-btn:hover { background-color: #252525 !important; }
.apps-container .logout-btn svg   { stroke: #D1D5DB; }
.set-default { background-color: #3B82F6 !important; border-color: #3B82F6 !important; color: #fff !important; }

/* ── 30. Dark page head / awesomebar ────────────────────── */
[data-theme="dark"] .page-head,
[data-theme="dark"] .page-title,
[data-theme="dark"] .page-actions {
  background-color: #0C0C0C !important;
}
[data-theme="dark"] .awesomplete input,
[data-theme="dark"] .form-control {
  background-color: #1C1C1C !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #F0F0F0 !important;
}

/* ── 31. Dark workspace / home page ─────────────────────── */
[data-theme="dark"] .workspace-container,
[data-theme="dark"] .workspace-section,
[data-theme="dark"] .widget-group,
[data-theme="dark"] .widget-group-head,
[data-theme="dark"] .workspace-content {
  background-color: #0C0C0C !important;
}
[data-theme="dark"] .widget,
[data-theme="dark"] .shortcut-widget-box,
[data-theme="dark"] .links-widget-box,
[data-theme="dark"] .number-widget-box,
[data-theme="dark"] .chart-widget-box,
[data-theme="dark"] .onboarding-widget-box,
[data-theme="dark"] .quick-list-widget-box {
  background-color: #171717 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .widget .widget-head,
[data-theme="dark"] .widget .widget-title,
[data-theme="dark"] .widget h3,
[data-theme="dark"] .shortcut-widget-box .shortcut-name,
[data-theme="dark"] .links-widget-box .link-item,
[data-theme="dark"] .number-widget-box .number-card-title,
[data-theme="dark"] .number-widget-box .number,
[data-theme="dark"] .widget-body,
[data-theme="dark"] .widget-body * {
  color: #E5E7EB !important;
}
[data-theme="dark"] .link-item a,
[data-theme="dark"] .shortcut-widget-box a {
  color: #60A5FA !important;
}

/* ── 32. Dark desk text / form colors ───────────────────── */
[data-theme="dark"] .page-title .title-text,
[data-theme="dark"] .page-title .sub-title,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 {
  color: #F0F0F0 !important;
}
[data-theme="dark"] .text-muted,
[data-theme="dark"] .help-box,
[data-theme="dark"] small {
  color: #8A909C !important;
}
[data-theme="dark"] .frappe-card,
[data-theme="dark"] .card {
  color: #E5E7EB !important;
}
[data-theme="dark"] .list-row,
[data-theme="dark"] .list-row-container {
  background-color: #0C0C0C !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #E5E7EB !important;
}
[data-theme="dark"] .list-row:hover,
[data-theme="dark"] .list-row-container:hover {
  background-color: #171717 !important;
}

/* ── 33. Navbar logo + breadcrumb visibility ────────────── */
[data-theme="dark"] .navbar .navbar-brand,
[data-theme="dark"] .navbar .navbar-home {
  color: #F0F0F0 !important;
}
[data-theme="dark"] .navbar .navbar-brand img,
[data-theme="dark"] .navbar .app-logo {
  max-height: 28px;
  width: auto;
  display: inline-block !important;
  visibility: visible !important;
}
[data-theme="dark"] #navbar-breadcrumbs,
[data-theme="dark"] .navbar-breadcrumbs {
  display: flex !important;
  visibility: visible !important;
  color: #E5E7EB !important;
}
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] #navbar-breadcrumbs li,
[data-theme="dark"] #navbar-breadcrumbs span {
  color: #9CA3AF !important;
}
[data-theme="dark"] #navbar-breadcrumbs a,
[data-theme="dark"] .breadcrumb-item a {
  color: #60A5FA !important;
}

/* ── 34. Dark modal + dropdown ──────────────────────────── */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
  background-color: #171717 !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #E5E7EB !important;
}
[data-theme="dark"] .dropdown-menu {
  background-color: #1C1C1C !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] .dropdown-item {
  color: #E5E7EB !important;
}
[data-theme="dark"] .dropdown-item:hover {
  background-color: #252525 !important;
  color: #F0F0F0 !important;
}

/* ── 35. Table / report dark ────────────────────────────── */
[data-theme="dark"] .datatable,
[data-theme="dark"] .datatable .dt-cell,
[data-theme="dark"] .datatable .dt-header,
[data-theme="dark"] .datatable .dt-row {
  background-color: #0C0C0C !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #E5E7EB !important;
}
[data-theme="dark"] .datatable .dt-header .dt-cell {
  background-color: #111111 !important;
  color: #9CA3AF !important;
}

/* ── 36. My Account / me page — dark ────────────────────── */
.my-account-container {
  background-color: #0C0C0C !important;
  color: #E5E7EB !important;
}
.my-account-header {
  color: #F0F0F0 !important;
}
.account-info {
  background-color: #171717 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
}
.account-info .col {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 1rem 1.25rem !important;
}
.account-info .col:last-child { border-bottom: none !important; }
.my-account-name {
  color: #F0F0F0 !important;
  font-weight: 500;
}
.my-account-item {
  color: #E5E7EB !important;
  font-weight: 500;
}
.my-account-item-desc {
  color: #8A909C !important;
  font-size: 0.8125rem;
}
.my-account-item-link a {
  color: #60A5FA !important;
  text-decoration: none;
}
.my-account-item-link a:hover { color: #93C5FD !important; }

/* ── 37. Navbar user dropdown — user card at top ─────────── */
[data-theme="dark"] #toolbar-user .dropdown-item-user,
[data-theme="dark"] #toolbar-user .user-info,
[data-theme="dark"] #toolbar-user .navbar-user-card {
  background-color: #1C1C1C !important;
  color: #F0F0F0 !important;
}
[data-theme="dark"] #toolbar-user {
  background-color: #1C1C1C !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] #toolbar-user .dropdown-divider {
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── 38. Web page content area — always dark ────────────── */
.main-section,
section.main-section,
.web-page-content,
.page-content,
.section-padding {
  background-color: #0C0C0C !important;
  color: #E5E7EB;
}

/* ── 38b. Footer inner sections — hide when empty ────────── */
.footer-logo-extension,
.footer-links {
  display: none !important;
}
.footer-info .footer-col-left:empty,
.footer-info .footer-col-right:empty {
  display: none !important;
}
.footer-info .row:not(:has(*:not(:empty))) {
  display: none !important;
}

/* ── 39. Web page text / links ──────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: #F0F0F0; }
p { color: #E5E7EB; }

/* ── 40. Web page inputs (login/portal forms) ───────────── */
.web-form-wrapper .form-control,
.web-form .form-control {
  background-color: #1C1C1C !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #F0F0F0 !important;
}