/* dark.css — Dark mode overrides for DocInfo Manager
 * Applied via body.dark-mode class
 * Preference stored in userSettings.userSettingsJSON.darkMode
 */

/* ---------------------------------------------------------------
   CSS Custom Properties (Dark Palette)
--------------------------------------------------------------- */
body.dark-mode {
  --dm-bg:           #1a1d23;
  --dm-surface:      #242830;
  --dm-surface-2:    #2d3340;
  --dm-border:       #3a4055;
  --dm-border-accent:#2d5a8e;
  --dm-text:         #e8eaf0;
  --dm-text-muted:   #9aa0b0;
  --dm-text-dim:     #6b7280;
  --dm-tab-text:     #e6a95c;  /* amber accent (complements azure), bright for dark tab bg */
  --dm-link:         #93c5fd;
  --dm-input-bg:     #2d3340;
  --dm-input-border: #4a5570;
}

/* ---------------------------------------------------------------
   Base
--------------------------------------------------------------- */
body.dark-mode {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
  color-scheme: dark;
}

body.dark-mode a {
  color: var(--dm-link);
}

body.dark-mode a:hover {
  color: #bfdbfe;
}

body.dark-mode p {
  color: var(--dm-text) !important;
}

body.dark-mode hr {
  border-color: var(--dm-border) !important;
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
body.dark-mode footer {
  background: #1c2030 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode footer a {
  color: var(--dm-text-muted) !important;
}

body.dark-mode footer a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--dm-text) !important;
}

