/* dave-styleguide-v2 */
html[data-costing-theme="dark"] { color-scheme: dark; }
html[data-costing-theme="light"] { color-scheme: light; }
html[data-costing-theme="dark"] body,
body[data-costing-theme="dark"] {
  --bg: #030303;
  --panel: rgba(14, 14, 14, 0.92);
  --panel-strong: #0d0d0e;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f7f1e8;
  --muted: #c5baab;
  --accent: #7cc3ff;
  --accent-soft: rgba(124, 195, 255, 0.16);
  --button-text: #06121d;
  --danger: #ff9c9c;
  --success: #8ce7bd;
  --shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
  background: radial-gradient(circle at top left, rgba(255,255,255,0.04), transparent 28%), linear-gradient(180deg, #060606 0%, var(--bg) 46%, #000 100%) !important;
}
html[data-costing-theme="light"] body,
body[data-costing-theme="light"] {
  --bg: #eef3fb;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-strong: #ffffff;
  --line: rgba(31, 58, 102, 0.12);
  --line-strong: rgba(31, 58, 102, 0.18);
  --text: #14233f;
  --muted: #5f708f;
  --accent: #0f6cbd;
  --accent-soft: rgba(15, 108, 189, 0.12);
  --button-text: #ffffff;
  --danger: #bc2f32;
  --success: #177245;
  --shadow: 0 24px 70px rgba(30, 52, 92, 0.12);
  background: radial-gradient(circle at top left, rgba(15,108,189,0.12), transparent 26%), linear-gradient(180deg, #f5f8fe 0%, var(--bg) 100%) !important;
}
html[data-costing-theme] body,
body[data-costing-theme] {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif !important;
  color: var(--text);
  font-size: 15px !important;
  background-attachment: fixed;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
html[data-costing-theme] body *,
body[data-costing-theme] * {
  box-sizing: border-box;
}
html[data-costing-theme] body a,
body[data-costing-theme] a {
  color: inherit;
}
html[data-costing-theme] body :is(.topbar, .panel, .notice, .table-panel, .result-card, .modal-panel, .mail-pane, .summary-card, .metric-card, .permission, .permission-group-card, .footer-card, .status-card, .thread-panel, .composer-panel, .status-chip, .card, .register-card, .panel-section, .document-item, .table-wrap, .clients-table-wrap, .users-table-wrap, .suppliers-table-wrap, .materials-table-wrap, .conversation-item, .message-list, .hero, .topbar-mobile-panel, .topbar-group-menu, .server-health-popup),
body[data-costing-theme] .panel,
body[data-costing-theme] .notice,
body[data-costing-theme] .table-panel,
body[data-costing-theme] .result-card,
body[data-costing-theme] .modal-panel,
body[data-costing-theme] .mail-pane,
body[data-costing-theme] .summary-card,
body[data-costing-theme] .metric-card,
body[data-costing-theme] .permission,
body[data-costing-theme] .permission-group-card,
body[data-costing-theme] .footer-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
  border-radius: 22px !important;
}
html[data-costing-theme] body :is(.ghost, .toggle, .filter-tab, .tab-button, .close-button, .attachment-button, .fit-link, .chip, .topbar-theme-toggle, .topbar-group-link, .topbar-mobile-link, .app-side-nav-link, .sort-button),
body[data-costing-theme] :is(.ghost, .toggle, .filter-tab, .tab-button, .close-button, .attachment-button, .fit-link, .chip, .topbar-theme-toggle, .topbar-group-link, .topbar-mobile-link, .app-side-nav-link, .sort-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--accent-soft) !important;
  color: var(--text) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
html[data-costing-theme] body .button,
body[data-costing-theme] .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)) !important;
  border-radius: 14px !important;
  background: var(--accent) !important;
  color: var(--button-text) !important;
  font-weight: 600 !important;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
