/**
 * Grocery Admin - Styles
 * Desktop-first admin theme with dark sidebar
 */

/* Vue cloak - hide template until mounted */
[v-cloak] {
    display: none !important;
}

:root {
    --primary-blue: #1e3a5f;
    --primary-hover: #2d4a6f;
    --teal-accent: #0d9488;
    --teal-hover: #0f766e;
    --bg-light: #f8f9fa;
    --border-gray: #dee2e6;
    --text-dark: #212529;
    --text-muted: #6c757d;
    --sidebar-width: 16rem;
    --sidebar-collapsed-width: 4rem;
    --header-height: 3.5rem;
    --purple: #9c27b0;
    /* Readable amber for text and outline-button labels on a light ground.
       Bootstrap's #ffc107 is 1.63:1 against white — effectively invisible. This is the same
       value .cod-badge already used, and it measures 5.49:1. Fill colours are unaffected:
       dark text ON #ffc107 is fine (~10:1), it is amber AS text that fails. */
    --warning-fg: #856404;
}

/* Custom badge colors */
.bg-purple {
    background-color: var(--purple) !important;
    color: #fff !important;
}

.password-toggle-btn {
    border-left: 0;
    border-color: #dee2e6;
    background-color: #fff;
    color: #6c757d;
}

.password-toggle-btn:hover {
    border-color: #dee2e6;
    background-color: #f8f9fa;
    color: #6c757d;
}

.input-group:focus-within .password-toggle-btn {
    border-color: var(--teal-accent);
    background-color: #fff;
}

.input-group:focus-within .password-toggle-btn:hover {
    background-color: #f8f9fa;
}

/* Global Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    margin: 0;
    padding: 0;
}

/* Login Page */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #2d4a6f 100%);
    padding: 1rem;
}

.login-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    padding: 2.5rem;
    width: 100%;
    max-width: 26rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header i {
    font-size: 3rem;
    color: var(--teal-accent);
    margin-bottom: 1rem;
    display: block;
}

.login-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin: 0 0 0.5rem 0;
}

.login-header p {
    color: var(--text-muted);
    margin: 0;
}

.login-form .btn-primary {
    background-color: var(--teal-accent);
    border-color: var(--teal-accent);
    padding: 0.75rem;
    font-weight: 500;
}

.login-form .btn-primary:hover {
    background-color: var(--teal-hover);
    border-color: var(--teal-hover);
}

.login-form .btn-primary:focus,
.login-form .btn-primary:focus-visible {
    background-color: var(--teal-accent);
    border-color: var(--teal-accent);
    box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.5);
}

.login-form .btn-primary:active,
.login-form .btn-primary:first-child:active {
    background-color: var(--teal-hover) !important;
    border-color: var(--teal-hover) !important;
}

.login-form .btn-primary:disabled {
    background-color: var(--teal-accent);
    border-color: var(--teal-accent);
    opacity: 0.65;
}

/* Admin Layout */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--primary-blue);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-header {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: var(--header-height);
}

.sidebar-header i {
    font-size: 1.75rem;
    color: var(--teal-accent);
}