body.dark-mode #copyrightText {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Menu Top / Bottom Bars
--------------------------------------------------------------- */
body.dark-mode .menu-top-bar,
body.dark-mode .menu-bottom-bar {
  background: #151820 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------
   Buttons — replace ALL blue with neutral dark
   (Source !important removed from .btnType1 / .btnTypeDash1 so
    these rules win cleanly via specificity + load order)
--------------------------------------------------------------- */
body.dark-mode input[type="button"],
body.dark-mode .btnType1,
body.dark-mode .btnTypeDash1,
body.dark-mode button {
  /* Use background-color (not the `background` shorthand) so we don't wipe out
     background-image icons on third-party buttons (e.g. Toast UI Editor toolbar). */
  background-color: #536078 !important;
  color: #D1D6E3 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  border-color: #c8d8f0 !important;
}

/* Hidden clear-cache button (menu2.inc, userId 10000 only) — designed to be
   invisible (transparent bg); keep the blanket button paint above off of it */
body.dark-mode #clearCacheBtn {
  background-color: transparent !important;
  border-color: #888 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------
   Toast UI Editor (Markdown note editor) — let its own dark theme
   style the toolbar; keep the global dark button paint above from
   covering its icon sprite or boxing the icon buttons.
--------------------------------------------------------------- */
body.dark-mode .toastui-editor-defaultUI .toastui-editor-toolbar-icons {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.dark-mode .toastui-editor-defaultUI .toastui-editor-toolbar-group button,
body.dark-mode .toastui-editor-defaultUI .toastui-editor-mode-switch button {
  box-shadow: none !important;
  border: 0 !important;
}

body.dark-mode input[type="button"]:hover,
body.dark-mode .btnType1:hover,
body.dark-mode .btnTypeDash1:hover,
body.dark-mode button:hover {
  /* background: #3a4a65 !important; */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Dashboard action buttons keep their blue in dark mode */
body.dark-mode .btnTypeDash1 {
  background: linear-gradient(135deg, #1558a0 0%, #2d6ab5 100%) !important;
  color: #e8f0ff !important;
}
body.dark-mode .btnTypeDash1:hover {
  background: linear-gradient(135deg, #1a6bbf 0%, #3878c8 100%) !important;
}

/* #addTopicBtn1 and #addCategoryBtn1 have background:#1d72c2 !important in main.css
   via an ID-specificity rule (1-0-0) that beats all class-based dark mode rules.
   Override with a dark-mode ID rule (specificity 1-1-1) so they match the other buttons. */
/*
body.dark-mode #addTopicBtn1,
body.dark-mode #addCategoryBtn1 {
  background: #2d3a50 !important;
  color: #c8d8f0 !important;
}
body.dark-mode #addTopicBtn1:hover,
body.dark-mode #addCategoryBtn1:hover {
  background: #3a4a65 !important;
}
*/
/* Preserve green save/add.
   The `input[type="button"][style*=...]` selector (specificity 0-3-2) is needed
   to outrank the blanket `body.dark-mode input[type="button"]` paint (0-2-2);
   without it, inline-green <input type="button"> (e.g. modal Save) went gray. */
body.dark-mode button.btn-save,
body.dark-mode input[type="button"][style*="#28a745"],
body.dark-mode [style*="#28a745"] {
  background: #1a5c2a !important;
  color: #ffffff !important;
  border-color: #28a745 !important;
}

/* Preserve red delete / cancel — same specificity fix for <input type="button"> */
body.dark-mode button.btn-delete,
body.dark-mode input[type="button"][style*="#dc3545"],
body.dark-mode [style*="#dc3545"] {
  background: #6b1a20 !important;
  color: #ffffff !important;
  border-color: #dc3545 !important;
}

/* Cancel */
body.dark-mode button.btn-cancel {
  background: #2a3040 !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}

/* Catch any remaining inline blue on buttons */
body.dark-mode button[style*="background: #1d72c2"],
body.dark-mode button[style*="background:#1d72c2"] {
  background: #2d3a50 !important;
  color: #c8d8f0 !important;
}

/* ---------------------------------------------------------------
   Language / Tag Badges (blue pills in Functions section)
--------------------------------------------------------------- */
body.dark-mode .lang-badge-compact,
body.dark-mode .function-card .lang-badge,
body.dark-mode [style*="background: #1d72c2"][style*="border-radius: 10px"],
body.dark-mode [style*="background: #1d72c2"][style*="border-radius:10px"],
body.dark-mode [style*="background:#1d72c2"][style*="border-radius"] {
  background: #1e3a5c !important;
  color: #93c5fd !important;
}

/* ---------------------------------------------------------------
   Menu Bar
--------------------------------------------------------------- */
body.dark-mode .menu-bar-wrapper {
  background: linear-gradient(180deg, #1c2030 0%, #242838 100%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .menu-bar ul > li {
  border-color: #2d3a55 !important;
}

body.dark-mode .menu-bar ul > li > a {
  color: #c8cfe0 !important;
}

body.dark-mode .menu-bar ul > li > a:hover,
body.dark-mode .menu-bar ul > li > a.active {
  background: linear-gradient(135deg, #1d72c2 0%, #5791d0 100%) !important;
  color: #ffffff !important;
}

body.dark-mode .menu-bar a.logo {
  color: #93c5fd !important;
}

body.dark-mode .menu-bar ul li ul {
  background-color: #1e2535 !important;
  border-color: #3a5580 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .menu-bar ul li ul li {
  border-top-color: #2d3a55 !important;
}

body.dark-mode .menu-bar ul li ul li a {
  color: #a8c8f0 !important;
}

body.dark-mode .menu-bar ul li ul li a:hover {
  background: linear-gradient(90deg, #1d72c2 0%, #5791d0 100%) !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------
   Form Content Cards
--------------------------------------------------------------- */
body.dark-mode .formContent,
body.dark-mode .listContent,
body.dark-mode .rptContent1 {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border-accent) !important;
  color: var(--dm-text) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .formContentTitle {
  background: linear-gradient(90deg, rgba(29, 114, 194, 0.15) 0%, rgba(36, 40, 48, 0) 100%) !important;
  border-bottom-color: var(--dm-border-accent) !important;
}

body.dark-mode .formContentMid,
body.dark-mode .formContentMidHeader,
body.dark-mode .formContentMidHeaderSm,
body.dark-mode .formContentFooter {
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .formContent p label,
body.dark-mode .formContent label,
body.dark-mode .listFilter label {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Inputs, Selects, Textareas — comprehensive overrides
   Mirrors every main.css background rule to guarantee dark wins
--------------------------------------------------------------- */

/* Broad catch-all — beats simple element selectors */
body.dark-mode input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}

/* Mirror exact main.css selectors (adds body.dark-mode prefix) */
body.dark-mode .listFilter input,
body.dark-mode .listFilter select,
body.dark-mode #listFilter input[type="text"],
body.dark-mode #listFilter input[type="tel"],
body.dark-mode #listFilter input[type="date"],
body.dark-mode #listFilter input[type="number"],
body.dark-mode #listFilter select,
body.dark-mode .formContent input:not([type="button"]),
body.dark-mode .formContent select,
body.dark-mode .formContent textarea,
body.dark-mode .formContentMid input:not([type="button"]),
body.dark-mode .formContentMid select,
body.dark-mode .formContentMid textarea {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}

/* Dark dropdown arrow */
body.dark-mode select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239aa0b0' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  background-size: 14px !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: #5791d0 !important;
  box-shadow: 0 0 0 2px rgba(87, 145, 208, 0.3) !important;
  outline: none !important;
}

body.dark-mode input[readonly],
body.dark-mode input[disabled],
body.dark-mode select[disabled],
body.dark-mode textarea[disabled] {
  background-color: #222630 !important;
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   SCEditor (rich text editor) — outer container & toolbar
--------------------------------------------------------------- */
body.dark-mode .sceditor-container {
  border-color: var(--dm-input-border) !important;
  background-color: var(--dm-input-bg) !important;
}
body.dark-mode .sceditor-toolbar {
  background-color: var(--dm-surface-2) !important;
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .sceditor-toolbar a,
body.dark-mode .sceditor-toolbar .sceditor-button {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .sceditor-toolbar a:hover,
body.dark-mode .sceditor-toolbar .sceditor-button:hover {
  background-color: var(--dm-surface) !important;
}
/* The iframe itself — background visible while loading */
body.dark-mode .sceditor-container iframe {
  background-color: var(--dm-input-bg) !important;
}
/* Toolbar button groups + any toolbar child surfaces (were showing white) */
body.dark-mode .sceditor-toolbar .sceditor-group {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .sceditor-toolbar div {
  background-color: var(--dm-surface-2) !important;
}
/* Dropdowns (font, size, color, emoticon, link, etc.) */
body.dark-mode .sceditor-dropdown,
body.dark-mode div.sceditor-dropdown {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-accent) !important;
}
body.dark-mode .sceditor-dropdown a,
body.dark-mode .sceditor-dropdown label,
body.dark-mode .sceditor-dropdown input,
body.dark-mode .sceditor-dropdown textarea {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-input-border) !important;
}

/* ---------------------------------------------------------------
   Tables
--------------------------------------------------------------- */
body.dark-mode table {
  color: var(--dm-text) !important;
}

/* Base th — covers all tables */
body.dark-mode table th,
body.dark-mode th {
  background-color: #1d3d78 !important;
  color: #e8f0ff !important;
  border-color: #2a5298 !important;
}
body.dark-mode th:nth-of-type(n+1):hover,
body.dark-mode table th:hover {
  background-color: #24489a !important;
}

/* #listResultTable specific — must beat ID+class !important rules in main.css */
body.dark-mode #listResultTable th,
body.dark-mode #listResultTable th:nth-of-type(n+2) {
  background-color: #1d3d78 !important;
  background-image: none !important;
  color: #e8f0ff !important;
  border-color: #2a5298 !important;
}
body.dark-mode #listResultTable th:nth-of-type(n+2):hover {
  background-color: #24489a !important;
}
body.dark-mode #listResultTable th:nth-of-type(n+2).asc {
  background: #1d3d78 url('/image/asc.png') no-repeat center right !important;
  background-size: 25px !important;
  color: #e8f0ff !important;
}
body.dark-mode #listResultTable th:nth-of-type(n+2).asc:hover {
  background: #24489a url('/image/asc.png') no-repeat center right !important;
  background-size: 25px !important;
}
body.dark-mode #listResultTable th:nth-of-type(n+2).desc {
  background: #1d3d78 url('/image/desc.png') no-repeat center right !important;
  background-size: 25px !important;
  color: #e8f0ff !important;
}
body.dark-mode #listResultTable th:nth-of-type(n+2).desc:hover {
  background: #24489a url('/image/desc.png') no-repeat center right !important;
  background-size: 25px !important;
}

/* Table cells */
body.dark-mode table td {
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* Alt rows — use subtle contrast, not a jarring light color */
body.dark-mode table tr:nth-child(even) td,
body.dark-mode table tr:nth-of-type(2n) td,
body.dark-mode #listResultTable tr:nth-child(even) td,
body.dark-mode #listResultTable tr:nth-of-type(2n) td {
  background-color: #1d2230 !important;
}
/* Override the tr-level background too */
body.dark-mode #listResultTable tr:nth-of-type(2n) {
  background-color: #1d2230 !important;
}

/* Odd rows get explicit dark base so contrast is clear */
body.dark-mode #listResultTable tr:nth-of-type(2n+1) td {
  background-color: var(--dm-bg) !important;
}

/* Row hover */
body.dark-mode table tr:hover td,
body.dark-mode #listResultTable tr:hover td {
  background-color: #2a3548 !important;
  transition: background-color 0.15s ease !important;
}

/* ---------------------------------------------------------------
   serverVolList — Volume Report modal (serverVolListReport.js)
   Modal is built with hardcoded light inline styles; without these
   overrides the report table renders light text on a white panel
   in dark mode. Ids added in serverVolListReport.js v1.01.
--------------------------------------------------------------- */
body.dark-mode #svrReportPanel {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}
body.dark-mode #svrReportFooter {
  background: var(--dm-bg) !important;
  border-top-color: var(--dm-border) !important;
}
body.dark-mode #svrReportTable th {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border-accent) !important;
}
body.dark-mode #svrReportTable td {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border) !important;
}
/* Explicit dark backgrounds for BOTH stripes so no white panel bg shows */
body.dark-mode #svrReportTable tr:nth-child(odd) td {
  background-color: var(--dm-surface) !important;
}
body.dark-mode #svrReportTable tr:nth-child(even) td {
  background-color: var(--dm-surface-2) !important;
}
body.dark-mode #svrReportTable tr:hover td {
  background-color: #2a3548 !important;
}

/* ---------------------------------------------------------------
   Dashboard — Sections & Titles
--------------------------------------------------------------- */
body.dark-mode .dashboard-section {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border-accent) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .dashboard-section-header {
  border-bottom-color: var(--dm-border) !important;
}

