/* Global Theme Overrides: light/dark via html[data-theme] */
:root { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-0:#0b1220; --bg-1:#0f172a; --bg-2:#111827;
  --panel-0:rgba(31,41,55,.70); --panel-1:#1f2937; --panel-2:#334155;
  --text:#e5e7eb; --text-strong:#f1f5f9; --muted:#94a3b8;
  --accent:#60a5fa; --accent-2:#38bdf8; --accent-3:#22d3ee;
  --border:rgba(148,163,184,.16);
  --shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04);
}

/* Utility: glass surface */
.glass { background: rgba(12,20,36,.50); border:1px solid rgba(148,163,184,.16); backdrop-filter: saturate(120%) blur(10px); box-shadow: var(--shadow); }
html[data-theme="dark"] .glass { background: var(--panel-0); border-color: var(--border); }
.bg-surface { background:#fff; }
html[data-theme="dark"] .bg-surface { background: var(--panel-1); }

/* Base */
html[data-theme="dark"] body{
  background: radial-gradient(320px 320px at 85% -10%, rgba(56,189,248,.08), transparent 60%),
              radial-gradient(280px 280px at -5% 100%, rgba(96,165,250,.08), transparent 60%),
              linear-gradient(180deg, var(--bg-0) 0%, var(--bg-2) 100%);
  color:var(--text);
}
html[data-theme="dark"] a{ color:var(--accent); }
html[data-theme="dark"] a:hover{ color:var(--accent-2); }

/* Navbar */
html[data-theme="dark"] .navbar{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.86));
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  backdrop-filter:saturate(120%) blur(6px);
}
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .navbar-brand{ color:var(--text); }
html[data-theme="dark"] .navbar .nav-link:hover{ color:var(--text-strong); }
html[data-theme="dark"] .navbar .nav-link .mdi{ color:var(--text); }

/* Sidebar */
html[data-theme="dark"] .sidebar{
  background: linear-gradient(180deg, rgba(12,20,36,.94), rgba(12,20,36,.90));
  border-right:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(6px);
}
html[data-theme="dark"] #sidebar .nav-link{ color:#cbd5e1; }
html[data-theme="dark"] #sidebar .nav-link:hover{ color:#fff; }
html[data-theme="dark"] #sidebar .nav-link.active{
  background-color:rgba(51,65,85,.55);
  color:#fff; border-radius:8px;
}

/* Content wrapper */
html[data-theme="dark"] .content-wrapper{ background:transparent; }

/* Cards / Panels */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .grid-margin .card,
html[data-theme="dark"] .modal-content{
  background: linear-gradient(180deg, var(--panel-1), var(--panel-1));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  color:var(--text);
  border-radius:12px;
}
html[data-theme="dark"] .card .card-title,
html[data-theme="dark"] .panel h4{ color:var(--text-strong); }

/* Subtle panel header divider */
html[data-theme="dark"] .card .card-body{ border-top:1px solid rgba(148,163,184,.08); }

/* Tables */
html[data-theme="dark"] .table{ color:var(--text); }
html[data-theme="dark"] .table thead th{
  background:var(--bg-1); color:#cbd5e1; border-color:var(--panel-2);
}
html[data-theme="dark"] .table tbody tr{ background:var(--panel-1); }
html[data-theme="dark"] .table-hover tbody tr:hover{ background: rgba(51,65,85,.40); }
html[data-theme="dark"] .table td, html[data-theme="dark"] .table th{ border-color:var(--panel-2); }

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .input-group-text{
  background:var(--bg-1); color:var(--text); border-color:var(--panel-2);
}
html[data-theme="dark"] .form-control::placeholder{ color:var(--muted); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(96,165,250,.25);
}