.sidebar-header .sidebar-text {
    font-size: 1.125rem;
    font-weight: 600;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-header .sidebar-text {
    display: none;
}

/* Brand block: app title with the environment badge stacked below it */
.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Environment badge (login page + sidebar). Amber via Bootstrap .badge.bg-warning;
   this only adds letter-spacing. Hidden on prod (v-if="envLabel"). */
.env-badge {
    letter-spacing: 0.05em;
}

.sidebar-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-item.active {
    background: var(--teal-accent);
    color: white;
}

.nav-item i {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

.sidebar.collapsed .nav-item .sidebar-text {
    display: none;
}

.nav-section-label {
    padding: 1rem 1.25rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.25rem;
}

.sidebar.collapsed .nav-section-label span {
    display: none;
}

.sidebar-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem;
    border-radius: 0.375rem;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Top Header */
.top-header {
    background: white;
    border-bottom: 1px solid var(--border-gray);
    padding: 0 1.5rem;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

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

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

.store-filter-select {
    min-width: 160px;
}

.store-filter-badge .store-filter-btn {
    background: var(--bg-light);
    border: 1px solid var(--border-gray);
    color: var(--text-dark);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.store-filter-badge .store-filter-btn:hover {
    background: var(--border-gray);
    border-color: var(--border-gray);
    color: var(--text-dark);
}

.store-filter-badge .store-filter-btn::after {
    margin-left: 0.25rem;
}

.store-filter-badge.active .store-filter-btn {
    background: var(--teal-accent);
    border-color: var(--teal-accent);
    color: white;
}

.store-filter-badge.active .store-filter-btn:hover {
    background: var(--teal-hover);
    border-color: var(--teal-hover);
    color: white;
}

.store-filter-menu {
    max-height: 300px;
    overflow-y: auto;
    min-width: 200px;
}

.admin-dropdown {
    color: var(--text-dark);
    text-decoration: none;
}

.admin-dropdown:hover {
    color: var(--teal-accent);
}

/* Page Content */
.page-content {
    flex: 1;
    padding: 1.5rem;
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin: 0;
}

/* Cards */
.card {
    background: white;
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-gray);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
}

/* Stat Cards */
.stat-card {
    background: white;
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
    height: 100%;
}

.stat-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-icon.bg-primary {
    background: var(--teal-accent);
}

.stat-icon.bg-success {
    background: #198754;
}

.stat-icon.bg-info {
    background: #0dcaf0;
}

.stat-icon.bg-warning {
    background: #ffc107;
    color: var(--text-dark);
}

.stat-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.stat-content p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* Status List */
.status-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.status-item {
    margin-bottom: 0.5rem;
}

/* Tables */
.table {
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-top: none;
}

.table-hover tbody tr:hover {
    background-color: rgba(13, 148, 136, 0.05);
}

/* Badges */
.badge {
    font-weight: 500;
    padding: 0.35rem 0.65rem;
}

/* Buttons */
.btn-primary {
    background-color: var(--teal-accent);
    border-color: var(--teal-accent);
}

.btn-primary:hover {
    background-color: var(--teal-hover);
    border-color: var(--teal-hover);
}

.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: var(--teal-accent);
    border-color: var(--teal-accent);
    box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.5);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--teal-hover) !important;
    border-color: var(--teal-hover) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--teal-accent);
    border-color: var(--teal-accent);
}

.btn-outline-primary {
    color: var(--teal-accent);
    border-color: var(--teal-accent);
}

.btn-outline-primary:hover {
    background-color: var(--teal-accent);
    border-color: var(--teal-accent);
    color: white;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    color: var(--teal-accent);
    border-color: var(--teal-accent);
    box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.5);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:first-child:active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--teal-hover) !important;
    border-color: var(--teal-hover) !important;
    color: white !important;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--teal-accent);
    border-color: var(--teal-accent);
    background-color: transparent;
    opacity: 0.65;
}

/* Secondary button states */
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:first-child:active,
.show > .btn-secondary.dropdown-toggle {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

.btn-secondary:focus,
.btn-secondary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    opacity: 0.65;
}

/* Outline secondary button states */
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary:first-child:active,
.show > .btn-outline-secondary.dropdown-toggle {
    background-color: #5c636a !important;
    border-color: #5c636a !important;
    color: white !important;
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
    opacity: 0.65;
}

/* Outline warning: Bootstrap's resting label is #ffc107 on white, i.e. 1.63:1. Only the label
   colour changes — border, hover fill and active state keep Bootstrap's amber, and hover/active
   already put black on that fill. Applies panel-wide (Reset Password, e-wallet Reset, the
   low-stock and due-soon filter toggles). */
.btn-outline-warning {
    --bs-btn-color: var(--warning-fg);
    --bs-btn-disabled-color: var(--warning-fg);
}

/* Amber as body text. Bootstrap's .text-warning utility is left alone — it carries !important
   and is also used for non-text marks (the bulk-edit legend dots), where the fill colour is the
   point. Use this wherever amber has to be READ. */
.text-warning-fg {
    color: var(--warning-fg);
}

/* Danger button states */
.btn-danger:focus,
.btn-danger:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

.btn-danger:active,
.btn-danger.active,
.btn-danger:first-child:active,
.show > .btn-danger.dropdown-toggle {
    background-color: #b02a37 !important;
    border-color: #a52834 !important;
}

.btn-danger:disabled,
.btn-danger.disabled {
    opacity: 0.65;
}

/* Outline danger button states */
.btn-outline-danger:focus,
.btn-outline-danger:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-danger:first-child:active,
.show > .btn-outline-danger.dropdown-toggle {
    background-color: #b02a37 !important;
    border-color: #b02a37 !important;
    color: white !important;
}