/* All blue heading text → white */
body.dark-mode .dashboard-section h2,
body.dark-mode .dashboard-header,
body.dark-mode .dashboard-title,
body.dark-mode .dashboard-titleRight,
body.dark-mode .title1,
body.dark-mode .title2 {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------
   Dashboard — Stat Cards
--------------------------------------------------------------- */
body.dark-mode .stat-card,
body.dark-mode .stat-card-link:hover .stat-card {
  background: #1e2a3a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #2d4a6a !important;
}

/* ---------------------------------------------------------------
   Weather Widget
--------------------------------------------------------------- */
body.dark-mode .weather-widget {
  background: #1e2a3a !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* ---------------------------------------------------------------
   Dashboard — Function Cards
--------------------------------------------------------------- */
body.dark-mode .function-card {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .function-card h4 {
  color: #ffffff !important;
}

body.dark-mode .function-card .count {
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   Dashboard — Notification Items
--------------------------------------------------------------- */
body.dark-mode .notification-item {
  background: var(--dm-surface-2) !important;
  border-left-color: #5791d0 !important;
}

body.dark-mode .notification-item .notification-type {
  color: #ffffff !important;
}

body.dark-mode .notification-item .notification-date {
  color: var(--dm-text-muted) !important;
}

/* Notification title link — was invisible (#333 inline) on the dark row.
   !important beats the inline color + the JS mouseout reset to #333. */
body.dark-mode .notification-title-clickable {
  color: var(--dm-text) !important;
}

body.dark-mode .notification-title-clickable:hover {
  color: var(--dm-link) !important;
}

/* ---------------------------------------------------------------
   Dashboard — Import Table
--------------------------------------------------------------- */
body.dark-mode .import-table th {
  background: #1d3d78 !important;
  color: #e8f0ff !important;
  border-color: #2a5298 !important;
}

body.dark-mode .import-table td {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .import-table tr:nth-child(even) {
  background: #202430 !important;
}

body.dark-mode .import-table tr:hover {
  background: #2a3245 !important;
}

/* ---------------------------------------------------------------
   Dashboard — Category Tree
--------------------------------------------------------------- */
body.dark-mode .tree-container {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .tree-container::-webkit-scrollbar-track {
  background: var(--dm-surface) !important;
}

body.dark-mode .tree-container::-webkit-scrollbar-thumb {
  background: #3a5580 !important;
}

body.dark-mode .category-tree-header:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .tree-header-content {
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .category-item {
  color: var(--dm-text) !important;
}

body.dark-mode .topic-item {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .topic-link {
  color: #93c5fd !important;
}

body.dark-mode .topic-link:hover {
  color: #bfdbfe !important;
}

body.dark-mode .tree-expand {
  color: #93c5fd !important;
}

body.dark-mode .tree-subtitle {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .category-desc {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .item-count {
  background: rgba(147, 197, 253, 0.12) !important;
  color: #93c5fd !important;
}

/* ---------------------------------------------------------------
   Dashboard — Calendar
--------------------------------------------------------------- */
body.dark-mode .cal-month-year-label {
  color: #e8e8e8 !important;
}

body.dark-mode .calendar-day-header,
body.dark-mode .calendar-day-header-c,
body.dark-mode div.calendar-day-header,
body.dark-mode div.calendar-day-header-c {
  background: #1e2a3a !important;
  color: #93c5fd !important;
  border: none !important;
}

body.dark-mode .calendar-day,
body.dark-mode .calendar-day-c {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .calendar-day:hover,
body.dark-mode .calendar-day-c:hover {
  background: #2a3a50 !important;
  border-color: #5791d0 !important;
}

body.dark-mode .calendar-day-other-month,
body.dark-mode .calendar-day-c-other-month {
  background: #202428 !important;
  color: var(--dm-text-dim) !important;
  border-color: #2a2f3a !important;
}

body.dark-mode .calendar-day-today,
body.dark-mode .calendar-day-c-today {
  background: #2d3a10 !important;
  border-color: #a0b030 !important;
  color: #d4e060 !important;
}

body.dark-mode .calendar-day-selected,
body.dark-mode .calendar-day-c-selected {
  background: #1a5c2a !important;
  border-color: #28a745 !important;
  color: #ffffff !important;
}

body.dark-mode .calendar-day-has-notifications::after,
body.dark-mode .calendar-day-c-has-notifications::after {
  color: #93c5fd !important;
}

body.dark-mode .calendar-notification-item,
body.dark-mode .calendar-event-item {
  background: var(--dm-surface-2) !important;
  border-left-color: #5791d0 !important;
  box-shadow: none !important;
}

body.dark-mode .calendar-notification-item:hover,
body.dark-mode .calendar-event-item:hover {
  background: #2a3245 !important;
}

body.dark-mode #calendarNotifications::-webkit-scrollbar-track {
  background: var(--dm-surface) !important;
}

body.dark-mode #calendarNotifications::-webkit-scrollbar-thumb {
  background: #3a5580 !important;
}

/* ---------------------------------------------------------------
   Calendar "Details" panel (#calendarNotifications) content — dark mode
   The panel container and the event/topic/reminder cards are rendered
   (renderCalendarNotificationsEnhanced) with hardcoded light inline colors:
   #f8f9fa container bg, #333 titles, #666/#888/#999 secondary text,
   #1d72c2 date header, #e0e0e0 underline. Override them here so the panel
   matches the dark theme. Attribute selectors target the inline colors.
--------------------------------------------------------------- */
body.dark-mode #calendarNotifications {
  background: var(--dm-surface) !important;
}

/* All panel text → readable light; links → dm-link */
body.dark-mode #calendarNotifications,
body.dark-mode #calendarNotifications div,
body.dark-mode #calendarNotifications span {
  color: var(--dm-text) !important;
}
body.dark-mode #calendarNotifications a {
  color: var(--dm-link) !important;
}

/* Date header (inline color:#1d72c2; border-bottom:#e0e0e0) */
body.dark-mode #calendarNotifications [style*="color: #1d72c2"] {
  color: #93c5fd !important;
}
body.dark-mode #calendarNotifications [style*="border-bottom"] {
  border-bottom-color: var(--dm-border) !important;
}

/* Secondary / fine-print text → muted */
body.dark-mode #calendarNotifications [style*="color: #666"],
body.dark-mode #calendarNotifications [style*="color: #888"],
body.dark-mode #calendarNotifications [style*="color: #999"] {
  color: var(--dm-text-muted) !important;
}

/* Colored badges keep white text on their colored background */
body.dark-mode #calendarNotifications .priority-badge,
body.dark-mode #calendarNotifications span[style*="background:"] {
  color: #ffffff !important;
}

/* Edit button on event cards */
body.dark-mode #calendarNotifications .event-action-btn {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode #calendarNotifications .event-action-btn:hover {
  background: #2a3a50 !important;
}

/* Empty / loading / error states */
body.dark-mode #calendarNotifications .empty-state {
  color: var(--dm-text-muted) !important;
}

