:root {
    /* Design tokens requested */
    --ds-bg-primary: #1F2A44;
    --ds-bg-secondary: #1B2438;
    --ds-bg-mid: #243556;

    --ds-primary-1: #6EDC8C;
    --ds-primary-2: #4CAF6A;
    --ds-primary-3: #2F7D4F;

    --ds-secondary-1: #5DA9E9;
    --ds-secondary-2: #3F7FD1;
    --ds-secondary-3: #2C5FA8;

    --ds-warning-1: #F4A261;
    --ds-warning-2: #E76F51;
    --ds-warning-3: #C8553D;

    --ds-info-1: #5BC0BE;
    --ds-info-2: #3A9D9B;
    --ds-info-3: #2F7C7A;

    --ds-danger-1: #E76F6F;
    --ds-danger-2: #D64545;
    --ds-danger-3: #A83232;

    --ds-text-main: #FFFFFF;
    --ds-text-soft: #DCE3EA;
    --ds-text-muted: #AAB4C3;

    --ds-radius-sm: 12px;
    --ds-radius-md: 14px;
    --ds-radius-lg: 18px;
    --ds-shadow-soft: 0 10px 28px rgba(6, 15, 30, 0.3);
    --ds-glass-border: 1px solid rgba(255, 255, 255, 0.14);
    --ds-glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

/* Keep light theme untouched: all overrides only when dark is active */
html[data-theme='dark'] body {
    color: var(--ds-text-soft);
    background:
        radial-gradient(62rem 28rem at 8% -8%, rgba(93, 169, 233, 0.2), transparent 58%),
        radial-gradient(40rem 24rem at 100% 0%, rgba(91, 192, 190, 0.16), transparent 62%),
        linear-gradient(145deg, var(--ds-bg-primary), var(--ds-bg-secondary) 52%, var(--ds-bg-mid));
}

html[data-theme='dark'] a {
    color: var(--ds-secondary-1);
}

html[data-theme='dark'] a:hover,
html[data-theme='dark'] a:focus {
    color: #9cc8ff;
}

html[data-theme='dark'] .top-nav {
    padding: 0.9rem 1.2rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    border-radius: var(--ds-radius-lg);
    border: var(--ds-glass-border);
    background: var(--ds-glass-bg);
    backdrop-filter: blur(8px);
    box-shadow: var(--ds-shadow-soft);
}

html[data-theme='dark'] .nav-hamburger {
    color: var(--ds-text-soft);
}

html[data-theme='dark'] .nav-hamburger:hover {
    color: var(--ds-text-main);
}

html[data-theme='dark'] .top-nav-title a {
    flex-shrink: 0;
}

html[data-theme='dark'] .top-nav-title a img {
    height: 40px;
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

html[data-theme='dark'] .top-nav-title span,
html[data-theme='dark'] .top-nav-links a {
    color: var(--ds-text-soft);
}

html[data-theme='dark'] .top-nav-title a {
    color: var(--ds-text-main);
}

html[data-theme='dark'] .top-nav-links a:hover {
    color: var(--ds-text-main);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

html[data-theme='dark'] .top-nav-links a[href*="/users/logout"] {
    color: var(--ds-text-soft);
    background: transparent;
    border-radius: 10px;
}

html[data-theme='dark'] .content,
html[data-theme='dark'] .side-nav,
html[data-theme='dark'] .actions-index,
html[data-theme='dark'] .modal-content {
    border-radius: var(--ds-radius-lg);
    border: var(--ds-glass-border);
    background: var(--ds-glass-bg), rgba(15, 24, 43, 0.55);
    box-shadow: var(--ds-shadow-soft);
    color: var(--ds-text-soft);
}

html[data-theme='dark'] .side-nav a,
html[data-theme='dark'] .side-nav .side-nav-item,
html[data-theme='dark'] .actions a {
    color: var(--ds-text-soft);
}

html[data-theme='dark'] .side-nav a:hover,
html[data-theme='dark'] .side-nav .side-nav-item:hover,
html[data-theme='dark'] .actions a:hover {
    color: var(--ds-text-main);
}

html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6,
html[data-theme='dark'] label,
html[data-theme='dark'] legend,
html[data-theme='dark'] p,
html[data-theme='dark'] td,
html[data-theme='dark'] th {
    color: var(--ds-text-soft);
}

html[data-theme='dark'] table thead th {
    color: var(--ds-text-main);
    background: rgba(20, 33, 56, 0.82);
}

html[data-theme='dark'] table,
html[data-theme='dark'] .stock-table,
html[data-theme='dark'] .selected-summary,
html[data-theme='dark'] .table {
    color: var(--ds-text-soft);
    background: rgba(15, 26, 46, 0.68);
}

html[data-theme='dark'] table td,
html[data-theme='dark'] table th {
    border-color: rgba(178, 198, 226, 0.2);
}

html[data-theme='dark'] table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

html[data-theme='dark'] .modal-header h2,
html[data-theme='dark'] .modal-body,
html[data-theme='dark'] .qr-info,
html[data-theme='dark'] .qr-payload {
    color: var(--ds-text-soft);
}

html[data-theme='dark'] .modal-header {
    border-color: rgba(255, 255, 255, 0.16);
}

html[data-theme='dark'] .modal-close {
    color: var(--ds-text-soft);
}

html[data-theme='dark'] .modal-close:hover {
    color: var(--ds-text-main);
}

html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea {
    color: var(--ds-text-soft);
    border-radius: var(--ds-radius-sm);
    border: 1px solid rgba(164, 181, 208, 0.42);
    background: rgba(11, 19, 35, 0.66);
}

html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder {
    color: var(--ds-text-muted);
}

html[data-theme='dark'] select option {
    color: var(--ds-text-soft);
    background: #17253f;
}

html[data-theme='dark'] #device-list,
html[data-theme='dark'] #stock-list,
html[data-theme='dark'] .device-item {
    color: var(--ds-text-soft);
    background: rgba(16, 27, 47, 0.7);
    border-color: rgba(178, 198, 226, 0.2);
}

html[data-theme='dark'] .device-item:hover {
    background: rgba(47, 95, 168, 0.22);
}

html[data-theme='dark'] .device-label {
    color: var(--ds-text-soft);
}

html[data-theme='dark'] .message {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(31, 51, 85, 0.72);
    color: var(--ds-text-soft);
}

html[data-theme='dark'] .message.success {
    background: rgba(47, 125, 79, 0.35);
    color: #d9ffe6;
}

html[data-theme='dark'] .message.error {
    background: rgba(168, 50, 50, 0.35);
    color: #ffdcdc;
}

html[data-theme='dark'] .message.warning {
    background: rgba(200, 85, 61, 0.35);
    color: #ffe9d6;
}

html[data-theme='dark'] .button,
html[data-theme='dark'] button,
html[data-theme='dark'] input[type='button'],
html[data-theme='dark'] input[type='reset'],
html[data-theme='dark'] input[type='submit'] {
    color: #fff;
    border: 0;
    border-radius: var(--ds-radius-md);
    background: linear-gradient(90deg, var(--ds-primary-1), var(--ds-primary-2), var(--ds-primary-3));
}

/* Theme toggle icon */
.nav-theme-toggle {
    width: 28px;
    height: 28px;
    min-height: 28px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    line-height: 1;
    font-size: 14px;
}

html[data-theme='dark'] .nav-theme-toggle {
    width: 32px;
    height: 32px;
    min-height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: var(--ds-text-main);
}

/* Dashboard visual example */
html[data-theme='dark'] .ds-dashboard-shell {
    display: grid;
    gap: 1rem;
}

html[data-theme='dark'] .ds-hero {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}

html[data-theme='dark'] .ds-card {
    border-radius: var(--ds-radius-lg);
    border: var(--ds-glass-border);
    background: var(--ds-glass-bg);
    box-shadow: var(--ds-shadow-soft);
    padding: 1rem;
}

html[data-theme='dark'] .ds-kpi {
    color: var(--ds-text-main);
    font-size: 1.8rem;
    font-weight: 700;
}

html[data-theme='dark'] .ds-kpi-label {
    color: var(--ds-text-muted);
    font-size: 0.9rem;
}

html[data-theme='dark'] .ds-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

html[data-theme='dark'] .ds-btn {
    border: 0;
    color: #fff;
    border-radius: var(--ds-radius-md);
    padding: 0.55rem 0.95rem;
    font-weight: 700;
    box-shadow: var(--ds-shadow-soft);
}

html[data-theme='dark'] .ds-btn-primary {
    background: linear-gradient(90deg, var(--ds-primary-1), var(--ds-primary-2), var(--ds-primary-3));
}

html[data-theme='dark'] .ds-btn-secondary {
    background: linear-gradient(90deg, var(--ds-secondary-1), var(--ds-secondary-2), var(--ds-secondary-3));
}

html[data-theme='dark'] .ds-btn-danger {
    background: linear-gradient(90deg, var(--ds-danger-1), var(--ds-danger-2), var(--ds-danger-3));
}

html[data-theme='dark'] .badge-green {
    background: linear-gradient(90deg, var(--ds-primary-2), var(--ds-primary-3));
}

html[data-theme='dark'] .badge-red {
    background: linear-gradient(90deg, var(--ds-danger-2), var(--ds-danger-3));
}

@media (max-width: 960px) {
    html[data-theme='dark'] .ds-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    html[data-theme='dark'] .devices.index.content {
        padding: 12px;
    }

    html[data-theme='dark'] .top-nav-title a img {
        height: 38px;
        max-height: 38px;
        min-height: 38px;
    }

    html[data-theme='dark'] .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    html[data-theme='dark'] .card-body-category {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    html[data-theme='dark'] .dashboard-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    html[data-theme='dark'] .dashboard-main-table {
        min-width: 560px;
        white-space: nowrap;
    }
}

@media (max-width: 700px) {
    html[data-theme='dark'] .top-nav-links {
        border-top-color: rgba(255, 255, 255, 0.18);
    }
}

/* ---------------- Dashboard (legacy classes) ---------------- */
html[data-theme='dark'] .dashboard-grid .card-state,
html[data-theme='dark'] .dashboard-grid .card-category,
html[data-theme='dark'] .dashboard-grid .card-item-category {
    color: var(--ds-text-soft);
    border-radius: var(--ds-radius-md);
    border: var(--ds-glass-border);
    background: var(--ds-glass-bg), rgba(18, 31, 54, 0.62);
    box-shadow: var(--ds-shadow-soft);
}

html[data-theme='dark'] .dashboard-grid .row-item,
html[data-theme='dark'] .dashboard-grid .row-item strong,
html[data-theme='dark'] .dashboard-grid .card-title {
    color: var(--ds-text-soft);
}

html[data-theme='dark'] .dashboard-grid .badge {
    color: #fff;
    background: linear-gradient(90deg, var(--ds-secondary-2), var(--ds-secondary-3));
}

html[data-theme='dark'] .dashboard-grid .badge-green {
    background: linear-gradient(90deg, var(--ds-primary-2), var(--ds-primary-3));
}

html[data-theme='dark'] .dashboard-grid .badge-red {
    background: linear-gradient(90deg, var(--ds-danger-2), var(--ds-danger-3));
}

html[data-theme='dark'] hr {
    border-top-color: rgba(174, 193, 220, 0.26);
}

/* ---------------- Movements / Actions index ---------------- */
html[data-theme='dark'] .actions-index {
    background: var(--ds-glass-bg), rgba(16, 28, 50, 0.68) !important;
    border: var(--ds-glass-border);
    border-radius: var(--ds-radius-lg);
}

html[data-theme='dark'] .actions-index .page-title,
html[data-theme='dark'] .actions-index .page-title * {
    color: var(--ds-text-main) !important;
}

html[data-theme='dark'] .actions-index .search-box input {
    color: var(--ds-text-soft) !important;
    background: rgba(10, 20, 37, 0.75) !important;
    border: 1px solid rgba(169, 188, 216, 0.4) !important;
}

html[data-theme='dark'] .actions-index .search-box input::placeholder {
    color: var(--ds-text-muted) !important;
}

html[data-theme='dark'] .actions-index .modern-table table {
    background: rgba(14, 26, 46, 0.72) !important;
    border: 1px solid rgba(170, 189, 217, 0.22);
}

html[data-theme='dark'] .actions-index .modern-table thead th {
    background: rgba(20, 34, 58, 0.9) !important;
    color: var(--ds-text-main) !important;
    border-bottom-color: rgba(170, 189, 217, 0.22) !important;
}

html[data-theme='dark'] .actions-index .modern-table tbody td {
    color: var(--ds-text-soft) !important;
    border-bottom-color: rgba(170, 189, 217, 0.14) !important;
}

html[data-theme='dark'] .actions-index .modern-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme='dark'] .actions-index .modern-table tbody tr:hover {
    background: rgba(93, 169, 233, 0.12) !important;
}

html[data-theme='dark'] .actions-index .badge-complete {
    background: rgba(47, 125, 79, 0.25) !important;
    color: #d9ffe6 !important;
    border-color: rgba(110, 220, 140, 0.45) !important;
}

html[data-theme='dark'] .actions-index .badge-partial {
    background: rgba(232, 111, 81, 0.26) !important;
    color: #ffe7d6 !important;
    border-color: rgba(244, 162, 97, 0.4) !important;
}

html[data-theme='dark'] .actions-index .badge-loan {
    background: rgba(63, 127, 209, 0.27) !important;
    color: #e1eeff !important;
    border-color: rgba(93, 169, 233, 0.42) !important;
}

html[data-theme='dark'] .actions-index .action-icon,
html[data-theme='dark'] .actions-index .btn-add {
    filter: brightness(0) invert(1);
}

html[data-theme='dark'] #qrModal .modal-content {
    color: var(--ds-text-soft) !important;
    background: var(--ds-glass-bg), rgba(17, 28, 49, 0.88) !important;
    border: var(--ds-glass-border) !important;
}

html[data-theme='dark'] #qrModal .modal-header h2,
html[data-theme='dark'] #qrModal .qr-info,
html[data-theme='dark'] #qrModal .qr-payload {
    color: var(--ds-text-soft) !important;
}

html[data-theme='dark'] #qrModal .qr-container {
    background: rgba(255, 255, 255, 0.06) !important;
}