.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    opacity: 0.65;
}

/* Outline success button states */
.btn-outline-success:focus,
.btn-outline-success:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}

.btn-outline-success:active,
.btn-outline-success.active,
.btn-outline-success:first-child:active,
.show > .btn-outline-success.dropdown-toggle {
    background-color: #146c43 !important;
    border-color: #146c43 !important;
    color: white !important;
}

.btn-outline-success:disabled,
.btn-outline-success.disabled {
    opacity: 0.65;
}

/* Outline warning button states */
.btn-outline-warning:focus,
.btn-outline-warning:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-outline-warning:first-child:active,
.show > .btn-outline-warning.dropdown-toggle {
    background-color: #cc9a00 !important;
    border-color: #cc9a00 !important;
    color: #000 !important;
}

.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
    opacity: 0.65;
}

/* AG Grid Customization */
.ag-theme-alpine {
    --ag-header-background-color: #f8f9fa;
    --ag-header-foreground-color: #495057;
    --ag-row-hover-color: rgba(13, 148, 136, 0.08);
    --ag-selected-row-background-color: rgba(13, 148, 136, 0.12);
    --ag-odd-row-background-color: #f8f9fa;
    --ag-font-family: inherit;
    --ag-border-color: var(--border-gray);
}

.ag-theme-alpine .ag-header-cell-text {
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ag-theme-alpine .ag-cell {
    display: flex;
    align-items: center;
}

.ag-theme-alpine .ag-cell iconify-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ag-theme-alpine .ag-row .cell-dirty {
    background-color: rgba(255, 193, 7, 0.15);
}

.ag-theme-alpine .ag-row-selected .cell-dirty {
    background-color: rgba(255, 193, 7, 0.25);
}

.ag-theme-alpine .ag-row .cell-editable {
    background-color: rgba(13, 110, 253, 0.04);
    cursor: pointer;
}

.ag-theme-alpine .ag-row-selected .cell-editable {
    background-color: rgba(13, 110, 253, 0.08);
}

.ag-theme-alpine .ag-row .cell-dirty.cell-editable {
    background-color: rgba(255, 193, 7, 0.15);
}

.ag-theme-alpine .ag-row-selected .cell-dirty.cell-editable {
    background-color: rgba(255, 193, 7, 0.25);
}

.ag-theme-alpine .editable-col-header .ag-header-cell-text::after {
    content: '\f4cb'; /* Bootstrap Icons pencil: bi-pencil */
    font-family: 'bootstrap-icons';
    font-size: 0.65rem;
    opacity: 0.45;
    margin-left: 4px;
    vertical-align: middle;
}

/* Form Controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--teal-accent);
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
}

.form-check-input:checked {
    background-color: var(--teal-accent);
    border-color: var(--teal-accent);
}

/* Modals */
.modal-header {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-gray);
}

.modal-title {
    font-weight: 600;
    color: var(--primary-blue);
}

/* Address Item */
.address-item {
    background: var(--bg-light);
}

/* Product Thumbnail */
.product-thumb-placeholder {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bg-light);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Grid thumbnails hint that they enlarge on hover (see setupImageHoverPreview in products.js) */
.product-thumb {
    cursor: zoom-in;
}

/* Floating large-image preview shown while hovering a grid thumbnail. Appended to <body>, not the
   grid cell, because AG Grid cells clip overflow and virtualize their rows — a preview living inside
   the cell would be cropped to 70px. position: fixed so the JS can place it from a viewport-relative
   getBoundingClientRect(). */
.grid-image-preview {
    position: fixed;
    z-index: 1080;
    width: 300px;
    height: 300px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    pointer-events: none;
    display: none;
}

.grid-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.25rem;
}

