/* ==========================================================================
   AYURGRID GLOBAL DARK THEME
   File    : public/css/dark-theme.css  (replace the whole file with this one)
   Loaded  : panels/styles.blade.php, LAST stylesheet, with ?v=filemtime cache-bust
   Switch  : <html class="dark-theme">, set by the head script in
             layouts/contentLayoutMaster.blade.php and the navbar toggle in
             panels/scripts.blade.php. Saved per panel in localStorage:
             theme_doctor / theme_staff / theme_sub-doctor / theme_admin.
   Scope   : EVERY rule is under html.dark-theme, so light mode is never
             affected. The only unscoped rules are the toggle widget (.ag-theme-*).

   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
    1. Theme toggle widget
    2. Variables
    3. Page base (backgrounds, headings, labels, utilities, Examination tab)
    4. Navbar
    5. Global search
    6. Sidebar
         6a surface | 6b band under logo/name | 6c text + icons
         6d current page | 6e open group | 6f submenu | 6g collapsed flyout
    7. Footer
    8. Cards (+ chart cards, stat cards)
    9. Tables + DataTables (rows, icons, badges, progress, pills)
         9e action icons (eye / PDF)  |  9e-2 Book Therapy button guard
   10. Pagination
   11. Tabs + pill switchers
   12. Forms
         12a inputs / selects | 12b underline inputs | 12c white-border boxes
         12d forced input colours + phone country dropdown
   13. Modals, dropdowns, lists, SweetAlert
         13b Schedule Slot modal | 13c Print Case Sheet panel + date picker
   14. Charts
   15. Diet chart
   16. Composition form + item/create light boxes
   17. Page-specific fixes (Print Setting buttons, Notification Settings page)
   18. Therapy booking / Panchkarma (notes, package bar, sitting configuration)
   19. Book Therapy button (#slot_schedule_modal), same in light and dark

   --------------------------------------------------------------------------
   BRIEFING FOR ANOTHER DEVELOPER / BOT
   --------------------------------------------------------------------------
   Stack: Laravel + Blade, Vuexy/Bootstrap 4 admin template, DataTables
   (Yajra), select2 + Tom Select, flatpickr, ApexCharts, SweetAlert2.

   WHY DARK MODE BREAKS (root causes found so far)
   1. public/css/overrides.css forces  table, h1-h6, label { color:#000 !important }
      -> black text on dark. We override with !important under html.dark-theme.
   2. Page-level <style> blocks sit inside <body>, so they load AFTER this file
      and win ties. Fix = !important, or raise specificity with the
      :not(#a):not(#b) trick (each :not(#id) adds one ID's worth).
   3. Many components have white/light backgrounds set by their own CSS
      (chart cards, stat cards, dosage box, pricing summary, booking modal
      rows, pills).
   4. Over-broad guesses cause side effects. Already bitten by:
      - "background: transparent" on table-cell span/div/p wiped the coloured
        badges and progress bars.
      - filter: invert(1) on action links turned the teal eye button orange.
      - the status-pill rule (10th column) hit EVERY table and turned Stock
        Value numbers into blue pills. It is now scoped to tables with td[colspan].
      - ".nav-item.open a { background }" painted every child row of an open
        sidebar group darker than the sidebar. Removed from section 6.
      - forcing fill/stroke on every part of the Book Therapy svg merged the
        check mark and its cut-outs into one white blob (section 19).
      - a CSS rule written INSIDE another rule (nesting) never matches. Every
        rule must be a top-level block.
      Do not re-add any of these.

   RULES FOR EDITING
   - Keep everything inside html.dark-theme. Prefer exact class selectors.
   - "STRUCTURAL GUESS" blocks use :has() or [class*=...] because the real class
     was not known. Replace each with an exact selector once known (DevTools ->
     Inspect -> first class on the element).
   - Colours come from the variables in section 2. Do not hard-code new greys.
   - New fixes go into the matching numbered section, NOT appended at the
     bottom, so the file stays readable.
   - Test any change on: appointmenttwos list, therapy-booking, bills, item
     list, purchase list, patient show page tabs (Last Visit, History,
     Examination, Prescription, Prakruti, Diet Chart), item/create, composition
     create, clinical-analytics, dashboard, sidebar (every group open and
     closed, logo area).

   OPEN ITEMS (not solved yet)
   A. Eye / PDF icons are fixed exactly in section 9e (Material Symbols SVG,
      viewBox "0 -960 960 960"). The optional "dark icon scanner" script in
      panels/scripts.blade.php (.ag-invert / .ag-light-icon) is only a fallback.
   B. "Package Booking" tab on therapy-booking: real class unknown (section 11).
   C. Pricing Summary box, dashboard chart cards and Clinical Analytics stat
      cards use structural guesses (sections 8 and 16).
   D. Diet Chart: the Occasional class name is a guess (occasional_class).
   E. Section 12c: the prescription boxes use exact ids (#examination-symptoms
      ...). The layers below the exact rule are guesses for other boxes.
   F. Guesses waiting for real markup: the white bar above the package table
      (section 18b), the white card inside the Schedule Slot modal (section 13)
      and the white note inputs inside table cells (section 9).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THEME TOGGLE WIDGET (the only unscoped rules: .ag-theme-*)

   1. THEME TOGGLE WIDGET (visible in light + dark, unscoped)
   -------------------------------------------------------------------------- */

.ag-theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin: 0 10px 0 0;
}

.ag-theme-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ag-theme-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.4s;
}

.ag-theme-slider::before {
    content: "\f185";
    /* sun */ font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #000;
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 18px;
    height: 18px;
    transition: transform 0.4s, color 0.4s;
}

.ag-theme-switch input:checked + .ag-theme-slider {
    background-color: #057d44;
}

.ag-theme-switch input:checked + .ag-theme-slider::before {
    content: "\f186";
    /* moon */ color: #fff;
    transform: translateX(26px);
}