body[data-costing-theme] .button:hover,
html[data-costing-theme] body .button:hover,
body[data-costing-theme] .ghost:hover,
body[data-costing-theme] .danger:hover,
body[data-costing-theme] .toggle:hover,
body[data-costing-theme] .filter-tab:hover,
body[data-costing-theme] .tab-button:hover,
body[data-costing-theme] .close-button:hover,
body[data-costing-theme] .attachment-button:hover,
body[data-costing-theme] .fit-link:hover,
body[data-costing-theme] .chip:hover,
body[data-costing-theme] .topbar-theme-toggle:hover,
body[data-costing-theme] .app-side-nav-link:hover,
body[data-costing-theme] .topbar-group-link:hover,
body[data-costing-theme] .topbar-mobile-link:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line)) !important;
  transform: translateY(-1px);
}
body[data-costing-theme] .button.primary,
body[data-costing-theme] .toggle.active,
body[data-costing-theme] .filter-tab.is-active,
body[data-costing-theme] .tab-button.active,
body[data-costing-theme] .app-side-nav-link.is-active,
body[data-costing-theme] .topbar-group-link.is-active,
body[data-costing-theme] .topbar-mobile-link.is-active {
  background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line)) !important;
  font-weight: 600 !important;
}
body[data-costing-theme] .danger {
  background: color-mix(in srgb, var(--danger) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line)) !important;
}
html[data-costing-theme] body :is(.search-input, .field input, .field select, .field textarea, .toolbar input, .toolbar select, .toolbar textarea, .list-toolbar input, .list-toolbar select, .search input, .search select, .assign-strip select),
body[data-costing-theme] .field input,
body[data-costing-theme] .field select,
body[data-costing-theme] .field textarea,
body[data-costing-theme] .toolbar input,
body[data-costing-theme] .toolbar select,
body[data-costing-theme] .toolbar textarea,
body[data-costing-theme] .list-toolbar input,
body[data-costing-theme] .list-toolbar select,
body[data-costing-theme] .search input,
body[data-costing-theme] .search select,
body[data-costing-theme] .assign-strip select {
  width: 100%;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--panel-strong) 94%, transparent) !important;
  color: var(--text) !important;
}
html[data-costing-theme] body :is(.search-input, .field input, .field select, .field textarea, .toolbar input, .toolbar select, .toolbar textarea, .list-toolbar input, .list-toolbar select, .search input, .search select, .assign-strip select)::placeholder,
body[data-costing-theme] :is(.search-input, .field input, .field select, .field textarea, .toolbar input, .toolbar select, .toolbar textarea, .list-toolbar input, .list-toolbar select, .search input, .search select, .assign-strip select)::placeholder {
  color: var(--muted);
}
html[data-costing-theme] body :is(.pill, .tag, .status-pill, .status-badge),
body[data-costing-theme] :is(.pill, .tag, .status-pill, .status-badge) {
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent) !important;
  color: var(--text) !important;
}
body[data-costing-theme] p,
body[data-costing-theme] .inline-note,
body[data-costing-theme] .permission-label,
body[data-costing-theme] .field label,
body[data-costing-theme] .eyebrow,
body[data-costing-theme] .table-subtext,
body[data-costing-theme] .summary-label,
body[data-costing-theme] .meta,
body[data-costing-theme] .subtle {
  color: var(--muted) !important;
}
body[data-costing-theme] h1,
body[data-costing-theme] h2,
body[data-costing-theme] h3,
body[data-costing-theme] .table-title,
body[data-costing-theme] .table-metric,
body[data-costing-theme] .permission-group-title {
  color: var(--text) !important;
}
html[data-costing-theme] body :is(.table th, .users-table th, .doctors-table th, .clients-table th, .suppliers-table th, .materials-table th, #auditTable th, #loginHistoryTable th),
body[data-costing-theme] :is(.table th, .users-table th, .doctors-table th, .clients-table th, .suppliers-table th, .materials-table th, #auditTable th, #loginHistoryTable th) {
  background: color-mix(in srgb, var(--panel-strong) 96%, transparent) !important;
  color: var(--muted) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-costing-theme] .users-table th,
body[data-costing-theme] .users-table td,
body[data-costing-theme] .doctors-table th,
body[data-costing-theme] .doctors-table td,
body[data-costing-theme] .clients-table th,
body[data-costing-theme] .clients-table td,
body[data-costing-theme] .suppliers-table th,
body[data-costing-theme] .suppliers-table td,
body[data-costing-theme] .materials-table th,
body[data-costing-theme] .materials-table td,
body[data-costing-theme] .table th,
body[data-costing-theme] .table td,
body[data-costing-theme] #auditTable th,
body[data-costing-theme] #auditTable td,
body[data-costing-theme] #loginHistoryTable th,
body[data-costing-theme] #loginHistoryTable td {
  padding: 10px 8px !important;
  border-color: var(--line) !important;
}
html[data-costing-theme] body .modal-backdrop,
body[data-costing-theme] .modal-backdrop {
  background: color-mix(in srgb, #000000 70%, transparent) !important;
  backdrop-filter: blur(10px);
}