/* Banner Thumbnail */
.banner-thumb-placeholder {
    width: 100px;
    height: 35px;
    background: var(--bg-light);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.collapsed {
        transform: translateX(0);
        width: var(--sidebar-width);
    }

    /* Show text labels in mobile sidebar */
    .sidebar.collapsed .sidebar-header .sidebar-text,
    .sidebar.collapsed .nav-item .sidebar-text {
        display: inline;
    }

    /* Invert chevron direction on mobile to match user expectations:
       When sidebar is VISIBLE (collapsed class), show left chevron (<) meaning "hide"
       When sidebar is HIDDEN (no collapsed class), show right chevron (>) meaning "show" */
    .sidebar.collapsed .sidebar-toggle i.bi-chevron-right::before {
        content: "\f284"; /* chevron-left */
    }
    .sidebar:not(.collapsed) .sidebar-toggle i.bi-chevron-left::before {
        content: "\f285"; /* chevron-right */
    }

    .main-content {
        margin-left: 0;
    }

    .sidebar.collapsed ~ .main-content {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .page-content {
        padding: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }

    .stat-content h3 {
        font-size: 1.5rem;
    }
}

/* Utilities */
.cursor-pointer {
    cursor: pointer;
}

.text-teal {
    color: var(--teal-accent);
}

.bg-teal {
    background-color: var(--teal-accent);
    color: #fff !important;
}

/* SweetAlert2 Customization */
.swal2-popup {
    font-family: inherit;
}

/* There is deliberately NO .swal2-confirm background rule here. Don't add one.

   A `background-color: var(--teal-accent) !important` used to live here and silently killed
   every `confirmButtonColor` passed to Swal.fire() — a destructive "Yes, delete it" rendered
   identical to a routine "Yes, save".

   SweetAlert 11 already does the right thing on its own. It writes `confirmButtonColor` as an
   inline custom property ON THE BUTTON ELEMENT (not the popup) —
   `--swal2-confirm-button-background-color`, plus a matching
   `--swal2-action-button-focus-box-shadow` — and its own rules read them. The app-wide teal
   default is supplied in JS instead; see the Swal.mixin() call at the top of js/admin-utils.js.

   Anything declared here also clobbers SweetAlert's :hover AND :active rules, which are
   `color-mix(in srgb, var(--swal2-confirm-button-background-color), black 10%/20%)` at LOWER
   specificity — their selectors are all :where(), so they score (0,0,1) and any bare
   `.swal2-confirm` beats them even without !important. Overriding the base colour therefore
   silently flattens both states, which is what the `filter: brightness()` hack that used to sit
   here was compensating for. It also desyncs the focus ring, which keeps tracking the real
   confirmButtonColor — so the old rule gave a teal button with (say) a red focus halo.
   Leave all of it to SweetAlert. */

/* Spinner */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* AG Grid Overlay Styles */
.ag-overlay-loading-center,
.ag-overlay-no-rows-center {
    font-size: 1rem;
    color: var(--text-muted);
    padding: 2rem;
}

.ag-overlay-loading-center i {
    animation: spin 1s linear infinite;
}

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

/* Spinning animation for refresh button */
.spinning {
    animation: spin 1s linear infinite;
}

/* Last updated label */
.last-updated {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Low Stock Alert Styles */
.stat-card.low-stock-alert {
    border-color: #dc3545;
    transition: all 0.2s ease;
}

.stat-card.low-stock-alert:hover {
    box-shadow: 0 0.5rem 1rem rgba(220, 53, 69, 0.2);
    transform: translateY(-2px);
}

.stat-card.low-stock-alert .stat-icon.bg-warning {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.btn-warning.active,
.btn-warning:not(:disabled):not(.disabled):active,
.show > .btn-warning.dropdown-toggle {
    background-color: #ffca2c !important;
    border-color: #ffc107 !important;
    color: #000 !important;
}

.btn-warning:focus,
.btn-warning:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

/* Out of Stock Alert Styles */
.stat-card.out-of-stock-alert {
    border-color: #dc3545;
    transition: all 0.2s ease;
}

.stat-card.out-of-stock-alert:hover {
    box-shadow: 0 0.5rem 1rem rgba(220, 53, 69, 0.2);
    transform: translateY(-2px);
}

.stat-card.out-of-stock-alert .stat-icon.bg-danger {
    animation: pulse 2s infinite;
}

/* Delivery Due Alert Styles — the order-side twin of the two stock alerts above.
   Same treatment on purpose: overdue reads as urgent (red, like out of stock),
   due-soon as a warning (amber, like low stock). */
.stat-card.overdue-alert,
.stat-card.due-soon-alert {
    border-color: #dc3545;
    transition: all 0.2s ease;
}

.stat-card.overdue-alert:hover,
.stat-card.due-soon-alert:hover {
    box-shadow: 0 0.5rem 1rem rgba(220, 53, 69, 0.2);
    transform: translateY(-2px);
}

.stat-card.overdue-alert .stat-icon.bg-danger,
.stat-card.due-soon-alert .stat-icon.bg-warning {
    animation: pulse 2s infinite;
}

/* Barangay Free Delivery Component Styles */
.barangay-selector {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-gray);
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.barangay-list .form-check {
    padding: 0.25rem 0 0.25rem 1.5rem;
}

.day-selector .form-check-inline {
    margin-right: 0.25rem;
}

.day-selector .badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-selector .badge:hover {
    opacity: 0.8;
}

.btn-check-label {
    cursor: pointer;
}

::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}

::-webkit-input-placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}

::-moz-placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}

