:root {
    color-scheme: light;
    --kpl-theme-bg: #eef3f8;
    --kpl-theme-bg-alt: #f8fbff;
    --kpl-theme-surface: #ffffff;
    --kpl-theme-surface-soft: rgba(255, 255, 255, 0.72);
    --kpl-theme-border: #d9e2ef;
    --kpl-theme-text: #17324d;
    --kpl-theme-text-muted: #64748b;
    --kpl-theme-accent: #2f6db2;
    --kpl-theme-accent-strong: #1d3f72;
    --kpl-theme-link: #1f5fa8;
    --kpl-theme-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    --kpl-theme-login-bg: linear-gradient(135deg, #0f2027 0%, #203a43 40%, #2c5364 100%);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --kpl-theme-bg: #0f172a;
    --kpl-theme-bg-alt: #111827;
    --kpl-theme-surface: #1e293b;
    --kpl-theme-surface-soft: rgba(15, 23, 42, 0.88);
    --kpl-theme-surface-elevated: #273449;
    --kpl-theme-border: #334155;
    --kpl-theme-text: #e5e7eb;
    --kpl-theme-text-muted: #94a3b8;
    --kpl-theme-accent: #3b82f6;
    --kpl-theme-accent-strong: #2563eb;
    --kpl-theme-link: #93c5fd;
    --kpl-theme-shadow: 0 24px 54px rgba(2, 6, 23, 0.42);
    --kpl-theme-login-bg: linear-gradient(135deg, #020617 0%, #0f172a 45%, #1e293b 100%);
}

html,
body {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body {
    background: var(--kpl-theme-bg) !important;
    color: var(--kpl-theme-text) !important;
}

body.login-page {
    background: var(--kpl-theme-login-bg) !important;
}

body a {
    color: var(--kpl-theme-link);
}

body .text-muted,
body .form-text,
body small,
body .small {
    color: var(--kpl-theme-text-muted) !important;
}

.app-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--kpl-theme-border);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    background: var(--kpl-theme-surface);
    color: var(--kpl-theme-text);
    box-shadow: var(--kpl-theme-shadow);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.app-theme-toggle:hover {
    transform: translateY(-1px);
}

.app-theme-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.24), var(--kpl-theme-shadow);
}

.app-theme-toggle__icon {
    font-size: 1rem;
}

.app-theme-toggle--nav {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: none;
}

.app-theme-toggle--nav .app-theme-toggle__label {
    color: inherit;
}

.app-theme-toggle--nav:hover {
    background: rgba(255, 255, 255, 0.18);
}

.login-theme-toggle-shell {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    background-color: var(--kpl-theme-surface) !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
}

