/* ========================================================= Herb East – Standard Theme (Bootstrap 5 first) Goal: clean, predictable, "not messy" badges - Do NOT override .badge globally (keeps Bootstrap behavior) - Provide optional .badge-soft-* helpers - Admin sidebar + layout fixes without breaking grid ========================================================= */ /* -------- Fonts (use with in ) -------- */ :root { --font-sans: "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* System tone: herb/nature (green) */ --brand: #198754; /* Bootstrap success */ --brand-700: #146c43; --bg: #f8fafc; --surface: #ffffff; --border: #e5e7eb; --ink: #0f172a; --muted: #64748b; --radius: 14px; --radius-sm: 10px; --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06); --shadow: 0 12px 28px rgba(2, 6, 23, 0.1); } html, body { height: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Typography */ .text-muted { color: var(--muted) !important; } a { color: var(--brand-700); } a:hover { color: #0f5132; } /* Layout helpers */ .app-shell { min-height: 100vh; } .app-main, [app-main] { min-width: 0; padding: 24px; } /* Cards */ .card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card:hover { box-shadow: var(--shadow); } .card-header { background: #f9fafb; border-bottom: 1px solid var(--border); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); font-weight: 600; } /* -------- Form Standardization -------- */ .form-control, .form-select, .input-group-text { border-radius: var(--radius-sm); border-color: var(--border); height: 40px; } .form-control:focus, .form-select:focus { border-color: rgba(25, 135, 84, 0.55); box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.15); } .form-label { font-weight: 600; color: var(--ink); margin-bottom: 6px; display: block; } .form-text { font-size: 0.875rem; color: var(--muted); margin-top: 4px; display: block; } /* Form group: wraps label + input + help text */ .form-group { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; } .form-group .form-control, .form-group .form-select { margin-bottom: 0; } /* Form row: wraps multiple form-groups */ .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: flex-start; } /* Form size variants */ .form-group-sm .form-label { font-size: 0.875rem; margin-bottom: 4px; } .form-group-lg .form-label { font-size: 1.125rem; margin-bottom: 8px; } /* Form column width helpers for mixed layouts */ .form-col-1 { grid-column: span 1; } .form-col-2 { grid-column: span 2; } .form-col-3 { grid-column: span 3; } /* Responsive form layouts */ @media (min-width: 768px) { .form-row-2 { grid-template-columns: repeat(2, 1fr); } .form-row-3 { grid-template-columns: repeat(3, 1fr); } .form-row-4 { grid-template-columns: repeat(4, 1fr); } } /* Buttons */ .btn { border-radius: var(--radius-sm); } .btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-brand:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; } .btn-outline-brand { color: var(--brand); border-color: var(--brand); } .btn-outline-brand:hover { background: var(--brand); border-color: var(--brand); color: #fff; } /* Tables */ .table thead th { background: #f9fafb; font-weight: 600; color: #334155; border-bottom: 1px solid var(--border); } .table td, .table th { vertical-align: middle; } /* Chips (separate from badges, so badges remain standard) */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; font-size: 12px; } /* ---------- BADGES: keep Bootstrap standard ---------- We do NOT change .badge. Provide optional soft variants (use these classes explicitly). */ .badge-soft-success { background: rgba(25, 135, 84, 0.12); color: #0f5132; border: 1px solid rgba(25, 135, 84, 0.25); } .badge-soft-warning { background: rgba(255, 193, 7, 0.14); color: #664d03; border: 1px solid rgba(255, 193, 7, 0.3); } .badge-soft-danger { background: rgba(220, 53, 69, 0.12); color: #842029; border: 1px solid rgba(220, 53, 69, 0.25); } .badge-soft-secondary { background: rgba(108, 117, 125, 0.12); color: #343a40; border: 1px solid rgba(108, 117, 125, 0.25); } .badge-soft-info { background: rgba(13, 202, 240, 0.14); color: #055160; border: 1px solid rgba(13, 202, 240, 0.28); } /* If your JS uses statusBadge().cls like "badge badge-approved" Keep it predictable by mapping to Bootstrap bg-* classes in JS. But in case old cls still exists, provide safe fallbacks: */ .badge-approved { background: #198754 !important; color: #fff !important; } .badge-submitted { background: #ffc107 !important; color: #212529 !important; } .badge-rejected { background: #dc3545 !important; color: #fff !important; } .badge-draft { background: #6c757d !important; color: #fff !important; } /* Thumbs */ .thumb { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); } /* Sidebar (Admin) – fix clipping, standard spacing */ .sidebar { background: #0b2f2a; /* deep herb */ color: rgba(255, 255, 255, 0.92); min-height: 100vh; padding: 14px 12px; overflow: hidden; } .sidebar .brand { padding: 8px 6px 14px; } .sidebar .brand .title { font-weight: 700; letter-spacing: -0.01em; } .sidebar .brand .subtitle { color: rgba(255, 255, 255, 0.72); font-size: 12px; } .sidebar .nav { max-height: calc(100vh - 140px); overflow: auto; padding-right: 6px; } .sidebar .nav::-webkit-scrollbar { width: 8px; } .sidebar .nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; } .sidebar .nav-link { color: rgba(255, 255, 255, 0.82); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; } .sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .sidebar .nav-link.active { background: rgba(25, 135, 84, 0.3); border: 1px solid rgba(25, 135, 84, 0.4); color: #fff; } /* Map fallback (keep balanced) */ .map-fallback { min-height: 360px; border-radius: var(--radius); border: 1px dashed rgba(25, 135, 84, 0.35); background: #f0fdf4; padding: 16px; } /* Responsive */ @media (max-width: 991.98px) { .app-main, [app-main] { padding: 16px; } .sidebar { min-height: auto; } .sidebar .nav { max-height: none; overflow: visible; } } /* ========================================================= Template upgrades: Dark mode + Collapsible sidebar ========================================================= */ /* Dark mode (driven by JS set data-bs-theme) */ body.theme-dark { --bg: #0b1220; --surface: #0f172a; --border: rgba(148, 163, 184, 0.18); --ink: #e2e8f0; --muted: #94a3b8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 16px 34px rgba(0, 0, 0, 0.45); } body.theme-dark .card-header { background: rgba(255, 255, 255, 0.04); } body.theme-dark .map-fallback { background: rgba(25, 135, 84, 0.08); } /* Sidebar collapse (desktop) */ @media (min-width: 992px) { body:not(.sidebar-collapsed) .app-sidebar-col { flex: 0 0 288px !important; max-width: 288px !important; width: 288px !important; } body:not(.sidebar-collapsed) .app-main, body:not(.sidebar-collapsed) [app-main] { flex: 1 1 calc(100% - 288px) !important; max-width: calc(100% - 288px) !important; width: calc(100% - 288px) !important; transition: width .25s ease, max-width .25s ease, flex-basis .25s ease; } body.sidebar-collapsed .app-sidebar-col { flex: 0 0 82px !important; max-width: 82px !important; width: 82px !important; transition: width .25s ease, max-width .25s ease, flex-basis .25s ease; } body.sidebar-collapsed .app-main, body.sidebar-collapsed [app-main] { flex: 1 1 calc(100% - 82px) !important; max-width: calc(100% - 82px) !important; width: calc(100% - 82px) !important; transition: width .25s ease, max-width .25s ease, flex-basis .25s ease; } } /* Sidebar mobile overlay */ @media (max-width: 991.98px) { .app-sidebar-col { position: fixed; z-index: 1050; left: -340px; top: 0; bottom: 0; width: 318px; max-width: 86vw; transition: left 0.18s ease; } body.sidebar-open .app-sidebar-col { left: 0; } body.sidebar-open::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1040; } } /* Small top controls */ .app-top-controls .btn { border-radius: 12px; } /* ====== Image fallback ====== */ .img-fallback { object-fit: contain; background: rgba(0, 0, 0, 0.03); } :root[data-theme="dark"] .img-fallback { background: rgba(255, 255, 255, 0.06); } .border-top { border-top: 0px !important; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { padding-left: calc(var(--bs-gutter-x) * 0); } .admin-shell, .public-shell { width: 100%; min-width: 0; } .admin-topbar, .panel-head { font-size: 1.05rem; line-height: 1.1; color: #0f5132; } .fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas { line-height: inherit !important; } .container-fluid.app-shell { position: relative; } .sidebar { width: 288px; transition: width .25s ease; overflow-x: hidden; min-height: 100%; height: 100%; } /* Unified admin page header */ .sys-page-hero{ position:relative; margin:0 0 1rem; border:1px solid rgba(25,135,84,.14); border-radius:1.35rem; background: radial-gradient(circle at top right, rgba(25,135,84,.10), transparent 34%), radial-gradient(circle at left center, rgba(20,108,67,.08), transparent 26%), linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,250,247,.94)); box-shadow:0 18px 40px rgba(15,23,42,.06); overflow:hidden; } [data-theme="dark"] .sys-page-hero{ border-color:rgba(25,135,84,.20); background: radial-gradient(circle at top right, rgba(25,135,84,.18), transparent 34%), radial-gradient(circle at left center, rgba(20,108,67,.16), transparent 30%), linear-gradient(135deg, rgba(10,25,18,.96), rgba(2,12,8,.98)); box-shadow:0 22px 48px rgba(0,0,0,.28); } .sys-page-hero__inner{padding:1.2rem 1.25rem 1.15rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;} .sys-page-hero__brand{display:flex;align-items:flex-start;gap:.95rem;min-width:0;flex:1 1 520px;} .sys-page-hero__icon{width:56px;height:56px;border-radius:1.1rem;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-700));box-shadow:0 16px 30px rgba(25,135,84,.24);font-size:1.2rem;flex-shrink:0;} .sys-page-hero__copy{min-width:0;} .sys-page-hero__eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.45rem;padding:.32rem .65rem;border-radius:999px;border:1px solid rgba(25,135,84,.16);background:rgba(25,135,84,.08);font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--brand-700);} [data-theme="dark"] .sys-page-hero__eyebrow{background:rgba(25,135,84,.18);border-color:rgba(25,135,84,.24);color:#b7f0d2;} .sys-page-hero__title{font-size:1.35rem;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 .35rem;color:var(--bs-heading-color, #0f172a);} .sys-page-hero__subtitle{margin:0;max-width:58rem;font-size:.95rem;line-height:1.6;color:var(--bs-secondary-color,#64748b);} .sys-page-hero__badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem;} .sys-page-hero__badge{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .7rem;border-radius:999px;border:1px solid rgba(25,135,84,.10);background:rgba(255,255,255,.84);font-size:.8rem;font-weight:600;color:var(--bs-body-color);box-shadow:0 6px 18px rgba(15,23,42,.04);} [data-theme="dark"] .sys-page-hero__badge{background:rgba(15,23,42,.58);border-color:rgba(255,255,255,.1);} .sys-page-hero__actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;flex:0 1 auto;} .sys-page-hero__actions .btn{min-height:42px;border-radius:.95rem;padding-inline:1rem;font-weight:700;box-shadow:none;} .sys-page-hero__stats{padding:0 1.25rem 1.2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem;} .sys-page-hero__stat{padding:.9rem 1rem;border-radius:1rem;border:1px solid rgba(25,135,84,.10);background:rgba(255,255,255,.78);backdrop-filter:blur(4px);min-width:0;} [data-theme="dark"] .sys-page-hero__stat{background:rgba(15,23,42,.55);border-color:rgba(255,255,255,.08);} .sys-page-hero__stat-label{font-size:.78rem;color:var(--bs-secondary-color);margin-bottom:.22rem;} .sys-page-hero__stat-value{font-size:.96rem;font-weight:800;line-height:1.35;color:var(--bs-heading-color, #0f172a);word-break:break-word;} @media (max-width: 991.98px){ .sys-page-hero__inner{padding:1rem 1rem .95rem;} .sys-page-hero__actions{width:100%;justify-content:flex-start;} .sys-page-hero__stats{padding:0 1rem 1rem;grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width: 575.98px){ .sys-page-hero__brand{gap:.8rem;} .sys-page-hero__icon{width:48px;height:48px;border-radius:.95rem;} .sys-page-hero__title{font-size:1.15rem;} .sys-page-hero__subtitle{font-size:.9rem;} .sys-page-hero__actions{display:grid;grid-template-columns:1fr;width:100%;} .sys-page-hero__actions .btn{width:100%;} .sys-page-hero__stats{grid-template-columns:1fr;} } /* ========================================================= Responsive refinement pack ========================================================= */ *, *::before, *::after { box-sizing: border-box; } img, svg, video, canvas { max-width: 100%; } iframe { max-width: 100%; } textarea.form-control { min-height: 120px; height: auto; } .row > [class*="col-"], .card, .card-body, .card-header, .sys-page-hero__copy, .sys-page-hero__stat, .table-responsive, .d-flex, .flex-grow-1 { min-width: 0; } .card, .modal-content, .sys-page-hero, .map-shell, .analytics-card, .kpi-card, .hero-overlay-box { overflow: hidden; } .card-body { padding: 1rem 1rem; } .card-header { padding: .9rem 1rem; } .footer { margin-top: 1.25rem; line-height: 1.5; } .app-top-controls { gap: .75rem; flex-wrap: wrap; } .app-top-controls > div { min-width: 0; flex-wrap: wrap; } .sys-page-hero { margin-bottom: 1rem; } .sys-page-hero__subtitle { max-width: 68ch; } .sys-page-hero__actions { align-self: stretch; } .sys-page-hero__actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; } .empty-state, .quick-link, .metric, .analytics-card, .kpi-card { border-radius: 1rem; } .table-responsive { border-radius: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive > .table { margin-bottom: 0; min-width: 720px; } .table td, .table th { white-space: normal; word-break: break-word; } .dataTables_wrapper .row { row-gap: .85rem; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { max-width: 100%; } .dataTables_wrapper .dataTables_filter { text-align: right; } .dataTables_wrapper .dataTables_filter input { width: min(100%, 18rem); } .modal-dialog { margin: .9rem auto; padding-inline: .35rem; } .modal-body { max-height: min(78vh, 900px); overflow-y: auto; } @media (max-width: 991.98px) { .card-body { padding: .95rem; } .card-header { padding: .85rem .95rem; } .app-top-controls { margin-bottom: 1rem !important; } .table-responsive > .table { min-width: 660px; } .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: left; } } @media (max-width: 767.98px) { .sys-page-hero { border-radius: 1.1rem; } .sys-page-hero__inner { gap: .85rem; } .sys-page-hero__stats { grid-template-columns: 1fr 1fr; } .table-responsive > .table { min-width: 620px; } .footer { font-size: .82rem; } } @media (max-width: 575.98px) { .app-top-controls .btn, .app-top-controls .badge { width: 100%; justify-content: center; } .sys-page-hero__inner { padding: .95rem .95rem .9rem; } .sys-page-hero__brand { flex-basis: 100%; } .sys-page-hero__title { font-size: 1.08rem; } .sys-page-hero__subtitle { font-size: .88rem; line-height: 1.55; } .sys-page-hero__badges { margin-top: .7rem; } .sys-page-hero__stats { padding: 0 .95rem .95rem; grid-template-columns: 1fr; } .sys-page-hero__actions .btn { width: 100%; } .card, .sys-page-hero, .modal-content { border-radius: 1rem; } .table-responsive > .table { min-width: 560px; } .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_info { text-align: left; } } /* ========================================================= Central theme normalization v3 Light/dark shared tokens + herb edit dark mode fixes ========================================================= */ :root, body.theme-light, html[data-theme="light"] body, body:not(.theme-dark) { --app-surface: #ffffff; --app-surface-2: #f8fafc; --app-surface-3: #eef2f7; --app-border-strong: #cbd5e1; --app-ink: #0f172a; --app-ink-soft: #475569; --app-muted: #64748b; } body.theme-dark, html[data-theme="dark"] body, [data-theme="dark"] body { --app-surface: #0f172a; --app-surface-2: #162235; --app-surface-3: #1c2a40; --app-border: rgba(148,163,184,.18); --app-border-strong: rgba(148,163,184,.30); --app-ink: #e6edf7; --app-ink-soft: #c9d7ea; --app-muted: #9bb0ca; } /* generic central dark mode */ body.theme-dark .card, html[data-theme="dark"] .card, body.theme-dark .modal-content, html[data-theme="dark"] .modal-content, body.theme-dark .dropdown-menu, html[data-theme="dark"] .dropdown-menu { background: var(--app-surface) !important; color: var(--app-ink) !important; border-color: var(--app-border) !important; } body.theme-dark .card-header, html[data-theme="dark"] .card-header, body.theme-dark .card-footer, html[data-theme="dark"] .card-footer, body.theme-dark .modal-header, html[data-theme="dark"] .modal-header, body.theme-dark .modal-footer, html[data-theme="dark"] .modal-footer, body.theme-dark .card-body, html[data-theme="dark"] .card-body, body.theme-dark .modal-body, html[data-theme="dark"] .modal-body { color: var(--app-ink) !important; border-color: var(--app-border) !important; } body.theme-dark .card-header, html[data-theme="dark"] .card-header, body.theme-dark .card-footer, html[data-theme="dark"] .card-footer, body.theme-dark .modal-header, html[data-theme="dark"] .modal-header, body.theme-dark .modal-footer, html[data-theme="dark"] .modal-footer { background: var(--app-surface-2) !important; } body.theme-dark .form-label, html[data-theme="dark"] .form-label, body.theme-dark label, html[data-theme="dark"] label { color: var(--app-ink-soft) !important; } body.theme-dark .form-text, html[data-theme="dark"] .form-text, body.theme-dark .text-muted, html[data-theme="dark"] .text-muted { color: var(--app-muted) !important; } body.theme-dark .form-control, html[data-theme="dark"] .form-control, body.theme-dark .form-select, html[data-theme="dark"] .form-select, body.theme-dark textarea.form-control, html[data-theme="dark"] textarea.form-control, body.theme-dark .input-group-text, html[data-theme="dark"] .input-group-text { background: var(--app-surface-2) !important; color: var(--app-ink) !important; border-color: var(--app-border-strong) !important; } body.theme-dark .form-control::placeholder, html[data-theme="dark"] .form-control::placeholder, body.theme-dark textarea.form-control::placeholder, html[data-theme="dark"] textarea.form-control::placeholder { color: #9db1cb !important; opacity: 1 !important; } body.theme-dark .form-control:focus, html[data-theme="dark"] .form-control:focus, body.theme-dark .form-select:focus, html[data-theme="dark"] .form-select:focus { background: var(--app-surface-2) !important; color: var(--app-ink) !important; border-color: rgba(45,212,191,.68) !important; box-shadow: 0 0 0 .25rem rgba(45,212,191,.14) !important; } body.theme-dark .table, html[data-theme="dark"] .table { color: var(--app-ink) !important; } body.theme-dark .table thead th, html[data-theme="dark"] .table thead th { background: var(--app-surface-2) !important; color: var(--app-ink-soft) !important; border-color: var(--app-border) !important; } body.theme-dark .table tbody td, html[data-theme="dark"] .table tbody td, body.theme-dark .table tbody th, html[data-theme="dark"] .table tbody th { color: var(--app-ink) !important; border-color: var(--app-border) !important; background: transparent !important; } body.theme-dark .table-hover tbody tr:hover > *, html[data-theme="dark"] .table-hover tbody tr:hover > * { background: rgba(255,255,255,.03) !important; } body.theme-dark .sys-page-hero, html[data-theme="dark"] .sys-page-hero { border-color: rgba(45,212,191,.18) !important; background: radial-gradient(circle at top right, rgba(45,212,191,.10), transparent 34%), radial-gradient(circle at left center, rgba(20,184,166,.09), transparent 28%), linear-gradient(135deg, #081423, #0a1729 56%, #0d2032) !important; box-shadow: 0 22px 48px rgba(0,0,0,.30) !important; } body.theme-dark .sys-page-hero__title, html[data-theme="dark"] .sys-page-hero__title, body.theme-dark .sys-page-hero__copy, html[data-theme="dark"] .sys-page-hero__copy, body.theme-dark .sys-page-hero__stat-value, html[data-theme="dark"] .sys-page-hero__stat-value { color: var(--app-ink) !important; } body.theme-dark .sys-page-hero__subtitle, html[data-theme="dark"] .sys-page-hero__subtitle, body.theme-dark .sys-page-hero__stat-label, html[data-theme="dark"] .sys-page-hero__stat-label, body.theme-dark .sys-page-hero__eyebrow, html[data-theme="dark"] .sys-page-hero__eyebrow { color: var(--app-ink-soft) !important; } body.theme-dark .sys-page-hero__badge, html[data-theme="dark"] .sys-page-hero__badge, body.theme-dark .sys-page-hero__stat, html[data-theme="dark"] .sys-page-hero__stat, body.theme-dark .hero-chip, html[data-theme="dark"] .hero-chip { background: rgba(15,23,42,.84) !important; color: var(--app-ink) !important; border-color: rgba(148,163,184,.18) !important; } body.theme-dark .hero-chip *, html[data-theme="dark"] .hero-chip * { color: inherit !important; } /* admin_herb_edit central overrides */ body.theme-dark .admin-page--herb-edit .card, html[data-theme="dark"] .admin-page--herb-edit .card, body.theme-dark .admin-page--herb-edit .tab-shell, html[data-theme="dark"] .admin-page--herb-edit .tab-shell, body.theme-dark .admin-page--herb-edit .media-editor-card, html[data-theme="dark"] .admin-page--herb-edit .media-editor-card, body.theme-dark .admin-page--herb-edit .desc-editor, html[data-theme="dark"] .admin-page--herb-edit .desc-editor, body.theme-dark .admin-page--herb-edit .rich-text-panel, html[data-theme="dark"] .admin-page--herb-edit .rich-text-panel, body.theme-dark .admin-page--herb-edit .sticky-note, html[data-theme="dark"] .admin-page--herb-edit .sticky-note { background: var(--app-surface) !important; color: var(--app-ink) !important; border-color: var(--app-border) !important; } body.theme-dark .admin-page--herb-edit .card-body, html[data-theme="dark"] .admin-page--herb-edit .card-body, body.theme-dark .admin-page--herb-edit .tab-shell, html[data-theme="dark"] .admin-page--herb-edit .tab-shell { background: var(--app-surface) !important; color: var(--app-ink) !important; } body.theme-dark .admin-page--herb-edit .hero-chip, html[data-theme="dark"] .admin-page--herb-edit .hero-chip { background: var(--app-surface-2) !important; border-color: var(--app-border) !important; box-shadow: 0 10px 22px rgba(0,0,0,.18) !important; } body.theme-dark .admin-page--herb-edit .hero-chip__label, html[data-theme="dark"] .admin-page--herb-edit .hero-chip__label { color: var(--app-ink-soft) !important; } body.theme-dark .admin-page--herb-edit .hero-chip__value, html[data-theme="dark"] .admin-page--herb-edit .hero-chip__value { color: var(--app-ink) !important; } body.theme-dark .admin-page--herb-edit .form-label, html[data-theme="dark"] .admin-page--herb-edit .form-label, body.theme-dark .admin-page--herb-edit .section-title, html[data-theme="dark"] .admin-page--herb-edit .section-title { color: var(--app-ink-soft) !important; } body.theme-dark .admin-page--herb-edit .section-hint, html[data-theme="dark"] .admin-page--herb-edit .section-hint, body.theme-dark .admin-page--herb-edit .field-note, html[data-theme="dark"] .admin-page--herb-edit .field-note, body.theme-dark .admin-page--herb-edit .rich-text-panel__hint, html[data-theme="dark"] .admin-page--herb-edit .rich-text-panel__hint, body.theme-dark .admin-page--herb-edit .rich-text-panel__foot, html[data-theme="dark"] .admin-page--herb-edit .rich-text-panel__foot, body.theme-dark .admin-page--herb-edit .desc-footer, html[data-theme="dark"] .admin-page--herb-edit .desc-footer { color: var(--app-muted) !important; } body.theme-dark .admin-page--herb-edit .form-control, html[data-theme="dark"] .admin-page--herb-edit .form-control, body.theme-dark .admin-page--herb-edit .form-select, html[data-theme="dark"] .admin-page--herb-edit .form-select, body.theme-dark .admin-page--herb-edit textarea.form-control, html[data-theme="dark"] .admin-page--herb-edit textarea.form-control, body.theme-dark .admin-page--herb-edit input.form-control, html[data-theme="dark"] .admin-page--herb-edit input.form-control { background: var(--app-surface-2) !important; color: var(--app-ink) !important; border-color: var(--app-border-strong) !important; } body.theme-dark .admin-page--herb-edit .nav-tabs, html[data-theme="dark"] .admin-page--herb-edit .nav-tabs { border-bottom-color: var(--app-border) !important; } body.theme-dark .admin-page--herb-edit .nav-tabs .nav-link, html[data-theme="dark"] .admin-page--herb-edit .nav-tabs .nav-link { color: var(--app-muted) !important; } body.theme-dark .admin-page--herb-edit .nav-tabs .nav-link.active, html[data-theme="dark"] .admin-page--herb-edit .nav-tabs .nav-link.active { color: var(--app-ink) !important; background: rgba(45,212,191,.10) !important; border-color: var(--app-border) !important; } body.theme-dark .admin-page--herb-edit .actionbar, html[data-theme="dark"] .admin-page--herb-edit .actionbar { background: rgba(15,23,42,.96) !important; border-top-color: var(--app-border) !important; } body.theme-dark .admin-page--herb-edit .sticky-note, html[data-theme="dark"] .admin-page--herb-edit .sticky-note, body.theme-dark .admin-page--herb-edit .desc-toolbar, html[data-theme="dark"] .admin-page--herb-edit .desc-toolbar, body.theme-dark .admin-page--herb-edit .rich-text-panel__head, html[data-theme="dark"] .admin-page--herb-edit .rich-text-panel__head, body.theme-dark .admin-page--herb-edit .rich-text-panel__foot, html[data-theme="dark"] .admin-page--herb-edit .rich-text-panel__foot, body.theme-dark .admin-page--herb-edit .desc-footer, html[data-theme="dark"] .admin-page--herb-edit .desc-footer { background: var(--app-surface-2) !important; border-color: var(--app-border) !important; } body.theme-dark .admin-page--herb-edit .desc-textarea, html[data-theme="dark"] .admin-page--herb-edit .desc-textarea, body.theme-dark .admin-page--herb-edit .rich-text-panel .form-control, html[data-theme="dark"] .admin-page--herb-edit .rich-text-panel .form-control { background: transparent !important; color: var(--app-ink) !important; } body.theme-dark .admin-page--herb-edit .desc-stat, html[data-theme="dark"] .admin-page--herb-edit .desc-stat, body.theme-dark .admin-page--herb-edit .rich-meta-chip, html[data-theme="dark"] .admin-page--herb-edit .rich-meta-chip { background: rgba(255,255,255,.05) !important; color: var(--app-ink-soft) !important; border-color: rgba(148,163,184,.16) !important; } body.theme-dark .admin-page--herb-edit .media-thumb, html[data-theme="dark"] .admin-page--herb-edit .media-thumb, body.theme-dark .admin-page--herb-edit .media-empty-thumb, html[data-theme="dark"] .admin-page--herb-edit .media-empty-thumb { background: var(--app-surface-2) !important; border-color: var(--app-border) !important; color: var(--app-muted) !important; } body.theme-dark .admin-page--herb-edit .btn-outline-brand, html[data-theme="dark"] .admin-page--herb-edit .btn-outline-brand { background: var(--app-surface-2) !important; color: #8ee9d3 !important; border-color: rgba(45,212,191,.22) !important; } body.theme-dark .admin-page--herb-edit .table-preview, html[data-theme="dark"] .admin-page--herb-edit .table-preview { color: var(--app-ink) !important; } body.theme-dark .admin-page--herb-edit .table-preview thead th, html[data-theme="dark"] .admin-page--herb-edit .table-preview thead th { background: var(--app-surface-2) !important; color: var(--app-ink-soft) !important; } /* ========================================================= Central dark-mode dashboard polish Fix light-looking KPI cards / card-body / dashboard panels ========================================================= */ body.theme-dark .admin-page--dashboard .kpi-card, html[data-theme="dark"] .admin-page--dashboard .kpi-card, body.theme-dark .admin-page--dashboard .panel, html[data-theme="dark"] .admin-page--dashboard .panel, body.theme-dark .admin-page--dashboard .card, html[data-theme="dark"] .admin-page--dashboard .card, body.theme-dark .admin-page--dashboard .pending-item, html[data-theme="dark"] .admin-page--dashboard .pending-item, body.theme-dark .admin-page--dashboard .status-card, html[data-theme="dark"] .admin-page--dashboard .status-card { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--border) !important; box-shadow: 0 16px 34px rgba(0,0,0,.24) !important; } body.theme-dark .admin-page--dashboard .card-header, html[data-theme="dark"] .admin-page--dashboard .card-header, body.theme-dark .admin-page--dashboard .panel .hd, html[data-theme="dark"] .admin-page--dashboard .panel .hd { background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important; color: var(--ink) !important; border-bottom-color: var(--border) !important; } body.theme-dark .admin-page--dashboard .card-body, html[data-theme="dark"] .admin-page--dashboard .card-body, body.theme-dark .admin-page--dashboard .panel .bd, html[data-theme="dark"] .admin-page--dashboard .panel .bd, body.theme-dark .admin-page--dashboard .kpi-body, html[data-theme="dark"] .admin-page--dashboard .kpi-body { background: var(--surface) !important; color: var(--ink) !important; } body.theme-dark .admin-page--dashboard .kpi-icon, html[data-theme="dark"] .admin-page--dashboard .kpi-icon, body.theme-dark .admin-page--dashboard .section-title__icon, html[data-theme="dark"] .admin-page--dashboard .section-title__icon, body.theme-dark .admin-page--dashboard .status-card__icon, html[data-theme="dark"] .admin-page--dashboard .status-card__icon { background: rgba(45,212,191,.12) !important; border-color: rgba(45,212,191,.18) !important; color: #86efac !important; } body.theme-dark .admin-page--dashboard .kpi-value, html[data-theme="dark"] .admin-page--dashboard .kpi-value, body.theme-dark .admin-page--dashboard .pending-title, html[data-theme="dark"] .admin-page--dashboard .pending-title, body.theme-dark .admin-page--dashboard .status-card__metric-value, html[data-theme="dark"] .admin-page--dashboard .status-card__metric-value, body.theme-dark .admin-page--dashboard .status-pill__value, html[data-theme="dark"] .admin-page--dashboard .status-pill__value, body.theme-dark .admin-page--dashboard .section-title, html[data-theme="dark"] .admin-page--dashboard .section-title { color: var(--ink) !important; } body.theme-dark .admin-page--dashboard .kpi-label, html[data-theme="dark"] .admin-page--dashboard .kpi-label, body.theme-dark .admin-page--dashboard .pending-sub, html[data-theme="dark"] .admin-page--dashboard .pending-sub, body.theme-dark .admin-page--dashboard .gis-note, html[data-theme="dark"] .admin-page--dashboard .gis-note, body.theme-dark .admin-page--dashboard .popup-sub, html[data-theme="dark"] .admin-page--dashboard .popup-sub, body.theme-dark .admin-page--dashboard .status-card__metric-label, html[data-theme="dark"] .admin-page--dashboard .status-card__metric-label, body.theme-dark .admin-page--dashboard .status-pill__label, html[data-theme="dark"] .admin-page--dashboard .status-pill__label, body.theme-dark .admin-page--dashboard .form-label, html[data-theme="dark"] .admin-page--dashboard .form-label { color: var(--ink-soft) !important; } body.theme-dark .admin-page--dashboard .status-card__metric, html[data-theme="dark"] .admin-page--dashboard .status-card__metric, body.theme-dark .admin-page--dashboard .status-pill, html[data-theme="dark"] .admin-page--dashboard .status-pill, body.theme-dark .admin-page--dashboard .chip, html[data-theme="dark"] .admin-page--dashboard .chip, body.theme-dark .admin-page--dashboard .empty-state, html[data-theme="dark"] .admin-page--dashboard .empty-state { background: var(--surface-2) !important; color: var(--ink-soft) !important; border-color: var(--border) !important; } body.theme-dark .admin-page--dashboard .gis-map, html[data-theme="dark"] .admin-page--dashboard .gis-map { background: var(--surface-2) !important; border-color: var(--border) !important; } body.theme-dark .admin-page--dashboard .list .rowx, html[data-theme="dark"] .admin-page--dashboard .list .rowx { border-bottom-color: var(--border) !important; } body.theme-dark .admin-page--dashboard .popup-btn, html[data-theme="dark"] .admin-page--dashboard .popup-btn { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--border) !important; } body.theme-dark .admin-page--dashboard .popup-btn:hover, html[data-theme="dark"] .admin-page--dashboard .popup-btn:hover { background: var(--surface-3) !important; color: var(--ink) !important; border-color: var(--border-strong) !important; } body.theme-dark .admin-page--dashboard .sys-page-hero__badge, html[data-theme="dark"] .admin-page--dashboard .sys-page-hero__badge, body.theme-dark .admin-page--dashboard .sys-page-hero__stat, html[data-theme="dark"] .admin-page--dashboard .sys-page-hero__stat { background: rgba(16,26,44,.86) !important; color: var(--ink) !important; border-color: var(--border) !important; } body.theme-dark .admin-page--dashboard .table thead th, html[data-theme="dark"] .admin-page--dashboard .table thead th { background: var(--surface-2) !important; color: var(--ink-soft) !important; border-color: var(--border) !important; } body.theme-dark .admin-page--dashboard .table tbody td, html[data-theme="dark"] .admin-page--dashboard .table tbody td, body.theme-dark .admin-page--dashboard .table tbody th, html[data-theme="dark"] .admin-page--dashboard .table tbody th { background: transparent !important; color: var(--ink) !important; border-color: var(--border) !important; } /* ========================================================= Admin layout hard fix: fixed sidebar width + no content overlap ใช้แก้ปัญหา sidebar กว้างขึ้นแล้วเนื้อหาหน้า admin ซ้อนทับเมนู ========================================================= */ :root { --admin-sidebar-width: 328px; --admin-sidebar-collapsed-width: 92px; --admin-main-x: 30px; --admin-main-y: 22px; } .admin-shell.container-fluid { width: 100% !important; max-width: none !important; min-height: 100vh !important; padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden !important; background: var(--bg); } .admin-shell > .admin-layout-row, .admin-shell > .row { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; min-height: 100vh !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .admin-shell .app-sidebar-col { flex: 0 0 var(--admin-sidebar-width) !important; width: var(--admin-sidebar-width) !important; max-width: var(--admin-sidebar-width) !important; min-width: var(--admin-sidebar-width) !important; padding: 0 !important; position: relative !important; top: auto !important; align-self: stretch !important; display: flex !important; min-height: 100% !important; height: auto !important; z-index: 1020 !important; overflow: visible !important; background: radial-gradient(circle at 18% 0%, rgba(164, 230, 80, .18), transparent 30%), radial-gradient(circle at 96% 12%, rgba(45, 212, 191, .12), transparent 30%), linear-gradient(180deg, #063529 0%, #073126 46%, #041c17 100%) !important; border-right: 1px solid rgba(255,255,255,.09) !important; transition: flex-basis .25s ease, width .25s ease, max-width .25s ease, min-width .25s ease; } .admin-shell .app-sidebar-col > .sidebar { width: 100% !important; min-height: 100% !important; height: auto !important; } .admin-shell .app-main, .admin-shell [app-main] { flex: 1 1 auto !important; width: calc(100% - var(--admin-sidebar-width)) !important; max-width: none !important; min-width: 0 !important; padding: var(--admin-main-y) var(--admin-main-x) 32px !important; overflow-x: hidden !important; transition: width .25s ease, padding .2s ease; } body.sidebar-collapsed .admin-shell .app-sidebar-col { flex-basis: var(--admin-sidebar-collapsed-width) !important; width: var(--admin-sidebar-collapsed-width) !important; max-width: var(--admin-sidebar-collapsed-width) !important; min-width: var(--admin-sidebar-collapsed-width) !important; } body.sidebar-collapsed .admin-shell .app-main, body.sidebar-collapsed .admin-shell [app-main] { width: calc(100% - var(--admin-sidebar-collapsed-width)) !important; } .admin-shell .app-top-controls { position: relative !important; z-index: 3 !important; min-height: 34px; } .admin-shell .app-main > .admin-projects, .admin-shell .app-main > .admin-page, .admin-shell .app-main > .card, .admin-shell .app-main > .page-hero, .admin-shell [app-main] > .admin-projects, .admin-shell [app-main] > .admin-page, .admin-shell [app-main] > .card, .admin-shell [app-main] > .page-hero { max-width: 100% !important; } @media (max-width: 1199.98px) { :root { --admin-sidebar-width: 318px; --admin-main-x: 22px; } } @media (max-width: 991.98px) { .admin-shell > .admin-layout-row, .admin-shell > .row { display: block !important; min-height: 100vh !important; } .admin-shell .app-sidebar-col { position: fixed !important; z-index: 1050 !important; left: -370px !important; top: 0 !important; bottom: 0 !important; height: 100vh !important; width: 344px !important; min-width: 0 !important; max-width: 86vw !important; flex: none !important; transition: left .18s ease !important; } body.sidebar-open .admin-shell .app-sidebar-col { left: 0 !important; } .admin-shell .app-main, .admin-shell [app-main], body.sidebar-collapsed .admin-shell .app-main, body.sidebar-collapsed .admin-shell [app-main] { width: 100% !important; max-width: 100% !important; padding: 14px 14px 24px !important; } body.sidebar-open::before { content: ""; position: fixed; inset: 0; background: rgba(2, 6, 23, .42); z-index: 1040; } } @media (max-width: 575.98px) { .admin-shell .app-main, .admin-shell [app-main] { padding: 12px 10px 20px !important; } } /* ========================================================= 2026-04-29 Public contrast pass Goal: clear readable text in both Light/Dark public pages Scope: public-shell only, does not alter admin screens ========================================================= */ body.public-shell { --public-bg: #f8fafc; --public-ink: #0f172a; --public-heading: #020617; --public-muted: #475569; --public-muted-2: #64748b; --public-surface: #ffffff; --public-surface-rgb: 255, 255, 255; --public-surface-2: #f1f5f9; --public-border: #d7e1ea; --public-brand-strong: #065f46; --public-brand-text: #047857; --public-chip-bg: #ffffff; --public-chip-border: rgba(21, 128, 61, .20); --bs-body-bg: var(--public-bg); --bs-body-color: var(--public-ink); --bs-emphasis-color: var(--public-heading); --bs-secondary-color: var(--public-muted); --bs-tertiary-color: var(--public-muted-2); --bs-border-color: var(--public-border); background: var(--public-bg) !important; color: var(--public-ink) !important; } html[data-theme="dark"] body.public-shell, body.public-shell.theme-dark { color-scheme: dark; --public-bg: #07120f; --public-ink: #f1f5f9; --public-heading: #ffffff; --public-muted: #d6dee8; --public-muted-2: #b7c4d3; --public-surface: #101b28; --public-surface-rgb: 16, 27, 40; --public-surface-2: #0b1622; --public-border: rgba(203, 213, 225, .28); --public-brand-strong: #bbf7d0; --public-brand-text: #86efac; --public-chip-bg: rgba(255, 255, 255, .075); --public-chip-border: rgba(187, 247, 208, .22); --bs-body-bg: var(--public-bg); --bs-body-color: var(--public-ink); --bs-emphasis-color: var(--public-heading); --bs-secondary-color: var(--public-muted); --bs-tertiary-color: var(--public-muted-2); --bs-border-color: var(--public-border); background: var(--public-bg) !important; color: var(--public-ink) !important; } body.public-shell h1, body.public-shell h2, body.public-shell h3, body.public-shell h4, body.public-shell h5, body.public-shell h6, body.public-shell .fw-bold, body.public-shell .fw-semibold, body.public-shell .fw-black, body.public-shell strong, body.public-shell b { color: var(--public-heading) !important; } body.public-shell p, body.public-shell li, body.public-shell td, body.public-shell th, body.public-shell label, body.public-shell .form-label, body.public-shell .card-body, body.public-shell .modal-body, body.public-shell .tab-content, body.public-shell .small:not(.badge):not(.status-badge), body.public-shell .public-footer__desc { color: var(--public-ink); } body.public-shell .text-muted, body.public-shell .text-secondary, body.public-shell .form-text, body.public-shell .card-subtitle, body.public-shell .lead.text-muted, body.public-shell .public-navbar .brand-subtitle, body.public-shell .public-footer__desc, body.public-shell .ph-sci, body.public-shell .ph-desc, body.public-shell .ph-kpi .label, body.public-shell .map-kpi__label, body.public-shell .project-kpi__label, body.public-shell .result-card__meta, body.public-shell .herb-link-card__meta, body.public-shell .mini-stat, body.public-shell .selected-desc, body.public-shell .selected-meta, body.public-shell .popup-meta, body.public-shell .public-home-page .muted, body.public-shell .public-home-page .metric-label, body.public-shell .public-home-page .data-card__desc { color: var(--public-muted) !important; opacity: 1 !important; } body.public-shell a:not(.btn):not(.nav-link):not(.navbar-brand):not(.popup-btn):not(.popup-herb-btn):not(.herb-link-card) { color: var(--public-brand-text) !important; } body.public-shell a:not(.btn):not(.nav-link):not(.navbar-brand):hover { color: var(--public-brand-strong) !important; } body.public-shell .card, body.public-shell .card-header, body.public-shell .list-group-item, body.public-shell .dropdown-menu, body.public-shell .modal-content, body.public-shell .ph-panel, body.public-shell .ph-card, body.public-shell .ph-side-card, body.public-shell .map-kpi, body.public-shell .map-board, body.public-shell .panel-card, body.public-shell .result-card, body.public-shell .project-kpi, body.public-shell .project-panel, body.public-shell .project-card, body.public-shell .media-item, body.public-shell .tab-shell, body.public-shell .occ-dashboard, body.public-shell .glass-card, body.public-shell .surface-card, body.public-shell .section-card, body.public-shell .data-card, body.public-shell .spotlight-card { color: var(--public-ink) !important; border-color: var(--public-border) !important; } html[data-theme="dark"] body.public-shell .card, html[data-theme="dark"] body.public-shell .list-group-item, html[data-theme="dark"] body.public-shell .dropdown-menu, html[data-theme="dark"] body.public-shell .modal-content, html[data-theme="dark"] body.public-shell .ph-panel, html[data-theme="dark"] body.public-shell .ph-card, html[data-theme="dark"] body.public-shell .ph-side-card, html[data-theme="dark"] body.public-shell .map-kpi, html[data-theme="dark"] body.public-shell .map-board, html[data-theme="dark"] body.public-shell .panel-card, html[data-theme="dark"] body.public-shell .result-card, html[data-theme="dark"] body.public-shell .project-kpi, html[data-theme="dark"] body.public-shell .project-panel, html[data-theme="dark"] body.public-shell .project-card, html[data-theme="dark"] body.public-shell .media-item, html[data-theme="dark"] body.public-shell .tab-shell, html[data-theme="dark"] body.public-shell .occ-dashboard, html[data-theme="dark"] body.public-shell .glass-card, html[data-theme="dark"] body.public-shell .surface-card, html[data-theme="dark"] body.public-shell .section-card, html[data-theme="dark"] body.public-shell .data-card, html[data-theme="dark"] body.public-shell .spotlight-card, body.public-shell.theme-dark .card, body.public-shell.theme-dark .list-group-item, body.public-shell.theme-dark .dropdown-menu, body.public-shell.theme-dark .modal-content, body.public-shell.theme-dark .ph-panel, body.public-shell.theme-dark .ph-card, body.public-shell.theme-dark .ph-side-card, body.public-shell.theme-dark .map-kpi, body.public-shell.theme-dark .map-board, body.public-shell.theme-dark .panel-card, body.public-shell.theme-dark .result-card, body.public-shell.theme-dark .project-kpi, body.public-shell.theme-dark .project-panel, body.public-shell.theme-dark .project-card, body.public-shell.theme-dark .media-item, body.public-shell.theme-dark .tab-shell, body.public-shell.theme-dark .occ-dashboard, body.public-shell.theme-dark .glass-card, body.public-shell.theme-dark .surface-card, body.public-shell.theme-dark .section-card, body.public-shell.theme-dark .data-card, body.public-shell.theme-dark .spotlight-card { background-color: var(--public-surface) !important; background-image: none; box-shadow: 0 20px 44px rgba(0,0,0,.28) !important; } html[data-theme="dark"] body.public-shell .card-header, html[data-theme="dark"] body.public-shell .map-board__head, html[data-theme="dark"] body.public-shell .panel-card__head, html[data-theme="dark"] body.public-shell .project-panel__head, html[data-theme="dark"] body.public-shell .occ-dashboard__head, body.public-shell.theme-dark .card-header, body.public-shell.theme-dark .map-board__head, body.public-shell.theme-dark .panel-card__head, body.public-shell.theme-dark .project-panel__head, body.public-shell.theme-dark .occ-dashboard__head { background: var(--public-surface-2) !important; color: var(--public-ink) !important; border-color: var(--public-border) !important; } body.public-shell .chip, body.public-shell .soft-chip, body.public-shell .mini-badge, body.public-shell .metric-badge, body.public-shell .tag-pill, body.public-shell .brand-chip, body.public-shell .map-hero__kicker, body.public-shell .project-kicker, body.public-shell .public-navbar .nav-link.active, body.public-shell .public-footer__links a, body.public-shell .mini-rank button, body.public-shell .quick-filter, body.public-shell .herb-link-card, body.public-shell .popup-herb-btn { color: var(--public-heading) !important; border-color: var(--public-chip-border) !important; } html[data-theme="dark"] body.public-shell .chip, html[data-theme="dark"] body.public-shell .soft-chip, html[data-theme="dark"] body.public-shell .mini-badge, html[data-theme="dark"] body.public-shell .metric-badge, html[data-theme="dark"] body.public-shell .tag-pill, html[data-theme="dark"] body.public-shell .brand-chip, html[data-theme="dark"] body.public-shell .map-hero__kicker, html[data-theme="dark"] body.public-shell .project-kicker, html[data-theme="dark"] body.public-shell .public-footer__links a, html[data-theme="dark"] body.public-shell .mini-rank button, html[data-theme="dark"] body.public-shell .quick-filter, html[data-theme="dark"] body.public-shell .herb-link-card, html[data-theme="dark"] body.public-shell .popup-herb-btn, body.public-shell.theme-dark .chip, body.public-shell.theme-dark .soft-chip, body.public-shell.theme-dark .mini-badge, body.public-shell.theme-dark .metric-badge, body.public-shell.theme-dark .tag-pill, body.public-shell.theme-dark .brand-chip, body.public-shell.theme-dark .map-hero__kicker, body.public-shell.theme-dark .project-kicker, body.public-shell.theme-dark .public-footer__links a, body.public-shell.theme-dark .mini-rank button, body.public-shell.theme-dark .quick-filter, body.public-shell.theme-dark .herb-link-card, body.public-shell.theme-dark .popup-herb-btn { background: var(--public-chip-bg) !important; color: var(--public-ink) !important; } body.public-shell .chip-soft, body.public-shell .mini-badge--green, body.public-shell .tag-pill, body.public-shell .quick-filter.is-active, body.public-shell .quick-filter:hover, body.public-shell .popup-herbs__title, body.public-shell .public-part-preview-popover__title, body.public-shell .occ-dashboard__eyebrow { color: var(--public-brand-strong) !important; } html[data-theme="dark"] body.public-shell .chip-soft, html[data-theme="dark"] body.public-shell .mini-badge--green, html[data-theme="dark"] body.public-shell .tag-pill, html[data-theme="dark"] body.public-shell .quick-filter.is-active, html[data-theme="dark"] body.public-shell .quick-filter:hover, html[data-theme="dark"] body.public-shell .popup-herbs__title, html[data-theme="dark"] body.public-shell .public-part-preview-popover__title, html[data-theme="dark"] body.public-shell .occ-dashboard__eyebrow, body.public-shell.theme-dark .chip-soft, body.public-shell.theme-dark .mini-badge--green, body.public-shell.theme-dark .tag-pill, body.public-shell.theme-dark .quick-filter.is-active, body.public-shell.theme-dark .quick-filter:hover, body.public-shell.theme-dark .popup-herbs__title, body.public-shell.theme-dark .public-part-preview-popover__title, body.public-shell.theme-dark .occ-dashboard__eyebrow { color: #bbf7d0 !important; } body.public-shell .form-control, body.public-shell .form-select, body.public-shell .input-group-text, body.public-shell textarea.form-control { background-color: #ffffff !important; color: #0f172a !important; border-color: var(--public-border) !important; } body.public-shell .form-control::placeholder, body.public-shell textarea.form-control::placeholder { color: #64748b !important; opacity: 1 !important; } html[data-theme="dark"] body.public-shell .form-control, html[data-theme="dark"] body.public-shell .form-select, html[data-theme="dark"] body.public-shell .input-group-text, html[data-theme="dark"] body.public-shell textarea.form-control, body.public-shell.theme-dark .form-control, body.public-shell.theme-dark .form-select, body.public-shell.theme-dark .input-group-text, body.public-shell.theme-dark textarea.form-control { background-color: #0b1622 !important; color: #f8fafc !important; border-color: var(--public-border) !important; } html[data-theme="dark"] body.public-shell .form-control::placeholder, html[data-theme="dark"] body.public-shell textarea.form-control::placeholder, body.public-shell.theme-dark .form-control::placeholder, body.public-shell.theme-dark textarea.form-control::placeholder { color: #aebccc !important; opacity: 1 !important; } body.public-shell .table, body.public-shell .table td, body.public-shell .table th { color: var(--public-ink) !important; border-color: var(--public-border) !important; } body.public-shell .table thead th { color: var(--public-heading) !important; background: var(--public-surface-2) !important; } html[data-theme="dark"] body.public-shell .table, html[data-theme="dark"] body.public-shell .table td, html[data-theme="dark"] body.public-shell .table th, body.public-shell.theme-dark .table, body.public-shell.theme-dark .table td, body.public-shell.theme-dark .table th { background-color: transparent !important; } body.public-shell .btn-outline-secondary { color: #334155 !important; border-color: #a7b4c4 !important; } body.public-shell .btn-outline-secondary:hover { color: #ffffff !important; background: #475569 !important; border-color: #475569 !important; } html[data-theme="dark"] body.public-shell .btn-outline-secondary, body.public-shell.theme-dark .btn-outline-secondary { color: #e2e8f0 !important; border-color: rgba(226,232,240,.36) !important; } html[data-theme="dark"] body.public-shell .btn-outline-secondary:hover, body.public-shell.theme-dark .btn-outline-secondary:hover { color: #020617 !important; background: #e2e8f0 !important; border-color: #e2e8f0 !important; } html[data-theme="dark"] body.public-shell .btn-outline-success, body.public-shell.theme-dark .btn-outline-success { color: #bbf7d0 !important; border-color: rgba(187,247,208,.44) !important; } body.public-shell .public-navbar { color: var(--public-ink) !important; } html[data-theme="dark"] body.public-shell .public-navbar, body.public-shell.theme-dark .public-navbar { background: rgba(7,18,15,.94) !important; border-bottom-color: var(--public-border) !important; } body.public-shell .public-navbar .brand-title, body.public-shell .public-footer__brand { color: var(--public-brand-strong) !important; } body.public-shell .public-navbar .nav-link { color: #334155 !important; } html[data-theme="dark"] body.public-shell .public-navbar .nav-link, body.public-shell.theme-dark .public-navbar .nav-link { color: #e2e8f0 !important; } body.public-shell .public-navbar .nav-link:hover, body.public-shell .public-navbar .nav-link.active { color: var(--public-brand-strong) !important; } html[data-theme="dark"] body.public-shell .public-navbar .nav-link:hover, html[data-theme="dark"] body.public-shell .public-navbar .nav-link.active, body.public-shell.theme-dark .public-navbar .nav-link:hover, body.public-shell.theme-dark .public-navbar .nav-link.active { color: #ffffff !important; } html[data-theme="dark"] body.public-shell #navPublic, body.public-shell.theme-dark #navPublic { background: rgba(11,22,34,.98) !important; border-color: var(--public-border) !important; } html[data-theme="dark"] body.public-shell .navbar-toggler-icon, body.public-shell.theme-dark .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.8); } html[data-theme="dark"] body.public-shell .public-home-page, body.public-shell.theme-dark .public-home-page { background: radial-gradient(900px 420px at 0% 0%, rgba(34,197,94,.12), transparent 58%), radial-gradient(760px 360px at 100% 10%, rgba(56,189,248,.10), transparent 58%), linear-gradient(180deg, #07120f, #0b1622) !important; } html[data-theme="dark"] body.public-shell .ph-hero, html[data-theme="dark"] body.public-shell .map-hero, html[data-theme="dark"] body.public-shell .project-hero, body.public-shell.theme-dark .ph-hero, body.public-shell.theme-dark .map-hero, body.public-shell.theme-dark .project-hero { background: radial-gradient(circle at 10% 0%, rgba(52,211,153,.18), transparent 34%), radial-gradient(circle at 100% 10%, rgba(59,130,246,.10), transparent 30%), linear-gradient(135deg, #102033, #07120f) !important; border-color: var(--public-border) !important; } html[data-theme="dark"] body.public-shell .selected-card, html[data-theme="dark"] body.public-shell .selected-meta__row, html[data-theme="dark"] body.public-shell .empty-state, html[data-theme="dark"] body.public-shell .herb-link-empty, html[data-theme="dark"] body.public-shell .map-empty-card, html[data-theme="dark"] body.public-shell .db-alert, body.public-shell.theme-dark .selected-card, body.public-shell.theme-dark .selected-meta__row, body.public-shell.theme-dark .empty-state, body.public-shell.theme-dark .herb-link-empty, body.public-shell.theme-dark .map-empty-card, body.public-shell.theme-dark .db-alert { background: rgba(255,255,255,.055) !important; color: var(--public-ink) !important; border-color: var(--public-border) !important; } body.public-shell .leaflet-popup-content-wrapper, body.public-shell .leaflet-popup-tip { background: #ffffff !important; color: #0f172a !important; } html[data-theme="dark"] body.public-shell .leaflet-popup-content-wrapper, html[data-theme="dark"] body.public-shell .leaflet-popup-tip, body.public-shell.theme-dark .leaflet-popup-content-wrapper, body.public-shell.theme-dark .leaflet-popup-tip { background: #101b28 !important; color: #f1f5f9 !important; box-shadow: 0 18px 42px rgba(0,0,0,.45) !important; } html[data-theme="dark"] body.public-shell .leaflet-control-zoom a, body.public-shell.theme-dark .leaflet-control-zoom a { background: #101b28 !important; color: #f8fafc !important; border-color: var(--public-border) !important; } body.public-shell .map-status-pill, body.public-shell .map-floating-tools .btn { color: var(--public-brand-strong) !important; } html[data-theme="dark"] body.public-shell .map-status-pill, html[data-theme="dark"] body.public-shell .map-floating-tools .btn, body.public-shell.theme-dark .map-status-pill, body.public-shell.theme-dark .map-floating-tools .btn { background: rgba(16,27,40,.92) !important; color: #bbf7d0 !important; border-color: var(--public-border) !important; } body.public-shell .public-part-preview-popover { color: var(--public-ink) !important; } html[data-theme="dark"] body.public-shell .public-part-preview-popover, body.public-shell.theme-dark .public-part-preview-popover { background: #101b28 !important; color: var(--public-ink) !important; border-color: var(--public-border) !important; } html[data-theme="dark"] body.public-shell .public-part-preview-popover__desc, body.public-shell.theme-dark .public-part-preview-popover__desc { color: var(--public-muted) !important; } html[data-theme="dark"] body.public-shell .public-part-preview-popover__head, html[data-theme="dark"] body.public-shell .public-part-preview-popover__media, html[data-theme="dark"] body.public-shell .public-part-preview-popover__thumbs, html[data-theme="dark"] body.public-shell .public-part-preview-popover__noimage, body.public-shell.theme-dark .public-part-preview-popover__head, body.public-shell.theme-dark .public-part-preview-popover__media, body.public-shell.theme-dark .public-part-preview-popover__thumbs, body.public-shell.theme-dark .public-part-preview-popover__noimage { background: #0b1622 !important; border-color: var(--public-border) !important; } body.public-shell .status-badge { color: #334155 !important; } body.public-shell .status-badge.is-active { color: #065f46 !important; } body.public-shell .status-badge.is-planned { color: #92400e !important; } body.public-shell .status-badge.is-completed { color: #1d4ed8 !important; } body.public-shell .status-badge.is-cancelled { color: #b02a37 !important; } html[data-theme="dark"] body.public-shell .status-badge, body.public-shell.theme-dark .status-badge { color: #e2e8f0 !important; } html[data-theme="dark"] body.public-shell .status-badge.is-active, body.public-shell.theme-dark .status-badge.is-active { color: #bbf7d0 !important; } html[data-theme="dark"] body.public-shell .status-badge.is-planned, body.public-shell.theme-dark .status-badge.is-planned { color: #fde68a !important; } html[data-theme="dark"] body.public-shell .status-badge.is-completed, body.public-shell.theme-dark .status-badge.is-completed { color: #bfdbfe !important; } html[data-theme="dark"] body.public-shell .status-badge.is-cancelled, body.public-shell.theme-dark .status-badge.is-cancelled { color: #fecdd3 !important; } /* ========================================================= 2026-04-29 Admin contrast pass เป้าหมาย: อ่านชัดทั้ง Light/Dark เฉพาะฝั่ง Admin ไม่กระทบ Public ========================================================= */ body.admin-body, body.admin-body:not(.theme-dark), html[data-theme="light"] body.admin-body { --admin-bg: #f3f7f4; --admin-bg-soft: #eef5f1; --admin-surface: #ffffff; --admin-surface-2: #f8fafc; --admin-surface-3: #eef4f0; --admin-border: #d7e1dc; --admin-border-strong: #b9c9c2; --admin-heading: #0b1f17; --admin-ink: #16251f; --admin-ink-soft: #34483f; --admin-muted: #5f7169; --admin-brand: #087f5b; --admin-brand-strong: #05603f; --admin-success: #087f5b; --admin-warning: #92400e; --admin-danger: #b42318; --admin-info: #075985; --admin-shadow: 0 18px 42px rgba(15, 23, 42, .08); background: var(--admin-bg) !important; color: var(--admin-ink) !important; } html[data-theme="dark"] body.admin-body, body.admin-body.theme-dark { --admin-bg: #07120f; --admin-bg-soft: #0a1b17; --admin-surface: #101c25; --admin-surface-2: #142432; --admin-surface-3: #1b3141; --admin-border: rgba(148, 163, 184, .22); --admin-border-strong: rgba(203, 213, 225, .34); --admin-heading: #f8fafc; --admin-ink: #e8f2ef; --admin-ink-soft: #cbdcd6; --admin-muted: #a9bab4; --admin-brand: #86efac; --admin-brand-strong: #bbf7d0; --admin-success: #bbf7d0; --admin-warning: #fde68a; --admin-danger: #fecdd3; --admin-info: #bfdbfe; --admin-shadow: 0 22px 54px rgba(0, 0, 0, .36); background: var(--admin-bg) !important; color: var(--admin-ink) !important; } body.admin-body .admin-shell, body.admin-body .app-main, body.admin-body [app-main] { background: radial-gradient(900px 420px at 100% 0%, rgba(16, 185, 129, .08), transparent 58%), linear-gradient(180deg, var(--admin-bg), var(--admin-bg-soft)) !important; color: var(--admin-ink) !important; } body.admin-body .app-top-controls { color: var(--admin-ink) !important; } body.admin-body .app-top-controls .badge, body.admin-body .text-bg-light, body.admin-body .badge.text-bg-light { background: var(--admin-surface) !important; color: var(--admin-ink-soft) !important; border-color: var(--admin-border) !important; box-shadow: 0 8px 20px rgba(15, 23, 42, .05); } body.admin-body .footer { color: var(--admin-muted) !important; border-color: var(--admin-border) !important; } body.admin-body h1, body.admin-body h2, body.admin-body h3, body.admin-body h4, body.admin-body h5, body.admin-body h6, body.admin-body .h1, body.admin-body .h2, body.admin-body .h3, body.admin-body .h4, body.admin-body .h5, body.admin-body .h6, body.admin-body .fw-bold, body.admin-body .fw-semibold, body.admin-body .title, body.admin-body .section-title, body.admin-body .analytics-card__title, body.admin-body .kpi-value, body.admin-body .stat-value, body.admin-body .mini-stat__value, body.admin-body .value, body.admin-body .audit-cell-title, body.admin-body .pending-title, body.admin-body .status-card__metric-value, body.admin-body .hero-chip__value, body.admin-body .rich-text-panel__title, body.admin-body .modal-title, body.admin-body .card-title { color: var(--admin-heading) !important; } body.admin-body, body.admin-body p, body.admin-body .card, body.admin-body .card-body, body.admin-body .modal-content, body.admin-body .modal-body, body.admin-body .dropdown-menu, body.admin-body .list-group-item, body.admin-body .table, body.admin-body .table td, body.admin-body .table th { color: var(--admin-ink) !important; } body.admin-body .text-muted, body.admin-body .text-secondary, body.admin-body .small, body.admin-body .sub, body.admin-body .hint, body.admin-body .label, body.admin-body .stat-label, body.admin-body .stat-note, body.admin-body .kpi-label, body.admin-body .mini-stat__label, body.admin-body .mini-stat__hint, body.admin-body .analytics-card__desc, body.admin-body .audit-cell-sub, body.admin-body .section-hint, body.admin-body .field-note, body.admin-body .rich-text-panel__hint, body.admin-body .rich-text-panel__foot, body.admin-body .desc-footer, body.admin-body .form-text, body.admin-body .dataTables_info, body.admin-body .dataTables_length, body.admin-body .dataTables_filter, body.admin-body .dataTables_wrapper .dataTables_info, body.admin-body .dataTables_wrapper .dataTables_length, body.admin-body .dataTables_wrapper .dataTables_filter, body.admin-body .empty-state, body.admin-body .empty-state *:not(.btn):not(i) { color: var(--admin-muted) !important; } body.admin-body .text-slate-900, body.admin-body .text-slate-800, body.admin-body .text-slate-700, body.admin-body .text-dark { color: var(--admin-heading) !important; } body.admin-body .text-slate-600, body.admin-body .text-slate-500, body.admin-body .text-slate-400 { color: var(--admin-muted) !important; } body.admin-body .card, body.admin-body .modal-content, body.admin-body .dropdown-menu, body.admin-body .list-group-item, body.admin-body .analytics-card, body.admin-body .kpi-card, body.admin-body .stat-card, body.admin-body .mini-stat, body.admin-body .panel, body.admin-body .status-card, body.admin-body .pending-item, body.admin-body .tab-shell, body.admin-body .media-editor-card, body.admin-body .desc-editor, body.admin-body .rich-text-panel, body.admin-body .sticky-note, body.admin-body .surface-card, body.admin-body .section-card, body.admin-body .data-card, body.admin-body .admin-card, body.admin-body .project-panel, body.admin-body .project-kpi, body.admin-body .metric, body.admin-body .perm-stat, body.admin-body .role-card, body.admin-body .permission-card, body.admin-body .map-shell, body.admin-body .toolbar, body.admin-body .empty-state { background: var(--admin-surface) !important; color: var(--admin-ink) !important; border-color: var(--admin-border) !important; box-shadow: var(--admin-shadow); } body.admin-body .card-header, body.admin-body .card-footer, body.admin-body .modal-header, body.admin-body .modal-footer, body.admin-body .analytics-card__head, body.admin-body .panel .hd, body.admin-body .rich-text-panel__head, body.admin-body .rich-text-panel__foot, body.admin-body .desc-toolbar, body.admin-body .desc-footer, body.admin-body .project-panel__head, body.admin-body .toolbar, body.admin-body .bg-slate-50, body.admin-body .bg-white, body.admin-body .to-white, body.admin-body .from-white, body.admin-body .table-light, body.admin-body .table-light > * { background: var(--admin-surface-2) !important; color: var(--admin-ink) !important; border-color: var(--admin-border) !important; } body.admin-body .sys-page-hero, body.admin-body .page-hero, body.admin-body .admin-hero, body.admin-body .hero-panel { background: radial-gradient(circle at 0% 0%, rgba(16, 185, 129, .14), transparent 36%), radial-gradient(circle at 100% 0%, rgba(45, 212, 191, .10), transparent 34%), linear-gradient(135deg, var(--admin-surface), var(--admin-surface-2)) !important; color: var(--admin-ink) !important; border-color: var(--admin-border) !important; box-shadow: var(--admin-shadow); } body.admin-body .sys-page-hero__title, body.admin-body .sys-page-hero__stat-value, body.admin-body .sys-page-hero__copy, body.admin-body .page-title { color: var(--admin-heading) !important; } body.admin-body .sys-page-hero__subtitle, body.admin-body .sys-page-hero__stat-label, body.admin-body .sys-page-hero__eyebrow { color: var(--admin-muted) !important; } body.admin-body .sys-page-hero__badge, body.admin-body .sys-page-hero__stat, body.admin-body .hero-chip, body.admin-body .chip, body.admin-body .stat-chip, body.admin-body .mini-code, body.admin-body .geo-mini-code, body.admin-body .rich-meta-chip, body.admin-body .perm-quick-chip, body.admin-body .filter-field, body.admin-body .status-pill, body.admin-body .badge-soft, body.admin-body .metric-badge { background: var(--admin-surface-2) !important; color: var(--admin-ink-soft) !important; border-color: var(--admin-border) !important; } body.admin-body .chip i, body.admin-body .stat-chip i, body.admin-body .sys-page-hero__eyebrow i, body.admin-body .section-title__icon, body.admin-body .kpi-icon, body.admin-body .mini-stat__icon, body.admin-body .status-card__icon, body.admin-body .analytics-card__tag, body.admin-body .hero-chip__label { color: var(--admin-brand-strong) !important; } body.admin-body .form-label, body.admin-body label, body.admin-body .filter-label, body.admin-body .audit-filter-label { color: var(--admin-ink-soft) !important; font-weight: 750; } body.admin-body .form-control, body.admin-body .form-select, body.admin-body textarea.form-control, body.admin-body input.form-control, body.admin-body .input-group-text, body.admin-body .form-control-sm, body.admin-body .form-check-input { background-color: var(--admin-surface) !important; color: var(--admin-heading) !important; border-color: var(--admin-border-strong) !important; } body.admin-body .form-control::placeholder, body.admin-body textarea.form-control::placeholder { color: var(--admin-muted) !important; opacity: 1 !important; } body.admin-body .form-control:focus, body.admin-body .form-select:focus, body.admin-body textarea.form-control:focus, body.admin-body input.form-control:focus { background-color: var(--admin-surface) !important; color: var(--admin-heading) !important; border-color: rgba(16,185,129,.72) !important; box-shadow: 0 0 0 .25rem rgba(16,185,129,.16) !important; } body.admin-body .form-check-input:checked { background-color: var(--admin-brand) !important; border-color: var(--admin-brand) !important; } body.admin-body .table, body.admin-body table.dataTable { --bs-table-color: var(--admin-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--admin-border); color: var(--admin-ink) !important; border-color: var(--admin-border) !important; } body.admin-body .table thead th, body.admin-body table.dataTable thead th, body.admin-body .table thead td, body.admin-body table.dataTable thead td { background: var(--admin-surface-2) !important; color: var(--admin-heading) !important; border-color: var(--admin-border) !important; } body.admin-body .table tbody td, body.admin-body .table tbody th, body.admin-body table.dataTable tbody td, body.admin-body table.dataTable tbody th { color: var(--admin-ink) !important; border-color: var(--admin-border) !important; background-color: transparent !important; } body.admin-body .table-hover tbody tr:hover > *, body.admin-body table.dataTable.hover tbody tr:hover > *, body.admin-body table.dataTable.display tbody tr:hover > * { background: rgba(16, 185, 129, .075) !important; color: var(--admin-heading) !important; } body.admin-body .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(15, 23, 42, .025) !important; color: var(--admin-ink) !important; } html[data-theme="dark"] body.admin-body .table-striped > tbody > tr:nth-of-type(odd) > *, body.admin-body.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, .035) !important; } body.admin-body .dataTables_wrapper .dataTables_length select, body.admin-body .dataTables_wrapper .dataTables_filter input, body.admin-body .dataTables_wrapper .form-select, body.admin-body .dataTables_wrapper .form-control { background-color: var(--admin-surface) !important; color: var(--admin-heading) !important; border-color: var(--admin-border-strong) !important; } body.admin-body .page-link { background: var(--admin-surface) !important; color: var(--admin-brand-strong) !important; border-color: var(--admin-border) !important; } body.admin-body .page-item.active .page-link { background: var(--admin-brand) !important; color: #fff !important; border-color: var(--admin-brand) !important; } body.admin-body .page-item.disabled .page-link { background: var(--admin-surface-2) !important; color: var(--admin-muted) !important; } body.admin-body .nav-tabs, body.admin-body .nav-pills { border-color: var(--admin-border) !important; } body.admin-body .nav-tabs .nav-link, body.admin-body .nav-pills .nav-link { color: var(--admin-muted) !important; border-color: transparent !important; } body.admin-body .nav-tabs .nav-link:hover, body.admin-body .nav-pills .nav-link:hover { color: var(--admin-heading) !important; background: var(--admin-surface-2) !important; } body.admin-body .nav-tabs .nav-link.active, body.admin-body .nav-pills .nav-link.active { color: var(--admin-brand-strong) !important; background: var(--admin-surface) !important; border-color: var(--admin-border) var(--admin-border) var(--admin-surface) !important; } body.admin-body .btn-outline-secondary, body.admin-body .btn-outline-primary, body.admin-body .btn-outline-success, body.admin-body .btn-outline-brand { color: var(--admin-ink-soft) !important; background: transparent !important; border-color: var(--admin-border-strong) !important; } body.admin-body .btn-outline-secondary:hover, body.admin-body .btn-outline-primary:hover, body.admin-body .btn-outline-success:hover, body.admin-body .btn-outline-brand:hover { color: #fff !important; background: var(--admin-brand) !important; border-color: var(--admin-brand) !important; } body.admin-body .btn-brand, body.admin-body .btn-success, body.admin-body .btn-primary { color: #fff !important; border-color: transparent !important; } body.admin-body .badge, body.admin-body .severity-badge, body.admin-body .status-badge { border-color: var(--admin-border) !important; } body.admin-body .text-success { color: var(--admin-success) !important; } body.admin-body .text-danger { color: var(--admin-danger) !important; } body.admin-body .text-warning { color: var(--admin-warning) !important; } body.admin-body .text-primary, body.admin-body .text-info { color: var(--admin-info) !important; } body.admin-body .alert { color: var(--admin-ink) !important; border-color: var(--admin-border) !important; } body.admin-body .alert-info, body.admin-body .bg-info-subtle { background: rgba(14, 165, 233, .12) !important; color: var(--admin-info) !important; } body.admin-body .alert-success, body.admin-body .bg-success-subtle { background: rgba(16, 185, 129, .12) !important; color: var(--admin-success) !important; } body.admin-body .alert-warning, body.admin-body .bg-warning-subtle { background: rgba(245, 158, 11, .14) !important; color: var(--admin-warning) !important; } body.admin-body .alert-danger, body.admin-body .bg-danger-subtle { background: rgba(239, 68, 68, .12) !important; color: var(--admin-danger) !important; } html[data-theme="dark"] body.admin-body .btn-close, body.admin-body.theme-dark .btn-close { filter: invert(1) grayscale(100%) brightness(1.85); } html[data-theme="dark"] body.admin-body .dropdown-item, body.admin-body.theme-dark .dropdown-item { color: var(--admin-ink) !important; } html[data-theme="dark"] body.admin-body .dropdown-item:hover, body.admin-body.theme-dark .dropdown-item:hover { background: rgba(255,255,255,.06) !important; color: var(--admin-heading) !important; } body.admin-body .leaflet-popup-content-wrapper, body.admin-body .leaflet-popup-tip, body.admin-body .leaflet-control-layers, body.admin-body .leaflet-bar a { background: var(--admin-surface) !important; color: var(--admin-heading) !important; border-color: var(--admin-border) !important; } body.admin-body .leaflet-container, body.admin-body .gis-map, body.admin-body #map, body.admin-body #gisMap, body.admin-body #projectMap { background: var(--admin-surface-2) !important; color: var(--admin-ink) !important; border-color: var(--admin-border) !important; } body.admin-body .media-thumb, body.admin-body .media-empty-thumb, body.admin-body .table-preview, body.admin-body .desc-textarea, body.admin-body .rich-text-panel .form-control, body.admin-body .code, body.admin-body pre, body.admin-body code { background: var(--admin-surface-2) !important; color: var(--admin-heading) !important; border-color: var(--admin-border) !important; } html[data-theme="dark"] body.admin-body .bg-gradient-to-b, body.admin-body.theme-dark .bg-gradient-to-b, html[data-theme="dark"] body.admin-body .bg-white, body.admin-body.theme-dark .bg-white, html[data-theme="dark"] body.admin-body .bg-slate-50, body.admin-body.theme-dark .bg-slate-50, html[data-theme="dark"] body.admin-body .to-white, body.admin-body.theme-dark .to-white { background: var(--admin-surface) !important; } html[data-theme="dark"] body.admin-body .text-white-50, body.admin-body.theme-dark .text-white-50 { color: rgba(248,250,252,.76) !important; } body.admin-body ::selection { background: rgba(16, 185, 129, .24); color: var(--admin-heading); } /* ========================================================= 2026-04-29 Admin visual contrast v2 เน้นความสวยงาม + placeholder รูป/empty state ให้ไม่กลืนกับ dark mode ========================================================= */ body.admin-body, body.admin-body:not(.theme-dark), html[data-theme="light"] body.admin-body { --admin-bg: #eef5f0; --admin-bg-soft: #f7fbf8; --admin-surface: #ffffff; --admin-surface-2: #f7faf8; --admin-surface-3: #edf6f1; --admin-card-ring: rgba(5, 95, 70, .10); --admin-border: #d5e2dc; --admin-border-strong: #9fb8ad; --admin-heading: #071812; --admin-ink: #12251d; --admin-ink-soft: #294238; --admin-muted: #526c62; --admin-placeholder-bg: linear-gradient(145deg, #f0fdf4 0%, #ecfeff 55%, #ffffff 100%); --admin-placeholder-border: rgba(5, 150, 105, .36); --admin-placeholder-ink: #065f46; --admin-placeholder-muted: #3f6f61; --admin-shadow: 0 18px 48px rgba(15, 23, 42, .085); } html[data-theme="dark"] body.admin-body, body.admin-body.theme-dark { --admin-bg: #06110e; --admin-bg-soft: #081a15; --admin-surface: #0f1e27; --admin-surface-2: #142936; --admin-surface-3: #1b3a48; --admin-card-ring: rgba(187, 247, 208, .13); --admin-border: rgba(148, 163, 184, .28); --admin-border-strong: rgba(203, 213, 225, .46); --admin-heading: #ffffff; --admin-ink: #edf7f4; --admin-ink-soft: #d4e5df; --admin-muted: #b7cbc3; --admin-placeholder-bg: linear-gradient(145deg, rgba(4, 120, 87, .34) 0%, rgba(14, 116, 144, .28) 55%, rgba(15, 23, 42, .72) 100%); --admin-placeholder-border: rgba(134, 239, 172, .56); --admin-placeholder-ink: #ecfdf5; --admin-placeholder-muted: #bbf7d0; --admin-shadow: 0 22px 62px rgba(0, 0, 0, .42); } body.admin-body .app-main, body.admin-body [app-main] { background: radial-gradient(880px 500px at 96% 0%, rgba(16,185,129,.12), transparent 58%), radial-gradient(720px 420px at 10% 6%, rgba(14,165,233,.055), transparent 52%), linear-gradient(180deg, var(--admin-bg), var(--admin-bg-soft)) !important; } body.admin-body .card, body.admin-body .modal-content, body.admin-body .dropdown-menu, body.admin-body .offcanvas, body.admin-body .admin-card, body.admin-body .dashboard-card, body.admin-body .section-card, body.admin-body .filter-card, body.admin-body .table-card, body.admin-body .panel, body.admin-body .rich-panel, body.admin-body .metric-card, body.admin-body .kpi-card, body.admin-body .stat-card, body.admin-body .status-card, body.admin-body .mini-stat, body.admin-body .analytics-card, body.admin-body .media-editor-card, body.admin-body .tab-shell, body.admin-body .desc-editor, body.admin-body .sticky-note, body.admin-body .geo-panel, body.admin-body .gis-card, body.admin-body .project-card { background: linear-gradient(180deg, color-mix(in srgb, var(--admin-surface) 96%, #ffffff 4%), var(--admin-surface)) !important; color: var(--admin-ink) !important; border-color: var(--admin-border) !important; box-shadow: var(--admin-shadow) !important; } html[data-theme="dark"] body.admin-body .card, html[data-theme="dark"] body.admin-body .modal-content, html[data-theme="dark"] body.admin-body .dropdown-menu, html[data-theme="dark"] body.admin-body .offcanvas, html[data-theme="dark"] body.admin-body .admin-card, html[data-theme="dark"] body.admin-body .dashboard-card, html[data-theme="dark"] body.admin-body .section-card, html[data-theme="dark"] body.admin-body .filter-card, html[data-theme="dark"] body.admin-body .table-card, html[data-theme="dark"] body.admin-body .panel, html[data-theme="dark"] body.admin-body .rich-panel, html[data-theme="dark"] body.admin-body .metric-card, html[data-theme="dark"] body.admin-body .kpi-card, html[data-theme="dark"] body.admin-body .stat-card, html[data-theme="dark"] body.admin-body .status-card, html[data-theme="dark"] body.admin-body .mini-stat, html[data-theme="dark"] body.admin-body .analytics-card, html[data-theme="dark"] body.admin-body .media-editor-card, html[data-theme="dark"] body.admin-body .tab-shell, html[data-theme="dark"] body.admin-body .desc-editor, html[data-theme="dark"] body.admin-body .sticky-note, html[data-theme="dark"] body.admin-body .geo-panel, html[data-theme="dark"] body.admin-body .gis-card, html[data-theme="dark"] body.admin-body .project-card, body.admin-body.theme-dark .card, body.admin-body.theme-dark .modal-content, body.admin-body.theme-dark .dropdown-menu, body.admin-body.theme-dark .offcanvas, body.admin-body.theme-dark .admin-card, body.admin-body.theme-dark .dashboard-card, body.admin-body.theme-dark .section-card, body.admin-body.theme-dark .filter-card, body.admin-body.theme-dark .table-card, body.admin-body.theme-dark .panel, body.admin-body.theme-dark .rich-panel, body.admin-body.theme-dark .metric-card, body.admin-body.theme-dark .kpi-card, body.admin-body.theme-dark .stat-card, body.admin-body.theme-dark .status-card, body.admin-body.theme-dark .mini-stat, body.admin-body.theme-dark .analytics-card, body.admin-body.theme-dark .media-editor-card, body.admin-body.theme-dark .tab-shell, body.admin-body.theme-dark .desc-editor, body.admin-body.theme-dark .sticky-note, body.admin-body.theme-dark .geo-panel, body.admin-body.theme-dark .gis-card, body.admin-body.theme-dark .project-card { background: linear-gradient(180deg, rgba(20,41,54,.98), rgba(13,29,38,.98)) !important; box-shadow: 0 22px 62px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035) !important; } body.admin-body .card-header, body.admin-body .modal-header, body.admin-body .modal-footer, body.admin-body .toolbar, body.admin-body .filter-shell, body.admin-body .desc-toolbar, body.admin-body .table thead th, body.admin-body table.dataTable thead th { background: linear-gradient(180deg, var(--admin-surface-2), color-mix(in srgb, var(--admin-surface-2) 78%, var(--admin-surface) 22%)) !important; color: var(--admin-heading) !important; border-color: var(--admin-border) !important; } body.admin-body .empty-state, body.admin-body .no-data, body.admin-body .no-results, body.admin-body .blank-state, body.admin-body .upload-empty, body.admin-body .media-empty-thumb, body.admin-body .thumb-empty, body.admin-body .image-empty, body.admin-body .image-placeholder, body.admin-body .placeholder-box, body.admin-body .photo-empty, body.admin-body .preview-empty { position: relative; overflow: hidden; background: var(--admin-placeholder-bg) !important; color: var(--admin-placeholder-ink) !important; border: 1.5px dashed var(--admin-placeholder-border) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(15,23,42,.08) !important; isolation: isolate; } body.admin-body .empty-state::after, body.admin-body .no-data::after, body.admin-body .no-results::after, body.admin-body .blank-state::after, body.admin-body .upload-empty::after, body.admin-body .media-empty-thumb::after, body.admin-body .thumb-empty::after, body.admin-body .image-empty::after, body.admin-body .image-placeholder::after, body.admin-body .placeholder-box::after, body.admin-body .photo-empty::after, body.admin-body .preview-empty::after { content: ""; position: absolute; inset: -40% -20%; background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.32), transparent 25%), radial-gradient(circle at 80% 80%, rgba(16,185,129,.14), transparent 28%); pointer-events: none; z-index: -1; } body.admin-body .media-empty-thumb, body.admin-body .thumb-empty, body.admin-body .image-empty, body.admin-body .image-placeholder, body.admin-body .photo-empty, body.admin-body .preview-empty { min-height: 76px; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .26rem; text-align: center; font-weight: 850 !important; letter-spacing: .01em; } body.admin-body .media-empty-thumb::before, body.admin-body .thumb-empty::before, body.admin-body .image-empty::before, body.admin-body .image-placeholder::before, body.admin-body .photo-empty::before, body.admin-body .preview-empty::before { content: "\f03e"; font-family: "Font Awesome 6 Free"; font-weight: 900; width: 34px; height: 34px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .12rem; color: var(--admin-placeholder-ink); background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 10px 22px rgba(6,95,70,.14); } body.admin-body .thumb-empty { width: 60px !important; height: 60px !important; min-height: 60px !important; border-radius: 1rem !important; font-size: 0 !important; } body.admin-body .thumb-empty::before { width: 28px; height: 28px; border-radius: 12px; margin: 0; font-size: 14px; } body.admin-body .thumb-empty .thumb-empty-text { display: none !important; } body.admin-body img[src*="placeholder.svg"], body.admin-body .thumb[src*="placeholder.svg"], body.admin-body .media-thumb[src*="placeholder.svg"], body.admin-body .hpv-habit-visual-img[src*="placeholder.svg"] { background: var(--admin-placeholder-bg) !important; border: 1.5px dashed var(--admin-placeholder-border) !important; padding: 8px !important; object-fit: contain !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(15,23,42,.10) !important; } html[data-theme="dark"] body.admin-body img[src*="placeholder.svg"], html[data-theme="dark"] body.admin-body .thumb[src*="placeholder.svg"], html[data-theme="dark"] body.admin-body .media-thumb[src*="placeholder.svg"], html[data-theme="dark"] body.admin-body .hpv-habit-visual-img[src*="placeholder.svg"], body.admin-body.theme-dark img[src*="placeholder.svg"], body.admin-body.theme-dark .thumb[src*="placeholder.svg"], body.admin-body.theme-dark .media-thumb[src*="placeholder.svg"], body.admin-body.theme-dark .hpv-habit-visual-img[src*="placeholder.svg"] { filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); } body.admin-body .text-muted, body.admin-body .small.text-muted, body.admin-body .form-text, body.admin-body .card-subtitle, body.admin-body .mini-note, body.admin-body .section-hint, body.admin-body .herb-sub, body.admin-body .nav-desc, body.admin-body .dataTables_info, body.admin-body .dataTables_length label, body.admin-body .dataTables_filter label { color: var(--admin-muted) !important; } body.admin-body .card-title, body.admin-body .modal-title, body.admin-body h1, body.admin-body h2, body.admin-body h3, body.admin-body h4, body.admin-body h5, body.admin-body h6, body.admin-body .fw-bold, body.admin-body .fw-semibold, body.admin-body .herb-name, body.admin-body .section-title, body.admin-body .kpi-value, body.admin-body .metric-value, body.admin-body .stat-value { color: var(--admin-heading) !important; } body.admin-body .table tbody tr, body.admin-body table.dataTable tbody tr { background-color: color-mix(in srgb, var(--admin-surface) 96%, transparent) !important; } body.admin-body .table tbody tr + tr, body.admin-body table.dataTable tbody tr + tr { border-top: 1px solid var(--admin-border) !important; } html[data-theme="dark"] body.admin-body .table tbody tr:hover > *, html[data-theme="dark"] body.admin-body table.dataTable tbody tr:hover > *, body.admin-body.theme-dark .table tbody tr:hover > *, body.admin-body.theme-dark table.dataTable tbody tr:hover > * { background: rgba(134, 239, 172, .095) !important; color: #fff !important; } body.admin-body .form-control, body.admin-body .form-select, body.admin-body textarea.form-control, body.admin-body input.form-control, body.admin-body .input-group-text { box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; } html[data-theme="dark"] body.admin-body .form-control, html[data-theme="dark"] body.admin-body .form-select, html[data-theme="dark"] body.admin-body textarea.form-control, html[data-theme="dark"] body.admin-body input.form-control, html[data-theme="dark"] body.admin-body .input-group-text, body.admin-body.theme-dark .form-control, body.admin-body.theme-dark .form-select, body.admin-body.theme-dark textarea.form-control, body.admin-body.theme-dark input.form-control, body.admin-body.theme-dark .input-group-text { background-color: #0c1a22 !important; border-color: rgba(203,213,225,.38) !important; } body.admin-body .btn-outline-secondary, body.admin-body .btn-outline-light { color: var(--admin-ink-soft) !important; background: color-mix(in srgb, var(--admin-surface) 70%, transparent) !important; } html[data-theme="dark"] body.admin-body .btn-outline-secondary, html[data-theme="dark"] body.admin-body .btn-outline-light, body.admin-body.theme-dark .btn-outline-secondary, body.admin-body.theme-dark .btn-outline-light { color: #dff7ee !important; border-color: rgba(203,213,225,.42) !important; background: rgba(255,255,255,.035) !important; } body.admin-body .badge.bg-light, body.admin-body .badge.text-bg-light, body.admin-body .text-bg-light, body.admin-body .bg-light { background-color: var(--admin-surface-2) !important; color: var(--admin-ink-soft) !important; border-color: var(--admin-border) !important; } html[data-theme="dark"] body.admin-body .badge.bg-light, html[data-theme="dark"] body.admin-body .badge.text-bg-light, html[data-theme="dark"] body.admin-body .text-bg-light, html[data-theme="dark"] body.admin-body .bg-light, body.admin-body.theme-dark .badge.bg-light, body.admin-body.theme-dark .badge.text-bg-light, body.admin-body.theme-dark .text-bg-light, body.admin-body.theme-dark .bg-light { background-color: rgba(255,255,255,.08) !important; color: #ecfdf5 !important; } body.admin-body .media-cover-badge { background: linear-gradient(135deg, #facc15, #f59e0b) !important; color: #422006 !important; border: 1px solid rgba(255,255,255,.45) !important; } /* ========================================================= 2026-04-29 Admin premium visual contrast v3 Bigger readable sidebar + stronger dark-mode separation ========================================================= */ :root { --admin-radius-lg: 24px; --admin-radius-md: 18px; } body.admin-body { background: radial-gradient(circle at 16% -12%, rgba(16,185,129,.13), transparent 34%), radial-gradient(circle at 90% 2%, rgba(132,204,22,.10), transparent 28%), #f2f7f1 !important; } html[data-theme="dark"] body.admin-body, body.admin-body.theme-dark { background: radial-gradient(circle at 16% -12%, rgba(34,197,94,.13), transparent 34%), radial-gradient(circle at 90% 0%, rgba(45,212,191,.10), transparent 30%), linear-gradient(180deg, #071410 0%, #091b18 46%, #06100e 100%) !important; } body.admin-body .app-main { color: var(--admin-ink) !important; } body.admin-body .app-top-controls { padding: 12px 14px !important; border-radius: 22px !important; background: rgba(255,255,255,.72) !important; border: 1px solid rgba(15,23,42,.08) !important; box-shadow: 0 14px 38px rgba(15,23,42,.07) !important; backdrop-filter: blur(16px); } html[data-theme="dark"] body.admin-body .app-top-controls, body.admin-body.theme-dark .app-top-controls { background: rgba(14,31,39,.84) !important; border-color: rgba(148,163,184,.18) !important; box-shadow: 0 18px 44px rgba(0,0,0,.34) !important; } body.admin-body .app-top-controls .badge, body.admin-body .app-top-controls .btn { min-height: 38px; display: inline-flex; align-items: center; gap: .45rem; border-radius: 14px !important; font-weight: 800 !important; } body.admin-body .app-top-controls .badge { padding: .55rem .75rem !important; font-size: 13px !important; } body.admin-body .card, body.admin-body .admin-card, body.admin-body .dashboard-card, body.admin-body .section-card, body.admin-body .filter-card, body.admin-body .table-card, body.admin-body .panel, body.admin-body .rich-panel, body.admin-body .metric-card, body.admin-body .kpi-card, body.admin-body .stat-card, body.admin-body .status-card, body.admin-body .mini-stat, body.admin-body .analytics-card, body.admin-body .media-editor-card, body.admin-body .tab-shell, body.admin-body .desc-editor, body.admin-body .geo-panel, body.admin-body .gis-card, body.admin-body .project-card { border-radius: var(--admin-radius-lg) !important; border: 1px solid color-mix(in srgb, var(--admin-border-strong) 72%, transparent) !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,252,249,.94)) !important; box-shadow: 0 20px 56px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.62) !important; } html[data-theme="dark"] body.admin-body .card, html[data-theme="dark"] body.admin-body .admin-card, html[data-theme="dark"] body.admin-body .dashboard-card, html[data-theme="dark"] body.admin-body .section-card, html[data-theme="dark"] body.admin-body .filter-card, html[data-theme="dark"] body.admin-body .table-card, html[data-theme="dark"] body.admin-body .panel, html[data-theme="dark"] body.admin-body .rich-panel, html[data-theme="dark"] body.admin-body .metric-card, html[data-theme="dark"] body.admin-body .kpi-card, html[data-theme="dark"] body.admin-body .stat-card, html[data-theme="dark"] body.admin-body .status-card, html[data-theme="dark"] body.admin-body .mini-stat, html[data-theme="dark"] body.admin-body .analytics-card, html[data-theme="dark"] body.admin-body .media-editor-card, html[data-theme="dark"] body.admin-body .tab-shell, html[data-theme="dark"] body.admin-body .desc-editor, html[data-theme="dark"] body.admin-body .geo-panel, html[data-theme="dark"] body.admin-body .gis-card, html[data-theme="dark"] body.admin-body .project-card, body.admin-body.theme-dark .card, body.admin-body.theme-dark .admin-card, body.admin-body.theme-dark .dashboard-card, body.admin-body.theme-dark .section-card, body.admin-body.theme-dark .filter-card, body.admin-body.theme-dark .table-card, body.admin-body.theme-dark .panel, body.admin-body.theme-dark .rich-panel, body.admin-body.theme-dark .metric-card, body.admin-body.theme-dark .kpi-card, body.admin-body.theme-dark .stat-card, body.admin-body.theme-dark .status-card, body.admin-body.theme-dark .mini-stat, body.admin-body.theme-dark .analytics-card, body.admin-body.theme-dark .media-editor-card, body.admin-body.theme-dark .tab-shell, body.admin-body.theme-dark .desc-editor, body.admin-body.theme-dark .geo-panel, body.admin-body.theme-dark .gis-card, body.admin-body.theme-dark .project-card { background: linear-gradient(180deg, rgba(24,48,58,.98), rgba(12,29,36,.98)) !important; border-color: rgba(148,163,184,.22) !important; box-shadow: 0 24px 72px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06) !important; } body.admin-body .card-header, body.admin-body .modal-header, body.admin-body .table thead th, body.admin-body table.dataTable thead th { font-size: 14px !important; font-weight: 900 !important; letter-spacing: .01em; } body.admin-body .table, body.admin-body table.dataTable { --bs-table-color: var(--admin-ink) !important; color: var(--admin-ink) !important; border-color: var(--admin-border) !important; } body.admin-body .table tbody td, body.admin-body table.dataTable tbody td { color: var(--admin-ink) !important; vertical-align: middle !important; } html[data-theme="dark"] body.admin-body .table tbody tr > *, html[data-theme="dark"] body.admin-body table.dataTable tbody tr > *, body.admin-body.theme-dark .table tbody tr > *, body.admin-body.theme-dark table.dataTable tbody tr > * { background-color: rgba(15,35,43,.76) !important; border-bottom-color: rgba(148,163,184,.14) !important; } body.admin-body .form-control, body.admin-body .form-select, body.admin-body textarea, body.admin-body input[type="file"] { min-height: 44px; border-radius: 14px !important; font-size: 14px !important; font-weight: 650 !important; } body.admin-body .empty-state, body.admin-body .no-data, body.admin-body .no-results, body.admin-body .blank-state, body.admin-body .upload-empty, body.admin-body .media-empty-thumb, body.admin-body .thumb-empty, body.admin-body .image-empty, body.admin-body .image-placeholder, body.admin-body .placeholder-box, body.admin-body .photo-empty, body.admin-body .preview-empty { border-width: 2px !important; border-style: dashed !important; border-color: rgba(34,197,94,.46) !important; background: radial-gradient(circle at 22% 18%, rgba(34,197,94,.22), transparent 30%), radial-gradient(circle at 82% 80%, rgba(132,204,22,.20), transparent 34%), linear-gradient(135deg, rgba(236,253,245,.94), rgba(220,252,231,.72)) !important; color: #14532d !important; } html[data-theme="dark"] body.admin-body .empty-state, html[data-theme="dark"] body.admin-body .no-data, html[data-theme="dark"] body.admin-body .no-results, html[data-theme="dark"] body.admin-body .blank-state, html[data-theme="dark"] body.admin-body .upload-empty, html[data-theme="dark"] body.admin-body .media-empty-thumb, html[data-theme="dark"] body.admin-body .thumb-empty, html[data-theme="dark"] body.admin-body .image-empty, html[data-theme="dark"] body.admin-body .image-placeholder, html[data-theme="dark"] body.admin-body .placeholder-box, html[data-theme="dark"] body.admin-body .photo-empty, html[data-theme="dark"] body.admin-body .preview-empty, body.admin-body.theme-dark .empty-state, body.admin-body.theme-dark .no-data, body.admin-body.theme-dark .no-results, body.admin-body.theme-dark .blank-state, body.admin-body.theme-dark .upload-empty, body.admin-body.theme-dark .media-empty-thumb, body.admin-body.theme-dark .thumb-empty, body.admin-body.theme-dark .image-empty, body.admin-body.theme-dark .image-placeholder, body.admin-body.theme-dark .placeholder-box, body.admin-body.theme-dark .photo-empty, body.admin-body.theme-dark .preview-empty { border-color: rgba(134,239,172,.58) !important; background: radial-gradient(circle at 24% 18%, rgba(34,197,94,.24), transparent 32%), radial-gradient(circle at 82% 80%, rgba(132,204,22,.18), transparent 34%), linear-gradient(135deg, rgba(18,48,39,.96), rgba(8,28,24,.94)) !important; color: #dcfce7 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 42px rgba(0,0,0,.34) !important; } body.admin-body .thumb-empty { width: 72px !important; height: 72px !important; min-height: 72px !important; border-radius: 20px !important; } body.admin-body .thumb-empty::before { width: 36px !important; height: 36px !important; font-size: 17px !important; border-radius: 15px !important; background: rgba(255,255,255,.22) !important; } html[data-theme="dark"] body.admin-body .thumb-empty::before, body.admin-body.theme-dark .thumb-empty::before { background: rgba(255,255,255,.10) !important; border-color: rgba(187,247,208,.22) !important; } body.admin-body .btn { border-radius: 14px !important; font-weight: 800 !important; } body.admin-body .badge, body.admin-body .status-badge, body.admin-body .chip, body.admin-body .pill { font-weight: 850 !important; letter-spacing: .005em; } @media (max-width: 1199.98px) { :root { --admin-sidebar-width: 318px; } } @media (max-width: 991.98px) { .admin-shell .app-sidebar-col { width: 344px !important; max-width: 90vw !important; } } /* ========================================================= Admin theme toggle: show current Light/Dark state clearly ========================================================= */ body.admin-body .admin-theme-toggle { min-height: 38px !important; min-width: 112px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .48rem !important; padding: .42rem .68rem !important; border-radius: 999px !important; border: 1px solid rgba(15, 23, 42, .14) !important; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; color: #0f172a !important; box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important; } body.admin-body .admin-theme-toggle .theme-toggle-icon { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #fef3c7 !important; color: #b45309 !important; box-shadow: inset 0 0 0 1px rgba(180, 83, 9, .12) !important; } body.admin-body .admin-theme-toggle .theme-toggle-text { font-size: 12.5px !important; font-weight: 900 !important; letter-spacing: .01em !important; line-height: 1 !important; } body.admin-body .admin-theme-toggle .theme-toggle-mode { font-size: 10px !important; font-weight: 900 !important; line-height: 1 !important; padding: .22rem .4rem !important; border-radius: 999px !important; background: rgba(15, 23, 42, .07) !important; color: #475569 !important; } body.admin-body .admin-theme-toggle.is-light { background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important; color: #0f172a !important; border-color: rgba(15, 23, 42, .16) !important; } body.admin-body .admin-theme-toggle.is-light .theme-toggle-icon { background: linear-gradient(135deg, #fde68a, #fef3c7) !important; color: #92400e !important; } body.admin-body .admin-theme-toggle.is-dark, html[data-theme="dark"] body.admin-body .admin-theme-toggle, body.admin-body.theme-dark .admin-theme-toggle { background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .94)) !important; color: #f8fafc !important; border-color: rgba(148, 163, 184, .34) !important; box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important; } body.admin-body .admin-theme-toggle.is-dark .theme-toggle-icon, html[data-theme="dark"] body.admin-body .admin-theme-toggle .theme-toggle-icon, body.admin-body.theme-dark .admin-theme-toggle .theme-toggle-icon { background: linear-gradient(135deg, rgba(59, 130, 246, .30), rgba(99, 102, 241, .22)) !important; color: #bfdbfe !important; box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .20) !important; } body.admin-body .admin-theme-toggle.is-dark .theme-toggle-mode, html[data-theme="dark"] body.admin-body .admin-theme-toggle .theme-toggle-mode, body.admin-body.theme-dark .admin-theme-toggle .theme-toggle-mode { background: rgba(255,255,255,.10) !important; color: #dbeafe !important; } body.admin-body .admin-theme-toggle:not(.is-auto) .theme-toggle-mode { display: none !important; } body.admin-body .admin-theme-toggle:hover { transform: translateY(-1px) !important; filter: brightness(1.02) !important; } @media (max-width: 575.98px) { body.admin-body .admin-theme-toggle { min-width: 42px !important; width: 42px !important; padding: .36rem !important; } } /* ========================================================= Admin Sidebar Readability Hotfix v4 บังคับตัวอักษร sidebar ไม่ให้ถูก admin contrast global override เป็นสีดำ/เทาเข้ม ========================================================= */ :root { --admin-sidebar-width: 340px; --admin-sidebar-collapsed-width: 96px; } body.admin-body .admin-shell .app-sidebar-col, body.admin-body .admin-shell .app-sidebar-col > .sidebar, body.admin-body .sidebar { color: #f8fff7 !important; } body.admin-body .sidebar .brand-title, html[data-theme="dark"] body.admin-body .sidebar .brand-title, body.admin-body.theme-dark .sidebar .brand-title { color: #ffffff !important; font-size: 17px !important; font-weight: 950 !important; letter-spacing: -.01em !important; text-shadow: 0 1px 2px rgba(0,0,0,.22) !important; } body.admin-body .sidebar .brand-subtitle, html[data-theme="dark"] body.admin-body .sidebar .brand-subtitle, body.admin-body.theme-dark .sidebar .brand-subtitle { color: #d9f99d !important; font-size: 13px !important; font-weight: 850 !important; opacity: 1 !important; } body.admin-body .sidebar .brand-chip, html[data-theme="dark"] body.admin-body .sidebar .brand-chip, body.admin-body.theme-dark .sidebar .brand-chip { color: #f7fee7 !important; background: rgba(255,255,255,.13) !important; border-color: rgba(255,255,255,.18) !important; font-size: 13px !important; min-height: 42px !important; } body.admin-body .sidebar .section, html[data-theme="dark"] body.admin-body .sidebar .section, body.admin-body.theme-dark .sidebar .section { color: #bbf7d0 !important; opacity: 1 !important; } body.admin-body .sidebar .section-title, html[data-theme="dark"] body.admin-body .sidebar .section-title, body.admin-body.theme-dark .sidebar .section-title { color: #d9f99d !important; opacity: 1 !important; font-size: 14px !important; font-weight: 950 !important; line-height: 1.18 !important; text-shadow: 0 1px 2px rgba(0,0,0,.18) !important; } body.admin-body .sidebar .section-subtitle, html[data-theme="dark"] body.admin-body .sidebar .section-subtitle, body.admin-body.theme-dark .sidebar .section-subtitle { color: #a7f3d0 !important; opacity: .86 !important; font-size: 12.5px !important; font-weight: 800 !important; } body.admin-body .sidebar .section-icon, html[data-theme="dark"] body.admin-body .sidebar .section-icon, body.admin-body.theme-dark .sidebar .section-icon { color: #d9f99d !important; background: rgba(255,255,255,.105) !important; border: 1px solid rgba(187,247,208,.16) !important; } body.admin-body .sidebar .nav-link, html[data-theme="dark"] body.admin-body .sidebar .nav-link, body.admin-body.theme-dark .sidebar .nav-link { color: #ecfdf5 !important; min-height: 72px !important; padding: .94rem 1.05rem !important; background: rgba(255,255,255,.055) !important; border-color: rgba(255,255,255,.075) !important; } body.admin-body .sidebar .nav-link:hover, html[data-theme="dark"] body.admin-body .sidebar .nav-link:hover, body.admin-body.theme-dark .sidebar .nav-link:hover { color: #ffffff !important; background: rgba(255,255,255,.115) !important; border-color: rgba(190,242,100,.20) !important; } body.admin-body .sidebar .nav-link.active, html[data-theme="dark"] body.admin-body .sidebar .nav-link.active, body.admin-body.theme-dark .sidebar .nav-link.active { color: #ffffff !important; background: linear-gradient(135deg, rgba(34,197,94,.44), rgba(132,204,22,.25)) !important; border-color: rgba(217,249,157,.42) !important; box-shadow: inset 6px 0 0 #bef264, 0 20px 40px rgba(0,0,0,.24) !important; } body.admin-body .sidebar .nav-text, html[data-theme="dark"] body.admin-body .sidebar .nav-text, body.admin-body.theme-dark .sidebar .nav-text { color: #ffffff !important; opacity: 1 !important; font-size: 16px !important; font-weight: 950 !important; line-height: 1.22 !important; letter-spacing: -.005em !important; text-shadow: 0 1px 2px rgba(0,0,0,.20) !important; } body.admin-body .sidebar .nav-desc, html[data-theme="dark"] body.admin-body .sidebar .nav-desc, body.admin-body.theme-dark .sidebar .nav-desc { color: #bbf7d0 !important; opacity: .92 !important; font-size: 13.25px !important; font-weight: 820 !important; line-height: 1.28 !important; } body.admin-body .sidebar .nav-link:hover .nav-desc, body.admin-body .sidebar .nav-link.active .nav-desc, html[data-theme="dark"] body.admin-body .sidebar .nav-link:hover .nav-desc, html[data-theme="dark"] body.admin-body .sidebar .nav-link.active .nav-desc, body.admin-body.theme-dark .sidebar .nav-link:hover .nav-desc, body.admin-body.theme-dark .sidebar .nav-link.active .nav-desc { color: #ecfccb !important; opacity: 1 !important; } body.admin-body .sidebar .nav-icon, html[data-theme="dark"] body.admin-body .sidebar .nav-icon, body.admin-body.theme-dark .sidebar .nav-icon { color: #ecfdf5 !important; width: 50px !important; min-width: 50px !important; height: 50px !important; font-size: 19px !important; background: rgba(255,255,255,.115) !important; border-color: rgba(187,247,208,.16) !important; } body.admin-body .sidebar .nav-link.active .nav-icon, html[data-theme="dark"] body.admin-body .sidebar .nav-link.active .nav-icon, body.admin-body.theme-dark .sidebar .nav-link.active .nav-icon { color: #ffffff !important; background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.24) !important; } body.admin-body .sidebar .nav-arrow, html[data-theme="dark"] body.admin-body .sidebar .nav-arrow, body.admin-body.theme-dark .sidebar .nav-arrow { color: #d9f99d !important; opacity: .95 !important; font-size: 14px !important; } body.admin-body .sidebar .user-meta .name, html[data-theme="dark"] body.admin-body .sidebar .user-meta .name, body.admin-body.theme-dark .sidebar .user-meta .name { color: #ffffff !important; font-size: 14px !important; font-weight: 950 !important; } body.admin-body .sidebar .user-meta .sub, html[data-theme="dark"] body.admin-body .sidebar .user-meta .sub, body.admin-body.theme-dark .sidebar .user-meta .sub { color: #bbf7d0 !important; opacity: .95 !important; font-size: 12.5px !important; } body.admin-body .sidebar .perm-chip, html[data-theme="dark"] body.admin-body .sidebar .perm-chip, body.admin-body.theme-dark .sidebar .perm-chip { color: #f7fee7 !important; background: rgba(132,204,22,.20) !important; border-color: rgba(217,249,157,.26) !important; font-weight: 900 !important; } body.sidebar-collapsed .sidebar .nav-link { min-height: 58px !important; padding-inline: 0 !important; } body.sidebar-collapsed .sidebar .nav-icon { width: 52px !important; min-width: 52px !important; height: 52px !important; } @media (max-width: 1199.98px) { :root { --admin-sidebar-width: 330px; } body.admin-body .sidebar .nav-text { font-size: 15.5px !important; } body.admin-body .sidebar .nav-desc { font-size: 12.9px !important; } } @media (max-width: 575.98px) { body.admin-body .sidebar .nav-text { font-size: 15px !important; } body.admin-body .sidebar .nav-desc { font-size: 12.6px !important; } } /* ========================================================= 2026-04-30 Admin Dark Table Contrast Hotfix v5 เป้าหมาย: ตารางฝั่ง Admin ใน dark mode ต้องอ่านชัด ไม่ใช้สีดำ/เทากลืนพื้น Scope: body.admin-body only ========================================================= */ body.admin-body { --admin-table-light-bg: #ffffff; --admin-table-light-head-bg: #f0f6f2; --admin-table-light-row-bg: #ffffff; --admin-table-light-row-alt: #f8fbf9; --admin-table-light-hover: #ecfdf5; --admin-table-light-border: #cddbd5; --admin-table-light-ink: #10231b; --admin-table-light-soft: #375047; } html[data-theme="dark"] body.admin-body, body.admin-body.theme-dark { --admin-table-bg: #0f2029; --admin-table-head-bg: #183341; --admin-table-row-bg: #102631; --admin-table-row-alt: #132c38; --admin-table-hover: #194338; --admin-table-border: rgba(190, 242, 100, .18); --admin-table-border-strong: rgba(187, 247, 208, .34); --admin-table-ink: #f4fff8; --admin-table-heading: #ffffff; --admin-table-soft: #d7fbe5; --admin-table-muted: #bcebd0; --admin-table-accent: #bef264; } body.admin-body .table-responsive, body.admin-body .dataTables_wrapper, body.admin-body .table-card, body.admin-body .geo-table-shell, body.admin-body .geo-import-table, body.admin-body .table-shell, body.admin-body .matrix-shell { border-color: var(--admin-border) !important; } html[data-theme="dark"] body.admin-body .table-responsive, html[data-theme="dark"] body.admin-body .dataTables_wrapper, html[data-theme="dark"] body.admin-body .table-card, html[data-theme="dark"] body.admin-body .geo-table-shell, html[data-theme="dark"] body.admin-body .geo-import-table, html[data-theme="dark"] body.admin-body .table-shell, html[data-theme="dark"] body.admin-body .matrix-shell, body.admin-body.theme-dark .table-responsive, body.admin-body.theme-dark .dataTables_wrapper, body.admin-body.theme-dark .table-card, body.admin-body.theme-dark .geo-table-shell, body.admin-body.theme-dark .geo-import-table, body.admin-body.theme-dark .table-shell, body.admin-body.theme-dark .matrix-shell { background: linear-gradient(180deg, rgba(15,32,41,.98), rgba(10,24,31,.98)) !important; border-color: var(--admin-table-border) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 44px rgba(0,0,0,.28) !important; } /* Bootstrap table variables: reliable across .table, .table-hover, .table-striped, DataTables */ body.admin-body .table, body.admin-body table.dataTable, body.admin-body .table.table-bordered, body.admin-body .table.table-hover, body.admin-body .table.table-striped { --bs-table-color: var(--admin-table-light-ink) !important; --bs-table-bg: var(--admin-table-light-row-bg) !important; --bs-table-border-color: var(--admin-table-light-border) !important; --bs-table-striped-color: var(--admin-table-light-ink) !important; --bs-table-striped-bg: var(--admin-table-light-row-alt) !important; --bs-table-hover-color: #052e16 !important; --bs-table-hover-bg: var(--admin-table-light-hover) !important; color: var(--admin-table-light-ink) !important; background: var(--admin-table-light-row-bg) !important; border-color: var(--admin-table-light-border) !important; } html[data-theme="dark"] body.admin-body .table, html[data-theme="dark"] body.admin-body table.dataTable, html[data-theme="dark"] body.admin-body .table.table-bordered, html[data-theme="dark"] body.admin-body .table.table-hover, html[data-theme="dark"] body.admin-body .table.table-striped, body.admin-body.theme-dark .table, body.admin-body.theme-dark table.dataTable, body.admin-body.theme-dark .table.table-bordered, body.admin-body.theme-dark .table.table-hover, body.admin-body.theme-dark .table.table-striped { --bs-table-color: var(--admin-table-ink) !important; --bs-table-bg: var(--admin-table-row-bg) !important; --bs-table-border-color: var(--admin-table-border) !important; --bs-table-striped-color: var(--admin-table-ink) !important; --bs-table-striped-bg: var(--admin-table-row-alt) !important; --bs-table-hover-color: #ffffff !important; --bs-table-hover-bg: var(--admin-table-hover) !important; color: var(--admin-table-ink) !important; background: var(--admin-table-bg) !important; border-color: var(--admin-table-border) !important; } body.admin-body .table > :not(caption) > * > *, body.admin-body table.dataTable > :not(caption) > * > * { color: var(--admin-table-light-ink) !important; background-color: var(--bs-table-bg) !important; border-color: var(--bs-table-border-color) !important; } html[data-theme="dark"] body.admin-body .table > :not(caption) > * > *, html[data-theme="dark"] body.admin-body table.dataTable > :not(caption) > * > *, body.admin-body.theme-dark .table > :not(caption) > * > *, body.admin-body.theme-dark table.dataTable > :not(caption) > * > * { color: var(--admin-table-ink) !important; background-color: var(--bs-table-bg) !important; border-color: var(--admin-table-border) !important; } body.admin-body .table thead, body.admin-body table.dataTable thead, body.admin-body .table tfoot, body.admin-body table.dataTable tfoot { color: var(--admin-heading) !important; } body.admin-body .table thead th, body.admin-body table.dataTable thead th, body.admin-body .table thead td, body.admin-body table.dataTable thead td, body.admin-body .table tfoot th, body.admin-body table.dataTable tfoot th, body.admin-body .table-light, body.admin-body .table-light > * > * { background: linear-gradient(180deg, #f2f8f4, #e9f3ee) !important; color: #0b1f17 !important; border-color: var(--admin-table-light-border) !important; font-weight: 950 !important; text-shadow: none !important; } html[data-theme="dark"] body.admin-body .table thead th, html[data-theme="dark"] body.admin-body table.dataTable thead th, html[data-theme="dark"] body.admin-body .table thead td, html[data-theme="dark"] body.admin-body table.dataTable thead td, html[data-theme="dark"] body.admin-body .table tfoot th, html[data-theme="dark"] body.admin-body table.dataTable tfoot th, html[data-theme="dark"] body.admin-body .table-light, html[data-theme="dark"] body.admin-body .table-light > * > *, body.admin-body.theme-dark .table thead th, body.admin-body.theme-dark table.dataTable thead th, body.admin-body.theme-dark .table thead td, body.admin-body.theme-dark table.dataTable thead td, body.admin-body.theme-dark .table tfoot th, body.admin-body.theme-dark table.dataTable tfoot th, body.admin-body.theme-dark .table-light, body.admin-body.theme-dark .table-light > * > * { background: linear-gradient(180deg, #1c3b48, #17303c) !important; color: var(--admin-table-heading) !important; border-color: var(--admin-table-border-strong) !important; font-weight: 950 !important; text-shadow: 0 1px 2px rgba(0,0,0,.24) !important; } body.admin-body .table tbody tr, body.admin-body table.dataTable tbody tr { background-color: var(--admin-table-light-row-bg) !important; } body.admin-body .table-striped > tbody > tr:nth-of-type(odd) > *, body.admin-body table.dataTable.stripe > tbody > tr.odd > *, body.admin-body table.dataTable.display > tbody > tr.odd > * { background-color: var(--admin-table-light-row-alt) !important; color: var(--admin-table-light-ink) !important; } html[data-theme="dark"] body.admin-body .table tbody tr, html[data-theme="dark"] body.admin-body table.dataTable tbody tr, body.admin-body.theme-dark .table tbody tr, body.admin-body.theme-dark table.dataTable tbody tr { background-color: var(--admin-table-row-bg) !important; } html[data-theme="dark"] body.admin-body .table-striped > tbody > tr:nth-of-type(odd) > *, html[data-theme="dark"] body.admin-body table.dataTable.stripe > tbody > tr.odd > *, html[data-theme="dark"] body.admin-body table.dataTable.display > tbody > tr.odd > *, body.admin-body.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > *, body.admin-body.theme-dark table.dataTable.stripe > tbody > tr.odd > *, body.admin-body.theme-dark table.dataTable.display > tbody > tr.odd > * { background-color: var(--admin-table-row-alt) !important; color: var(--admin-table-ink) !important; } body.admin-body .table-hover > tbody > tr:hover > *, body.admin-body table.dataTable.hover > tbody > tr:hover > *, body.admin-body table.dataTable.display > tbody > tr:hover > * { background: var(--admin-table-light-hover) !important; color: #052e16 !important; } html[data-theme="dark"] body.admin-body .table-hover > tbody > tr:hover > *, html[data-theme="dark"] body.admin-body table.dataTable.hover > tbody > tr:hover > *, html[data-theme="dark"] body.admin-body table.dataTable.display > tbody > tr:hover > *, body.admin-body.theme-dark .table-hover > tbody > tr:hover > *, body.admin-body.theme-dark table.dataTable.hover > tbody > tr:hover > *, body.admin-body.theme-dark table.dataTable.display > tbody > tr:hover > * { background: linear-gradient(90deg, rgba(34,197,94,.22), rgba(20,184,166,.14)) !important; color: #ffffff !important; } /* Text inside dark tables: no black/low contrast */ html[data-theme="dark"] body.admin-body .table a:not(.btn):not(.badge), html[data-theme="dark"] body.admin-body table.dataTable a:not(.btn):not(.badge), body.admin-body.theme-dark .table a:not(.btn):not(.badge), body.admin-body.theme-dark table.dataTable a:not(.btn):not(.badge) { color: #bbf7d0 !important; font-weight: 850 !important; } html[data-theme="dark"] body.admin-body .table .text-muted, html[data-theme="dark"] body.admin-body table.dataTable .text-muted, html[data-theme="dark"] body.admin-body .table .small, html[data-theme="dark"] body.admin-body table.dataTable .small, html[data-theme="dark"] body.admin-body .table small, html[data-theme="dark"] body.admin-body table.dataTable small, html[data-theme="dark"] body.admin-body .table .sub, html[data-theme="dark"] body.admin-body table.dataTable .sub, body.admin-body.theme-dark .table .text-muted, body.admin-body.theme-dark table.dataTable .text-muted, body.admin-body.theme-dark .table .small, body.admin-body.theme-dark table.dataTable .small, body.admin-body.theme-dark .table small, body.admin-body.theme-dark table.dataTable small, body.admin-body.theme-dark .table .sub, body.admin-body.theme-dark table.dataTable .sub { color: var(--admin-table-muted) !important; opacity: 1 !important; } html[data-theme="dark"] body.admin-body .table .fw-bold, html[data-theme="dark"] body.admin-body .table .fw-semibold, html[data-theme="dark"] body.admin-body table.dataTable .fw-bold, html[data-theme="dark"] body.admin-body table.dataTable .fw-semibold, body.admin-body.theme-dark .table .fw-bold, body.admin-body.theme-dark .table .fw-semibold, body.admin-body.theme-dark table.dataTable .fw-bold, body.admin-body.theme-dark table.dataTable .fw-semibold { color: #ffffff !important; } /* DataTables controls */ html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_length, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_filter, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_info, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_paginate, body.admin-body.theme-dark .dataTables_wrapper .dataTables_length, body.admin-body.theme-dark .dataTables_wrapper .dataTables_filter, body.admin-body.theme-dark .dataTables_wrapper .dataTables_info, body.admin-body.theme-dark .dataTables_wrapper .dataTables_paginate { color: #d9f99d !important; } html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_length label, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_filter label, body.admin-body.theme-dark .dataTables_wrapper .dataTables_length label, body.admin-body.theme-dark .dataTables_wrapper .dataTables_filter label { color: #ecfdf5 !important; font-weight: 850 !important; } html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_length select, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_filter input, html[data-theme="dark"] body.admin-body .dataTables_wrapper .form-control, html[data-theme="dark"] body.admin-body .dataTables_wrapper .form-select, body.admin-body.theme-dark .dataTables_wrapper .dataTables_length select, body.admin-body.theme-dark .dataTables_wrapper .dataTables_filter input, body.admin-body.theme-dark .dataTables_wrapper .form-control, body.admin-body.theme-dark .dataTables_wrapper .form-select { background-color: #0b1c25 !important; color: #f8fff7 !important; border-color: rgba(187,247,208,.38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(134,239,172,.08) !important; } /* Pagination in dark mode */ html[data-theme="dark"] body.admin-body .pagination .page-link, body.admin-body.theme-dark .pagination .page-link { background: #102631 !important; color: #d9f99d !important; border-color: rgba(187,247,208,.24) !important; } html[data-theme="dark"] body.admin-body .pagination .page-link:hover, body.admin-body.theme-dark .pagination .page-link:hover { background: #194338 !important; color: #ffffff !important; border-color: rgba(190,242,100,.42) !important; } html[data-theme="dark"] body.admin-body .pagination .page-item.active .page-link, body.admin-body.theme-dark .pagination .page-item.active .page-link { background: linear-gradient(135deg, #16a34a, #15803d) !important; color: #ffffff !important; border-color: #86efac !important; box-shadow: 0 10px 24px rgba(22,163,74,.30) !important; } html[data-theme="dark"] body.admin-body .pagination .page-item.disabled .page-link, body.admin-body.theme-dark .pagination .page-item.disabled .page-link { background: #0b1c25 !important; color: #8fb5a1 !important; border-color: rgba(148,163,184,.18) !important; } /* Badges/chips inside dark tables */ html[data-theme="dark"] body.admin-body .table .badge.bg-light, html[data-theme="dark"] body.admin-body .table .badge.text-bg-light, html[data-theme="dark"] body.admin-body .table .chip, html[data-theme="dark"] body.admin-body table.dataTable .badge.bg-light, html[data-theme="dark"] body.admin-body table.dataTable .badge.text-bg-light, html[data-theme="dark"] body.admin-body table.dataTable .chip, body.admin-body.theme-dark .table .badge.bg-light, body.admin-body.theme-dark .table .badge.text-bg-light, body.admin-body.theme-dark .table .chip, body.admin-body.theme-dark table.dataTable .badge.bg-light, body.admin-body.theme-dark table.dataTable .badge.text-bg-light, body.admin-body.theme-dark table.dataTable .chip { background: rgba(187,247,208,.12) !important; color: #ecfdf5 !important; border-color: rgba(187,247,208,.26) !important; } /* Sticky columns / permission matrix: override hard-coded white backgrounds */ html[data-theme="dark"] body.admin-body .matrix-table th, html[data-theme="dark"] body.admin-body .matrix-table td, html[data-theme="dark"] body.admin-body .matrix-table th:first-child, html[data-theme="dark"] body.admin-body .matrix-table td:first-child, html[data-theme="dark"] body.admin-body .matrix-table thead th:first-child, html[data-theme="dark"] body.admin-body #roleMatrixTable th, html[data-theme="dark"] body.admin-body #roleMatrixTable td, html[data-theme="dark"] body.admin-body #roleMatrixTable th:first-child, html[data-theme="dark"] body.admin-body #roleMatrixTable td:first-child, body.admin-body.theme-dark .matrix-table th, body.admin-body.theme-dark .matrix-table td, body.admin-body.theme-dark .matrix-table th:first-child, body.admin-body.theme-dark .matrix-table td:first-child, body.admin-body.theme-dark .matrix-table thead th:first-child, body.admin-body.theme-dark #roleMatrixTable th, body.admin-body.theme-dark #roleMatrixTable td, body.admin-body.theme-dark #roleMatrixTable th:first-child, body.admin-body.theme-dark #roleMatrixTable td:first-child { background-color: #102631 !important; color: #f4fff8 !important; border-color: rgba(187,247,208,.18) !important; } html[data-theme="dark"] body.admin-body .matrix-table thead th, html[data-theme="dark"] body.admin-body #roleMatrixTable thead th, body.admin-body.theme-dark .matrix-table thead th, body.admin-body.theme-dark #roleMatrixTable thead th { background: #183341 !important; color: #ffffff !important; border-color: rgba(187,247,208,.30) !important; } html[data-theme="dark"] body.admin-body .matrix-table tbody tr:hover > *, html[data-theme="dark"] body.admin-body #roleMatrixTable tbody tr:hover > *, body.admin-body.theme-dark .matrix-table tbody tr:hover > *, body.admin-body.theme-dark #roleMatrixTable tbody tr:hover > * { background: #194338 !important; color: #ffffff !important; } /* Common table status/action buttons */ html[data-theme="dark"] body.admin-body .table .btn-outline-secondary, html[data-theme="dark"] body.admin-body .table .btn-outline-primary, html[data-theme="dark"] body.admin-body .table .btn-outline-success, html[data-theme="dark"] body.admin-body .table .btn-outline-danger, body.admin-body.theme-dark .table .btn-outline-secondary, body.admin-body.theme-dark .table .btn-outline-primary, body.admin-body.theme-dark .table .btn-outline-success, body.admin-body.theme-dark .table .btn-outline-danger { background: rgba(255,255,255,.055) !important; color: #ecfdf5 !important; border-color: rgba(187,247,208,.24) !important; } html[data-theme="dark"] body.admin-body .table .btn-outline-secondary:hover, html[data-theme="dark"] body.admin-body .table .btn-outline-primary:hover, html[data-theme="dark"] body.admin-body .table .btn-outline-success:hover, html[data-theme="dark"] body.admin-body .table .btn-outline-danger:hover, body.admin-body.theme-dark .table .btn-outline-secondary:hover, body.admin-body.theme-dark .table .btn-outline-primary:hover, body.admin-body.theme-dark .table .btn-outline-success:hover, body.admin-body.theme-dark .table .btn-outline-danger:hover { background: #16a34a !important; color: #ffffff !important; border-color: #86efac !important; } /* Admin projects inline table safety */ html[data-theme="dark"] body.admin-body .admin-projects .table, body.admin-body.theme-dark .admin-projects .table { background: var(--admin-table-bg) !important; color: var(--admin-table-ink) !important; } html[data-theme="dark"] body.admin-body .admin-projects .table thead th, body.admin-body.theme-dark .admin-projects .table thead th { background: linear-gradient(180deg, #1c3b48, #17303c) !important; color: #ffffff !important; } html[data-theme="dark"] body.admin-body .admin-projects .table td, body.admin-body.theme-dark .admin-projects .table td { color: var(--admin-table-ink) !important; background-color: var(--admin-table-row-bg) !important; } /* ========================================================= 2026-04-30 Admin dark table readability v6 Fix from screenshot: dark table still has low-contrast child text/icons. Scope: Admin/DataTables only. Keep light mode clean, force dark text to white/soft-green instead of black/gray-on-dark. ========================================================= */ html[data-theme="dark"] body.admin-body, body.admin-body.theme-dark { --admin-table-card-bg-v6: #102532; --admin-table-card-bg-2-v6: #132d3a; --admin-table-head-bg-v6: #173746; --admin-table-row-bg-v6: #102b2b; --admin-table-row-alt-v6: #0e2528; --admin-table-row-hover-v6: #18443a; --admin-table-border-v6: rgba(187, 247, 208, .20); --admin-table-border-strong-v6: rgba(187, 247, 208, .34); --admin-table-text-v6: #f8fff7; --admin-table-text-soft-v6: #d9f99d; --admin-table-muted-v6: #b8dec9; --admin-table-icon-v6: #bbf7d0; } /* table panel/card must separate from page background */ html[data-theme="dark"] body.admin-body .card:has(table), html[data-theme="dark"] body.admin-body .panel-card:has(table), html[data-theme="dark"] body.admin-body .table-card, html[data-theme="dark"] body.admin-body .table-responsive, html[data-theme="dark"] body.admin-body .dataTables_wrapper, body.admin-body.theme-dark .card:has(table), body.admin-body.theme-dark .panel-card:has(table), body.admin-body.theme-dark .table-card, body.admin-body.theme-dark .table-responsive, body.admin-body.theme-dark .dataTables_wrapper { color: var(--admin-table-text-v6) !important; } html[data-theme="dark"] body.admin-body .panel-card:has(table), html[data-theme="dark"] body.admin-body .card:has(table), body.admin-body.theme-dark .panel-card:has(table), body.admin-body.theme-dark .card:has(table) { background: linear-gradient(180deg, var(--admin-table-card-bg-2-v6), var(--admin-table-card-bg-v6)) !important; border-color: var(--admin-table-border-strong-v6) !important; } html[data-theme="dark"] body.admin-body .card:has(table) .card-header, html[data-theme="dark"] body.admin-body .panel-card:has(table) .card-header, body.admin-body.theme-dark .card:has(table) .card-header, body.admin-body.theme-dark .panel-card:has(table) .card-header { background: linear-gradient(180deg, #183a49, #14303d) !important; color: var(--admin-table-text-v6) !important; border-color: var(--admin-table-border-v6) !important; } /* base table surfaces */ html[data-theme="dark"] body.admin-body table, html[data-theme="dark"] body.admin-body .table, html[data-theme="dark"] body.admin-body table.dataTable, body.admin-body.theme-dark table, body.admin-body.theme-dark .table, body.admin-body.theme-dark table.dataTable { --bs-table-color: var(--admin-table-text-v6) !important; --bs-table-bg: transparent !important; --bs-table-border-color: var(--admin-table-border-v6) !important; --bs-table-striped-color: var(--admin-table-text-v6) !important; --bs-table-striped-bg: var(--admin-table-row-alt-v6) !important; --bs-table-hover-color: #ffffff !important; --bs-table-hover-bg: var(--admin-table-row-hover-v6) !important; color: var(--admin-table-text-v6) !important; background: transparent !important; border-color: var(--admin-table-border-v6) !important; } html[data-theme="dark"] body.admin-body .table > :not(caption) > * > *, html[data-theme="dark"] body.admin-body table.dataTable > :not(caption) > * > *, body.admin-body.theme-dark .table > :not(caption) > * > *, body.admin-body.theme-dark table.dataTable > :not(caption) > * > * { color: var(--admin-table-text-v6) !important; border-color: var(--admin-table-border-v6) !important; box-shadow: inset 0 0 0 9999px transparent !important; } html[data-theme="dark"] body.admin-body .table thead th, html[data-theme="dark"] body.admin-body table.dataTable thead th, html[data-theme="dark"] body.admin-body .table thead td, html[data-theme="dark"] body.admin-body table.dataTable thead td, body.admin-body.theme-dark .table thead th, body.admin-body.theme-dark table.dataTable thead th, body.admin-body.theme-dark .table thead td, body.admin-body.theme-dark table.dataTable thead td { background: linear-gradient(180deg, #1a3d4d, var(--admin-table-head-bg-v6)) !important; color: #ffffff !important; border-color: var(--admin-table-border-strong-v6) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .22) !important; } html[data-theme="dark"] body.admin-body .table tbody tr, html[data-theme="dark"] body.admin-body table.dataTable tbody tr, body.admin-body.theme-dark .table tbody tr, body.admin-body.theme-dark table.dataTable tbody tr { background: var(--admin-table-row-bg-v6) !important; color: var(--admin-table-text-v6) !important; } html[data-theme="dark"] body.admin-body .table tbody tr:nth-child(even), html[data-theme="dark"] body.admin-body table.dataTable tbody tr:nth-child(even), body.admin-body.theme-dark .table tbody tr:nth-child(even), body.admin-body.theme-dark table.dataTable tbody tr:nth-child(even) { background: var(--admin-table-row-alt-v6) !important; } html[data-theme="dark"] body.admin-body .table tbody td, html[data-theme="dark"] body.admin-body .table tbody th, html[data-theme="dark"] body.admin-body table.dataTable tbody td, html[data-theme="dark"] body.admin-body table.dataTable tbody th, body.admin-body.theme-dark .table tbody td, body.admin-body.theme-dark .table tbody th, body.admin-body.theme-dark table.dataTable tbody td, body.admin-body.theme-dark table.dataTable tbody th { background-color: transparent !important; color: var(--admin-table-text-v6) !important; border-color: var(--admin-table-border-v6) !important; } html[data-theme="dark"] body.admin-body .table-hover > tbody > tr:hover, html[data-theme="dark"] body.admin-body table.dataTable.hover > tbody > tr:hover, html[data-theme="dark"] body.admin-body table.dataTable.display > tbody > tr:hover, body.admin-body.theme-dark .table-hover > tbody > tr:hover, body.admin-body.theme-dark table.dataTable.hover > tbody > tr:hover, body.admin-body.theme-dark table.dataTable.display > tbody > tr:hover { background: var(--admin-table-row-hover-v6) !important; } html[data-theme="dark"] body.admin-body .table-hover > tbody > tr:hover > *, html[data-theme="dark"] body.admin-body table.dataTable.hover > tbody > tr:hover > *, html[data-theme="dark"] body.admin-body table.dataTable.display > tbody > tr:hover > *, body.admin-body.theme-dark .table-hover > tbody > tr:hover > *, body.admin-body.theme-dark table.dataTable.hover > tbody > tr:hover > *, body.admin-body.theme-dark table.dataTable.display > tbody > tr:hover > * { background: var(--admin-table-row-hover-v6) !important; color: #ffffff !important; } /* Most important: override black/gray child text inside dark tables */ html[data-theme="dark"] body.admin-body .table td :not(.btn):not(.badge):not(.dropdown-menu):not(.dropdown-item), html[data-theme="dark"] body.admin-body .table th :not(.btn):not(.badge):not(.dropdown-menu):not(.dropdown-item), html[data-theme="dark"] body.admin-body table.dataTable td :not(.btn):not(.badge):not(.dropdown-menu):not(.dropdown-item), html[data-theme="dark"] body.admin-body table.dataTable th :not(.btn):not(.badge):not(.dropdown-menu):not(.dropdown-item), body.admin-body.theme-dark .table td :not(.btn):not(.badge):not(.dropdown-menu):not(.dropdown-item), body.admin-body.theme-dark .table th :not(.btn):not(.badge):not(.dropdown-menu):not(.dropdown-item), body.admin-body.theme-dark table.dataTable td :not(.btn):not(.badge):not(.dropdown-menu):not(.dropdown-item), body.admin-body.theme-dark table.dataTable th :not(.btn):not(.badge):not(.dropdown-menu):not(.dropdown-item) { color: inherit !important; } html[data-theme="dark"] body.admin-body .table .text-secondary, html[data-theme="dark"] body.admin-body .table .text-muted, html[data-theme="dark"] body.admin-body .table .small, html[data-theme="dark"] body.admin-body .table small, html[data-theme="dark"] body.admin-body .table .sub, html[data-theme="dark"] body.admin-body .table .project-sub, html[data-theme="dark"] body.admin-body .table .herb-sub, html[data-theme="dark"] body.admin-body .table .audit-cell-sub, html[data-theme="dark"] body.admin-body .table .text-slate-500, html[data-theme="dark"] body.admin-body .table .text-slate-600, html[data-theme="dark"] body.admin-body table.dataTable .text-secondary, html[data-theme="dark"] body.admin-body table.dataTable .text-muted, html[data-theme="dark"] body.admin-body table.dataTable .small, html[data-theme="dark"] body.admin-body table.dataTable small, html[data-theme="dark"] body.admin-body table.dataTable .sub, html[data-theme="dark"] body.admin-body table.dataTable .project-sub, html[data-theme="dark"] body.admin-body table.dataTable .herb-sub, html[data-theme="dark"] body.admin-body table.dataTable .audit-cell-sub, html[data-theme="dark"] body.admin-body table.dataTable .text-slate-500, html[data-theme="dark"] body.admin-body table.dataTable .text-slate-600, body.admin-body.theme-dark .table .text-secondary, body.admin-body.theme-dark .table .text-muted, body.admin-body.theme-dark .table .small, body.admin-body.theme-dark .table small, body.admin-body.theme-dark .table .sub, body.admin-body.theme-dark .table .project-sub, body.admin-body.theme-dark .table .herb-sub, body.admin-body.theme-dark .table .audit-cell-sub, body.admin-body.theme-dark .table .text-slate-500, body.admin-body.theme-dark .table .text-slate-600, body.admin-body.theme-dark table.dataTable .text-secondary, body.admin-body.theme-dark table.dataTable .text-muted, body.admin-body.theme-dark table.dataTable .small, body.admin-body.theme-dark table.dataTable small, body.admin-body.theme-dark table.dataTable .sub, body.admin-body.theme-dark table.dataTable .project-sub, body.admin-body.theme-dark table.dataTable .herb-sub, body.admin-body.theme-dark table.dataTable .audit-cell-sub, body.admin-body.theme-dark table.dataTable .text-slate-500, body.admin-body.theme-dark table.dataTable .text-slate-600 { color: var(--admin-table-muted-v6) !important; opacity: 1 !important; text-shadow: none !important; } html[data-theme="dark"] body.admin-body .table .fw-bold, html[data-theme="dark"] body.admin-body .table .fw-semibold, html[data-theme="dark"] body.admin-body .table strong, html[data-theme="dark"] body.admin-body .table b, html[data-theme="dark"] body.admin-body .table .project-title, html[data-theme="dark"] body.admin-body .table .herb-name, html[data-theme="dark"] body.admin-body table.dataTable .fw-bold, html[data-theme="dark"] body.admin-body table.dataTable .fw-semibold, html[data-theme="dark"] body.admin-body table.dataTable strong, html[data-theme="dark"] body.admin-body table.dataTable b, html[data-theme="dark"] body.admin-body table.dataTable .project-title, html[data-theme="dark"] body.admin-body table.dataTable .herb-name, body.admin-body.theme-dark .table .fw-bold, body.admin-body.theme-dark .table .fw-semibold, body.admin-body.theme-dark .table strong, body.admin-body.theme-dark .table b, body.admin-body.theme-dark .table .project-title, body.admin-body.theme-dark .table .herb-name, body.admin-body.theme-dark table.dataTable .fw-bold, body.admin-body.theme-dark table.dataTable .fw-semibold, body.admin-body.theme-dark table.dataTable strong, body.admin-body.theme-dark table.dataTable b, body.admin-body.theme-dark table.dataTable .project-title, body.admin-body.theme-dark table.dataTable .herb-name { color: #ffffff !important; font-weight: 950 !important; } html[data-theme="dark"] body.admin-body .table i, html[data-theme="dark"] body.admin-body table.dataTable i, body.admin-body.theme-dark .table i, body.admin-body.theme-dark table.dataTable i { color: var(--admin-table-icon-v6) !important; opacity: .98 !important; } html[data-theme="dark"] body.admin-body .table a:not(.btn), html[data-theme="dark"] body.admin-body table.dataTable a:not(.btn), body.admin-body.theme-dark .table a:not(.btn), body.admin-body.theme-dark table.dataTable a:not(.btn) { color: #d9f99d !important; text-decoration-color: rgba(217,249,157,.45) !important; } /* relation chips/soft metrics inside tables */ html[data-theme="dark"] body.admin-body .table .relation-chip, html[data-theme="dark"] body.admin-body .table .chip, html[data-theme="dark"] body.admin-body .table .stat-chip, html[data-theme="dark"] body.admin-body .table .metric-badge, html[data-theme="dark"] body.admin-body .table .badge.bg-light, html[data-theme="dark"] body.admin-body .table .badge.text-bg-light, html[data-theme="dark"] body.admin-body table.dataTable .relation-chip, html[data-theme="dark"] body.admin-body table.dataTable .chip, html[data-theme="dark"] body.admin-body table.dataTable .stat-chip, html[data-theme="dark"] body.admin-body table.dataTable .metric-badge, html[data-theme="dark"] body.admin-body table.dataTable .badge.bg-light, html[data-theme="dark"] body.admin-body table.dataTable .badge.text-bg-light, body.admin-body.theme-dark .table .relation-chip, body.admin-body.theme-dark .table .chip, body.admin-body.theme-dark .table .stat-chip, body.admin-body.theme-dark .table .metric-badge, body.admin-body.theme-dark .table .badge.bg-light, body.admin-body.theme-dark .table .badge.text-bg-light, body.admin-body.theme-dark table.dataTable .relation-chip, body.admin-body.theme-dark table.dataTable .chip, body.admin-body.theme-dark table.dataTable .stat-chip, body.admin-body.theme-dark table.dataTable .metric-badge, body.admin-body.theme-dark table.dataTable .badge.bg-light, body.admin-body.theme-dark table.dataTable .badge.text-bg-light { background: #e8fff2 !important; color: #064e3b !important; border-color: rgba(187,247,208,.78) !important; box-shadow: 0 8px 18px rgba(0,0,0,.18) !important; } html[data-theme="dark"] body.admin-body .table .badge-status, html[data-theme="dark"] body.admin-body table.dataTable .badge-status, body.admin-body.theme-dark .table .badge-status, body.admin-body.theme-dark table.dataTable .badge-status { color: #ffffff !important; box-shadow: 0 8px 18px rgba(0,0,0,.22) !important; } /* DataTables length/search controls and top text */ html[data-theme="dark"] body.admin-body .dataTables_wrapper .row, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_length, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_filter, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_info, html[data-theme="dark"] body.admin-body .dataTables_wrapper label, body.admin-body.theme-dark .dataTables_wrapper .row, body.admin-body.theme-dark .dataTables_wrapper .dataTables_length, body.admin-body.theme-dark .dataTables_wrapper .dataTables_filter, body.admin-body.theme-dark .dataTables_wrapper .dataTables_info, body.admin-body.theme-dark .dataTables_wrapper label { color: #f8fff7 !important; } html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_length select, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_filter input, html[data-theme="dark"] body.admin-body .dataTables_wrapper .form-select, html[data-theme="dark"] body.admin-body .dataTables_wrapper .form-control, body.admin-body.theme-dark .dataTables_wrapper .dataTables_length select, body.admin-body.theme-dark .dataTables_wrapper .dataTables_filter input, body.admin-body.theme-dark .dataTables_wrapper .form-select, body.admin-body.theme-dark .dataTables_wrapper .form-control { background: #071922 !important; color: #ffffff !important; border: 1.5px solid rgba(187,247,208,.46) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(134,239,172,.08) !important; } html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_filter input::placeholder, body.admin-body.theme-dark .dataTables_wrapper .dataTables_filter input::placeholder { color: #b8dec9 !important; opacity: 1 !important; } /* DataTables sort triangles/icons */ html[data-theme="dark"] body.admin-body table.dataTable thead > tr > th.sorting:before, html[data-theme="dark"] body.admin-body table.dataTable thead > tr > th.sorting:after, html[data-theme="dark"] body.admin-body table.dataTable thead > tr > th.sorting_asc:before, html[data-theme="dark"] body.admin-body table.dataTable thead > tr > th.sorting_asc:after, html[data-theme="dark"] body.admin-body table.dataTable thead > tr > th.sorting_desc:before, html[data-theme="dark"] body.admin-body table.dataTable thead > tr > th.sorting_desc:after, body.admin-body.theme-dark table.dataTable thead > tr > th.sorting:before, body.admin-body.theme-dark table.dataTable thead > tr > th.sorting:after, body.admin-body.theme-dark table.dataTable thead > tr > th.sorting_asc:before, body.admin-body.theme-dark table.dataTable thead > tr > th.sorting_asc:after, body.admin-body.theme-dark table.dataTable thead > tr > th.sorting_desc:before, body.admin-body.theme-dark table.dataTable thead > tr > th.sorting_desc:after { color: #bbf7d0 !important; opacity: .82 !important; text-shadow: none !important; } /* Pagination should not look disabled except disabled state */ html[data-theme="dark"] body.admin-body .pagination .page-link, body.admin-body.theme-dark .pagination .page-link { background: #0b2230 !important; color: #ecfdf5 !important; border-color: rgba(187,247,208,.28) !important; } html[data-theme="dark"] body.admin-body .pagination .page-link:hover, body.admin-body.theme-dark .pagination .page-link:hover { background: #1f5b45 !important; color: #ffffff !important; border-color: rgba(217,249,157,.58) !important; } html[data-theme="dark"] body.admin-body .pagination .page-item.active .page-link, body.admin-body.theme-dark .pagination .page-item.active .page-link { background: linear-gradient(135deg, #86efac, #34d399) !important; color: #052e16 !important; border-color: #bbf7d0 !important; font-weight: 950 !important; } html[data-theme="dark"] body.admin-body .pagination .page-item.disabled .page-link, body.admin-body.theme-dark .pagination .page-item.disabled .page-link { background: #0a1a22 !important; color: #b8dec9 !important; border-color: rgba(148,163,184,.24) !important; } /* Admin projects exact screenshot fix */ html[data-theme="dark"] body.admin-body .admin-projects .project-sub, html[data-theme="dark"] body.admin-body .admin-projects .project-sub *, html[data-theme="dark"] body.admin-body .admin-projects .project-title, html[data-theme="dark"] body.admin-body .admin-projects .project-title *, body.admin-body.theme-dark .admin-projects .project-sub, body.admin-body.theme-dark .admin-projects .project-sub *, body.admin-body.theme-dark .admin-projects .project-title, body.admin-body.theme-dark .admin-projects .project-title * { color: #ffffff !important; } html[data-theme="dark"] body.admin-body .admin-projects .project-sub, html[data-theme="dark"] body.admin-body .admin-projects .project-sub i, body.admin-body.theme-dark .admin-projects .project-sub, body.admin-body.theme-dark .admin-projects .project-sub i { color: #b8dec9 !important; } html[data-theme="dark"] body.admin-body .admin-projects .relation-chip, body.admin-body.theme-dark .admin-projects .relation-chip { background: #e8fff2 !important; color: #064e3b !important; border: 1px solid rgba(187,247,208,.85) !important; } html[data-theme="dark"] body.admin-body .admin-projects .relation-chip i, body.admin-body.theme-dark .admin-projects .relation-chip i { color: #047857 !important; } /* ========================================================= 2026-04-30 Admin Dark Polish v7 Stronger dark table contrast for Bootstrap/DataTables screens ========================================================= */ html[data-theme="dark"] body.admin-body, body.admin-body.theme-dark { --admin-table-panel-v7: #10242c; --admin-table-head-v7: #163442; --admin-table-row-v7: #12302b; --admin-table-row-alt-v7: #163832; --admin-table-row-hover-v7: #205642; --admin-table-border-v7: rgba(187,247,208,.24); --admin-table-border-strong-v7: rgba(187,247,208,.42); --admin-table-text-v7: #f8fff7; --admin-table-muted-v7: #b9e4cf; --admin-table-icon-v7: #86efac; } html[data-theme="dark"] body.admin-body .table-responsive, body.admin-body.theme-dark .table-responsive { background: rgba(12,29,36,.92) !important; border-color: var(--admin-table-border-v7) !important; } html[data-theme="dark"] body.admin-body .table, html[data-theme="dark"] body.admin-body table.dataTable, body.admin-body.theme-dark .table, body.admin-body.theme-dark table.dataTable { --bs-table-color: var(--admin-table-text-v7) !important; --bs-table-bg: transparent !important; --bs-table-striped-color: var(--admin-table-text-v7) !important; --bs-table-striped-bg: var(--admin-table-row-alt-v7) !important; --bs-table-hover-color: #ffffff !important; --bs-table-hover-bg: var(--admin-table-row-hover-v7) !important; --bs-table-border-color: var(--admin-table-border-v7) !important; color: var(--admin-table-text-v7) !important; border-color: var(--admin-table-border-v7) !important; } html[data-theme="dark"] body.admin-body .table thead th, html[data-theme="dark"] body.admin-body table.dataTable thead th, body.admin-body.theme-dark .table thead th, body.admin-body.theme-dark table.dataTable thead th { background: var(--admin-table-head-v7) !important; color: var(--admin-table-text-v7) !important; border-color: var(--admin-table-border-v7) !important; opacity: 1 !important; font-weight: 950 !important; } html[data-theme="dark"] body.admin-body .table tbody tr > *, html[data-theme="dark"] body.admin-body table.dataTable tbody tr > *, body.admin-body.theme-dark .table tbody tr > *, body.admin-body.theme-dark table.dataTable tbody tr > * { background-color: var(--admin-table-row-v7) !important; color: var(--admin-table-text-v7) !important; border-color: var(--admin-table-border-v7) !important; } html[data-theme="dark"] body.admin-body .table-striped > tbody > tr:nth-of-type(odd) > *, html[data-theme="dark"] body.admin-body table.dataTable.stripe > tbody > tr:nth-of-type(odd) > *, html[data-theme="dark"] body.admin-body table.dataTable.display > tbody > tr:nth-of-type(odd) > *, body.admin-body.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > *, body.admin-body.theme-dark table.dataTable.stripe > tbody > tr:nth-of-type(odd) > *, body.admin-body.theme-dark table.dataTable.display > tbody > tr:nth-of-type(odd) > * { background-color: var(--admin-table-row-alt-v7) !important; } html[data-theme="dark"] body.admin-body .table-hover tbody tr:hover > *, html[data-theme="dark"] body.admin-body table.dataTable.hover tbody tr:hover > *, html[data-theme="dark"] body.admin-body table.dataTable.display tbody tr:hover > *, body.admin-body.theme-dark .table-hover tbody tr:hover > *, body.admin-body.theme-dark table.dataTable.hover tbody tr:hover > *, body.admin-body.theme-dark table.dataTable.display tbody tr:hover > * { background: var(--admin-table-row-hover-v7) !important; color: #ffffff !important; } html[data-theme="dark"] body.admin-body .table .text-muted, html[data-theme="dark"] body.admin-body .table .text-secondary, html[data-theme="dark"] body.admin-body .table .small, html[data-theme="dark"] body.admin-body .table small, html[data-theme="dark"] body.admin-body .table .sub, html[data-theme="dark"] body.admin-body table.dataTable .text-muted, html[data-theme="dark"] body.admin-body table.dataTable .text-secondary, html[data-theme="dark"] body.admin-body table.dataTable .small, html[data-theme="dark"] body.admin-body table.dataTable small, html[data-theme="dark"] body.admin-body table.dataTable .sub, body.admin-body.theme-dark .table .text-muted, body.admin-body.theme-dark .table .text-secondary, body.admin-body.theme-dark .table .small, body.admin-body.theme-dark .table small, body.admin-body.theme-dark .table .sub, body.admin-body.theme-dark table.dataTable .text-muted, body.admin-body.theme-dark table.dataTable .text-secondary, body.admin-body.theme-dark table.dataTable .small, body.admin-body.theme-dark table.dataTable small, body.admin-body.theme-dark table.dataTable .sub { color: var(--admin-table-muted-v7) !important; opacity: 1 !important; } html[data-theme="dark"] body.admin-body .table i, html[data-theme="dark"] body.admin-body table.dataTable i, body.admin-body.theme-dark .table i, body.admin-body.theme-dark table.dataTable i { color: var(--admin-table-icon-v7) !important; opacity: .98 !important; } html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_length, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_filter, html[data-theme="dark"] body.admin-body .dataTables_wrapper .dataTables_info, html[data-theme="dark"] body.admin-body .dataTables_wrapper label, body.admin-body.theme-dark .dataTables_wrapper .dataTables_length, body.admin-body.theme-dark .dataTables_wrapper .dataTables_filter, body.admin-body.theme-dark .dataTables_wrapper .dataTables_info, body.admin-body.theme-dark .dataTables_wrapper label { color: var(--admin-table-text-v7) !important; font-weight: 780 !important; } html[data-theme="dark"] body.admin-body .dataTables_wrapper .form-select, html[data-theme="dark"] body.admin-body .dataTables_wrapper .form-control, html[data-theme="dark"] body.admin-body .dataTables_wrapper input[type="search"], body.admin-body.theme-dark .dataTables_wrapper .form-select, body.admin-body.theme-dark .dataTables_wrapper .form-control, body.admin-body.theme-dark .dataTables_wrapper input[type="search"] { background: #071922 !important; color: #ffffff !important; border: 1.5px solid var(--admin-table-border-strong-v7) !important; } /* ========================================================= 2026-04-30 Admin Herb Edit Dark Mode Safety v9 Global fallback เผื่อ inline/global selector บางหน้า override สี ========================================================= */ html[data-theme="dark"] body.admin-body .admin-page--herb-edit .text-dark, html[data-theme="dark"] body.admin-body .admin-page--herb-edit .text-slate-900, html[data-theme="dark"] body.admin-body .admin-page--herb-edit .text-slate-800, html[data-theme="dark"] body.admin-body .admin-page--herb-edit .text-slate-700, body.admin-body.theme-dark .admin-page--herb-edit .text-dark, body.admin-body.theme-dark .admin-page--herb-edit .text-slate-900, body.admin-body.theme-dark .admin-page--herb-edit .text-slate-800, body.admin-body.theme-dark .admin-page--herb-edit .text-slate-700 { color: #f8fafc !important; } html[data-theme="dark"] body.admin-body .admin-page--herb-edit .bg-white, html[data-theme="dark"] body.admin-body .admin-page--herb-edit .bg-light, html[data-theme="dark"] body.admin-body .admin-page--herb-edit .table-light, body.admin-body.theme-dark .admin-page--herb-edit .bg-white, body.admin-body.theme-dark .admin-page--herb-edit .bg-light, body.admin-body.theme-dark .admin-page--herb-edit .table-light { background-color: #142b36 !important; color: #f8fafc !important; border-color: rgba(187,247,208,.22) !important; } html[data-theme="dark"] body.admin-body .admin-page--herb-edit .border, body.admin-body.theme-dark .admin-page--herb-edit .border { border-color: rgba(187,247,208,.22) !important; } /* ========================================================= 2026-04-30 hpv-pro dark mode readability fallback v10 Fallback สำหรับ visual ส่วนที่ใช้เมื่ออยู่ใน Admin dark mode ========================================================= */ html[data-theme="dark"] body.admin-body .hpv-pro__card, body.admin-body.theme-dark .hpv-pro__card { background: linear-gradient(135deg, rgba(22,55,65,.98), rgba(9,32,38,.98)) !important; color: #f8fafc !important; border-color: rgba(187,247,208,.42) !important; } html[data-theme="dark"] body.admin-body .hpv-pro__name, body.admin-body.theme-dark .hpv-pro__name { color: #ffffff !important; } html[data-theme="dark"] body.admin-body .hpv-pro__desc, body.admin-body.theme-dark .hpv-pro__desc { color: #d6f5e4 !important; } html[data-theme="dark"] body.admin-body .hpv-pro__line, body.admin-body.theme-dark .hpv-pro__line { stroke: rgba(134,239,172,.76) !important; opacity: .94 !important; } html[data-theme="dark"] body.admin-body .hpv-pro__point, body.admin-body.theme-dark .hpv-pro__point { background: #bbf7d0 !important; border-color: #052e16 !important; box-shadow: 0 0 0 5px rgba(134,239,172,.20), 0 0 18px rgba(134,239,172,.38), 0 8px 18px rgba(0,0,0,.34) !important; } /* ========================================================= 2026-04-30 hpv-hover dark mode readability v11 fallback สำหรับ hover preview panel ที่ append เข้า body โดยตรง ========================================================= */ html[data-theme="dark"] body.admin-body .hpv-hover-preview, body.admin-body.theme-dark .hpv-hover-preview { color: #f8fafc !important; background: radial-gradient(circle at 12% 0%, rgba(134,239,172,.18), transparent 32%), radial-gradient(circle at 100% 18%, rgba(45,212,191,.14), transparent 36%), linear-gradient(180deg, rgba(17, 45, 55, .985), rgba(7, 24, 30, .985)) !important; border-color: rgba(187,247,208,.34) !important; box-shadow: 0 34px 90px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.07) !important; } html[data-theme="dark"] body.admin-body .hpv-hover-preview__title, body.admin-body.theme-dark .hpv-hover-preview__title { color: #fff !important; } html[data-theme="dark"] body.admin-body .hpv-hover-preview__detail, body.admin-body.theme-dark .hpv-hover-preview__detail, html[data-theme="dark"] body.admin-body .hpv-hover-preview__empty, body.admin-body.theme-dark .hpv-hover-preview__empty, html[data-theme="dark"] body.admin-body .hpv-hover-preview__noimage, body.admin-body.theme-dark .hpv-hover-preview__noimage { color: #d9f5ea !important; } html[data-theme="dark"] body.admin-body .hpv-hover-preview__count, body.admin-body.theme-dark .hpv-hover-preview__count { color: #ecfdf5 !important; background: linear-gradient(135deg, rgba(22,163,74,.36), rgba(20,184,166,.24)) !important; border-color: rgba(187,247,208,.34) !important; } html[data-theme="dark"] body.admin-body .hpv-hover-preview__frame, body.admin-body.theme-dark .hpv-hover-preview__frame, html[data-theme="dark"] body.admin-body .hpv-hover-preview__thumb, body.admin-body.theme-dark .hpv-hover-preview__thumb { background: #0b1921 !important; border-color: rgba(187,247,208,.28) !important; } html[data-theme="dark"] body.admin-body .hpv-hover-preview__thumb.is-active, body.admin-body.theme-dark .hpv-hover-preview__thumb.is-active { border-color: #bef264 !important; box-shadow: 0 0 0 4px rgba(190,242,100,.20), 0 14px 28px rgba(0,0,0,.38) !important; } html[data-theme="dark"] body.admin-body .hpv-hover-preview__btn, body.admin-body.theme-dark .hpv-hover-preview__btn { color: #ecfdf5 !important; background: linear-gradient(180deg, rgba(24,55,66,.96), rgba(9,29,38,.96)) !important; border-color: rgba(187,247,208,.30) !important; } html[data-theme="dark"] body.admin-body .hpv-hover-preview__btn:hover, body.admin-body.theme-dark .hpv-hover-preview__btn:hover { color: #052e16 !important; background: linear-gradient(135deg, #bbf7d0, #bef264) !important; } /* ========================================================= 2026-04-30 Admin geo editor map tools dark readability v12 Fallback override for Leaflet / Leaflet Draw controls ========================================================= */ body.admin-body .admin-page--geo-editor .toolbar{ padding:.35rem!important; border-radius:1rem!important; background:rgba(248,250,252,.72)!important; border:1px solid rgba(148,163,184,.18)!important; } body.admin-body .admin-page--geo-editor .toolbtn{ min-height:42px!important; padding:.62rem .92rem!important; border-radius:.95rem!important; border-color:rgba(15,118,110,.22)!important; background:linear-gradient(180deg,#ffffff,#f1f5f9)!important; color:#123226!important; font-size:.86rem!important; font-weight:900!important; } body.admin-body .admin-page--geo-editor .toolbtn span{color:inherit!important;} body.admin-body .admin-page--geo-editor .leaflet-bar, body.admin-body .admin-page--geo-editor .leaflet-draw-section{ border:0!important; border-radius:14px!important; overflow:hidden!important; box-shadow:0 14px 32px rgba(15,23,42,.18)!important; } body.admin-body .admin-page--geo-editor .leaflet-bar a, body.admin-body .admin-page--geo-editor .leaflet-draw-toolbar a{ width:36px!important; height:36px!important; line-height:36px!important; background-color:#ffffff!important; color:#0f172a!important; border-bottom:1px solid rgba(148,163,184,.26)!important; } body.admin-body .admin-page--geo-editor .leaflet-bar a:hover, body.admin-body .admin-page--geo-editor .leaflet-draw-toolbar a:hover{ background-color:#ecfdf5!important; color:#065f46!important; } body.admin-body .admin-page--geo-editor .leaflet-draw-actions a{ min-height:34px!important; height:auto!important; line-height:1.25!important; padding:.52rem .72rem!important; border-radius:.75rem!important; background:#ffffff!important; color:#0f172a!important; border:1px solid rgba(148,163,184,.28)!important; box-shadow:0 10px 24px rgba(15,23,42,.16)!important; font-weight:800!important; } body.admin-body .admin-page--geo-editor .leaflet-draw-tooltip{ border-radius:.9rem!important; background:rgba(15,23,42,.94)!important; color:#f8fafc!important; border:1px solid rgba(255,255,255,.16)!important; box-shadow:0 16px 38px rgba(0,0,0,.28)!important; font-weight:750!important; } body.admin-body .admin-page--geo-editor .leaflet-draw-tooltip:before{border-right-color:rgba(15,23,42,.94)!important;} body.admin-body .admin-page--geo-editor .leaflet-draw-tooltip-subtext{color:#bbf7d0!important;} html[data-theme="dark"] body.admin-body .admin-page--geo-editor .toolbar, body.admin-body.theme-dark .admin-page--geo-editor .toolbar{ background:rgba(8,28,24,.88)!important; border-color:rgba(187,247,208,.20)!important; } html[data-theme="dark"] body.admin-body .admin-page--geo-editor .toolbtn, body.admin-body.theme-dark .admin-page--geo-editor .toolbtn{ background:linear-gradient(180deg,rgba(21,64,52,.98),rgba(12,43,36,.98))!important; color:#ecfdf5!important; border-color:rgba(187,247,208,.24)!important; } html[data-theme="dark"] body.admin-body .admin-page--geo-editor .toolbtn:hover, body.admin-body.theme-dark .admin-page--geo-editor .toolbtn:hover{ background:linear-gradient(135deg,rgba(16,185,129,.34),rgba(132,204,22,.24))!important; color:#ffffff!important; border-color:rgba(217,249,157,.46)!important; } html[data-theme="dark"] body.admin-body .admin-page--geo-editor .leaflet-bar, html[data-theme="dark"] body.admin-body .admin-page--geo-editor .leaflet-draw-section, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-bar, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-draw-section{ background:rgba(15,23,42,.92)!important; border:1px solid rgba(187,247,208,.18)!important; box-shadow:0 16px 38px rgba(0,0,0,.42)!important; } html[data-theme="dark"] body.admin-body .admin-page--geo-editor .leaflet-bar a, html[data-theme="dark"] body.admin-body .admin-page--geo-editor .leaflet-draw-toolbar a, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-bar a, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-draw-toolbar a{ background:#f8fafc!important; color:#0f172a!important; border-color:rgba(15,23,42,.18)!important; } html[data-theme="dark"] body.admin-body .admin-page--geo-editor .leaflet-draw-actions a, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-draw-actions a{ background:#0f2530!important; color:#ecfdf5!important; border-color:rgba(187,247,208,.24)!important; } html[data-theme="dark"] body.admin-body .admin-page--geo-editor .leaflet-control-attribution, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-attribution{ background:rgba(15,37,48,.92)!important; color:#d1fae5!important; border-color:rgba(187,247,208,.20)!important; } html[data-theme="dark"] body.admin-body .admin-page--geo-editor .leaflet-popup-content-wrapper, html[data-theme="dark"] body.admin-body .admin-page--geo-editor .leaflet-popup-tip, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-popup-content-wrapper, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-popup-tip{ background:#0f2530!important; color:#ecfdf5!important; border-color:rgba(187,247,208,.20)!important; } /* ========================================================= 2026-04-30 Admin Geo Editor map left controls readability v13 Fix Leaflet zoom/draw vertical controls blending into map tiles ========================================================= */ .admin-page--geo-editor .leaflet-control-container .leaflet-left { left: 12px !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-top { top: 12px !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-control { margin-left: 0 !important; margin-top: 10px !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-section { display: flex !important; flex-direction: column !important; gap: 5px !important; padding: 6px !important; border-radius: 18px !important; background: rgba(15, 23, 42, .88) !important; border: 1px solid rgba(255, 255, 255, .42) !important; box-shadow: 0 16px 38px rgba(2, 6, 23, .34), 0 0 0 1px rgba(15, 23, 42, .20) !important; backdrop-filter: blur(10px) saturate(1.2) !important; overflow: visible !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a { position: relative !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; line-height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border-radius: 13px !important; background: linear-gradient(180deg, #ffffff, #eaf2ef) !important; color: #071812 !important; border: 1px solid rgba(6, 78, 59, .30) !important; box-shadow: 0 7px 16px rgba(2, 6, 23, .20), inset 0 1px 0 rgba(255, 255, 255, .86) !important; text-decoration: none !important; text-indent: 0 !important; opacity: 1 !important; filter: none !important; overflow: hidden !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:hover, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:hover, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:focus, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:focus { background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important; color: #064e3b !important; border-color: rgba(16, 185, 129, .68) !important; box-shadow: 0 10px 22px rgba(6, 95, 70, .28), 0 0 0 3px rgba(16, 185, 129, .18) !important; z-index: 3 !important; } .admin-page--geo-editor .leaflet-control-zoom-in, .admin-page--geo-editor .leaflet-control-zoom-out { font-size: 23px !important; font-weight: 950 !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; letter-spacing: 0 !important; } .admin-page--geo-editor .leaflet-control-zoom-in span, .admin-page--geo-editor .leaflet-control-zoom-out span { color: inherit !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a { background-image: none !important; font-size: 0 !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a::before { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: 15px !important; line-height: 1 !important; color: #0f5132 !important; text-indent: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } .admin-page--geo-editor .leaflet-draw-draw-marker::before { content: "\f3c5" !important; color: #e11d48 !important; } .admin-page--geo-editor .leaflet-draw-draw-polyline::before { content: "\f55e" !important; color: #2563eb !important; } .admin-page--geo-editor .leaflet-draw-draw-polygon::before { content: "\f5ee" !important; color: #0f766e !important; } .admin-page--geo-editor .leaflet-draw-draw-rectangle::before { content: "\f5cb" !important; color: #7c3aed !important; } .admin-page--geo-editor .leaflet-draw-draw-circle::before { content: "\f111" !important; color: #0ea5e9 !important; } .admin-page--geo-editor .leaflet-draw-edit-edit::before { content: "\f303" !important; color: #f97316 !important; } .admin-page--geo-editor .leaflet-draw-edit-remove::before { content: "\f2ed" !important; color: #dc2626 !important; } .admin-page--geo-editor .leaflet-draw-draw-circlemarker::before { content: "\f140" !important; color: #0d9488 !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a.leaflet-disabled, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a.leaflet-disabled { background: #dbe5e0 !important; color: #718096 !important; opacity: .82 !important; box-shadow: none !important; cursor: not-allowed !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a.leaflet-disabled::before { color: #718096 !important; } .admin-page--geo-editor .leaflet-draw-actions { margin-left: 12px !important; } .admin-page--geo-editor .leaflet-draw-actions li { margin-bottom: 5px !important; } .admin-page--geo-editor .leaflet-draw-actions a { min-width: 76px !important; text-align: center !important; background: rgba(15, 23, 42, .94) !important; color: #f8fafc !important; border: 1px solid rgba(187, 247, 208, .28) !important; border-radius: 12px !important; font-weight: 900 !important; box-shadow: 0 14px 30px rgba(2, 6, 23, .32) !important; } .admin-page--geo-editor .leaflet-draw-actions a:hover, .admin-page--geo-editor .leaflet-draw-actions a:focus { background: #14532d !important; color: #ffffff !important; border-color: rgba(217, 249, 157, .58) !important; } html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar, html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-section, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-section, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-section { background: rgba(2, 12, 10, .92) !important; border-color: rgba(187, 247, 208, .38) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .52), 0 0 0 1px rgba(134, 239, 172, .12) !important; } html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a { background: linear-gradient(180deg, #f8fafc, #dff7ee) !important; color: #06110e !important; border-color: rgba(187, 247, 208, .34) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .88) !important; } html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a::before, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a::before, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a::before { text-shadow: none !important; } html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:hover, html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:hover, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:hover, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:hover, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:hover, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:hover { background: linear-gradient(135deg, #bbf7d0, #86efac) !important; color: #052e16 !important; } @media (max-width: 575.98px) { .admin-page--geo-editor .leaflet-control-container .leaflet-left { left: 8px !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-top { top: 8px !important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } } /* ========================================================= 2026-04-30 Admin Geo Editor minimal map controls v14 Less visual weight than v13, still readable on light/dark map tiles ========================================================= */ .admin-page--geo-editor .toolbar{ gap:.36rem!important; padding:.32rem!important; border-radius:18px!important; background:rgba(255,255,255,.56)!important; border:1px solid rgba(15,23,42,.08)!important; box-shadow:0 8px 22px rgba(15,23,42,.055)!important; backdrop-filter:blur(14px) saturate(1.08)!important; } .admin-page--geo-editor .toolbtn{ min-height:34px!important; padding:.42rem .72rem!important; border-radius:14px!important; gap:.36rem!important; background:rgba(255,255,255,.74)!important; color:#18342b!important; border:1px solid rgba(15,118,110,.18)!important; box-shadow:none!important; font-size:.78rem!important; font-weight:800!important; transform:none!important; } .admin-page--geo-editor .toolbtn:hover, .admin-page--geo-editor .toolbtn:focus{ background:rgba(236,253,245,.90)!important; color:#065f46!important; border-color:rgba(16,185,129,.32)!important; box-shadow:0 6px 16px rgba(6,95,70,.10)!important; transform:none!important; } .admin-page--geo-editor .toolbtn span{font-size:.78rem!important;font-weight:850!important;} .admin-page--geo-editor .geo-id-pill{ min-height:34px!important; padding:.32rem .58rem!important; border-radius:14px!important; background:rgba(248,250,252,.72)!important; border:1px solid rgba(15,23,42,.08)!important; box-shadow:none!important; } .admin-page--geo-editor .geo-id-pill__label{font-size:.72rem!important;color:#64748b!important;font-weight:850!important;} .admin-page--geo-editor .geo-id-pill__value{min-width:1.6rem!important;color:#0f172a!important;background:rgba(255,255,255,.78)!important;border-color:rgba(15,23,42,.08)!important;} .admin-page--geo-editor .leaflet-control-container .leaflet-left{left:11px!important;} .admin-page--geo-editor .leaflet-control-container .leaflet-top{top:11px!important;} .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-control{margin-top:8px!important;} .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-section{ gap:3px!important; padding:4px!important; border-radius:15px!important; background:rgba(255,255,255,.70)!important; border:1px solid rgba(15,23,42,.12)!important; box-shadow:0 10px 26px rgba(15,23,42,.14)!important; backdrop-filter:blur(10px) saturate(1.06)!important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a{ width:32px!important; height:32px!important; min-width:32px!important; min-height:32px!important; line-height:32px!important; border-radius:11px!important; background:rgba(255,255,255,.78)!important; color:#143126!important; border:1px solid rgba(15,23,42,.09)!important; box-shadow:none!important; } .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:hover, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:hover, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:focus, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:focus{ background:rgba(236,253,245,.96)!important; color:#065f46!important; border-color:rgba(16,185,129,.32)!important; box-shadow:0 5px 14px rgba(6,95,70,.12)!important; } .admin-page--geo-editor .leaflet-control-zoom-in, .admin-page--geo-editor .leaflet-control-zoom-out{font-size:20px!important;font-weight:850!important;} .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a::before{font-size:13px!important;color:#0f5132!important;} .admin-page--geo-editor .leaflet-draw-draw-marker::before{color:#e11d48!important;} .admin-page--geo-editor .leaflet-draw-draw-polyline::before{color:#4f46e5!important;} .admin-page--geo-editor .leaflet-draw-draw-polygon::before{color:#0f766e!important;} .admin-page--geo-editor .leaflet-draw-edit-edit::before{color:#f97316!important;} .admin-page--geo-editor .leaflet-draw-edit-remove::before{color:#dc2626!important;} .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a.leaflet-disabled, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a.leaflet-disabled{ background:rgba(241,245,249,.70)!important; color:#94a3b8!important; opacity:.72!important; } .admin-page--geo-editor .leaflet-draw-actions{margin-left:8px!important;} .admin-page--geo-editor .leaflet-draw-actions li{margin-bottom:4px!important;} .admin-page--geo-editor .leaflet-draw-actions a{ min-width:64px!important; padding:.34rem .55rem!important; border-radius:10px!important; background:rgba(255,255,255,.86)!important; color:#18342b!important; border:1px solid rgba(15,23,42,.12)!important; box-shadow:0 8px 18px rgba(15,23,42,.12)!important; font-size:.76rem!important; font-weight:850!important; } .admin-page--geo-editor .leaflet-draw-actions a:hover, .admin-page--geo-editor .leaflet-draw-actions a:focus{background:#ecfdf5!important;color:#065f46!important;border-color:rgba(16,185,129,.32)!important;} html[data-theme="dark"] .admin-page--geo-editor .toolbar, body.theme-dark .admin-page--geo-editor .toolbar, body.admin-body.theme-dark .admin-page--geo-editor .toolbar{ background:rgba(8,26,22,.54)!important; border-color:rgba(187,247,208,.12)!important; box-shadow:0 10px 26px rgba(0,0,0,.20)!important; } html[data-theme="dark"] .admin-page--geo-editor .toolbtn, body.theme-dark .admin-page--geo-editor .toolbtn, body.admin-body.theme-dark .admin-page--geo-editor .toolbtn{ background:rgba(255,255,255,.08)!important; color:#ecfdf5!important; border-color:rgba(187,247,208,.16)!important; } html[data-theme="dark"] .admin-page--geo-editor .toolbtn:hover, html[data-theme="dark"] .admin-page--geo-editor .toolbtn:focus, body.theme-dark .admin-page--geo-editor .toolbtn:hover, body.theme-dark .admin-page--geo-editor .toolbtn:focus, body.admin-body.theme-dark .admin-page--geo-editor .toolbtn:hover, body.admin-body.theme-dark .admin-page--geo-editor .toolbtn:focus{ background:rgba(34,197,94,.16)!important; color:#dcfce7!important; border-color:rgba(134,239,172,.28)!important; box-shadow:0 6px 16px rgba(0,0,0,.18)!important; } html[data-theme="dark"] .admin-page--geo-editor .geo-id-pill, body.theme-dark .admin-page--geo-editor .geo-id-pill, body.admin-body.theme-dark .admin-page--geo-editor .geo-id-pill{ background:rgba(255,255,255,.075)!important; border-color:rgba(187,247,208,.14)!important; } html[data-theme="dark"] .admin-page--geo-editor .geo-id-pill__label, body.theme-dark .admin-page--geo-editor .geo-id-pill__label, body.admin-body.theme-dark .admin-page--geo-editor .geo-id-pill__label{color:#bbf7d0!important;} html[data-theme="dark"] .admin-page--geo-editor .geo-id-pill__value, body.theme-dark .admin-page--geo-editor .geo-id-pill__value, body.admin-body.theme-dark .admin-page--geo-editor .geo-id-pill__value{background:rgba(255,255,255,.10)!important;color:#f8fafc!important;border-color:rgba(187,247,208,.12)!important;} html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar, html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-section, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-section, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-section{ background:rgba(8,24,20,.58)!important; border-color:rgba(187,247,208,.16)!important; box-shadow:0 10px 26px rgba(0,0,0,.24)!important; } html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a{ background:rgba(255,255,255,.11)!important; color:#ecfdf5!important; border-color:rgba(187,247,208,.16)!important; box-shadow:none!important; } html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a::before, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a::before, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a::before{filter:none!important;text-shadow:none!important;} html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:hover, html[data-theme="dark"] .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:hover, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:hover, body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:hover, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a:hover, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a:hover{ background:rgba(34,197,94,.18)!important; color:#dcfce7!important; border-color:rgba(134,239,172,.30)!important; box-shadow:0 5px 14px rgba(0,0,0,.18)!important; } html[data-theme="dark"] .admin-page--geo-editor .leaflet-draw-actions a, body.theme-dark .admin-page--geo-editor .leaflet-draw-actions a, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-draw-actions a{ background:rgba(8,24,20,.76)!important; color:#ecfdf5!important; border-color:rgba(187,247,208,.16)!important; box-shadow:0 8px 18px rgba(0,0,0,.26)!important; } html[data-theme="dark"] .admin-page--geo-editor .leaflet-draw-actions a:hover, body.theme-dark .admin-page--geo-editor .leaflet-draw-actions a:hover, body.admin-body.theme-dark .admin-page--geo-editor .leaflet-draw-actions a:hover{background:rgba(34,197,94,.18)!important;color:#dcfce7!important;border-color:rgba(134,239,172,.30)!important;} @media (max-width:575.98px){ .admin-page--geo-editor .leaflet-control-container .leaflet-left{left:8px!important;} .admin-page--geo-editor .leaflet-control-container .leaflet-top{top:8px!important;} .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-bar a, .admin-page--geo-editor .leaflet-control-container .leaflet-left .leaflet-draw-toolbar a{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;line-height:30px!important;} }