/* ── Reset & Typography ─────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f1f5f9;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.5;
}

:root {
    --bg-sidebar: #132f4c;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --color-total: #000000;
    --color-maint: #0284c7;
    --color-excl: #475569;
    --color-up: #16a34a;
    --color-down: #dc2626;
    --color-bsnl: #ea580c;
    --color-amc: #9333ea;
    --color-lookman: #ca8a04;
    --border-light: #e2e8f0;
}

.text-blue { color: var(--color-maint); }
.text-slate { color: var(--color-excl); }
.text-green { color: var(--color-up); }
.text-red { color: var(--color-down); }
.text-orange { color: var(--color-bsnl); }
.text-purple { color: var(--color-amc); }
.text-yellow { color: var(--color-lookman); }
.text-teal { color: #0d9488; }
.text-red-nav { color: #f87171 !important; }
.bold { font-weight: 700; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-4 { margin-top: 1rem; }
.hidden { display: none !important; }

.app-layout {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
    /* `sticky` (not `fixed`) so it stays a real flex child of .app-layout — when it
       grows to 270px on hover, flexbox naturally reflows .main-content to make room,
       instead of the old `fixed` overlay sitting on top of and hiding the content
       underneath it. Still pins to the viewport during scroll, same as `fixed` did. */
    position: sticky;
    top: 0;
    height: 100vh;
    width: 64px;
    background-color: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem 0.6rem;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    z-index: 1000;
}

.sidebar:hover {
    width: 270px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
}

.sidebar-logo {
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-text {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s;
    letter-spacing: 0.02em;
}

.sidebar:hover .logo-text {
    opacity: 1;
    transform: translateX(0);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.nav-item {
    color: #94a3b8;
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

/* WhatsApp-Style Notification Counter Badges */
.nav-badge-count {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.12rem 0.45rem;
    border-radius: 9999px;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    transition: all 0.25s ease;
    animation: wa-badge-pulse 2s infinite ease-in-out;
}

.sidebar:not(:hover) .nav-badge-count {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.65rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
}

@keyframes wa-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.nav-item svg {
    flex-shrink: 0;
}

.nav-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: #cbd5e1;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s, color 0.2s ease;
}

.sidebar:hover .nav-text {
    opacity: 1;
    transform: translateX(0);
}

.nav-item:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);
}

.nav-item:hover .nav-text {
    color: #ffffff;
}

.nav-item.active {
    color: #ffffff;
    background-color: #0284c7;
}

.nav-item.active .nav-text {
    color: #ffffff;
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.75rem;
}

.btn-sidebar-action:hover .refresh-spinner {
    animation: spin 1s linear infinite;
}

/* ── Main Content Area ────────────────────────────────────────────────── */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 2rem 0 2rem;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.user-role-badge {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #dcfce7;
    color: #166534;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.timestamp-display {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.btn-sync {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sync:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.btn-sync.spinning .sync-icon {
    animation: spin 1s linear infinite;
}

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

/* ── Dark/Light Mode Toggle (header, every role) ─────────────────────── */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid var(--border-light);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.theme-toggle-btn:hover {
    background: #e2e8f0;
    transform: scale(1.06);
}

/* ── Profile Menu (header, every role) ───────────────────────────────── */
.profile-menu-wrap {
    position: relative;
}

.profile-menu-trigger {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b6291 0%, #0f4c75 100%);
    color: #ffffff;
    border: none;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 76, 117, 0.35);
    transition: transform 0.15s ease;
}

.profile-menu-trigger:hover {
    transform: scale(1.06);
}

.profile-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.25);
    z-index: 100020;
    overflow: hidden;
}

.profile-menu-header {
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-light);
}

.profile-menu-name {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.profile-menu-role {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0.1rem;
}

.profile-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.profile-menu-item:hover {
    background-color: #f0f9ff;
}

.profile-menu-item-danger {
    color: #dc2626;
}

.profile-menu-item-danger:hover {
    background-color: #fef2f2;
}

.profile-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0.15rem 0;
}

/* ── Notification Bell (header, every role) ──────────────────────────── */
#notifBellTrigger {
    background: #f1f5f9;
    color: #334155;
    font-size: 1.05rem;
    position: relative;
    box-shadow: none;
    border: 1px solid var(--border-light);
}

#notifBellTrigger:hover {
    background: #e2e8f0;
}

.notif-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #ffffff;
}

.notif-dropdown {
    width: 340px;
}

.notif-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-light);
    padding: 0.7rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background-color: #f0f9ff;
}

.notif-item.unread {
    background-color: #eff6ff;
}

.notif-item-msg {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.notif-item-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* ── Sortable table headers (added August 21, 2026) ──────────────────────── */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-th:hover {
    background-color: #f1f5f9;
}

.sort-arrow {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.sort-arrow.active {
    color: #0284c7;
    font-weight: 800;
}

/* ── Site Name live-search dropdown (added August 21, 2026) ─────────────── */
.site-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.25);
    z-index: 500;
}

.site-search-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.site-search-item:last-child {
    border-bottom: none;
}

.site-search-item:hover {
    background-color: #f0f9ff;
}

.site-search-item-name {
    font-weight: 700;
    color: #0f172a;
}