html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] hr {
    border-color: var(--kpl-theme-border) !important;
    opacity: 1;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-check-input,
html[data-theme="dark"] .input-group-text {
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-select::placeholder {
    color: var(--kpl-theme-text-muted) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
}

html[data-theme="dark"] .navbar-light,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .box-shadow {
    background-color: var(--kpl-theme-surface) !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
    box-shadow: var(--kpl-theme-shadow) !important;
}

html[data-theme="dark"] .navbar-light .navbar-brand,
html[data-theme="dark"] .navbar-light .nav-link,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer a {
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #0b1220 0%, #13233b 45%, #101a2a 100%) !important;
    box-shadow: 18px 0 40px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .header-bar {
    background: rgba(15, 23, 42, 0.92) !important;
    border-bottom-color: var(--kpl-theme-border) !important;
    box-shadow: var(--kpl-theme-shadow) !important;
}

html[data-theme="dark"] .header-bar h1,
html[data-theme="dark"] .header-user-name,
html[data-theme="dark"] .header-profile-row strong {
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] .header-bar p,
html[data-theme="dark"] .header-user-role,
html[data-theme="dark"] .footer-bar,
html[data-theme="dark"] .header-profile-row span {
    color: var(--kpl-theme-text-muted) !important;
}

html[data-theme="dark"] .header-user-link {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%) !important;
    border-color: var(--kpl-theme-border) !important;
    color: var(--kpl-theme-text) !important;
    box-shadow: var(--kpl-theme-shadow) !important;
}

html[data-theme="dark"] .header-user-id,
html[data-theme="dark"] .erp-badge {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
}

html[data-theme="dark"] .header-profile-body,
html[data-theme="dark"] .header-profile-actions {
    background: var(--kpl-theme-surface) !important;
}

html[data-theme="dark"] .header-profile-row {
    border-bottom-color: var(--kpl-theme-border) !important;
}

html[data-theme="dark"] .sob-navbar {
    background: linear-gradient(135deg, #0f172a 0%, #172554 55%, #1d4ed8 100%) !important;
}

html[data-theme="dark"] .sob-user-link {
    background: rgba(15, 23, 42, 0.28) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

html[data-theme="dark"] .sob-content-shell,
html[data-theme="dark"] .sob-profile-card,
html[data-theme="dark"] .public-footer,
html[data-theme="dark"] .footer-bar {
    background: var(--kpl-theme-surface-soft) !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
    box-shadow: var(--kpl-theme-shadow) !important;
}

html[data-theme="dark"] .sob-profile-info strong,
html[data-theme="dark"] .public-footer a {
    color: #bfdbfe !important;
}

html[data-theme="dark"] .sob-profile-info p,
html[data-theme="dark"] .public-footer,
html[data-theme="dark"] .footer-bar {
    color: var(--kpl-theme-text-muted) !important;
}

html[data-theme="dark"] .sq-sheet,
html[data-theme="dark"] .sq-filter-bar,
html[data-theme="dark"] .sq-summary-card,
html[data-theme="dark"] .employee-card,
html[data-theme="dark"] .login-section,
html[data-theme="dark"] .qr-container {
    background: var(--kpl-theme-surface) !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
    box-shadow: var(--kpl-theme-shadow) !important;
}

html[data-theme="dark"] .sq-filter-label,
html[data-theme="dark"] .sq-company-name,
html[data-theme="dark"] .sq-label,
html[data-theme="dark"] .sq-stamp,
html[data-theme="dark"] .sq-annexure,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .form-label {
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] .sq-filter-note,
html[data-theme="dark"] .sq-summary-card span,
html[data-theme="dark"] .sq-address,
html[data-theme="dark"] .sq-value,
html[data-theme="dark"] .sq-empty-row {
    color: var(--kpl-theme-text-muted) !important;
}

html[data-theme="dark"] .sq-table th,
html[data-theme="dark"] .sq-table td,
html[data-theme="dark"] .sq-table,
html[data-theme="dark"] .sq-header-table td,
html[data-theme="dark"] .sq-header-table th {
    border-color: #475569 !important;
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] .login-card,
html[data-theme="dark"] .login-body,
html[data-theme="dark"] .login-footer {
    background: var(--kpl-theme-surface) !important;
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] .login-footer {
    color: var(--kpl-theme-text-muted) !important;
}

html[data-theme="dark"] .login-header {
    background: linear-gradient(135deg, #0f172a 0%, #1d4f80 100%) !important;
}

html[data-theme="dark"] .toggle-password {
    color: var(--kpl-theme-text-muted) !important;
}

html[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* Step 6: Add a richer global dark surface system so every page looks intentional, elevated, and readable. */
html[data-theme="dark"] body {
    background: radial-gradient(circle at top right, rgba(20, 184, 166, 0.1) 0%, transparent 24%), linear-gradient(180deg, var(--kpl-theme-bg) 0%, var(--kpl-theme-bg-alt) 100%) !important;
}

html[data-theme="dark"] body.login-page {
    background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e293b 100%) !important;
}

/* Step 7: Keep the shared theme toggle prominent and polished in dark mode without affecting light mode. */
html[data-theme="dark"] .app-theme-toggle {
    background: linear-gradient(180deg, var(--kpl-theme-surface-elevated) 0%, var(--kpl-theme-surface) 100%);
    color: var(--kpl-theme-text);
    border-color: rgba(148, 163, 184, 0.26);
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.28);
}

html[data-theme="dark"] .app-theme-toggle:hover,
html[data-theme="dark"] .app-theme-toggle:focus-visible {
    border-color: rgba(59, 130, 246, 0.42);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.18), 0 18px 36px rgba(37, 99, 235, 0.18);
}

html[data-theme="dark"] .app-theme-toggle--nav {
    background: rgba(15, 23, 42, 0.38);
    border-color: rgba(148, 163, 184, 0.28);
}

html[data-theme="dark"] .app-theme-toggle--nav:hover {
    background: rgba(30, 41, 59, 0.78);
}

/* Step 8: Standardize dark cards, dialogs, menus, and raised containers with elegant depth. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] .sob-content-shell,
html[data-theme="dark"] .sob-profile-card,
html[data-theme="dark"] .public-footer,
html[data-theme="dark"] .footer-bar,
html[data-theme="dark"] .sq-sheet,
html[data-theme="dark"] .sq-filter-bar,
html[data-theme="dark"] .sq-summary-card,
html[data-theme="dark"] .employee-card,
html[data-theme="dark"] .login-section,
html[data-theme="dark"] .qr-container,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .login-body,
html[data-theme="dark"] .login-footer {
    background: linear-gradient(180deg, var(--kpl-theme-surface-elevated) 0%, var(--kpl-theme-surface) 100%) !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
    box-shadow: var(--kpl-theme-shadow) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .offcanvas-header,
html[data-theme="dark"] .offcanvas-footer {
    border-color: var(--kpl-theme-border) !important;
    background: rgba(15, 23, 42, 0.5) !important;
}

/* Step 9: Make all shared inputs and input-like controls readable with strong focus feedback. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-check-input,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.btn),
html[data-theme="dark"] select:not(.btn),
html[data-theme="dark"] textarea:not(.btn) {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.btn),
html[data-theme="dark"] body select:not(.btn),
html[data-theme="dark"] body textarea:not(.btn) {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):disabled,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"])[readonly],
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] select[readonly],
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] textarea[readonly] {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #475569 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #e5e7eb !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"])::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--kpl-theme-text-muted) !important;
    -webkit-text-fill-color: var(--kpl-theme-text-muted) !important;
}

html[data-theme="dark"] option,
html[data-theme="dark"] optgroup {
    background: #0f172a !important;
    color: var(--kpl-theme-text) !important;
}

/* Step 9A: Fix Bootstrap floating-label chips in dark mode so the pale label background does not stay white on login and other shared forms. */
html[data-theme="dark"] .form-floating > label {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .form-floating > label::after {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

html[data-theme="dark"] .form-floating > .form-control:focus ~ label,
html[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
html[data-theme="dark"] .form-floating > .form-select ~ label {
    color: #93c5fd !important;
}

html[data-theme="dark"] .login-page .form-floating > label,
html[data-theme="dark"] .login-page .form-floating > .form-control:focus ~ label,
html[data-theme="dark"] .login-page .form-floating > .form-control:not(:placeholder-shown) ~ label,
html[data-theme="dark"] .login-page .form-floating > .form-select ~ label {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .login-page .form-floating > label::after {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:hover,
html[data-theme="dark"] select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
    caret-color: var(--kpl-theme-text) !important;
    border: 1px solid #475569 !important;
    -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important, 0 0 0 1px #475569 !important;
    box-shadow: 0 0 0 1000px #0f172a inset !important, 0 0 0 1px #475569 !important;
    transition: background-color 9999s ease-out 0s, color 9999s ease-out 0s !important;
}

html[data-theme="dark"] input:-internal-autofill-selected,
html[data-theme="dark"] textarea:-internal-autofill-selected,
html[data-theme="dark"] select:-internal-autofill-selected {
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-select::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--kpl-theme-text-muted) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus {
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--kpl-theme-accent) !important;
    border-color: var(--kpl-theme-accent) !important;
}

html[data-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.18) !important;
}

/* Step 10: Keep dark mode buttons distinct with blue primaries and refined neutral actions. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .bg-primary,
html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .pagination .active > .page-link {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: #3b82f6 !important;
    color: #eff6ff !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22) !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus-visible,
html[data-theme="dark"] .page-link:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.16), 0 16px 28px rgba(37, 99, 235, 0.22) !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .page-link {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover {
    background: linear-gradient(180deg, #334155 0%, #273449 100%) !important;
    color: #f8fafc !important;
    border-color: #64748b !important;
}

html[data-theme="dark"] .btn-outline-primary {
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, 0.46) !important;
}

html[data-theme="dark"] .btn-outline-primary:hover {
    background: rgba(59, 130, 246, 0.14) !important;
    color: #eff6ff !important;
}

/* Step 11: Convert shared active toggles such as accordions, tabs, and pills to elegant dark teal states. */
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .nav-pills .nav-link {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed),
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .list-group-item.active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.22) 0%, rgba(15, 118, 110, 0.18) 100%) !important;
    color: #ccfbf1 !important;
    border-color: rgba(45, 212, 191, 0.28) !important;
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.12), 0 12px 24px rgba(20, 184, 166, 0.12) !important;
}

html[data-theme="dark"] .accordion-button::after {
    filter: brightness(0) invert(1);
}

/* Step 12: Make grids and tables clearer with layered surfaces, softer zebra rows, and better hover feedback. */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .sq-table th,
html[data-theme="dark"] .sq-table td,
html[data-theme="dark"] .sq-table,
html[data-theme="dark"] .sq-header-table td,
html[data-theme="dark"] .sq-header-table th {
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .sq-table thead th {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th {
    background-color: rgba(15, 23, 42, 0.58) !important;
}

html[data-theme="dark"] .table tbody tr:nth-child(even) td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(30, 41, 59, 0.82) !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #f8fafc !important;
}

/* Step 13: Align shared utility text and badges with the softer dark readability target. */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .sq-filter-label,
html[data-theme="dark"] .sq-company-name,
html[data-theme="dark"] .sq-label,
html[data-theme="dark"] .sq-stamp,
html[data-theme="dark"] .sq-annexure {
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .bg-light {
    background: rgba(30, 41, 59, 0.86) !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
}

/* Step 14: Theme SweetAlert and similar popups so dark mode stays consistent across all views. */
html[data-theme="dark"] .swal2-popup {
    background: linear-gradient(180deg, #1e293b 0%, #111827 100%) !important;
    color: var(--kpl-theme-text) !important;
    border: 1px solid var(--kpl-theme-border) !important;
    box-shadow: var(--kpl-theme-shadow) !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
    color: var(--kpl-theme-text) !important;
}

/* Step 15: Normalize legacy eBMR shells so older white panels inherit the same dark surface and keep text readable across all sections. */
html[data-theme="dark"] .box-content-colapse,
html[data-theme="dark"] .box-content-colapse > details,
html[data-theme="dark"] .details-comp,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel.panel-default,
html[data-theme="dark"] fieldset,
html[data-theme="dark"] .content-section,
html[data-theme="dark"] .signature-group,
html[data-theme="dark"] .signature-box,
html[data-theme="dark"] .erp-info,
html[data-theme="dark"] .tableContainer,
html[data-theme="dark"] .dataTable-container,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] #nav-tabContent,
html[data-theme="dark"] .sob-panel,
html[data-theme="dark"] .sob-toolbar-wrap,
html[data-theme="dark"] #parallel > .card,
html[data-theme="dark"] #parallel .card .card,
html[data-theme="dark"] [style*="background-color:#f7fafc"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color: #f7fafc"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color:#fff"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color: #fff"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color:#ffffff"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color: #ffffff"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background: #fff"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background:#fff"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background: #ffffff"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background:#ffffff"]:not(.btn):not(button):not(input):not(select):not(textarea) {
    background: linear-gradient(180deg, var(--kpl-theme-surface-elevated) 0%, var(--kpl-theme-surface) 100%) !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
    box-shadow: var(--kpl-theme-shadow) !important;
}

/* Step 16: Lift shared legacy eBMR headings, labels, and helper text so they stay visible on the unified dark surfaces. */
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .group-title,
html[data-theme="dark"] .labl,
html[data-theme="dark"] .labsl,
html[data-theme="dark"] .lables,
html[data-theme="dark"] .dynamic-label,
html[data-theme="dark"] .Codel,
html[data-theme="dark"] .PackingType,
html[data-theme="dark"] .content-section strong,
html[data-theme="dark"] .signature-box strong,
html[data-theme="dark"] .signature-group strong,
html[data-theme="dark"] .erp-info strong,
html[data-theme="dark"] legend,
html[data-theme="dark"] label,
html[data-theme="dark"] .font-weight-bold {
    color: #f8fafc !important;
}

html[data-theme="dark"] .content-section p,
html[data-theme="dark"] .content-section span,
html[data-theme="dark"] .signature-box span,
html[data-theme="dark"] .signature-group span,
html[data-theme="dark"] .erp-info p,
html[data-theme="dark"] .erp-info span,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-body p,
html[data-theme="dark"] .panel-body span {
    color: #cbd5e1 !important;
}

/* Step 17: Apply the same dark table treatment to legacy non-Bootstrap tables so white cells no longer break readability in other forms. */
html[data-theme="dark"] table thead th,
html[data-theme="dark"] table tbody td,
html[data-theme="dark"] table tbody th {
    border-color: #475569 !important;
}

html[data-theme="dark"] table thead th {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] table tbody td,
html[data-theme="dark"] table tbody th {
    background: rgba(15, 23, 42, 0.7) !important;
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] table tbody tr:nth-child(even) td,
html[data-theme="dark"] table tbody tr:nth-child(even) th {
    background: rgba(30, 41, 59, 0.86) !important;
}

html[data-theme="dark"] table tbody tr:hover td,
html[data-theme="dark"] table tbody tr:hover th {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #f8fafc !important;
}

/* Step 18: Force common hardcoded light surfaces and dark text to adapt in master dark mode so form-specific inline colors do not break readability. */
html[data-theme="dark"] [style*="background-color:white"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color: white"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background:white"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background: white"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color:#f8f9fa"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color: #f8f9fa"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background:#f8f9fa"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background: #f8f9fa"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color:#f5f5f5"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color: #f5f5f5"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"]:not(.btn):not(button):not(input):not(select):not(textarea),
html[data-theme="dark"] [style*="background-color:rgb(255,255,255)"]:not(.btn):not(button):not(input):not(select):not(textarea) {
    background: linear-gradient(180deg, var(--kpl-theme-surface-elevated) 0%, var(--kpl-theme-surface) 100%) !important;
    color: var(--kpl-theme-text) !important;
    border-color: var(--kpl-theme-border) !important;
}

html[data-theme="dark"] input[style*="background-color:white"],
html[data-theme="dark"] input[style*="background-color: white"],
html[data-theme="dark"] input[style*="background:white"],
html[data-theme="dark"] input[style*="background: white"],
html[data-theme="dark"] input[style*="background-color:#fff"],
html[data-theme="dark"] input[style*="background-color: #fff"],
html[data-theme="dark"] input[style*="background-color:#ffffff"],
html[data-theme="dark"] input[style*="background-color: #ffffff"],
html[data-theme="dark"] input[style*="background-color:#f8f9fa"],
html[data-theme="dark"] input[style*="background-color: #f8f9fa"],
html[data-theme="dark"] select[style*="background-color:white"],
html[data-theme="dark"] select[style*="background-color: white"],
html[data-theme="dark"] select[style*="background-color:#fff"],
html[data-theme="dark"] select[style*="background-color: #fff"],
html[data-theme="dark"] textarea[style*="background-color:white"],
html[data-theme="dark"] textarea[style*="background-color: white"],
html[data-theme="dark"] textarea[style*="background-color:#fff"],
html[data-theme="dark"] textarea[style*="background-color: #fff"] {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#000000"],
html[data-theme="dark"] [style*="color: #000000"],
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color: #111"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color: #222"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color:#212529"],
html[data-theme="dark"] [style*="color: #212529"] {
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] input[style*="color:#000"],
html[data-theme="dark"] input[style*="color: #000"],
html[data-theme="dark"] input[style*="color:#000000"],
html[data-theme="dark"] input[style*="color: #000000"],
html[data-theme="dark"] input[style*="color:black"],
html[data-theme="dark"] input[style*="color: black"],
html[data-theme="dark"] input[style*="color:#111"],
html[data-theme="dark"] input[style*="color: #111"],
html[data-theme="dark"] input[style*="color:#222"],
html[data-theme="dark"] input[style*="color: #222"],
html[data-theme="dark"] textarea[style*="color:#000"],
html[data-theme="dark"] textarea[style*="color: #000"],
html[data-theme="dark"] textarea[style*="color:black"],
html[data-theme="dark"] textarea[style*="color: black"],
html[data-theme="dark"] select[style*="color:#000"],
html[data-theme="dark"] select[style*="color: #000"],
html[data-theme="dark"] select[style*="color:black"],
html[data-theme="dark"] select[style*="color: black"] {
    color: var(--kpl-theme-text) !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
}

/* Step 19: Keep shared checkboxes, radios, and their labels visible in dark mode across forms with custom or inline styling. */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] .form-check-input,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .form-check,
html[data-theme="dark"] .form-switch .form-check-label {
    accent-color: var(--kpl-theme-accent) !important;
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] input[type="checkbox"]:disabled,
html[data-theme="dark"] input[type="radio"]:disabled,
html[data-theme="dark"] .form-check-input:disabled {
    opacity: 0.7 !important;
    filter: brightness(1.1);
}

/* Step 20: Keep the shared dashboard sidebar hierarchy uniformly dark, readable, and polished on every module page. */
html[data-theme="dark"] .sidebar .sidebar-header,
html[data-theme="dark"] .sidebar .nav,
html[data-theme="dark"] .sidebar .sidebar-group-label,
html[data-theme="dark"] .sidebar .nav-link,
html[data-theme="dark"] .sidebar .sidenav-second-level,
html[data-theme="dark"] .sidebar .sidenav-third-level,
html[data-theme="dark"] .sidebar .sidenav-second-level > li > .nav-link,
html[data-theme="dark"] .sidebar .sidenav-third-level > li > .nav-link {
    color: #e5e7eb !important;
}

html[data-theme="dark"] .sidebar .sidebar-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(15, 23, 42, 0.16) 100%) !important;
    border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] .sidebar .sidebar-group-label,
html[data-theme="dark"] .sidebar .sidebar-header small,
html[data-theme="dark"] .sidebar .collapse .nav-link {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .sidebar .nav-link,
html[data-theme="dark"] .sidebar .nav-link:visited {
    color: #e5e7eb !important;
}

html[data-theme="dark"] .sidebar .nav-link:hover,
html[data-theme="dark"] .sidebar .nav-link.active,
html[data-theme="dark"] .sidebar .sidenav-second-level > li > .nav-link:hover,
html[data-theme="dark"] .sidebar .sidenav-second-level > li > .nav-link.active,
html[data-theme="dark"] .sidebar .sidenav-third-level > li > .nav-link:hover,
html[data-theme="dark"] .sidebar .sidenav-third-level > li > .nav-link.active {
    color: #f8fafc !important;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
}

html[data-theme="dark"] .sidebar .sidenav-second-level,
html[data-theme="dark"] .sidebar .sidenav-third-level {
    border-color: rgba(96, 165, 250, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 22px rgba(2, 6, 23, 0.24) !important;
}

/* Step 21: Convert pale white/yellow inline highlight strips to dark surfaces too so legacy label bars remain readable in dark mode. */
html[data-theme="dark"] [style*="#ffffe0"],
html[data-theme="dark"] [style*="#fffacd"],
html[data-theme="dark"] [style*="#fafad2"],
html[data-theme="dark"] [style*="#fff9c4"],
html[data-theme="dark"] [style*="#fff7ae"],
html[data-theme="dark"] [style*="#fff7cc"],
html[data-theme="dark"] [style*="#fef3c7"],
html[data-theme="dark"] [style*="#fef9c3"],
html[data-theme="dark"] [style*="#fffbea"],
html[data-theme="dark"] [style*="#ffffcc"],
html[data-theme="dark"] [style*="#ffff99"],
html[data-theme="dark"] [style*="rgb(255, 255, 224)"],
html[data-theme="dark"] [style*="rgb(255, 250, 205)"],
html[data-theme="dark"] [style*="rgb(250, 250, 210)"],
html[data-theme="dark"] [style*="rgb(254, 243, 199)"],
html[data-theme="dark"] [style*="rgb(254, 249, 195)"],
html[data-theme="dark"] [style*="lightyellow"],
html[data-theme="dark"] [style*="lightgoldenrodyellow"],
html[data-theme="dark"] [style*="background: yellow"],
html[data-theme="dark"] [style*="background-color: yellow"],
html[data-theme="dark"] [style*="background:yellow"],
html[data-theme="dark"] [style*="background-color:yellow"] {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    background-color: #1e293b !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] input[style*="#ffffe0"],
html[data-theme="dark"] input[style*="#fffacd"],
html[data-theme="dark"] input[style*="#fafad2"],
html[data-theme="dark"] input[style*="#fff9c4"],
html[data-theme="dark"] input[style*="#fff7ae"],
html[data-theme="dark"] input[style*="#fef3c7"],
html[data-theme="dark"] input[style*="lightyellow"],
html[data-theme="dark"] input[style*="lightgoldenrodyellow"],
html[data-theme="dark"] select[style*="#ffffe0"],
html[data-theme="dark"] select[style*="#fffacd"],
html[data-theme="dark"] select[style*="#fafad2"],
html[data-theme="dark"] select[style*="#fff9c4"],
html[data-theme="dark"] select[style*="#fff7ae"],
html[data-theme="dark"] select[style*="#fef3c7"],
html[data-theme="dark"] select[style*="lightyellow"],
html[data-theme="dark"] select[style*="lightgoldenrodyellow"],
html[data-theme="dark"] textarea[style*="#ffffe0"],
html[data-theme="dark"] textarea[style*="#fffacd"],
html[data-theme="dark"] textarea[style*="#fafad2"],
html[data-theme="dark"] textarea[style*="#fff9c4"],
html[data-theme="dark"] textarea[style*="#fff7ae"],
html[data-theme="dark"] textarea[style*="#fef3c7"],
html[data-theme="dark"] textarea[style*="lightyellow"],
html[data-theme="dark"] textarea[style*="lightgoldenrodyellow"] {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] .Codel,
html[data-theme="dark"] .PackingType {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
    -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] #codes,
html[data-theme="dark"] #Packingtcode {
    color: var(--kpl-theme-text) !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] #loginPopup .kw-input,
html[data-theme="dark"] #loginPopup input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.btn) {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: none !important;
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] #loginPopup .kw-input::placeholder,
html[data-theme="dark"] #loginPopup input::placeholder {
    color: var(--kpl-theme-text-muted) !important;
    -webkit-text-fill-color: var(--kpl-theme-text-muted) !important;
    opacity: 1 !important;
}

/* Step 22: Override BMR component-level pale cards, legends, and image placeholders that are more specific than the generic master selectors. */
html[data-theme="dark"] .sale-order-booking-shell .sob-image-card,
html[data-theme="dark"] .sale-order-booking-shell #parallel > .card,
html[data-theme="dark"] .sale-order-booking-shell #parallel .card .card,
html[data-theme="dark"] .sale-order-booking-shell #ftpImage,
html[data-theme="dark"] .sale-order-booking-shell #dummyImageBox,
html[data-theme="dark"] .sale-order-booking-shell #realBox {
    background: linear-gradient(180deg, #1e293b 0%, #111827 100%) !important;
    border-color: #475569 !important;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .sale-order-booking-shell .img-card-title,
html[data-theme="dark"] .sale-order-booking-shell #ftpImage p,
html[data-theme="dark"] .sale-order-booking-shell #dummyImageBox p,
html[data-theme="dark"] .sale-order-booking-shell #realBox p {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    color: #e5e7eb !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .sale-order-booking-shell #ftpImage p,
html[data-theme="dark"] .sale-order-booking-shell #dummyImageBox p,
html[data-theme="dark"] .sale-order-booking-shell #realBox p {
    background: transparent !important;
}

html[data-theme="dark"] #ls fieldset,
html[data-theme="dark"] #ls legend,
html[data-theme="dark"] #ls .pls-grid-shell,
html[data-theme="dark"] #ls .pls-data-grid-table,
html[data-theme="dark"] #ls .pls-data-grid-table thead th,
html[data-theme="dark"] #ls .pls-data-grid-table tbody td {
    border-color: #475569 !important;
}

html[data-theme="dark"] #ls #ed-details .dataTables_wrapper,
html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .dataTables_paginate {
    color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .paginate_button,
html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .paginate_button.current,
html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .paginate_button.disabled {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .paginate_button:hover,
html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .paginate_button.current:hover {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    color: #f8fafc !important;
    border-color: #64748b !important;
}

html[data-theme="dark"] #ls #ed-details .dataTables_wrapper .dataTables_empty {
    color: var(--kpl-theme-text) !important;
    background: rgba(30, 41, 59, 0.86) !important;
}

html[data-theme="dark"] #ls #ed-details .employee-card,
html[data-theme="dark"] #ls #ed-details .login-section,
html[data-theme="dark"] #ls #ed-details .qr-container {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.22) !important;
}

html[data-theme="dark"] #ls #ed-details .employee-details .form-control,
html[data-theme="dark"] #ls #ed-details .employee-details .form-control.bg-white,
html[data-theme="dark"] #ls #ed-details .employee-details .border-light,
html[data-theme="dark"] #ls #ed-details .login-section.bg-light {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: var(--kpl-theme-text) !important;
    border-color: #475569 !important;
    -webkit-text-fill-color: var(--kpl-theme-text) !important;
}

html[data-theme="dark"] #ls #ed-details .login-section .form-label.text-dark,
html[data-theme="dark"] #ls #ed-details .employee-details .form-label.text-muted,
html[data-theme="dark"] #ls #ed-details .employee-details .form-label {
    color: #e5e7eb !important;
}

html[data-theme="dark"] #ls fieldset {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.22) !important;
}

html[data-theme="dark"] #ls legend,
html[data-theme="dark"] fieldset legend[style] {
    background: linear-gradient(180deg, #273449 0%, #1e293b 100%) !important;
    color: #f8fafc !important;
    border-color: #60a5fa !important;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.18) !important;
}

@media (max-width: 575.98px) {
    .app-theme-toggle {
        padding: 0.45rem 0.7rem;
        font-size: 0.82rem;
    }

    .app-theme-toggle__label {
        display: none;
    }
}