/* Buttons */
html[data-theme="dark"] .btn{ color:var(--text); border-color:#475569; }
html[data-theme="dark"] .btn-primary{ background:var(--accent); border-color:var(--accent); }
html[data-theme="dark"] .btn-primary:hover{ background:var(--accent-2); border-color:var(--accent-2); }
html[data-theme="dark"] .btn-light{ background:#334155; border-color:#334155; color:var(--text); }
html[data-theme="dark"] .btn-light:hover{ background:#3b4b62; color:var(--text-strong); }
html[data-theme="dark"] .btn-outline-secondary{ border-color:#64748b; color:var(--text); }

/* Dropdown & badge */
html[data-theme="dark"] .dropdown-menu{ background:var(--bg-1); color:var(--text); border-color:var(--panel-2); }
html[data-theme="dark"] .dropdown-item{ color:var(--text); }
html[data-theme="dark"] .dropdown-item:hover{ background:rgba(51,65,85,.55); color:#fff; }
html[data-theme="dark"] .badge{ filter:brightness(.92); }

/* List Group */
html[data-theme="dark"] .list-group-item{ background:var(--panel-1); color:var(--text); border-color:var(--panel-2); }
html[data-theme="dark"] .list-group-item-action:hover, html[data-theme="dark"] .list-group-item-action:focus{ background: rgba(51,65,85,.55); color:#fff; }
html[data-theme="dark"] .list-group-item.active{ background: rgba(51,65,85,.65); color:#fff; border-color: var(--panel-2); }

/* Misc */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer{ border-color:var(--panel-2); }

/* Tabs bar overrides */
html[data-theme="dark"] .tabs-bar{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.86));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .tabs-bar .tab{ color:var(--text); }
html[data-theme="dark"] .tabs-bar .tab.active{ background:rgba(51,65,85,.55); }

/* Charts canvas background hint */
html[data-theme="dark"] .chart-container{ background:var(--bg-0); }

/* Search area */
html[data-theme="dark"] .search-area{ background:rgba(12,20,36,.85); border-radius:10px; border:1px solid var(--border); }
html[data-theme="dark"] .search-area.collapsed{ background:transparent; border:0; }

/* Dashboard light elements in dark mode */
html[data-theme="dark"] .dashboard-light .card,
html[data-theme="dark"] .dashboard-light .mini-card,
html[data-theme="dark"] .dashboard-light .panel{
  background: linear-gradient(180deg, var(--panel-1), var(--panel-1));
  color:var(--text); border-color:var(--border);
}
html[data-theme="dark"] .dashboard-light .legend li{ color:var(--muted); }
html[data-theme="dark"] .dashboard-light .legend li span{ box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }
html[data-theme="dark"] .dashboard-light .metric-title{ color:var(--muted); }
html[data-theme="dark"] .dashboard-light .metric-value{ color:var(--text-strong); }

/* Contracts Template Editor overrides */
html[data-theme="dark"] .fields-panel{ background: var(--panel-1); border-color: var(--panel-2); color: var(--text); }
html[data-theme="dark"] .page-controls{ background: rgba(12,20,36,.85); border:1px solid var(--border); color: var(--text); }
html[data-theme="dark"] .field-item{ background: rgba(51,65,85,.35); border-color: var(--panel-2); color: var(--text); }
html[data-theme="dark"] .field-item:hover{ background: rgba(51,65,85,.55); }
html[data-theme="dark"] .field-item.placed{ background: rgba(36,99,124,.35); border-color: #3b82f6; color: var(--text-strong); }

/* Dashboard glass effect */
html[data-theme="dark"] .dashboard-light .panel,
html[data-theme="dark"] .dashboard-light .metric-card,
html[data-theme="dark"] .dashboard-light .spark-card {
  background: rgba(31,41,55,.70);
  backdrop-filter: saturate(120%) blur(10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Common white background helpers */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
  background: var(--panel-1) !important;
}

/* Dropdown active state */
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active {
  background: rgba(51,65,85,.65);
  color: #fff;
}

/* Custom modal panel overrides (cost expenses page) */
html[data-theme="dark"] .modal-panel {
  background: rgba(31,41,55,.70);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .modal-header { color: var(--text-strong); }
html[data-theme="dark"] .modal-body { color: var(--text); }

/* Cost expenses details row */
html[data-theme="dark"] .details-row td {
  background: rgba(51,65,85,.30);
}

/* Contracts template editor: PDF viewer surfaces */
html[data-theme="dark"] .template-editor .pdf-viewer {
  background: rgba(12,20,36,.65);
  border-color: var(--panel-2);
}
html[data-theme="dark"] .template-editor .pdf-container {
  background: var(--panel-1);
  box-shadow: var(--shadow);
}

/* Smooth theme transitions */
html, body, .navbar, #sidebar, .content-wrapper, .tabs-bar, .card, .panel, .dropdown-menu, .form-control, .btn {
  transition: background-color .20s ease, color .20s ease, border-color .20s ease, box-shadow .20s ease;
}

/* Navbar dark scheme improvements */
html[data-theme="dark"] .navbar{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.86));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .mdi{ color: var(--text); }
html[data-theme="dark"] .navbar .nav-link:hover{ color: var(--text-strong); }

/* Tabs bar dark scheme */
html[data-theme="dark"] .tabs-bar{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.86));
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .tabs-bar .tab-item{ background: rgba(51,65,85,.35); color: var(--text); border-color: var(--panel-2); }
html[data-theme="dark"] .tabs-bar .tab-item.active{ background: rgba(51,65,85,.65); color: #fff; border-color: var(--accent); }
html[data-theme="dark"] .tabs-bar .tabs-arrow{ background: rgba(51,65,85,.35); color: var(--text); border-color: var(--panel-2); }
html[data-theme="dark"] .tabs-bar .tabs-arrow:hover{ background: rgba(51,65,85,.55); color: var(--text-strong); }

/* Global textual colors for dark scheme */
html[data-theme="dark"] body{ color: var(--text); }
html[data-theme="dark"] .text-muted{ color: var(--muted) !important; }
html[data-theme="dark"] .form-control::placeholder{ color: var(--muted); }
html[data-theme="dark"] .btn-secondary{ color: var(--text); border-color: #64748b; background: #374151; }
html[data-theme="dark"] .btn-secondary:hover{ background: #3f495a; }

/* Accessibility: ensure link contrast */
html[data-theme="dark"] a.action-link{ color: var(--accent); }
html[data-theme="dark"] a.action-link:hover{ color: var(--accent-2); }

/* Tooltip/Popover/Alert dark variants */
html[data-theme="dark"] .tooltip-inner{ background: var(--bg-1); color: var(--text); }
html[data-theme="dark"] .tooltip.bs-tooltip-top .arrow::before{ border-top-color: var(--bg-1); }
html[data-theme="dark"] .popover{ background: var(--bg-1); color: var(--text); border-color: var(--panel-2); }
html[data-theme="dark"] .popover .popover-header{ background: var(--panel-1); color: var(--text-strong); border-color: var(--panel-2); }
html[data-theme="dark"] .alert{ color: var(--text); }
html[data-theme="dark"] .alert-info{ background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.35); color: #dbeafe; }
html[data-theme="dark"] .alert-success{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #dcfce7; }
html[data-theme="dark"] .alert-warning{ background: rgba(234,179,8,.14); border-color: rgba(234,179,8,.40); color: #fde68a; }
html[data-theme="dark"] .alert-danger{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #fecaca; }

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Focus ring for buttons and nav links in dark mode */
html[data-theme="dark"] .btn:focus,
html[data-theme="dark"] .nav-link:focus,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .form-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(96,165,250,.30);
  border-color: var(--accent);
}

/* Header standardization: layout, spacing, fonts, colors */
:root {
  --header-font-size: 14px;
  --header-gap-x: 12px;
  --header-gap-x-sm: 8px;
}

.navbar,
.navbar .navbar-brand-wrapper,
.navbar .navbar-menu-wrapper,
.tabs-bar {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.navbar { height: var(--nav-h); backdrop-filter: saturate(1.2); }

.navbar .navbar-brand-wrapper {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-right: 1px solid #e6e8eb;
  border-bottom: 1px solid #e6e8eb;
  background: transparent !important; /* unify with navbar background to avoid white block */
}

.navbar .navbar-menu-wrapper {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: transparent !important;
}

.navbar .navbar-nav .nav-item { margin-left: var(--header-gap-x); margin-right: var(--header-gap-x); }
.navbar .nav-link {
  font-size: var(--header-font-size);
  line-height: 1;
  padding: 8px 10px;
  border-radius: 6px;
  color: inherit;
}

@media (max-width: 991px) {
  .navbar .navbar-nav .nav-item { margin-left: var(--header-gap-x-sm); margin-right: var(--header-gap-x-sm); }
  .navbar .nav-link { padding: 6px 8px; }
}

/* Header hover/focus - light theme baseline */
.navbar .nav-link:hover { background: rgba(44,123,229,0.08); }
.navbar .nav-link:focus-visible { outline: 2px solid #2c7be5; outline-offset: 2px; }

/* Dark theme: header search input enhancements */
html[data-theme="dark"] .navbar .nav-search .input-group {
  border-radius: 8px;
}
html[data-theme="dark"] .navbar .nav-search .form-control::placeholder {
  color: var(--muted);
}

/* Dark theme: select controls unify outline/border */
html[data-theme="dark"] select.form-control {
  background: var(--bg-1);
  color: var(--text);
  border-color: var(--panel-2);
  outline: none;
}
html[data-theme="dark"] select.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(96,165,250,.25);
  outline: none;
}

/* Dark theme: top-level header menu states */
html[data-theme="dark"] #top-menu .nav-link { color: var(--text); }
html[data-theme="dark"] #top-menu .nav-link:hover { background: rgba(51,65,85,.45); color: var(--text-strong); }
html[data-theme="dark"] #top-menu .nav-link.active,
html[data-theme="dark"] #top-menu .ui-header-link--active { background: rgba(44,123,229,.28); color: #fff; }

/* Reusable header utility classes */
.ui-header { height: var(--nav-h); display:flex; align-items:center; }
.ui-header-link { font-size: var(--header-font-size); border-radius: 6px; padding: 8px 10px; }
.ui-header-link--active { background: rgba(44,123,229,.18); color: #1f2937; }
html[data-theme="dark"] .ui-header-link--active { background: rgba(44,123,229,.28); color:#fff; }
.ui-header-gap-sm { margin: 0 var(--header-gap-x-sm); }
.ui-header-gap { margin: 0 var(--header-gap-x); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .navbar, .navbar .navbar-brand-wrapper, .navbar .navbar-menu-wrapper, .tabs-bar { transition: none; }
}

/* Dark theme: unify header containers with navbar */
html[data-theme="dark"] .navbar .navbar-brand-wrapper {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .navbar .navbar-menu-wrapper {
  background: transparent !important;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* Dark theme: header search input group background and text */
html[data-theme="dark"] .navbar .nav-search .input-group {
  background: var(--bg-1);
}
html[data-theme="dark"] .navbar .nav-search .input-group .form-control,
html[data-theme="dark"] .navbar .nav-search .input-group .input-group-text {
  color: var(--text);
}
html[data-theme="dark"] .navbar .nav-search .input-group .input-group-text i {
  color: var(--muted);
}
/* Dark theme: deeper hover backgrounds (neutral gray) */
html[data-theme="dark"] .navbar .nav-link:hover {
  background: rgba(51, 65, 85, .55);
  color: var(--text-strong);
}
html[data-theme="dark"] #top-menu .nav-link:hover {
  background: rgba(51, 65, 85, .55);
  color: var(--text-strong);
}
html[data-theme="dark"] .dropdown-item:hover {
  background: rgba(51, 65, 85, .65);
  color: #fff;
}
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
  background: rgba(51, 65, 85, .65);
  color: #fff;
}
html[data-theme="dark"] .table-hover tbody tr:hover {
  background: rgba(51, 65, 85, .55);
}
html[data-theme="dark"] .tabs-bar .tabs-arrow:hover {
  background: rgba(51, 65, 85, .65);
  color: var(--text-strong);
}

/* List filters: enforce dark inputs to match edit page (图一) */
html[data-theme="dark"] .list-filters .form-group .form-control{
  background-color: var(--bg-1) !important;
  color: var(--text) !important;
  border-color: var(--panel-2) !important;
}
html[data-theme="dark"] .list-filters .form-group .form-control::placeholder{
  color: var(--muted) !important;
}
html[data-theme="dark"] .list-filters select.form-control{
  background-color: var(--bg-1) !important;
  color: var(--text) !important;
  border-color: var(--panel-2) !important;
}
html[data-theme="dark"] .list-filters select.form-control option{ background-color: var(--bg-1); color: var(--text); }