/* Print Styles */
@media print {
    body {
        background: white !important;
        font-size: 12px;
    }

    .sidebar,
    .top-header,
    .page-header button,
    .card-header,
    .nav-tabs,
    .no-print {
        display: none !important;
    }

    .admin-layout {
        display: block !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }

    .page-header h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .print-content {
        display: block !important;
    }

    .report-header-print-only {
        display: block !important;
        text-align: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #000;
    }

    .report-header-print-only h2 {
        margin-bottom: 0.5rem;
    }

    .report-header-print-only p {
        margin-bottom: 0.25rem;
        color: #666;
    }

    .summary-cards .card {
        border: 1px solid #dee2e6 !important;
        break-inside: avoid;
    }

    .summary-cards .card-body {
        padding: 0.75rem !important;
    }

    .summary-cards .card h3 {
        font-size: 1.1rem;
    }

    .summary-cards .card h4 {
        font-size: 1rem;
    }

    .summary-cards .card h6 {
        font-size: 0.75rem;
    }

    .table {
        font-size: 10px;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.25rem !important;
    }

    .table-responsive {
        overflow: visible !important;
    }

    a {
        text-decoration: none !important;
        color: inherit !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
    }

    /* Force Bootstrap grid columns in print */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    [class*="col-md-"] {
        flex: 0 0 auto !important;
    }

    .col-md-3 {
        width: 25% !important;
    }

    .col-md-4 {
        width: 33.333% !important;
    }

    /* Compact filter inputs in print */
    .form-select,
    .form-control {
        padding: 0.25rem 0.5rem !important;
        font-size: 10px !important;
    }

    .form-label {
        font-size: 10px !important;
        margin-bottom: 0.125rem !important;
    }
}

.report-header-print-only {
    display: none;
}

/* Combobox Component */
.combobox-container {
    position: relative;
}

.combobox-container.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.combobox-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
}

.combobox-loading,
.combobox-no-results {
    padding: 0.75rem 1rem;
    color: #6c757d;
    font-size: 0.875rem;
}

.combobox-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Footer under a dropdown the render cap cut short. Sticky so it stays readable while the
   list scrolls — without it a long list just ends, and the row the admin wants looks absent. */
.combobox-more {
    position: sticky;
    bottom: 0;
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    color: #6c757d;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.combobox-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

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

.combobox-item:hover,
.combobox-item.active {
    background-color: #f8f9fa;
}

.combobox-item-image {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 0.5rem;
}

.combobox-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.combobox-tag {
    display: inline-flex;
    align-items: center;
    background: #e9ecef;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    max-width: 200px;
}

.combobox-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combobox-tag-remove {
    margin-left: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.6;
}

.combobox-tag-remove:hover {
    opacity: 1;
}

.combobox-item.selected {
    background-color: #cfe2ff;
}

.combobox-item-checkbox {
    margin-right: 0.5rem;
    pointer-events: none;
}

/* Reorder Modal */
.reorder-item {
    cursor: default;
    user-select: none;
    transition: background-color 0.15s;
}

.reorder-item:hover {
    background-color: #f8f9fa;
}

.reorder-item-over {
    background-color: #cfe2ff !important;
    border-color: #0d6efd !important;
}

.reorder-handle {
    cursor: grab;
    font-size: 1.1rem;
}

.reorder-handle:active {
    cursor: grabbing;
}

.reorder-badge {
    min-width: 28px;
    text-align: center;
    font-size: 0.75rem;
}

/* Staff layout (picker / driver) */
.staff-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-light);
}

.staff-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--primary-blue);
    color: #fff;
    padding: 0 1rem;
}

