/* MIA International School IT Inventory System */
:root {
    --bg: #f4f7fb;
    --surface: #fff;
    --surface-soft: #f8fafc;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --primary: #e91e88;
    --primary-dark: #c2186f;
    --danger: #dc2626;
    --success: #059669;
    --warning: #d97706;
    --purple: #7c3aed;
    --cyan: #0891b2;
    --nav: #0f172a;
    --shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --radius: 18px
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--bg)
}

button,
input,
select,
textarea {
    font-family: inherit
}

button {
    border: 0;
    background: var(--primary);
    color: #fff;
    padding: .7rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease
}

button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px)
}

button:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}

.btn-secondary {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border)
}

.btn-secondary:hover {
    background: var(--surface-soft);
    color: var(--text)
}

.btn-danger {
    background: var(--danger);
    color: #fff
}

.btn-danger:hover {
    background: #b91c1c
}

.icon-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1
}

.icon-btn:hover {
    background: var(--surface-soft);
    color: var(--text)
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px 1fr
}

.sidebar {
    background: var(--nav);
    color: #fff;
    padding: 1.4rem;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column
}

.sidebar-footer {
    margin-top: auto;
    display: grid;
    gap: .6rem
}

.sidebar-user {
    width: 100%;
    text-align: left;
    padding: .7rem .85rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: #94a3b8;
    font-size: .78rem;
    line-height: 1.35;
    cursor: pointer;
    transition: .2s ease;
    word-break: break-word
}

.sidebar-user:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff
}

.sidebar-user strong {
    display: block;
    margin-top: .15rem;
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .01em
}

.sidebar-user-hint {
    display: block;
    margin-top: .3rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--primary);
    opacity: .9
}

.backup-box {
    display: grid;
    gap: .45rem;
    padding: .7rem .85rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px
}

.backup-last {
    color: #cbd5e1;
    font-size: .72rem;
    line-height: 1.35;
    word-break: break-word
}

.backup-now-btn {
    width: 100%;
    padding: .5rem .6rem;
    font-size: .8rem
}

.brand {
    display: flex;
    gap: .9rem;
    align-items: center;
    margin-bottom: 2rem
}

.brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    object-fit: contain;
    background: #fff;
    padding: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22)
}

.brand h1 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25
}

.brand p {
    margin: .2rem 0 0;
    color: #cbd5e1;
    font-size: .82rem
}

.nav-menu {
    display: grid;
    gap: .6rem
}

.nav-link {
    width: 100%;
    text-align: left;
    background: transparent;
    color: #cbd5e1;
    border-radius: 14px
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, .1);
    color: #fff
}

.main-area {
    min-width: 0;
    padding: 1.5rem
}

.topbar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
    position: relative
}

.topbar h2 {
    margin: 0;
    font-size: 1.4rem
}

.topbar p {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: .9rem
}

.topbar>div:first-of-type {
    flex: 1;
    text-align: center
}

.topbar .btn-secondary:first-child {
    flex: 0 0 auto
}

.topbar #auth-container {
    flex: 0 0 auto
}

#auth-container {
    display: flex;
    align-items: center;
    gap: .75rem
}

#login-form {
    display: flex;
    align-items: center;
    gap: .55rem
}

#login-form input {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .7rem;
    min-width: 180px
}

#admin-status {
    display: none;
    align-items: center;
    gap: .7rem;
    color: var(--success);
    font-weight: 800
}

.view {
    display: none
}

.active-view {
    display: block
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden
}

.stat-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -30px;
    bottom: -30px;
    border-radius: 999px;
    opacity: .15;
    background: currentColor
}

.stat-card span {
    color: var(--muted);
    font-weight: 700;
    font-size: .82rem
}

.stat-card strong {
    display: block;
    margin-top: .5rem;
    font-size: 2rem
}

.blue {
    color: var(--primary)
}

.green {
    color: var(--success)
}

.cyan {
    color: var(--cyan)
}

.amber {
    color: var(--warning)
}

.red {
    color: var(--danger)
}

.purple {
    color: var(--purple)
}

.dashboard-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow)
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem
}

.panel-header h3 {
    margin: 0
}

.list {
    display: grid;
    gap: .65rem
}

.list button {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem;
    width: 100%;
    color: var(--text);
    text-align: left
}

.list button:hover {
    background: #fdf2f8;
    color: var(--text)
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
    margin-bottom: 1rem
}

.toolbar input,
.toolbar select {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem;
    background: #fff;
    color: var(--text)
}

.toolbar input {
    flex: 1 1 320px
}

.toolbar select {
    width: auto;
    min-width: 150px
}

.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: auto;
    box-shadow: var(--shadow)
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1080px
}

th,
td {
    padding: .95rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle
}

th {
    background: var(--surface-soft);
    color: #556174;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em
}

tbody tr:hover {
    background: #fff7fb
}

.center-cell {
    text-align: center;
    vertical-align: middle
}

.wrap-cell {
    word-break: break-word;
    line-height: 1.25
}

#assets-table th {
    text-align: center
}

#assets-table td {
    font-size: 1rem
}

#loading,
.empty-state {
    text-align: center;
    padding: 2.5rem;
    color: var(--muted);
    font-weight: 700
}

.asset-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff !important;
    border-radius: 14px;
    padding: .85rem 1rem;
    min-width: 112px;
    min-height: 60px;
    text-decoration: none;
    line-height: 1.15
}

.asset-link:hover {
    background: var(--primary-dark);
    text-decoration: none;
    transform: translateY(-1px)
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap
}

.status-available {
    color: #047857;
    background: #d1fae5
}

.status-in-use {
    color: #1d4ed8;
    background: #dbeafe
}

.status-maintenance {
    color: #b45309;
    background: #fef3c7
}

.status-lost,
.status-disposed,
.status-broken {
    color: #b91c1c;
    background: #fee2e2
}

.status-unknown {
    color: #374151;
    background: #e5e7eb
}

.warranty-ok {
    color: var(--success);
    font-weight: 800
}

.warranty-warning {
    color: var(--warning);
    font-weight: 800
}

.warranty-expired {
    color: var(--danger);
    font-weight: 800
}

.btn-action {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    padding: .45rem .65rem;
    border-radius: 10px;
    font-size: .82rem;
    margin: .15rem
}

.btn-action:hover {
    background: var(--surface-soft);
    color: var(--text);
    transform: translateY(-1px)
}

.btn-action.danger {
    color: var(--danger)
}

.qr-thumb {
    width: 54px;
    height: 54px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    display: block;
    margin: 0 auto .4rem
}

.qr-large {
    width: 190px;
    height: 190px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    padding: 8px
}

.asset-url-box {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem;
    word-break: break-all;
    font-size: .85rem;
    color: var(--muted)
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.modal-overlay.show {
    display: flex
}

.modal-content {
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    overflow: auto;
    background: var(--surface);
    border-radius: 22px;
    padding: 1.2rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .25)
}

.large-modal {
    max-width: 980px
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem
}

.modal-header h2 {
    margin: 0
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.form-grid.two {
    grid-template-columns: repeat(2, 1fr)
}

.form-group.full-width,
.full-width {
    grid-column: 1/-1
}

.form-grid label {
    display: grid;
    gap: .4rem;
    font-weight: 800;
    font-size: .85rem
}

.form-grid label input,
.form-grid label select,
.form-grid label textarea,
.form-group input,
.form-group select,
.form-group textarea {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .72rem;
    background: #fff;
    color: var(--text);
    outline: none
}

.form-grid label input:focus,
.form-grid label select:focus,
.form-grid label textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(233, 30, 136, .12)
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .7rem;
    margin-top: 1.1rem
}

.drawer {
    position: fixed;
    top: 0;
    right: -540px;
    width: 520px;
    max-width: 100%;
    height: 100vh;
    background: var(--surface);
    z-index: 1200;
    transition: .25s ease;
    box-shadow: -20px 0 60px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column
}

.drawer.open {
    right: 0
}

.drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 1100
}

.drawer-backdrop.show {
    display: block
}

.drawer-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 1rem
}

.drawer-content {
    padding: 1rem;
    overflow: auto
}

.detail-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--border)
}

.detail-row span {
    color: var(--muted);
    font-weight: 700
}

.detail-row strong {
    word-break: break-word
}

.small-item {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .75rem
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

.report-card {
    background: var(--surface-soft);
    color: var(--text);
    border: 1px solid var(--border);
    text-align: left;
    padding: 1rem;
    min-height: 120px
}

.report-card:hover {
    background: #fdf2f8;
    color: var(--text)
}

.report-card strong {
    display: block;
    margin-bottom: .5rem
}

.report-card span {
    color: var(--muted);
    font-weight: 600
}

.toast {
    visibility: hidden;
    position: fixed;
    z-index: 2000;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--success);
    color: #fff;
    padding: .75rem 1rem;
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-weight: 800;
    max-width: calc(100% - 32px)
}

.toast.show {
    visibility: visible
}

.toast.error {
    background: var(--danger)
}

.toast.info {
    background: var(--primary)
}

.hidden {
    display: none !important
}

.back-btn,
#back-btn {
    white-space: nowrap
}

.dashboard-filter:hover,
.dash:hover,
.breakdown-button:hover,
.list button:hover,
.chart-row.clickable:hover,
.report-card:hover,
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12)
}

.dash,
.stat-card {
    cursor: pointer
}

.dash:hover {
    background: var(--surface)
}

#advanced-filters.panel,
.advanced-filters {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
    margin-bottom: 1rem
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

.filter-grid input,
.filter-grid select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .72rem;
    background: #fff;
    color: var(--text);
    outline: none
}

.filter-grid input:focus,
.filter-grid select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(233, 30, 136, .12)
}

.active-filter-note {
    background: #fdf2f8;
    border: 1px solid #fbcfe8;
    color: #9d174d;
    border-radius: 14px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 800
}

.audit-filters {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .7rem;
    margin-bottom: 1rem
}

.audit-filters input,
.audit-filters select {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem;
    background: #fff;
    color: var(--text)
}

.audit-filters input:focus,
.audit-filters select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(233, 30, 136, .12)
}

.clickable-row {
    cursor: pointer
}

.clickable-row:hover {
    background: #fff7fb
}

@media(max-width:1180px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .dashboard-panels {
        grid-template-columns: 1fr
    }

    .report-grid {
        grid-template-columns: 1fr 1fr
    }

    .filter-grid,
    .audit-filters {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:860px) {
    .app-shell {
        grid-template-columns: 1fr
    }

    .sidebar {
        position: static;
        height: auto
    }

    .nav-menu {
        grid-template-columns: repeat(2, 1fr)
    }

    .topbar {
        flex-direction: column;
        align-items: stretch
    }

    .topbar>div:first-of-type {
        text-align: left
    }

    #login-form {
        width: 100%
    }

    #login-form input {
        flex: 1;
        min-width: 0
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .form-grid,
    .form-grid.two {
        grid-template-columns: 1fr
    }

    .toolbar select {
        width: 100%
    }

    .filter-grid,
    .audit-filters {
        grid-template-columns: 1fr
    }
}

@media(max-width:520px) {
    .main-area {
        padding: 1rem
    }

    .dashboard-grid {
        grid-template-columns: 1fr
    }

    .modal-actions {
        flex-direction: column-reverse
    }

    .modal-actions button {
        width: 100%
    }

    .detail-row {
        grid-template-columns: 1fr;
        gap: .25rem
    }
}


/* Added: consumable workflow filters, checkbox layout, and loader visibility. Existing UI styles are kept. */
.global-loader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(15, 23, 42, .32);
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.global-loader.show {
    display: flex
}

.loader-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--text)
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #f3c1dc;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.panel-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    justify-content: flex-end
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: .55rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .72rem;
    margin-top: 1.25rem
}

.checkbox-label input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary)
}

.consumable-filters {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .7rem;
    margin-bottom: 1rem
}

.consumable-filters input {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem;
    background: #fff;
    color: var(--text)
}

.consumable-filters input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(233, 30, 136, .12)
}

.muted-text {
    color: var(--muted);
    font-weight: 800
}