.site-search-item-meta {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.15rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.site-search-item-status {
    font-weight: 800;
}

.site-search-item-status.up { color: #16a34a; }
.site-search-item-status.down { color: #dc2626; }
.site-search-item-status.maintenance { color: #d97706; }

.site-search-empty {
    padding: 0.75rem 0.85rem;
    font-size: 0.82rem;
    color: #94a3b8;
    text-align: center;
}

/* ── Field Return Reconciliation — inline row form (added August 20, 2026) ── */
.fe-reconcile-inline {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 170px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
}

.fe-reconcile-select {
    width: 100%;
    padding: 0.42rem 1.8rem 0.42rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    background: #ffffff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.55rem center / 0.7rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fe-reconcile-select:hover {
    border-color: #94a3b8;
}

.fe-reconcile-select:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.fe-reconcile-edit-btn {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.fe-reconcile-edit-btn:hover {
    background: #dbeafe;
    transform: translateY(-1px);
}

.fe-reconcile-return-fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.fe-reconcile-return-fields input {
    padding: 0.6rem 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fe-reconcile-return-fields input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* ── Multi-site allocation (added August 21, 2026; restyled August 22, 2026) ── */
.fe-reconcile-allocate-fields {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fe-primary-site-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0284c7;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.fe-primary-site-box input {
    padding: 0.6rem 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fe-primary-site-box input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.fe-primary-site-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.fe-device-count-input {
    width: 90px !important;
    flex-shrink: 0;
    text-align: center;
}

.fe-alloc-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.fe-allocate-sites-box {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-top: 0.3rem;
}

.fe-allocate-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fe-alloc-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.7rem 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.fe-alloc-row-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fe-alloc-row-bottom {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 0.5rem;
}

.fe-alloc-row input {
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 0.82rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fe-alloc-row input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.alloc-device-count-wrap {
    width: 140px;
    flex-shrink: 0;
}

.alloc-device-select {
    width: 100%;
    padding: 0.45rem 1.6rem 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    background: #f8fafc url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.5rem center / 0.7rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.alloc-device-select:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.alloc-device-custom-wrap {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}

.alloc-device-custom-wrap .alloc-device-count {
    text-align: center;
    min-width: 0;
    flex: 1;
}

.alloc-device-mode-reset {
    flex-shrink: 0;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    padding: 0.4rem 0.45rem;
    transition: background-color 0.15s ease;
}

.alloc-device-mode-reset:hover {
    background: #e2e8f0;
}

.fe-alloc-row .alloc-amc-id {
    font-size: 0.78rem;
    color: #475569;
}

.alloc-amc-device-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #0369a1;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
    margin-top: 0.35rem;
    align-self: flex-start;
}

.alloc-amc-device-badge.hidden {
    display: none;
}

.alloc-remove-btn {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 0.4rem 0.55rem;
    line-height: 1;
    transition: background-color 0.15s ease;
}

.alloc-remove-btn:hover {
    background: #fecaca;
}

.fe-alloc-add-btn {
    align-self: flex-start;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.5rem 0.95rem;
    border-radius: 7px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.fe-alloc-add-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(2, 132, 199, 0.3);
}

.fe-alloc-add-btn:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

.fe-allocate-remaining {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.fe-allocate-remaining.is-zero {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.fe-allocate-remaining.is-negative {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.fe-allocate-remaining.fe-allocate-total {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.fe-qty-error, .alloc-qty-error {
    font-size: 0.68rem;
    font-weight: 700;
    color: #dc2626;
    line-height: 1.2;
}

.fe-qty-error.hidden, .alloc-qty-error.hidden {
    display: none;
}

#feReconcileModalBody .btn-action-approve {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 8px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 3px 6px rgba(16, 185, 129, 0.3);
    margin-top: 0.3rem;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#feReconcileModalBody .btn-action-approve:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(16, 185, 129, 0.35);
}

#feReconcileModalBody .btn-action-approve:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.fe-leftover-status-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-top: 0.3rem;
}

.fe-leftover-status-box.hidden {
    display: none;
}

.fe-leftover-status-box .fe-alloc-label {
    color: #92400e;
}

.fe-leftover-radio-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.fe-leftover-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
}

.fe-leftover-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #d97706;
    cursor: pointer;
}

.fe-leftover-clear-btn {
    background: none;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    margin-left: auto;
    transition: background-color 0.15s ease;
}

.fe-leftover-clear-btn:hover {
    background: #f1f5f9;
}

/* ── Device/Switch/VMD KPI Grid Section Header (unified, added August 19, 2026) ──
   All three Dashboard KPI grids (Devices, Switches, VMDs) share this exact header
   shape — icon+title on the left, sync-time (+ optional role note) on the right —
   so the previously bare, header-less Devices grid now matches the bordered-card
   treatment the Switch/VMD grids already had, instead of looking like a different
   component bolted onto the same page. */
.kpi-grid-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.kpi-grid-section-title {
    font-size: 0.92rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.kpi-grid-section-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.kpi-grid-sync-time {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.kpi-grid-role-note {
    font-size: 0.68rem;
    font-style: italic;
}

@media (max-width: 640px) {
    .kpi-grid-section-meta {
        align-items: flex-start;
    }
}

/* ── 8 KPI Cards Grid & Modern Stock KPI Cards ───────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stock-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.15rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .stock-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stock-kpi-grid { grid-template-columns: 1fr; gap: 0.85rem; } }

.stock-kpi-grid .kpi-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stock-kpi-grid .kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px -3px rgba(15, 23, 42, 0.09), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
}

.kpi-card.cursor-pointer { cursor: pointer; }

.kpi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.65rem;
}

.stock-kpi-grid .kpi-title {
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #475569;
}

.kpi-icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.stock-kpi-grid .kpi-card:hover .kpi-icon-badge {
    transform: scale(1.1);
}

.kpi-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.stock-kpi-grid .kpi-val {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.5px;
}

.kpi-subtext {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 0.15rem;
}

/* Color Variants for Stock Cards */
.kpi-card.kpi-blue {
    border-top-color: #0284c7;
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}
.kpi-card.kpi-blue .kpi-title { color: #0369a1; }
.kpi-card.kpi-blue .kpi-val { color: #0284c7; }
.kpi-card.kpi-blue .kpi-icon-badge {
    background-color: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.kpi-card.kpi-green {
    border-top-color: #10b981;
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
}
.kpi-card.kpi-green .kpi-title { color: #047857; }
.kpi-card.kpi-green .kpi-val { color: #059669; }
.kpi-card.kpi-green .kpi-icon-badge {
    background-color: #d1fae5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.kpi-card.kpi-orange {
    border-top-color: #f59e0b;
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
}
.kpi-card.kpi-orange .kpi-title { color: #b45309; }
.kpi-card.kpi-orange .kpi-val { color: #d97706; }
.kpi-card.kpi-orange .kpi-icon-badge {
    background-color: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.kpi-card.kpi-red {
    border-top-color: #ef4444;
    background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
}
.kpi-card.kpi-red .kpi-title { color: #b91c1c; }
.kpi-card.kpi-red .kpi-val { color: #dc2626; }
.kpi-card.kpi-red .kpi-icon-badge {
    background-color: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.kpi-card.kpi-slate {
    border-top-color: #94a3b8;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.kpi-card.kpi-slate .kpi-title { color: #475569; }
.kpi-card.kpi-slate .kpi-val { color: #334155; }
.kpi-card.kpi-slate .kpi-icon-badge {
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* ── "My Dashboard" (role Home panel) — masthead + to-do list ────────────── */
.home-masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
}
.home-title-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.home-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    box-shadow: 0 4px 10px -3px rgba(15, 23, 42, 0.35);
}
.home-role-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    text-transform: uppercase;
}
.home-updated {
    font-size: 0.76rem;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

.home-todo-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #475569;
}

.home-todo-list { display: flex; flex-direction: column; gap: 0.6rem; }

.home-todo-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-todo-item.is-clickable { cursor: pointer; }
.home-todo-item.is-clickable:hover {
    transform: translateX(2px);
    box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.18);
}
.home-todo-item--critical { border-left-color: #dc2626; }
.home-todo-item--warn { border-left-color: #d97706; }
.home-todo-item--info { border-left-color: #2563eb; }

.home-todo-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.home-todo-item--critical .home-todo-icon { background: #fee2e2; }
.home-todo-item--warn .home-todo-icon { background: #fef3c7; }
.home-todo-item--info .home-todo-icon { background: #dbeafe; }

.home-todo-text {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    min-width: 0;
}

.home-todo-count {
    flex-shrink: 0;
    min-width: 1.7rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}
.home-todo-item--critical .home-todo-count { background: #dc2626; }
.home-todo-item--warn .home-todo-count { background: #d97706; }
.home-todo-item--info .home-todo-count { background: #2563eb; }

.home-todo-arrow {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
}

.home-todo-empty {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #15803d;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
}

@media (max-width: 560px) {
    .home-masthead { align-items: flex-start; }
}

.kpi-card {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 1rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-top: 3px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-total { border-top-color: #000000; }
.card-maint { border-top-color: var(--color-maint); }
.card-excl { border-top-color: var(--color-excl); }
.card-online { border-top-color: var(--color-up); }
.card-down { border-top-color: var(--color-down); }
.card-bsnl { border-top-color: var(--color-bsnl); }
.card-amc { border-top-color: var(--color-amc); }
.card-lookman { border-top-color: var(--color-lookman); }

.kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
    white-space: nowrap;
}

.kpi-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
}

.kpi-subtext {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    margin-top: 0.35rem;
    white-space: nowrap;
}

.dashboard-card {
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 1.25rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.header-title-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.card-subtitle {
    font-size: 0.8rem;
    color: #94a3b8;
}

.card-subtitle-bold {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* ── Progress & Health Bars ────────────────────────────────────────────── */
.breakdown-row { margin-bottom: 1rem; }
.row-header { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 0.2rem; }
.file-tag { font-size: 0.72rem; color: #64748b; margin-bottom: 0.3rem; font-family: monospace; }
.progress-track { height: 12px; background-color: #f1f5f9; border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 6px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.fill-green { background-color: var(--color-up); }
.fill-red { background-color: var(--color-down); }
.fill-orange { background-color: var(--color-bsnl); }
.fill-purple { background-color: var(--color-amc); }
.fill-yellow { background-color: var(--color-lookman); }

.overall-health-container { margin-top: 1.5rem; border-top: 1px solid var(--border-light); padding-top: 1rem; }
.stacked-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background-color: #e2e8f0; margin-bottom: 0.75rem; }
.seg { height: 100%; transition: width 0.6s ease; }
.seg-green { background-color: var(--color-up); }
.seg-orange { background-color: var(--color-bsnl); }
.seg-purple { background-color: var(--color-amc); }
.seg-yellow { background-color: var(--color-lookman); }

.health-legend { display: flex; gap: 1.5rem; font-size: 0.8rem; font-weight: 600; }
.leg-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.sq { width: 10px; height: 10px; border-radius: 2px; }

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

.btn-excel-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: #10b981;
    color: #ffffff;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
    height: 36px;
    box-sizing: border-box;
    border: none;
}

.btn-excel-export:hover { background-color: #059669; }
.btn-excel-export:disabled { background-color: #cbd5e1; color: #64748b; cursor: not-allowed; }
.btn-excel-export:disabled:hover { background-color: #cbd5e1; }

.btn-add-stock-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: #0284c7;
    color: #ffffff;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
    height: 36px;
    box-sizing: border-box;
    border: none;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
}
.btn-add-stock-blue:hover { background-color: #0369a1; }

.table-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-left: auto; }
.filter-pills { display: flex; gap: 0.5rem; }
.pill { padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--border-light); background-color: #f8fafc; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; }
.nav-item:hover, .nav-item.active {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Stock Panel Submenu Wrapper */
.nav-group-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.nav-submenu {
    display: none;
    flex-direction: column;
    padding-left: 1.2rem;
    gap: 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
    border-left: 2px solid rgba(56, 189, 248, 0.35);
    margin-left: 1rem;
}

.nav-group-wrapper:hover .nav-submenu,
.nav-group-wrapper.active .nav-submenu {
    display: flex;
}

.nav-subitem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.nav-subitem:hover, .nav-subitem.active {
    background: rgba(37, 99, 235, 0.25);
    color: #38bdf8;
}

.sub-bullet {
    font-weight: 800;
    color: #38bdf8;
    font-size: 0.78rem;
}

/* Executive Toggle Switch Control */
.switch-toggle-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.switch-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin: 0;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.switch-toggle input:checked + .switch-slider {
    background-color: #10b981;
}

.switch-toggle input:checked + .switch-slider:before {
    transform: translateX(20px);
}

/* ── Attendance Sign In ─────────────────────────────────────────────────────── */
/* The FE/VMD panel uses a Present / On Leave dropdown (see #attnChoice); sign-in works
   from any device (desktop location is coarser but still recorded). */
.pill:hover, .pill.active { background-color: var(--text-primary); color: #ffffff; border-color: var(--text-primary); }

/* Attendance Board — one name tile per engineer, white with a green/red border.
   Zone cards flow in a multi-column grid so the whole board fits one screen (no scroll). */
/* Attendance Board — white name tiles with a green (present) / red (absent) border.
   `--abs` is a live size multiplier the A− / A+ buttons set (persisted per browser), so the
   admin can dial the tile width + height to whatever suits their screen. */
.attn-roster-board-grid { --abs: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(180px + 250px * var(--abs)), 1fr)); gap: calc(0.65rem * var(--abs)); align-items: start; }
.attn-roster-zone {
    background: #ffffff; border: 1px solid #e8edf3; border-radius: 12px; padding: calc(0.7rem * var(--abs)) calc(0.85rem * var(--abs));
}
.attn-roster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(128px * var(--abs)), 1fr)); gap: calc(0.45rem * var(--abs)); width: 100%; }
.attn-roster-sq {
    background: #ffffff; border-radius: 9px; padding: calc(0.45rem * var(--abs)) calc(0.65rem * var(--abs)); cursor: pointer;
    display: flex; align-items: center; gap: calc(0.45rem * var(--abs)); min-height: calc(44px * var(--abs));
    font-size: calc(0.95rem * var(--abs)); font-weight: 800; line-height: 1.15; letter-spacing: 0.1px; word-break: break-word;
    border: 2px solid #cbd5e1; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.attn-roster-sq:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14); }
.attn-roster-sq.present { border-color: #16a34a; color: #15803d; }
.attn-roster-sq.absent  { border-color: #dc2626; color: #b91c1c; }
.attn-roster-sq.leave   { border-color: #d97706; color: #b45309; background: #fffdf7; }
.attn-roster-sq .dot { width: calc(10px * var(--abs)); height: calc(10px * var(--abs)); border-radius: 9999px; flex: 0 0 auto; }
.attn-roster-sq.present .dot { background: #16a34a; }
.attn-roster-sq.absent  .dot { background: #dc2626; }
.attn-roster-sq.leave   .dot { background: #d97706; }
.attn-roster-nm { display: flex; flex-direction: column; min-width: 0; }
.attn-roster-sub { font-size: calc(0.56rem * var(--abs)); font-weight: 700; color: #b45309; letter-spacing: 0.1px; margin-top: 1px; white-space: normal; line-height: 1.2; }
.attn-board-size-btn {
    padding: 0.15rem 0.5rem; font-size: 0.72rem; font-weight: 800; line-height: 1;
    background: #ffffff; color: #475569; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer;
}
.attn-board-size-btn:hover { background: #f1f5f9; }
@media (max-width: 900px)  { .attn-roster-board-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
    .attn-roster-grid { grid-template-columns: repeat(auto-fit, minmax(calc(135px * var(--abs)), 1fr)); }
    .attn-roster-sq { font-size: calc(0.92rem * var(--abs)); min-height: calc(40px * var(--abs)); }
}

.search-box input { padding: 0.4rem 0.85rem; border-radius: 6px; border: 1px solid var(--border-light); font-size: 0.85rem; outline: none; width: 260px; }
.search-box input:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); }

.table-responsive { overflow-x: auto; }
.device-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.device-table th { text-align: left; padding: 0.75rem 0.85rem; background-color: #f8fafc; color: var(--text-secondary); font-weight: 600; border-bottom: 2px solid var(--border-light); white-space: nowrap; }
.device-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border-light); }

/* ── Professional Collect Data Table Styling ──────────────────────── */
.collect-data-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.collect-data-table th {
    background-color: #f8fafc;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 0.85rem;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    text-align: left;
}

.collect-data-table td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
    background: #ffffff;
}

.collect-data-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.collect-data-table tbody tr:hover td {
    background: #f0f9ff !important;
}

.collect-id-badge {
    display: inline-block;
    font-family: monospace;
    font-weight: 800;
    font-size: 0.82rem;
    color: #0284c7;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
}

.collect-item-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.collect-item-card:last-child {
    margin-bottom: 0;
}

.badge { display: inline-block; white-space: nowrap; padding: 0.25rem 0.65rem; border-radius: 4px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; }
.badge-up { background-color: #dcfce7; color: #166534; }
.badge-maint { background-color: #e0f2fe; color: #0369a1; }
.badge-down { background-color: #fee2e2; color: #991b1b; }
.badge-bsnl { background-color: #ffedd5; color: #9a3412; }
.badge-amc { background-color: #f3e8ff; color: #6b21a8; }
.badge-lookman { background-color: #fef9c3; color: #854d0e; }
.badge-pending { background-color: #fef3c7; color: #92400e; }
.badge-approved { background-color: #d1fae5; color: #065f46; }
.badge-dispatched { background-color: #e0e7ff; color: #3730a3; }
.badge-rejected { background-color: #ffe4e6; color: #9f1239; }

.pagination-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; font-size: 0.85rem; color: var(--text-secondary); }
.btn-page { padding: 0.35rem 0.75rem; border-radius: 6px; border: 1px solid var(--border-light); background-color: #ffffff; font-weight: 600; cursor: pointer; }
.btn-page:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Operator Form Styles ──────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group.full-width { grid-column: span 2; }
.form-group label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.form-group input, .form-group select { padding: 0.5rem 0.85rem; border-radius: 6px; border: 1px solid var(--border-light); font-size: 0.88rem; outline: none; }
.form-group input:focus, .form-group select:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); }
.form-group select:disabled { background: #f1f5f9; color: #475569; cursor: not-allowed; opacity: 1; }

/* ── Field Engineer — New Request Card (scoped to #operatorRequestFormCard) ── */
.fe-request-card {
    border-top: 3px solid #0284c7;
}

/* The Inventory Collect form (#inventoryCollectFormCard) is the exact same node whether it's
   centered inside the modal overlay (its own inline style handles that: max-width 820px,
   width 94%) or moved into the "Material Restock" tab's inline slot — only THERE does it
   need to drop those modal-centering dimensions and just fill the panel like the other two
   request-mode tabs' own cards do. */
#inventoryCollectInlineSection #inventoryCollectFormCard {
    width: 100% !important;
    max-width: 100% !important;
    border-top: 3px solid #0284c7;
}

/* Same reasoning for the dark modal-style header — it reads fine floating over a popup's
   backdrop, but looks out of place sitting inline in the middle of a page. Drop it to a
   plain light header (matching the other two request-mode tabs' own cards) only while this
   form is in the inline slot; the modal popup keeps its original dark header untouched. */
#inventoryCollectInlineSection .collect-form-header {
    background: none !important;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a !important;
}
#inventoryCollectInlineSection .collect-form-title {
    color: #0f172a !important;
}
#inventoryCollectInlineSection .collect-form-subtitle {
    color: #64748b !important;
}

.fe-request-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.fe-request-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.fe-request-subtitle {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.3rem;
    font-weight: 500;
}

.fe-lookup-panel {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}

.fe-lookup-field {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.fe-lookup-field label {
    font-weight: 700;
    color: #334155;
}

/* VMD Engineer's Manual Request: AMC ID / Site Name are locked read-only (only ever set
   via the VMD ticket search above them) — visually distinct from a normal editable field.
   The standalone Restock action's own Site Name (always the request's own site, no longer
   freely editable/searchable) reuses the same treatment. */
#manualAmcId[readonly],
#manualSiteName[readonly],
.fe-reconcile-return-fields input[readonly] {
    background-color: #f8fafc;
    color: #475569;
    cursor: not-allowed;
}

.fe-lookup-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fe-lookup-divider::before,
.fe-lookup-divider::after {
    content: '';
    width: 1px;
    flex: 1;
    background: #cbd5e1;
}

.fe-lookup-divider::before { margin-bottom: 0.5rem; }
.fe-lookup-divider::after { margin-top: 0.5rem; }

.fe-lookup-divider span {
    font-size: 0.66rem;
    font-weight: 800;
    color: #94a3b8;
    background: #f8fafc;
    padding: 0.2rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    letter-spacing: 0.03em;
}

.input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-wrap .input-icon {
    position: absolute;
    left: 0.75rem;
    font-size: 0.9rem;
    opacity: 0.6;
    pointer-events: none;
}

.input-icon-wrap input {
    width: 100%;
    padding-left: 2.15rem !important;
}

@media (max-width: 768px) {
    .fe-lookup-panel {
        flex-direction: column;
        align-items: stretch;
    }
    .fe-lookup-divider {
        flex-direction: row;
        padding: 0.35rem 0;
    }
    .fe-lookup-divider::before,
    .fe-lookup-divider::after {
        width: auto;
        height: 1px;
    }
    .fe-lookup-divider::before { margin-bottom: 0; margin-right: 0.6rem; }
    .fe-lookup-divider::after { margin-top: 0; margin-left: 0.6rem; }
}

.btn-primary-submit { background-color: #0284c7; color: #ffffff; padding: 0.6rem 1.25rem; border-radius: 6px; border: none; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s ease; }
.btn-primary-submit:hover { background-color: #0369a1; }

.btn-action-approve { background-color: #10b981; color: #ffffff; padding: 0.3rem 0.65rem; border-radius: 4px; border: none; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-action-reject { background-color: #ef4444; color: #ffffff; padding: 0.3rem 0.65rem; border-radius: 4px; border: none; font-weight: 600; cursor: pointer; margin-left: 0.3rem; white-space: nowrap; }
.btn-action-dispatch { background-color: #6366f1; color: #ffffff; padding: 0.35rem 0.75rem; border-radius: 4px; border: none; font-weight: 600; cursor: pointer; }

/* ── Permissions Matrix ─────────────────────────────────────────────────── */
.permissions-matrix { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; }
.perm-row { display: grid; grid-template-columns: 180px repeat(5, 1fr); padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-light); align-items: center; font-size: 0.85rem; }
.perm-header { background-color: #f8fafc; color: var(--text-secondary); text-transform: uppercase; font-size: 0.75rem; }

/* ── Dedicated Full-Screen Login Page ────────────────────────────────── */
.login-page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #e3effa 0%, #d2e4f5 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 99999;
}

.login-page-overlay.hidden {
    display: none !important;
}

/* Admin-enabled festival greeting — shared by the login page AND every signed-in user's
   dashboard header. A moving rainbow border (the "colourful, dynamic, movemental" ask)
   wraps a warm gradient pill with a faint sparkle-dot overlay and a slow breathing glow.
   Structure: .festival-banner-border is the outer element — its own background IS the
   border, done via the padding-reveals-background trick (no clip-path/mask needed, so it
   stays simple and reliable) — wrapping .festival-banner-inner, which holds the actual
   fill colour + text. Position/size (login page vs. dashboard header) is layered on via
   .login-festival-banner / .dashboard-festival-banner below. */
.festival-banner-border {
    padding: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f43f5e, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e);
    background-size: 300% 100%;
    box-shadow: 0 10px 26px rgba(194, 101, 15, 0.4);
    animation: festivalBorderMove 5s linear infinite, festivalBannerGlow 2.6s ease-in-out infinite;
}

.festival-banner-inner {
    position: relative;
    background: linear-gradient(135deg, #ffb35e 0%, #e0862f 55%, #c2650f 100%);
    color: #ffffff;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1px;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.festival-banner-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.45) 1px, transparent 1.5px);
    background-size: 16px 16px;
    opacity: 0.3;
    pointer-events: none;
}

.festival-banner-inner span {
    position: relative;
    z-index: 1;
}

@keyframes festivalBorderMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes festivalBannerGlow {
    0%, 100% { box-shadow: 0 10px 26px rgba(194, 101, 15, 0.4); }
    50% { box-shadow: 0 12px 32px rgba(194, 101, 15, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
    .festival-banner-border {
        animation: none;
    }
}

/* Login page: sits directly above the "Sign in" heading, inside the white card, full
   width of the form column (mobile and desktop alike — the card layout itself is
   otherwise unchanged). */
.login-festival-banner {
    width: 100%;
    margin-bottom: 1.1rem;
}

.login-festival-banner .festival-banner-inner {
    padding: 0.65rem 1.1rem;
    font-size: 0.82rem;
}

/* Dashboard: full-width banner under the top header, above whichever panel is open. */
.dashboard-festival-banner {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
}

.login-card-container {
    width: 400px;
    max-width: 90vw;
    border-radius: 12px;
    box-shadow: 0 20px 40px -10px rgba(15, 60, 95, 0.22);
    overflow: hidden;
    background-color: #ffffff;
}

.login-card-header {
    background-color: #1b6291;
    color: #ffffff;
    padding: 2.25rem 1.5rem 1.75rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.login-header-icon {
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    flex-shrink: 0;
}

.login-header-icon svg {
    color: #ffffff;
}

/* Static login logo mark — a rounded amber badge holding a flat 3-face cube glyph,
   the app's fixed logo (no animation). Slightly larger than the shared
   .login-header-icon default (which the Access Pending overlay's lock icon still
   uses untouched). */
.login-static-logo {
    width: 46px;
    height: 46px;
    background: linear-gradient(155deg, #f0a94e 0%, #d9822a 100%);
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(217, 130, 42, 0.35);
    margin-bottom: 0;
}

.login-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.login-card-subtitle {
    font-size: 0.92rem;
    color: #cbe3f5;
    font-weight: 400;
}

.login-card-body {
    padding: 1.85rem 2.25rem 1.25rem 2.25rem;
    background-color: #ffffff;
}

/* ── #loginModal-specific redesign (August 31, 2026): warehouse-at-night dark panel
   with a rack/spotlight/package illustration, a "Sign in" heading + subheading, a
   mobile-only "keep me signed in" checkbox, and a split left/right layout on desktop.
   Everything here is scoped to #loginModal specifically so the Access Pending overlay
   (which reuses .login-card-header/.login-card-body/.login-header-icon etc. for its
   own plain centred lock-icon card) is completely unaffected. */
#loginModal .login-card-header {
    background: linear-gradient(165deg, #17253f 0%, #0b1424 100%);
    padding: 2.1rem 1.75rem 1.75rem 1.75rem;
}

#loginModal .login-illustration {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

#loginModal .login-illustration-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
}

#loginModal .login-illustration-glow-1 {
    top: -110px;
    left: 6%;
}

#loginModal .login-illustration-glow-2 {
    top: -90px;
    right: 2%;
    width: 160px;
    height: 160px;
}

#loginModal .login-illustration-rack {
    position: absolute;
    bottom: 0;
    width: 15%;
    background: rgba(255, 255, 255, 0.05);
    border-top: 2px solid rgba(255, 255, 255, 0.08);
}

#loginModal .login-illustration-rack-1 {
    left: 4%;
    height: 40%;
}

#loginModal .login-illustration-rack-2 {
    left: 23%;
    height: 62%;
}

#loginModal .login-illustration-rack-3 {
    left: 42%;
    height: 30%;
}

#loginModal .login-illustration-package {
    position: absolute;
    bottom: 10%;
    left: 62%;
    opacity: 0.9;
}

#loginModal .login-header-top {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
}

#loginModal .login-header-textblock {
    text-align: center;
}

#loginModal .login-header-tagline {
    position: relative;
    z-index: 1;
    display: none;
}

#loginModal .login-header-tagline h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.55rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #d9822a;
    display: inline-block;
}

#loginModal .login-header-tagline p {
    font-size: 0.85rem;
    color: #9fb3cc;
    line-height: 1.5;
    margin: 0;
    max-width: 260px;
}

#loginModal .login-form-heading {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.3rem 0;
}

#loginModal .login-form-subheading {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 1.5rem 0;
    line-height: 1.4;
}

#loginModal .login-remember-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.83rem;
    color: #475569;
    font-weight: 500;
    cursor: pointer;
    margin: -0.35rem 0 1.1rem 0;
}

#loginModal .login-remember-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #17253f;
    cursor: pointer;
    flex-shrink: 0;
}

#loginModal .btn-login-signin {
    background-color: #17253f;
}

#loginModal .btn-login-signin:hover {
    background-color: #0f1a2e;
}

#loginModal .login-version-footer {
    display: none;
}

@media (min-width: 769px) {
    #loginModal .login-card-container {
        display: flex;
        flex-direction: row;
        width: 800px;
        max-width: 92vw;
    }

    #loginModal .login-card-header {
        width: 42%;
        flex-shrink: 0;
        justify-content: space-between;
        align-items: flex-start;
        padding: 2.25rem 2rem;
    }

    #loginModal .login-card-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2.5rem 3rem;
    }

    #loginModal .login-header-top {
        flex-direction: row;
        gap: 0.65rem;
    }

    #loginModal .login-header-textblock {
        text-align: left;
    }

    #loginModal .login-card-subtitle {
        font-size: 0.78rem;
        margin-top: 0.1rem;
    }

    #loginModal .login-header-tagline {
        display: block;
    }

    #loginModal .login-remember-row {
        display: none;
    }

    #loginModal .login-version-footer {
        display: block;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
        font-size: 0.75rem;
        color: #94a3b8;
    }
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.login-form-group label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#loginModal .login-form-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: normal;
    text-transform: none;
}

.login-form-group input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    font-size: 0.9rem;
    color: #1e293b;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.login-form-group input:focus {
    background-color: #ffffff;
    border-color: #1b6291;
    box-shadow: 0 0 0 3px rgba(27, 98, 145, 0.15);
}

/* Soft inline sign-in error — sits right under the password field (mobile + desktop). */
.login-error-msg {
    margin-top: 0.15rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.login-error-msg::before {
    content: "\26A0";           /* ⚠ */
    font-size: 0.9rem;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Show/hide password toggle — masked by default (type="password"), the eye icon inside
   the field switches it to plain text while pressed/enabled. */
.password-input-wrap {
    position: relative;
}

.password-input-wrap input {
    padding-right: 2.6rem !important;
}

.password-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0;
}

.password-toggle-btn:hover {
    color: #1b6291;
}

.login-btn-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.btn-login-signin {
    flex: 2;
    background-color: #1b6291;
    color: #ffffff;
    padding: 0.75rem;
    border-radius: 6px;
    border: none;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-login-signin:hover {
    background-color: #154e74;
}

.btn-login-reset {
    flex: 1;
    background-color: #ffffff;
    color: #1b6291;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-login-reset:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

/* #loginModal's own Reset is now a plain text link sitting under the Sign in button
   (matching the requested format), rather than the boxed outline button above. */
#loginModal .btn-login-reset {
    flex: none;
    background: none;
    border: none;
    padding: 0;
    color: #1b6291;
    font-weight: 600;
}

#loginModal .btn-login-reset:hover {
    background: none;
    border: none;
    text-decoration: underline;
}

.quick-login-hints {
    margin-top: 1rem;
    text-align: center;
}

.quick-login-hints .hint-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    display: block;
    margin-bottom: 0.4rem;
}

.hint-chips {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.chip-btn {
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-btn:hover {
    background-color: #1b6291;
    color: #ffffff;
    border-color: #1b6291;
}

.login-card-footer {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.72rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    padding-top: 0.75rem;
}

/* ── Inline AMC Summary & Unit Badge ────────────────────────────────────── */
.unit-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: #2563eb;
    margin-left: 0.35rem;
}

.amc-inline-summary {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1.15rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.amc-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.65rem;
}

.amc-zone-badge {
    background-color: #dbeafe;
    color: #1e40af;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
}

.amc-id-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
}

.amc-counts-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.amc-count-chip {
    flex: 1;
    min-width: 100px;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.amc-count-chip .chip-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.amc-count-chip .chip-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 0.1rem;
}

.amc-count-chip.up { border-left: 3px solid #10b981; }
.amc-count-chip.maint { border-left: 3px solid #f59e0b; }
.amc-count-chip.down-bsnl { border-left: 3px solid #ef4444; }
.amc-count-chip.down-amc { border-left: 3px solid #dc2626; }
.amc-count-chip.down-lookman { border-left: 3px solid #b91c1c; }
.amc-count-chip.total { border-left: 3px solid #3b82f6; }

/* ── AMC Devices Table under Bucket Grid ───────────────────────────── */
.amc-device-table-container {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.amc-device-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.sub-card-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.amc-device-count-badge {
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
}

.amc-devices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.amc-devices-table th {
    background-color: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    padding: 0.65rem 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
}

.amc-devices-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.amc-devices-table tbody tr:hover {
    background-color: #f8fafc;
}

.dev-mat-select {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    width: 100%;
    max-width: 220px;
}

.dev-qty-input {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    width: 80px;
}

.dev-remarks-input {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    width: 100%;
    min-width: 200px;
}

.btn-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: #0284c7;
    color: #ffffff;
    border: none;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 36px;
    box-sizing: border-box;
}

.btn-primary-action:hover {
    background-color: #0369a1;
}

/* ── Pagination & Filter Controls ──────────────────────────────────── */
.table-header-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.table-controls-flex {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.entries-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #475569;
    font-weight: 600;
}

.entries-selector select {
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    cursor: pointer;
}

.search-filters-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.search-filters-group input[type="text"] {
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    min-width: 240px;
}

.date-picker-filter {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.btn-clear-filter {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear-filter:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pagination-info {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.page-btn {
    background-color: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 32px;
    text-align: center;
}

.page-btn:hover:not(:disabled) {
    background-color: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.page-btn.active {
    background-color: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    font-weight: 800;
}

.page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Edit Request Modal & Action Buttons ───────────────────────────── */
.btn-edit-req,
.btn-cancel-req,
.btn-slip-req {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.btn-edit-req {
    background-color: #0284c7;
    color: #ffffff;
    padding: 0.3rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.btn-edit-req:hover:not(:disabled) {
    background-color: #0369a1;
}

.btn-edit-req.disabled,
.btn-edit-req:disabled {
    background-color: #f1f5f9;
    color: #94a3b8;
    border-color: #cbd5e1;
    cursor: not-allowed;
    opacity: 0.85;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 90%;
    max-width: 520px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}

.btn-close-modal:hover {
    color: #ef4444;
}

.modal-footer-flex {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* ── Action Buttons for Tracking Table ─────────────────────────────── */
.action-btns-flex {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.zone-badge-inline {
    display: inline-block;
    white-space: nowrap;
    padding: 0.25rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 4px;
    background-color: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    text-transform: uppercase;
}

.badge-category-inline {
    display: inline-block;
    white-space: nowrap;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    text-transform: uppercase;
}

.series-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    width: auto;
    max-width: 180px;
    padding: 0.3rem 1.65rem 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0369a1;
    background-color: #f0f9ff;
    border: 1px solid #7dd3fc;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230284c7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.65rem;
}

.series-select:hover {
    border-color: #38bdf8;
    background-color: #e0f2fe;
}

.series-select:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.badge-stock-status {
    display: inline-block;
    white-space: nowrap;
    padding: 0.3rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 800;
    border-radius: 6px;
    text-align: center;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.badge-stock-status.status-in-stock {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-stock-status.status-low-stock {
    background-color: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-stock-status.status-out-of-stock {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.btn-cancel-req {
    background-color: #ef4444;
    color: #ffffff;
    padding: 0.3rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.btn-cancel-req:hover:not(:disabled) {
    background-color: #dc2626;
}

.btn-cancel-req.disabled,
.btn-cancel-req:disabled {
    background-color: #f1f5f9;
    color: #94a3b8;
    border-color: #cbd5e1;
    cursor: not-allowed;
    opacity: 0.85;
}

.btn-slip-req {
    background-color: #8b5cf6;
    color: #ffffff;
    padding: 0.3rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.btn-slip-req:hover {
    background-color: #7c3aed;
}

/* ── Stock Warning Banners & Footer ─────────────────────────────────── */
.stock-alert-banner {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 5px solid #ef4444;
    padding: 0.85rem 1.15rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #991b1b;
}

.stock-footer-warning-banner {
    padding: 0.85rem 1.25rem;
    background-color: #fff7ed;
    border-top: 1px solid #fed7aa;
    font-size: 0.82rem;
    color: #c2410c;
    font-weight: 600;
}

.app-global-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 1 !important;
    margin-top: 3rem !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    padding: 1.5rem 1.5rem 2.5rem 1.5rem !important;
    box-shadow: none !important;
    border-top: 1px solid #1e293b !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.global-stock-warning-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.warn-chip {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.warn-chip.low { background-color: #fef3c7; color: #b45309; }
.warn-chip.out { background-color: #fee2e2; color: #b91c1c; }

.warn-chip-hoverable {
    position: relative;
    cursor: pointer;
}

.warn-chip-hoverable::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 12px;
    display: none;
}

.warn-chip-hoverable:hover::after {
    display: block;
}

.warn-chip-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    max-width: 340px;
    max-height: 280px;
    overflow-y: auto !important;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    z-index: 20000;
    text-align: left;
    white-space: normal;
    cursor: default;
    pointer-events: auto;
}

.warn-chip-popup::-webkit-scrollbar {
    width: 6px;
}

.warn-chip-popup::-webkit-scrollbar-track {
    background: #1e293b;
    border-radius: 4px;
}

.warn-chip-popup::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.warn-chip-popup::-webkit-scrollbar-thumb:hover {
    background: #0284c7;
}

.warn-chip-hoverable:hover .warn-chip-popup,
.warn-chip-popup:hover {
    display: block;
}

@media (max-width: 480px) {
    .warn-chip-popup {
        min-width: 180px;
        max-width: 240px;
        right: -0.5rem;
    }
}

.warn-chip-popup-title {
    position: sticky;
    top: 0;
    background: #0f172a;
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 800;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #334155;
}

.warn-chip-popup-item {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    padding: 0.25rem 0;
    line-height: 1.35;
    border-bottom: 1px dashed #1e293b;
}

.warn-chip-popup-item:last-child {
    border-bottom: none;
}

/* ── Printable Slip Voucher ────────────────────────────────────────── */
.printable-modal-card {
    max-width: 680px;
    padding: 1.75rem;
}

.slip-container {
    background-color: #ffffff;
    padding: 1.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    color: #0f172a;
}

.slip-header-brand {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.slip-logo-title h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    letter-spacing: 0.3px;
}

.slip-logo-title h4 {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0284c7;
    margin-top: 0.2rem;
}

.slip-badge-status {
    background-color: #dbeafe;
    color: #1e40af;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #93c5fd;
    text-transform: uppercase;
}

.slip-divider {
    height: 2px;
    background-color: #0284c7;
    margin: 1rem 0;
}

.slip-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem 1.25rem;
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
}

.slip-details-grid .full-col {
    grid-column: span 2;
}

.slip-table-wrapper {
    margin-bottom: 1.2rem;
}

.slip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.slip-table th, .slip-table td {
    border: 1px solid #cbd5e1;
    padding: 0.6rem 0.75rem;
    text-align: left;
}

.slip-table th {
    background-color: #f1f5f9;
    font-weight: 700;
}

.slip-meta-info {
    font-size: 0.84rem;
    background-color: #f8fafc;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.slip-signatures-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dashed #cbd5e1;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}

.sig-line {
    height: 40px;
    border-bottom: 1px solid #94a3b8;
    margin-bottom: 0.35rem;
}

/* ── Record Details Report (Right-Side Drawer) ───────────────────────────── */
.report-doc {
    font-family: 'Inter', sans-serif;
    color: #0f172a;
}

.report-header-brand {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.report-header-brand h2 {
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    letter-spacing: 0.3px;
}

.report-header-brand h4 {
    font-size: 0.76rem;
    font-weight: 700;
    color: #0284c7;
    margin: 0.2rem 0 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.report-status-badge {
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.3rem 0.7rem;
    border-radius: 5px;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.report-divider {
    height: 2px;
    background-color: #0284c7;
    margin: 0.85rem 0 1.1rem;
}

.report-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 1.1rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e2e8f0;
}

.report-section-title:first-child {
    margin-top: 0;
}

.drawer-action-btns {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
}

.drawer-action-btns button {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
}

.btn-action-unsolved {
    background-color: #dc2626;
    color: #ffffff;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    border: none;
    font-weight: 700;
    cursor: pointer;
}

.order-tracker-drawer-embed {
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.order-tracker-drawer-embed .order-tracker-steps {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.report-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 1.25rem;
    font-size: 0.85rem;
}

.report-info-grid .full-col {
    grid-column: span 2;
}

.report-info-grid label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.15rem;
}

.report-info-grid strong {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 700;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.report-table th, .report-table td {
    border: 1px solid #cbd5e1;
    padding: 0.55rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.report-table th {
    background-color: #f1f5f9;
    font-weight: 700;
    color: #334155;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.report-remarks-box {
    font-size: 0.85rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #64748b;
    padding: 0.7rem 0.9rem;
    border-radius: 0 4px 4px 0;
    color: #334155;
    line-height: 1.5;
}

/* Print Rules */
@media print {
    body * {
        visibility: hidden;
    }
    .modal-overlay, #printableSlipModal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        background: none !important;
        backdrop-filter: none !important;
    }
    #slipPrintArea, #slipPrintArea * {
        visibility: visible;
    }
    #slipPrintArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: none !important;
        box-shadow: none !important;
    }
    .no-print {
        display: none !important;
    }
}

/* ── Material Consumption Analytics Charts ───────────────────────── */
.analytics-summary-chips {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.15rem;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.analytics-chip {
    font-size: 0.83rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.chip-label {
    color: #64748b;
    font-weight: 600;
}

.chip-val {
    font-weight: 800;
    font-size: 0.95rem;
}

.analytics-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 1rem;
}

.chart-card-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.chart-box-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.75rem;
    text-align: center;
}

.chart-canvas-wrapper {
    position: relative;
    height: 260px;
    width: 100%;
}

@media (max-width: 992px) {
    .analytics-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* !important here is necessary: several kpi-grid instances (Operator/Manager tracker
   KPI rows) set their own fixed grid-template-columns via inline style, which — being
   inline — would otherwise always outrank these breakpoint rules regardless of viewport. */
@media (max-width: 1280px) { .kpi-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 768px) { .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } .form-grid { grid-template-columns: 1fr; } }

.new-record-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.1rem 0.42rem;
    border-radius: 9999px;
    margin-left: 0.4rem;
    box-shadow: 0 1px 3px rgba(225, 29, 72, 0.45);
    vertical-align: middle;
    white-space: nowrap;
    letter-spacing: 0.02em;
    animation: new-badge-pulse 2s infinite ease-in-out;
}

@keyframes new-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.aging-badge {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    margin-top: 0.3rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.aging-badge-warning {
    color: #b45309;
}

.aging-badge-critical {
    color: #dc2626;
    animation: new-badge-pulse 2s infinite ease-in-out;
}

.stock-tab-menu {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 1.5rem;
    margin: -1.5rem -1.5rem 1.25rem -1.5rem;
}

@media (max-width: 768px) {
    .stock-tab-menu {
        padding: 0 1rem;
        margin: -1rem -1rem 1.25rem -1rem;
    }
}

@media (max-width: 480px) {
    .stock-tab-menu {
        padding: 0 0.85rem;
        margin: -0.85rem -0.85rem 1.25rem -0.85rem;
    }
}

.stock-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.85rem 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.stock-tab-btn:hover {
    color: #2563eb;
}

.stock-tab-btn.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

/* Manager panel FINAL-review sub-tabs + per-tab count pills */
.stock-tab-nav {
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.stock-tab-nav .stock-tab-btn {
    white-space: nowrap;
}
.tab-count-badge:not(:empty) {
    display: inline-block;
    min-width: 1.15rem;
    padding: 0 0.3rem;
    margin-left: 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2rem;
    text-align: center;
    color: #ffffff;
    background: #dc2626;
    border-radius: 999px;
}

/* Order-tracker: give the connector between step 4 and 5 (Reconciled → Manager
   Approved) the same treatment as the others — the stepper is flex, so nothing
   step-count-specific is hard-coded, but keep the reject-branch connector rule broad. */
.order-step-connector.connector-skipped { background: #e2e8f0; opacity: 0.6; }

/* ── Edit Collection Record modal — professional layout ─────────────────── */
/* Flush header/footer: beat both the base .modal-card padding and the mobile
   `padding: 1rem !important` override so the dark header meets the card edge. */
.modal-overlay .ecr-card { padding: 0 !important; }
.ecr-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.1rem 1.1rem;
}
.ecr-section-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.2px;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.ecr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
}
.ecr-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ecr-field.ecr-col-2 { grid-column: 1 / -1; }
.ecr-field label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ecr-field input,
.ecr-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    background: #ffffff;
}
.ecr-field input:focus,
.ecr-field select:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.ecr-req { color: #dc2626; }

/* Item cards inside the modal */
.ecr-item-card {
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 0.8rem 0.85rem 0.9rem;
    background: #f8fafc;
}
.ecr-item-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0369a1;
    margin-bottom: 0.7rem;
}
.ecr-item-head .ecr-item-status {
    font-size: 0.68rem;
    font-weight: 700;
    color: #475569;
    background: #e2e8f0;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ecr-item-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.8rem;
}
.ecr-item-grid .ecr-field.ecr-col-2 { grid-column: 1 / -1; }

@media (max-width: 560px) {
    .ecr-grid,
    .ecr-item-grid { grid-template-columns: 1fr; }
}

/* ── Shared quick date-range presets (Reports / Manager / Notification bars) ── */
.date-preset-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    width: 100%;
    margin-top: 0.15rem;
}
.date-preset-btn {
    padding: 0.28rem 0.62rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #475569;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.date-preset-btn:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}
.date-preset-btn.active {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
}

/* ── Notification bucket (Inventory Executive) — inline Action cell ─────────
   One horizontal row, fixed sequence: status chip → 👤 field engineer → note /
   action button. The table lives in a horizontal-scroll wrapper, so the row
   never wraps — it stays a clean single line. */
.inv-act-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.45rem;
    min-width: 150px;
    white-space: nowrap;
}
.inv-act-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.3;
    flex-shrink: 0;
}
.inv-act-chip--green  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.inv-act-chip--amber  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.inv-act-chip--indigo { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.inv-act-chip--red    { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.inv-act-chip--slate  { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.inv-act-fe {
    font-size: 0.74rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    flex-shrink: 0;
}
.inv-act-sub {
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}
.inv-act-btn {
    padding: 0.32rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.inv-act-btn:hover { filter: brightness(0.94); }

/* ── Field Engineer Panel Tab Switcher — horizontal scroll instead of
   clipping/overlapping when 3 tab labels don't fit a narrow screen ────── */
.fe-panel-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fe-panel-tabs .stock-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .amc-request-status-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .amc-request-status-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: #f0f9ff;
}

/* ── User Management Action Column — fixed 3-slot grid ──────────────────
   Each row can have a different subset of buttons (Modify always, Zone Leader
   only for Field Engineers, Delete only for non-protected accounts); without a
   fixed grid the buttons after the first would land at a different horizontal
   position on every row. Empty slots render nothing but still reserve their
   column, so Modify/Zone-Leader/Delete always line up vertically across rows. */
.user-mgmt-action-grid {
    display: grid;
    grid-template-columns: 90px 150px 85px;
    gap: 0.4rem;
    align-items: center;
}

/* ── Order-Tracker Style Status Stepper (Field Engineer Dashboard) ──────── */
.order-tracker-card {
    position: relative;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.75rem 1.1rem 0.85rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.order-tracker-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #0284c7;
    opacity: 0.7;
}

.order-tracker-card:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    border-color: #93c5fd;
    transform: translateY(-1px);
}

.order-tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
    font-size: 0.87rem;
}

.order-tracker-steps {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0.25rem 0 !important;
}

.order-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
}

.order-step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    color: #94a3b8;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.order-step.done .order-step-dot {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
    font-size: 0.85rem;
}

.order-step.current .order-step-dot {
    background: #ffffff;
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    animation: order-step-pulse 2s infinite;
}

.order-step.rejected .order-step-dot {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    font-size: 0.85rem;
}

.order-step.skipped .order-step-dot {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #cbd5e1;
    opacity: 0.55;
}

@keyframes order-step-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
    50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.18); }
}

.order-step-label {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: #94a3b8;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -0.2px !important;
    margin-top: 0.35rem;
    line-height: 1.15 !important;
    width: 100% !important;
    word-break: break-word !important;
}

.order-step.done .order-step-label {
    color: #15803d;
}

.order-step.current .order-step-label {
    color: #2563eb;
}

.order-step.rejected .order-step-label {
    color: #b91c1c;
}

.order-step-connector {
    flex: 1 !important;
    height: 2.5px;
    border-radius: 2px;
    background: #e2e8f0;
    margin-top: 13.5px;
    min-width: 6px !important;
    transition: background 0.2s ease;
}

.order-step-connector.connector-done {
    background: #16a34a;
}

.order-step-connector.connector-rejected {
    background: #dc2626;
}

.order-tracker-reject-reason {
    margin-top: 0.6rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .order-tracker-steps {
        overflow: hidden !important;
        overflow-x: hidden !important;
        padding-bottom: 0 !important;
    }
    .order-step-dot {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.65rem !important;
    }
    .order-step-connector {
        margin-top: 11px !important;
        min-width: 4px !important;
    }
    .order-step-label {
        font-size: 0.56rem !important;
        letter-spacing: -0.3px !important;
        margin-top: 0.25rem !important;
    }
}

/* ── Right-Side Record Details Drawer (Inventory Bucket single-click) ───── */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
    z-index: 100010;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.side-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 460px;
    max-width: 92vw;
    background-color: #ffffff;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
    z-index: 100011;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
}

.side-drawer.open {
    transform: translateX(0);
    visibility: visible;
}

/* Attendance engineer-detail drawer is a bit wider — it carries a month calendar. */
#attendanceDetailDrawer { width: 560px; max-width: 94vw; }

/* Drag-to-resize grip on the drawer's left edge — desktop only (see the JS gate and this
   media query); a mid-drag width change disables the open/close slide transition so the
   panel tracks the pointer instantly instead of easing to each intermediate width. */
.side-drawer-resize-handle {
    position: absolute;
    top: 0;
    left: -4px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 1;
    background: transparent;
}
.side-drawer-resize-handle:hover,
.side-drawer-resize-handle.is-dragging {
    background: rgba(56, 189, 248, 0.35);
}
.side-drawer.resizing { transition: none !important; }

body.drawer-resizing {
    cursor: ew-resize !important;
    user-select: none !important;
}

@media (max-width: 768px) {
    .side-drawer-resize-handle { display: none; }
}

.side-drawer-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 1.1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.side-drawer-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.3px;
    margin: 0;
}

.side-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

@media (max-width: 480px) {
    .side-drawer {
        width: 100%;
        max-width: 100vw;
    }
}

/* ── Manual Dashboard Update: Drag & Drop Upload Zones ──────────────────── */
.upload-dropzone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.upload-dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 1.25rem 1rem;
    text-align: center;
    background-color: #f8fafc;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.upload-dropzone:hover {
    border-color: #38bdf8;
    background-color: #f0f9ff;
}

.upload-dropzone.drag-over {
    border-color: #0284c7;
    background-color: #e0f2fe;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.upload-dropzone.has-file {
    border-style: solid;
    border-color: #86efac;
    background-color: #f0fdf4;
}

.dropzone-icon {
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
}

.dropzone-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.dropzone-badge {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.12rem 0.5rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.dropzone-badge.required {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.dropzone-badge.optional {
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.dropzone-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}

.dropzone-file {
    margin-top: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #ffffff;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #15803d;
}

.dropzone-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.dropzone-file-remove {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* ── Mobile Responsive Layer ─────────────────────────────────────────────
   Base (all screen sizes): hamburger + backdrop stay hidden on desktop where
   the sidebar already works via hover; modal-card gets a safe max-height so
   tall forms never render off-screen on short viewports. Everything else
   below is scoped to the two breakpoints (tablet ≤768px, phone ≤480px). */
.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    width: 38px;
    height: 38px;
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 999;
}

.sidebar-backdrop.active {
    display: block;
}

.modal-card {
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: inline-flex;
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    /* Sidebar becomes an off-canvas drawer — hidden until toggled, since hover
       (the desktop expand mechanism) doesn't exist on touch devices. Needs `fixed`
       (not the desktop `sticky`) here — a sticky element still reserves its layout
       space even when translated off-screen, which would leave a blank 240px gap;
       `fixed` fully removes it from flow so .main-content can use the full width. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        width: 240px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* When open on mobile, always show labels/badges in their expanded form —
       the `:hover` rules that normally do this never fire on touch. */
    .sidebar.mobile-open .logo-text,
    .sidebar.mobile-open .nav-text {
        opacity: 1;
        transform: translateX(0);
    }

    .sidebar.mobile-open .nav-badge-count {
        position: static;
        font-size: 0.72rem;
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0.12rem 0.45rem;
    }

    .main-content {
        margin-left: 0;
        padding: 1rem 1rem 5rem 1rem;
    }

    .top-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.6rem !important;
        padding: 0.75rem 0.85rem !important;
        margin-bottom: 1rem !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }

    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .header-left > div {
        min-width: 0 !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    .page-title {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }

    .user-role-badge {
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }

    .header-right {
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        flex-shrink: 0 !important;
        margin-left: 0.5rem !important;
    }

    .profile-menu-wrap {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .profile-menu-trigger {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
    }

    .timestamp-display {
        display: none !important;
    }

    .dashboard-card {
        padding: 1rem;
    }

    .card-header,
    .card-header.table-header,
    .table-header-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.6rem;
    }

    .header-title-flex {
        width: 100%;
    }

    .search-filters-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .search-filters-group input,
    .search-filters-group .date-picker-filter,
    .search-filters-group .btn-clear-filter {
        width: 100%;
        box-sizing: border-box;
    }

    .entries-selector {
        flex-wrap: wrap;
    }

    .pagination-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .device-table {
        font-size: 0.78rem;
    }

    .modal-card {
        width: 94%;
        padding: 1.1rem;
    }

    .permissions-matrix .perm-row {
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1rem;
    }

    .user-role-badge {
        font-size: 0.72rem;
    }

    .status-badge span:not(.pulse-dot) {
        display: none;
    }

    .btn-sync span {
        display: none;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .dashboard-card {
        padding: 0.85rem;
    }

    .modal-card {
        width: 96%;
        padding: 0.9rem;
    }
}

/* ── 🔔 Custom Center-Aligned Popup Dialog ────────────────────────────── */
.custom-dialog-card {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.3), 0 10px 15px -3px rgba(15, 23, 42, 0.15);
    width: 90%;
    max-width: 440px;
    padding: 1.75rem 1.5rem;
    border: 1px solid #e2e8f0;
    text-align: center;
    position: relative;
    animation: dialogPopIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dialogPopIn {
    from { opacity: 0; transform: scale(0.85) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.custom-dialog-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.85rem;
}

.custom-dialog-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 0.65rem;
}

.custom-dialog-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
}

.custom-dialog-body {
    margin-bottom: 1.35rem;
    text-align: center;
}

.custom-dialog-body p {
    font-size: 0.93rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

.custom-dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.btn-dialog-confirm {
    background-color: #0284c7;
    color: #ffffff;
    border: none;
    padding: 0.55rem 1.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-dialog-confirm:hover {
    background-color: #0369a1;
    transform: translateY(-1px);
}

.btn-dialog-cancel {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0.55rem 1.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-dialog-cancel:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

.btn-dialog-confirm.btn-green {
    background-color: #10b981;
}
.btn-dialog-confirm.btn-green:hover {
    background-color: #059669;
}

.btn-dialog-confirm.btn-red {
    background-color: #ef4444;
}
.btn-dialog-confirm.btn-red:hover {
    background-color: #dc2626;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE (added August 16, 2026)


/* ── LEDGER DETAIL SLIDE-OVER DRAWER STYLING ── */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    transition: opacity 0.25s ease;
}

.drawer-overlay.hidden {
    display: none !important;
}

.drawer-panel {
    width: 500px;
    max-width: 92vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.drawer-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
}

.drawer-header.header-dispatch {
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
    border-bottom-color: #fecaca;
}

.drawer-header.header-restock {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    border-bottom-color: #bbf7d0;
}

.drawer-type-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-block;
}

.drawer-type-badge.badge-dispatch {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.drawer-type-badge.badge-restock {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.drawer-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 0.35rem;
}

.drawer-close-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    transition: all 0.15s;
}

.drawer-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.drawer-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
}

.drawer-section-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 1.1rem;
}

.drawer-grid-full {
    grid-column: span 2;
}

.drawer-field-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.drawer-field-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 0.2rem;
    word-break: break-word;
}

.drawer-photo-preview {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    transition: transform 0.2s;
}

.drawer-photo-preview:hover {
    transform: scale(1.02);
}

.audit-changes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.audit-changes-table th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
    padding: 0.4rem 0.6rem;
    border-bottom: 2px solid #e2e8f0;
}

.audit-changes-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
    word-break: break-word;
}

.audit-changes-table tr:last-child td {
    border-bottom: none;
}

.clickable-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.clickable-row:hover {
    background-color: #f1f5f9 !important;
}

[data-theme="dark"] .drawer-panel {
    background-color: #1e293b;
    color: #f8fafc;
}

[data-theme="dark"] .drawer-header {
    background-color: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .drawer-section {
    background-color: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .drawer-field-value {
    color: #f8fafc;
}

[data-theme="dark"] .audit-changes-table th {
    color: #94a3b8;
    border-bottom-color: #334155;
}

[data-theme="dark"] .audit-changes-table td {
    border-bottom-color: #334155;
    color: #f8fafc;
}

/* ── PREMIUM STYLISH TABLE TOOLBAR & CONTROLS ── */
.table-controls-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.15rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-top: 0.85rem;
    margin-bottom: 1.15rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.entries-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #ffffff;
    padding: 0.35rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.entries-pill-group label {
    font-size: 0.78rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.stylish-select,
.category-select,
.date-picker-filter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 0.85rem;
    padding: 0.45rem 2.2rem 0.45rem 0.85rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.stylish-select:hover,
.category-select:hover,
.date-picker-filter:hover {
    border-color: #94a3b8;
    background-color: #f8fafc;
}

.stylish-select:focus,
.category-select:focus,
.date-picker-filter:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.stylish-input,
.search-input {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.45rem 0.85rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.stylish-input:hover,
.search-input:hover {
    border-color: #94a3b8;
}

.stylish-input:focus,
.search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.btn-stylish-clear,
.btn-clear {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-stylish-clear:hover,
.btn-clear:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.stylish-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.btn-stylish-clear {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-stylish-clear:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

[data-theme="dark"] .table-controls-flex {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .entries-pill-group {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .entries-pill-group label {
    color: #94a3b8;
}

[data-theme="dark"] .stylish-select,
[data-theme="dark"] .stylish-input {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .btn-stylish-clear {
    background-color: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

/* ── UNIFORM FORM INPUT SEQUENCE ALIGNMENT ── */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group select {
    height: 42px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.88rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.85rem;
    padding-right: 2.2rem !important;
}

/* ── ULTRA-RESPONSIVE MOBILE FRIENDLY OPTIMIZATIONS ── */
.mobile-sidebar-close-btn {
    display: none;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    line-height: 1;
}

.mobile-sidebar-close-btn:hover {
    color: #ffffff;
}

@media (max-width: 768px) {
    /* Prevent iOS & Mobile Input Auto-Zoom */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Off-Canvas Sidebar Layering */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 100010 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4) !important;
        background: #0f172a !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .sidebar-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1rem !important;
    }

    .mobile-sidebar-close-btn {
        display: block !important;
    }

    .sidebar-backdrop {
        z-index: 100005 !important;
    }

    .sidebar-nav .nav-item,
    .sidebar-nav .nav-subitem {
        padding: 0.75rem 1rem !important;
        font-size: 0.92rem !important;
    }

    /* Full Width Touch-Friendly Elements */
    .main-content {
        padding: 0.85rem 0.85rem 4rem 0.85rem !important;
    }



    .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .table-controls-flex,
    .op-tracker-filter-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 0.75rem !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        margin-bottom: 1.1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .table-controls-left,
    .table-controls-right {
        width: 100% !important;
    }

    .table-controls-right {
        justify-content: stretch !important;
    }

    .smart-search-box {
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .smart-field-select {
        width: 100% !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    .smart-input-wrap {
        width: 100% !important;
        min-width: 100% !important;
    }

    .smart-input-wrap input[type="text"] {
        height: 44px !important;
        font-size: 16px !important;
    }

    .smart-date-wrap {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .smart-date-wrap .date-picker-filter {
        height: 44px !important;
        font-size: 16px !important;
    }

    .entries-selector select {
        height: 44px !important;
        font-size: 16px !important;
    }

    .entries-pill-group,
    .search-filters-group {
        width: 100% !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    .stylish-select,
    .stylish-input,
    .search-input,
    .category-select,
    .date-picker-filter,
    .btn-stylish-clear,
    .btn-clear {
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        height: 44px !important;
        font-size: 16px !important;
    }

    /* Mobile Table Touch Scroll */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
    }

    .device-table {
        min-width: 580px !important;
    }

    /* ── Field Engineer "New Request" AMC device table — per-row Material/Qty/
       Remarks controls are the core of this workflow, so give them the same
       16px/44px touch treatment as everything else instead of the compact
       desktop sizing (which is small enough to trigger iOS auto-zoom-on-focus
       and is fiddly to tap accurately). The table itself gets a min-width so
       it scrolls horizontally at a comfortable per-column size rather than
       trying to squeeze every column into a phone-width viewport. ── */
    .amc-devices-table {
        min-width: 760px !important;
    }

    .dev-mat-select,
    .dev-remarks-input,
    .dev-qty-input {
        font-size: 16px !important;
        min-height: 42px !important;
        padding: 0.5rem 0.6rem !important;
    }

    .amc-devices-table .btn-clear-filter {
        min-height: 42px !important;
        padding: 0.5rem 0.8rem !important;
        font-size: 0.85rem !important;
    }

    .mat-chip-card input[type="number"],
    .mat-chip-card input[type="text"] {
        font-size: 16px !important;
        padding: 0.3rem 0.4rem !important;
    }

    .mat-chip-card input[type="number"] {
        width: 64px !important;
    }

    .mat-chip-card button {
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 1rem !important;
    }

    #batchMaterialsCartList button,
    #manualMaterialsCartList button {
        min-height: 36px !important;
        padding: 0.4rem 0.8rem !important;
    }

    /* Manual Request tab's top field grid (AMC ID / Site Name / Device IP /
       Zone / Device Status) — single column on mobile instead of squeezing
       two narrow fields per row. */
    .fe-manual-grid-2col {
        grid-template-columns: 1fr !important;
    }

    /* Inventory Collect / "Material Restock" form (now directly reachable from the Field
       Engineer panel's own New Material Request tab bar) — its 3-column row (Material Name /
       Category / Quantity & Unit) squeezed each column under ~90px on a phone-width screen,
       making the Material dropdown unreadable and the Quantity/Unit combo nearly unusable.
       Single column on mobile instead, same treatment as the 2-column Condition row below it. */
    .fe-collect-grid-3col,
    .fe-collect-grid-2col {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    /* Drawer & Modal Mobile Full Screen Fits */
    .drawer-panel {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .drawer-header {
        padding: 1rem !important;
    }

    .drawer-body {
        padding: 1rem !important;
    }

    .modal-card {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: auto !important;
        padding: 1rem !important;
        border-radius: 12px !important;
    }
}

/* ── FIELD ENGINEER EXPORT RESTRICTIONS & HIGH-END UI ── */
body[data-user-role="field_engineer"] .btn-excel-export,
body[data-user-role="vendor"] .btn-excel-export,
body[data-user-role="field_engineer"] [id*="btnExport"],
body[data-user-role="vendor"] [id*="btnExport"],
body[data-user-role="field_engineer"] button[onclick*="export"],
body[data-user-role="vendor"] button[onclick*="export"],
body[data-user-role="field_engineer"] button[onclick*="Export"],
body[data-user-role="vendor"] button[onclick*="Export"],
body[data-user-role="vendor"] a[href*="/api/export/excel"],
body[data-user-role="field_engineer"] a[href*="/api/export/excel"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── INVENTORY EXECUTIVE HEADER CLEANUP ── */
/* The Email Watcher status badge, live timestamp, and Sync Email button are all about the
   background email-report ingestion pipeline — an Admin/Operator concern, not something an
   Inventory Executive's own dashboard needs cluttering its header with. Scoped to this role
   only via body[data-user-role], same mechanism the Field Engineer export restriction above
   already uses — every other role keeps seeing these unchanged. */
body[data-user-role="inventory_executive"] #emailWatcherBadge,
body[data-user-role="inventory_executive"] #liveTimestamp,
body[data-user-role="inventory_executive"] #btnSync,
body[data-user-role="inventory_executive"] #btnStopSync {
    display: none !important;
}

/* ── FIELD ENGINEER: NO INLINE PER-SITE MATERIAL HISTORY ── */
/* Per-site Material Request & Dispatch History (status grid, table, and the Dispatch Trend
   chart) shown inline on the request form after an AMC ID/IP lookup is analytics detail a
   Field Engineer submitting a request doesn't need — Operator/Manager/Inventory
   Executive/Admin get the same (and more: consumption vs. raw-material-returned, charts,
   report download) via the "📊 Material Tracking" button on the record's own details
   drawer instead (see navigateToMaterialTracking() in app.js). Desktop and mobile both. */
body[data-user-role="vendor"] #amcMaterialHistoryContainer,
body[data-user-role="field_engineer"] #amcMaterialHistoryContainer {
    display: none !important;
}

/* Mobile-only summary cell in the device table (name/status/IP subtitle + 📦 icon) — a
   real 9th <td> that must stay out of the desktop table entirely, not just visually
   de-emphasized; the mobile breakpoint below turns it back on. */
#amcDevicesTable td.dev-mobile-only {
    display: none;
}

/* Sidebar sub-items (Dashboard/New Request/Request History/Material Returns, under Field
   Engineer Panel) — mobile-only shortcuts to the same 4 destinations the bottom nav bar
   already covers, for a user who opens the hamburger menu out of habit. Desktop already
   has the FE panel's own tab bar immediately visible, so these stay hidden there. */
.fe-nav-subitem {
    display: none;
}

/* Mobile-only "SITE DEVICES" short title + circular device-count badge, swapped in for the
   desktop title/pill below. */
.amc-devtable-title-short,
.amc-device-count-circle {
    display: none;
}

/* Mobile-only short labels for the Auto Fetch/Manual/Restock sub-tabs, swapped in for the
   full desktop labels below — keeps all 3 tabs on a single row on narrow screens. */
.req-mode-tab-short {
    display: none;
}

/* Mobile-only short labels for the Device Selection Mode row, swapped in for the full
   desktop labels below — keeps the whole row compact on narrow screens. */
.devselect-mode-label-short,
.devselect-opt-label-short {
    display: none;
}

/* ── COMPACT FIELD ENGINEER MOBILE KPI GRID ── */
.fe-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .fe-kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.45rem !important;
    }

    .fe-kpi-card {
        padding: 0.6rem 0.35rem !important;
        border-radius: 10px !important;
    }

    .fe-kpi-icon {
        font-size: 1.1rem !important;
        margin-bottom: 0.2rem !important;
    }

    .fe-kpi-val {
        font-size: 1.35rem !important;
        margin-bottom: 0.15rem !important;
    }

    .fe-kpi-label {
        font-size: 0.62rem !important;
        letter-spacing: 0.2px !important;
    }
}

.fe-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 0.65rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

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

.fe-kpi-icon {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.fe-kpi-val {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.2rem;
}

.fe-kpi-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.fe-kpi-blue { background: #f0f9ff; border-color: #bae6fd; }
.fe-kpi-blue .fe-kpi-val { color: #0284c7; }
.fe-kpi-blue .fe-kpi-label { color: #0369a1; }

.fe-kpi-orange { background: #fffbeb; border-color: #fde68a; }
.fe-kpi-orange .fe-kpi-val { color: #d97706; }
.fe-kpi-orange .fe-kpi-label { color: #b45309; }

.fe-kpi-green { background: #f0fdf4; border-color: #bbf7d0; }
.fe-kpi-green .fe-kpi-val { color: #16a34a; }
.fe-kpi-green .fe-kpi-label { color: #15803d; }

.fe-kpi-purple { background: #faf5ff; border-color: #e9d5ff; }
.fe-kpi-purple .fe-kpi-val { color: #9333ea; }
.fe-kpi-purple .fe-kpi-label { color: #7e22ce; }

.fe-kpi-red { background: #fef2f2; border-color: #fecaca; }
.fe-kpi-red .fe-kpi-val { color: #dc2626; }
.fe-kpi-red .fe-kpi-label { color: #b91c1c; }

/* Was applied in the markup (RETURNS / Inventory Return-Collect cards) without ever being
   defined here — those two spots only looked right because an inline style duplicated the
   same colors on top of it. Defining it properly means the class itself now works anywhere
   it's used, inline override or not. */
.fe-kpi-cyan { background: #f0f9ff; border-color: #bae6fd; }
.fe-kpi-cyan .fe-kpi-val { color: #0284c7; }
.fe-kpi-cyan .fe-kpi-label { color: #0369a1; }

/* "Awaiting Reconciliation" vs "Reconciled" — the dispatched pile split by whether a
   fe_reconciliation_status has been recorded yet, same signal the Inventory/Manager panels
   split their own "dispatched" bucket on. */
.fe-kpi-amber { background: #fff7ed; border-color: #fdba74; }
.fe-kpi-amber .fe-kpi-val { color: #c2410c; }
.fe-kpi-amber .fe-kpi-label { color: #9a3412; }

.fe-kpi-teal { background: #f0fdfa; border-color: #99f6e4; }
.fe-kpi-teal .fe-kpi-val { color: #0d9488; }
.fe-kpi-teal .fe-kpi-label { color: #0f766e; }

/* ── FIELD ENGINEER MOBILE TABS & TOOLBAR OPTIMIZATIONS ── */
/* ── ULTRA-PREMIUM FIELD ENGINEER ENTERPRISE HERO & SEGMENTED CONTROLS ── */
.fe-hero-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fe-hero-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.fe-hero-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fe-hero-title {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.3px !important;
}

.fe-hero-sub {
    font-size: 0.82rem !important;
    color: #64748b !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

.fe-hero-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fe-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.fe-hero-pill.pill-blue {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
}

.fe-hero-pill.pill-purple {
    background: #faf5ff;
    color: #9333ea;
    border-color: #e9d5ff;
}

.fe-hero-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.fe-hero-actions .btn-primary-action {
    flex: 1;
    min-width: 220px;
    padding: 0.85rem 1.25rem;
    font-size: 0.92rem;
    font-weight: 800;
    border-radius: 12px;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.fe-hero-actions .btn-green {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
}

.fe-hero-actions .btn-slate {
    background: #334155;
    color: #ffffff;
}

@media (max-width: 768px) {
    .fe-hero-card {
        padding: 1.1rem !important;
        border-radius: 14px !important;
    }

    .fe-hero-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        padding-bottom: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .fe-hero-title {
        font-size: 1.15rem !important;
    }

    .fe-hero-actions .btn-primary-action {
        width: 100% !important;
        min-width: 100% !important;
    }
}

.fe-panel-tabs {
    display: flex;
    gap: 0.4rem;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 1.25rem;
}

.fe-panel-tabs .stock-tab-btn {
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.6rem 0.95rem;
    border-radius: 8px 8px 0 0;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .fe-panel-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.25rem !important;
        background: #e2e8f0 !important;
        padding: 4px !important;
        border-radius: 12px !important;
        border-bottom: none !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .fe-panel-tabs .stock-tab-btn {
        width: 100% !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        padding: 0.65rem 0.3rem !important;
        border-radius: 8px !important;
        text-align: center !important;
        border: none !important;
        background: transparent !important;
        color: #475569 !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        min-height: 42px !important;
    }

    .fe-panel-tabs .stock-tab-btn.active {
        background: #ffffff !important;
        color: #0284c7 !important;
        font-weight: 800 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    }

    /* Auto Fetch/Manual Request/Material Restock sub-tabs: 3 across in a single row
       instead of the generic 2-column grid above (which left the 3rd tab wrapping onto
       its own row) — paired with shorter labels below so each column stays readable. */
    #reqModeTabsWrapper {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    #reqModeTabsWrapper .stock-tab-btn {
        font-size: 0.72rem !important;
        padding: 0.6rem 0.2rem !important;
    }

    .req-mode-tab-full {
        display: none !important;
    }

    .req-mode-tab-short {
        display: inline !important;
    }

    /* Device Selection Mode row — compact single-line labels + tighter spacing, and drop
       the italic hint line entirely (redundant once the row itself is this compact). */
    #batchMaterialBuilderSection {
        padding: 0.75rem !important;
    }

    .devselect-mode-label-full,
    .devselect-opt-label-full {
        display: none !important;
    }

    .devselect-mode-label-short,
    .devselect-opt-label-short {
        display: inline !important;
    }

    .devselect-hint {
        display: none !important;
    }
}

/* ── INLINE TABLE HEADER & INTEGRATED FILTER TOOLBAR ── */
.table-header-inline-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.header-title-inline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.inline-title-text {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
}

.table-controls-inline-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

/* ── 2-PART SMART DYNAMIC SEARCH FILTER TOOLBAR ── */
/* ── INLINE TABLE ROW CONTENT ── */
.device-table th,
.device-table td {
    white-space: nowrap !important;
    vertical-align: middle !important;
    padding: 0.75rem 0.9rem !important;
}

.device-table td.site-name-cell {
    white-space: normal !important;
    max-width: 240px;
    word-break: break-word;
}

/* ── PROFESSIONAL FILTER TOOLBAR (row layout — desktop/tablet only; mobile
   gets the column-stacked version from the max-width:768px block above, so
   search/filter/entries-per-page stay fully usable on a phone instead of the
   entire toolbar being hidden) ── */
@media (min-width: 769px) {
    .table-controls-flex,
    .op-tracker-filter-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 0.75rem 1.25rem !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        margin-bottom: 1.25rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.table-controls-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
}

.table-controls-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
}

.entries-selector {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    white-space: nowrap !important;
}

.entries-selector select {
    height: 38px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    cursor: pointer !important;
}

.smart-search-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 4px 8px !important;
    width: 100% !important;
    max-width: 580px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.smart-search-box:focus-within {
    background: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.smart-field-select {
    height: 38px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 0 0.75rem !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    cursor: pointer !important;
    outline: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.smart-input-wrap {
    flex: 1 !important;
    min-width: 180px !important;
    display: flex !important;
    align-items: center !important;
}

.smart-input-wrap input[type="text"] {
    width: 100% !important;
    height: 38px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    padding: 0 0.75rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.smart-date-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.smart-date-wrap .date-sep {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
}

.smart-date-wrap .date-picker-filter {
    height: 38px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.btn-smart-clear {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.btn-smart-clear:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* Combined-class selector (specificity beats a lone .hidden, regardless of source order —
   the exact bug fixed below) so the Date Range inputs only ever show once "📅 Date Range"
   is actually picked in the field dropdown, never just because the box happens to render
   after .smart-date-wrap's own unconditional "display: flex !important" rule above. */
.smart-date-wrap.hidden { display: none !important; }

/* Request History / All Material Request search bar — collapses to just a search icon on
   desktop; clicking it expands the field-dropdown + input into view right next to the icon
   and keeps it open (no auto-collapse) until clicked again. Mobile is untouched below via
   display:contents, which keeps every pre-existing mobile rule (including the Field
   Engineer-only single-text-box simplification) working exactly as it did before this
   wrapper existed. */
.btn-smart-search-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}
.btn-smart-search-toggle:hover {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}
.btn-smart-search-toggle.active {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

.op-tracker-search-expand {
    display: none;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}
.op-tracker-search-expand.is-open { display: flex !important; }

@media (min-width: 769px) {
    /* Collapsed by default: just fit the icon instead of reserving the full search-bar
       width with nothing in it. */
    .smart-search-box { max-width: fit-content !important; }
    .smart-search-box.expanded { width: 100% !important; max-width: 580px !important; }
}

@media (max-width: 768px) {
    .btn-smart-search-toggle { display: none !important; }
    .op-tracker-search-expand { display: contents !important; }
}

/* Re-assert mobile search-bar wrapping: the unconditional .smart-search-box
   block above sets flex-wrap: nowrap !important with the same specificity as
   the earlier @media (max-width: 768px) block's wrap rule, and wins the
   cascade tie by appearing later in source order — causing the search input
   to overflow the card instead of stacking. This block re-wins the tie by
   appearing later still. */
@media (max-width: 768px) {
    .smart-search-box {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }

    .smart-field-select {
        width: 100% !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    .smart-input-wrap {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .smart-input-wrap input[type="text"] {
        width: 100% !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    .smart-date-wrap {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .smart-date-wrap .date-picker-filter {
        height: 44px !important;
        font-size: 16px !important;
    }

    .entries-selector select {
        height: 44px !important;
        font-size: 16px !important;
    }
}

/* ── ULTRA-PREMIUM MINIMALIST ENTERPRISE APP FOOTER ── */
.app-global-footer {
    position: relative !important;
    margin-top: auto !important;
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-top: 1px solid #1e293b !important;
    padding: 1.25rem 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.footer-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-bottom: none !important;
    gap: 1.5rem !important;
}

.footer-left-brand {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    flex-shrink: 0 !important;
}

.footer-logo-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.footer-logo-icon {
    font-size: 1.1rem !important;
}

.footer-logo-name {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.2px !important;
}

.footer-org-subtitle {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.footer-center-copyright {
    font-size: 0.78rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
    text-align: center !important;
    flex: 1 !important;
}

.footer-right-status {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    flex-shrink: 0 !important;
}

.footer-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 20px !important;
    border: 1px solid #334155 !important;
    background: #1e293b !important;
    color: #cbd5e1 !important;
    white-space: nowrap !important;
}

.footer-badge-pill.status-online {
    background: #062e1b !important;
    border-color: #166534 !important;
    color: #4ade80 !important;
}

.footer-badge-pill .online-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background-color: #22c55e !important;
    box-shadow: 0 0 8px #22c55e !important;
}

@media (max-width: 900px) {
    .app-global-footer {
        padding: 1.25rem 1rem 3rem 1rem !important;
    }

    .footer-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.85rem !important;
        flex-wrap: wrap !important;
    }

    .footer-left-brand {
        align-items: center !important;
    }

    .footer-right-status {
        justify-content: center !important;
    }

    /* Global Stock Warning Bar — the "SCADL CCC ENTrack-MICS | Stock Status Live
       Overview" label + Out of Stock / Low Stock / Materials Cataloged chips at the top
       of the footer, on every panel and every role. Previously had no mobile treatment
       at all, so the 3 chips (each wide enough on their own) just wrapped onto their own
       stacked lines under flex-wrap — this replaces that with an actual grid layout. */
    .global-stock-warning-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .global-stock-footer-label {
        text-align: center;
        font-size: 0.72rem;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid #1e293b;
    }

    .global-stock-chips-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.55rem !important;
        width: 100%;
    }

    .global-stock-chips-row .warn-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        padding: 0.6rem 0.5rem;
        font-size: 0.78rem;
        border-radius: 10px;
    }

    .global-stock-cataloged-badge {
        grid-column: 1 / -1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        padding: 0.6rem 0.5rem !important;
        font-size: 0.78rem !important;
        border-radius: 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIELD ENGINEER MOBILE APP SHELL (added August 29, 2026)
   A dedicated, app-like mobile home screen for the field_engineer role only
   — branded topbar, "Needs your action" cards, stats + progress, recent
   activity, and a fixed bottom tab bar mirroring the existing 4 FE tabs.
   Desktop, and every other role that shares this same panel (Admin,
   VMD Engineer, ...), is untouched — these elements stay display:none
   outside the (max-width:768px) + body[data-user-role="field_engineer"]
   outside the (max-width:768px) + body[data-user-role="vendor"]
   combination below.
   ═══════════════════════════════════════════════════════════════════════ */

.fe-mobile-topbar,
.fe-mobile-home,
.fe-mobile-history-cards,
.fe-returns-mobile-header,
.fe-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* Hide only the parts of the generic top header that are redundant with the blue
       app-shell topbar below (title/org badge, install-app button, email-watcher chrome) —
       NOT the whole <header>. The Notification Bell and Profile Menu dropdowns are DOM
       children of .top-header, so display:none on the header itself made them permanently
       unrenderable (a display:none ancestor blocks a descendant from ever showing, no
       matter what its own classes say) — that's what made those two icons "not clickable"
       from the app-shell's own (non-functional) bell/avatar buttons. Keeping the hamburger
       + real bell/avatar visible here, as a slim utility bar above the blue header, keeps
       them working exactly as everywhere else in the app. */
    body[data-user-role="field_engineer"] .main-content:has(#panelOperator:not(.hidden)) .header-left > div,
    body[data-user-role="vendor"] .main-content:has(#panelOperator:not(.hidden)) .header-left > div,
    body[data-user-role="field_engineer"] .main-content:has(#panelOperator:not(.hidden)) #btnInstallApp,
    body[data-user-role="vendor"] .main-content:has(#panelOperator:not(.hidden)) #btnInstallApp,
    body[data-user-role="field_engineer"] .main-content:has(#panelOperator:not(.hidden)) #emailWatcherBadge,
    body[data-user-role="vendor"] .main-content:has(#panelOperator:not(.hidden)) #emailWatcherBadge,
    body[data-user-role="field_engineer"] .main-content:has(#panelOperator:not(.hidden)) #liveTimestamp,
    body[data-user-role="vendor"] .main-content:has(#panelOperator:not(.hidden)) #liveTimestamp,
    body[data-user-role="field_engineer"] .main-content:has(#panelOperator:not(.hidden)) #btnSync,
    body[data-user-role="vendor"] .main-content:has(#panelOperator:not(.hidden)) #btnSync,
    body[data-user-role="vendor"] .main-content:has(#panelOperator:not(.hidden)) #btnStopSync,
    body[data-user-role="field_engineer"] .main-content:has(#panelOperator:not(.hidden)) #btnStopSync {
        display: none !important;
    }

    body[data-user-role="vendor"] .main-content:has(#panelOperator:not(.hidden)),
    body[data-user-role="field_engineer"] .main-content:has(#panelOperator:not(.hidden)) {
        padding-bottom: calc(4.9rem + env(safe-area-inset-bottom)) !important;
    }

    body[data-user-role="field_engineer"] #feDashboardCard,
    body[data-user-role="vendor"] #feDashboardCard,
    body[data-user-role="field_engineer"] #feVmdKpiGridCard,
    body[data-user-role="vendor"] #feVmdKpiGridCard,
    body[data-user-role="field_engineer"] #fePendingActionsCard,
    body[data-user-role="vendor"] #fePendingActionsCard,
    body[data-user-role="field_engineer"] #feRecentlyApprovedCard,
    body[data-user-role="vendor"] #feRecentlyApprovedCard,
    body[data-user-role="vendor"] #feActiveRequestsCard,
    body[data-user-role="field_engineer"] #feActiveRequestsCard {
        display: none !important;
    }

    /* Only the OUTER Dashboard/New Request/History/Return tab switcher is redundant with
       the bottom nav — it's a direct child of #panelOperator. A plain descendant selector
       here would also catch the INNER Auto Fetch/Manual Request/Material Restock sub-tabs
       inside #feTabContentRequest (both use .fe-panel-tabs), which is exactly what
       silently hid that sub-tab switcher on mobile — the > combinator keeps this scoped to
       just the outer one. */
    body[data-user-role="vendor"] #panelOperator > .fe-panel-tabs,
    body[data-user-role="field_engineer"] #panelOperator > .fe-panel-tabs {
        display: none !important;
    }

    /* ── Topbar ── */
    body[data-user-role="vendor"] .fe-mobile-topbar,
    body[data-user-role="field_engineer"] .fe-mobile-topbar {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
        border-radius: 14px;
        padding: 0.9rem 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
    }

    .fe-mobile-topbar-info {
        flex: 1;
        min-width: 0;
    }

    .fe-mobile-topbar-title {
        font-size: 1.15rem;
        font-weight: 800;
        color: #ffffff;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fe-mobile-topbar-sub {
        font-size: 0.78rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.85);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Home screen sections ── */
    body[data-user-role="vendor"] .fe-mobile-home,
    body[data-user-role="field_engineer"] .fe-mobile-home {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .fe-mobile-section {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 1rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    }

    .fe-mobile-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }

    .fe-mobile-section-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: #0f172a;
    }

    .fe-mobile-section-count {
        font-size: 0.75rem;
        font-weight: 700;
        color: #64748b;
        background: #f1f5f9;
        border-radius: 999px;
        padding: 0.15rem 0.6rem;
    }

    .fe-mobile-needs-action {
        border-color: #fde68a;
        background: #fffbeb;
    }

    .fe-mobile-needs-action .fe-mobile-section-title {
        color: #92400e;
    }

    .fe-mobile-needs-action .fe-mobile-section-count {
        background: #fef3c7;
        color: #92400e;
    }

    /* ── Needs-your-action cards ── */
    .fe-mobile-action-cards {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .fe-mobile-action-card {
        background: #ffffff;
        border: 1px solid #fde68a;
        border-radius: 12px;
        padding: 0.8rem 0.9rem;
    }

    .fe-mobile-action-card-top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .fe-mobile-action-card-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: #0f172a;
    }

    .fe-mobile-action-card-qty {
        font-size: 0.8rem;
        font-weight: 700;
        color: #92400e;
        white-space: nowrap;
    }

    .fe-mobile-action-card-sub {
        font-size: 0.78rem;
        color: #78716c;
        margin-top: 0.2rem;
    }

    .fe-mobile-action-card-btns {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.7rem;
    }

    .fe-mobile-btn-reconcile,
    .fe-mobile-btn-details {
        flex: 1;
        height: 40px;
        border-radius: 9px;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
    }

    .fe-mobile-btn-reconcile {
        border: none;
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
        color: #ffffff;
    }

    .fe-mobile-btn-details {
        border: 1px solid #d6d3d1;
        background: #ffffff;
        color: #57534e;
    }

    /* ── Progress bar + stats grid ── */
    .fe-mobile-progress-track {
        display: flex;
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: #f1f5f9;
        overflow: hidden;
        margin-bottom: 0.9rem;
    }

    .fe-mobile-progress-fill {
        height: 100%;
        transition: width 0.4s ease;
    }

    .fe-mobile-progress-dispatched {
        background: #0284c7;
    }

    .fe-mobile-progress-approved {
        background: #16a34a;
    }

    .fe-mobile-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }

    .fe-mobile-stat-card {
        border-radius: 12px;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        cursor: pointer;
    }

    .fe-mobile-stat-card:active {
        transform: scale(0.97);
    }

    .fe-mobile-stat-icon {
        font-size: 1rem;
    }

    .fe-mobile-stat-val {
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1.15;
    }

    .fe-mobile-stat-label {
        font-size: 0.75rem;
        font-weight: 700;
    }

    .fe-mobile-stat-blue {
        background: #f0f9ff;
        border: 1px solid #bae6fd;
    }

    .fe-mobile-stat-blue .fe-mobile-stat-val { color: #0284c7; }
    .fe-mobile-stat-blue .fe-mobile-stat-label { color: #0369a1; }

    .fe-mobile-stat-green {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
    }

    .fe-mobile-stat-green .fe-mobile-stat-val { color: #16a34a; }
    .fe-mobile-stat-green .fe-mobile-stat-label { color: #15803d; }

    .fe-mobile-stat-outline {
        background: #ffffff;
        border: 1px solid #e2e8f0;
    }

    .fe-mobile-stat-outline .fe-mobile-stat-val { color: #0f172a; }
    .fe-mobile-stat-outline .fe-mobile-stat-label { color: #64748b; }

    /* ── Recent activity ── */
    .fe-mobile-activity-list {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
    }

    .fe-mobile-activity-row {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        cursor: pointer;
        border-radius: 8px;
        padding: 0.2rem;
        margin: -0.2rem;
    }

    .fe-mobile-activity-row:active {
        background: #f1f5f9;
    }

    .fe-mobile-activity-icon {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #f1f5f9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
    }

    .fe-mobile-activity-text {
        font-size: 0.85rem;
        font-weight: 600;
        color: #0f172a;
    }

    .fe-mobile-activity-time {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 0.1rem;
    }

    /* ── Bottom tab bar ── */
    body[data-user-role="vendor"] .fe-bottom-nav,
    body[data-user-role="field_engineer"] .fe-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06);
        padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom)) 0.5rem;
    }

    .fe-bottom-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.35rem 0;
        border: none;
        background: transparent;
        color: #94a3b8;
        cursor: pointer;
        border-radius: 10px;
    }

    .fe-bottom-nav-icon {
        font-size: 1.15rem;
        line-height: 1;
    }

    .fe-bottom-nav-label {
        font-size: 0.68rem;
        font-weight: 700;
    }

    .fe-bottom-nav-btn.active {
        color: #0284c7;
        background: #f0f9ff;
    }

    /* "Add Material" box (New Request → Auto Fetch) — hidden outright until a Device
       Selection Mode radio is chosen, instead of desktop's dimmed-but-visible treatment
       (see onDevSelectModeChanged() in app.js, which toggles this class). A large disabled
       form eating screen space before it's even usable is more confusing than helpful on
       a phone. */
    body[data-user-role="vendor"] #batchBuilderControls.builder-mode-not-selected,
    body[data-user-role="field_engineer"] #batchBuilderControls.builder-mode-not-selected {
        display: none !important;
    }

    /* Device table (New Request → Auto Fetch, AMC ID/IP lookup results) — laid out as
       compact, non-scrolling rows instead of a cramped 8-column table (which needed
       horizontal scroll to read on a phone), using the standard "responsive table"
       technique (hide the header row, flex-ify every row). Scoped to this one table via
       its own id, not every .amc-devices-table (the per-site Request Status table inside
       the history section hidden from Field Engineer above reuses that class).

       Per explicit request, each card shows only: a checkbox, the Device/Monitor Name, one
       small subtitle line (status · online/down-bucket · IP — see the
       mobileSubtitleParts logic in renderAmcDeviceTable(), app.js), and a 📦 icon that
       opens a shared popup for that device's Material Required + Remarks (instead of
       showing that whole form inline on every one of what can be 10-200+ device cards per
       AMC ID) — see openDeviceMaterialModal()/closeDeviceMaterialModal() in app.js, which
       physically relocate the existing devMatBlock_${idx}/devRemBlock_${idx} elements into
       #feDeviceMaterialModal and back, so no DOM/id duplication or handler changes were
       needed for the interactive per-row controls (material select, tags, remarks). */
    #amcDevicesTable thead {
        display: none;
    }

    #amcDevicesTable,
    #amcDevicesTable tbody {
        display: block;
        width: 100%;
    }

    /* Per explicit request: scroll should only ever go exactly as far as needed to reveal
       content that doesn't fit (e.g. a long "Add Material" line on a device with an
       unusually long down_category/IP combination) — never further. Plain overflow-x:auto
       already does exactly that (a scrollbar only appears when, and only scrolls as far
       as, content actually overflows) — the general .table-responsive rule already sets
       this for every other table on mobile; this table doesn't need its own override
       anymore now that it's just falling back to that same default. */

    #amcDevicesTable tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        column-gap: 0.6rem;
        row-gap: 0.35rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 0.75rem 0.85rem;
        margin-bottom: 0.65rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    #amcDevicesTable td {
        padding: 0;
        border: none !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Hidden on mobile — replaced entirely by the .dev-mobile-only cell below (name,
       subtitle, and the 📦 icon). Content stays exactly where it is in the DOM (still
       real, functioning elements) until the icon relocates the Material/Remarks blocks
       into the popup. */
    #amcDevicesTable td[data-label="#"],
    #amcDevicesTable td[data-label="Device IP Address"],
    #amcDevicesTable td[data-label="Device / Monitor Name"],
    #amcDevicesTable td[data-label="Status"],
    #amcDevicesTable td[data-label="Down Bucket"],
    #amcDevicesTable td[data-label="Material Required"],
    #amcDevicesTable td[data-label="Remarks / Requirement Reason*"] {
        display: none !important;
    }

    /* The per-device checkbox only matters in Manual Record Selection mode ("Entire Down
       Devices" doesn't need one; no mode picked yet has nothing to select for) — hidden by
       default, shown only once #amcDevicesTable carries .manual-select-active (toggled in
       onDevSelectModeChanged(), app.js). */
    #amcDevicesTable td[data-label="Select"] {
        display: none;
    }

    #amcDevicesTable.manual-select-active td[data-label="Select"] {
        display: flex;
        align-items: center;
        width: auto;
        flex-shrink: 0;
    }

    #amcDevicesTable td[data-label="Select"] input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    #amcDevicesTable td.dev-mobile-only {
        display: flex !important;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Name row shares its line with the Select checkbox (flex:1 1 auto fills whatever
       width the checkbox — a fixed-size sibling — didn't take, rather than forcing its
       own full-width line), so the checkbox reads as inline with the device/site name. */
    #amcDevicesTable td.dev-mobile-name-td {
        flex: 1 1 auto;
        align-items: center;
    }

    /* Subtitle + Add Material stay on their own full-width line below. */
    #amcDevicesTable td.dev-mobile-subtitle-td {
        flex: 1 0 100%;
    }

    /* SWITCH indicator — icon only per explicit request (the device name usually already
       says "Switch" in it, so repeating the word was redundant). The icon is placed FIRST
       in this row, as a fixed-size (flex-shrink:0) item, with the name taking the rest of
       the space after it — a fixed-size first item is always painted in full regardless of
       how much room is left over; only the LAST item can ever be short on space. This
       replaces a position:absolute placement from the previous attempt, which turned out to
       have its own box-sizing/overflow interaction bug. */
    .dev-mobile-name-header {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
        max-width: 100%;
    }

    .dev-mobile-switch-icon {
        flex-shrink: 0;
        font-size: 1rem;
        line-height: 1;
    }

    .dev-mobile-name {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        font-size: 0.85rem;
        font-weight: 700;
        color: #0f172a;
        word-break: break-word;
    }

    /* "SITE DEVICES" short title + circular device-count badge, replacing the long desktop
       title and its "N Device(s) Found" text pill. */
    .amc-devtable-title-full,
    #amcDeviceCountBadge {
        display: none !important;
    }

    .amc-devtable-title-short {
        display: inline;
    }

    .amc-device-count-circle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #eff6ff;
        border: 1px solid #93c5fd;
        color: #1d4ed8;
        font-size: 0.9rem;
        font-weight: 800;
        flex-shrink: 0;
    }

    /* Sidebar sub-items — visible only once permitted (fe-subitem-permitted, toggled in
       JS alongside the Field Engineer Panel link's own permission) and only for the
       field_engineer role on mobile. Indented under the parent link, smaller than a
       top-level nav-item. (#navAttendance is NOT one of these anymore — it's a top-level
       link parallel to My Dashboard, shown via its own inline style.) */
    body[data-user-role="field_engineer"] .fe-nav-subitem.fe-subitem-permitted,
    body[data-user-role="vendor"] .fe-nav-subitem.fe-subitem-permitted,
    body[data-user-role="vendor"] .fe-nav-subitem.fe-subitem-permitted {
        display: flex !important;
        align-items: center;
        gap: 0.6rem;
        padding: 0.5rem 0.9rem 0.5rem 2.6rem !important;
        font-size: 0.85rem;
    }

    .nav-subitem-icon {
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    /* Subtitle text and the material-popup trigger sit on the same line, inline, small text
       throughout — wraps to a second line if it doesn't fit rather than truncating or
       (via the .table-responsive override above) ever needing horizontal scroll. */
    .dev-mobile-subtitle-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.15rem;
    }

    .dev-mobile-subtitle {
        font-size: 0.72rem;
        font-weight: 700;
        color: #64748b;
        min-width: 0;
        word-break: break-word;
    }

    .dev-mobile-material-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        background: none;
        border: none;
        color: #1d4ed8;
        font-size: 0.72rem;
        font-weight: 800;
        padding: 0;
        cursor: pointer;
        white-space: nowrap;
    }

    /* Content borrowed into the popup (Material Required select+Add+tags, then the Remarks
       input) needs its own labels there, since the original cell's ::before label got left
       behind with the (now-hidden) <td>. */
    #feDeviceMaterialModalBody > div[id^="devMatBlock_"]::before {
        content: "Material Required";
        display: block;
        font-size: 0.7rem;
        font-weight: 800;
        color: #0369a1;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.4rem;
    }

    #feDeviceMaterialModalBody > div[id^="devRemBlock_"] {
        margin-top: 1rem;
    }

    #feDeviceMaterialModalBody > div[id^="devRemBlock_"]::before {
        content: "Remarks / Requirement Reason*";
        display: block;
        font-size: 0.7rem;
        font-weight: 800;
        color: #0369a1;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.4rem;
    }

    #feDeviceMaterialModalBody .dev-remarks-input {
        width: 100%;
        box-sizing: border-box;
        padding: 0.55rem 0.75rem;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 0.88rem;
    }

    /* Request History search bar — simplified to a single plain text box on mobile per
       explicit request (searches Site/Material/AMC/etc. all at once, same as the hidden
       dropdown's default "All Fields" mode already did — its value stays "all" since the
       select just isn't visible to change it, not removed from the DOM/JS). Scoped to this
       one search bar's own ids/container, not every .smart-field-select/.btn-smart-clear
       in the app. */
    body[data-user-role="field_engineer"] #opTrackerSearchField,
    body[data-user-role="vendor"] #opTrackerSearchField,
    body[data-user-role="field_engineer"] #opTrackerDateInputWrap,
    body[data-user-role="vendor"] #opTrackerDateInputWrap,
    body[data-user-role="vendor"] .op-tracker-filter-bar .btn-smart-clear,
    body[data-user-role="field_engineer"] .op-tracker-filter-bar .btn-smart-clear {
        display: none !important;
    }

    /* "Show N entries" + the (now single-field) search box, side by side on one row
       instead of stacked — the general .table-controls-flex mobile rule above stacks
       them for every OTHER table in the app, so this overrides just this one filter bar
       via a more specific selector rather than touching that shared rule. */
    body[data-user-role="vendor"] .op-tracker-filter-bar,
    body[data-user-role="field_engineer"] .op-tracker-filter-bar {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.6rem !important;
    }

    body[data-user-role="vendor"] .op-tracker-filter-bar .table-controls-left,
    body[data-user-role="field_engineer"] .op-tracker-filter-bar .table-controls-left {
        width: auto !important;
        flex-shrink: 0 !important;
    }

    body[data-user-role="vendor"] .op-tracker-filter-bar .table-controls-right,
    body[data-user-role="field_engineer"] .op-tracker-filter-bar .table-controls-right {
        width: auto !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Inventory Return/Collect tab header — a short title + zone pill on mobile instead
       of the desktop's title + full descriptive sentence (wraps to several lines on a
       phone). Kept in sync by the same fetchZoneLeaderInventoryReturns() as the desktop
       version. */
    body[data-user-role="vendor"] .fe-returns-desktop-header,
    body[data-user-role="field_engineer"] .fe-returns-desktop-header {
        display: none !important;
    }

    body[data-user-role="vendor"] .fe-returns-mobile-header,
    body[data-user-role="field_engineer"] .fe-returns-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .fe-returns-mobile-title {
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
    }

    .fe-returns-mobile-zone {
        font-size: 0.75rem;
        font-weight: 700;
        color: #0369a1;
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        border-radius: 999px;
        padding: 0.25rem 0.7rem;
        white-space: nowrap;
    }

    /* Search + Clear on one row instead of stacked — the general .search-filters-group
       mobile rule (flex-direction:column, every child width:100%) is what stacks them for
       every OTHER search bar using this class, so this overrides just this one via a more
       specific selector. */
    body[data-user-role="vendor"] #feTabContentReturn .search-filters-group,
    body[data-user-role="field_engineer"] #feTabContentReturn .search-filters-group {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    body[data-user-role="vendor"] #feTabContentReturn .search-filters-group input#searchZoneLeaderReturnInput,
    body[data-user-role="field_engineer"] #feTabContentReturn .search-filters-group input#searchZoneLeaderReturnInput {
        width: auto !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    body[data-user-role="vendor"] #feTabContentReturn .search-filters-group .btn-clear-filter,
    body[data-user-role="field_engineer"] #feTabContentReturn .search-filters-group .btn-clear-filter {
        width: auto !important;
        flex-shrink: 0 !important;
        padding: 0.5rem 0.9rem !important;
    }

    /* ── Request History / Inventory Return card-list view ──
       Replaces the wide desktop tables on these two tabs (which need horizontal
       scroll to read on a phone) with a card list matching the app-shell's visual
       language. Scoped to just these two tabs' own table wrappers, not every
       .table-responsive/.table-wrapper in the app. */
    body[data-user-role="field_engineer"] #feTabContentHistory .table-responsive,
    body[data-user-role="vendor"] #feTabContentHistory .table-responsive,
    body[data-user-role="vendor"] #feTabContentReturn .table-wrapper,
    body[data-user-role="field_engineer"] #feTabContentReturn .table-wrapper {
        display: none !important;
    }

    body[data-user-role="vendor"] .fe-mobile-history-cards,
    body[data-user-role="field_engineer"] .fe-mobile-history-cards {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 0.75rem;
    }

    .fe-mobile-history-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 0.8rem 0.9rem;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    .fe-mobile-history-card-top {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .fe-mobile-history-card-icon {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .fe-mobile-history-card-site {
        font-size: 1.02rem;
        font-weight: 800;
        color: #0f172a;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fe-mobile-history-card-badge-row {
        margin-top: 0.5rem;
    }

    .fe-mobile-history-card-detail {
        font-size: 0.82rem;
        font-weight: 600;
        color: #475569;
        margin-top: 0.45rem;
        line-height: 1.4;
    }

    /* Inventory Return/Collect filter bar — From/To date pickers dropped on mobile per
       explicit request (Search + Clear are enough there; desktop keeps all 3 fields). */
    body[data-user-role="field_engineer"] #feTabContentReturn #filterZoneLeaderFromDate,
    body[data-user-role="vendor"] #feTabContentReturn #filterZoneLeaderFromDate,
    body[data-user-role="vendor"] #feTabContentReturn #filterZoneLeaderToDate,
    body[data-user-role="field_engineer"] #feTabContentReturn #filterZoneLeaderToDate {
        display: none !important;
    }
}