.staff-header .admin-dropdown {
    color: #fff !important;
}

.staff-content {
    flex: 1;
    padding: 1rem;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

.picker-dashboard,
.driver-dashboard {
    padding-bottom: 5rem;
}

/* Larger touch targets — these dashboards are phone-first */
.picker-dashboard .btn,
.driver-dashboard .btn {
    min-height: 48px;
}

/* Square icon-only buttons (refresh, back) sized for thumbs */
.picker-dashboard .btn-icon,
.driver-dashboard .btn-icon {
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
}

/* Action buttons in cards / sticky bar — bigger tap area + text */
.picker-dashboard .d-grid .btn,
.driver-dashboard .d-grid .btn,
.pick-sticky-bar .btn {
    min-height: 52px;
    font-size: 1.05rem;
    font-weight: 600;
}

.pick-item {
    user-select: none;
    transition: background 0.1s;
}

.pick-item:active {
    background: #f0f0f0;
}

/* The pointer sits on the row rather than the whole card: the card is the tap target's
   container, and only the row itself toggles the check. */
.pick-item-row {
    cursor: pointer;
}

/* Product photo on the pick list. Matching a picture beats parsing a POS mnemonic like
   "C-COKE 2LX8-REGULAR", which is what these names actually look like. */
.pick-item-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-gray);
    background: #fff;
}

.pick-item-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.pick-item-disabled:active {
    background: transparent;
}

.pick-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--border-gray);
    padding: 0.75rem 1rem;
    z-index: 100;
    max-width: 640px;
    margin: 0 auto;
}

/* Clear the fixed sticky bar. It carries a count, a button and a wrapping hint line, so
   reserve enough room that the last item is never trapped underneath it. */
.pick-list-view,
.delivery-sheet-view {
    padding-bottom: 9rem;
}

/* Camera barcode scanner (picker portal). Sits above the sidebar (1000) and the pick sticky
   bar (100), and deliberately BELOW SweetAlert's 1060 — a session-expiry modal raised while
   the camera is open has to be reachable. */
.picker-scanner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The portal's content column is capped at 640px and centred; a fixed overlay escapes that,
   so re-apply the cap to the three bands rather than letting the viewfinder span a desktop
   monitor. The black ground stays full-bleed. */
.picker-scanner-header,
.picker-scanner-region,
.picker-scanner-footer {
    width: 100%;
    max-width: 640px;
}

.picker-scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #fff;
    flex-shrink: 0;
}

/* html5-qrcode injects its <video> plus a reticle div that is `position: absolute; inset: 0`
   with the aiming window punched out as a border. That div fills THIS element, while its
   border widths are computed from the video's own height — so any spare height here stretches
   the aiming window well past the picture and the brackets end up floating in dead black.
   Hence `margin: auto 0` instead of `flex: 1`: the region hugs the video and is centred in the
   space between header and footer, whatever aspect ratio the phone's camera actually returns.

   Leave the video itself alone for the same reason — an `object-fit` override crops the picture
   away from the frame the decoder reads, and the two stop agreeing about where the barcode is. */
.picker-scanner-region {
    flex: 0 1 auto;
    min-height: 0;
    margin: auto 0;
    overflow: hidden;
    position: relative;
}

.picker-scanner-footer {
    padding: 0.75rem 1rem;
    flex-shrink: 0;
}

.picker-scanner-footer .alert {
    margin-bottom: 0.5rem;
}

/* Customer instructions on a picker/driver card.
   Deliberately NOT a Bootstrap `alert`: in these portals the alert vocabulary is reserved for
   things that need a decision (an unverified payment). Notes are information the
   staffer reads, so they get the app's own accent rule rather than an alarm colour. `alert-dark`
   and `bg-dark` used to be here — neither appears anywhere else in the admin panel. */
.staff-note {
    border-left: 3px solid var(--teal-accent);
    background: var(--bg-light);
    padding: 0.4rem 0.6rem;
    border-radius: 0 0.25rem 0.25rem 0;
    color: var(--text-dark);
}

.cod-badge {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 600;
    color: #856404;
}


/* ── Announcements editor (Quill) ───────────────────────────────────────────
   Uploaded art can be wider than the editor box; without this it bleeds past
   the editor's right edge and pushes adjacent list text beside it. */
.announcements-page .ql-editor img {
    max-width: 100%;
    height: auto;
}