@media(max-width:1180px) {
    .consumable-filters {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:860px) {
    .panel-actions {
        justify-content: flex-start
    }

    .consumable-filters {
        grid-template-columns: 1fr
    }

    .audit-filters {
        grid-template-columns: 1fr
    }
}

/* Consumable Header Layout */

.consumable-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.consumable-title-search {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.consumable-title-search h3 {
    margin: 0;
    white-space: nowrap;
}

.consumable-title-search input {
    max-width: 400px;
    width: 100%;
}

/* Now only 6 filter columns */
.consumable-filters {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

@media (max-width:1200px) {
    .consumable-filters {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:768px) {

    .consumable-title-search {
        flex-direction: column;
        align-items: stretch;
    }

    .consumable-filters {
        grid-template-columns: 1fr;
    }
}

/* === Assigned Users ready-to-run styles === */
.assigned-users-header,.maintenance-header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.assigned-users-title-search,.maintenance-title-search,.consumable-title-search{display:flex;align-items:center;gap:16px;flex:1}
.assigned-users-title-search h3,.maintenance-title-search h3,.consumable-title-search h3{margin:0;white-space:nowrap}
.assigned-users-title-search input,.maintenance-title-search input,.consumable-title-search input{max-width:430px;width:100%;border:1px solid var(--border);border-radius:999px;padding:.78rem 1rem .78rem 2.55rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center;color:var(--text);outline:none;box-shadow:0 8px 18px rgba(15,23,42,.04);transition:.2s ease}
.assigned-users-title-search input:focus,.maintenance-title-search input:focus,.consumable-title-search input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(233,30,136,.12),0 12px 26px rgba(15,23,42,.08)}
.assigned-workspace{display:grid;grid-template-columns:1fr 2fr;gap:1rem;margin-bottom:1rem}
.assigned-card{background:var(--surface-soft);border:1px solid var(--border);border-radius:16px;padding:1rem}
.assigned-card h4{margin:0 0 .75rem}.inline-form,.assigned-form-grid,.assigned-user-filters,.maintenance-filters{display:grid;gap:.75rem}
.inline-form{grid-template-columns:1fr 1fr auto}.assigned-form-grid{grid-template-columns:repeat(4,minmax(160px,1fr))}.assigned-user-filters,.maintenance-filters{grid-template-columns:repeat(6,minmax(160px,1fr));margin-bottom:1rem}
.inline-form input,.assigned-form-grid input,.assigned-user-filters input,.assigned-user-filters select,.maintenance-filters input,.maintenance-filters select{border:1px solid var(--border);border-radius:12px;padding:.75rem;background:#fff;color:var(--text);outline:none}
.inline-form input:focus,.assigned-form-grid input:focus,.assigned-user-filters input:focus,.assigned-user-filters select:focus,.maintenance-filters input:focus,.maintenance-filters select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(233,30,136,.12)}
.assigned-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem}.assigned-summary-grid .small-item{display:grid;grid-template-columns:1fr auto;align-items:center}
.detail-section{margin-top:1rem}.detail-section h3{margin:0 0 .7rem;font-size:1rem}.assignment-history,.maintenance-history{display:grid;gap:.75rem}
.assignment-history-item,.maintenance-history-item{background:var(--surface-soft);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:14px;padding:.85rem}
.assignment-history-item div,.maintenance-history-item div{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.45rem}.assignment-history-item strong,.maintenance-history-item strong{color:var(--primary)}
.assignment-history-item span,.assignment-history-item small,.assignment-history-item em,.maintenance-history-item span,.maintenance-history-item small,.maintenance-history-item em{color:var(--muted)}
.assignment-history-item p,.maintenance-history-item p{margin:.2rem 0 .45rem;line-height:1.35}.assignment-history-item small,.assignment-history-item em,.maintenance-history-item small,.maintenance-history-item em{display:block;margin-top:.25rem;font-size:.82rem}
@media(max-width:1180px){.assigned-workspace{grid-template-columns:1fr}.assigned-form-grid,.assigned-user-filters,.maintenance-filters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.assigned-users-title-search,.maintenance-title-search,.consumable-title-search{width:100%;align-items:stretch;flex-direction:column}.assigned-users-title-search input,.maintenance-title-search input,.consumable-title-search input{max-width:none}.inline-form,.assigned-form-grid,.assigned-user-filters,.maintenance-filters,.assigned-summary-grid{grid-template-columns:1fr}}


/* === Assigned Users layout and assignment actions fix - 17 Jul 2026 === */
.assigned-users-panel{max-width:100%;overflow:hidden}
.assigned-users-header{align-items:center}
.assigned-workspace{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:1rem;align-items:start;width:100%}
.assigned-card{min-width:0;overflow:hidden}
.inline-form{display:grid;grid-template-columns:1fr;gap:.75rem}
.inline-form input,.inline-form button{width:100%;min-width:0}
.inline-form button{min-height:52px}
.assigned-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;width:100%;min-width:0}
.assigned-form-grid input,.assigned-form-grid button{width:100%;min-width:0}
.assigned-form-grid button{grid-column:auto;min-height:52px}
.assigned-user-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;width:100%}
.assigned-users-table-card{width:100%;overflow:auto}
.assigned-users-table-card table{min-width:1300px}
.assigned-users-table-card th,.assigned-users-table-card td{padding:.82rem .7rem;vertical-align:middle}
.assigned-users-table-card th:first-child,.assigned-users-table-card td:first-child{min-width:130px}
.assigned-users-table-card th:nth-child(2),.assigned-users-table-card td:nth-child(2){min-width:110px}
.assigned-users-table-card th:nth-child(3),.assigned-users-table-card td:nth-child(3){min-width:130px}
.assigned-users-table-card th:nth-child(4),.assigned-users-table-card td:nth-child(4){min-width:130px}
.assigned-users-table-card th:nth-child(6),.assigned-users-table-card td:nth-child(6),.assigned-users-table-card th:nth-child(7),.assigned-users-table-card td:nth-child(7){min-width:135px}
.assigned-users-table-card th:last-child,.assigned-users-table-card td:last-child{min-width:220px}
.asset-actions{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:flex-start}
.asset-actions .btn-action{margin:0}
.status-available{background:#dcfce7;color:#065f46}
.status-in-use{background:#dbeafe;color:#1d4ed8}
.status-maintenance{background:#fef3c7;color:#92400e}
.status-broken,.status-lost,.status-disposed{background:#fee2e2;color:#991b1b}
.status-unknown{background:#e5e7eb;color:#374151}
#assignment-modal .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#assignment-modal textarea{min-height:90px;resize:vertical}
@media(max-width:1280px){.assigned-workspace{grid-template-columns:1fr}.assigned-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.assigned-user-filters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.assigned-form-grid,.assigned-user-filters,#assignment-modal .form-grid{grid-template-columns:1fr}.assigned-summary-grid{grid-template-columns:1fr}}

/* Assigned Users PDF + summary card fixes */
.assigned-stat-card{cursor:pointer;transition:.2s ease}
.assigned-stat-card:hover{background:#fdf2f8;transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.08)}
.assigned-stat-card:focus{outline:3px solid rgba(233,30,136,.25);outline-offset:2px}

/* === User Management (accounts) + username login + labeled date filters - 21 Jul 2026 === */
/* Two-field login stays on one line and wraps nicely on small screens */
#login-form input#username-input{min-width:150px}
#login-form input#password-input{min-width:160px}
#admin-status strong{color:var(--success)}

/* Labeled date inputs inside Assets > More Filters (kept: Registered + Buying ranges) */
.filter-date-label{display:grid;gap:.3rem;font-weight:800;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.filter-date-label input{width:100%;border:1px solid var(--border);border-radius:12px;padding:.72rem;background:#fff;color:var(--text);outline:none}
.filter-date-label input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(233,30,136,.12)}

/* User Management header + search (mirrors maintenance/consumable header styling) */
.accounts-header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.accounts-title-search{display:flex;align-items:center;gap:16px;flex:1}
.accounts-title-search h3{margin:0;white-space:nowrap}
.accounts-title-search input{max-width:430px;width:100%;border:1px solid var(--border);border-radius:999px;padding:.78rem 1rem .78rem 2.55rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center;color:var(--text);outline:none;box-shadow:0 8px 18px rgba(15,23,42,.04);transition:.2s ease}
.accounts-title-search input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(233,30,136,.12),0 12px 26px rgba(15,23,42,.08)}
.accounts-header .panel-actions select{border:1px solid var(--border);border-radius:12px;padding:.72rem;background:#fff;color:var(--text);min-width:140px}
.accounts-header .panel-actions select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(233,30,136,.12)}
.accounts-hint{margin:.2rem 0 1rem;color:var(--muted);font-size:.9rem;line-height:1.45}
.accounts-hint strong{color:var(--text)}

/* Permission Yes/No pills in the accounts table */
.perm-yes{display:inline-flex;align-items:center;justify-content:center;background:#dcfce7;color:#065f46;font-weight:800;border-radius:999px;padding:.3rem .7rem;font-size:.78rem}
.perm-no{display:inline-flex;align-items:center;justify-content:center;background:#fee2e2;color:#991b1b;font-weight:800;border-radius:999px;padding:.3rem .7rem;font-size:.78rem}

@media(max-width:768px){
  #login-form{flex-wrap:wrap;justify-content:flex-end}
  .accounts-header .panel-actions{justify-content:flex-start}
}
/* === Expected Return, Overdue toggles, Buy-First, Purchase module, dashboard paging === */
.assign-date-label,.filter-date-label{display:grid;gap:.3rem;font-weight:800;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.assign-date-label input,.filter-date-label input{width:100%;border:1px solid var(--border);border-radius:12px;padding:.72rem;background:#fff;color:var(--text);outline:none}
.assign-date-label input:focus,.filter-date-label input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(233,30,136,.12)}
.full-span{grid-column:1/-1}
.due-returns-list{overflow:auto}
.due-returns-table{width:100%;min-width:600px;border-collapse:collapse}
.due-returns-table th,.due-returns-table td{padding:.7rem .85rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.due-returns-table th{background:var(--surface-soft);color:#556174;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.due-returns-table tr[data-id],.due-returns-table tr[data-req]{cursor:pointer;transition:.15s ease}
.due-returns-table tr[data-id]:hover,.due-returns-table tr[data-req]:hover{background:#fdf2f8}
.count-pill{display:inline-block;background:#fee2e2;color:#991b1b;border-radius:999px;padding:.15rem .6rem;font-size:.72rem;font-weight:800;margin-left:.4rem;vertical-align:middle}
#due-returns-toggle.active,#buy-first-toggle.active,#requests-overdue-toggle.active{background:var(--danger);color:#fff;border-color:var(--danger)}
.dash-pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.85rem}
.dash-pager .pagination-info{color:var(--muted);font-weight:700;font-size:.82rem}
.dash-pager .pagination-nav{display:flex;gap:.3rem;flex-wrap:wrap}
.dash-pager .page-btn{min-width:34px;height:34px;padding:0 .55rem;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:9px;font-weight:700;cursor:pointer}
.dash-pager .page-btn:hover:not(:disabled){background:#fdf2f8}
.dash-pager .page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.dash-pager .page-btn:disabled{opacity:.45;cursor:not-allowed}
/* Purchase module */
.purchase-stats{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:1rem;margin-bottom:1.2rem}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
.chart-panel{height:330px;position:relative}
.chart-panel canvas{max-height:280px;width:100%!important}
.purchase-header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.purchase-title-search{display:flex;align-items:center;gap:16px;flex:1}
.purchase-title-search h3{margin:0;white-space:nowrap}
.purchase-title-search input{max-width:430px;width:100%;border:1px solid var(--border);border-radius:999px;padding:.78rem 1rem;background:#fff;color:var(--text);outline:none}
.purchase-title-search input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(233,30,136,.12)}
.purchase-header .panel-actions select{border:1px solid var(--border);border-radius:12px;padding:.72rem;background:#fff;color:var(--text);min-width:150px}
.priority-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.3rem .7rem;font-size:.74rem;font-weight:800}
.priority-high{background:#fee2e2;color:#991b1b}
.priority-medium{background:#fef3c7;color:#92400e}
.priority-low{background:#dcfce7;color:#065f46}
@media(max-width:1100px){.charts-grid{grid-template-columns:1fr}.purchase-stats{grid-template-columns:repeat(2,1fr)}}

/* === Recycle Bin (deleted / consumed assets) - 23 Jul 2026 === */
.recyclebin-header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.recyclebin-title-search{display:flex;align-items:center;gap:16px;flex:1}
.recyclebin-title-search h3{margin:0;white-space:nowrap}
.recyclebin-title-search input{max-width:430px;width:100%;border:1px solid var(--border);border-radius:999px;padding:.78rem 1rem .78rem 2.55rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center;color:var(--text);outline:none;box-shadow:0 8px 18px rgba(15,23,42,.04);transition:.2s ease}
.recyclebin-title-search input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(233,30,136,.12),0 12px 26px rgba(15,23,42,.08)}
.recycle-filters{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:.7rem;margin-bottom:1rem}
.recycle-filters input,.recycle-filters select{border:1px solid var(--border);border-radius:12px;padding:.75rem;background:#fff;color:var(--text);outline:none}
.recycle-filters input:focus,.recycle-filters select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(233,30,136,.12)}
@media(max-width:1180px){.recycle-filters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.recycle-filters{grid-template-columns:1fr}}

/* ============================================================
   23 Jul 2026: Cleaner top bar — centered title + stacked backup,
   hamburger nav, and full responsiveness
============================================================ */
/* Centered page title regardless of side content widths */
.topbar-title{flex:1;text-align:center;min-width:0}
.topbar-title h2{margin:0}
.topbar-title p{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}

/* Right-side auth cluster: backup group + Log Out, vertically centered */
#admin-status{display:none;align-items:center;gap:.85rem}
/* ★ v6 — Compact backup cluster: gear + Backup Now share ONE row (gear on the
   left), with the small "Last backup / Next daily" line spanning underneath.
   This keeps the frozen top bar slim. */
.topbar-backup{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:end;gap:.2rem .4rem}
.topbar-backup .backup-settings-btn{order:0;grid-row:1;grid-column:1;width:auto;padding:.42rem .5rem;font-size:.95rem;line-height:1}
.topbar-backup .backup-now-btn{grid-row:1;grid-column:2;width:auto;padding:.5rem .9rem;font-size:.82rem}
.topbar-backup .backup-last{grid-row:2;grid-column:1 / -1;color:var(--muted);font-weight:600;font-size:.7rem;line-height:1.15;text-align:right;white-space:normal;max-width:240px;justify-self:end}

/* Hamburger button: hidden on desktop, shown on mobile */
.nav-toggle{display:none;font-size:1.35rem;line-height:1}
.nav-backdrop{display:none}

/* Fluid grids on medium screens */
@media(max-width:1024px){
  .dashboard-panels{grid-template-columns:1fr}
  .charts-grid{grid-template-columns:1fr}
}
@media(max-width:1180px){.audit-filters{grid-template-columns:repeat(3,1fr)}}

/* Phones: stack forms + filters, shrink dashboard/report grids */
@media(max-width:768px){
  .form-grid,.form-grid.two{grid-template-columns:1fr}
  #assignment-modal .form-grid{grid-template-columns:1fr}
  .audit-filters{grid-template-columns:1fr}
}
@media(max-width:560px){
  .dashboard-grid{grid-template-columns:repeat(2,1fr)}
  .report-grid{grid-template-columns:1fr}
  .purchase-stats{grid-template-columns:1fr}
}

/* ===== Mobile navigation drawer (<=860px) ===== */
@media(max-width:860px){
  .app-shell{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:280px;max-width:84vw;transform:translateX(-100%);transition:transform .25s ease;z-index:1300;box-shadow:24px 0 60px rgba(15,23,42,.3)}
  body.nav-open .sidebar{transform:translateX(0)}
  .nav-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1250}
  body.nav-open .nav-backdrop{display:block}
  .main-area{padding:1rem}
  .topbar{flex-wrap:wrap;gap:.6rem}
  .topbar-title{flex:1 1 auto;text-align:center}
  #auth-container{flex:1 1 100%;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
  #login-form{flex-wrap:wrap;width:100%}
  #login-form input{min-width:0;flex:1 1 46%}
  #admin-status{width:100%;justify-content:space-between}
  .topbar-backup{align-items:flex-start}
  .topbar-backup .backup-last{text-align:left}
}
@media(max-width:560px){
  .topbar h2{font-size:1.15rem}
  #login-form input{flex:1 1 100%}
  .modal-content{padding:1rem;border-radius:16px}
  th,td{padding:.7rem}
}
/* Green "Backup Now" button */
#backup-now-btn.backup-now-btn {
    background: var(--success);
    color: #fff;
    border: 1px solid var(--success);
}

#backup-now-btn.backup-now-btn:hover {
    background: #047857;   /* slightly darker green on hover */
    border-color: #047857;
    color: #fff;
}
/* ===== 23 Jul 2026: mobile responsiveness hardening ===== */
html,body{max-width:100%;overflow-x:clip}
.app-shell{max-width:100vw;overflow-x:clip}
.main-area{min-width:0;max-width:100%}
.view{min-width:0}
.table-card,.due-returns-list{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}

@media(max-width:1024px){.dashboard-panels{grid-template-columns:1fr}.charts-grid{grid-template-columns:1fr}}
@media(max-width:768px){
  .form-grid,.form-grid.two{grid-template-columns:1fr}
  #assignment-modal .form-grid{grid-template-columns:1fr}
  .audit-filters{grid-template-columns:1fr}
}
@media(max-width:560px){
  .dashboard-grid{grid-template-columns:repeat(2,1fr)}
  .report-grid{grid-template-columns:1fr}
  .purchase-stats{grid-template-columns:1fr}
}

/* Clean top bar on phones */
@media(max-width:860px){
  .main-area{padding:1rem}
  .topbar{flex-wrap:wrap;gap:.5rem .6rem;align-items:center}
  .back-btn{padding:.5rem .8rem}
  .topbar-title{flex:1 1 auto;text-align:center;min-width:0}
  #auth-container{flex:1 1 100%;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem}
  #admin-status{width:100%;justify-content:space-between}
  .topbar-backup{flex-direction:row;align-items:center;gap:.5rem;flex-wrap:wrap}
  .topbar-backup .backup-last{text-align:left;max-width:none}
}
@media(max-width:560px){
  .topbar h2{font-size:1.15rem}
  #login-form input{flex:1 1 100%}
  .modal-content{padding:1rem;border-radius:16px}
  th,td{padding:.7rem}
}
/* ===== FIX: Dashboard panels fit width so values show beside labels (24 Jul 2026) ===== */
#dashboard-view .dashboard-panels { width: 100%; max-width: 100%; }

/* Each panel must be allowed to shrink inside the grid (not overflow) */
#dashboard-view .panel { min-width: 0; max-width: 100%; overflow: hidden; }

/* Label-left / value-right rows: keep both visible, let the label shrink */
#dashboard-view .panel .detail-row,
#dashboard-view .panel li,
#dashboard-view .panel .panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* The text label can truncate; the value stays fully visible on the right */
#dashboard-view .panel .detail-row > span:first-child,
#dashboard-view .panel .panel-row > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashboard-view .panel .detail-row > *:last-child,
#dashboard-view .panel .panel-row > *:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* ===== FIX: restore full-height sticky sidebar (24 Jul 2026) ===== */
/* Keep horizontal-scroll control on the page, NOT on the sticky parent */
.app-shell { overflow: visible; max-width: none; }
html, body { overflow-x: clip; }

/* Desktop: pin the sidebar so it always fills the viewport height */
@media (min-width: 861px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
    overflow-y: auto;
  }
}
/* ============================================================
   ★ 24 Jul 2026 — MOBILE UX OVERHAUL (authoritative, last block)
   Real-world responsive patterns for a data-heavy admin app:
     1) Wide tables become stacked "cards" on phones (no more
        sideways scrolling) using each column header as a label.
     2) Every filter/form grid collapses to a single column.
     3) Touch targets >= 44px (Apple/Google HIG).
     4) Cleaner, wrapping top bar + full-width drawer & modals.
   Everything here is gated to small screens, so the desktop
   layout is completely unchanged.
============================================================ */

/* ---- Global safety: never allow the page to scroll sideways ---- */
*{ -webkit-tap-highlight-color: rgba(233,30,136,.15); }
html,body{ overflow-x:clip; }
img,canvas,svg{ max-width:100%; }

/* ============================================================
   TABLET (<=1024px): sensible column counts, tables still scroll
============================================================ */
@media (max-width:1024px){
  .dashboard-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .purchase-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .filter-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .report-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================================================
   PHONES / SMALL TABLETS (<=768px)
   Turn each data table into a vertical list of cards.
============================================================ */
@media (max-width:768px){

  /* ---------- Layout & spacing ---------- */
  .main-area{ padding:.85rem; }
  .view{ min-width:0; }
  .toolbar{ gap:.55rem; }

  /* Dashboard KPIs: two per row (numbers first, per mobile best practice) */
  .dashboard-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .stat-card{ padding:.85rem; }
  .stat-card strong{ font-size:1.55rem; }

  /* Every multi-column control grid becomes a single column */
  .dashboard-panels,
  .charts-grid,
  .filter-grid,
  .audit-filters,
  .consumable-filters,
  .recycle-filters,
  .assigned-user-filters,
  .maintenance-filters,
  .assigned-form-grid,
  .inline-form,
  .assigned-summary-grid,
  .report-grid,
  .purchase-stats,
  .form-grid,
  .form-grid.two,
  #assignment-modal .form-grid{
    grid-template-columns:1fr !important;
  }

  /* Section header rows (title + search + actions) stack neatly */
  .panel-header,
  .accounts-header,
  .assigned-users-header,
  .maintenance-header,
  .consumable-header,
  .recyclebin-header,
  .purchase-header{
    flex-direction:column;
    align-items:stretch;
    gap:.75rem;
  }
  .accounts-title-search,
  .assigned-users-title-search,
  .maintenance-title-search,
  .consumable-title-search,
  .recyclebin-title-search,
  .purchase-title-search{
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
  }
  .accounts-title-search input,
  .assigned-users-title-search input,
  .maintenance-title-search input,
  .consumable-title-search input,
  .recyclebin-title-search input,
  .purchase-title-search input{ max-width:none; width:100%; }
  .panel-actions{ justify-content:stretch; flex-wrap:wrap; }
  .panel-actions > *{ flex:1 1 auto; }

  /* Toolbar controls: comfortable, full-width, easy to tap */
  .toolbar input,
  .toolbar select{ flex:1 1 100%; min-width:0; width:100%; }

  /* Touch targets: minimum 44px tall */
  button,
  .btn-secondary,
  .btn-danger,
  .nav-link,
  .toolbar input,
  .toolbar select,
  .filter-grid input,
  .filter-grid select,
  input,
  select{ min-height:44px; }
  .btn-action{ min-height:40px; padding:.5rem .8rem; font-size:.85rem; }

  /* ---------- The star: table -> cards ---------- */
  .table-card{
    background:transparent;
    border:0;
    box-shadow:none;
    overflow:visible;      /* no sideways scroll */
    padding:0;
  }
  .table-card table,
  .assigned-users-table-card table{
    min-width:0 !important;   /* cancel the desktop min-width:1080px */
    width:100%;
    border-collapse:collapse;
  }
  /* Visually hide the header row but keep it for screen readers */
  .table-card thead{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .table-card tbody tr{
    display:block;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    margin:0 0 1rem;
    padding:.35rem .95rem;
  }
  .table-card tbody tr:hover{ background:var(--surface); }
  .table-card tbody tr td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    text-align:right;
    padding:.6rem 0;
    border-bottom:1px solid var(--border);
    min-width:0;
    white-space:normal;
    word-break:break-word;
  }
  .table-card tbody tr td:last-child{ border-bottom:0; }
  /* Column header becomes the label on the left of each row */
  .table-card tbody tr td::before{
    content:attr(data-label);
    flex:0 0 42%;
    text-align:left;
    font-weight:800;
    font-size:.68rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
  }
  /* Cells that carry no label (spacer) hide the label slot */
  .table-card tbody tr td[data-label=""]::before{ content:""; }
  /* Empty-state / "no records" rows: single full-width centered line */
  .table-card tbody tr td[colspan]{
    display:block;
    text-align:center;
    padding:1.5rem .5rem;
    color:var(--muted);
    font-weight:700;
  }
  .table-card tbody tr td[colspan]::before{ content:""; display:none; }
  /* Center-aligned desktop cells read better left-labelled in cards */
  .table-card tbody tr td.center-cell{ text-align:right; }

  /* Action & QR cells: label on top, controls wrap below full width */
  .table-card tbody tr td.action-cell,
  .table-card tbody tr td.admin-col,
  .table-card tbody tr td.manage-col,
  .table-card tbody tr td.qr-cell,
  .table-card tbody tr td.consume-cell{
    flex-direction:column;
    align-items:stretch;
    text-align:left;
    gap:.5rem;
  }
  .table-card tbody tr td.action-cell::before,
  .table-card tbody tr td.admin-col::before,
  .table-card tbody tr td.manage-col::before,
  .table-card tbody tr td.qr-cell::before,
  .table-card tbody tr td.consume-cell::before{ flex:none; }
  .table-card .asset-actions{ width:100%; justify-content:flex-start; }
  .table-card .asset-actions .btn-action{ flex:1 1 auto; text-align:center; }
  .table-card td.qr-cell .qr-thumb{ margin:0; }

  /* Dashboard "Assets Due for Return" / "Buy First" mini-tables -> cards */
  .due-returns-list{ overflow:visible; }
  .due-returns-table{ min-width:0 !important; width:100%; }
  .due-returns-table thead{
    position:absolute; width:1px; height:1px; margin:-1px;
    padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0);
  }
  .due-returns-table tbody{ display:block; }
  .due-returns-table tbody tr{
    display:block;
    border:1px solid var(--border);
    border-radius:14px;
    margin-bottom:.75rem;
    padding:.3rem .8rem;
    background:var(--surface-soft);
  }
  .due-returns-table tbody td{
    display:flex; justify-content:space-between; align-items:center;
    gap:1rem; text-align:right; padding:.5rem 0;
    border-bottom:1px solid var(--border);
  }
  .due-returns-table tbody tr td:last-child{ border-bottom:0; }
  .due-returns-table tbody td::before{
    content:attr(data-label);
    font-weight:800; font-size:.66rem; letter-spacing:.04em;
    text-transform:uppercase; color:var(--muted);
    text-align:left; flex:0 0 40%;
  }

  /* ---------- Detail drawer: full width sheet ---------- */
  .drawer{ width:100%; right:-100%; }
  .detail-row{ grid-template-columns:1fr; gap:.2rem; }

  /* ---------- Modals: near full-screen sheets ---------- */
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal-content,
  .large-modal{
    max-width:100%;
    width:100%;
    max-height:94vh;
    border-radius:20px 20px 0 0;
    padding:1.1rem;
  }
  .modal-actions{ position:sticky; bottom:0; background:var(--surface);
    padding-top:.8rem; margin-top:.8rem; }
  .modal-actions button{ flex:1 1 auto; }

  /* ---------- Top bar ---------- */
  .topbar{ flex-wrap:wrap; gap:.55rem; padding:.85rem; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .topbar-title{ order:3; flex:1 1 100%; text-align:center; }
  .topbar h2{ font-size:1.2rem; }
  #auth-container{ flex:1 1 100%; }
  #login-form{ width:100%; flex-wrap:wrap; gap:.5rem; }
  #login-form input{ flex:1 1 100%; min-width:0; }
  #login-form button{ flex:1 1 100%; }
  #admin-status{ width:100%; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
  .topbar-backup{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:.4rem .6rem; }
  .topbar-backup .backup-last{ text-align:left; max-width:none; }

  /* Pagination stays centered & tappable */
  .pagination{ justify-content:center; }
  .pagination .page-btn{ min-width:44px; height:44px; }
}

/* ============================================================
   SMALL PHONES (<=430px): final polish
============================================================ */
@media (max-width:430px){
  .dashboard-grid{ grid-template-columns:1fr; }
  .stat-card strong{ font-size:1.7rem; }
  .brand h1{ font-size:.95rem; }
  .table-card tbody tr td{ font-size:.92rem; }
  .table-card tbody tr td::before{ flex-basis:46%; }
  .main-area{ padding:.7rem; }
}

/* ============================================================
   ★ 24 Jul 2026 — DESKTOP FROZEN SIDEBAR (CORRECTED)
   The sidebar previously used position:sticky, but the
   `overflow-x:hidden` on html/body (needed to stop mobile
   sideways-scroll) silently BREAKS position:sticky, so the
   menu scrolled away leaving empty dark space.

   A first attempt used position:fixed but left the grid in
   place — because a fixed element leaves the grid flow, the
   main content slid UNDERNEATH the sidebar.

   Correct fix (what real dashboards do): on desktop, drop the
   grid layout, pin the sidebar with position:fixed at 280px,
   and push the content right with margin-left:280px. This is
   independent of flow, so the content always sits beside the
   frozen sidebar and nothing overlaps.
============================================================ */
@media (min-width:861px){
  .app-shell{
    display:block;          /* stop grid from placing main-area in col 1 */
    overflow:visible;       /* never clip the fixed child */
    max-width:none;
  }
  .sidebar{
    position:fixed;         /* truly frozen while the page scrolls */
    top:0;
    left:0;
    width:280px;            /* same width as the old grid column */
    height:100vh;
    overflow-y:auto;        /* long menus scroll inside the sidebar */
    z-index:100;            /* below modals/drawers (1000+) */
  }
  .main-area{
    margin-left:280px;      /* reserve room so content sits beside sidebar */
    min-width:0;
  }
}

/* ============================================================
   ★ 24 Jul 2026 — ABOUT & GUIDELINES styles
   Self-contained, responsive, scoped so it never affects other views.
   The About table uses its own class so the global `table{min-width:1080px}`
   rule does NOT apply to it (prevents overflow on phones).
============================================================ */
.about-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
#about-view .about-content{display:grid;gap:1.25rem}

.about-hero{background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border-radius:var(--radius);padding:1.6rem 1.5rem;box-shadow:var(--shadow)}
.about-hero h2{margin:0 0 .4rem;font-size:1.6rem;line-height:1.25}
.about-hero p{margin:0;opacity:.96;line-height:1.55;max-width:75ch}
.about-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.about-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);padding:.35rem .75rem;border-radius:999px;font-size:.78rem;font-weight:700}

.about-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.about-meta{background:var(--surface-soft);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:14px;padding:1rem}
.about-meta span{display:block;color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.about-meta strong{display:block;margin-top:.35rem;font-size:1.05rem}

.about-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.about-section h3{margin:0 0 .9rem;font-size:1.15rem;border-bottom:2px solid var(--border);padding-bottom:.5rem}

.about-feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.about-feature{background:var(--surface-soft);border:1px solid var(--border);border-radius:14px;padding:.9rem}
.about-feature strong{display:block;margin-bottom:.3rem;color:var(--primary)}
.about-feature span{color:var(--muted);font-size:.88rem;line-height:1.45}

.about-dodont{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about-do,.about-dont{border-radius:14px;padding:1rem;border:1px solid var(--border)}
.about-do{background:#ecfdf5;border-color:#a7f3d0}
.about-dont{background:#fef2f2;border-color:#fecaca}
.about-do h4,.about-dont h4{margin:0 0 .6rem;font-size:1rem}
.about-do h4{color:#065f46}
.about-dont h4{color:#991b1b}
.about-do ul,.about-dont ul{margin:0;padding-left:1.15rem;line-height:1.6}
.about-do li,.about-dont li{margin-bottom:.4rem}

.about-policy{margin:0;padding-left:1.15rem;line-height:1.7}
.about-policy li{margin-bottom:.4rem}

.about-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:14px}
.about-id-table{width:100%;min-width:0;border-collapse:collapse}
.about-id-table th,.about-id-table td{padding:.7rem .85rem;border-bottom:1px solid var(--border);text-align:left}
.about-id-table tbody tr:last-child td{border-bottom:0}
.about-id-table th{background:var(--surface-soft);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:#556174}
.about-id-table code,.about-note code{background:var(--surface-soft);border:1px solid var(--border);border-radius:6px;padding:.15rem .4rem;font-size:.85rem}

.about-note{color:var(--muted);font-size:.9rem;line-height:1.55;margin:.25rem 0 1rem}
.about-editing{outline:3px dashed var(--primary);outline-offset:6px;border-radius:12px}
.about-editing:focus{outline-color:var(--primary-dark)}

@media (max-width:768px){
  .about-meta-grid{grid-template-columns:1fr}
  .about-dodont{grid-template-columns:1fr}
  .about-hero{padding:1.25rem 1.1rem}
  .about-hero h2{font-size:1.3rem}
  #about-view .about-content{gap:1rem}
}

/* ============================================================
   ★ 26 Jul 2026 — Detail drawer "history loading" placeholder
   Shown in the Assigned User / Maintenance history sections while
   the QR fast-path loads those datasets in the background, so users
   see "Loading…" instead of a misleading "No records found".
============================================================ */
.history-loading{
  display:flex;align-items:center;gap:.6rem;
  color:var(--muted);font-weight:700;font-style:italic;
  animation:history-pulse 1.2s ease-in-out infinite;
}
.history-loading::before{
  content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:2px solid #f3c1dc;border-top-color:var(--primary);
  animation:spin .8s linear infinite;
}
@keyframes history-pulse{0%,100%{opacity:.65}50%{opacity:1}}

/* ============================================================
   ★ 26 Jul 2026 — ACTIVE FILTER HIGHLIGHTING
   Any filter whose value is not the default gets a clear pink
   outline + tint so the user always knows a filter is applied.
   (Toggled by the "ACTIVE FILTER HIGHLIGHTING" module in script.js.)
============================================================ */
input.filter-active,
select.filter-active,
.filter-active {
  border-color: var(--primary) !important;
  background-color: #fff0f7 !important;
  box-shadow: 0 0 0 3px rgba(233, 30, 136, .18) !important;
  color: var(--primary-dark) !important;
  font-weight: 800;
}
select.filter-active { background-color: #fff0f7 !important; }
.filter-active::placeholder { color: var(--primary-dark); opacity: .7; }

/* Next-backup countdown line in the top bar */
.backup-next { color: var(--primary); font-weight: 800; }

/* ============================================================
   ★ 26 Jul 2026 — MOBILE TOP BAR REDESIGN (authoritative, last block)
   Real mobile-app pattern (à la Facebook): a clean, sticky app bar
   with the school logo + name always visible, a hamburger on the
   left, the page title as its own heading line, and the Backup /
   Log Out actions arranged in one tidy row instead of a cluttered
   pile. Desktop is untouched (the brand here is hidden on desktop
   because the sidebar already shows the logo).
============================================================ */
.topbar-brand { display: none; }              /* desktop: sidebar owns the logo */
.topbar-logo {
  width: 34px; height: 34px; border-radius: 9px; object-fit: contain;
  background: #fff; padding: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  flex: 0 0 auto;
}
.topbar-brand-name {
  font-weight: 800; font-size: 1rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 860px) {
  /* Sticky, rounded app bar */
  .topbar {
    position: sticky; top: 0; z-index: 130;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .5rem .6rem;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
  }
  /* Row 1: hamburger + logo/name (+ optional Back) */
  .topbar .nav-toggle {
    order: 1; flex: 0 0 auto; margin: 0;
    background: transparent; border: 1px solid var(--border);
  }
  .topbar-brand {
    order: 2; display: flex; align-items: center; gap: .5rem;
    flex: 1 1 auto; min-width: 0;
  }
  .topbar .back-btn { order: 3; flex: 0 0 auto; margin: 0; }

  /* Row 2: page title reads like a screen heading, left aligned */
  .topbar-title {
    order: 4; flex: 1 1 100%; text-align: left;
    padding-top: .5rem; margin-top: .15rem;
    border-top: 1px solid var(--border);
  }
  .topbar-title h2 { font-size: 1.15rem; }
  .topbar-title p { font-size: .8rem; margin-top: .15rem; }

  /* Row 3: auth cluster on its own full-width, evenly-spaced row */
  #auth-container { order: 5; flex: 1 1 100%; margin: 0; }
  #admin-status {
    display: flex; width: 100%; align-items: center;
    justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  }
  .topbar-backup {
    display: flex; flex-direction: row; align-items: center;
    gap: .5rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0;
  }
  .topbar-backup .backup-now-btn { width: auto; flex: 0 0 auto; }
  .topbar-backup .backup-last {
    text-align: left; max-width: none; font-size: .72rem; line-height: 1.3;
  }
  #logout-btn { flex: 0 0 auto; }

  /* Login form: neat wrapping on its own row */
  #login-form { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
  #login-form input { flex: 1 1 46%; min-width: 0; }
  #login-form button { flex: 1 1 100%; }
}

/* Small phones: slightly larger logo, name can shrink */
@media (max-width: 430px) {
  .topbar-brand-name { font-size: .92rem; }
  .topbar-logo { width: 32px; height: 32px; }
}
/* ============================================================
   ★ 26 Jul 2026 — DESKTOP SIDEBAR COLLAPSE / HIDE
   Adds a desktop show/hide for the left navigation so every page
   can use the full window width. The existing ☰ button becomes a
   toggle: click to slide the sidebar away (content animates wider),
   click again to bring it back (content slides along). The choice
   is remembered by the JS snippet. Scoped to desktop (>=861px);
   the phone off-canvas drawer behaviour is completely unchanged.
   APPEND-ONLY — paste at the very end of style.css.
============================================================ */
@media (min-width: 861px) {
  /* The ☰ button is hidden on desktop by the base rule; show it here
     so it can act as the collapse/expand toggle. */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Smoothly animate the sidebar sliding out and the content widening. */
  .sidebar { transition: transform .25s ease; }
  .main-area { transition: margin-left .25s ease; }

  /* Collapsed state: slide the fixed sidebar off-screen and let the
     main content reclaim the full width. */
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  body.sidebar-collapsed .main-area { margin-left: 0; }

  /* When collapsed, give the ☰ toggle a subtle "primary" look so it's
     obvious it will re-open the menu. */
  body.sidebar-collapsed .nav-toggle {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }
}


/* ============================================================
   ★ 26 Jul 2026 — FOUR NEW FEATURES — styles (append-only)
   Paste this whole block at the VERY END of style.css.
   Covers: top-bar tools (search + dark toggle), the global-search
   command palette, dark mode, and the CSV import modal.
============================================================ */

/* ---------- Top-bar tool buttons (🔍 + 🌙) ---------- */
.topbar-tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.tool-btn { font-size: 1.15rem; line-height: 1; }
.tool-btn:hover { background: var(--surface-soft); }
@media (max-width: 860px) {
  .topbar-tools { order: 6; }
}

/* ============================================================
   GLOBAL SEARCH — command palette overlay
============================================================ */
.gsearch-overlay {
  display: none; position: fixed; inset: 0; z-index: 2600;
  background: rgba(15, 23, 42, .5);
  align-items: flex-start; justify-content: center;
  padding: 10vh 1rem 1rem;
}
.gsearch-overlay.show { display: flex; }
.gsearch-box {
  width: 100%; max-width: 640px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
  overflow: hidden; display: flex; flex-direction: column; max-height: 74vh;
}
#gsearch-input {
  border: 0; border-bottom: 1px solid var(--border);
  padding: 1.1rem 1.25rem; font-size: 1.05rem; background: var(--surface);
  color: var(--text); outline: none; width: 100%;
}
.gsearch-results { overflow: auto; padding: .4rem; }
.gsearch-empty { padding: 1.5rem 1.25rem; color: var(--muted); font-weight: 700; text-align: center; }
.gsearch-group-title {
  padding: .55rem .85rem .3rem; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.gsearch-item {
  width: 100%; text-align: left; background: transparent; color: var(--text);
  border: 0; border-radius: 12px; padding: .7rem .85rem; cursor: pointer;
  display: flex; flex-direction: column; gap: .15rem;
}
.gsearch-item:hover { background: #fdf2f8; color: var(--text); }
body.dark .gsearch-item:hover { background: var(--surface-soft); }
.gsearch-item-label { font-weight: 700; }
.gsearch-item-sub { font-size: .78rem; color: var(--muted); }
.gsearch-hint {
  border-top: 1px solid var(--border); padding: .55rem .85rem;
  font-size: .74rem; color: var(--muted); text-align: center;
}

/* ============================================================
   DARK MODE — redefine theme variables + fix hard-coded whites
============================================================ */
body.dark {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-soft: #273449;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: #334155;
  --nav: #0b1220;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
/* Inputs / selects / textareas that hard-code white in the base CSS */
body.dark .btn-secondary { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
body.dark .btn-secondary:hover { background: #31425c; color: var(--text); }
body.dark .btn-action { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
body.dark .btn-action:hover { background: #31425c; }
body.dark .toolbar input, body.dark .toolbar select,
body.dark .filter-grid input, body.dark .filter-grid select,
body.dark .form-grid label input, body.dark .form-grid label select, body.dark .form-grid label textarea,
body.dark .form-group input, body.dark .form-group select, body.dark .form-group textarea,
body.dark .audit-filters input, body.dark .audit-filters select,
body.dark .consumable-filters input,
body.dark .recycle-filters input, body.dark .recycle-filters select,
body.dark .assigned-user-filters input, body.dark .assigned-user-filters select,
body.dark .maintenance-filters input, body.dark .maintenance-filters select,
body.dark .inline-form input, body.dark .assigned-form-grid input,
body.dark .filter-date-label input, body.dark .assign-date-label input,
body.dark #gsearch-input {
  background-color: var(--surface-soft) !important; color: var(--text); border-color: var(--border);
}
/* Rounded "pill" search boxes keep their magnifier icon; only recolor the fill */
body.dark .accounts-title-search input,
body.dark .assigned-users-title-search input,
body.dark .maintenance-title-search input,
body.dark .consumable-title-search input,
body.dark .recyclebin-title-search input,
body.dark .purchase-title-search input {
  background-color: var(--surface-soft); color: var(--text); border-color: var(--border);
}
body.dark .modal-content { background: var(--surface); color: var(--text); }
body.dark .checkbox-label { background: var(--surface-soft); border-color: var(--border); }
body.dark .list button { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
body.dark .list button:hover { background: #31425c; color: var(--text); }
body.dark .report-card { background: var(--surface-soft); color: var(--text); }
body.dark .report-card span { color: var(--muted); }
body.dark .about-do { background: #0e2a20; border-color: #14532d; }
body.dark .about-dont { background: #2a1414; border-color: #7f1d1d; }
body.dark .active-filter-note { background: #2a1430; border-color: #7c1d55; color: #f9a8d4; }
/* Keep QR thumbnails on white so they stay scannable */
body.dark .qr-thumb, body.dark .qr-large { background: #fff; }
/* Smooth theme transition */
body, .topbar, .sidebar, .panel, .stat-card, .table-card, .modal-content {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ============================================================
   BULK CSV IMPORT — modal contents
============================================================ */
.bi-actions-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.bi-file-label { cursor: pointer; display: inline-flex; align-items: center; }
.bi-filename { color: var(--muted); font-weight: 700; font-size: .85rem; }
.bi-summary { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.bi-badge {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: .25rem .7rem; font-size: .74rem; font-weight: 800;
}
.bi-badge.ok { background: #dcfce7; color: #065f46; }
.bi-badge.dup { background: #fef3c7; color: #92400e; }
.bi-badge.err { background: #fee2e2; color: #991b1b; }
.bi-table-wrap { max-height: 44vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.bi-table { width: 100%; min-width: 0; border-collapse: collapse; }
.bi-table th, .bi-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--border); text-align: left; font-size: .85rem; white-space: nowrap; }
.bi-table th { background: var(--surface-soft); position: sticky; top: 0; z-index: 1; }
.bi-row-dup { background: rgba(217, 119, 6, .06); }
.bi-row-err { background: rgba(220, 38, 38, .06); }

@media (max-width: 768px) {
  .gsearch-overlay { padding: 6vh .6rem 1rem; }
  .bi-table th, .bi-table td { white-space: normal; }
}

/* ---------- Dark-mode: fix washed-out table-row hover ---------- */
body.dark table tbody tr:hover,
body.dark .table-card tbody tr:hover,
body.dark .data-table tbody tr:hover {
  background-color: #273449 !important;  /* subtle dark lift instead of near-white */
  color: var(--text) !important;         /* keep text readable on hover */
}
body.dark table tbody tr:hover td {
  color: var(--text) !important;         /* ensure every cell stays light */
}
/* ============================================================
   ★ 26 Jul 2026 — READABLE PAGINATION NUMBERS
   The inactive page buttons (2, 3, 4, 24 …) were a very faint grey
   on white, so they looked disabled/invisible. Give them a strong
   slate colour, a subtle border, and a clear pink hover. The active
   page and the ‹ › arrows are left as-is. APPEND at end of style.css.
   (Selectors cover the common class names; harmless if one is unused.)
============================================================ */
.pagination button,
.pagination a,
.pager button,
.page-btn,
.page-numbers button,
.page-numbers a {
  color: #1f2937 !important;          /* dark slate — clearly readable */
  font-weight: 700;
  border: 1px solid #e5e7eb;          /* soft edge so white buttons don't float */
}

/* Hover on an inactive page: tint toward your brand pink */
.pagination button:hover,
.pagination a:hover,
.pager button:hover,
.page-btn:hover,
.page-numbers button:hover,
.page-numbers a:hover {
  color: var(--primary) !important;
  border-color: var(--primary);
  background-color: #fff0f7;
}

/* Never override the ACTIVE page or the arrows/disabled controls */
.pagination .active,
.pagination button.active,
.page-btn.active,
.page-numbers .active,
.pagination [disabled],
.page-btn[disabled] {
  color: #fff !important;             /* active stays white-on-pink */
}
.pagination [disabled],
.page-btn[disabled] {
  color: #9ca3af !important;          /* disabled arrow stays muted grey */
}

/* ---------- Dark mode: keep the same buttons readable ---------- */
body.dark .pagination button,
body.dark .pagination a,
body.dark .pager button,
body.dark .page-btn,
body.dark .page-numbers button,
body.dark .page-numbers a {
  color: #1f2937 !important;          /* buttons stay white in your UI, so dark text */
  border-color: #cbd5e1;
}
body.dark .pagination button:hover,
body.dark .page-btn:hover,
body.dark .page-numbers button:hover {
  color: var(--primary) !important;
  border-color: var(--primary);
  background-color: #fff0f7;
}

/* ============================================================
   ★ 26 Jul 2026 — COMBINED UI UPDATES v3 (single file, append-only)
   Paste this WHOLE block at the very END of style.css.
   (Replaces any earlier ui-updates / ui-complete / dark-nav-hover
    block — remove those first to avoid duplicates.)

   NEW in v3 (per your feedback):
     • Tighter vertical rhythm — items sit up a bit, leaving clean
       white space for the "Signed in as" footer; NO scrollbar.
     • Rail icons are never clipped (logo + every icon fully shown).
     • Hover an icon in the rail => a FLYOUT LABEL pops up beside it
       (tooltip style). The full bar returns ONLY when you click the
       hamburger button — no more whole-bar hover expand.

   Sections: 0 fit · 1 dark dropdowns · 2 icon-rail + flyout ·
             3 dashboard scroll · 4 dark nav hover
============================================================ */

/* ============================================================
   0) SIDEBAR FIT — compact rhythm, room for footer, no scrollbar
============================================================ */
.sidebar { overflow: hidden !important; }
.sidebar .nav-link {
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-items: center;
}
.sidebar .brand { padding-top: .6rem !important; padding-bottom: .6rem !important; }
.sidebar .rail-hide { padding-top: .55rem !important; padding-bottom: .55rem !important; }

/* ============================================================
   1) DARK MODE — kill white / near-white fills
============================================================ */
body.dark select,
body.dark .toolbar select,
body.dark .filter-grid select,
body.dark .accounts-header select,
body.dark .purchase-header select,
body.dark .maintenance-filters select,
body.dark .assigned-user-filters select,
body.dark .recycle-filters select,
body.dark .audit-filters select {
  background-color: #273449 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
body.dark select option { background: #1e293b; color: #e5e7eb; }

body.dark input.filter-active,
body.dark select.filter-active,
body.dark .filter-active {
  background-color: #3a2131 !important;
  color: #f9a8d4 !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(233, 30, 136, .25) !important;
}
body.dark .filter-active::placeholder { color: #f9a8d4; opacity: .8; }

body.dark .stat-card:hover,
body.dark .stat-card.active,
body.dark .stat-card.selected,
body.dark .summary-card:hover,
body.dark .summary-card.active {
  background-color: #273449 !important;
  color: #e5e7eb !important;
  border-color: var(--primary) !important;
}

/* ============================================================
   2) ICON-RAIL SIDEBAR + FLYOUT LABELS (desktop only)
   Uses hooks from icon-rail-ADD.js:
     .nav-ico  .nav-label  .brand-text  .rail-hide
============================================================ */
.nav-link .nav-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; margin-right: .65rem; flex: 0 0 auto; font-size: 1.05rem;
}
.nav-link .nav-label { white-space: nowrap; }

@media (min-width: 861px) {
  .sidebar { transition: width .2s ease; }
  .main-area { transition: margin-left .2s ease; }

  /* --- COLLAPSED RAIL: logo + icons only --- */
  body.sidebar-rail .sidebar {
    width: 76px;
    overflow: visible !important;   /* let flyout labels escape the rail */
    z-index: 400;                   /* ★ v6 — sit ABOVE the sticky topbar (z-index 300) so hover labels aren't hidden */
  }
  body.sidebar-rail .main-area { margin-left: 76px; }

  /* Hide the school-name text and footer; keep the logo + icons */
  body.sidebar-rail .brand-text,
  body.sidebar-rail .rail-hide { display: none !important; }

  /* Center everything so nothing is clipped */
  body.sidebar-rail .nav-link { justify-content: center; padding: .5rem 0 !important; position: relative; }
  body.sidebar-rail .nav-ico { margin-right: 0; font-size: 1.4rem; }
  body.sidebar-rail .brand { justify-content: center; padding: .6rem 0 !important; }
  body.sidebar-rail .brand-logo { margin: 0 auto; }

  /* --- FLYOUT LABEL: hidden inline, shown as a pill beside the icon --- */
  body.sidebar-rail .nav-label {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    margin-left: 8px;
    background: #1f2937;
    color: #fff;
    padding: .4rem .7rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 3000;
  }
  /* Little arrow on the pill */
  body.sidebar-rail .nav-label::before {
    content: "";
    position: absolute;
    left: -5px; top: 50%;
    transform: translateY(-50%);
    border-width: 5px 5px 5px 0;
    border-style: solid;
    border-color: transparent #1f2937 transparent transparent;
  }
  body.sidebar-rail .nav-link:hover .nav-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }

  /* Keep the hamburger visible on desktop so it can toggle the rail */
  .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
}

/* ============================================================
   3) DASHBOARD — cap tall panels + tidy scrollbar
============================================================ */
#dashboard-view .table-wrap,
#dashboard-view .table-card .table-wrap,
#dashboard-view .list,
#dashboard-view .dash-list,
#dashboard-view .panel-list,
#dashboard-view .panel-body,
#dashboard-view .card-body,
#dashboard-view .scroll-list,
#dashboard-view ul.list {
  max-height: 320px;
  overflow-y: auto;
}
#dashboard-view *::-webkit-scrollbar { width: 10px; height: 10px; }
#dashboard-view *::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}
#dashboard-view *::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: content-box; }
#dashboard-view *::-webkit-scrollbar-track { background: transparent; }
body.dark #dashboard-view *::-webkit-scrollbar-thumb { background: #475569; background-clip: content-box; }
body.dark #dashboard-view *::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: content-box; }

/* ============================================================
   4) DARK-MODE NAV HOVER
============================================================ */
body.dark .nav-link:hover,
body.dark .nav-link:focus-visible {
  background: rgba(233, 30, 136, .22);
  color: #fff;
}
body.dark .nav-link.active {
  background: rgba(233, 30, 136, .32);
  color: #fff;
}
@media (min-width: 861px) {
  body.dark.sidebar-rail .sidebar .nav-link:hover,
  body.dark.sidebar-rail .sidebar .nav-link.active {
    background: rgba(233, 30, 136, .28);
    border-radius: 12px;
  }
  body.dark .sidebar .nav-ico { opacity: 1; }
}

/* ============================================================
   ★ 26 Jul 2026 — LOGIN GATE + DASHBOARD DATA BARS + VIEW-ONLY
============================================================ */

/* ---- Login gate overlay (confidential data: sign in first) ---- */
.login-gate{
  display:none;position:fixed;inset:0;z-index:4000;
  align-items:center;justify-content:center;padding:1.25rem;
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
}
.login-gate.show{display:flex;}
body.gated{overflow:hidden;}
.login-gate-card{
  width:100%;max-width:390px;background:var(--surface,#fff);
  border-radius:20px;padding:2.2rem 1.8rem;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.login-gate-logo{width:76px;height:76px;object-fit:contain;border-radius:16px;background:#fff;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.15);}
.login-gate-title{font-size:1.35rem;font-weight:800;margin:.9rem 0 .1rem;color:var(--text,#0f172a);}
.login-gate-sub{color:var(--muted,#64748b);font-size:.9rem;margin:0 0 1.3rem;}
.login-gate-form{display:flex;flex-direction:column;gap:.7rem;}
.login-gate-form input{
  padding:.8rem .95rem;border:1px solid var(--border,#e2e8f0);border-radius:12px;
  font-size:1rem;background:var(--surface,#fff);color:var(--text,#0f172a);width:100%;
}
.login-gate-form input:focus{outline:none;border-color:var(--primary,#e91e88);box-shadow:0 0 0 3px rgba(233,30,136,.18);}
.login-gate-btn{
  margin-top:.2rem;padding:.85rem 1rem;border:0;border-radius:12px;cursor:pointer;
  background:var(--primary,#e91e88);color:#fff;font-weight:800;font-size:1rem;
}
.login-gate-btn:hover{filter:brightness(1.05);}
.login-gate-note{margin:1.1rem 0 0;font-size:.75rem;color:var(--muted,#94a3b8);line-height:1.4;}
body.dark .login-gate-card{background:#1e293b;}
body.dark .login-gate-form input{background:#273449;color:#e5e7eb;border-color:#334155;}

/* ---- View-only badge in User Management ---- */
.viewonly-badge{
  display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:800;
  background:#e0e7ff;color:#3730a3;
}
body.dark .viewonly-badge{background:#312e81;color:#c7d2fe;}

/* ---- Dashboard data bars (Low Stock / Assets by Category / etc.) ---- */
.dash-bar-item{
  position:relative;display:flex;align-items:center;gap:.5rem;width:100%;
  padding:.6rem .8rem;margin:.3rem 0;border:1px solid var(--border,#e2e8f0);
  border-radius:10px;background:var(--surface,#fff);color:var(--text,#0f172a);
  cursor:pointer;overflow:hidden;text-align:left;font-size:.9rem;
}
.dash-bar-item:hover{border-color:var(--primary,#e91e88);}
.dash-bar{
  position:absolute;left:0;top:0;bottom:0;z-index:0;
  background:linear-gradient(90deg,rgba(233,30,136,.22),rgba(233,30,136,.10));
  border-radius:10px 0 0 10px;transition:width .35s ease;
}
.dash-bar-label{position:relative;z-index:1;flex:1 1 auto;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-bar-val{position:relative;z-index:1;flex:0 0 auto;font-weight:800;}
body.dark .dash-bar-item{background:var(--surface-soft,#273449);color:#e5e7eb;border-color:#334155;}

/* Low-stock severity colours (bar + number) */
.dash-bar-item.lowstock.crit .dash-bar{background:linear-gradient(90deg,rgba(220,38,38,.35),rgba(220,38,38,.15));}
.dash-bar-item.lowstock.crit .dash-bar-val{color:#dc2626;}
.dash-bar-item.lowstock.crit{border-color:#dc2626;}
.dash-bar-item.lowstock.low .dash-bar{background:linear-gradient(90deg,rgba(217,119,6,.32),rgba(217,119,6,.12));}
.dash-bar-item.lowstock.low .dash-bar-val{color:#d97706;}
.dash-bar-item.lowstock.ok .dash-bar{background:linear-gradient(90deg,rgba(22,163,74,.28),rgba(22,163,74,.10));}
.dash-bar-item.lowstock.ok .dash-bar-val{color:#16a34a;}
body.dark .dash-bar-item.lowstock.crit .dash-bar-val{color:#f87171;}
body.dark .dash-bar-item.lowstock.low .dash-bar-val{color:#fbbf24;}
body.dark .dash-bar-item.lowstock.ok .dash-bar-val{color:#4ade80;}

/* ============================================================
   ★ 26 Jul 2026 — LOGIN "SIGNING IN" STATE + ASSETS SELECT COLUMN
============================================================ */

/* Spinner shown inside the Sign in button while authenticating/loading */
.lg-spinner{
  display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-right:.3rem;
  border:2px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;
  animation:lg-spin .7s linear infinite;
}
@keyframes lg-spin{to{transform:rotate(360deg)}}
.login-gate-btn:disabled{opacity:.85;cursor:progress;}
/* Subtle "busy" cue on the whole card while signing in */
.login-gate-card.logging-in{opacity:.96;}
.login-gate-card.logging-in .login-gate-form input{background:rgba(0,0,0,.03);}

/* Assets select-all / row checkbox column */
.select-col{width:38px;text-align:center;}
.select-col input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary,#e91e88);}
#delete-selected-assets-btn{white-space:nowrap;}

/* ============================================================
   ★ 26 Jul 2026 — LOGIN ERROR + BRAND TOOLTIP + TOPBAR TIDY
============================================================ */

/* Inline error message on the sign-in gate */
.lg-error{
  margin-top:.9rem;padding:.6rem .8rem;border-radius:10px;
  background:#fee2e2;color:#991b1b;font-size:.85rem;font-weight:700;
  border:1px solid #fecaca;text-align:center;
}
body.dark .lg-error{background:#3a1520;color:#fca5a5;border-color:#7f1d1d;}

/* Log Out button removed from the top bar (now on My Account page) */
#logout-btn{display:none !important;}

/* Keep the Backup + tool icons together on the far right of the top bar */
.topbar-title{margin-right:auto;}
#admin-status{display:flex;align-items:center;gap:.6rem;}
#admin-status .topbar-tools{display:flex;align-items:center;gap:.4rem;}

/* Clickable school brand with a hover "My Account" tooltip */
.brand#brand-account{position:relative;cursor:pointer;border-radius:12px;transition:background .15s ease;}
.brand#brand-account:hover,.brand#brand-account:focus-visible{background:rgba(233,30,136,.10);outline:none;}
.brand-tooltip{
  position:absolute;left:12px;top:calc(100% + 6px);z-index:1400;
  min-width:190px;background:#1f2937;color:#fff;border-radius:10px;
  padding:.6rem .8rem;font-size:.82rem;line-height:1.35;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease;pointer-events:none;
}
.brand-tooltip strong{color:#f9a8d4;}
.brand-tooltip-hint{display:block;margin-top:.2rem;font-size:.72rem;color:#cbd5e1;font-weight:600;}
.brand#brand-account:hover .brand-tooltip,
.brand#brand-account:focus-visible .brand-tooltip{opacity:1;visibility:visible;transform:translateY(0);}
/* In the collapsed icon-rail the label text is hidden; don't show the big tooltip there */
body.sidebar-rail .brand-tooltip{display:none;}

/* ============================================================
   ★ 26 Jul 2026 — MY ACCOUNT PAGE (single-file mode, ?account=1)
============================================================ */
body.account-mode{background:var(--bg,#f1f5f9);}
body.account-mode .app-shell,body.account-mode .login-gate{display:none !important;}
.account-page{max-width:1000px;margin:0 auto;}
.account-topbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;padding:1rem 1.25rem;border-radius:0 0 18px 18px;}
.account-topbar img{width:42px;height:42px;border-radius:10px;background:#fff;padding:3px;object-fit:contain;}
.account-topbar h1{font-size:1.15rem;margin:0;}
.account-topbar p{margin:.1rem 0 0;font-size:.8rem;color:#cbd5e1;}
.acc-spacer{flex:1 1 auto;}
.account-shell{padding:1.25rem;}
.acc-btn{border:0;border-radius:10px;padding:.6rem 1rem;font-weight:700;cursor:pointer;font-size:.9rem;text-decoration:none;display:inline-block;}
.acc-primary{background:var(--primary,#e91e88);color:#fff;}
.acc-primary:hover{background:var(--primary-dark,#b3126a);}
.acc-danger{background:#dc2626;color:#fff;}
.acc-danger:hover{background:#b91c1c;}
.acc-secondary{background:var(--surface-soft,#f8fafc);color:var(--text,#0f172a);border:1px solid var(--border,#e2e8f0);}
.acc-secondary:hover{background:#eef2f7;}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.account-card{background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:16px;padding:1.25rem;box-shadow:0 6px 20px rgba(15,23,42,.05);}
.account-card h2{margin:0 0 .9rem;font-size:1.05rem;}
.acc-who{display:flex;align-items:center;gap:.9rem;}
.acc-avatar{width:56px;height:56px;border-radius:50%;flex:0 0 auto;background:var(--primary,#e91e88);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;}
.acc-name{font-size:1.2rem;font-weight:800;}
.acc-role{color:var(--muted,#64748b);font-size:.85rem;}
.acc-perms{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem;}
.acc-chip{border-radius:999px;padding:.2rem .65rem;font-size:.72rem;font-weight:800;}
.acc-chip.on{background:#dcfce7;color:#065f46;}
.acc-chip.off{background:#f1f5f9;color:#94a3b8;}
.account-card label{display:block;font-size:.82rem;font-weight:700;margin:.7rem 0 .25rem;}
.account-card input{width:100%;padding:.65rem .75rem;border:1px solid var(--border,#e2e8f0);border-radius:10px;font-size:.95rem;background:var(--surface,#fff);color:var(--text,#0f172a);}
.account-card input:focus{outline:none;border-color:var(--primary,#e91e88);box-shadow:0 0 0 3px rgba(233,30,136,.15);}
.acc-msg{margin-top:.7rem;padding:.55rem .75rem;border-radius:10px;font-size:.85rem;font-weight:700;display:none;}
.acc-msg.ok{background:#dcfce7;color:#065f46;display:block;}
.acc-msg.err{background:#fee2e2;color:#991b1b;display:block;}
.acc-muted{color:var(--muted,#64748b);}
.acc-audit-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1.25rem;}
.acc-audit-head h2{margin:0;font-size:1.05rem;flex:1 1 auto;}
.acc-count{color:var(--muted,#64748b);font-size:.8rem;}
.acc-table-card{margin-top:.8rem;padding:0;overflow:hidden;}
.acc-table-scroll{overflow-x:auto;}
.acc-table-card table{width:100%;border-collapse:collapse;min-width:640px;}
.acc-table-card th,.acc-table-card td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--border,#e2e8f0);font-size:.85rem;vertical-align:top;}
.acc-table-card th{background:var(--surface-soft,#f8fafc);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#64748b);position:sticky;top:0;}
.acc-table-card tr:hover td{background:#fdf2f8;}
.acc-empty{padding:1.5rem;text-align:center;color:var(--muted,#64748b);}
body.dark .acc-secondary:hover{background:#31425c;}
body.dark .acc-table-card tr:hover td{background:#273449;}
body.dark .acc-chip.off{background:#273449;color:#64748b;}
@media (max-width:760px){.account-grid{grid-template-columns:1fr;}.account-topbar h1{font-size:1rem;}}

@media (min-width: 861px) {
  /* Collapsed rail: hide the brand's text, show ONLY the logo at the top */
  body.sidebar-rail .brand > div { display: none !important; }
  body.sidebar-rail .brand { justify-content: center; padding: .8rem 0 !important; }
  body.sidebar-rail .brand-logo {
    display: block !important;
    margin: 0 auto !important;
    width: 44px;
    height: 44px;
    object-fit: contain;
  }
}
/* ============================================================
   ★ 26 Jul 2026 — SIDEBAR RAIL FIX + REMEMBER ME + DEVICES +
                    IN-PAGE MY ACCOUNT  (append-only, paste at END)
============================================================ */

/* ------------------------------------------------------------
   1 & 2) COLLAPSED ICON-RAIL — logo ONLY at the top, footer hidden
   Authoritative rules so the LOGO always shows at the top of the
   rail and the "Signed in as" footer is hidden to free space.
------------------------------------------------------------ */
@media (min-width: 861px) {
  /* The brand must never be hidden in the rail (was accidentally hidden). */
  body.sidebar-rail .brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: .8rem 0 !important;
    margin-bottom: .6rem !important;
  }
  /* Show ONLY the logo — no school-name text, no hover tooltip. */
  body.sidebar-rail .brand .brand-logo {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto !important;
    object-fit: contain;
  }
  body.sidebar-rail .brand .brand-text,
  body.sidebar-rail .brand .brand-tooltip { display: none !important; }

  /* Hide the "Signed in as …" footer in the rail so the icons breathe. */
  body.sidebar-rail .sidebar-footer,
  body.sidebar-rail .rail-hide { display: none !important; }

  /* Let the nav items sit a touch lower now the footer is gone. */
  body.sidebar-rail .nav-menu { margin-top: .35rem; }
}

/* ------------------------------------------------------------
   3) "REMEMBER ME" checkbox on the sign-in gate
------------------------------------------------------------ */
.login-gate-form .lg-remember {
  display: flex; align-items: center; gap: .55rem;
  font-size: .85rem; color: var(--muted, #64748b);
  cursor: pointer; user-select: none; margin: -.15rem 0 .1rem;
  text-align: left;
}
.login-gate-form .lg-remember input[type="checkbox"] {
  width: 17px; height: 17px; flex: 0 0 auto; cursor: pointer;
  accent-color: var(--primary, #e91e88);
}
body.dark .login-gate-form .lg-remember { color: #94a3b8; }

/* ------------------------------------------------------------
   4) DEVICES viewer (inside the side drawer, from User Management)
------------------------------------------------------------ */
.acc-username-link { color: var(--primary, #e91e88); font-weight: 800; cursor: pointer; text-decoration: underline dotted; }
.acc-username-link:hover { text-decoration: underline; }
.device-count { font-size: .82rem; color: var(--muted, #64748b); font-weight: 700; margin: 0 0 .6rem; }
.device-list { display: grid; gap: .7rem; }
.device-item {
  display: flex; align-items: flex-start; gap: .8rem;
  border: 1px solid var(--border, #e2e8f0); border-radius: 14px;
  padding: .85rem .95rem; background: var(--surface, #fff);
}
.device-ico { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.device-meta { flex: 1 1 auto; min-width: 0; }
.device-name { font-weight: 800; font-size: .95rem; color: var(--text, #0f172a); }
.device-current {
  display: inline-block; margin-left: .4rem; padding: .1rem .5rem;
  border-radius: 999px; font-size: .68rem; font-weight: 800;
  background: #dcfce7; color: #065f46; vertical-align: middle;
}
.device-sub { font-size: .78rem; color: var(--muted, #64748b); margin-top: .15rem; word-break: break-word; }
.device-forget { flex: 0 0 auto; align-self: center; }
body.dark .device-item { background: var(--surface-soft, #273449); border-color: #334155; }
body.dark .device-current { background: #14532d; color: #bbf7d0; }

/* ------------------------------------------------------------
   5) IN-PAGE "MY ACCOUNT" overlay (same page, no new tab/reload)
------------------------------------------------------------ */
.account-overlay {
  display: none; position: fixed; inset: 0; z-index: 3500;
  background: rgba(15, 23, 42, .55); overflow: auto;
  padding: 3vh 1rem 2rem;
}
.account-overlay.show { display: block; }
body.account-overlay-open { overflow: hidden; }
.account-overlay-panel {
  max-width: 1000px; margin: 0 auto; background: var(--bg, #f1f5f9);
  border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.account-overlay-head {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: linear-gradient(135deg, #0f172a, #1e293b); color: #fff; padding: 1rem 1.25rem;
}
.account-overlay-head img { width: 42px; height: 42px; border-radius: 10px; background: #fff; padding: 3px; object-fit: contain; }
.account-overlay-head h2 { font-size: 1.15rem; margin: 0; }
.account-overlay-head p { margin: .1rem 0 0; font-size: .8rem; color: #cbd5e1; }
.account-overlay-body { padding: 1.25rem; }
@media (max-width: 760px) { .account-overlay-head h2 { font-size: 1rem; } }

/* ============================================================
   ★ 26 Jul 2026 — FROZEN TITLE + FILTERS, MY-ACTIVITY SCROLL,
                    ASSIGNED-USERS MODALS  (append-only, END of file)
============================================================ */

/* ------------------------------------------------------------
   #3  FREEZE the title area + filter bars on every view.
   Desktop only (>=861px) so the mobile layout is untouched.
   --topbar-h is measured by script.js so filter bars sit exactly
   beneath the frozen top bar.
------------------------------------------------------------ */
@media (min-width: 861px) {
  /* One shared value controls the clean gap between the frozen title and the
     frozen filter bar. Change it here to widen/narrow the white space. */
  :root { --freeze-gap: 18px; }

  /* Title area (page title, backup, tool icons) stays pinned. */
  .main-area .topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    /* solid bg already (var(--surface)); add a lift once content scrolls under */
    box-shadow: var(--shadow), 0 6px 16px rgba(15, 23, 42, .06);
  }
  /* A page-coloured SPACER that rides directly beneath the frozen title.
     Because it moves with the title bar it (a) guarantees clean white space
     under the title and (b) masks any table row that would otherwise peek
     through the gap between the two frozen bars. Its height === --freeze-gap
     and each filter bar freezes exactly --freeze-gap below the title, so the
     two always line up perfectly regardless of the measured title height. */
  .main-area .topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--freeze-gap);
    background: var(--bg);
    pointer-events: none;
  }

  /* Assets: the whole toolbar (search + filters + buttons) is frozen. */
  #assets-view .toolbar {
    position: sticky;
    top: calc(var(--topbar-h, 84px) + var(--freeze-gap));
    z-index: 150;
    background: var(--bg);
    padding: .1rem 0 .6rem;
    margin-bottom: .5rem;
  }

  /* Panel-based list views: freeze the panel header (title + search + actions).
     The negative side margins + matching padding let the opaque background
     span the panel's full inner width so rows never show through the sides. */
  #assigned-users-view .assigned-users-header,
  #maintenance-view .maintenance-header,
  #consumables-view .consumable-header,
  #audit-view > .panel > .panel-header,
  #recyclebin-view .recyclebin-header,
  #accounts-view .accounts-header {
    position: sticky;
    top: calc(var(--topbar-h, 84px) + var(--freeze-gap));
    z-index: 150;
    background: var(--surface);
    margin-left: -1rem;
    margin-right: -1rem;
    padding: .8rem 1rem;
    border-radius: 12px 12px 0 0;
  }

  /* The assigned-users panel used overflow:hidden, which silently breaks
     position:sticky for its header — allow it to overflow so the header pins. */
  .assigned-users-panel { overflow: visible !important; }
}

/* ------------------------------------------------------------
   #2  MY ACCOUNT → "My activity" list gets its own scrollbar
   (in the in-page overlay AND the standalone ?account=1 page).
------------------------------------------------------------ */
#account-overlay .acc-table-scroll,
body.account-mode .acc-table-scroll {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: auto;
}
/* Keep the activity column headers visible while the list scrolls. */
#account-overlay .acc-table-card thead th,
body.account-mode .acc-table-card thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Tidy scrollbar to match the dashboard style */
#account-overlay .acc-table-scroll::-webkit-scrollbar,
body.account-mode .acc-table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
#account-overlay .acc-table-scroll::-webkit-scrollbar-thumb,
body.account-mode .acc-table-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}
#account-overlay .acc-table-scroll::-webkit-scrollbar-thumb:hover,
body.account-mode .acc-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: content-box; }
body.dark #account-overlay .acc-table-scroll::-webkit-scrollbar-thumb { background: #475569; background-clip: content-box; }

/* ------------------------------------------------------------
   #4  ASSIGNED USERS modals — light padding for the modal bodies
------------------------------------------------------------ */
.assigned-modal-body { padding: .2rem .2rem 0; }
.assigned-modal-body .modal-actions { margin-top: 1rem; }
/* Make the two new toolbar buttons read as primary actions */
#open-add-user-btn, #open-assign-device-btn { white-space: nowrap; }


/* ============================================================
   ★ 26 Jul 2026 — PURCHASES VIEW PANEL SPACING (append-only)
   Adds clean vertical space between the stacked panels in the
   Purchases page — most importantly between "Purchased Assets"
   and "Purchase Requests" (they were touching with no gap).

   The child combinator (>) targets ONLY the two big direct-child
   panels of #purchases-view, so the chart tiles inside
   .charts-grid are untouched (their grid gap already spaces them).

   Paste this WHOLE block at the very END of style.css, then bump
   the cache version in index.html (e.g. style.css?v=26).
============================================================ */
#purchases-view > .panel { margin-bottom: 1.6rem; }
#purchases-view > .panel:last-of-type { margin-bottom: 0; }

/* A little breathing room under the stats + charts row too, so the
   first panel doesn't sit tight against the charts. */
#purchases-view .charts-grid { margin-bottom: 1.6rem; }



/* ============================================================
   ★ 26 Jul 2026 — ASSETS VIEW: reliable frozen title + filter bar
   Root cause of the earlier failure: the Assets toolbar sits DIRECTLY
   inside the view (not inside a .panel), and it froze at
   top: var(--topbar-h)+gap. But --topbar-h was measured while the page
   was still behind the login gate, so the offset was too small and the
   toolbar tucked UNDER the title bar (looking like it never froze).

   This block: (1) raises the title bar above the toolbar, (2) makes the
   Assets toolbar an OPAQUE sticky bar with a higher z-index so table
   rows can never show through, and (3) keeps it clipping-safe.
   The companion JS re-measures --topbar-h after sign-in / on every view
   switch / on scroll so the offset is always correct.

   Paste this WHOLE block at the very END of style.css, then bump the
   cache version in index.html (e.g. style.css?v=27).
============================================================ */
@media (min-width: 861px) {
  /* Never clip the sticky child inside the Assets view. */
  #assets-view { overflow: visible; }

  /* Title bar sits above everything that freezes beneath it. */
  .main-area .topbar { z-index: 300; }

  /* The Assets toolbar (search + category/status/location + buttons)
     freezes directly under the title bar. Opaque bg + strong z-index so
     the asset rows scrolling beneath are fully hidden. */
  #assets-view .toolbar {
    position: sticky;
    top: calc(var(--topbar-h, 84px) + var(--freeze-gap, 18px));
    z-index: 180;
    background: var(--bg);
    padding: .55rem 0 .7rem;
    margin-bottom: .35rem;
    box-shadow: 0 8px 14px -8px rgba(15, 23, 42, .18);
  }

  /* The "active filter" note and the More-Filters panel, when shown,
     ride just below the frozen toolbar so nothing overlaps oddly. */
  #assets-view #active-filter-note { position: relative; z-index: 170; }
}

/* Dark mode: keep the frozen Assets toolbar opaque (var(--bg) already
   flips in dark mode, so this is just insurance for the shadow). */
body.dark #assets-view .toolbar { box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .5); }


/* ============================================================================
   ★ 26 Jul 2026 — MOBILE BOTTOM NAVIGATION (Canva / Facebook / Telegram style)
   MOBILE ONLY (max-width: 860px). Desktop is 100% untouched.

   Inspired by bottom-tab-bar best practice: 3–5 thumb-reachable destinations,
   icon + short label, a clearly highlighted active tab, and a "More" tab that
   opens a bottom sheet with every remaining section (the Canva pattern).

   Paste this WHOLE block at the very END of style.css, then bump the cache
   version in index.html (e.g. style.css?v=28).
============================================================================ */
:root { --mtabbar-h: 62px; }

/* ---- The bar is created by JS and hidden on desktop ---- */
.mtabbar { display: none; }

@media (max-width: 860px) {

  /* 1) Retire the old mobile drawer + hamburger — the bottom bar replaces it.
        (Desktop icon-rail is unaffected; this is inside the mobile query.) */
  #nav-toggle { display: none !important; }
  .sidebar { display: none !important; }
  #nav-backdrop { display: none !important; }
  body.nav-open { overflow: auto; }               /* clear any stuck lock */

  /* 2) Give page content room so the fixed bar never covers the last rows. */
  .main-area {
    margin-left: 0 !important;
    padding-bottom: calc(var(--mtabbar-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  /* 3) THE BAR ------------------------------------------------------------ */
  .mtabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 2400;
    height: calc(var(--mtabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #e5e7eb);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, .10);
    justify-content: space-around;
    align-items: stretch;
  }
  body.dark .mtabbar { background: #0b1220; border-top-color: #1e293b; box-shadow: 0 -6px 24px rgba(0,0,0,.5); }

  .mtab {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    border: 0; background: transparent; cursor: pointer;
    color: var(--muted, #6b7280);
    font: 600 10.5px/1.1 inherit;
    padding: 6px 2px 4px;
    min-height: 48px;                 /* thumb-friendly target */
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
    position: relative;
  }
  .mtab .mtab-ico { width: 24px; height: 24px; display: block; }
  .mtab .mtab-ico svg { width: 24px; height: 24px; display: block; stroke: currentColor; fill: none; }
  .mtab .mtab-label {
    max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Active tab: brand colour + a small pill highlight behind the icon (Canva-like). */
  .mtab.active { color: var(--primary, #e91e88); }
  .mtab.active .mtab-ico::after { content: none; }
  .mtab.active .mtab-ico {
    position: relative;
  }
  .mtab.active::before {
    content: "";
    position: absolute; top: 4px;
    width: 46px; height: 30px; border-radius: 16px;
    background: rgba(233, 30, 136, .12);
    z-index: 0;
  }
  .mtab .mtab-ico, .mtab .mtab-label { position: relative; z-index: 1; }
  body.dark .mtab.active::before { background: rgba(233, 30, 136, .22); }

  .mtab:active { transform: translateY(1px); }

  /* 4) "MORE" BOTTOM SHEET ------------------------------------------------- */
  .msheet-backdrop {
    position: fixed; inset: 0; z-index: 2450;
    background: rgba(15, 23, 42, .45);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
  }
  .msheet-backdrop.show { opacity: 1; visibility: visible; }

  .msheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2460;
    background: var(--surface, #fff);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .28);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
    padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 78vh; overflow-y: auto;
  }
  .msheet.show { transform: translateY(0); }
  body.dark .msheet { background: #0f172a; }

  .msheet-handle {
    width: 42px; height: 5px; border-radius: 999px;
    background: var(--border, #d1d5db); margin: 4px auto 12px;
  }
  .msheet-title {
    font: 800 .95rem/1.2 inherit; color: var(--text, #0f172a);
    margin: 0 4px 12px; display: flex; align-items: center; justify-content: space-between;
  }
  .msheet-close {
    border: 0; background: var(--surface-soft, #f1f5f9); color: var(--text, #334155);
    width: 30px; height: 30px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; line-height: 1;
  }
  body.dark .msheet-close { background: #1e293b; color: #e5e7eb; }

  .msheet-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%;
  }
  @media (max-width: 360px) { .msheet-grid { grid-template-columns: repeat(3, 1fr); } }

  .msheet-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 1px solid var(--border, #e5e7eb); border-radius: 14px;
    background: var(--surface, #fff); color: var(--text, #0f172a);
    padding: 12px 4px; cursor: pointer; text-align: center;
    font: 600 11px/1.15 inherit; min-height: 82px; justify-content: center;
    min-width: 0;                       /* let equal 1fr tracks win over long words */
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  /* Render the sheet icons as clean line-icons, exactly like the bottom bar /
     home-screen navigation items (they were showing as solid black shapes /
     missing because the SVG stroke/fill rule was scoped to .mtab only). */
  .msheet-item .mtab-ico { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
  .msheet-item .mtab-ico svg { width: 26px; height: 26px; display: block; stroke: currentColor; fill: none; }
  .msheet-item .msheet-emoji { font-size: 1.5rem; line-height: 1; }
  .msheet-item .msheet-lbl {
    width: 100%; max-width: 100%;
    white-space: normal; overflow-wrap: break-word; word-break: break-word;
    line-height: 1.15; hyphens: auto;
  }
  .msheet-item:active { transform: scale(.97); }
  .msheet-item.active { border-color: var(--primary, #e91e88); background: rgba(233,30,136,.08); color: var(--primary, #e91e88); }
  body.dark .msheet-item { background: var(--surface-soft, #1e293b); border-color: #334155; }
  body.dark .msheet-item.active { background: rgba(233,30,136,.18); }

  /* 5) Hide the bar whenever a full-screen layer owns the screen. */
  body.gated .mtabbar,
  body.account-mode .mtabbar,
  body.account-overlay-open .mtabbar { display: none !important; }

  /* Keep any open detail drawer / modals above the bar. */
  .drawer, .modal-overlay, .login-gate, #account-overlay { z-index: 3000; }
}


/* ============================================================================
   ★ 26 Jul 2026 — MOBILE HEADER REDESIGN v2 (≤860px only; desktop untouched)

   >>> This REPLACES the earlier "MOBILE HEADER REDESIGN" block. If you already
       pasted v1 into style.css, delete that block first, then paste this one
       (so you don't have two competing header blocks). <<<

   Layout goals from your latest feedback:
     • Brand = the HERO: bigger logo + bigger "MIA Inventory" text, centered.
     • Page title ("Dashboard") + subtitle centered, but SMALLER than the brand.
     • Backup panel: backup INFO on the LEFT, "Backup Now" button on the RIGHT.
     • Tools row: 🔍 search on the LEFT, 🌙 night-mode on the RIGHT.

       ┌───────────────────────────────────────────┐
       │ [← Back]        🪷  MIA Inventory          │  row 1 (HERO brand, centered,
       │                                             │         tap = My Account)
       │                 Dashboard                   │  row 2 (title, smaller)
       │            MIA International School …        │         + subtitle
       │ ┌─────────────────────────────────────────┐ │
       │ │ last backup… (LEFT)      [Backup Now] →  │ │  row 3a
       │ │ 🔍 (LEFT)                        🌙 (R)  │ │  row 3b
       │ └─────────────────────────────────────────┘ │
       └───────────────────────────────────────────┘

   Paste this WHOLE block at the very END of style.css, then bump the cache
   version in index.html (e.g. style.css?v=30).
============================================================================ */
@media (max-width: 860px) {

  /* The hamburger is retired on mobile (bottom bar handles nav). */
  #nav-toggle { display: none !important; }

  /* Top bar becomes a 3-row grid with balanced side columns so the brand
     stays perfectly centered whether or not Back is showing. */
  .main-area .topbar {
    display: grid !important;
    grid-template-columns: 68px 1fr 68px;
    grid-template-areas:
      "back  brand  spacer"
      "title title  title"
      "auth  auth   auth";
    align-items: center;
    gap: .55rem .4rem;
    padding: .8rem .8rem .8rem;
    text-align: center;
  }

  /* Row 1 — Back (icon-only, hard left), HERO brand (center), spacer (right).
     The button's HTML text ("← Back") is hidden and replaced by a single
     clean arrow glyph, so it stays small and never crowds the logo. */
  #back-btn {
    grid-area: back;
    justify-self: start;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-width: 40px; padding: 0;
    border-radius: 50%;
    font-size: 0;                 /* hide the "← Back" text */
    overflow: hidden;
  }
  #back-btn::before {
    content: "\2190";             /* ← left arrow */
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
  }

  .topbar-brand {
    grid-area: brand;
    justify-self: center;
    display: inline-flex !important; align-items: center; gap: .6rem;
    cursor: pointer; padding: .25rem .5rem; border-radius: 14px;
    transition: background .15s ease, transform .1s ease;
  }
  .topbar-brand:hover, .topbar-brand:focus-visible { background: rgba(233,30,136,.10); outline: none; }
  .topbar-brand:active { transform: scale(.97); }

  /* HERO logo + name — the biggest thing in the header */
  .topbar-logo { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; }
  .topbar-brand-name {
    font-size: 1.5rem; font-weight: 800; letter-spacing: .005em; line-height: 1.1;
  }

  /* Row 2 — page title + subtitle: centered, SMALLER than the brand.
     High-specificity + !important so the desktop base rule (e.g.
     ".main-area .topbar .topbar-title h2" or a "margin-right:auto") can't
     drag the title back to the left on mobile. */
  .main-area .topbar .topbar-title {
    grid-area: title;
    justify-self: center !important;   /* center the block within the grid row */
    margin: 0 auto !important;         /* kill any inherited margin-right:auto  */
    width: 100%;
    padding-top: .1rem;
    text-align: center !important;
  }
  .main-area .topbar .topbar-title h2 {
    margin: 0 !important;
    font-size: 1.2rem !important; line-height: 1.15; font-weight: 800;
    text-align: center !important; color: var(--text);
  }
  .main-area .topbar .topbar-title p {
    margin: .15rem 0 0 !important;
    font-size: .76rem; text-align: center !important; color: var(--muted);
  }

  /* Row 3 — auth / backup / tools grouped into one neat panel */
  #auth-container { grid-area: auth; width: 100%; }
  #auth-container #admin-status {
    display: flex; flex-direction: column; align-items: stretch;
    gap: .55rem;
    background: var(--surface-soft); border: 1px solid var(--border);
    border-radius: 14px; padding: .6rem .7rem;
  }

  /* 3a — backup INFO left, "Backup Now" button right */
  .topbar-backup {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; width: 100%; text-align: left;
  }
  .backup-last {
    order: 1; flex: 1 1 auto; min-width: 0;
    font-size: .72rem; line-height: 1.3; color: var(--muted); text-align: left;
  }
  .backup-now-btn {
    order: 2; flex: 0 0 auto; white-space: nowrap;
    padding: .5rem .9rem; font-weight: 800;
  }

  /* 3b — tools row: 🔍 far LEFT, 🌙 far RIGHT */
  #admin-status .topbar-tools {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: .5rem; margin: 0;
    padding-top: .5rem; border-top: 1px solid var(--border);
  }
  #admin-status .topbar-tools .tool-btn { width: 44px; height: 40px; }

  /* Logout stays hidden on mobile (lives in My Account). */
  #admin-status #logout-btn { display: none !important; }

  /* Login form (only when signed out / gate) fills the row cleanly. */
  #login-form { grid-area: auth; display: flex; flex-wrap: wrap; gap: .5rem; }
  #login-form input, #login-form button { flex: 1 1 auto; min-height: 42px; }

  body.dark #auth-container #admin-status { background: #0b1220; border-color: #1e293b; }
  body.dark #admin-status .topbar-tools { border-top-color: #1e293b; }
}

/* Extra squeeze for very small phones */
@media (max-width: 380px) {
  .topbar-brand-name { font-size: 1.32rem; }
  .topbar-logo { width: 42px; height: 42px; }
  .topbar-title h2 { font-size: 1.1rem; }
  .main-area .topbar { grid-template-columns: 56px 1fr 56px; }
}

/* ============================================================================
   ★ 26 Jul 2026 — MOBILE BOTTOM-NAV ACTIVE STATE: clean highlight (no pill)
   MOBILE ONLY (≤860px). Desktop untouched.

   You disliked the big filled circle/pill behind the active tab (screenshot 1)
   and preferred the simple look (screenshot 2): the active item is just the
   BRAND-PINK icon + pink label, with no heavy background.

   This is an APPEND-ONLY override — paste it at the very END of style.css,
   AFTER the "MOBILE BOTTOM NAVIGATION" block. It removes the filled pill and
   applies the clean coloured style to every nav item (bar tabs + More sheet).

   Then bump the cache version in index.html (e.g. style.css?v=33).
============================================================================ */
@media (max-width: 860px) {

  /* 1) Kill the filled pill behind the active bar tab (screenshot 1 look). */
  .mtabbar .mtab.active::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* 2) Active bar tab = brand-pink icon + label only (screenshot 2 look). */
  .mtabbar .mtab.active {
    color: var(--primary, #e91e88) !important;
    background: transparent !important;
  }
  .mtabbar .mtab.active .mtab-ico svg { stroke: var(--primary, #e91e88); }
  .mtabbar .mtab.active .mtab-label { color: var(--primary, #e91e88); font-weight: 800; }

  /* Inactive stays muted; add a soft press feedback instead of a fill. */
  .mtabbar .mtab { transition: color .15s ease; }
  .mtabbar .mtab:not(.active):active { color: var(--text, #334155); }

  /* 3) Same clean treatment inside the "More" bottom sheet: the active item
        loses its filled background and just turns pink (icon + label). */
  .msheet .msheet-item.active {
    background: transparent !important;
    border-color: var(--primary, #e91e88) !important;   /* subtle outline only */
    color: var(--primary, #e91e88) !important;
  }
  .msheet .msheet-item.active .mtab-ico svg { stroke: var(--primary, #e91e88); }
  .msheet .msheet-item.active .msheet-emoji { filter: none; }

  body.dark .mtabbar .mtab.active,
  body.dark .msheet .msheet-item.active { color: var(--primary, #e91e88) !important; }
}


/* ============================================================================
   ★ 26 Jul 2026 — NEW FEATURES STYLES (append-only)
   Covers: (1) Assignment Timeline, (2) offline banner, (3) QR scan FAB +
   camera overlay. Paste this WHOLE block at the very END of style.css, then
   bump the cache version in index.html (e.g. style.css?v=34).
============================================================================ */

/* ============================================================
   1) ASSIGNMENT TIMELINE (asset detail drawer)
============================================================ */
.asn-tl-wrap { margin-top: .4rem; }
.asn-tl-title {
  margin: 0 0 .7rem; font-size: .95rem; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: .5rem;
}
.asn-tl-count {
  background: var(--surface-soft, #f1f5f9); color: var(--muted, #64748b);
  border-radius: 999px; padding: .05rem .55rem; font-size: .72rem; font-weight: 800;
}
.asn-tl { list-style: none; margin: 0; padding: 0 0 0 .25rem; position: relative; }
.asn-tl::before {
  content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px;
  background: var(--border, #e2e8f0);
}
.asn-tl-item { position: relative; padding: 0 0 .8rem 1.4rem; }
.asn-tl-item:last-child { padding-bottom: 0; }
.asn-tl-dot {
  position: absolute; left: 0; top: .35rem; width: 14px; height: 14px;
  border-radius: 50%; background: #94a3b8; border: 3px solid var(--surface, #fff);
  box-shadow: 0 0 0 1px var(--border, #e2e8f0);
}
.asn-tl-item.active .asn-tl-dot { background: var(--primary, #e91e88); }
.asn-tl-card {
  background: var(--surface-soft, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px; padding: .6rem .7rem;
}
.asn-tl-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.asn-tl-who { font-weight: 800; color: var(--text, #0f172a); }
.asn-tl-badge { border-radius: 999px; padding: .1rem .5rem; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.asn-tl-badge.on { background: #dcfce7; color: #065f46; }
.asn-tl-badge.off { background: #e2e8f0; color: #475569; }
.asn-tl-range { margin-top: .25rem; font-size: .82rem; color: var(--text, #334155); font-weight: 600; }
.asn-tl-meta { margin-top: .2rem; font-size: .74rem; color: var(--muted, #64748b); }
body.dark .asn-tl-card { background: #1e293b; border-color: #334155; }
body.dark .asn-tl-dot { border-color: #0f172a; }
body.dark .asn-tl-badge.off { background: #334155; color: #cbd5e1; }
body.dark .asn-tl-count { background: #1e293b; color: #94a3b8; }

/* ============================================================
   2) OFFLINE BANNER (PWA)
============================================================ */
#net-banner {
  display: none; position: fixed; left: 0; right: 0; top: 0; z-index: 4200;
  background: #b45309; color: #fff; text-align: center;
  font-size: .82rem; font-weight: 700; padding: .4rem .8rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
body.is-offline #net-banner { display: block; }
/* Small "pending sync" pill shown when offline writes are queued. */
#sync-pill {
  display: none; position: fixed; z-index: 4200; right: 12px;
  bottom: calc(var(--mtabbar-h, 62px) + env(safe-area-inset-bottom, 0px) + 78px);
  background: #1e293b; color: #fff; border-radius: 999px; padding: .4rem .8rem;
  font-size: .76rem; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
#sync-pill.show { display: block; }

/* ============================================================
   3) QR SCAN — floating action button + camera overlay
============================================================ */
.qr-fab {
  position: fixed; z-index: 2350; right: 16px;
  bottom: calc(var(--mtabbar-h, 62px) + env(safe-area-inset-bottom, 0px) + 16px);
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary, #e91e88); color: #fff;
  box-shadow: 0 10px 26px rgba(233,30,136,.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.qr-fab:hover { box-shadow: 0 12px 30px rgba(233,30,136,.55); }
.qr-fab:active { transform: scale(.94); }
.qr-fab svg { width: 26px; height: 26px; stroke: #fff; fill: none; }
/* On desktop, park it a little higher-left of the corner so it doesn't clash. */
@media (min-width: 861px) { .qr-fab { bottom: 22px; right: 22px; } }

.qr-overlay {
  display: none; position: fixed; inset: 0; z-index: 3600;
  background: #000; color: #fff; flex-direction: column;
}
.qr-overlay.show { display: flex; }
.qr-video-wrap { position: relative; flex: 1 1 auto; overflow: hidden; background: #000; }
.qr-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
/* Scan reticle */
.qr-reticle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(72vw, 300px); height: min(72vw, 300px);
  border-radius: 22px; box-shadow: 0 0 0 4000px rgba(0,0,0,.45);
}
.qr-reticle::before {
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  border: 3px solid rgba(255,255,255,.9);
}
.qr-scanline {
  position: absolute; left: 8%; right: 8%; top: 10%; height: 3px;
  background: var(--primary, #e91e88); border-radius: 2px; box-shadow: 0 0 12px var(--primary, #e91e88);
  animation: qrscan 2s ease-in-out infinite;
}
@keyframes qrscan { 0%,100% { top: 10%; } 50% { top: 88%; } }
.qr-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #0b0b0b;
}
.qr-title { font-weight: 800; font-size: 1rem; }
.qr-hint { font-size: .8rem; color: #cbd5e1; text-align: center; padding: 10px 16px 0; }
.qr-btn {
  border: 0; border-radius: 12px; padding: .6rem 1rem; font-weight: 800; cursor: pointer;
  background: #1f2937; color: #fff; font-size: .9rem;
}
.qr-btn.primary { background: var(--primary, #e91e88); }
.qr-close {
  position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 1.5rem; line-height: 1;
}
.qr-error {
  margin: 12px 16px; padding: .7rem .9rem; border-radius: 12px;
  background: #7f1d1d; color: #fecaca; font-size: .85rem; font-weight: 700; text-align: center;
}

/* ============================================================================
   ★ 26 Jul 2026 — ASSET DETAIL DRAWER: back arrow + centered title + Edit btn
   Append-only. Paste this WHOLE block at the very END of style.css, then bump
   the cache version in index.html (e.g. style.css?v=35).

   • Turns the drawer header into a balanced 3-column row:
        [ ← back ]      centered TITLE + subtitle      [ × close ]
   • Centers "TV-75-000002" and "Smart TV 75inch • Vortech".
   • Styles the new Edit button that sits beside Consume.
============================================================================ */

/* --- Drawer header: back (left) · title (center) · close (right) --- */
#detail-drawer .drawer-header {
  display: grid !important;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: .5rem;
}
#detail-drawer .drawer-header > div {
  min-width: 0;
  text-align: center;            /* center the title block */
}
#detail-drawer #detail-title {
  text-align: center !important;
  margin: 0;
  overflow-wrap: anywhere;       /* long IDs wrap instead of overflowing */
}
#detail-drawer #detail-subtitle {
  text-align: center !important;
  margin: .2rem 0 0;
}

/* Back arrow (reuses your .icon-btn look), pinned hard-left */
#detail-drawer .drawer-back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; line-height: 1;
}
/* Close (×) stays hard-right */
#detail-drawer #close-drawer-btn {
  grid-column: 3;
  justify-self: end;
}

/* --- Edit button beside Consume --- */
.detail-edit-btn { margin-left: .1rem; }

/* ============================================================
   ★ 29 Jul 2026 — REDESIGNED ASSET DETAIL / QR-SCAN VIEW
   (hero highlights, grouped info cards, QR + vertical actions)
============================================================ */
.asset-detail-v2{display:block}

/* Hero: status badges + key highlights */
.ad-hero{
  background:linear-gradient(135deg,rgba(233,30,136,.10),rgba(233,30,136,.02));
  border:1px solid var(--border);border-radius:16px;padding:1rem;margin-bottom:1.1rem;
}
.ad-hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.ad-pill{
  display:inline-flex;align-items:center;padding:.28rem .7rem;border-radius:999px;
  font-size:.76rem;font-weight:800;border:1px solid var(--border);background:var(--surface);color:var(--text);
}
.ad-pill-cons{color:#7c3aed;border-color:#c4b5fd;background:rgba(124,58,237,.08)}
.ad-hero-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.ad-high{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem;display:grid;gap:.15rem}
.ad-high span{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.ad-high strong{font-size:.95rem;word-break:break-word}

/* Grouped info sections */
.ad-section{margin-bottom:1.1rem}
.ad-section>h3{margin:0 0 .6rem;font-size:.95rem;font-weight:800}
.ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.ad-field{background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem;display:grid;gap:.2rem}
.ad-field span{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.ad-field strong{font-size:.9rem;word-break:break-word}
.ad-notes{background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;padding:.75rem;white-space:pre-wrap;word-break:break-word}

/* QR + vertical action buttons (QR left, buttons stacked on the right) */
.ad-qr-card{
  display:flex;gap:1rem;align-items:stretch;background:var(--surface-soft);
  border:1px solid var(--border);border-radius:16px;padding:1rem;margin-bottom:.8rem;
}
.ad-qr-card .qr-large{flex:0 0 auto;width:168px;height:168px;margin:0}
.ad-qr-actions{display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;min-width:130px;justify-content:center}
.ad-btn{
  width:100%;text-align:left;padding:.7rem 1rem;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-weight:800;font-size:.88rem;cursor:pointer;transition:.15s ease;
  display:flex;align-items:center;gap:.55rem;
}
.ad-btn:hover{transform:translateY(-1px)}
.ad-ico{display:inline-flex;width:1.25rem;justify-content:center;flex:0 0 auto;font-size:.95rem}
.ad-btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.ad-btn-primary:hover{filter:brightness(1.05)}

body.dark .ad-btn{background:var(--surface-soft)}
body.dark .ad-btn:hover{background:#31425c}
body.dark .ad-hero{background:linear-gradient(135deg,rgba(233,30,136,.16),rgba(233,30,136,.04))}

@media (max-width:600px){
  .ad-qr-card .qr-large{width:132px;height:132px}
  .ad-qr-actions{min-width:110px}
}

/* ============================================================
   ★ 29 Jul 2026 — RECYCLE BIN: multi-type record badges
============================================================ */
.rec-type-badge{display:inline-flex;padding:.25rem .6rem;border-radius:999px;font-size:.72rem;font-weight:800;border:1px solid var(--border);white-space:nowrap}
.rec-type-asset{background:rgba(59,130,246,.12);color:#2563eb;border-color:#bfdbfe}
.rec-type-assign{background:rgba(16,185,129,.12);color:#059669;border-color:#a7f3d0}
.rec-type-maint{background:rgba(245,158,11,.14);color:#b45309;border-color:#fde68a}
.rec-type-cons{background:rgba(139,92,246,.12);color:#7c3aed;border-color:#ddd6fe}
body.dark .rec-type-asset{background:rgba(59,130,246,.2);color:#93c5fd}
body.dark .rec-type-assign{background:rgba(16,185,129,.2);color:#6ee7b7}
body.dark .rec-type-maint{background:rgba(245,158,11,.2);color:#fcd34d}
body.dark .rec-type-cons{background:rgba(139,92,246,.22);color:#c4b5fd}

/* ============================================================
   ★ 29 Jul 2026 (v2) — cleaner Assigned User / Maintenance history cards
   (replaces the old cramped rows + the removed Assignment Timeline)
============================================================ */
.hist-list{display:grid;gap:.6rem}
.hist-count{display:inline-flex;min-width:1.4rem;justify-content:center;padding:.05rem .45rem;margin-left:.35rem;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);font-size:.72rem;font-weight:800;color:var(--muted);vertical-align:middle}
.hist-empty{background:var(--surface-soft);border:1px dashed var(--border);border-radius:12px;padding:.85rem;color:var(--muted);font-weight:600}
.hist-card{background:var(--surface-soft);border:1px solid var(--border);border-radius:14px;padding:.8rem .9rem}
.hist-card-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.55rem}
.hist-who{font-weight:800;font-size:.98rem;color:var(--text);word-break:break-word}
.hist-date{font-size:.78rem;color:var(--muted);font-weight:700;white-space:nowrap}
.hist-chip{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap}
.hist-issue{font-size:.9rem;line-height:1.4;margin-bottom:.55rem;color:var(--text)}
.hist-fields{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.hist-field{display:grid;gap:.1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.4rem .55rem}
.hist-field span{font-size:.66rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.hist-field strong{font-size:.84rem;color:var(--text);word-break:break-word}
.hist-note{margin-top:.55rem;padding:.5rem .6rem;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:10px;font-size:.82rem;color:var(--muted);white-space:pre-wrap;word-break:break-word}
@media (max-width:600px){.hist-fields{grid-template-columns:1fr}}

/* Recycle-bin "Category" type badge */
.rec-type-cat{background:rgba(236,72,153,.12);color:#be185d;border-color:#f9a8d4}
body.dark .rec-type-cat{background:rgba(236,72,153,.22);color:#f9a8d4}

/* ============================================================
   ★ 29 Jul 2026 (v2) — Manage Categories modal
============================================================ */
.cat-manage-list{display:grid;gap:.5rem;max-height:52vh;overflow:auto;margin:.2rem 0 .4rem}
.cat-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;padding:.6rem .8rem}
.cat-row .cat-name{font-weight:700;word-break:break-word}
.cat-row .cat-inuse{font-size:.72rem;color:var(--muted);font-weight:700;margin-left:.5rem}
.cat-add-row{display:flex;gap:.5rem;margin:.2rem 0 .8rem}
.cat-add-row input{flex:1 1 auto;border:1px solid var(--border);border-radius:12px;padding:.6rem .7rem;background:var(--surface);color:var(--text)}
.cat-empty{color:var(--muted);padding:.75rem;text-align:center}

/* ============================================================================
 * ★ 29 Jul 2026 — DASHBOARD "DUPLICATE ASSET ID" WARNING BANNER (append-only)
 * Paste this WHOLE block at the VERY END of your style.css.
 * ========================================================================== */
.dup-banner {
  margin: 0 0 1rem;
  border: 1px solid #f59e0b;
  border-left: 6px solid #f59e0b;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .04));
  overflow: hidden;
  animation: dup-pop .25s ease;
}
@keyframes dup-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.dup-banner-inner {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .9rem 1rem;
}
.dup-banner-icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #b45309;
}
.dup-banner-body { flex: 1 1 auto; min-width: 0; display: grid; gap: .3rem; }
.dup-banner-title { font-size: 1rem; color: #92400e; font-weight: 800; }
.dup-banner-text { font-size: .88rem; color: var(--text); line-height: 1.4; }
.dup-banner-hint { font-size: .78rem; color: var(--muted); }
.dup-banner-hint code {
  background: rgba(0,0,0,.06); padding: .05rem .35rem; border-radius: 6px;
  font-size: .74rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dup-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .1rem; }
.dup-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--surface); border: 1px solid #f59e0b;
  font-size: .78rem; font-weight: 700; color: var(--text); white-space: nowrap;
}
.dup-chip b { color: #b45309; }
.dup-chip.dup-more { border-style: dashed; color: var(--muted); }

.dup-banner-actions { flex: 0 0 auto; display: flex; align-items: center; }
.dup-banner-btn {
  padding: .55rem .9rem; border-radius: 10px; border: 0;
  background: #f59e0b; color: #1f2937; font-weight: 800; font-size: .85rem;
  cursor: pointer; white-space: nowrap; transition: filter .15s ease, transform .15s ease;
}
.dup-banner-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Dark mode */
body.dark .dup-banner { background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.06)); }
body.dark .dup-banner-title { color: #fcd34d; }
body.dark .dup-banner-icon { color: #fbbf24; }
body.dark .dup-chip { background: var(--surface-soft); }
body.dark .dup-banner-hint code { background: rgba(255,255,255,.08); }

/* Mobile: stack the action button under the text */
@media (max-width: 640px) {
  .dup-banner-inner { flex-wrap: wrap; }
  .dup-banner-actions { width: 100%; }
  .dup-banner-btn { width: 100%; }
}

/* ============================================================================
 * ★ FEATURE 3 — "HEALTH CHECK" panel styles (append-only)
 * Also styles the shared Dashboard tools row used by Reports (Feature 6).
 * Paste this WHOLE block at the VERY END of your style.css.
 * ========================================================================== */
.dash-tools-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.dash-tool-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1rem; border-radius: 12px;
  background: var(--surface, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  font-weight: 800; font-size: .88rem; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.dash-tool-btn:hover { transform: translateY(-1px); background: var(--surface-soft, #f1f5f9); }
body.dark .dash-tool-btn { background: var(--surface-soft, #1e293b); }
body.dark .dash-tool-btn:hover { background: #31425c; }

/* Overlay + modal */
.hc-overlay, .rpt-overlay {
  display: none; position: fixed; inset: 0; z-index: 3500;
  background: rgba(15, 23, 42, .55);
  align-items: center; justify-content: center; padding: 1rem;
}
.hc-overlay.show, .rpt-overlay.show { display: flex; }
.hc-modal, .rpt-modal {
  width: 100%; max-width: 820px; max-height: 92vh; overflow: auto;
  background: var(--surface, #fff); color: var(--text, #0f172a);
  border-radius: 20px; padding: 1.1rem 1.2rem;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}
.hc-modal-head, .rpt-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
}
.hc-modal-head h2, .rpt-modal-head h2 { margin: 0; font-size: 1.2rem; }
.hc-head-actions, .rpt-head-actions { display: flex; align-items: center; gap: .5rem; }
.hc-rescan {
  padding: .45rem .8rem; border-radius: 10px; border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-soft, #f1f5f9); color: var(--text, #0f172a); font-weight: 700; cursor: pointer;
}
.hc-close, .rpt-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-soft, #f1f5f9); color: var(--muted, #64748b);
  font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  flex: 0 0 auto;
}
.hc-close:hover, .rpt-close:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; transform: rotate(90deg); }
body.dark .hc-close, body.dark .rpt-close { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark .hc-close:hover, body.dark .rpt-close:hover { background: #7f1d1d; border-color: #b91c1c; color: #fff; }

.hc-loading { padding: 1.5rem; text-align: center; color: var(--muted, #64748b); }
.hc-summary { font-weight: 700; margin-bottom: .8rem; color: #b45309; }
.hc-allclear { display: flex; align-items: center; gap: .5rem; padding: 1rem; border-radius: 12px;
  background: rgba(34, 197, 94, .12); border: 1px solid #86efac; color: #065f46; font-weight: 800; }
.hc-ok { font-size: 1.2rem; }

.hc-cards { display: grid; gap: .7rem; }
.hc-card { border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: .8rem .9rem; }
.hc-card.bad { border-left: 5px solid #ef4444; background: rgba(239, 68, 68, .05); }
.hc-card.ok { border-left: 5px solid #22c55e; opacity: .85; }
.hc-card-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .25rem; }
.hc-card-head strong { font-size: .98rem; }
.hc-badge { display: inline-flex; min-width: 1.6rem; justify-content: center; padding: .1rem .5rem;
  border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--surface-soft, #f1f5f9); color: var(--text, #0f172a); }
.hc-card.bad .hc-badge { background: #ef4444; color: #fff; }
.hc-card.ok .hc-badge { background: #22c55e; color: #fff; }
.hc-card-desc { font-size: .82rem; color: var(--muted, #64748b); margin-bottom: .5rem; }
.hc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hc-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: 999px; cursor: pointer;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  font-size: .78rem; font-weight: 700; color: var(--text, #0f172a);
}
.hc-chip:hover { border-color: var(--primary, #e91e88); }
.hc-chip-note { color: var(--muted, #64748b); font-weight: 600; }
.hc-chip.hc-more { cursor: default; border-style: dashed; color: var(--muted, #64748b); }
body.dark .hc-chip { background: var(--surface-soft, #1e293b); }

/* ============================================================================
 * ★ FEATURE 6 — "REPORTS" panel styles (append-only)
 * Paste this WHOLE block at the VERY END of your style.css.
 * (Overlay/modal shells are shared with health-check.snippet.css; if you also
 *  pasted that, these rules simply add the report-specific bits.)
 * ========================================================================== */
.rpt-loading { padding: 1.5rem; text-align: center; color: var(--muted, #64748b); }

.rpt-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-bottom: 1rem; }
.rpt-card { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: .7rem; text-align: center; background: var(--surface-soft, #f8fafc); }
.rpt-card b { display: block; font-size: 1.25rem; font-weight: 800; }
.rpt-card span { font-size: .72rem; color: var(--muted, #64748b); }
.rpt-card.blue { border-top: 3px solid #3b82f6; }
.rpt-card.green { border-top: 3px solid #22c55e; }
.rpt-card.cyan { border-top: 3px solid #06b6d4; }
.rpt-card.amber { border-top: 3px solid #f59e0b; }
.rpt-card.purple { border-top: 3px solid #8b5cf6; }

.rpt-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.rpt-btn {
  padding: .55rem .9rem; border-radius: 10px; border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff); color: var(--text, #0f172a); font-weight: 700; font-size: .85rem; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.rpt-btn:hover { transform: translateY(-1px); background: var(--surface-soft, #f1f5f9); }
.rpt-btn.primary { background: var(--primary, #e91e88); color: #fff; border-color: var(--primary, #e91e88); }
.rpt-btn.primary:hover { filter: brightness(1.06); }
body.dark .rpt-btn { background: var(--surface-soft, #1e293b); }
body.dark .rpt-btn:hover { background: #31425c; }

.rpt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rpt-block h3 { margin: 0 0 .5rem; font-size: .95rem; }
.rpt-table-wrap { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden; }
.rpt-table-wrap table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rpt-table-wrap th, .rpt-table-wrap td { padding: .5rem .65rem; border-bottom: 1px solid var(--border, #e2e8f0); text-align: left; }
.rpt-table-wrap th { background: var(--surface-soft, #f8fafc); font-weight: 800; }
.rpt-table-wrap td.r, .rpt-table-wrap th.r { text-align: right; }
.rpt-table-wrap tr:last-child td { border-bottom: 0; }
.rpt-empty { color: var(--muted, #64748b); text-align: center; }

/* Shared overlay/modal shell (safe to include even if health-check.css also has it) */
.rpt-overlay { display: none; position: fixed; inset: 0; z-index: 3500; background: rgba(15,23,42,.55); align-items: center; justify-content: center; padding: 1rem; }
.rpt-overlay.show { display: flex; }
.rpt-modal { width: 100%; max-width: 860px; max-height: 92vh; overflow: auto; background: var(--surface, #fff); color: var(--text, #0f172a); border-radius: 20px; padding: 1.1rem 1.2rem; box-shadow: 0 24px 70px rgba(15,23,42,.3); }
.rpt-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.rpt-modal-head h2 { margin: 0; font-size: 1.2rem; }
.rpt-head-actions { display: flex; align-items: center; gap: .5rem; }
.rpt-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--border, #e2e8f0); background: var(--surface-soft, #f1f5f9); color: var(--muted, #64748b); font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer; flex: 0 0 auto; transition: background .15s ease, color .15s ease, transform .15s ease; }
.rpt-close:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; transform: rotate(90deg); }

@media (max-width: 720px) {
  .rpt-cards { grid-template-columns: repeat(2, 1fr); }
  .rpt-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
 * ★ FEATURE 4 — "UPDATE AVAILABLE" TOAST styles (append-only)
 * Paste this WHOLE block at the VERY END of your style.css.
 * ========================================================================== */
.sw-update-toast {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 140%);
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: calc(100vw - 2rem);
  padding: .7rem .8rem .7rem 1rem;
  border-radius: 14px;
  background: #0f172a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .45);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.sw-update-toast.show { transform: translate(-50%, 0); opacity: 1; }

.sw-update-dot {
  flex: 0 0 auto;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .2);
  animation: sw-pulse 1.6s ease-in-out infinite;
}
@keyframes sw-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.sw-update-msg { font-size: .9rem; font-weight: 600; }

.sw-update-btn {
  flex: 0 0 auto;
  padding: .5rem .9rem;
  border-radius: 10px;
  border: 0;
  background: var(--primary, #e91e88);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.sw-update-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.sw-update-dismiss {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #cbd5e1;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.sw-update-dismiss:hover { color: #fff; background: rgba(255, 255, 255, .08); }

@media (max-width: 520px) {
  .sw-update-toast { left: 1rem; right: 1rem; transform: translateY(140%); width: auto; }
  .sw-update-toast.show { transform: translateY(0); }
  .sw-update-msg { font-size: .85rem; }
}

/* ============================================================================
 * ★ 29 Jul 2026 — REPORTS HUB (in-page Reports section) + BACKUP TIME GEAR
 * ========================================================================== */
.reports-hub { display: block; }
.reports-hub .rpt-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin: .4rem 0 1.1rem; }
.rpt-sec { margin: 1.2rem 0 .6rem; font-size: .98rem; font-weight: 800; color: var(--text, #0f172a); }
.rpt-btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .55rem; }
.rpt-btn-grid .rpt-btn { width: 100%; text-align: left; }
.reports-hub .rpt-grid { margin-top: 1.3rem; }

/* Daily backup time gear button (sits beside "Backup Now") */
.backup-settings-btn {
  padding: .5rem .7rem; font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-backup .backup-settings-btn { padding: .5rem .7rem; }

@media (max-width: 720px) {
  .reports-hub .rpt-cards { grid-template-columns: repeat(2, 1fr); }
  .rpt-btn-grid { grid-template-columns: 1fr 1fr; }
  .rpt-btn-grid .rpt-btn { text-align: center; }
}
@media (max-width: 460px) {
  .rpt-btn-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
 * ★ 30 Jul 2026 (v6) — MOBILE COLLAPSIBLE HEADER (Item 2)
 * Phones (≤860px): show only logo + "MIA Inventory" + page title in the frozen
 * bar. A small ⋯ button (top-left) reveals backup / search / theme / Log Out
 * as a slide-down panel. Desktop is completely unaffected.
 * ========================================================================== */
.mtools-toggle { display: none; }   /* hidden on desktop */

@media (max-width: 860px) {
  .topbar .mtools-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 0; flex: 0 0 auto; margin: 0;
    width: 40px; height: 40px; border-radius: 10px;
    background: transparent; border: 1px solid var(--border); color: var(--text);
  }
  .topbar .mtools-toggle.active {
    background: rgba(233, 30, 136, .12);
    border-color: var(--primary, #e91e88);
    color: var(--primary, #e91e88);
  }

  /* Collapse the signed-in tools cluster by default (beats inline display) */
  body:not(.mtools-open) #admin-status { display: none !important; }

  /* Reveal as a tidy full-width dropdown panel under the bar when toggled */
  body.mtools-open #admin-status {
    display: flex !important;
    order: 6; flex: 1 1 100%; width: 100%;
    flex-direction: column; align-items: stretch; gap: .7rem;
    padding: .75rem; margin-top: .4rem;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface-soft, #f1f5f9);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
    animation: mtoolsIn .18s ease;
  }
  body.dark.mtools-open #admin-status { background: #0f172a; border-color: #1e293b; }
  @keyframes mtoolsIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

  body.mtools-open #admin-status .topbar-backup { width: 100%; align-items: stretch; }
  body.mtools-open #admin-status #logout-btn { width: 100%; }
  body.mtools-open #admin-status #topbar-tools { display: flex; gap: .5rem; }
}