.ag-theme-switch input:focus-visible + .ag-theme-slider {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. VARIABLES
   -------------------------------------------------------------------------- */

html.dark-theme {
    color-scheme: dark;
    /* dark native scrollbars, file inputs, date pickers */ --bg-color: #1e1e1e;
    --sec-bg-color: #242424;
    --text-color: #ffffff;
    --text-grey: #b5b5b5;
    --sec-text-color: #f0f0f0;
    --primary-color: #4a90e2;
    --calendar-bg-color: #525252;
    --days-bg-color: #242424;
    --time-bg-color: #242424;
    --label-color: #a8a8a8;
    --value-color: #cae0ff;
    --sub-text-color: #dadada;
    --toggle-text-color: #ffffff;
    --sub-doc-card-bg: #242424;
    --sub-doc-header-text: #f0f0f0;
    --sub-doc-row-border: #374151;
    --sub-doc-total-bg: #1e3a8a;
    --sub-doc-total-text: #93c5fd;
    --sub-doc-new-bg: #14532d;
    --sub-doc-new-text: #86efac;
    --sub-doc-returning-bg: #92400e;
    --sub-doc-returning-text: #fcd34d;
    --sub-doc-name-text: #ffffff;
    --sub-doc-id-text: #dadada;
    /* shared extras */ --border-color: #3b3b3b;
    --input-bg: #2b2b2b;
    --hover-bg: #2f2f2f;
    --table-head-bg: #2c2c2c;
    --field-line: #ffffff;
    /* white outline of the big form boxes (section 12c) */
}

/* readable text selection (was invisible dark-on-dark) */
html.dark-theme ::selection {
    background: #4a90e2;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. PAGE BASE (backgrounds, headings, labels, utilities, Examination tab)

   3. PAGE BASE (backgrounds, headings, labels, utility classes)
   -------------------------------------------------------------------------- */

html.dark-theme body,
html.dark-theme .app-content.content,
html.dark-theme .content-wrapper {
    background: var(--bg-color) !important;
    color: var(--sec-text-color);
}

/* headings: overrides.css forces #000 !important on h1-h6, so these need
   !important too */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme .h1,
html.dark-theme .h2,
html.dark-theme .h3,
html.dark-theme .h4,
html.dark-theme .h5,
html.dark-theme .h6,
html.dark-theme .card-title,
html.dark-theme .modal-title,
html.dark-theme .content-header-title,
html.dark-theme legend {
    color: var(--text-color) !important;
}

/* headings that page CSS still paints black (Add Medicine: "Main Unit
   Details", "Item Price Info:", "Main Unit"). The :not(#id) chain beats ID
   selectors in page-level <style> blocks. */
html.dark-theme form :is(h1,h2,h3,h4,h5,h6,legend):not(#a):not(#b):not(#c):not(#d),
html.dark-theme form :is(h1,h2,h3,h4,h5,h6,legend):not(#a):not(#b):not(#c):not(#d) *,
html.dark-theme .modal-body :is(h1,h2,h3,h4,h5,h6,legend):not(#a):not(#b):not(#c):not(#d),
html.dark-theme .card-body :is(h1,h2,h3,h4,h5,h6,legend):not(#a):not(#b):not(#c):not(#d),
html.dark-theme :is([class*="section-title"],[class*="form-title"],[class*="sub-title"],[class*="heading"]):not(#a):not(#b):not(#c):not(#d) {
    color: var(--text-color) !important;
}

/* exception: the dashboard greeting keeps its own grey (the heading rule
   above is more specific than the dashboard's .profile-greeting) */
html.dark-theme .profile-greeting {
    color: #82868b !important;
}

/* labels: overrides.css forces #000 !important, so !important is required */
html.dark-theme label,
html.dark-theme .form-label,
html.dark-theme .col-form-label,
html.dark-theme .card label,
html.dark-theme form label,
html.dark-theme .form-group label,
html.dark-theme .modal-body label,
html.dark-theme .dataTables_wrapper label {
    color: var(--sec-text-color) !important;
}

/* required star keeps its red */
html.dark-theme label .text-danger,
html.dark-theme label span.text-danger {
    color: #ea5455 !important;
}

/* tab-content headings (Last Visit, History, Habit, Daily Routine,
   Examination ...) */
html.dark-theme .tab-content h1,
html.dark-theme .tab-content h2,
html.dark-theme .tab-content h3,
html.dark-theme .tab-content h4,
html.dark-theme .tab-content h5,
html.dark-theme .tab-content h6,
html.dark-theme .tab-pane h1,
html.dark-theme .tab-pane h2,
html.dark-theme .tab-pane h3,
html.dark-theme .tab-pane h4,
html.dark-theme .tab-pane h5,
html.dark-theme .tab-pane h6,
html.dark-theme .card-body h1,
html.dark-theme .card-body h2,
html.dark-theme .card-body h3,
html.dark-theme .card-body h4,
html.dark-theme .card-body h5,
html.dark-theme .card-body h6 {
    color: var(--text-color) !important;
}

html.dark-theme .tab-pane label,
html.dark-theme .tab-pane td,
html.dark-theme .tab-pane th,
html.dark-theme .tab-pane p,
html.dark-theme .tab-pane strong,
html.dark-theme .tab-pane b {
    color: var(--sec-text-color) !important;
}

/* utility classes */
html.dark-theme .text-muted {
    color: var(--text-grey) !important;
}

html.dark-theme .text-dark,
html.dark-theme .text-body {
    color: var(--text-color) !important;
}

html.dark-theme .bg-white,
html.dark-theme .bg-light {
    background-color: var(--sec-bg-color) !important;
}

html.dark-theme hr,
html.dark-theme .border,
html.dark-theme .border-top,
html.dark-theme .border-bottom,
html.dark-theme .border-left,
html.dark-theme .border-right {
    border-color: var(--border-color) !important;
}

/* page loader overlay */
html.dark-theme #custom-loader {
    background: var(--bg-color) !important;
}

/* <details>/<summary> (e.g. "Dosage & Anupan") */
html.dark-theme details,
html.dark-theme details summary {
    color: var(--text-color);
}

/* Examination tab: "Pain Scale:" label (bottom-left) and the words under
   the emojis (No Hurt ... Unbearable) -> white. svg / img are excluded so
   the emoji faces stay visible on their white circles. CLASS-NAME GUESS:
   any class containing "pain" or "emoji". If a word is still dark, Inspect
   it and add its class here. */
html.dark-theme [class*="pain" i]:not(svg):not(svg *):not(img),
html.dark-theme [class*="pain" i] :not(svg):not(svg *):not(img),
html.dark-theme [class*="emoji" i]:not(svg):not(svg *):not(img):not(input),
html.dark-theme [class*="emoji" i] :not(svg):not(svg *):not(img):not(input) {
    color: #ffffff !important;
}

/* plain text spans without any class inside the tab pages (fallback) */
html.dark-theme .tab-pane span:not([class]),
html.dark-theme .tab-pane small:not([class]) {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. NAVBAR
   -------------------------------------------------------------------------- */

html.dark-theme .header-navbar,
html.dark-theme .header-navbar.floating-nav,
html.dark-theme .header-navbar .navbar-container,
html.dark-theme .navbar-container.d-flex.content {
    background: var(--sec-bg-color) !important;
}

html.dark-theme .navbar-floating .header-navbar-shadow {
    background: var(--bg-color) !important;
}

html.dark-theme .header-navbar .user-name,
html.dark-theme .header-navbar .nav-link {
    color: var(--sec-text-color) !important;
}

/* licence bar above the navbar (doctor panel) */
html.dark-theme p.clearfix > span.d-none.d-sm-inline-block {
    color: var(--label-color) !important;
}

html.dark-theme p.clearfix > span.d-none.d-sm-inline-block .text-info {
    color: var(--value-color) !important;
}

/* inline white submenus inside "System Setting" dropdown */
html.dark-theme .form-template-submenu,
html.dark-theme .calendar-template-submenu {
    background-color: var(--sec-bg-color) !important;
}

/* --------------------------------------------------------------------------
   5. GLOBAL SEARCH (navbar)
   -------------------------------------------------------------------------- */

html.dark-theme .global-search-input {
    background: var(--sec-bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--primary-color) !important;
}

html.dark-theme .global-search-input::placeholder {
    color: var(--text-grey) !important;
}

html.dark-theme .global-search-input:hover {
    border-color: var(--primary-color) !important;
}

html.dark-theme .global-search-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.15) !important;
}

html.dark-theme .search-icon {
    color: var(--text-grey) !important;
}

html.dark-theme .search-dropdown {
    background: var(--sec-bg-color) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
}

html.dark-theme .search-category {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

html.dark-theme .search-item {
    background: var(--sec-bg-color);
    border-top: 1px solid var(--border-color);
}

html.dark-theme .search-item:hover {
    background: var(--hover-bg) !important;
}

html.dark-theme .search-item.active {
    background: rgba(74, 144, 226, 0.18) !important;
    border-left: 4px solid var(--primary-color);
}

html.dark-theme .search-title {
    color: var(--text-color) !important;
}

html.dark-theme .search-sub,
html.dark-theme .search-meta,
html.dark-theme .search-arrow,
html.dark-theme .no-search {
    color: var(--text-grey) !important;
}

html.dark-theme .search-meta i,
html.dark-theme .search-sub i,
html.dark-theme .search-item:hover .search-arrow {
    color: var(--primary-color) !important;
}

/* --------------------------------------------------------------------------
   6. SIDEBAR

   Goal = the live sidebar: one flat colour from top to bottom (NO
   lighter band under the logo and the name "Doctor"), the current page
   as a dark-green gradient with rounded corners, an open group as a flat
   green parent with a soft-tinted selected child. Inventory, Transaction
   and Master Data all share these rules.
   -------------------------------------------------------------------------- */

/* 6a. surface */
html.dark-theme .main-menu,
html.dark-theme .main-menu .navbar-header,
html.dark-theme .main-menu .main-menu-content,
html.dark-theme ul#main-menu-navigation {
    background: var(--sec-bg-color) !important;
}

/* catch-all: no container inside the sidebar can paint a lighter band */
html.dark-theme .main-menu :is(div, section, header, aside, nav, ul, hr):not(.shadow-bottom):not(#a):not(#b):not(#c) {
    background: var(--sec-bg-color) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* 6b. the band under the logo and the name. Vuexy draws a blurred gradient
   strip (.shadow-bottom) right under the header, and the header / its
   items can carry their own shadow or border. All of it is removed so the
   header is exactly the same colour as the menu list below it. */
html.dark-theme .main-menu .shadow-bottom:not(#a):not(#b):not(#c):not(#d) {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
}

html.dark-theme .main-menu .navbar-header:not(#a):not(#b):not(#c),
html.dark-theme .main-menu .navbar-header :is(li, a, span, h4):not(#a):not(#b):not(#c) {
    box-shadow: none !important;
    filter: none !important;
    border: 0 !important;
}

html.dark-theme .main-menu .navbar-header :is(li, a, span, h4):not(#a):not(#b):not(#c) {
    background: transparent !important;
}

html.dark-theme .main-menu::before,
html.dark-theme .main-menu::after,
html.dark-theme .main-menu .navbar-header::before,
html.dark-theme .main-menu .navbar-header::after,
html.dark-theme .main-menu .main-menu-content::before,
html.dark-theme .main-menu .main-menu-content::after {
    display: none !important;
    content: none !important;
}

html.dark-theme .main-menu .ps__rail-x {
    display: none !important;
}

html.dark-theme .main-menu .ps__rail-y {
    background: transparent !important;
}

/* 6c. text + icons */
html.dark-theme .menu-title,
html.dark-theme .menu-item {
    color: var(--text-color) !important;
}

html.dark-theme .main-menu .navigation .navigation-header {
    color: var(--text-grey);
}

/* NOTE: the old rule ".nav-item.open a { background: var(--bg-color) }"
   was REMOVED. It painted every link inside an open group darker than the
   sidebar, which made the open submenu look like a separate dark block. */
html.dark-theme .side-bar-icon svg,
html.dark-theme .menu-content > li > a > svg,
html.dark-theme .main-menu .navigation li > a svg {
    color: var(--text-color) !important;
}

/* 6d. CURRENT PAGE (a top-level item without children): dark-green
   gradient, rounded, exactly like live and like the collapsed-menu rule in
   the sidebar blade. Icons get colour only, never a fill (outline icons
   such as the gear must stay outlines). */
html.dark-theme .main-menu.menu-light .navigation > li.active:not(.has-sub):not(.sidebar-group-active):not(.open) > a,
html.dark-theme .main-menu .navigation > li.nav-item.active:not(.has-sub):not(.sidebar-group-active):not(.open) > a,
html.dark-theme .main-menu.menu-collapsed:not(.expanded) .navigation > li.active:not(.sidebar-group-active) > a {
    background: linear-gradient(118deg, #045c32, rgba(4, 92, 50, 0.7)) !important;
    box-shadow: none !important;
    border-radius: 6px;
    color: #ffffff !important;
}

/* 6e. OPEN GROUP (the parent of the page you are on): flat green */
html.dark-theme .main-menu.menu-light .navigation > li.sidebar-group-active > a,
html.dark-theme .main-menu.menu-light .navigation > li.open > a,
html.dark-theme .main-menu.menu-light .navigation > li.has-sub.open > a,
html.dark-theme .main-menu.menu-light .navigation > li.has-sub.active > a,
html.dark-theme .main-menu.menu-collapsed .navigation > li.sidebar-group-active > a,
html.dark-theme .main-menu.menu-collapsed:not(.expanded) .navigation > li.sidebar-group-active > a,
html.dark-theme .main-menu .navigation li.has-sub.open > a,
html.dark-theme .main-menu .navigation li.has-sub.sidebar-group-active > a,
html.dark-theme .main-menu .navigation li.has-sub:has(> ul li.active) > a:not(#a) {
    background: #057d44 !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

/* icons / text inside a green or gradient item stay white */
html.dark-theme .main-menu .navigation > li.active > a *,
html.dark-theme .main-menu .navigation > li.sidebar-group-active > a *,
html.dark-theme .main-menu .navigation > li.open > a * {
    color: #ffffff !important;
}

/* 6f. SUBMENU: flat surface, no glow, no box */
html.dark-theme .main-menu .navigation li ul li a,
html.dark-theme .main-menu .navigation li ul li a span {
    color: var(--text-color) !important;
}

html.dark-theme .main-menu .navigation li.has-sub > ul.menu-content:not(#a):not(#b),
html.dark-theme .main-menu .navigation li.has-sub.open > ul.menu-content:not(#a):not(#b),
html.dark-theme .main-menu .navigation li.sidebar-group-active > ul.menu-content:not(#a):not(#b),
html.dark-theme .main-menu.menu-light .navigation li ul:not(#a):not(#b) {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* every child row: transparent, no glow (removes the dark band behind
   Purchase Unit / Item Group / Brand / ...) */
html.dark-theme .main-menu .navigation li.has-sub ul li:not(#a):not(#b),
html.dark-theme .main-menu .navigation li.has-sub ul li > a:not(#a):not(#b) {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* selected child: soft green tint on the li, nothing on the link */
html.dark-theme .main-menu .navigation li.has-sub ul li.active:not(#a):not(#b) {
    background: rgba(5, 125, 68, 0.22) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 6px;
}

html.dark-theme .main-menu .navigation li.has-sub ul li.active > a:not(#a):not(#b) {
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

html.dark-theme .main-menu .navigation li ul li.active > a span,
html.dark-theme .main-menu .navigation li ul li.active > a .menu-item {
    color: #ffffff !important;
    font-weight: 600;
}

/* 6g. flyout sub-menu when the sidebar is collapsed */
html.dark-theme .main-menu.menu-collapsed .navigation li.has-sub > ul,
html.dark-theme .main-menu.menu-collapsed .navigation li.has-sub .menu-content,
html.dark-theme .main-menu.menu-collapsed .navigation li.has-sub:hover > ul {
    background: var(--sec-bg-color) !important;
    border: 1px solid var(--border-color);
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */

html.dark-theme footer.footer {
    background-color: var(--bg-color);
    color: var(--sec-text-color);
}

/* --------------------------------------------------------------------------
   8. CARDS (+ chart cards, stat cards)

   8. CARDS (+ dashboard chart cards + stat cards)
   -------------------------------------------------------------------------- */

html.dark-theme .card,
html.dark-theme .card-header,
html.dark-theme .card-footer {
    background-color: var(--sec-bg-color);
    border-color: var(--border-color);
    color: var(--sec-text-color);
}

html.dark-theme .card {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.35);
}

/* STRUCTURAL GUESS: dashboard chart cards stayed white. Replace with the
   real card class once known. */
html.dark-theme .card:has(.apexcharts-canvas),
html.dark-theme :has(> div > .apexcharts-canvas),
html.dark-theme :has(> .apexcharts-canvas) {
    background-color: var(--sec-bg-color) !important;
    color: var(--sec-text-color) !important;
}

html.dark-theme .apexcharts-canvas,
html.dark-theme .apexcharts-canvas svg {
    background: transparent !important;
}

/* STRUCTURAL GUESS: Clinical Analytics stat cards stayed white. (Narrowed
   from [class*="stat"], which also matched status badges.) */
html.dark-theme [class*="stat-card"]:not(.p-stats-card),
html.dark-theme [class*="stats-card"]:not(.p-stats-card),
html.dark-theme [class*="kpi"],
html.dark-theme [class*="metric"],
html.dark-theme [class*="summary-card"],
html.dark-theme [class*="count-card"],
html.dark-theme [class*="analytics-card"] {
    background-color: var(--sec-bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-theme [class*="stat-card"]:not(.p-stats-card) *,
html.dark-theme [class*="stats-card"]:not(.p-stats-card) *,
html.dark-theme [class*="kpi"] *,
html.dark-theme [class*="metric"] *,
html.dark-theme [class*="summary-card"] *,
html.dark-theme [class*="count-card"] *,
html.dark-theme [class*="analytics-card"] * {
    color: var(--text-color) !important;
}

/* structural fallback: a box holding a title directly followed by a big
   number */
html.dark-theme div:has(> h1 + h2),
html.dark-theme div:has(> h3 + h1),
html.dark-theme div:has(> p + h1),
html.dark-theme div:has(> p + h2),
html.dark-theme div:has(> p + h3),
html.dark-theme div:has(> span + h1),
html.dark-theme div:has(> span + h2),
html.dark-theme div:has(> h5 + h2),
html.dark-theme div:has(> h5 + h3) {
    background-color: var(--sec-bg-color) !important;
    color: var(--text-color) !important;
}

/* --------------------------------------------------------------------------
   9. TABLES + DATATABLES

   (base, header, rows, footer, icons, badges, progress, pills)
   -------------------------------------------------------------------------- */

/* 9a. base */
html.dark-theme .table,
html.dark-theme table.dataTable {
    color: var(--sec-text-color);
}

/* beats overrides.css #000 */
html.dark-theme table {
    color: var(--sec-text-color) !important;
}

html.dark-theme .table th,
html.dark-theme .table td,
html.dark-theme table.dataTable th,
html.dark-theme table.dataTable td {
    border-color: var(--border-color);
}

/* 9b. header (forced: page CSS keeps painting it light) */
html.dark-theme .table thead,
html.dark-theme .table thead tr,
html.dark-theme .table thead th,
html.dark-theme .table thead td,
html.dark-theme .table tfoot th,
html.dark-theme table.dataTable thead,
html.dark-theme table.dataTable thead tr,
html.dark-theme table.dataTable thead th,
html.dark-theme table.dataTable thead td,
html.dark-theme .dataTables_scrollHead,
html.dark-theme .dataTables_scrollHeadInner,
html.dark-theme thead.thead-light th,
html.dark-theme thead.table-light th,
html.dark-theme table thead th {
    background-color: var(--table-head-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme table.dataTable thead th span {
    color: var(--text-color) !important;
}

/* sort arrows */
html.dark-theme table.dataTable thead .sorting:before,
html.dark-theme table.dataTable thead .sorting:after,
html.dark-theme table.dataTable thead .sorting_asc:before,
html.dark-theme table.dataTable thead .sorting_asc:after,
html.dark-theme table.dataTable thead .sorting_desc:before,
html.dark-theme table.dataTable thead .sorting_desc:after {
    color: var(--text-color) !important;
}

/* 9c. body rows */
html.dark-theme table.dataTable tbody tr,
html.dark-theme .table tbody tr {
    background-color: transparent;
}

html.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

html.dark-theme .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
}

/* body cell text. NOTE: no "background: transparent" here on purpose, it
   wiped badges and progress bars. */
html.dark-theme table.dataTable tbody td,
html.dark-theme table.dataTable tbody th,
html.dark-theme .table tbody td,
html.dark-theme .table tbody th,
html.dark-theme table.dataTable tbody td span,
html.dark-theme table.dataTable tbody td div,
html.dark-theme table.dataTable tbody td p {
    color: var(--sec-text-color) !important;
}

html.dark-theme table.dataTable tbody td a:not(.btn) {
    color: var(--value-color);
}

/* GLOBAL EFFECT: every table body/row/cell gets the dark surface.
   :not(#a):not(#b) raises specificity above page-level row styles (booking
   panel rows, modal tables, etc.). */
html.dark-theme table tbody tr:not(#a):not(#b),
html.dark-theme table tbody tr:not(#a):not(#b) > td:not(#a):not(#b),
html.dark-theme table tbody tr:not(#a):not(#b) > th:not(#a):not(#b) {
    background-color: var(--sec-bg-color) !important;
    color: var(--sec-text-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme table tbody tr:not(#a):not(#b) td *:not(.badge):not(.btn):not(img):not(svg):not(i):not(.progress):not(.progress-bar) {
    color: var(--sec-text-color) !important;
}

html.dark-theme table thead th:not(#a):not(#b) {
    background-color: var(--table-head-bg) !important;
    color: var(--text-color) !important;
}

/* green group row (e.g. "Abhyangam - Mukha Abhyangam") */
html.dark-theme table tbody tr:not(#a):not(#b):has(> td[colspan]),
html.dark-theme table tbody tr:not(#a):not(#b):has(> td[colspan]) > td {
    background-color: rgba(5, 125, 68, 0.22) !important;
    color: var(--text-color) !important;
}

/* footer / totals row (composition table) */
html.dark-theme table tfoot,
html.dark-theme table tfoot tr,
html.dark-theme table tfoot td,
html.dark-theme table tfoot th,
html.dark-theme table .table-light,
html.dark-theme table .table-light td {
    background-color: var(--table-head-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme table tfoot span,
html.dark-theme table tfoot strong,
html.dark-theme table tfoot div {
    color: var(--text-color) !important;
}

/* 9c-2. inputs / textareas / selects inside table cells of the tab pages
   (Panchkarma package table: "Therapist Note", "Patient Note" were white
   boxes). Underline-style inputs (inline border-bottom) are left alone. */
html.dark-theme .tab-pane table td :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="file"]):not(.select2-search__field):not(.ts-control input):not([style*="border-bottom" i]):not(#a):not(#b) {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 9d. DataTables chrome */
html.dark-theme .dataTables_wrapper .dataTables_length,
html.dark-theme .dataTables_wrapper .dataTables_filter,
html.dark-theme .dataTables_wrapper .dataTables_info,
html.dark-theme .dataTables_wrapper .dataTables_processing,
html.dark-theme .dataTables_wrapper .dataTables_paginate {
    color: var(--sec-text-color) !important;
}

html.dark-theme .dataTables_wrapper .dataTables_filter input {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-theme .dataTables_wrapper .dt-buttons .btn,
html.dark-theme .dataTables_wrapper .dt-buttons button.dt-button {
    color: var(--sec-text-color);
    border-color: var(--border-color);
}

/* 9e. action icons */
/* make sure no filter recolors the colored circles (eye = teal) */
html.dark-theme table td a,
html.dark-theme table td button {
    filter: none !important;
}

/* generic icon colours (Book Therapy button excluded, see section 19) */
html.dark-theme table td svg[fill="none"]:not(#slot_schedule_modal svg),
html.dark-theme table td svg[fill="none"]:not(#slot_schedule_modal svg) *,
html.dark-theme table td a i[class*="eye"],
html.dark-theme table td a i[class*="pdf"],
html.dark-theme table td a [class*="fa-eye"],
html.dark-theme table td a [class*="fa-file-pdf"] {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

html.dark-theme table td svg[fill="currentColor"]:not(#slot_schedule_modal svg) {
    color: #ffffff !important;
}

/* EXACT FIX for the eye / PDF icons (no script needed). Markup seen in
   DevTools: <a class="btn btn-icon rounded-circle"><span> <svg viewBox="0
   -960 960 960" width="30" height="30"><path d="..."/></svg> Material
   Symbols icons: the path has no fill, so it defaults to black. viewBox "0
   -960 960 960" is unique to that icon set, so this never touches the
   colored circle buttons (edit / delete / WhatsApp). */
html.dark-theme td svg[viewBox="0 -960 960 960"]:not(#slot_schedule_modal svg),
html.dark-theme .btn-icon svg[viewBox="0 -960 960 960"]:not(#slot_schedule_modal svg) {
    fill: #ffffff !important;
}

html.dark-theme td svg[viewBox="0 -960 960 960"] path:not([fill]):not([style*="fill"]),
html.dark-theme .btn-icon svg[viewBox="0 -960 960 960"] path:not([fill]):not([style*="fill"]) {
    fill: #ffffff !important;
}

/* never invert these twice (white fill + scanner class would turn them
   black) */
html.dark-theme svg[viewBox="0 -960 960 960"].ag-invert {
    filter: none !important;
}

/* fallbacks for other black glyphs: <img>, inline SVG with black
   fill/stroke, inline style colour. Only the glyph is targeted, never the
   colored circle. */
html.dark-theme table td a > img[src*="eye" i]:not([src*="circle" i]),
html.dark-theme table td a > img[src*="pdf" i]:not([src*="circle" i]),
html.dark-theme table td a > img[src*="view" i]:not([src*="circle" i]) {
    filter: invert(1) brightness(1.2) !important;
}

html.dark-theme table td svg[fill="#000"],
html.dark-theme table td svg[fill="#000000"],
html.dark-theme table td svg[fill="black"],
html.dark-theme table td svg [fill="#000"],
html.dark-theme table td svg [fill="#000000"],
html.dark-theme table td svg [fill="black"] {
    fill: #ffffff !important;
}

html.dark-theme table td svg[stroke="#000"],
html.dark-theme table td svg[stroke="#000000"],
html.dark-theme table td svg[stroke="black"],
html.dark-theme table td svg [stroke="#000"],
html.dark-theme table td svg [stroke="#000000"],
html.dark-theme table td svg [stroke="black"] {
    stroke: #ffffff !important;
}

html.dark-theme table td [style*="color:black"],
html.dark-theme table td [style*="color: black"],
html.dark-theme table td [style*="color:#000"],
html.dark-theme table td [style*="color: #000"] {
    color: #ffffff !important;
}

/* optional "dark icon scanner" script (end of panels/scripts.blade.php):
   it checks each icon's real colour and adds one of these classes. .ag-
   invert = svg / img icon that is dark only -> invert to white .ag-light-
   icon = font icon (<i>) with dark colour -> white */
html.dark-theme .ag-invert {
    filter: invert(1) brightness(1.2) !important;
}

html.dark-theme .ag-light-icon {
    color: #ffffff !important;
}

/* 9e-2. Book Therapy button: never inverted or filtered by the icon scanner classes */
html.dark-theme #slot_schedule_modal svg,
html.dark-theme #slot_schedule_modal svg * {
    filter: none !important;
}

/* 9f. Bootstrap badges inside tables (Scheduled / Completed / Cancelled /
   Remaining) */
html.dark-theme table .badge-info,
html.dark-theme table .badge.bg-info {
    background-color: #00cfe8 !important;
    color: #fff !important;
}

html.dark-theme table .badge-success,
html.dark-theme table .badge.bg-success {
    background-color: #28c76f !important;
    color: #fff !important;
}

html.dark-theme table .badge-danger,
html.dark-theme table .badge.bg-danger {
    background-color: #ea5455 !important;
    color: #fff !important;
}

html.dark-theme table .badge-warning,
html.dark-theme table .badge.bg-warning {
    background-color: #ff9f43 !important;
    color: #fff !important;
}

html.dark-theme table .badge-primary,
html.dark-theme table .badge.bg-primary {
    background-color: #7367f0 !important;
    color: #fff !important;
}

html.dark-theme table .badge-secondary,
html.dark-theme table .badge.bg-secondary {
    background-color: #82868b !important;
    color: #fff !important;
}

/* soft badges (anywhere) */
html.dark-theme .badge-light-info {
    background-color: rgba(0, 207, 232, 0.16) !important;
    color: #00cfe8 !important;
}

html.dark-theme .badge-light-success {
    background-color: rgba(40, 199, 111, 0.16) !important;
    color: #28c76f !important;
}

html.dark-theme .badge-light-danger {
    background-color: rgba(234, 84, 85, 0.16) !important;
    color: #ea5455 !important;
}

html.dark-theme .badge-light-warning {
    background-color: rgba(255, 159, 67, 0.16) !important;
    color: #ff9f43 !important;
}

html.dark-theme .badge-light-primary {
    background-color: rgba(115, 103, 240, 0.16) !important;
    color: #a29bf5 !important;
}

html.dark-theme .badge-light-secondary {
    background-color: rgba(130, 134, 139, 0.16) !important;
    color: #b5b5b5 !important;
}

/* 9g. progress bar (0/1, 2/3) */
html.dark-theme table .progress {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme table .progress .progress-bar {
    background-color: #28c76f !important;
    color: #fff !important;
}

/* 9h. therapy booking panel: Status pill = 10th column. Light blue pill,
   white text. SCOPED to tables that contain a full-width group row
   (td[colspan]), which only the booking panel has. It used to hit the 10th
   column of EVERY table, which turned the Stock Value cells on the item
   list into blue pills. */
html.dark-theme table:has(> tbody > tr > td[colspan]) tbody tr:not(#a):not(#b):not(#c) > td:nth-child(10):not(#a):not(#b):not(#c) :is(span, .badge, [class*="badge"], [class*="status"], [class*="pill"]):not(#a):not(#b):not(#c) {
    background-color: #29a9c9 !important;
    color: #ffffff !important;
    border-radius: 999px;
}

html.dark-theme table:has(> tbody > tr > td[colspan]) tbody tr:not(#a):not(#b):not(#c) > td:nth-child(10):not(#a):not(#b):not(#c) :is(span, .badge, [class*="badge"], [class*="status"], [class*="pill"]):not(#a):not(#b):not(#c) * {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   10. PAGINATION

   COLORS ONLY, plus a fit-content pill so the grey band hugs the numbers
   like light mode (it was full width). Size/shape of the page buttons
   must come from the theme. Never add width/height/padding/gap to the
   buttons here.
   -------------------------------------------------------------------------- */

html.dark-theme .page-link {
    background-color: var(--sec-bg-color);
    border-color: var(--border-color);
    color: var(--sec-text-color);
}

html.dark-theme .page-item.disabled .page-link {
    background-color: var(--sec-bg-color);
    color: var(--text-grey);
}

/* the pill behind the numbers */
html.dark-theme .pagination {
    background-color: var(--input-bg) !important;
}

/* DataTables: wrappers carry no band; only the <ul> is the pill, sized to
   its content */
html.dark-theme .dataTables_wrapper .dataTables_paginate,
html.dark-theme .dataTables_wrapper div.pagination {
    background: transparent !important;
}

html.dark-theme .dataTables_wrapper ul.pagination {
    width: fit-content !important;
    margin-left: auto !important;
    border-radius: 30px !important;
    /* full pill like light mode (was a small-radius box) */
}

/* the white square behind the active page: wrappers + DataTables default
   gradient/border must be cleared (the green circle is added back below) */
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark-theme .pagination .page-item,
html.dark-theme .pagination .page-item.active,
html.dark-theme .pagination .page-item.disabled {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.dark-theme .pagination .page-item .page-link {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--sec-text-color) !important;
}

html.dark-theme .pagination .page-item.active .page-link,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #057d44 !important;
    background-image: none !important;
    color: #ffffff !important;
}

html.dark-theme .pagination .page-item.disabled .page-link {
    color: var(--text-grey) !important;
    background-color: transparent !important;
}

html.dark-theme .pagination .page-item:hover:not(.active):not(.disabled) .page-link {
    background-color: var(--hover-bg) !important;
}

/* --------------------------------------------------------------------------
   11. TABS + PILL SWITCHERS
   -------------------------------------------------------------------------- */

html.dark-theme .nav-tabs {
    border-color: var(--border-color);
}

html.dark-theme .nav-tabs .nav-link {
    color: var(--text-grey);
    border-color: transparent;
}

html.dark-theme .nav-tabs .nav-link.active {
    background-color: var(--sec-bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

html.dark-theme .nav-pills .nav-link:not(.active) {
    color: var(--text-grey);
}

/* appointment list: Today's / Tomorrow's / All List */
html.dark-theme .custom-style {
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme a:hover .custom-style,
html.dark-theme .custom-style:hover {
    background-color: #00cfe8 !important;
    color: #000000 !important;
}

html.dark-theme .custom-style-active {
    background-color: #00cfe8 !important;
    color: #000000 !important;
}

/* Therapy Booking / Package Booking switcher. STRUCTURAL GUESS (open item
   B): real class of the white "Package Booking" pill is unknown. Replace
   with an exact selector. The grey band is skipped for any box that holds
   a checkbox (the Diet Chart legend with its "All" box, see section 15)
   and for the navbar. */
html.dark-theme .nav-pills:not(:has(input[type="checkbox"])),
html.dark-theme ul.nav:not(.nav-tabs):not(.navbar-nav):not(:has(input[type="checkbox"])),
html.dark-theme [role="tablist"]:not(:has(input[type="checkbox"])) {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme .nav-pills .nav-link:not(.active),
html.dark-theme .nav .nav-item .nav-link:not(.active),
html.dark-theme .nav-link:not(.active),
html.dark-theme [role="tab"]:not(.active) {
    background-color: transparent !important;
    color: var(--sec-text-color) !important;
}

/* switcher box = a box whose direct child is the selected tab, next to
   other tabs */
html.dark-theme :is(div, ul, nav, span):has(> [class*="active"]):has(> :not([class*="active"])):not(.tab-content):not(.pagination):not(.nav-tabs):not(.navigation):not(tbody):not(.main-menu):not(.main-menu *):not(.header-navbar *):not(.dropdown-menu):not(#a) {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* inactive tab = siblings of the selected tab, plus their contents */
html.dark-theme :is(div, ul, nav, span):has(> [class*="active"]) > :not([class*="active"]):not(.tab-pane):not(.page-item):not(tr):not(tbody):not(.main-menu *):not(.header-navbar *):not(.nav-tabs *):not(#a),
html.dark-theme :is(div, ul, nav, span):has(> [class*="active"]) > :not([class*="active"]):not(.tab-pane):not(.page-item):not(tr):not(tbody):not(.main-menu *):not(.header-navbar *):not(.nav-tabs *):not(#a) * {
    background-color: transparent !important;
    color: var(--sec-text-color) !important;
}

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */

/* ---- 12a. base inputs, select2, Tom Select, Choices.js, flatpickr */
html.dark-theme .form-control,
html.dark-theme .custom-select,
html.dark-theme .input-group-text,
html.dark-theme .select2-container--default .select2-selection--single,
html.dark-theme .select2-container--default .select2-selection--multiple,
html.dark-theme .select2-dropdown,
html.dark-theme .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

html.dark-theme .form-control:focus,
html.dark-theme .custom-select:focus {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--primary-color);
}

html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly] {
    background-color: #2a2a2a;
    opacity: 0.8;
}

html.dark-theme .form-control::placeholder {
    color: var(--text-grey);
}

/* readonly / disabled inputs were light grey with dark text (composition
   form) */
html.dark-theme input[readonly],
html.dark-theme input:disabled,
html.dark-theme select:disabled,
html.dark-theme textarea[readonly],
html.dark-theme textarea:disabled,
html.dark-theme .form-control[readonly],
html.dark-theme .form-control:disabled {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
    opacity: 1;
}

html.dark-theme input[readonly]::placeholder,
html.dark-theme input:disabled::placeholder {
    color: var(--text-grey) !important;
}

/* select2 */
html.dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--text-color);
}

html.dark-theme .select2-container--default .select2-results__option {
    color: var(--sec-text-color);
}

html.dark-theme .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--hover-bg);
}

/* select2: page CSS (inside modals especially) can repaint the box white,
   so force it */
html.dark-theme .select2-container--default .select2-selection--single:not(#a):not(#b),
html.dark-theme .select2-container--default .select2-selection--multiple:not(#a):not(#b) {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered:not(#a):not(#b) {
    color: var(--text-color) !important;
}

html.dark-theme .select2-container--default .select2-selection--single .select2-selection__arrow b:not(#a) {
    border-top-color: var(--text-grey) !important;
}

/* Tom Select + Choices.js */
html.dark-theme .ts-control,
html.dark-theme .ts-wrapper.single .ts-control,
html.dark-theme .ts-wrapper.multi .ts-control,
html.dark-theme .ts-wrapper .ts-control,
html.dark-theme .ts-wrapper.single.input-active .ts-control,
html.dark-theme .ts-control input,
html.dark-theme .choices__inner {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme .ts-control .item,
html.dark-theme .choices__item,
html.dark-theme .choices__input {
    color: var(--text-color) !important;
}

html.dark-theme .choices__input {
    background-color: transparent !important;
}

html.dark-theme .ts-control input::placeholder,
html.dark-theme .ts-control .placeholder {
    color: var(--text-grey) !important;
}

html.dark-theme .ts-wrapper.disabled .ts-control {
    opacity: 0.7;
}

html.dark-theme .ts-dropdown,
html.dark-theme .ts-dropdown .option,
html.dark-theme .choices__list--dropdown,
html.dark-theme .choices__list[aria-expanded] {
    background-color: var(--sec-bg-color) !important;
    color: var(--sec-text-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme .ts-dropdown .active,
html.dark-theme .choices__list--dropdown .choices__item--selectable.is-highlighted,
html.dark-theme .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
}

/* multi-select CHIPS (Qualification / Degree: "M.B.B.S", Specialization:
   "All Chronic Diseases", symptom chips ...). The chip keeps a light
   background, so its text must be BLACK. The generic white-text rules
   above made the chip text invisible. */
html.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice:not(#a):not(#b),
html.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__display:not(#a):not(#b),
html.dark-theme .ts-wrapper.multi .ts-control > div:not(#a):not(#b),
html.dark-theme .ts-wrapper.multi .ts-control > .item:not(#a):not(#b),
html.dark-theme .choices__list--multiple .choices__item:not(#a):not(#b) {
    background-color: #e4e4e7 !important;
    border-color: #c9c9ce !important;
    color: #000000 !important;
}

html.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:not(#a),
html.dark-theme .ts-wrapper.multi .ts-control > div .remove:not(#a),
html.dark-theme .choices__list--multiple .choices__item .choices__button:not(#a) {
    color: #000000 !important;
    border-color: #c9c9ce !important;
}

/* flatpickr */
html.dark-theme .flatpickr-calendar {
    background: var(--sec-bg-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html.dark-theme .flatpickr-months .flatpickr-month,
html.dark-theme .flatpickr-current-month .flatpickr-monthDropdown-months,
html.dark-theme .flatpickr-current-month input.cur-year,
html.dark-theme span.flatpickr-weekday,
html.dark-theme .flatpickr-weekdays {
    background: var(--sec-bg-color);
    color: var(--text-color);
}

html.dark-theme .flatpickr-day {
    color: var(--sec-text-color);
}

html.dark-theme .flatpickr-day:hover {
    background: var(--hover-bg);
    border-color: var(--hover-bg);
}

html.dark-theme .flatpickr-day.flatpickr-disabled,
html.dark-theme .flatpickr-day.prevMonthDay,
html.dark-theme .flatpickr-day.nextMonthDay {
    color: #666666;
}

html.dark-theme .flatpickr-months .flatpickr-prev-month svg,
html.dark-theme .flatpickr-months .flatpickr-next-month svg {
    fill: var(--text-color);
}

/* ---- 12b. line-style (underline) inputs Plain "underline" inputs (a line
   to type on, no grey box). Three detectors, none tied to a parent
   container: A. any text-like input that is NOT a .form-control B. inputs
   styled as a line through inline style (border-bottom / border:0 / none)
   C. line-style helper classes */
html.dark-theme input:not(.form-control):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not(.global-search-input):not(.select2-search__field):not(.choices__input):not([class*="swal2"]):not(.ts-control *):not(.dataTables_filter *):not(.flatpickr-calendar *),
html.dark-theme textarea:not(.form-control):not([class*="swal2"]):not(.ts-control *),
html.dark-theme input[style*="border-bottom" i],
html.dark-theme input[style*="border:0" i],
html.dark-theme input[style*="border: 0" i],
html.dark-theme input[style*="border:none" i],
html.dark-theme input[style*="border: none" i],
html.dark-theme textarea[style*="border-bottom" i],
html.dark-theme input.border-0,
html.dark-theme input.border-bottom,
html.dark-theme input[class*="underline" i],
html.dark-theme input[class*="input-line" i],
html.dark-theme input[class*="line-input" i],
html.dark-theme input[class*="bottom-line" i] {
    border-bottom-color: #ffffff !important;
    /* the line you type on */ background-color: transparent !important;
    /* no grey chip, same as light mode */ color: #ffffff !important;
    /* typed text */ caret-color: #ffffff;
}

html.dark-theme input:not(.form-control)::placeholder,
html.dark-theme input[style*="border-bottom" i]::placeholder {
    color: var(--text-grey) !important;
}

/* ---- 12c. bordered boxes: WHITE border Prescription tab boxes next to
   Symptoms, Complaints (Lakshan), Ashtvidh Pariksha, Dashavidh Pariksha,
   Samprapti, Strotas Pariksha. In light mode they have a black 1px border;
   in dark mode the border was dark grey on a dark page. Colour = --field-
   line (section 2). The :not(#a):not(#b) parts raise the specificity above
   the page's own border rules. 0. EXACT rule (ids found in DevTools): the
   .border-black box that holds one of the six prescription fields 1. by
   element type, anywhere on the page (guess) 2. read-only / disabled
   inputs inside the tab pages (guess) 3. by field name or id (guess) */
/* 0. exact: the outer .border-black box of the six prescription fields */
html.dark-theme .border-black:has( #examination-symptoms, #other_present_complaints, #prescription-ashtvidh, #prescription-dashavidh, #prescription-samprapti, #prescription-strotas ) {
    border: 1px solid #ffffff !important;
    border-color: #ffffff !important;
    border-radius: 4px;
}

/* the text filled into those boxes and the section labels stay readable */
html.dark-theme #examination-symptoms,
html.dark-theme #other_present_complaints,
html.dark-theme #prescription-ashtvidh,
html.dark-theme #prescription-dashavidh,
html.dark-theme #prescription-samprapti,
html.dark-theme #prescription-strotas {
    color: #ffffff !important;
}

html.dark-theme .prescription-data h6 {
    color: #ffffff !important;
}

/* 1. by element type */
html.dark-theme :is( textarea, [contenteditable="true"], div.form-control, ul.form-control, .select2-container--default .select2-selection--multiple, .ts-wrapper.multi .ts-control, .tagify, .note-editor.note-frame, .ck-editor__editable, .ck.ck-editor__main > .ck-editor__editable ):not(.dataTables_filter *):not(.swal2-popup *):not(.flatpickr-calendar *):not(#a):not(#b) {
    border-color: var(--field-line) !important;
}

/* 2. read-only / disabled inputs inside the tab pages */
html.dark-theme :is(.tab-pane, .tab-content) :is(input[readonly], input:disabled):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not(.select2-search__field):not(.ts-control *):not(#a):not(#b) {
    border-color: var(--field-line) !important;
    color: var(--text-color) !important;
}

/* 3. by field name / id */
html.dark-theme :is(textarea, input, div, ul):is( [name*="symptom" i], [id*="symptom" i], [name*="lakshan" i], [id*="lakshan" i], [name*="ashtvidh" i], [id*="ashtvidh" i], [name*="ashtavidh" i], [id*="ashtavidh" i], [name*="dashavidh" i], [id*="dashavidh" i], [name*="dashvidh" i], [id*="dashvidh" i], [name*="samprapti" i], [id*="samprapti" i], [name*="strotas" i], [id*="strotas" i], [name*="srotas" i], [id*="srotas" i] ):not([type="checkbox"]):not([type="radio"]):not(label):not(#a):not(#b) {
    border-color: var(--field-line) !important;
}

/* focus keeps the blue accent so the active box is still obvious */
html.dark-theme :is(textarea, [contenteditable="true"], div.form-control, input[readonly], input:disabled):focus:not(#a):not(#b),
html.dark-theme :is(textarea, input, div, ul):is( [name*="symptom" i], [id*="symptom" i], [name*="lakshan" i], [id*="lakshan" i], [name*="pariksha" i], [id*="pariksha" i], [name*="samprapti" i], [id*="samprapti" i], [name*="strotas" i], [id*="strotas" i] ):focus:not(#a):not(#b) {
    border-color: var(--primary-color) !important;
}

/* 12d. forced input colours (with fallbacks) + phone country-code dropdown + select2 options */
html.dark-theme .form-control,
html.dark-theme .custom-select,
html.dark-theme .input-group-text,
html.dark-theme .select2-container--default .select2-selection--single,
html.dark-theme .select2-container--default .select2-selection--multiple,
html.dark-theme .select2-dropdown,
html.dark-theme .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg, #2b2b2b) !important;
    border-color: var(--border-color, #555555) !important;
    color: var(--text-color, #f1f1f1) !important;
}

/* Phone country-code dropdown */
html.dark-theme .iti__country-list,
html.dark-theme .iti__dropdown-content,
html.dark-theme .iti__search-input,
html.dark-theme .iti__selected-country,
html.dark-theme .iti__selected-dial-code {
    background-color: var(--input-bg, #2b2b2b) !important;
    border-color: var(--border-color, #555555) !important;
    color: var(--text-color, #f1f1f1) !important;
}

/* Country names and dial codes */
html.dark-theme .iti__country,
html.dark-theme .iti__country-name,
html.dark-theme .iti__dial-code {
    color: var(--text-color, #f1f1f1) !important;
}

/* Country hover and selected states */
html.dark-theme .iti__country:hover,
html.dark-theme .iti__country.iti__highlight {
    background-color: #3b3b3b !important;
    color: #ffffff !important;
}

/* Placeholder text */
html.dark-theme .form-control::placeholder,
html.dark-theme .iti__search-input::placeholder,
html.dark-theme .select2-search__field::placeholder {
    color: #b8b8b8 !important;
    opacity: 1 !important;
}

/* Select2 dropdown options */
html.dark-theme .select2-container--default .select2-results__option {
    background-color: var(--input-bg, #2b2b2b) !important;
    color: var(--text-color, #f1f1f1) !important;
}

html.dark-theme .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3b3b3b !important;
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   13. MODALS, DROPDOWNS, LISTS, SWEETALERT
   -------------------------------------------------------------------------- */

html.dark-theme .modal-content,
html.dark-theme .modal-header,
html.dark-theme .modal-footer {
    background-color: var(--sec-bg-color);
    border-color: var(--border-color);
    color: var(--sec-text-color);
}

html.dark-theme .modal-header {
    background-color: var(--sec-bg-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme .modal-header .modal-title,
html.dark-theme .modal-header h1,
html.dark-theme .modal-header h2,
html.dark-theme .modal-header h3,
html.dark-theme .modal-header h4,
html.dark-theme .modal-header h5,
html.dark-theme .modal-header h6 {
    color: var(--text-color) !important;
}

html.dark-theme .modal .close,
html.dark-theme .modal-header .close,
html.dark-theme .modal button.close {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-color) !important;
    text-shadow: none;
    opacity: 1;
}

html.dark-theme .dropdown-menu {
    background-color: var(--sec-bg-color);
    border-color: var(--border-color);
    color: var(--sec-text-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html.dark-theme .dropdown-item {
    color: var(--sec-text-color);
}

html.dark-theme .dropdown-item:hover,
html.dark-theme .dropdown-item:focus {
    background-color: var(--hover-bg);
    color: var(--text-color);
}

html.dark-theme .dropdown-divider {
    border-color: var(--border-color);
}

html.dark-theme .list-group-item {
    background-color: var(--sec-bg-color);
    border-color: var(--border-color);
    color: var(--sec-text-color);
}

html.dark-theme .swal2-popup {
    background: var(--sec-bg-color);
    color: var(--sec-text-color);
}

html.dark-theme .swal2-title,
html.dark-theme .swal2-html-container,
html.dark-theme .swal2-content {
    color: var(--text-color);
}

/* Schedule Slot modal (Panchkarma): the white card around "Attending
   Doctor", the notes and the time-slot tiles. STRUCTURAL GUESS: every box
   that contains the slot tiles (.box) is painted dark. Replace with the
   real class once known. */
html.dark-theme .modal-content :is(div, section):has(.box):not(.box):not(.row):not([class*="col-"]):not(#a):not(#b) {
    background-color: var(--sec-bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--sec-text-color) !important;
}

/* any other element inside a modal that is painted white inline
   (style="background:#fff") */
html.dark-theme .modal-content :is( [style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background:white"], [style*="background: white"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background-color:#ffffff"], [style*="background-color: #ffffff"], [style*="background-color:white"], [style*="background-color: white"] ):not(img):not(svg):not(.box-active):not(#a) {
    background-color: var(--sec-bg-color) !important;
}

/* "Create Custom Package" modal: page CSS uses #createPackageModal (ID)
   selectors */
html.dark-theme #createPackageModal .modal-content,
html.dark-theme #createPackageModal .modal-header,
html.dark-theme #createPackageModal .modal-body,
html.dark-theme #createPackageModal .modal-footer {
    background-color: var(--sec-bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--sec-text-color) !important;
}

html.dark-theme #createPackageModal .modal-title,
html.dark-theme #createPackageModal .form-label,
html.dark-theme #createPackageModal .package-preview h6,
html.dark-theme #createPackageModal .therapy-group > h6,
html.dark-theme #createPackageModal .subtitle-item strong,
html.dark-theme #createPackageModal .package-summary div[id] {
    color: var(--text-color) !important;
}

html.dark-theme #createPackageModal .form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-theme #createPackageModal .package-preview,
html.dark-theme #createPackageModal .therapy-group,
html.dark-theme #createPackageModal .subtitle-item,
html.dark-theme #createPackageModal .package-summary {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme #createPackageModal .package-summary strong,
html.dark-theme #createPackageModal .subtitle-item .text-muted {
    color: var(--text-grey) !important;
}

html.dark-theme #createPackageModal #final-price {
    color: #28c76f !important;
}

html.dark-theme #createPackageModal #discount-amount {
    color: #ff6b6b !important;
}

/* time-slot boxes (create appointment) */
html.dark-theme .box {
    color: var(--sec-text-color);
}

html.dark-theme .box:hover,
html.dark-theme .box-active,
html.dark-theme .slot-booked,
html.dark-theme .slot-cannot-book {
    color: #ffffff !important;
}

/* 13b. Schedule Slot modal: caption text and dropdowns (native select, select2, Tom Select, Choices.js) */
html.dark-theme .modal select:not(#a),
html.dark-theme #therapy_slots select:not(#a),
html.dark-theme .modal .select2-container--default .select2-selection--single,
html.dark-theme .modal .select2-container--default .select2-selection--multiple,
html.dark-theme #therapy_slots .select2-container--default .select2-selection--single,
html.dark-theme .modal .ts-control,
html.dark-theme .modal .choices__inner {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-theme .modal .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-theme #therapy_slots .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color) !important;
}

html.dark-theme .modal .select2-container--default .select2-selection--single .select2-selection__arrow b,
html.dark-theme #therapy_slots .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--text-color) !important;
}

/* caption text ("Attending Doctor") and any other plain text in the modal */
html.dark-theme :is(#slot, #therapy_slots, .modal) :is(span, strong, b, p, small, legend, div):not([class*="text-"]):not(.badge):not(.btn):not(.box):not(.box-active):not(.slot-booked):not(.slot-cannot-book):not([class*="select2"]):not([class*="ts-"]):not([class*="choices"]):not(.close):not(#a) {
    color: #f8f9fa !important;
}


/* 13c. Print Case Sheet dropdown panel + Follow-Up date picker (flatpickr) */
/* v2 definition of the panel: checkboxes + a button, and NO table, text input,
   textarea or select inside, so the Prescription form is never matched. The dark
   background rule outranks the see-through rule (three :not(#id) against two). */
/* 1. panel (and the plain wrapper around it, invisible on the card):
   opaque dark */
html.dark-theme :is(div, ul, section, form, aside):is( :has(> * > input[type="checkbox"]), :has(> * > * > input[type="checkbox"]), :has(> * > * > * > input[type="checkbox"]) ):has(button):not(:has(table)):not(:has(textarea)):not(:has(select)):not(:has(input:not([type="checkbox"]))):not(.card):not(.row):not(.card-body):not(.modal-body):not(.modal-content):not(.tab-pane):not(.tab-content):not(.content-wrapper):not(.app-content):not(.flatpickr-calendar):not(#a):not(#b):not(#c) {
    background-color: var(--input-bg) !important;
}

/* 2. white strips and rows inside the panel -> see-through, dividers ->
   dark lines (buttons and the date picker are left alone) */
html.dark-theme :is(div, ul, section, form, aside):is( :has(> * > input[type="checkbox"]), :has(> * > * > input[type="checkbox"]), :has(> * > * > * > input[type="checkbox"]) ):has(button):not(:has(table)):not(:has(textarea)):not(:has(select)):not(:has(input:not([type="checkbox"]))):not(.card):not(.row):not(.card-body):not(.modal-body):not(.modal-content):not(.tab-pane):not(.tab-content):not(.content-wrapper):not(.app-content):not(.flatpickr-calendar) :is(div, ul, li, label, p, span, section, header, footer):not(button):not(button *):not(.flatpickr-calendar):not(.flatpickr-calendar *):not(#a):not(#b) {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

/* 3. row hover */
html.dark-theme :is(div, ul, section, form, aside):is( :has(> * > input[type="checkbox"]), :has(> * > * > input[type="checkbox"]), :has(> * > * > * > input[type="checkbox"]) ):has(button):not(:has(table)):not(:has(textarea)):not(:has(select)):not(:has(input:not([type="checkbox"]))):not(.card):not(.row):not(.card-body):not(.modal-body):not(.modal-content):not(.tab-pane):not(.tab-content):not(.content-wrapper):not(.app-content):not(.flatpickr-calendar) label:hover:not(#a):not(#b):not(#c):not(#d) {
    background-color: var(--hover-bg) !important;
}

/* 4. date picker ("Next Visit Follow-Up" and every other flatpickr):
   opaque dark */
html.dark-theme .flatpickr-calendar:not(#a):not(#b) {
    background: var(--sec-bg-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

html.dark-theme .flatpickr-calendar .flatpickr-months,
html.dark-theme .flatpickr-calendar .flatpickr-month,
html.dark-theme .flatpickr-calendar .flatpickr-innerContainer,
html.dark-theme .flatpickr-calendar .flatpickr-rContainer,
html.dark-theme .flatpickr-calendar .flatpickr-weekdays,
html.dark-theme .flatpickr-calendar .flatpickr-weekdaycontainer,
html.dark-theme .flatpickr-calendar .flatpickr-days,
html.dark-theme .flatpickr-calendar .dayContainer {
    background: var(--sec-bg-color) !important;
}

html.dark-theme .flatpickr-calendar,
html.dark-theme .flatpickr-calendar .flatpickr-day,
html.dark-theme .flatpickr-calendar .flatpickr-weekday,
html.dark-theme .flatpickr-calendar .flatpickr-current-month,
html.dark-theme .flatpickr-calendar .cur-year,
html.dark-theme .flatpickr-calendar .flatpickr-monthDropdown-months {
    color: var(--sec-text-color) !important;
}

html.dark-theme .flatpickr-calendar .flatpickr-day:hover {
    background: var(--hover-bg) !important;
}

html.dark-theme .flatpickr-calendar .flatpickr-day.selected {
    background: #057d44 !important;
    border-color: #057d44 !important;
    color: #ffffff !important;
}

html.dark-theme .flatpickr-calendar .flatpickr-day.prevMonthDay,
html.dark-theme .flatpickr-calendar .flatpickr-day.nextMonthDay,
html.dark-theme .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
    color: #666666 !important;
}


/* --------------------------------------------------------------------------
   14. CHARTS (ApexCharts text, grid, tooltip, toolbar)
   -------------------------------------------------------------------------- */

html.dark-theme .apexcharts-text,
html.dark-theme .apexcharts-xaxis-label,
html.dark-theme .apexcharts-yaxis-label,
html.dark-theme .apexcharts-datalabel,
html.dark-theme .apexcharts-datalabel-label,
html.dark-theme .apexcharts-datalabel-value,
html.dark-theme .apexcharts-legend-text {
    fill: var(--sec-text-color) !important;
    color: var(--sec-text-color) !important;
}

html.dark-theme .apexcharts-gridline,
html.dark-theme .apexcharts-xaxis-tick,
html.dark-theme .apexcharts-grid-borders line,
html.dark-theme .apexcharts-xaxis line,
html.dark-theme .apexcharts-yaxis line {
    stroke: var(--border-color) !important;
}

html.dark-theme .apexcharts-tooltip,
html.dark-theme .apexcharts-tooltip.apexcharts-theme-light,
html.dark-theme .apexcharts-xaxistooltip,
html.dark-theme .apexcharts-yaxistooltip,
html.dark-theme .apexcharts-menu {
    background: var(--sec-bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--sec-text-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

html.dark-theme .apexcharts-tooltip-title,
html.dark-theme .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--table-head-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-theme .apexcharts-menu-item:hover {
    background: var(--hover-bg) !important;
}

html.dark-theme .apexcharts-toolbar svg,
html.dark-theme .apexcharts-toolbar .apexcharts-menu-icon svg {
    fill: var(--text-grey) !important;
}

/* --------------------------------------------------------------------------
   15. DIET CHART (Eat / Avoid / Occasional + legend)

   15. DIET CHART (Eat / Avoid / Occasional state colors + legend) Cause:
   "html.dark-theme .card" outranked the page's .taken_class /
   .avoid_class rules, so every food card turned plain dark. Class names
   seen in DevTools: div.card.selected-card.item-1.taken_class /
   .avoid_class
   -------------------------------------------------------------------------- */

html.dark-theme .card.selected-card.taken_class,
html.dark-theme .card.selected-card[class*="taken"] {
    background-color: #37821f !important;
    /* Eat */ border-color: #37821f !important;
    color: #ffffff !important;
}

html.dark-theme .card.selected-card.avoid_class,
html.dark-theme .card.selected-card[class*="avoid"] {
    background-color: #bb5638 !important;
    /* Avoid */ border-color: #bb5638 !important;
    color: #ffffff !important;
}

html.dark-theme .card.selected-card.occasional_class,
html.dark-theme .card.selected-card[class*="occasion"] {
    background-color: #e8a22f !important;
    /* Occasional (class name is a guess) */ border-color: #e8a22f !important;
    color: #ffffff !important;
}

html.dark-theme .card.selected-card.taken_class *,
html.dark-theme .card.selected-card.avoid_class *,
html.dark-theme .card.selected-card.occasional_class *,
html.dark-theme .card.selected-card[class*="taken"] *,
html.dark-theme .card.selected-card[class*="avoid"] *,
html.dark-theme .card.selected-card[class*="occasion"] * {
    color: #ffffff !important;
}

/* Diet Chart legend (Eat / Avoid / Occasional / All): no grey band behind
   it, and a white outline on the selected item. The legend is recognised
   structurally: a box with a checkbox and an "active"-style child. Four
   :not(#id) parts outrank the other rules that paint it. */
html.dark-theme :is(div, ul, nav, span, section, p):has(input[type="checkbox"]):has(> [class*="active"], > * > [class*="active"]):not(#a):not(#b):not(#c):not(#d),
html.dark-theme ul.nav:has(input[type="checkbox"]):not(#a):not(#b):not(#c):not(#d),
html.dark-theme .nav-pills:has(input[type="checkbox"]):not(#a):not(#b):not(#c):not(#d) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html.dark-theme :is(div, ul, nav, span, section):has(input[type="checkbox"]) > [class*="active"],
html.dark-theme :is(div, ul, nav, span, section):has(input[type="checkbox"]) > * > [class*="active"] {
    border-color: #ffffff !important;
    outline-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   16. COMPOSITION FORM + ITEM/CREATE light boxes (STRUCTURAL GUESSES)

   16. COMPOSITION FORM + ITEM/CREATE: light boxes STRUCTURAL GUESSES
   (open item C). Replace with exact classes when known.
   -------------------------------------------------------------------------- */

/* Pricing Summary box (composition) and Dosage box (item/create): any box
   that directly wraps a table or readonly inputs */
html.dark-theme div:has(> table),
html.dark-theme div:has(> .table-responsive > table),
html.dark-theme div:has(> div > table),
html.dark-theme div:has(> .row > div > input[readonly]),
html.dark-theme div:has(> div > div > input[readonly]),
html.dark-theme div:has(> div > input[readonly]) {
    background-color: var(--sec-bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-theme div:has(> table) > h1,
html.dark-theme div:has(> table) > h2,
html.dark-theme div:has(> table) > h3,
html.dark-theme div:has(> table) > h4,
html.dark-theme div:has(> table) > h5,
html.dark-theme div:has(> table) > h6,
html.dark-theme div:has(> table) > label,
html.dark-theme div:has(> table) > span,
html.dark-theme div:has(> table) > p,
html.dark-theme div:has(> table) > strong,
html.dark-theme div:has(> .row > div > input[readonly]) > h1,
html.dark-theme div:has(> .row > div > input[readonly]) > h2,
html.dark-theme div:has(> .row > div > input[readonly]) > h3,
html.dark-theme div:has(> .row > div > input[readonly]) > h4,
html.dark-theme div:has(> .row > div > input[readonly]) > h5,
html.dark-theme div:has(> .row > div > input[readonly]) > h6,
html.dark-theme div:has(> .row > div > input[readonly]) label {
    color: var(--text-color) !important;
}

/* class-name guess for the same boxes */
html.dark-theme [class*="summary"]:not(.package-summary):not(.dataTables_info),
html.dark-theme [class*="pricing"] {
    background-color: var(--sec-bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--sec-text-color) !important;
}

html.dark-theme [class*="summary"] h1,
html.dark-theme [class*="summary"] h2,
html.dark-theme [class*="summary"] h3,
html.dark-theme [class*="summary"] h4,
html.dark-theme [class*="summary"] h5,
html.dark-theme [class*="summary"] h6,
html.dark-theme [class*="summary"] label,
html.dark-theme [class*="pricing"] h1,
html.dark-theme [class*="pricing"] h2,
html.dark-theme [class*="pricing"] h3,
html.dark-theme [class*="pricing"] h4,
html.dark-theme [class*="pricing"] h5,
html.dark-theme [class*="pricing"] h6,
html.dark-theme [class*="pricing"] label {
    color: var(--text-color) !important;
}

/* --------------------------------------------------------------------------
   17. PAGE-SPECIFIC FIXES (exact selectors, one page each)
   -------------------------------------------------------------------------- */

/* Print Setting page: unchecked Tailwind "peer" option buttons keep black
   text on their light background */
html.dark-theme input.peer:not(:checked) + div:not(#a):not(#b):not(#c):not(#d),
html.dark-theme input.peer:not(:checked) + div:not(#a):not(#b):not(#c):not(#d) * {
    color: #000000 !important;
}

/* Notification Settings page. The page defines its colours as variables,
   so redefining them on these elements turns the whole page dark. No Blade
   change. */
html.dark-theme .ns-page,
html.dark-theme .ns-header,
html.dark-theme .ns-toast,
html.dark-theme .ns-category,
html.dark-theme .ns-save-bar {
    --bg: #1e1e1e;
    --card: #242424;
    --surface: #2b2b2b;
    --border: #3b3b3b;
    --text-1: #ffffff;
    --text-2: #b5b5b5;
    --text-3: #9a9a9a;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* colours the page hard-codes instead of using variables */
html.dark-theme .ns-category:hover {
    border-color: #4a4a4a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

html.dark-theme .ns-toast {
    background: rgba(40, 199, 111, 0.12);
    border-color: rgba(40, 199, 111, 0.35);
    color: #28c76f;
}

/* toggle: off = grey, on = theme green */
html.dark-theme .ns-slider {
    background: #4a4a4a;
    border-color: #6b6b6b;
}

html.dark-theme .ns-toggle input:checked + .ns-slider {
    background: #057d44;
    border-color: #057d44;
}

/* --------------------------------------------------------------------------
   18. THERAPY BOOKING / PANCHKARMA (page-specific)

   PACKAGE BOOKING (Panchakarma tab) + SCHEDULE SLOT MODAL : 4 FIXES
   Paste each block into the section named in its header.
   -------------------------------------------------------------------------- */

/* 18a. Therapist Note / Patient Note bars */
html.dark-theme .therapist-note-text:not(#a):not(#b),
html.dark-theme .patient-note-text:not(#a):not(#b),
html.dark-theme :is(div, span, p):has(> .therapist-note-text):not(#a):not(#b),
html.dark-theme :is(div, span, p):has(> .patient-note-text):not(#a):not(#b) {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* 18b. Package header bar ("TESTabhyangampkg (15 Min) Kindly Book At Least 1 Slot For Now.") (STRUCTURAL GUESSES until the real class is known) */
html.dark-theme [class*="package" i][class*="head" i]:not(#a):not(#b),
html.dark-theme [class*="pkg" i][class*="head" i]:not(#a):not(#b),
html.dark-theme [style*="background:#f" i]:not(#a):not(#b),
html.dark-theme [style*="background: #f" i]:not(#a):not(#b),
html.dark-theme [style*="background-color:#f" i]:not(#a):not(#b),
html.dark-theme [style*="background-color: #f" i]:not(#a):not(#b),
html.dark-theme [style*="background:white" i]:not(#a):not(#b),
html.dark-theme [style*="background: white" i]:not(#a):not(#b),
html.dark-theme :is(.tab-pane, .tab-content, [id*="package" i], [class*="package" i], [id*="panch" i], [class*="panch" i]) :is(div, section, header):has(+ :is(table, .table-responsive, div:has(table))):not(.card):not(.table-responsive):not(.row):not(.alert):not([class*="col-"]):not(#a):not(#b),
html.dark-theme :is(.tab-pane, .tab-content, [id*="package" i], [class*="package" i], [id*="panch" i], [class*="panch" i]) :is(div, section, header):has(~ :is(table, .table-responsive, div:has(table))):not(.card):not(.table-responsive):not(.row):not(.alert):not([class*="col-"]):not(#a):not(#b) {
    background-color: var(--sec-bg-color) !important;
    border-color: var(--border-color) !important;
}

/* Panchkarma tab, package booking: the white bar above the package table
   ("TESTabhyangampkg (15 Min) Kindly Book At Least 1 Slot For Now.").
   STRUCTURAL GUESS: any block in a tab page whose next sibling is a table
   (or holds one) is dark; plain headings / bold text inside it are white.
   Coloured spans (blue "(15 Min)", orange note) keep their own colour.
   Replace with the real class once known. */
html.dark-theme .tab-pane :is(div, section, header):has(+ :is(table, .table-responsive, div:has(> table), div:has(> .table-responsive))):not(.card):not(.table-responsive):not(.row):not([class*="col-"]):not(#a):not(#b) {
    background-color: var(--sec-bg-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme .tab-pane :is(div, section, header):has(+ :is(table, .table-responsive, div:has(> table), div:has(> .table-responsive))):not(.card):not(.table-responsive):not(.row):not([class*="col-"]):not(#a):not(#b) > :is(h1, h2, h3, h4, h5, h6, strong, b, p, label, span:not([style*="color"]):not([class*="badge"])) {
    color: var(--text-color) !important;
}

/* 18c. Package title bar (exact classes) */
html.dark-theme .package-title-bar {
    background: #2b2b2b !important;
    color: #ffffff !important;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Package name */
html.dark-theme .package-title-bar h3,
html.dark-theme .package-title-bar h4,
html.dark-theme .package-title-bar .package-name,
html.dark-theme .package-title-bar strong {
    color: #ffffff !important;
}

/* Duration badge */
html.dark-theme .package-title-bar .badge {
    background: #1e3a5f !important;
    color: #8ab4ff !important;
}

/* Booking instruction */
html.dark-theme .package-title-bar .booking-message {
    color: #ff9838 !important;
}

/* Package name only — white in dark mode */
html.dark-theme .package-title-bar > :first-child {
    color: #ffffff !important;
}


/* 18d. Therapy Sitting Configuration (#therapyComponent) */
/* Main Therapy Sitting Configuration heading */
html.dark-theme #therapyComponent .card-header {
    background-color: #242424 !important;
    color: #ffffff !important;
    border-color: #484848 !important;
}

/* Therapy name and subsection name in the top configuration cards */
html.dark-theme #therapyComponent #allSittingsRow > div > div {
    background-color: #2b2b2b !important;
    border-color: #484848 !important;
}

html.dark-theme #therapyComponent #allSittingsRow > div > div > div {
    color: #f1f5f9 !important;
}

html.dark-theme #therapyComponent #allSittingsRow > div > div > div span {
    color: #cbd5e1 !important;
}

/* Expanded therapy title: Abhyangam — Sarvanga-Abhyangam */
html.dark-theme #therapyComponent .therapy-title,
html.dark-theme #therapyComponent .therapy-title > div,
html.dark-theme #therapyComponent .therapy-title > div > span:first-child {
    color: #ffffff !important;
}

/* Therapy section background and borders */
html.dark-theme #therapyComponent .therapy-block {
    background-color: #242424 !important;
    border-color: #484848 !important;
}

html.dark-theme #therapyComponent .therapy-title-bar {
    background-color: #2b2b2b !important;
    border-color: #484848 !important;
}

/* Table headings */
html.dark-theme #therapyComponent .therapy-table thead,
html.dark-theme #therapyComponent .therapy-table thead th {
    background-color: #303030 !important;
    color: #f1f5f9 !important;
    border-color: #484848 !important;
}

/* Table content */
html.dark-theme #therapyComponent .therapy-table tbody tr td {
    background-color: #242424 !important;
    color: #e5e7eb !important;
    border-color: #484848 !important;
}

/* Hovered table rows */
html.dark-theme #therapyComponent .therapy-table tbody tr:hover td {
    background-color: #353535 !important;
    color: #ffffff !important;
}

/* Sitting quantity input */
html.dark-theme #therapyComponent .sitting-count,
html.dark-theme #therapyComponent .sitting-count-top {
    background-color: #303030 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

/* Therapist Note and Patient Note */
html.dark-theme #therapyComponent .note-display {
    background-color: #303030 !important;
    color: #f1f5f9 !important;
    border-color: #484848 !important;
}

/* Preserve readable text for the booking instruction */
html.dark-theme #therapyComponent .alert-warning {
    color: #ffb45e !important;
    background-color: #382a1d !important;
    border-color: #59432d !important;
}

/* Keep green Book Slot button and label readable */
html.dark-theme #therapyComponent .schedule-btn,
html.dark-theme #therapyComponent .book-slot-text {
    color: #ffffff !important;
}

html.dark-theme #therapyComponent .schedule-btn {
    background-color: #045c32 !important;
}

/* 18e. Package Booking patient information card */
/* Package Booking patient information card */
html.dark-theme #packageBookingViewModal .info-box {
    background-color: #2b2b2b !important;
    color: #f8f9fa !important;
    border: 1px solid #444 !important;
    border-left: 3px solid #28a745 !important;
}

html.dark-theme #packageBookingViewModal .info-box strong,
html.dark-theme #packageBookingViewModal .info-box span,
html.dark-theme #packageBookingViewModal .info-box p,
html.dark-theme #packageBookingViewModal .info-box div {
    color: #f8f9fa !important;
}

html.dark-theme #packageBookingViewModal .info-box .text-muted {
    color: #c2c7d0 !important;
}

/* --------------------------------------------------------------------------
   19. BOOK THERAPY BUTTON (#slot_schedule_modal) - same look in light and dark
   -------------------------------------------------------------------------- */

/* The green button keeps its green and its white icon in BOTH themes. Its icon is
   NOT recoloured here: forcing fill/stroke on every svg part turned the check mark
   and its green cut-outs into one white blob. Global icon rules above exclude this
   button, so the svg shows exactly its light-mode colours. */
html.dark-theme #slot_schedule_modal,
html.dark-theme #slot_schedule_modal:visited,
html.dark-theme #slot_schedule_modal:hover,
html.dark-theme #slot_schedule_modal:focus,
html.dark-theme #slot_schedule_modal:active {
    background-color: #28c76f !important;
    border-color: #28c76f !important;
    color: #ffffff !important;
    opacity: 1;
    box-shadow: none;
}

/* font icons (if the button uses <i>) stay white; svg parts are left untouched */
html.dark-theme #slot_schedule_modal i,
html.dark-theme #slot_schedule_modal .fa,
html.dark-theme #slot_schedule_modal .fas,
html.dark-theme #slot_schedule_modal .far,
html.dark-theme #slot_schedule_modal .fa-solid {
    color: #ffffff !important;
    filter: none !important;
}

html.dark-theme #slot_schedule_modal:hover {
    background-color: #28c76f !important;
    border-color: #28c76f !important;
    color: #ffffff !important;
}

html.dark-theme #slot_schedule_modal:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
                         This is the End
   -------------------------------------------------------------------------- */