:root {
    --brand-navy: #15263B;
    --brand-amber: #E9A23B;
    --brand-slate: #64748B;
    --brand-page: #F5F7FA;
    --brand-surface: #FFFFFF;
    --brand-border: #D8E0E8;
    --brand-focus: #15263B;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --type-xs: 0.75rem;
    --type-sm: 0.875rem;
    --type-base: 1rem;
    --type-lg: 1.25rem;
    --line-body: 1.55;
    --line-heading: 1.25;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --control-height: 2.75rem;
    --radius-control: 0.5rem;
    --radius-surface: 0.75rem;
    --shadow-surface: 0 8px 24px -20px rgba(18, 40, 63, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: var(--font-sans);
            background: var(--brand-page);
            color: var(--brand-navy);
            line-height: var(--line-body);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem;
        }
        
        .login-container {
            max-width: 400px;
            margin: 5rem auto;
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .login-form h2 {
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
        .header {
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
        }
        
        .user-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .stat-card {
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: var(--brand-navy);
        }
        
        .controls {
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
        }
        
        .control-row {
            display: flex;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        /*new stuff*/
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 450px;
            overflow: hidden;
        }

        .card-header {
            background: var(--brand-navy);
            color: white;
            padding: 32px 24px;
            text-align: center;
        }

        .card-header h1 {
            font-size: 28px;
            margin-bottom: 8px;
        }

        .card-header p {
            font-size: 14px;
            opacity: 0.9;
        }

        .card-body {
            padding: 32px 24px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #374151;
        }

        input {
            width: 100%;
            padding: 12px;
            border: 2px solid var(--brand-border);
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.2s;
        }

        input:focus {
            outline: none;
            border-color: var(--brand-navy);
        }

        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .alert-success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #6ee7b7;
        }

        .alert-error {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fca5a5;
        }

        .alert-info {
            background: #dbeafe;
            color: #1e40af;
            border: 1px solid #93c5fd;
        }

        .password-requirements {
            font-size: 12px;
            color: var(--brand-slate);
            margin-top: 8px;
        }

        .password-requirements ul {
            list-style: none;
            padding-left: 0;
        }

        .password-requirements li {
            padding: 4px 0;
        }

        .password-requirements li::before {
            content: "• ";
            color: var(--brand-navy);
        }

        .password-strength {
            height: 4px;
            background: var(--brand-border);
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }

        .password-strength-bar {
            height: 100%;
            transition: all 0.3s;
            border-radius: 2px;
        }

        .strength-weak { width: 33%; background: #ef4444; }
        .strength-medium { width: 66%; background: #f59e0b; }
        .strength-strong { width: 100%; background: #10b981; }

        .back-link {
            text-align: center;
            margin-top: 24px;
        }

        .back-link a {
            color: var(--brand-navy);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
        }

        .back-link a:hover {
            text-decoration: underline;
        }

        .success-icon {
            text-align: center;
            font-size: 48px;
            margin-bottom: 16px;
        }

        .loading-spinner {
            text-align: center;
            padding: 40px;
        }

        .spinner {
            border: 3px solid var(--brand-page);
            border-top: 3px solid var(--brand-navy);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* end of new stuff*/
        
        input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
            padding: 0.5rem;
            border: 1px solid var(--brand-border);
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .search-box {
            flex: 1;
            min-width: 200px;
        }
        
        .btn {
            background: var(--brand-navy);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        .btn:hover {
            background: var(--brand-navy);
        }
        
        .btn:disabled {
            background: var(--brand-border);
            color: var(--brand-navy);
            opacity: 1;
            cursor: not-allowed;
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
        }
        
        .btn-success {
            background: #155724;
            color: #ffffff;
        }
        
        .btn-success:hover {
            background: #0f401b;
            color: #ffffff;
        }
        
        .btn-warning {
            background: #ffc107;
            color: #000;
        }

        .btn-warning:hover {
            background: #e5ac00;
            color: var(--brand-navy);
        }
        
        .inventory-table {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid var(--brand-border);
        }
        
        th {
            background: var(--brand-page);
            font-weight: 600;
        }
        
        tbody tr:hover {
            background: var(--brand-page);
        }
        
        .store-tag {
            padding: 0.2rem 0.5rem;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .store-central {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .store-customer_site {
            background: #f3e5f5;
            color: #7b1fa2;
        }
        
        .store-engineer {
            background: #e8f5e8;
            color: #388e3c;
        }
        
        .store-mine {
            background: #fff3e0;
            color: #f57c00;
            border: 2px solid #ff9800;
        }
        
        .wo-tag {
            background: var(--brand-page);
            padding: 0.1rem 0.3rem;
            border-radius: 4px;
            font-size: 0.75rem;
        }
        
        .low-stock {
            background: #ffebee;
            color: #c62828;
            font-weight: bold;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            max-height: calc(100vh - 2rem);
            max-height: calc(100dvh - 2rem);
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .form-group input, .form-group select {
            width: 100%;
        }
        
        .loading {
            text-align: center;
            padding: 2rem;
            color: var(--brand-navy);
        }
        
        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
        }
        
        .success {
            background: #d4edda;
            color: #155724;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
        }
        
        .demo-credentials {
            background: #e7f3ff;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 0.5rem;
            }
            
            table {
                font-size: 0.9rem;
            }
            
            th, td {
                padding: 0.5rem;
            }
            
            .control-row {
                flex-direction: column;
                align-items: stretch;
            }
            
            .search-box {
                min-width: auto;
            }
        }

        /* Better touch targets for mobile */
@media (max-width: 768px) {
    .btn {
        min-height: 44px; /* iOS recommended touch target */
        padding: 0.6rem 1rem;
    }
    
    .btn-sm {
        min-height: 38px;
        padding: 0.4rem 0.8rem;
    }
    
    /* Larger form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Responsive tables */
    .inventory-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
        font-size: 0.85rem;
    }
    
    th, td {
        padding: 0.5rem 0.3rem;
        white-space: nowrap;
    }
    
    /* Stack control buttons vertically on small screens */
    .control-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .control-row .btn {
        width: 100%;
    }
    
    .search-box {
        min-width: auto;
    }

    .search-box {
        width: 100%;
        min-width: auto;
    }
    
    /* Better modal sizing on mobile */
    .modal-content {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1.5rem;
    }
    
    /* Reduce header padding */
    .header {
        padding: 0.75rem;
    }
    
    .user-info {
        gap: 0.5rem;
    }
    
    /* Stats cards - 2 columns on mobile */
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .stat-card {
        padding: 0.75rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
}

/* Inventory task controls follow the existing blue/neutral application palette. */
body > [x-data="inventoryApp()"] { width: 100%; min-width: 0; }
body > [x-data="inventoryApp()"] > .card { margin-inline: auto; }
body > [x-data="inventoryApp()"] > .container { width: min(100%, 1280px); min-width: 0; padding: clamp(1rem, 2.4vw, 2rem); }
body > [x-data="inventoryApp()"] .header,
body > [x-data="inventoryApp()"] .inventory-controls,
body > [x-data="inventoryApp()"] .inventory-table,
body > [x-data="inventoryApp()"] .stat-card {
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-surface);
}
.inventory-controls { overflow: visible; }
.inventory-controls .btn { background: var(--brand-navy); color: #ffffff; }
.inventory-controls .btn:hover { background: var(--brand-navy); color: #ffffff; }
.inventory-controls .btn-success { background: #1c7430; }
.inventory-controls .btn-success:hover { background: #155b25; }
.inventory-toolbar .toolbar-actions > .btn:first-child,
.store-inventory-primary-action { background: var(--brand-amber); color: var(--brand-navy); font-weight: 700; }
.inventory-toolbar .toolbar-actions > .btn:first-child:hover,
.store-inventory-primary-action:hover { background: #D78B25; color: var(--brand-navy); }
.stock-table .btn:not(.btn-warning):not(.btn-consume):not(.btn-danger) { background: var(--brand-navy); color: #ffffff; }
.stock-table .btn:not(.btn-warning):not(.btn-consume):not(.btn-danger):hover { background: var(--brand-navy); color: #ffffff; }
.stock-table .btn-danger { background: #dc3545; color: #ffffff; }
.stock-table .btn-danger:hover { background: #bb2d3b; color: #ffffff; }
.stock-table .btn-consume { background: var(--brand-amber); color: var(--brand-navy); }
.stock-table .btn-consume:hover { background: #D78B25; color: var(--brand-navy); }
.stock-table .btn-warning:hover { background: #e5ac00; color: var(--brand-navy); }
.view-heading, .inventory-toolbar, .toolbar-actions {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
}
.view-heading h2 { font-size: var(--type-lg); line-height: var(--line-heading); overflow-wrap: anywhere; }
.inventory-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-page);
}
.inventory-panel-heading-content { flex: 1 1 14rem; min-width: 0; }
.inventory-panel-title { font-size: var(--type-lg); line-height: var(--line-heading); overflow-wrap: anywhere; }
.inventory-panel-meta { margin-top: var(--space-1); color: var(--brand-slate); font-size: var(--type-sm); }
.equipment-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.equipment-summary-due { color: #92400e; }
.equipment-summary-overdue { color: #991b1b; }
.inventory-panel-actions {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}
.inventory-panel-actions > .btn,
.inventory-panel-actions > label.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    max-width: 100%;
    margin: 0;
}
.inventory-panel-actions :focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.primary-navigation-shell { margin-top: var(--space-3); }
.mobile-nav-toggle { display: none; }
.inventory-nav, .management-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.management-actions { margin-top: var(--space-3); }
.inventory-nav .btn { background: var(--brand-page); color: var(--brand-navy); }
.inventory-nav .btn:hover { background: var(--brand-border); }
.inventory-nav .btn.is-active { background: var(--brand-navy); color: #ffffff; }
.management-menu { margin-top: var(--space-3); border-top: 1px solid var(--brand-border); padding-top: var(--space-2); }
.management-menu summary { cursor: pointer; font-weight: 600; padding: var(--space-2) 0; width: fit-content; }
.inventory-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--brand-border); }
.filter-field { flex: 1 1 240px; min-width: 0; }
.filter-field label, .store-search label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.inventory-filters input, .inventory-filters select, .store-search input {
    width: 100%; min-width: 0; min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: 1px solid #778899;
    border-radius: var(--radius-control); color: var(--brand-navy); background: white; font: inherit;
}
.inventory-filters input::placeholder, .store-search input::placeholder { color: #596774; opacity: 1; }
.inventory-toolbar { margin-top: 1rem; }
.inventory-toolbar p, .store-search p { color: #465561; font-size: var(--type-sm); }
.store-search { padding: var(--space-4); max-width: 650px; }
.stock-empty { padding: 1.5rem; text-align: center; color: #465561; }
.stock-empty .btn { margin-top: 0.5rem; }
.refresh-warning { margin-top: 0.75rem; color: #704b00; }
.stock-table td { overflow-wrap: anywhere; }
.stock-table td[data-label="Quantity"] { font-variant-numeric: tabular-nums; }
.stock-table td[data-label="Part number"] strong { font-size: 1.05rem; }
.stock-table td[data-label="Quantity"] strong { font-size: 1.15rem; line-height: 1.2; }
.stock-table td[data-label="Actions"] .btn { margin: 0.2rem 0; }
.stock-row-actions { display: block; width: 100%; }
.stock-action-menu { position: relative; width: 100%; max-width: 12rem; }
.stock-action-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    width: 100%; min-height: 44px; padding: 0.55rem 0.75rem;
    border: 1px solid var(--brand-border); border-radius: var(--radius-control);
    background: var(--brand-surface); color: var(--brand-navy); font: inherit; font-weight: 600;
    cursor: pointer; list-style: none;
}
.stock-action-trigger::-webkit-details-marker { display: none; }
.stock-action-trigger::marker { content: ""; }
.stock-action-trigger::after {
    content: ""; width: 0.4rem; height: 0.4rem; flex: 0 0 auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.1rem); transition: transform 120ms ease;
}
.stock-action-menu[open] > .stock-action-trigger::after { transform: rotate(225deg) translateY(-0.1rem); }
.stock-action-menu__items {
    display: flex; flex-direction: column; gap: 0.125rem;
    margin-top: var(--space-2); padding: var(--space-1);
    border: 1px solid var(--brand-border); border-radius: var(--radius-control);
    background: var(--brand-surface); box-shadow: var(--shadow-surface);
}
.stock-action-item {
    display: block; width: 100%; min-height: 40px; padding: 0.55rem 0.65rem;
    border: 0; border-radius: calc(var(--radius-control) - 2px);
    background: transparent; color: var(--brand-navy); font: inherit; text-align: left; cursor: pointer;
}
.stock-action-item:hover { background: var(--brand-page); }
.stock-action-trigger:focus-visible, .stock-action-item:focus-visible {
    outline: 3px solid var(--brand-focus); outline-offset: 2px;
}
.inventory-controls .btn:disabled { opacity: 1; cursor: not-allowed; }
.inventory-controls :focus-visible, .store-search :focus-visible, .stock-table .btn:focus-visible {
    outline: 3px solid var(--brand-focus); outline-offset: 3px;
}
@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height);
        padding: var(--space-2) var(--space-3); border: 1px solid var(--brand-border); border-radius: var(--radius-control);
        background: var(--brand-surface); color: var(--brand-navy); font: inherit; font-weight: 600;
    }
    .mobile-nav-toggle svg { width: 1.15rem; height: 1.15rem; }
    .mobile-nav-toggle:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
    .inventory-nav { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-2); }
    .inventory-nav.is-open { display: grid; }
    .inventory-nav .btn { min-height: var(--control-height); justify-content: flex-start; }
    .inventory-filters { display: grid; grid-template-columns: minmax(0, 1fr); }
    .inventory-filters .btn, .inventory-filters select { width: 100%; }
    .inventory-controls .btn, .management-menu summary, .stock-table .btn { min-height: 44px; }
    .inventory-toolbar { align-items: flex-start; }
    .toolbar-actions { justify-content: flex-start; }
    .inventory-panel-heading { align-items: flex-start; padding: var(--space-4); }
    .inventory-panel-actions { width: 100%; justify-content: flex-start; }
    .inventory-panel-actions > .btn:not(.ui-icon-only),
    .inventory-panel-actions > label.btn { flex: 1 1 9rem; min-height: 44px; white-space: normal; }
    .inventory-panel-actions > .ui-icon-only { flex: 0 0 44px; width: 44px; min-height: 44px; margin-left: auto; }
    .inventory-table { max-width: 100%; min-width: 0; }
    .stock-table { display: block; width: 100%; min-width: 0; font-size: var(--type-base); }
    .stock-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .stock-table tbody { display: block; }
    .stock-table tr { display: block; margin: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--brand-border); border-radius: var(--radius-control); background: var(--brand-surface); }
    .stock-table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border: 0; white-space: normal; }
    .stock-table td::before { content: attr(data-label); font-size: var(--type-xs); font-weight: 600; color: #465561; }
    .stock-cell-value { min-width: 0; }
    .stock-table td[data-label="Actions"] { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .stock-table td[data-label="Actions"]::before { flex-basis: 100%; }
    .stock-table td[data-label="Actions"] .stock-cell-value { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .stock-table td[data-label="Actions"] .stock-row-actions { display: block; width: 100%; }
    .stock-table .store-tag, .stock-table .wo-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .store-search input { min-height: 44px; font-size: 16px; }
    .in-transit-transfers-table, .in-transit-transfers-table tbody { display: block; width: 100%; min-width: 0; }
    .in-transit-transfers-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .in-transit-transfers-table tr { display: block; padding: .5rem .75rem; border: 1px solid var(--brand-border); border-radius: 8px; background: #fff; margin-bottom: .75rem; }
    .in-transit-transfers-table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .35rem 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
    .in-transit-transfers-table td::before { content: attr(data-label); font-size: .75rem; font-weight: 600; color: #465561; }
    .in-transit-transfers-table td[data-label="Action"] .btn { width: 100%; min-height: 44px; white-space: normal; }
    .parts-management-table, .parts-management-table tbody { display: block; width: 100%; min-width: 0; }
    .parts-management-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .parts-management-table tr { display: block; padding: .5rem .75rem; border: 1px solid var(--brand-border); border-radius: 8px; background: #fff; margin-bottom: .75rem; }
    .parts-management-table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .35rem 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
    .parts-management-table td::before { content: attr(data-label); font-size: .75rem; font-weight: 600; color: #465561; }
    .parts-management-table td[data-label="Actions"] { display: flex; flex-wrap: wrap; gap: .5rem; }
    .parts-management-table td[data-label="Actions"]::before { flex-basis: 100%; }
    .parts-management-table td[data-label="Actions"] .btn { flex: 1 1 100px; min-height: 44px; }
    .inventory-reference-table, .inventory-reference-table tbody { display: block; width: 100%; min-width: 0; }
    .inventory-reference-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .inventory-reference-table tr { display: block; padding: .5rem .75rem; border: 1px solid var(--brand-border); border-radius: 8px; background: #fff; margin-bottom: .75rem; }
    .inventory-reference-table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .35rem 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
    .inventory-reference-table td::before { content: attr(data-label); font-size: .75rem; font-weight: 600; color: #465561; }
    .inventory-reference-table td[data-label="Action"], .inventory-reference-table td[data-label="Actions"] { display: flex; flex-wrap: wrap; gap: .5rem; }
    .inventory-reference-table td[data-label="Action"]::before, .inventory-reference-table td[data-label="Actions"]::before { flex-basis: 100%; }
    .inventory-reference-table td[data-label="Action"] .btn { min-height: 44px; }
    .inventory-reference-table td[data-label="Actions"] .btn { flex: 1 1 110px; min-height: 44px; }
}

/* Tablet improvements */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 1rem;
    }
    
    .control-row {
        gap: 0.5rem;
    }
    
    table {
        font-size: 0.9rem;
    }
}

/* Better scrolling for horizontal tables */
.inventory-table::-webkit-scrollbar {
    height: 8px;
}

.inventory-table::-webkit-scrollbar-track {
    background: var(--brand-page);
    border-radius: 4px;
}

.inventory-table::-webkit-scrollbar-thumb {
    background: var(--brand-slate);
    border-radius: 4px;
}

.inventory-table::-webkit-scrollbar-thumb:hover {
    background: var(--brand-navy);
}

/* Better loading state */
.loading {
    padding: 3rem;
    text-align: center;
}

.loading::after {
    content: "...";
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60%, 100% { content: "..."; }
}

/* Touch-friendly quantity display */
td strong {
    font-size: 1.1em;
    display: inline-block;
    min-width: 30px;
    text-align: center;
}

/* Better focus states for accessibility */
input:focus,
select:focus,
button:focus {
    outline: 2px solid var(--brand-navy);
    outline-offset: 2px;
}

/* Improve tag readability */
.store-tag,
.wo-tag {
    display: inline-block;
    white-space: nowrap;
}

/* Better error/success messages on mobile */
.error,
.success {
    margin: 0.5rem;
    padding: 0.75rem;
    font-size: 0.9rem;
}

/* Sticky table header for long lists */
@media (min-width: 769px) {
    .inventory-table table thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--brand-page);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}

/* Better file input styling */
input[type="file"] {
    display: none;
}

label.btn {
    margin: 0;
}

/* Grid improvements for filters */
@media (max-width: 768px) {
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: var(--brand-page);
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--brand-border);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Calibration meaning stays visible in text and a compact badge; rows use a light accent. */
.stock-table tr.overdue-cal { border-left: 4px solid #dc2626; }
.stock-table tr.urgent-cal { border-left: 4px solid #ea580c; }
.stock-table tr.soon-cal { border-left: 4px solid #f59e0b; }
.stock-table tr.ok-cal { border-left: 4px solid #10b981; }
.equipment-calibration-status { max-width: 100%; padding: .25rem .625rem; border-radius: var(--radius-control); font-size: var(--type-xs); font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.equipment-calibration-status--overdue { background: #fee2e2; color: #991b1b; }
.equipment-calibration-status--urgent { background: #fed7aa; color: #9a3412; }
.equipment-calibration-status--soon { background: #fef3c7; color: #92400e; }
.equipment-calibration-status--ok { background: #d1fae5; color: #065f46; }
.equipment-calibration-status--none { background: #f1f5f9; color: #334155; }
.equipment-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Equipment status badges */
.equipment-status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.equipment-status.active {
    background: #d1fae5;
    color: #065f46;
}

.equipment-status.inactive {
    background: var(--brand-page);
    color: var(--brand-navy);
}

.equipment-status.maintenance {
    background: #fef3c7;
    color: #92400e;
}

/* Equipment history timeline */
.equipment-history-item {
    position: relative;
    padding-left: 2rem;
    padding-bottom: 1.5rem;
    border-left: 2px solid var(--brand-border);
}

.equipment-history-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.equipment-history-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-navy);
    border: 2px solid white;
}

.equipment-history-item.calibrated::before {
    background: #10b981;
}

.equipment-history-item.transferred::before {
    background: #f59e0b;
}

.equipment-history-item.created::before {
    background: #3b82f6;
}

.equipment-history-item.deleted::before {
    background: #dc2626;
}

/* Calibration badge styles for table */
.cal-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.cal-badge.overdue {
    background: #fee2e2;
    color: #991b1b;
}

.cal-badge.urgent {
    background: #fed7aa;
    color: #9a3412;
}

.cal-badge.soon {
    background: #fef3c7;
    color: #92400e;
}

.cal-badge.ok {
    background: #d1fae5;
    color: #065f46;
}

.cal-badge.none {
    background: var(--brand-page);
    color: var(--brand-navy);
}

/* Equipment card hover effect */
.equipment-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.equipment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments for equipment table */
@media (max-width: 768px) {
    .equipment-table th:nth-child(4), 
    .equipment-table td:nth-child(4) {
        display: none; /* Hide assigned to column on mobile */
    }
    
    .equipment-table th:nth-child(5), 
    .equipment-table td:nth-child(5) {
        display: none; /* Hide last calibration on mobile */
    }
}

@media (max-width: 480px) {
    .equipment-table th:nth-child(2), 
    .equipment-table td:nth-child(2) {
        display: none; /* Hide make/model on very small screens */
    }
}

/* Add to mystyle.css */
@media (max-width: 768px) {
    /* Hamburger menu for mobile */
    .mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1000;
        background: var(--brand-navy);
        color: white;
        border: none;
        padding: 0.75rem;
        border-radius: 8px;
        cursor: pointer;
    }
    
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: white;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        transition: right 0.3s;
        z-index: 999;
        overflow-y: auto;
        padding: 2rem 1rem;
    }
    
    .mobile-menu.open {
        right: 0;
    }
    
    .mobile-menu-item {
        padding: 1rem;
        border-bottom: 1px solid #eee;
        cursor: pointer;
    }
}

/* Replenishment follows the inventory controls and responsive stock tables. */
.replenishment-panel { margin-top: 1.5rem; background: white; padding: 1.5rem; border-radius: 8px; }
.replenishment-panel > .inventory-panel-heading { margin: -1.5rem -1.5rem 1.5rem; border-radius: 8px 8px 0 0; }
.replenishment-panel h3 { margin-bottom: .75rem; }
.replenishment-panel .table-responsive { overflow-x: auto; }
.replenishment-panel .btn { background: var(--brand-navy); color: #ffffff; }
.replenishment-panel .btn:hover { background: var(--brand-navy); color: #ffffff; }
.replenishment-panel .btn:disabled { opacity: 1; cursor: not-allowed; }
.replenishment-panel .btn:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.replenishment-copy { max-width: 72ch; line-height: 1.55; }
.minimum-settings { margin: 1.5rem 0 2rem; padding: 1rem 0; border-block: 1px solid var(--brand-border); }
.minimum-settings summary { font-weight: 600; cursor: pointer; padding: .5rem 0; }
.minimum-form { display: grid; grid-template-columns: minmax(10rem,1fr) minmax(14rem,2fr) minmax(8rem,1fr); gap: 1rem; }
.minimum-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .75rem; }
.replenishment-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; margin-block: 1.5rem 1rem; }
.replenishment-toolbar label { display: block; margin-bottom: .5rem; }
.movement-history-toolbar > div { min-width: 0; }
.replenishment-table .stock-cell-value { display: flex; flex-direction: column; gap: .4rem; overflow-wrap: anywhere; }
.replenishment-suggestions > div { display: flex; flex-direction: column; align-items: start; gap: .4rem; margin-bottom: .75rem; }
.source-owner-note { color: var(--brand-slate); font-size: .875rem; }
.replenishment-panel input:focus-visible, .replenishment-panel select:focus-visible, .minimum-settings summary:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
@media (max-width: 768px) {
    .minimum-form { grid-template-columns: minmax(0,1fr); }
    .replenishment-toolbar > div { width: 100%; }
    .replenishment-toolbar select { width: 100%; }
    .replenishment-panel button, .replenishment-panel input, .replenishment-panel select { min-height: 44px; }
    .movement-history-panel .movement-history-toolbar > div { width: 100%; min-width: 0; }
    .movement-history-panel .movement-history-toolbar select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
    .movement-history-panel .movement-history-toolbar input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 48px;
        padding: .65rem .75rem;
        border: 1px solid #b8c4d1;
        border-radius: .5rem;
        background-color: #fff;
        color: var(--brand-navy);
        font: inherit;
        font-size: 16px;
    }
    .movement-history-panel .movement-history-toolbar input[type="date"]::-webkit-datetime-edit { min-width: 0; padding: 0; }
    .movement-history-panel .movement-history-toolbar input[type="date"]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
    .movement-history-panel .movement-history-toolbar input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; padding: .15rem; cursor: pointer; }
    .movement-history-panel .movement-history-toolbar input[type="date"]:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }
}

/* Recorded evidence uses the existing responsive stock table. */
.audit-panel h3 { margin-bottom: .75rem; }
.audit-panel .stock-cell-value { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.audit-details { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; line-height: 1.5; margin-block: .75rem; max-width: 75ch; }
.audit-panel summary { cursor: pointer; padding: .5rem 0; }
.audit-panel :focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
@media(max-width:768px) { .audit-panel input, .audit-panel select, .audit-panel button, .audit-panel summary { min-height: 44px; } }
/* Read-only consumption reports */
.report-filters fieldset { border:0; padding:0; margin:1rem 0; display:grid; grid-template-columns:minmax(0,1fr); align-items:end; gap:1.25rem; }
.report-filters label { display:flex; flex-direction:column; gap:.35rem; max-width:100%; margin:0; }
.report-filters input:not([type="checkbox"]),.report-filters select { max-width:100%; min-height:2.5rem; }
.report-table-wrap { overflow-x:auto; margin:.75rem 0 1.5rem; }
.report-table-wrap table { width:100%; border-collapse:collapse; }
.report-table-wrap th,.report-table-wrap td { padding:.75rem; text-align:left; border-bottom:1px solid var(--brand-border); overflow-wrap:anywhere; }
.report-table-wrap td { font-variant-numeric:tabular-nums; }
.report-table-wrap th { background:var(--brand-page); }
.report-summary { margin:1.25rem 0; }
.report-error { color:#991b1b; }
.report-pagination { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
@media(max-width:600px) {
    .report-table-wrap table.consumption-report-table { min-width:0; }
    .consumption-report-table, .consumption-report-table tbody { display:block; width:100%; min-width:0; }
    .consumption-report-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    .consumption-report-table tr { display:block; padding:.5rem .75rem; border:1px solid var(--brand-border); border-radius:8px; background:#fff; margin-bottom:.75rem; }
    .consumption-report-table td { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:.75rem; align-items:center; padding:.35rem 0; border:0; white-space:normal; overflow-wrap:anywhere; }
    .consumption-report-table td::before { content:attr(data-label); font-size:.75rem; font-weight:600; color:var(--brand-slate); }
    .consumption-report-table td[data-label="Work order"] .btn { max-width:100%; min-height:44px; white-space:normal; overflow-wrap:anywhere; }
}
@media(min-width:601px) { .report-filters fieldset { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1100px) { .report-filters fieldset { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.report-filters .report-all-dates { grid-column:1 / -1; }
.report-filters button[type="submit"] { justify-self:start; max-width:100%; }

.report-filters .report-all-dates { flex-direction:row; align-items:center; gap:.5rem; min-height:44px; margin-bottom:0; cursor:pointer; }
.report-filters input[type="checkbox"] { width:18px; height:18px; min-height:0; padding:0; margin:0; flex:0 0 18px; accent-color:var(--brand-navy); }
.report-filters input[type="checkbox"]:focus-visible { outline:2px solid var(--brand-navy); outline-offset:3px; }

/* Allow report controls to shrink inside narrow mobile viewports. */
.reports-panel,.report-filters,.report-filters fieldset,.report-table-wrap { min-width:0; max-width:100%; }
.report-filters fieldset { min-inline-size:0; width:100%; }
.report-filters label { min-width:0; }
.report-filters input:not([type="checkbox"]),.report-filters select { width:100%; min-width:0; }

/* Native date editors must also fit within their flex-column labels. */
.report-filters input[type="date"] { -webkit-appearance:none; appearance:none; box-sizing:border-box; display:block; width:100%; inline-size:100%; min-inline-size:0; max-inline-size:100%; align-self:stretch; padding:.5rem; }
.report-filters input[type="date"]::-webkit-datetime-edit { min-width:0; padding:0; }
.report-filters input[type="date"]::-webkit-date-and-time-value { min-width:0; text-align:left; }

/* Keep the compact account disclosure aligned with the application header. */
.header-actions {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    max-width: 100%;
}
.account-menu { position: relative; display: inline-flex; }
.account-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .55rem .8rem;
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    background: var(--brand-surface);
    color: var(--brand-navy);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.account-menu-trigger:hover, .account-menu-trigger[aria-expanded="true"] {
    border-color: var(--brand-slate);
    background: var(--brand-page);
}
.account-menu-trigger:focus-visible, .account-menu-item:focus-visible {
    outline: 3px solid var(--brand-focus);
    outline-offset: 3px;
}
.account-menu-trigger .ui-icon { width: 20px; height: 20px; }
.account-menu-chevron {
    width: 7px;
    height: 7px;
    margin: -4px 0 0 .1rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.account-menu-trigger[aria-expanded="true"] .account-menu-chevron {
    margin-top: 4px;
    transform: rotate(225deg);
}
.account-menu-panel {
    position: absolute;
    z-index: 1200;
    top: calc(100% + .5rem);
    right: 0;
    width: max-content;
    min-width: 208px;
    max-width: min(90vw, 320px);
    padding: .35rem;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    background: var(--brand-surface);
    box-shadow: 0 12px 30px rgba(21, 38, 59, .18);
}
.account-menu-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-height: 44px;
    padding: .6rem .75rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--brand-navy);
    font: inherit;
    font-size: .9rem;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.account-menu-item:hover { background: var(--brand-page); color: var(--brand-navy); }
.account-menu-item .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.account-menu-signout { margin-top: .25rem; border-top: 1px solid var(--brand-border); border-radius: 0 0 6px 6px; }
@media (max-width: 768px) {
    .header-actions { width: auto; justify-content: flex-end; margin-left: auto; }
}
@media (max-width: 480px) {
    .account-menu-label, .account-menu-chevron { display: none; }
    .account-menu-trigger {
        width: 48px;
        min-height: 48px;
        padding: .6rem;
        border: 0;
        border-radius: 10px;
        background: transparent;
    }
    .account-menu-panel {
        box-sizing: border-box;
        width: min(280px, calc(100vw - 24px));
        min-width: 0;
    }
    .account-menu-item { min-height: 48px; }
}

/* Timezone preferences stay within the profile card on narrow screens. */
.timezone-settings { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--brand-border); min-width: 0; }
.timezone-settings p, .timezone-note { font-size: .85rem; line-height: 1.5; overflow-wrap: anywhere; }
.timezone-settings label { display: block; margin: .75rem 0 .35rem; }
.timezone-settings select { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin-bottom: 1rem; padding: .7rem; }
.timezone-settings button { max-width: 100%; white-space: normal; }

/* Keep every native date control usable in narrow mobile form layouts. */
@media (max-width: 768px) {
    input[type="date"], input[type="datetime-local"] {
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 48px;
        padding: .65rem .75rem;
        border: 1px solid #b8c4d1;
        border-radius: .5rem;
        background-color: #fff;
        color: var(--brand-navy);
        font: inherit;
        font-size: 16px;
    }
    input[type="date"]:focus-visible, input[type="datetime-local"]:focus-visible {
        outline: 3px solid var(--brand-navy);
        outline-offset: 2px;
    }
    input[type="date"]::-webkit-datetime-edit,
    input[type="datetime-local"]::-webkit-datetime-edit { min-width: 0; }
    input[type="date"]::-webkit-date-and-time-value,
    input[type="datetime-local"]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator { margin: 0; padding: .15rem; cursor: pointer; }
}

/* Linked Spares Tracker wordmark in the application header. */
.header-brand-heading { margin: 0 0 .25rem; font-size: inherit; line-height: 1.2; }
.header-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    color: var(--brand-navy);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.03em;
    text-decoration: none;
}
.header-brand img { display: block; width: 36px; height: 36px; flex: 0 0 36px; }
.header-brand:hover { text-decoration: underline; text-decoration-color: var(--brand-amber); text-underline-offset: 4px; }
.header-brand:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; border-radius: 3px; }