/* "Details" header divider above the panel (inline border-bottom:#e0e0e0) */
body.dark-mode .dashboard-section:has(> #calendarNotifications) > div[style*="border-bottom"] {
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .calendar-filter-btn {
  background: var(--dm-surface-2) !important;
  border-color: #3a5580 !important;
  color: #93c5fd !important;
}

body.dark-mode .calendar-filter-btn:hover {
  background: #2a3a50 !important;
}

body.dark-mode .calendar-filter-btn.active {
  background: #1d4a7a !important;
  border-color: #5791d0 !important;
  color: #ffffff !important;
}

body.dark-mode .calendar-event-form {
  background: var(--dm-surface-2) !important;
}

body.dark-mode .event-form-header {
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .event-form-header h3 {
  color: #ffffff !important;
}

body.dark-mode .calendar-event-form label {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .calendar-event-form .form-actions {
  border-top-color: var(--dm-border) !important;
}

body.dark-mode .calendar-event-form .btn-cancel {
  background: var(--dm-surface) !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .calendar-event-form .btn-cancel:hover {
  background: var(--dm-surface-2) !important;
}

body.dark-mode .calendar-day-c .event-type-event {
  background: #1a3050 !important;
  color: #93c5fd !important;
  border-left-color: #5791d0 !important;
}

body.dark-mode .calendar-day-c .event-type-deadline {
  background: #3a1a1a !important;
  color: #f87171 !important;
  border-left-color: #dc2626 !important;
}

body.dark-mode .calendar-day-c .event-type-deadline-low {
  background: #3a2a10 !important;
  color: #fbbf24 !important;
  border-left-color: #d97706 !important;
}

body.dark-mode .calendar-day-c .calendar-day-more {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Dashboard — Icon / Graphic Boxes
--------------------------------------------------------------- */
body.dark-mode .icon-box,
body.dark-mode .graphic-box {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .icon-box:hover,
body.dark-mode .graphic-box:hover {
  background: #2a3a50 !important;
  border-color: #5791d0 !important;
}

body.dark-mode .icon-label,
body.dark-mode .graphic-label {
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   Job Schedule
--------------------------------------------------------------- */
body.dark-mode .job-past-row,
body.dark-mode .job-past-row td {
  background: #1e2028 !important;
  color: var(--dm-text-dim) !important;
}

/* ---------------------------------------------------------------
   Modals (jquery.modal)
--------------------------------------------------------------- */
body.dark-mode .modal {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border: 2px solid var(--dm-border-accent) !important;
}

body.dark-mode #jquery-overlay {
  background: rgba(0, 0, 0, 0.75) !important;
}

/* ---------------------------------------------------------------
   jQuery UI elements
--------------------------------------------------------------- */
body.dark-mode .ui-dialog {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-dialog-titlebar {
  background: #1c2a3a !important;
  color: #ffffff !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-widget-content {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .ui-widget-header {
  background: #1c2a3a !important;
  color: #ffffff !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-autocomplete {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-menu-item-wrapper {
  color: var(--dm-text) !important;
}

body.dark-mode .ui-state-active,
body.dark-mode .ui-menu-item.ui-state-focus > .ui-menu-item-wrapper {
  background: #1d72c2 !important;
  color: #fff !important;
  border-color: #1d72c2 !important;
}

body.dark-mode .ui-datepicker {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-datepicker-header {
  background: #1c2a3a !important;
  color: #ffffff !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-datepicker td a,
body.dark-mode .ui-datepicker td span {
  color: var(--dm-text) !important;
  background: transparent !important;
}

body.dark-mode .ui-datepicker td.ui-datepicker-today a {
  background: #1d3a5c !important;
  color: #93c5fd !important;
}

body.dark-mode .ui-datepicker td a:hover {
  background: #1d72c2 !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------
   Snackbar
--------------------------------------------------------------- */
body.dark-mode #snackbar {
  background-color: #1c2535 !important;
  border-color: #3a5580 !important;
}

/* ---------------------------------------------------------------
   Misc utility
--------------------------------------------------------------- */
body.dark-mode .text-muted,
body.dark-mode .instruction {
  color: var(--dm-text-muted) !important;
}

body.dark-mode span {
  color: inherit;
}

/* Column header tooltips — must override body.dark-mode span { color: inherit } */
body.dark-mode .colHeaderTooltipText {
  background: #2a3040 !important;
  color: #e8eaf6 !important;
  border-color: #4a6fa5 !important;
}
body.dark-mode .colHeaderTooltipText::after {
  border-color: transparent transparent #4a6fa5 transparent !important;
}

/* ---------------------------------------------------------------
   Inline Style Overrides (JS-generated HTML with hardcoded bg/text)
   CSS !important overrides inline styles when scoped to body.dark-mode
--------------------------------------------------------------- */

/* File Status cards */
body.dark-mode .file-status-card {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .file-status-card * {
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   Topic File Gallery (docTopicFileGallery.inc)
--------------------------------------------------------------- */
body.dark-mode .gallery-item {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .gallery-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .gallery-item-topic {
  color: var(--dm-link) !important;
}
body.dark-mode .gallery-item-filename {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .gallery-stats {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text-muted) !important;
}
body.dark-mode .gallery-no-results {
  color: var(--dm-text-dim) !important;
}

/* ---------------------------------------------------------------
   docTopicEdit — Tag Area (tagManager.inc)
--------------------------------------------------------------- */
body.dark-mode .tag-display-container {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .tag-display-container.empty {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .tag-badge {
  background: #1a3a5c !important;
  color: #79b8f8 !important;
  border-color: #3a6a9c !important;
}
body.dark-mode .tag-section-header h3 {
  color: var(--dm-text) !important;
}
body.dark-mode #tagManagerModal .modal-content {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode #tagManagerModal .modal-body {
  background: var(--dm-surface) !important;
}
body.dark-mode #tagManagerModal .modal-footer {
  background: var(--dm-bg) !important;
  border-top-color: var(--dm-border) !important;
}
body.dark-mode .add-tag-section {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .add-tag-section h4 {
  color: var(--dm-text) !important;
}
body.dark-mode .tag-group-tab {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}
body.dark-mode .tag-group-tab:hover {
  background: var(--dm-surface) !important;
  border-color: #579ed9 !important;
  color: var(--dm-text) !important;
}
body.dark-mode .tag-group-tab.active {
  background: #1d72c2 !important;
  color: #fff !important;
  border-color: #1d72c2 !important;
}
body.dark-mode .tag-item {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .tag-item:hover {
  background: var(--dm-surface) !important;
  border-color: #579ed9 !important;
}
body.dark-mode .tag-item.selected {
  background: #1a3a5c !important;
  border-color: #1d72c2 !important;
}
body.dark-mode .tag-group-filter label {
  color: var(--dm-text) !important;
}
body.dark-mode .tag-group-filter select {
  background: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-input-border) !important;
}
body.dark-mode .tag-selection-list {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
/* tagEdit — Assigned Tag Groups container */
body.dark-mode #assignedGroupContainer {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .tag-checkbox-item {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .tag-checkbox-item:hover {
  background: var(--dm-surface) !important;
  border-color: #579ed9 !important;
}
body.dark-mode .tag-checkbox-item.selected {
  background: #1a3a5c !important;
  border-color: #1d72c2 !important;
}
body.dark-mode .add-tag-form input {
  background: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-input-border) !important;
}
body.dark-mode .tag-usage-count,
body.dark-mode .tag-loading,
body.dark-mode .tag-empty-state {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Dashboard — upload drop zone inner content
--------------------------------------------------------------- */
body.dark-mode .upload-box-header h3 {
  color: var(--dm-text) !important;
}
body.dark-mode .upload-drop-content p {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .upload-selected-files {
  background: var(--dm-surface) !important;
}
body.dark-mode .file-list-item {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* Light gray backgrounds (#f8f9fa, #fafafa, #f5f5f5) */
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background: #fafafa"],
body.dark-mode [style*="background:#fafafa"],
body.dark-mode [style*="background: #f5f5f5"],
body.dark-mode [style*="background:#f5f5f5"] {
  background: var(--dm-surface-2) !important;
}

/* Warm/pastel tinted inline backgrounds (File Summary info cards,
   Uncategorized Files section) — keep the hue, drop the lightness */
body.dark-mode [style*="background: #e8f5e9"],
body.dark-mode [style*="background:#e8f5e9"] {
  background: #1e3226 !important;              /* dark green tint */
  border-color: #2e7d32 !important;
}
body.dark-mode [style*="background: #e3f2fd"],
body.dark-mode [style*="background:#e3f2fd"] {
  background: #16283c !important;              /* dark blue tint */
  border-color: #2d5a8e !important;
}
body.dark-mode [style*="background: #fff3e0"],
body.dark-mode [style*="background:#fff3e0"] {
  background: #33270f !important;              /* dark amber tint */
}
body.dark-mode [style*="background: #fffbf5"],
body.dark-mode [style*="background:#fffbf5"] {
  background: var(--dm-surface) !important;
}
/* toggleSection() sets style.display via JS, which re-serializes the style
   attribute (#fffbf5 becomes rgb(255, 251, 245)) and breaks the attribute
   selectors above once the section is opened — target the id directly */
body.dark-mode #uncategoried_content {
  background: var(--dm-surface) !important;
}
/* Explicit backgrounds for BOTH stripes so rows never fall through to the
   section background (even rows already dark via the generic table rule) */
body.dark-mode .uncategoried-file-row:nth-child(odd) td {
  background-color: var(--dm-surface) !important;
}
body.dark-mode .uncategoried-file-row:nth-child(even) td {
  background-color: #1d2230 !important;
}
/* Deep-orange accent text (#e65100) needs brightening on dark surfaces */
body.dark-mode [style*="color: #e65100"],
body.dark-mode [style*="color:#e65100"] {
  color: #ffb066 !important;
}
/* Pale orange row borders in the Uncategorized Files table */
body.dark-mode [style*="border-bottom: 1px solid #ffe0b2"] {
  border-bottom-color: #4a3a1e !important;
}
/* Row hover (page sets #fff3e0 !important — outrank it with specificity) */
body.dark-mode .uncategoried-file-row:hover,
body.dark-mode .uncategoried-file-row:hover td {
  background-color: #3a2d16 !important;
}

/* White backgrounds */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: #fff;"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"] {
  background: var(--dm-surface) !important;
}

/* Progress bar track (#e9ecef) */
body.dark-mode [style*="background: #e9ecef"],
body.dark-mode [style*="background:#e9ecef"] {
  background: #3a4055 !important;
}

/* Dark text colors on white backgrounds → light */
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #495057"],
body.dark-mode [style*="color:#495057"] {
  color: var(--dm-text) !important;
}

body.dark-mode [style*="color: #555"],
body.dark-mode [style*="color:#555"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: #6c757d"],
body.dark-mode [style*="color:#6c757d"] {
  color: var(--dm-text-muted) !important;
}

body.dark-mode [style*="color: #999"],
body.dark-mode [style*="color:#999"] {
  color: var(--dm-text-dim) !important;
}

/* Reminder toast / modal-style overlays */
body.dark-mode [style*="background: white"][style*="border-radius"],
body.dark-mode [style*="background:white"][style*="border-radius"] {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

/* Notification modal footer / form areas */
body.dark-mode [style*="background: #f8f9fa"][style*="border-top"],
body.dark-mode [style*="background: #f8f9fa"][style*="border-radius"] {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   Upload Boxes (menu bar inline + dashboard)
--------------------------------------------------------------- */
body.dark-mode .upload-box-small,
body.dark-mode .upload-box {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .upload-box-small:hover,
body.dark-mode .upload-box:hover {
  border-color: #5791d0 !important;
}

body.dark-mode .upload-drop-zone-small,
body.dark-mode .upload-drop-zone {
  background: #1e2a3a !important;
  border-color: #3a5580 !important;
}

body.dark-mode .upload-drop-zone-small:hover,
body.dark-mode .upload-drop-zone:hover,
body.dark-mode .upload-drop-zone-small.drag-over,
body.dark-mode .upload-drop-zone.drag-over {
  background: #243040 !important;
  border-color: #5791d0 !important;
}

body.dark-mode .upload-drop-content p,
body.dark-mode .upload-drop-zone-small .upload-drop-content p {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .upload-selected-files li,
body.dark-mode .upload-box-small .upload-selected-files li {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .upload-selected-files li .file-size,
body.dark-mode .upload-box-small .upload-selected-files li .file-size {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .upload-btn-secondary,
body.dark-mode .upload-btn-secondary-small {
  background: #3a4055 !important;
  color: var(--dm-text-muted) !important;
}

body.dark-mode .upload-btn-secondary:hover,
body.dark-mode .upload-btn-secondary-small:hover {
  background: #4a5070 !important;
}

/* ---------------------------------------------------------------
   Dark Mode Toggle Button (in footer)
--------------------------------------------------------------- */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.dark-mode-toggle:hover {
  opacity: 1;
}

.dark-mode-toggle img {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---------------------------------------------------------------
   Scrollbar (WebKit)
--------------------------------------------------------------- */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #1a1d23;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a4055;
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #4a5575;
}

/* ---------------------------------------------------------------
   Checkbox Filter Items (list page filter area)
--------------------------------------------------------------- */
body.dark-mode .checkbox-filter-item {
  background: #1e2a3e !important;
  border-color: #3a4f70 !important;
  color: var(--dm-text) !important;
}

body.dark-mode .checkbox-filter-item:hover {
  background: #253450 !important;
  border-color: #4a6090 !important;
}

body.dark-mode .checkbox-filter-item:has(input:checked) {
  background: #1a3a60 !important;
  border-color: #5791d0 !important;
  color: #93c5fd !important;
}

/* ---------------------------------------------------------------
   Radio Edit Items (edit page radio button groups)
--------------------------------------------------------------- */
body.dark-mode .radio-edit-item {
  background: #1e2a3e !important;
  border-color: #3a4f70 !important;
  color: var(--dm-text) !important;
}

body.dark-mode .radio-edit-item:hover {
  background: #253450 !important;
  border-color: #4a6090 !important;
}

body.dark-mode .radio-edit-item:has(input:checked) {
  background: #1a3a60 !important;
  border-color: #5791d0 !important;
  color: #93c5fd !important;
}

/* ---------------------------------------------------------------
   Pagination / Page Nav Info Text
--------------------------------------------------------------- */
body.dark-mode #pageCountInfo,
body.dark-mode #pageNavInfo,
body.dark-mode #pageCountInfo2,
body.dark-mode #pageNavInfo2,
body.dark-mode #pagePerCountLabel {
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   docTopicEdit — Topic File Cards
--------------------------------------------------------------- */
body.dark-mode .file-card {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .file-card:hover {
  border-color: #579ed9 !important;
}
body.dark-mode .file-card-thumbnail {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .file-icon-placeholder {
  background: #1a3a5c !important;
  color: #79b8f8 !important;
}
body.dark-mode .file-card-info {
  color: var(--dm-text) !important;
}
body.dark-mode .file-card-info * {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   docTopicEdit — Category Section (categoryManager.inc)
--------------------------------------------------------------- */
body.dark-mode #categoryManagerSection {
  background: var(--dm-surface) !important;
}
body.dark-mode .category-card {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .category-card:hover {
  border-color: #579ed9 !important;
}
body.dark-mode .category-card-title {
  color: #79b8f8 !important;
}
body.dark-mode .category-info-popup {
  background: var(--dm-surface) !important;
  border-color: #579ed9 !important;
  color: var(--dm-text) !important;
}
body.dark-mode .category-info-label { color: var(--dm-text-muted) !important; }
body.dark-mode .category-info-value { color: var(--dm-text) !important; }
body.dark-mode .category-empty-state { color: var(--dm-text-muted) !important; }

/* ---------------------------------------------------------------
   docTopicEdit — Add Category button keeps blue in dark mode
--------------------------------------------------------------- */
body.dark-mode #addCategoryModalBtn {
  background: linear-gradient(135deg, #1558a0 0%, #2d6ab5 100%) !important;
  color: #e8f0ff !important;
}
body.dark-mode #addCategoryModalBtn:hover {
  background: linear-gradient(135deg, #1a6bbf 0%, #3878c8 100%) !important;
}

/* ---------------------------------------------------------------
   docTopicEdit — File Upload Areas (#fileUploadArea, #fileUploadArea2)
   Both have background:#f9f9ff (light blue-white) not covered by
   the generic #f8f9fa rules.
--------------------------------------------------------------- */
body.dark-mode #fileUploadArea,
body.dark-mode #fileUploadArea2 {
  background: #1e2a3a !important;
  border-color: #3a5580 !important;
}
body.dark-mode #fileUploadArea:hover,
body.dark-mode #fileUploadArea2:hover {
  background: #243040 !important;
  border-color: #5791d0 !important;
}
body.dark-mode #dropZoneContent p,
body.dark-mode #dropZoneContent2 p {
  color: var(--dm-text-muted) !important;
}
body.dark-mode #selectedFilesList,
body.dark-mode #selectedFilesList2 {
  color: var(--dm-text) !important;
}
body.dark-mode #fileNamesUl li,
body.dark-mode #fileNamesUl2 li {
  color: var(--dm-text-muted) !important;
}
/* Topic Files wrapper rows */
body.dark-mode #fileListContainer {
  background: var(--dm-surface) !important;
}

/* docTopicEdit — Topic File card: file name near-white */
body.dark-mode .file-card-title {
  color: #e8eaf0 !important;
}
body.dark-mode .file-card-title:hover {
  color: #fff !important;
}

/* ─── viewDoc.php dark mode ─────────────────────────────────────────── */

/* Sidebar */
body.dark-mode .docs-sidebar {
  background: var(--dm-surface) !important;
}
body.dark-mode .docs-sidebar h3 {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .docs-sidebar a {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .docs-sidebar a:hover,
body.dark-mode .docs-sidebar a.active {
  background: #1a4f2e !important;
  color: #6ee7a0 !important;
}
body.dark-mode .docs-sidebar .sidebar-version {
  color: var(--dm-text-dim) !important;
  border-top-color: var(--dm-border) !important;
}

/* Other files section in sidebar */
body.dark-mode .other-files-section {
  border-top-color: var(--dm-border) !important;
}
body.dark-mode .other-files-section h4 {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .other-files-section a {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .other-files-section a:hover {
  background: #1a4f2e !important;
  color: #6ee7a0 !important;
}

/* Main content area */
body.dark-mode .docs-content {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .docs-content h1 {
  color: var(--dm-text) !important;
  border-bottom-color: #2a7a3e !important;
}
body.dark-mode .docs-content h2 {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .docs-content h3,
body.dark-mode .docs-content h4,
body.dark-mode .docs-content h5 {
  color: #c8d6e8 !important;
}
body.dark-mode .docs-content p {
  color: var(--dm-text) !important;
}
body.dark-mode .docs-content strong {
  color: #fff !important;
}
body.dark-mode .docs-content hr {
  border-top-color: var(--dm-border) !important;
}

/* Code blocks */
body.dark-mode .docs-content pre {
  background: #1a1d23 !important;
  border-color: var(--dm-border) !important;
  color: #c8d6e8 !important;
}
body.dark-mode .docs-content code {
  background: #1a1d23 !important;
  color: #93c5fd !important;
}
body.dark-mode .docs-content pre code {
  background: none !important;
  color: inherit !important;
}

/* Tables */
body.dark-mode .docs-content table th,
body.dark-mode .docs-content table td {
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .docs-content table th {
  background: var(--dm-surface-2) !important;
}
body.dark-mode .docs-content table tr:nth-child(even) td {
  background: rgba(255,255,255,0.03) !important;
}

/* Back link */
body.dark-mode .back-link {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .back-link:hover {
  background: #1a4f2e !important;
  color: #6ee7a0 !important;
}

/* ─── docView.php dark mode ──────────────────────────────────────────── */
body.dark-mode .dv-card {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border-accent) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5) !important;
}

body.dark-mode .dv-body {
  background: var(--dm-surface) !important;
}

/* Info grid */
body.dark-mode .dv-info {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .dv-info-label {
  color: #93c5fd !important;
}
body.dark-mode .dv-info-value {
  color: var(--dm-text) !important;
}
body.dark-mode .dv-info-value a {
  color: var(--dm-link) !important;
}

/* Section headings */
body.dark-mode .dv-section-title {
  color: #93c5fd !important;
  border-bottom-color: var(--dm-border) !important;
}

/* Asset pills (folders, URLs, DBs) */
body.dark-mode .dv-asset-pill {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .dv-asset-pill.url-pill a {
  color: var(--dm-link) !important;
}
body.dark-mode .dv-asset-pill-label {
  color: var(--dm-text-muted) !important;
}

/* Files section */
body.dark-mode .dv-files-title {
  color: #93c5fd !important;
}
body.dark-mode .dv-files-count {
  background: #1e3a5f !important;
  color: #93c5fd !important;
}

/* File buttons (uncolored ones) */
body.dark-mode .dv-file-btn:not([style*="background-color"]) {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .dv-file-btn:not([style*="background-color"]):hover {
  background: var(--dm-border-accent) !important;
  border-color: #93c5fd !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------
   scriptAppCode Edit — Server Alias & File Manager sections
--------------------------------------------------------------- */

/* Outer section containers */
body.dark-mode #sacAliasSection,
body.dark-mode #sacFileSection {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

/* Header rows inside sections */
body.dark-mode #sacAliasSection .formContentMid2,
body.dark-mode #sacAliasSection .contentR,
body.dark-mode #sacAliasSection #sacAliasGridContainer,
body.dark-mode #sacFileSection .formContentMid2,
body.dark-mode #sacFileSection .contentR,
body.dark-mode #sacFileSection #sacFileListContainer {
  background: var(--dm-surface) !important;
}

/* Section count labels */
body.dark-mode #sacAliasSection span,
body.dark-mode #sacFileSection span {
  color: var(--dm-text-muted) !important;
}

/* Alias cards */
body.dark-mode #sacAliasSection .alias-card {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode #sacAliasSection .alias-card:hover {
  border-color: var(--dm-border-accent) !important;
  box-shadow: 0 2px 8px rgba(29, 114, 194, 0.25) !important;
}
body.dark-mode #sacAliasSection .alias-card-name1 {
  color: #93c5fd !important;
}
body.dark-mode #sacAliasSection .alias-card-name2 {
  color: var(--dm-text-muted) !important;
}
body.dark-mode #sacAliasSection .alias-card-server,
body.dark-mode #sacAliasSection .alias-card-datetime {
  color: var(--dm-text-dim) !important;
}
body.dark-mode #sacAliasSection .alias-empty-state {
  color: var(--dm-text-muted) !important;
}

/* File upload drag-drop box */
body.dark-mode #sacFileUploadBox {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border-accent) !important;
}
body.dark-mode #sacFileUploadBox.drag-over {
  background: #1a3a2a !important;
  border-color: #4ade80 !important;
}
body.dark-mode #sacFileUploadBox p {
  color: var(--dm-text-muted) !important;
}
body.dark-mode #sacFileSection #sacFileNamesUl {
  color: var(--dm-text) !important;
}

/* File list container (file cards loaded via AJAX) */
body.dark-mode #sacFileSection .file-card {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode #sacFileSection .file-card:hover {
  border-color: var(--dm-border-accent) !important;
}

/* ---------------------------------------------------------------
   serverEdit — Server Health cards (.sh-*)
--------------------------------------------------------------- */
body.dark-mode .sh-detail-card {
  background: var(--dm-surface) !important;
  border-top-color: var(--dm-border-accent) !important;
}

body.dark-mode .sh-section-title {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .sh-section-subtitle {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .sh-days-btn {
  background: var(--dm-surface-2) !important;
  color: #4CAF50 !important;
  border-color: #4CAF50 !important;
}
body.dark-mode .sh-days-btn:hover,
body.dark-mode .sh-days-btn.active {
  background: #1a4c1e !important;
  color: #6ee982 !important;
}

body.dark-mode .sh-pie-card {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .sh-pie-pct,
body.dark-mode .sh-pie-mountpoint {
  color: var(--dm-text) !important;
}

body.dark-mode .sh-pie-detail {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .sh-loading,
body.dark-mode .sh-no-data,
body.dark-mode .sh-chart-loading,
body.dark-mode .sh-no-chart {
  color: var(--dm-text-dim) !important;
}

body.dark-mode .sh-log-toggle {
  color: var(--dm-text) !important;
}
body.dark-mode .sh-log-toggle-icon {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   serverEdit — Server Job cards (.se-job-*)
--------------------------------------------------------------- */
body.dark-mode .se-job-card {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .se-job-card:hover {
  border-color: var(--dm-border-accent) !important;
  box-shadow: 0 2px 8px rgba(29, 114, 194, 0.2) !important;
}

body.dark-mode .se-job-card-top {
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .se-job-card-row {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .se-job-group {
  color: var(--dm-text-dim) !important;
}
body.dark-mode .se-job-schedule {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .se-job-label {
  color: var(--dm-text-dim) !important;
}
body.dark-mode .se-job-value {
  color: var(--dm-text) !important;
}
body.dark-mode .se-job-never {
  color: var(--dm-text-dim) !important;
}
body.dark-mode .se-job-footer-mod {
  color: var(--dm-text-muted) !important;
}

/* Job status tooltip (JS-created div) */
body.dark-mode #seJobStatusTip {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-accent) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* ---------------------------------------------------------------
   docTopicEdit — Topic URL cards (urlManager.inc) — were white
--------------------------------------------------------------- */
body.dark-mode .url-card {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .url-card:hover {
  border-color: var(--dm-border-accent) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}
body.dark-mode .url-card-title-link { color: var(--dm-link) !important; }
body.dark-mode .url-card-title-link:hover { color: #bcd8fb !important; }
body.dark-mode .url-card-url { color: var(--dm-text-muted) !important; }

/* Topic URL info popup — was white */
body.dark-mode .url-info-popup {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border-accent) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .url-info-label { color: var(--dm-text-muted) !important; }
body.dark-mode .url-info-value { color: var(--dm-text) !important; }

/* =========================================================================
   docTopicEdit — Reminders panel (notificationManager.inc)
   Light-blue panel + white rows are not themed by default; retheme for dark.
   ========================================================================= */
body.dark-mode .reminder-list-section {
  background: var(--dm-surface) !important;
  border-top-color: var(--dm-border-accent) !important;
}
body.dark-mode .reminder-list-header h3 { color: var(--dm-text) !important; }
body.dark-mode .reminder-row {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .reminder-row-title { color: var(--dm-link) !important; }
body.dark-mode .reminder-row-date { color: var(--dm-text-muted) !important; }
body.dark-mode .reminder-row-msg  { color: var(--dm-text-muted) !important; }
body.dark-mode .reminder-empty    { color: var(--dm-text-dim) !important; }
body.dark-mode .reminder-row-date.reminder-overdue { color: #ff6b6b !important; }

/* =========================================================================
   docTopicEdit — Encrypted-content boxes & decryption modal (docTopicEdit.inc)
   Cream (#fff3cd) / green (#d4edda) / light-blue (#d1ecf1) inline boxes and the
   white decryption modal have no dark styling; their gold/dark text is also
   unreadable on dark. Retheme to dark surfaces with legible text.
   ========================================================================= */
/* In-page password-entry / session-saved box */
body.dark-mode #encryptionPasswordField > div {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode #encryptionPasswordField p,
body.dark-mode #encryptionPasswordField label,
body.dark-mode #encryptionPasswordField span { color: var(--dm-text-muted) !important; }
body.dark-mode #encryptionPasswordField a { color: var(--dm-link) !important; }

/* In-page "Click to view encrypted content" prompt box */
body.dark-mode #decryptContentButton {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode #decryptContentButton span { color: var(--dm-text-muted) !important; }

/* Decryption modal shell */
body.dark-mode #decryptionModal .modal-content {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border) !important;
}
body.dark-mode #decryptionModal h3 { color: var(--dm-text) !important; }
body.dark-mode #decryptionModal label { color: var(--dm-text) !important; }
body.dark-mode #decryptionModal #closeDecryptModal { color: var(--dm-text-muted) !important; }

/* Cream warning notice inside the modal */
body.dark-mode #decryptionModal .modal-content > div[style*="fff3cd"] {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border-accent) !important;
}
body.dark-mode #decryptionModal .modal-content > div[style*="fff3cd"] p,
body.dark-mode #decryptionModal .modal-content > div[style*="fff3cd"] strong {
  color: var(--dm-text) !important;
}

/* Password input */
body.dark-mode #decryptionModal input[type="password"] {
  background: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}

/* Tip / warning footer */
body.dark-mode #decryptionModal .modal-content > div:last-child {
  border-top-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}
body.dark-mode #decryptionModal .modal-content > div:last-child div,
body.dark-mode #decryptionModal .modal-content > div:last-child strong {
  color: var(--dm-text-muted) !important;
}

/* Decryption error box (keep red intent, darken for contrast) */
body.dark-mode #decryptionError {
  background: #4a1f24 !important;
  border-color: #7a2a32 !important;
  color: #f3b6bc !important;
}

/* =========================================================================
   activityList — Activity Log Details modal (jQuery Modal, #activityViewModal)
   Inputs/labels/footer carry hardcoded light inline colors; retheme for dark
   so it matches the Add URL modal (#editURLModal). Header stays brand blue.
   ========================================================================= */
body.dark-mode #activityViewModal {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}
body.dark-mode #activityViewModal label { color: var(--dm-text-muted) !important; }
body.dark-mode #activityViewModal input,
body.dark-mode #activityViewModal textarea {
  background: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
/* Footer bar (inline #f5f5f5) */
body.dark-mode #activityViewModal > div:last-child {
  background: var(--dm-bg) !important;
  border-top-color: var(--dm-border) !important;
}
/* JSON compare section dividers/labels */
body.dark-mode #activityViewModal hr { border-top-color: var(--dm-border) !important; }
body.dark-mode #activityViewModal .jsonCompareCol1,
body.dark-mode #activityViewModal .jsonCompareCol2,
body.dark-mode #activityViewModal .jsonCompareCol3 { color: var(--dm-text) !important; }

/* =========================================================================
   notificationList — Notification Details & Add Notification modals
   (view/notification/notificationViewModal.inc)
   The modal shell/body/sections carry hardcoded light colors (#fefefe,
   #333, #444, #eee). Retheme for dark; header stays brand blue.
   ========================================================================= */
body.dark-mode #notificationViewModal .modal-content,
body.dark-mode #addNotificationModal .modal-content {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* Footer bar (inline #f8f9fa) */
body.dark-mode #notificationViewModal .modal-footer,
body.dark-mode #addNotificationModal .modal-footer {
  background: var(--dm-surface-2) !important;
  border-top-color: var(--dm-border) !important;
}

/* Section dividers + text */
body.dark-mode #notificationViewModal .notif-section {
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode #notificationViewModal .notif-section-hdr {
  color: var(--dm-text-muted) !important;
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode #notificationViewModal .notif-section-val {
  color: var(--dm-text) !important;
}
body.dark-mode #notificationViewModal .notif-section-sub {
  color: var(--dm-text-muted) !important;
}
body.dark-mode #notificationViewModal .notif-section-hdr a {
  color: #5791d0 !important;
}

/* Nav counter (inline #666) */
body.dark-mode #notificationViewModal #notificationNavCounter {
  color: var(--dm-text-muted) !important;
}

/* Prev / Next nav buttons (light #e9ecef / #333) */
body.dark-mode #notificationViewModal .notification-btn-nav {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border) !important;
}
body.dark-mode #notificationViewModal .notification-btn-nav:hover:not(:disabled) {
  background: var(--dm-bg) !important;
}

/* Add Notification form labels + inputs */
body.dark-mode #addNotificationModal .notification-form-group label {
  color: var(--dm-text) !important;
}
body.dark-mode #addNotificationModal .notification-form-group input[type="text"],
body.dark-mode #addNotificationModal .notification-form-group input[type="date"],
body.dark-mode #addNotificationModal .notification-form-group textarea {
  background: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   docProjectEdit modals (Add Asset / DB Edit / Server Edit / Unsaved)
   These panels use inline background:#fff with #555 labels and a
   #f5f5f5 footer. Inputs already get dark styling from the global
   catch-all, which left dark inputs sitting on a white panel. Give
   the panels, labels and footers proper dark-mode colors.
--------------------------------------------------------------- */
body.dark-mode #assetModal > div,
body.dark-mode #dbEditModal > div,
body.dark-mode #serverEditModal > div,
body.dark-mode #unsavedChangesModal > div {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

/* Labels and inline body text */
body.dark-mode #assetModal label,
body.dark-mode #dbEditModal label,
body.dark-mode #serverEditModal label,
body.dark-mode #unsavedChangesModal label,
body.dark-mode #unsavedChangesModal h3,
body.dark-mode #unsavedChangesModal p {
  color: var(--dm-text) !important;
}

/* Footer action bars (last child of the panel) — Asset / DB / Server */
body.dark-mode #assetModal > div > div:last-child,
body.dark-mode #dbEditModal > div > div:last-child,
body.dark-mode #serverEditModal > div > div:last-child {
  background: var(--dm-surface-2) !important;
  border-top-color: var(--dm-border) !important;
}

/* ---------------------------------------------------------------
   docTopicURLUnassigned — Assign URL to Topic / Bulk Assign modals
   (.assignModal). Class-based styles default to a white panel with
   #555 labels and #f5f5f5 read-only fields; give them dark colors.
--------------------------------------------------------------- */
body.dark-mode .assignModal-content {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
body.dark-mode .assignModal-header,
body.dark-mode .assignModal-footer {
  border-color: var(--dm-border) !important;
}
body.dark-mode .assignModal-header h2,
body.dark-mode .assignModal .form-group label {
  color: var(--dm-text) !important;
}
body.dark-mode .assignModal-close {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .assignModal-close:hover {
  color: var(--dm-text) !important;
}
body.dark-mode .assignModal .readonlyField {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .assignModal .formControl {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
/* "has value" highlight on the topic search input */
body.dark-mode #assignModal_TopicSearch.has-value,
body.dark-mode #bulkAssignTopicSearch.has-value {
  background-color: rgba(40, 167, 69, 0.18) !important;
  border-color: #2e7d46 !important;
}

/* ---------------------------------------------------------------
   Dashboard Notification Edit Modal (built with inline styles in
   dashboardFunct.js — override the light body/footer/labels here)
--------------------------------------------------------------- */
/* Modal panel (the white box) */
body.dark-mode #dashboardNotificationModal > div {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
/* Field labels */
body.dark-mode #dashboardNotificationModal label {
  color: var(--dm-text) !important;
}
/* Inputs, selects, textarea */
body.dark-mode #dashboardNotificationModal input,
body.dark-mode #dashboardNotificationModal select,
body.dark-mode #dashboardNotificationModal textarea {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode #dashboardNotificationModal input::placeholder,
body.dark-mode #dashboardNotificationModal textarea::placeholder {
  color: var(--dm-text-muted) !important;
}
/* Native date/time picker indicators */
body.dark-mode #dashboardNotificationModal input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode #dashboardNotificationModal input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
/* Footer bar (the light #f8f9fa strip with the buttons) */
body.dark-mode #dashboardNotificationModal > div > div:last-child {
  background-color: var(--dm-surface-2) !important;
  border-top-color: var(--dm-border) !important;
}

/* ---------------------------------------------------------------
   Server Job Edit — Alerted Users cards + Add/Edit User modal
   (styles live inline in view/serverJob/alertUserManager.inc)
--------------------------------------------------------------- */
/* User card */
body.dark-mode .alert-user-card {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .alert-user-name { color: var(--dm-text) !important; }
body.dark-mode .alert-user-email { color: var(--dm-text-muted) !important; }
body.dark-mode .alert-user-id { color: var(--dm-text-dim) !important; }
body.dark-mode .alert-user-type { color: var(--dm-link) !important; }
body.dark-mode .alert-user-empty-state { color: var(--dm-text-muted) !important; }

/* Add/Edit Alert User modal panel (inline #fff background) */
body.dark-mode #addAlertUserModal > div {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}
/* Modal footer strip (inline #f5f5f5) */
body.dark-mode #addAlertUserModal > div > div:last-child {
  background: var(--dm-surface-2) !important;
  border-top-color: var(--dm-border) !important;
}
body.dark-mode #addAlertUserModal label,
body.dark-mode #addAlertUserModal #alertUserEditName {
  color: var(--dm-text) !important;
}
body.dark-mode #addAlertUserModal select {
  background: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   Login / Register card (index.php, register.php)
   The card goes dark like every other surface; the navy logo sits
   on a white chip so it stays readable.
--------------------------------------------------------------- */
body.dark-mode .login-card {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border-accent) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .login-card .logoLogin {
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
}

body.dark-mode .login-card h3,
body.dark-mode .login-card .form-label,
body.dark-mode .login-card .form-check-label {
  color: var(--dm-text) !important;
}

body.dark-mode .login-card .form-text {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .login-card .form-control::placeholder {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .login-card .form-check-input {
  background-color: var(--dm-input-bg);
  border-color: var(--dm-input-border) !important;
}

body.dark-mode .login-card .form-check-input:checked {
  background-color: #2d5a8e;
  border-color: #2d5a8e !important;
}

/* "Click here to register" button — inline gray needs !important to win */
body.dark-mode .login-card a.btn {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .login-card a.btn:hover {
  background-color: var(--dm-border) !important;
}