/* ─── Variables ─────────────────────────────────────────────── */
:root {
    --nav-h: 56px;
    --sidebar-w: 210px;
    --primary: #1F5C99;
    --primary-light: #e8f1f9;
}

/* ─── Base ──────────────────────────────────────────────────── */
body { background: #f4f6f9; font-size: 14px; }

.app-navbar {
    min-height: var(--nav-h);
    position: relative;
    z-index: 1030; /* keeps expanded mobile menu above all page content */
}

/* ─── Login ─────────────────────────────────────────────────── */
.login-page {
    background: linear-gradient(135deg, #1a3d6b 0%, #1F5C99 55%, #4a90d9 100%);
    min-height: 100vh;
    padding: 1.5rem;
}
.login-card {
    width: 100%;
    max-width: 440px;
    border-radius: 18px;
    border: none;
}
.login-logo {
    width: 72px; height: 72px;
    border-radius: 20px;
    background: var(--primary-light);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.2rem; color: var(--primary);
}
.user-btn {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 12px 16px;
    transition: all .18s ease;
    cursor: pointer;
    color: #212529;
}
.user-btn:hover {
    background: var(--primary-light);
    border-color: #90b8e0;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(31,92,153,.18);
}
.user-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.user-avatar-admin { background: #fff3cd; color: #856404; }

/* ─── Dashboard ─────────────────────────────────────────────── */
.inv-card {
    border-radius: 14px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.inv-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
}
.inv-active  { border-left: 4px solid #198754 !important; }
.inv-closed  { border-left: 4px solid #adb5bd !important; opacity: .88; }
.stat-box {
    background: #f4f6f9;
    transition: background .15s;
}
.empty-state { padding: 80px 20px; }

/* ─── Inventory full-screen layout ──────────────────────────── */
.inv-body { overflow: hidden; }

.inv-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-h));
    overflow: hidden;
}
.inv-topbar {
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.mobile-shelf-bar { flex-shrink: 0; }
.mobile-shelf-options {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    min-width: 0;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.mobile-shelf-options::-webkit-scrollbar { display: none; }
.mobile-shelf-option {
    flex: 0 0 auto;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    color: #495057;
    padding: 5px 10px;
    font-size: 13px;
    white-space: nowrap;
    touch-action: manipulation;
}
.mobile-shelf-option.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

.inv-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar */
.inv-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    overflow: hidden;
}
.shelf-list { padding: 6px; }
.shelf-item {
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .13s, border-color .13s;
}
.shelf-item:hover { background: #f0f6ff; border-color: #cde2f7; }
.shelf-item.active {
    background: var(--primary-light);
    border-color: #90b8e0;
}
.shelf-item.active .shelf-name { color: var(--primary); }
.shelf-value { font-weight: 600; color: var(--primary); }

/* Content */
.inv-content { flex: 1; overflow: hidden; background: white; }
.inv-content-header { flex-shrink: 0; height: 48px; }
.items-scroll-area { overflow-y: auto; height: 100%; }

/* Sticky thead inside scrollable area */
.items-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: #f8f9fa;
    font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
    color: #6c757d; white-space: nowrap; border-bottom: 2px solid #dee2e6;
}
.items-table td { vertical-align: middle; }
.items-table tbody tr:hover { background: #f8f9fb; }

/* ─── Admin ──────────────────────────────────────────────────── */
.user-avatar-sm {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}

.shelf-item:hover .shelf-edit-btn,
.shelf-item.active .shelf-edit-btn { opacity: 1; }
.shelf-edit-btn {
    opacity: 0;
    color: #adb5bd;
    line-height: 1;
    transition: opacity .15s, color .15s;
    background: none;
    border: none;
}
.shelf-edit-btn:hover { color: var(--primary); }

/* ─── Mobile adjustments ────────────────────────────────────── */
@media (max-width: 767px) {
    .inv-body { overflow: auto; }
    .inv-layout { height: auto; overflow: visible; }
    .inv-workspace { overflow: visible; }
    .inv-content { overflow: visible; }
    .items-scroll-area { overflow: visible; height: auto; }
    .inv-topbar { height: auto; min-height: 52px; }
}