:root {
    --font-sans: 'Manrope', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Sora', 'Manrope', ui-sans-serif, system-ui, sans-serif;

    /* Primary - Forest Green (#1A4D2E) */
    --color-primary-50: #f0faf4;
    --color-primary-100: #d1f0dd;
    --color-primary-200: #a3e0bb;
    --color-primary-500: #247a42;
    --color-primary-600: #1A4D2E;
    --color-primary-700: #133D23;
    --color-primary-800: #0D2B19;
    --color-primary-900: #091D11;
    --color-primary-950: #051009;

    /* Secondary - Yellow (#FDE047) */
    --color-secondary-50: #fefce8;
    --color-secondary-100: #fef9c3;
    --color-secondary-200: #fef08a;
    --color-secondary-500: #eab308;
    --color-secondary-600: #FDE047;
    --color-secondary-700: #a16207;
    --color-secondary-800: #854d0e;

    /* Tertiary - Maroon (#6A323B) */
    --color-tertiary-50: #fdf2f4;
    --color-tertiary-100: #f8d8dd;
    --color-tertiary-200: #f0b0ba;
    --color-tertiary-500: #8b3d48;
    --color-tertiary-600: #6A323B;
    --color-tertiary-700: #54272F;
    --color-tertiary-800: #3E1C23;

    /* Neutral - Gray (#757874) */
    --color-neutral-50: #f7f7f7;
    --color-neutral-100: #e5e5e4;
    --color-neutral-200: #d4d4d3;
    --color-neutral-500: #757874;
    --color-neutral-600: #5c5f5b;
    --color-neutral-700: #434543;
    --color-neutral-800: #2c2d2b;

    /* Brand Accents */
    --color-accent-orange: #FF6A00;
    --color-accent-navy: #07111F;
    --color-accent-cyan: #38BDF8;

    /* UI - Neutral tones (harmonized with green primary) */
    --ui-page-bg: #f9faf9;
    --ui-page-bg-gradient: radial-gradient(circle_at_top_left, rgba(26, 77, 46, 0.08), transparent 34%), radial-gradient(circle_at_right_15%, rgba(253, 224, 71, 0.05), transparent 28%), linear-gradient(180deg, #f9faf9 0%, #f1f3f1 100%);
    --ui-surface: #ffffff;
    --ui-surface-muted: #f7f8f7;
    --ui-surface-subtle: #f1f3f1;
    --ui-border: #e0e2e0;
    --ui-text: #1a1e1a;
    --ui-text-muted: #6b706b;
    --ui-radius-card: 2.5rem;
    --ui-radius-field: 0.875rem;
    --ui-radius-button: 0.875rem;
    --ui-shadow-soft: 0 12px 28px rgba(26, 30, 26, 0.06);
    --ui-shadow-card: 0 18px 42px rgba(26, 30, 26, 0.08);
    --ui-shadow-panel: 0 28px 70px rgba(26, 30, 26, 0.1);
    --ui-header-bg: radial-gradient(circle at 15% 20%, rgba(255, 106, 0, 0.08), transparent 24%), radial-gradient(circle at 88% 10%, rgba(26, 77, 46, 0.08), transparent 18%), linear-gradient(180deg, #ffffff 0%, #f9faf9 100%);
    --ui-card-shadow: var(--ui-shadow-soft);
    --ui-card-border: var(--ui-border);
    --ui-input-bg: #ffffff;
    --ui-skeleton-bg: #e2e8f0;
    --ui-container-max: 100%;

    /* Glassmorphism Classes */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-blur: 16px;
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px 0 rgba(7, 17, 31, 0.1);

    /* Animations & Interactions */
    --transition-premium: cubic-bezier(0.16, 1, 0.3, 1);

    /* Standardized Border Radius Hierarchy */
    --ui-radius-card: 2.5rem;
    /* 40px — large cards, hero sections */
    --ui-radius-section: 1.75rem;
    /* 28px — section cards, modals */
    --ui-radius-panel: 1.5rem;
    /* 24px — inner panels, sub-cards */
    --ui-radius-field: 0.875rem;
    /* 14px — inputs, selects, small buttons */
    --ui-radius-button: 0.875rem;
    /* 14px — standard buttons */
    --ui-radius-pill: 9999px;
    /* pills, badges, circular elements */
    --ui-radius-full: 50%;
    /* avatar, circular indicators */

    /* Standardized Button Height Hierarchy */
    --ui-btn-sm: 2.25rem;
    /* 36px / h-9 — compact, inline actions */
    --ui-btn-md: 2.75rem;
    /* 44px / h-11 — standard buttons */
    --ui-btn-lg: 3rem;
    /* 48px / h-12 — prominent actions */
    --ui-btn-xl: 3.5rem;
    /* 56px / h-14 — CTAs, primary actions */

    /* Layout Safeguards */
    --ui-min-width: 320px;
}

/* ============================================================
 * Utility Classes (CSS-variable-only, no hardcoded colors)
 * ============================================================ */

/* --- Glassmorphism --- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-header {
    background: var(--ui-header-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ui-border);
}

/* ============================================================
 * Pagination (Matching Laravel UI)
 * ============================================================ */
ul.pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.pagination .page-item {
    margin: 0;
}

ul.pagination .page-item.active .page-link {
    background-color: var(--color-primary-600) !important;
    color: #fff !important;
    border: 1px solid var(--color-primary-600) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

ul.pagination .page-link {
    height: 2.25rem;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-field) !important;
    border: 1px solid transparent;
    background-color: var(--ui-surface);
    color: var(--ui-text);
    font-weight: 600;
    font-size: 13px;
    padding: 0;
    transition: all 0.2s ease;
}

ul.pagination .page-link:hover {
    background-color: var(--ui-surface-subtle);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

ul.pagination .page-item.disabled .page-link {
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    background-color: var(--ui-surface-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

ul.pagination .page-item .page-link i {
    font-size: 14px;
}

ul.pagination .page-item:first-child .page-link,
ul.pagination .page-item:last-child .page-link {
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
}

ul.pagination .page-item:first-child .page-link:hover,
ul.pagination .page-item:last-child .page-link:hover {
    background-color: var(--ui-surface-subtle);
}

ul.pagination .page-item:first-child.disabled .page-link,
ul.pagination .page-item:last-child.disabled .page-link {
    color: var(--ui-text-muted);
    background-color: var(--ui-surface-muted);
}

ul.pagination .page-link.page-link-label {
    width: auto;
    min-width: 3.5rem;
    padding-inline: 0.875rem;
}

ul.pagination .page-link.page-link-ellipsis {
    width: auto;
    min-width: 2.25rem;
    background-color: transparent !important;
    border-color: transparent !important;
    cursor: default;
}

/* --- Glow & Lift Effects --- */
.glow-orange {
    box-shadow: 0 0 15px rgba(255, 106, 0, 0.4);
}

.btn-label-purple {
    color: #7367f0 !important;
    background-color: rgba(115, 103, 240, 0.16) !important;
    border-color: transparent !important;
}

.btn-label-purple:hover,
.btn-label-purple:focus,
.btn-label-purple:active {
    color: #fff !important;
    background-color: #7367f0 !important;
    border-color: #7367f0 !important;
}

@media (max-width: 767.98px) {
    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] form > *,
    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] .dropdown,
    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] button,
    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] a {
        width: 100% !important;
    }

    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] .dropdown > button,
    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] form button,
    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] form input,
    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] > button,
    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] > a {
        width: 100% !important;
        justify-content: center !important;
    }

    [class*="flex flex-wrap items-center gap-3"][class*="rounded-xl"][class*="bg-white"] form .flex.items-center {
        align-items: stretch !important;
    }
}

#viewStockOutwardModel .stock-outward-items-card,
#outwardStocksEditModal .stock-outward-items-card {
    margin: 0.75rem 0 1.25rem;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

#viewStockOutwardModel .stock-outward-items-title,
#outwardStocksEditModal .stock-outward-items-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

#viewStockOutwardModel .stock-outward-items-title span,
#outwardStocksEditModal .stock-outward-items-title span {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 800;
}

#viewStockOutwardModel .stock-outward-items-title small,
#outwardStocksEditModal .stock-outward-items-title small {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

#viewStockOutwardModel .stock-outward-items-scroll,
#outwardStocksEditModal .stock-outward-items-scroll {
    width: 100%;
    overflow-x: auto;
}

#viewStockOutwardModel .stock-outward-items-table,
#outwardStocksEditModal .stock-outward-items-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#viewStockOutwardModel .stock-outward-items-table th,
#outwardStocksEditModal .stock-outward-items-table th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

#viewStockOutwardModel .stock-outward-items-table td,
#outwardStocksEditModal .stock-outward-items-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: normal;
}

#viewStockOutwardModel .stock-outward-items-table tbody tr:last-child td,
#outwardStocksEditModal .stock-outward-items-table tbody tr:last-child td {
    border-bottom: 0;
}

#viewStockOutwardModel .stock-outward-items-table tbody tr:hover td,
#outwardStocksEditModal .stock-outward-items-table tbody tr:hover td {
    background: #f8fafc;
}

#viewStockOutwardModel .stock-outward-product,
#outwardStocksEditModal .stock-outward-product {
    color: #1e293b !important;
    font-weight: 800 !important;
}

#viewStockOutwardModel .stock-outward-qty,
#outwardStocksEditModal .stock-outward-qty {
    color: #334155 !important;
    white-space: nowrap !important;
}

#viewStockOutwardModel .stock-outward-qty span,
#outwardStocksEditModal .stock-outward-qty span {
    color: #64748b;
    font-weight: 700;
}

#viewStockOutwardModel .stock-outward-chip,
#outwardStocksEditModal .stock-outward-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    padding: 0.25rem 0.6rem;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    #viewStockOutwardModel .stock-outward-items-table,
    #outwardStocksEditModal .stock-outward-items-table {
        min-width: 680px;
    }

    #viewStockOutwardModel .stock-outward-items-title,
    #outwardStocksEditModal .stock-outward-items-title {
        padding-inline: 0.85rem;
    }
}

#viewOrderReceivedModel .stock-order-items-card,
#editOrderReceivedModal .stock-order-items-card {
    margin: 0.5rem 0 1rem;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

#editOrderReceivedModal .stock-order-edit-entry {
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    background: #f8fafc;
    padding: 0.85rem;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

#viewOrderReceivedModel .stock-order-items-title,
#editOrderReceivedModal .stock-order-items-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

#viewOrderReceivedModel .stock-order-items-title span,
#editOrderReceivedModal .stock-order-items-title span {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 800;
}

#viewOrderReceivedModel .stock-order-items-title small,
#editOrderReceivedModal .stock-order-items-title small {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

#viewOrderReceivedModel .stock-order-items-scroll,
#editOrderReceivedModal .stock-order-items-scroll {
    width: 100%;
    overflow-x: auto;
}

#viewOrderReceivedModel .stock-order-items-table,
#editOrderReceivedModal .stock-order-items-table {
    width: 100%;
    min-width: 560px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#editOrderReceivedModal .stock-order-items-card-compact .stock-order-items-table {
    min-width: 700px;
}

#viewOrderReceivedModel .stock-order-items-table th,
#editOrderReceivedModal .stock-order-items-table th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

#viewOrderReceivedModel .stock-order-items-table td,
#editOrderReceivedModal .stock-order-items-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: normal;
}

#viewOrderReceivedModel .stock-order-items-table tbody tr:last-child td,
#editOrderReceivedModal .stock-order-items-table tbody tr:last-child td {
    border-bottom: 0;
}

#viewOrderReceivedModel .stock-order-items-table tbody tr:hover td,
#editOrderReceivedModal .stock-order-items-table tbody tr:hover td {
    background: #f8fafc;
}

#viewOrderReceivedModel .stock-order-product,
#editOrderReceivedModal .stock-order-product {
    color: #1e293b !important;
    font-weight: 800 !important;
}

#viewOrderReceivedModel .stock-order-qty,
#editOrderReceivedModal .stock-order-qty {
    color: #334155 !important;
    white-space: nowrap !important;
}

#viewOrderReceivedModel .stock-order-qty span,
#editOrderReceivedModal .stock-order-qty span {
    color: #64748b;
    font-weight: 700;
}

#viewOrderReceivedModel .stock-order-status-chip,
#editOrderReceivedModal .stock-order-status-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    background: #fff7ed;
    padding: 0.25rem 0.65rem;
    color: #c2410c;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    #viewOrderReceivedModel .stock-order-items-table {
        min-width: 520px;
    }

    #editOrderReceivedModal .stock-order-items-card-compact .stock-order-items-table {
        min-width: 650px;
    }

    #viewOrderReceivedModel .stock-order-items-title,
    #editOrderReceivedModal .stock-order-items-title {
        padding-inline: 0.85rem;
    }
}

#editProformaInvoiceModel .modal-body,
#addProformaInvoiceModal .modal-body {
    background: #f8fafc;
}

#editProformaInvoiceModel .modal-body > .row,
#addProformaInvoiceModal .modal-body > .row {
    row-gap: 0.85rem;
    margin-bottom: 0.8rem;
}

#editProformaInvoiceModel .input-theme,
#addProformaInvoiceModal .input-theme {
    min-height: 2.85rem;
    border-color: #dbe2ea;
    background-color: #fff;
}

#editProformaInvoiceModel textarea.input-theme,
#addProformaInvoiceModal textarea.input-theme {
    min-height: 3.1rem;
    line-height: 1.45;
    resize: vertical;
}

#editProformaInvoiceModel .pi-product-section,
#addProformaInvoiceModal .pi-product-section {
    margin: 1rem 0 1.25rem;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

#editProformaInvoiceModel .pi-section-title,
#addProformaInvoiceModal .pi-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

#editProformaInvoiceModel .pi-section-title span,
#addProformaInvoiceModal .pi-section-title span {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 850;
}

#editProformaInvoiceModel .pi-section-title small,
#addProformaInvoiceModal .pi-section-title small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

#editProformaInvoiceModel .pi-products-list,
#addProformaInvoiceModal .pi-products-list {
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem;
}

#addProformaInvoiceModal #productsList {
    display: grid;
    gap: 0.85rem;
}

#editProformaInvoiceModel .pi-product-row,
#addProformaInvoiceModal .pi-product-row {
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    background: #f8fafc !important;
    padding: 0.85rem !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05) !important;
}

#editProformaInvoiceModel .pi-product-row:not(.grid) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

#editProformaInvoiceModel .pi-product-row:not(.grid) > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

#editProformaInvoiceModel .pi-product-row:not(.grid) > .col-md-1,
#editProformaInvoiceModel .pi-product-row:not(.grid) > .text-end {
    display: flex;
    align-items: end;
    justify-content: center;
}

#editProformaInvoiceModel .pi-product-row.row {
    align-items: end;
    --bs-gutter-x: 0.65rem;
    --bs-gutter-y: 0.65rem;
}

#editProformaInvoiceModel .pi-product-row .input-theme,
#addProformaInvoiceModal .pi-product-row .input-theme {
    min-height: 2.55rem;
    font-size: 0.86rem;
}

#editProformaInvoiceModel .pi-product-row [name="productName[]"],
#addProformaInvoiceModal .pi-product-row [name="productName[]"] {
    color: #1e293b;
    font-weight: 750;
}

#editProformaInvoiceModel .pi-product-row [name="totalPrice[]"],
#addProformaInvoiceModal .pi-product-row [name="totalPrice[]"],
#editProformaInvoiceModel .pi-product-row .prodPriceEdit,
#addProformaInvoiceModal .pi-product-row .prodPriceEdit {
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-weight: 850 !important;
}

#editProformaInvoiceModel .pi-total-summary,
#addProformaInvoiceModal .pi-total-summary {
    margin: 1rem 0 !important;
    border: 1px solid #d1fae5;
    border-radius: 1rem;
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
    padding: 0.85rem;
    box-shadow: 0 12px 26px rgba(4, 120, 87, 0.08);
}

#editProformaInvoiceModel .pi-total-summary label,
#addProformaInvoiceModal .pi-total-summary label {
    color: #047857 !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

#editProformaInvoiceModel .pi-total-summary .input-theme,
#addProformaInvoiceModal .pi-total-summary .input-theme {
    border-color: #bbf7d0;
    color: #065f46;
    font-weight: 850;
}

@media (max-width: 767.98px) {
    #editProformaInvoiceModel .modal-body,
    #addProformaInvoiceModal .modal-body {
        padding: 1rem !important;
    }

    #editProformaInvoiceModel .pi-section-title,
    #addProformaInvoiceModal .pi-section-title {
        align-items: flex-start;
        flex-direction: column;
    }

    #editProformaInvoiceModel .pi-product-row:not(.grid) {
        grid-template-columns: 1fr;
    }
}

.pi-table-products {
    display: flex;
    max-width: 24rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pi-table-product-chip,
.pi-table-product-more {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.pi-table-product-chip {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
}

.pi-table-product-more {
    border: 1px solid #d1fae5;
    background: #ecfdf5;
    color: #047857;
}

.hover-lift {
    transition: transform 0.3s var(--transition-premium), box-shadow 0.3s var(--transition-premium);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--ui-shadow-card);
}

/* --- Typography --- */
.font-display {
    font-family: var(--font-display);
}

.font-sans-theme {
    font-family: var(--font-sans);
}

/* ============================================================
 * Standardized Reusable Button & Component Classes
 * ALL colors reference :root CSS variables — zero hardcoded hex.
 * ============================================================ */

/* Primary Button (green) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ui-btn-md);
    padding: 0 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--ui-radius-button);
    background-color: var(--color-primary-700) !important;
    border: 1px solid var(--color-primary-500) !important;
    color: #fff !important;
    box-shadow: var(--ui-shadow-soft);
    transition: all 0.2s var(--transition-premium);
    cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
    color: #fff !important;
    box-shadow: var(--ui-shadow-card);
}

/* Secondary / Outline Button (white + border) */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ui-btn-md);
    padding: 0 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--ui-radius-button);
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-soft);
    transition: all 0.2s var(--transition-premium);
    cursor: pointer;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-text) !important;
}

/* Danger Soft Button (maroon tint — for Close/Cancel) */
.btn-danger-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ui-btn-md);
    padding: 0 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--ui-radius-button);
    background-color: var(--color-tertiary-50) !important;
    border: 1px solid var(--color-tertiary-100) !important;
    color: var(--color-tertiary-600) !important;
    transition: all 0.2s var(--transition-premium);
    cursor: pointer;
}

.btn-danger-soft:hover,
.btn-danger-soft:focus {
    background-color: var(--color-tertiary-100) !important;
    color: var(--color-tertiary-700) !important;
}

/* Action Icon Buttons — View (uses primary palette) */
.btn-action-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-btn-sm);
    height: var(--ui-btn-sm);
    border-radius: var(--ui-radius-button);
    background-color: var(--color-primary-50) !important;
    color: var(--color-primary-500) !important;
    border: none !important;
    transition: all 0.2s var(--transition-premium);
    cursor: pointer;
}

.btn-action-view:hover {
    background-color: var(--color-primary-100) !important;
    color: var(--color-primary-600) !important;
}

/* Action Icon Buttons — Edit (uses secondary/yellow palette) */
.btn-action-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-btn-sm);
    height: var(--ui-btn-sm);
    border-radius: var(--ui-radius-button);
    background-color: var(--color-secondary-50) !important;
    color: var(--color-secondary-500) !important;
    border: none !important;
    transition: all 0.2s var(--transition-premium);
    cursor: pointer;
}

.btn-action-edit:hover {
    background-color: var(--color-secondary-100) !important;
    color: var(--color-secondary-700) !important;
}

/* Action Icon Buttons — Delete (uses tertiary/maroon palette) */
.btn-action-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-btn-sm);
    height: var(--ui-btn-sm);
    border-radius: var(--ui-radius-button);
    background-color: var(--color-tertiary-50) !important;
    color: var(--color-tertiary-500) !important;
    border: none !important;
    transition: all 0.2s var(--transition-premium);
    cursor: pointer;
}

.btn-action-delete:hover {
    background-color: var(--color-tertiary-100) !important;
    color: var(--color-tertiary-600) !important;
}

/* Modal Cross / Close Icon Button */
.btn-close-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-pill);
    background: transparent !important;
    border: none !important;
    color: var(--ui-text-muted) !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-close-custom:hover {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-text) !important;
}

/* Card / Panel Shadows */
.shadow-soft {
    box-shadow: var(--ui-shadow-soft);
}

.shadow-card {
    box-shadow: var(--ui-shadow-card);
}

.shadow-panel {
    box-shadow: var(--ui-shadow-panel);
}

/* Form Input Consistent Styling */
.input-theme {
    background-color: var(--ui-input-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-field);
    color: var(--ui-text);
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}



.input-theme:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.input-theme::placeholder {
    color: var(--ui-text-muted);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary-600);
}

/* Shared modal action row: shifts footer buttons slightly upward. */
.modal-action-footer {
    padding-top: 0.5rem !important;
    padding-bottom: 1rem !important;
}

/* Match Dashboard button color */
.bg-emerald-700,
.btn-success,
.bg-indigo-600 {
    background-color: var(--color-primary-600) !important;
}

.hover\:bg-emerald-800:hover {
    background-color: var(--color-primary-700) !important;
}

select.input-theme {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b706b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem 1rem;
    padding-right: 2.5rem;
}

/* Common Biogenix calendar / datepicker */
.biogenix-datepicker-input,
.flatpickr-input.biogenix-datepicker-input,
.flatpickr-input.biogenix-datepicker-input[readonly],
.flatpickr-input.input-theme[readonly] {
    cursor: pointer;
    background-color: var(--ui-input-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b706b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.875rem center !important;
    background-size: 1.125rem 1.125rem !important;
    color: var(--ui-text) !important;
    padding-right: 2.75rem !important;
}

.biogenix-datepicker-input::placeholder {
    color: var(--ui-text-muted);
    opacity: 0.85;
}

.flatpickr-calendar.biogenix-datepicker {
    z-index: 2000 !important;
    width: 19.25rem;
    padding: 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-section);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-panel);
    font-family: var(--font-sans);
    color: var(--ui-text);
}

.flatpickr-calendar.biogenix-datepicker::before,
.flatpickr-calendar.biogenix-datepicker::after {
    display: none;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-months {
    align-items: center;
    padding: 0.125rem 0.125rem 0.5rem;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-month {
    height: 2.5rem;
    color: var(--ui-text);
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-current-month {
    top: 0.25rem;
    height: 2rem;
    padding-top: 0;
    color: var(--ui-text);
    font-size: 0.95rem;
    font-weight: 800;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar.biogenix-datepicker .flatpickr-current-month input.cur-year {
    border-radius: calc(var(--ui-radius-field) - 4px);
    color: var(--ui-text);
    font-weight: 800;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar.biogenix-datepicker .numInputWrapper:hover {
    background: var(--ui-surface-subtle);
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-prev-month,
.flatpickr-calendar.biogenix-datepicker .flatpickr-next-month {
    top: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--ui-radius-field);
    color: var(--ui-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-prev-month:hover,
.flatpickr-calendar.biogenix-datepicker .flatpickr-next-month:hover {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-weekdays {
    height: 2rem;
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
}

.flatpickr-calendar.biogenix-datepicker span.flatpickr-weekday {
    color: var(--ui-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-days,
.flatpickr-calendar.biogenix-datepicker .dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.flatpickr-calendar.biogenix-datepicker .dayContainer {
    padding-top: 0.5rem;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-day {
    flex-basis: calc(14.2857143% - 0.1rem);
    max-width: calc(14.2857143% - 0.1rem);
    height: 2.25rem;
    line-height: 2.25rem;
    margin: 0.05rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-field);
    color: var(--ui-text);
    font-size: 0.82rem;
    font-weight: 700;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-day:hover,
.flatpickr-calendar.biogenix-datepicker .flatpickr-day:focus {
    border-color: var(--color-primary-100) !important;
    background: var(--color-primary-50) !important;
    color: var(--color-primary-700) !important;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-day.today:not(.selected) {
    border-color: var(--color-secondary-200) !important;
    background: var(--color-secondary-50) !important;
    color: var(--color-secondary-700) !important;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-day.selected,
.flatpickr-calendar.biogenix-datepicker .flatpickr-day.startRange,
.flatpickr-calendar.biogenix-datepicker .flatpickr-day.endRange,
.flatpickr-calendar.biogenix-datepicker .flatpickr-day.selected:hover,
.flatpickr-calendar.biogenix-datepicker .flatpickr-day.startRange:hover,
.flatpickr-calendar.biogenix-datepicker .flatpickr-day.endRange:hover {
    border-color: var(--color-primary-600) !important;
    background: var(--color-primary-600) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(26, 77, 46, 0.22);
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-day.inRange {
    border-color: var(--color-primary-50) !important;
    background: var(--color-primary-50) !important;
    color: var(--color-primary-700) !important;
    box-shadow: none;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-day.prevMonthDay,
.flatpickr-calendar.biogenix-datepicker .flatpickr-day.nextMonthDay,
.flatpickr-calendar.biogenix-datepicker .flatpickr-day.flatpickr-disabled {
    color: var(--ui-text-muted);
    opacity: 0.45;
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-time {
    margin-top: 0.5rem;
    border-top: 1px solid var(--ui-border);
}

.flatpickr-calendar.biogenix-datepicker .flatpickr-time input,
.flatpickr-calendar.biogenix-datepicker .flatpickr-time .flatpickr-am-pm {
    color: var(--ui-text);
    font-weight: 700;
}

.flatpickr-calendar.biogenix-datepicker .biogenix-datepicker-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--ui-border);
}

.flatpickr-calendar.biogenix-datepicker .biogenix-datepicker-action {
    min-width: 4.75rem;
    height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-field);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.flatpickr-calendar.biogenix-datepicker .biogenix-datepicker-reset:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-subtle);
}

.flatpickr-calendar.biogenix-datepicker .biogenix-datepicker-today {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
    color: #fff;
}

.flatpickr-calendar.biogenix-datepicker .biogenix-datepicker-today:hover {
    border-color: var(--color-primary-700);
    background: var(--color-primary-700);
}

.flatpickr-calendar.biogenix-datepicker .biogenix-datepicker-action:focus-visible {
    outline: 2px solid var(--color-primary-200);
    outline-offset: 2px;
}

/* Status Badges */
.badge-available {
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
    border: 1px solid var(--color-primary-100);
    padding: 0.2rem 0.75rem;
    border-radius: var(--ui-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-deleted {
    background-color: var(--color-tertiary-50);
    color: var(--color-tertiary-600);
    border: 1px solid var(--color-tertiary-100);
    padding: 0.2rem 0.75rem;
    border-radius: var(--ui-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-warning {
    background-color: var(--color-secondary-50);
    color: var(--color-secondary-700);
    border: 1px solid var(--color-secondary-200);
    padding: 0.2rem 0.75rem;
    border-radius: var(--ui-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
 * Dropdown / Select Overrides
 * ============================================================ */

/* Override native select blue highlight (works on some browsers) */
select.input-theme option:checked,
select.input-theme option:focus,
select.input-theme option:hover {
    background-color: var(--color-primary-50) !important;
    background: linear-gradient(0deg, var(--color-primary-50) 0%, var(--color-primary-50) 100%) !important;
    box-shadow: inset 0 0 0 1000px var(--color-primary-50) !important;
    color: var(--ui-text) !important;
}

/* Select2 Complete UI Override to match .input-theme */
.select2-container {
    width: 100% !important;
    outline: none !important;
}

.select2-container .select2-selection--single {
    height: auto !important;
    min-height: 2.75rem;
    background-color: var(--ui-input-bg) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-field) !important;
    padding: 0.625rem 0.875rem !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
    color: var(--ui-text) !important;
    font-size: 0.875rem !important;
    width: 100% !important;
    text-align: left !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25rem !important;
    pointer-events: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: block !important;
    width: 0.5rem !important;
    height: 0.5rem !important;
    border: none !important;
    border-right: 2px solid var(--ui-text-muted, #6b706b) !important;
    border-bottom: 2px solid var(--ui-text-muted, #6b706b) !important;
    transform: translateY(1px) rotate(45deg) !important;
    background: none !important;
    background-image: none !important;
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: translateY(3px) rotate(-135deg) !important;
}

.select2-container--open .select2-selection--single {
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 3px var(--color-primary-50) !important;
    outline: none !important;
}

.select2-dropdown {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-field) !important;
    box-shadow: var(--ui-shadow-panel) !important;
    background-color: var(--ui-surface) !important;
    padding: 0.25rem !important;
    z-index: 99999 !important;
    margin-top: 4px !important;
}

.select2-container--default .select2-results__option {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
    color: var(--ui-text) !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--ui-border) !important;
    border-radius: calc(var(--ui-radius-field) - 4px) !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
}

/* Select2 Global Highlight Fix */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option:hover {
    background-color: var(--color-primary-50) !important;
    color: var(--color-primary-700) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--color-primary-600) !important;
    color: #ffffff !important;
}

/* ============================================================
 * BIOGENIX-STYLE ADMIN SIDEBAR & NAVBAR OVERRIDES
 * Transforms the Vuexy template into Biogenix admin design
 * ============================================================ */

/* --- Global font override for admin --- */
body,
.layout-wrapper {
    font-family: var(--font-sans) !important;
}

/* ============================================================
 * SIDEBAR — Biogenix Floating Card Style
 * ============================================================ */

/* --- Sidebar Container: Floating card look --- */
#layout-menu.layout-menu {
    background: transparent !important;
    border-right: none !important;
    box-shadow: none !important;
    /* Mobile specific adjustments for floating card */
    padding: 1rem 0 1rem 1rem !important;
    overflow: visible !important;
    z-index: 1050 !important;
    top: 64px !important;
    height: calc(100vh - 64px) !important;
}

/* Hide the dark overlay completely so sidebar behaves like a normal dropdown on mobile */
.layout-overlay {
    display: none !important;
}

/* The inner scrollable area styled as a card */
#layout-menu .menu-inner {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--ui-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)) !important;
    padding: 1rem !important;
    padding-bottom: 1.5rem !important;
}

@media (min-width: 1200px) {
    #layout-menu.layout-menu {
        /* Position below the new full-width fixed navbar */
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        height: calc(100vh - 64px) !important;
        width: 260px !important;
        z-index: 1020 !important;
    }

    /* Force sidebar to ALWAYS be expanded on desktop (never collapse to icons) */
    .layout-menu-expanded #layout-menu,
    html:not([data-layout-menu-collapsed]) #layout-menu {
        width: 260px !important;
    }
}

/* Override Vuexy collapsed sidebar behavior on desktop */
@media (min-width: 1200px) {

    .layout-menu-collapsed #layout-menu.layout-menu,
    .layout-menu-collapsed .layout-menu {
        width: 260px !important;
    }

    .layout-menu-collapsed #layout-menu.layout-menu .menu-inner>.menu-item>.menu-link {
        width: auto !important;
    }

    .layout-menu-collapsed #layout-menu .menu-inner>.menu-item .menu-link>div,
    .layout-menu-collapsed #layout-menu .menu-inner>.menu-item .menu-link>span,
    .layout-menu-collapsed #layout-menu .menu-inner>.menu-item>.menu-link>div[data-i18n] {
        display: block !important;
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
    }

    .layout-menu-collapsed #layout-menu .app-brand-text,
    .layout-menu-collapsed #layout-menu .biogenix-admin-label {
        display: block !important;
        opacity: 1 !important;
    }


    .layout-menu-collapsed .layout-page {
        padding-left: 0 !important;
    }

    /* Hide the collapse toggle on desktop */
    #layout-menu .layout-menu-toggle {
        display: none !important;
    }
}

/* Remove Vuexy inner shadow */
#layout-menu .menu-inner-shadow {
    display: none !important;
}

/* --- Hide old App Brand (logo moved to navbar) --- */
#layout-menu .app-brand {
    display: none !important;
}

/* --- ADMIN PORTAL label wrapper (inside the card) --- */
#layout-menu .biogenix-admin-label-wrapper {
    list-style: none !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
}

/* Biogenix: h3 px-3 text-xs font-bold uppercase tracking-widest text-slate-400 mb-4 mt-2 */
#layout-menu .biogenix-admin-label {
    display: block;
    padding: 0.5rem 0.75rem 0.25rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}

/* Override Vuexy menu-item spacing — match Biogenix space-y-1.5 (6px) */
#layout-menu .menu-inner>.menu-item {
    margin: 6px 0 !important;
}

/* --- Menu Links: Match Biogenix exactly --- */
/* Biogenix: flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-[13px] */
#layout-menu .menu-link {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ui-text-muted) !important;
    padding: 0.75rem 0.75rem !important;
    border-radius: 0.75rem !important;
    transition: all 0.15s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}



#layout-menu .menu-link:hover,
#layout-menu .menu-item.open>.menu-link {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-text) !important;
}

/* --- Active Menu Item: Biogenix green bg + white text + indicator bar --- */
.light-style #layout-menu .menu-item.active>.menu-link,
.dark-style #layout-menu .menu-item.active>.menu-link,
#layout-menu .menu-item.active>.menu-link,
/* Override Vuexy vendor theme-default.css gradient for non-toggle active items */
.bg-menu-theme.menu-vertical .menu-item.active>.menu-link:not(.menu-toggle),
.bg-menu-theme .menu-inner .menu-item.active>.menu-link.menu-toggle,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.active>.menu-link.menu-toggle {
    background-color: var(--color-primary-600) !important;
    background-image: none !important;
    background: var(--color-primary-600) !important;
    /* Override Vuexy default purple/green gradient */
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    margin: 0 !important;
    /* Override Vuexy negative margin */
    width: 84% !important;
}

/* White indicator bar on left for active (Biogenix: w-1 h-6 bg-white rounded-r-md) */
.light-style #layout-menu .menu-item.active>.menu-link::before,
#layout-menu .menu-item.active>.menu-link::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 1.5rem !important;
    background: #ffffff !important;
    border-radius: 0 6px 6px 0 !important;
    z-index: 1 !important;
}

/* Active item icon color (Biogenix: text-indigo-200) */
.light-style #layout-menu .menu-item.active>.menu-link .menu-icon,
#layout-menu .menu-item.active>.menu-link .menu-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Menu Icons: Match Biogenix h-5 w-5 text-slate-400 --- */
#layout-menu .menu-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 18px !important;
    color: #94a3b8 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease !important;
}

#layout-menu .menu-link:hover .menu-icon,
#layout-menu .menu-item.open>.menu-link .menu-icon {
    color: var(--ui-text) !important;
}

/* --- Menu item text --- */
#layout-menu .menu-link>div[data-i18n] {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    flex: 1 !important;
}

.light-style #layout-menu .menu-item.active>.menu-link>div[data-i18n],
#layout-menu .menu-item.active>.menu-link>div[data-i18n] {
    font-weight: 700 !important;
}

/* --- Sub-menu (children) --- */
/* HIDDEN by default with smooth transition */
#layout-menu .menu-sub {
    overflow: hidden !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
}

/* Show sub-menu ONLY when parent has .open class (toggled by click) */
#layout-menu .menu-item.open>.menu-sub {
    max-height: 1000px !important;
    padding: 0.125rem 0 0.125rem 0 !important;
}

/* Hide Vuexy's built-in bullet dots and ::before circles (we use our own ti-point icons) */
#layout-menu .menu-bullet,
#layout-menu .menu-sub .menu-bullet {
    display: none !important;
}

/* Hide Vuexy's ::before pseudo-element dots on sub-menu links */
.bg-menu-theme .menu-sub>.menu-item>.menu-link:before,
.bg-menu-theme .menu-sub>.menu-item>.menu-link::before,
.bg-menu-theme.menu-vertical .menu-sub>.menu-item>.menu-link:before,
.bg-menu-theme.menu-vertical .menu-sub>.menu-item>.menu-link::before,
#layout-menu .menu-sub>.menu-item>.menu-link::before,
#layout-menu .menu-sub .menu-link::before,
.bg-menu-theme .menu-inner .menu-sub .menu-item:not(.active)>.menu-link::before {
    display: none !important;
    content: none !important;
}

/* Also hide the vertical line ::before on .menu-sub itself */
#layout-menu .menu-sub::before,
.bg-menu-theme .menu-inner>.menu-item.open>.menu-sub::before {
    display: none !important;
    content: none !important;
}

#layout-menu .menu-sub .menu-link {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 0.5rem 0.75rem 0.5rem 1.75rem !important;
    color: var(--ui-text-muted) !important;
    border-radius: 0.625rem !important;
}

/* Ensure sub-menu icons are ALWAYS visible (not just on hover) */
#layout-menu .menu-sub .menu-link .menu-icon,
#layout-menu .menu-sub .menu-item .menu-link .menu-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 14px !important;
    color: #94a3b8 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

#layout-menu .menu-sub .menu-link:hover {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-text) !important;
}

.light-style #layout-menu .menu-sub .menu-item.active>.menu-link,
.dark-style #layout-menu .menu-sub .menu-item.active>.menu-link,
#layout-menu .menu-sub .menu-item.active>.menu-link {
    background-color: var(--color-primary-600) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.light-style #layout-menu .menu-sub .menu-item.active>.menu-link::before,
.dark-style #layout-menu .menu-sub .menu-item.active>.menu-link::before,
#layout-menu .menu-sub .menu-item.active>.menu-link::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #ffffff !important;
    width: 4px !important;
    height: 1.5rem !important;
    border-radius: 0 6px 6px 0 !important;
    z-index: 1 !important;
}

/* Sub-menu active icon color */
.light-style #layout-menu .menu-sub .menu-item.active>.menu-link .menu-icon,
.dark-style #layout-menu .menu-sub .menu-item.active>.menu-link .menu-icon,
#layout-menu .menu-sub .menu-item.active>.menu-link .menu-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Hide native Vuexy caret */
#layout-menu .menu-toggle::after {
    display: none !important;
}

/* Custom Biogenix Caret inside template */
#layout-menu .menu-caret {
    font-size: 1.1rem !important;
    color: #94a3b8 !important;
    width: auto !important;
    height: auto !important;
    position: absolute !important;
    right: 3rem !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#layout-menu .menu-item.open>.menu-link .menu-caret {
    transform: translateY(-50%) rotate(90deg) !important;
}

#layout-menu .menu-link:hover .menu-caret,
#layout-menu .menu-item.open>.menu-link .menu-caret {
    color: var(--ui-text) !important;
}

#layout-menu .menu-item.active>.menu-link .menu-caret {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Menu section headers --- */
#layout-menu .menu-header {
    padding: 1rem 0.75rem 0.5rem 0.75rem !important;
    margin: 0 !important;
}

#layout-menu .menu-header .menu-header-text {
    font-family: var(--font-sans) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #94a3b8 !important;
}

/* --- Sidebar Scrollbar --- */
#layout-menu::-webkit-scrollbar {
    width: 4px;
}

#layout-menu::-webkit-scrollbar-track {
    background: transparent;
}

#layout-menu::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 4px;
}

#layout-menu::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-500);
}

/* --- Badges in menu items (Biogenix: text-[9px] font-black rounded-md) --- */
#layout-menu .badge {
    font-size: 9px !important;
    font-weight: 800 !important;
    border-radius: 0.375rem !important;
    padding: 0.15rem 0.4rem !important;
    background-color: var(--color-primary-50) !important;
    color: var(--color-primary-600) !important;
    line-height: 1.2 !important;
}

#layout-menu .menu-item.active>.menu-link .badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* --- Logout item: separated at bottom with border --- */
#layout-menu .menu-inner>.menu-item:last-child {
    margin-top: 1rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid var(--ui-border) !important;
}


/* Force sidebar to ALWAYS be expanded on desktop (never collapse to icons) */
.layout-menu-expanded #layout-menu,
html:not([data-layout-menu-collapsed]) #layout-menu {
    width: 260px !important;
}

/* Override Vuexy collapsed sidebar behavior on desktop */
@media (min-width: 1200px) {

    .layout-menu-collapsed #layout-menu.layout-menu,
    .layout-menu-collapsed .layout-menu {
        width: 260px !important;
    }

    /* Disable Vuexy's default hover shift margins since we force the sidebar width */
    .layout-menu-hover.layout-menu-collapsed .layout-menu,
    .layout-menu-hover.layout-menu-collapsed #layout-menu.layout-menu {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .layout-menu-collapsed #layout-menu.layout-menu .menu-inner>.menu-item,
    .layout-menu-collapsed #layout-menu.layout-menu .menu-inner>.menu-item>.menu-link {
        width: 100% !important;
    }

    .layout-menu-collapsed #layout-menu .menu-inner>.menu-item .menu-link>div,
    .layout-menu-collapsed #layout-menu .menu-inner>.menu-item .menu-link>span,
    .layout-menu-collapsed #layout-menu .menu-inner>.menu-item>.menu-link>div[data-i18n] {
        display: block !important;
        opacity: 1 !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .layout-menu-collapsed #layout-menu .app-brand-text,
    .layout-menu-collapsed #layout-menu .biogenix-admin-label {
        display: block !important;
        opacity: 1 !important;
    }


    .layout-menu-collapsed .layout-page {
        padding-left: 0 !important;
    }

    /* Hide the collapse toggle on desktop */
    #layout-menu .layout-menu-toggle {
        display: none !important;
    }
}

/* Remove Vuexy inner shadow */
#layout-menu .menu-inner-shadow {
    display: none !important;
}

/* --- App Brand / Logo Area --- */
#layout-menu .app-brand {
    padding: 1.25rem 1rem 0.5rem 1rem !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
}

#layout-menu .app-brand-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
}

#layout-menu .app-brand-logo.demo {
    height: 40px !important;
    margin: 0 !important;
}

#layout-menu .app-brand-logo.demo img {
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
}

#layout-menu .app-brand-text {
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--ui-text) !important;
    letter-spacing: -0.02em !important;
}

#layout-menu .app-brand-text .text-danger {
    color: var(--color-primary-600) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    vertical-align: bottom !important;
}

/* --- ADMIN PORTAL label --- */
#layout-menu .biogenix-admin-label {
    display: block;
    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8;
}

/* --- Menu Items List --- */
/* #layout-menu .menu-inner {
    padding: 0 0.75rem 1rem 0.75rem !important;
} */

/* Override Vuexy menu-item padding */
#layout-menu .menu-inner>.menu-item {
    margin: 1px 0 !important;
}

/* --- Menu Links (all levels) --- */
#layout-menu .menu-link {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ui-text-muted) !important;
    padding: 0.625rem 0.75rem !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

#layout-menu .menu-link:hover {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-text) !important;
}

/* --- Active Menu Item --- */
#layout-menu .menu-item.active>.menu-link {
    background-color: var(--color-primary-600) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(26, 77, 46, 0.2) !important;
}

/* White indicator bar on left for active */
#layout-menu .menu-item.active>.menu-link::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 1.5rem !important;
    background: #ffffff !important;
    border-radius: 0 6px 6px 0 !important;
    z-index: 1 !important;
}

/* Active item icon color */
#layout-menu .menu-item.active>.menu-link .menu-icon {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* --- Menu Icons --- */
#layout-menu .menu-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 18px !important;
    color: #94a3b8 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s ease !important;
}

#layout-menu .menu-link:hover .menu-icon {
    color: var(--ui-text) !important;
}

/* --- Menu item text (data-i18n divs) --- */
#layout-menu .menu-link>div[data-i18n] {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    flex: 1 !important;
}

#layout-menu .menu-item.active>.menu-link>div[data-i18n] {
    font-weight: 700 !important;
}




/* --- Menu section headers (if any) --- */
#layout-menu .menu-header {
    padding: 1.25rem 0.75rem 0.5rem 0.75rem !important;
    margin: 0 !important;
}

#layout-menu .menu-header .menu-header-text {
    font-family: var(--font-sans) !important;
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #94a3b8 !important;
}

/* --- Sidebar Scrollbar --- */
#layout-menu::-webkit-scrollbar {
    width: 6px;
}

#layout-menu::-webkit-scrollbar-track {
    background: transparent;
}

#layout-menu::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 3px;
}

#layout-menu::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-500);
}

/* --- Badges in menu items --- */
#layout-menu .badge {
    font-size: 9px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    padding: 0.15rem 0.4rem !important;
    background-color: var(--color-primary-50) !important;
    color: var(--color-primary-600) !important;
    line-height: 1.2 !important;
}

#layout-menu .menu-item.active>.menu-link .badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}


/* ============================================================
 * NAVBAR
 * ============================================================ */

/* --- Main Navbar Container (sticky at top, full width) --- */
#layout-navbar.layout-navbar {
    background: var(--ui-surface) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
    padding: 0.5rem 1.5rem !important;
    min-height: 64px !important;
    border-radius: 0 !important;
    margin: 0 !important;

    /* Fixed full width at top */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1030 !important;
}

/* Push layout container down by navbar height */
.layout-container {
    padding-top: 64px !important;
}

/* --- Navbar right section --- */
#layout-navbar .navbar-nav-right {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    justify-content: flex-end !important;
}

#layout-navbar .navbar-nav.flex-row {
    gap: 0.5rem !important;
    align-items: center !important;
}

/* --- User Name Label (right-aligned inside the buttons strip) --- */
.biogenix-user-name-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    white-space: nowrap;
}

/* --- Dashboard Button --- */
.biogenix-nav-btn-dashboard {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.5rem !important;
    padding: 0 1rem !important;
    font-family: var(--font-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: var(--color-primary-600) !important;
    border: 1px solid var(--color-primary-600) !important;
    border-radius: 0.75rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.biogenix-nav-btn-dashboard:hover {
    background-color: var(--color-primary-700) !important;
    border-color: var(--color-primary-700) !important;
    color: #ffffff !important;
}

/* --- Download Button (matches Dashboard) --- */
.biogenix-btn-download {
    align-items: center !important;
    justify-content: center !important;
    height: 2.5rem !important;
    padding: 0 1.25rem !important;
    font-family: var(--font-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: var(--color-primary-600) !important;
    border: 1px solid var(--color-primary-600) !important;
    border-radius: 0.75rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    gap: 0.5rem !important;
}

.biogenix-btn-download:hover {
    background-color: var(--color-primary-700) !important;
    border-color: var(--color-primary-700) !important;
    color: #ffffff !important;
}

/* --- Logout Button --- */
.biogenix-nav-btn-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.5rem !important;
    padding: 0 1rem !important;
    font-family: var(--font-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 0.75rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.biogenix-nav-btn-logout:hover {
    background-color: rgba(106, 50, 59, 0.05) !important;
    border-color: rgba(106, 50, 59, 0.2) !important;
    color: var(--color-tertiary-600) !important;
}

/* --- Profile Icon Button --- */
.biogenix-nav-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.5rem !important;
    width: 2.5rem !important;
    font-size: 1.125rem !important;
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
}

.biogenix-nav-btn-icon:hover {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-text) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06) !important;
}

/* --- Notification Bell Overrides --- */
#layout-navbar .dropdown-notifications .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.5rem !important;
    width: 2.5rem !important;
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 0.75rem !important;
    color: var(--ui-text-muted) !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
}

#layout-navbar .dropdown-notifications .nav-link:hover {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-text) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06) !important;
}

#layout-navbar .dropdown-notifications .nav-link .ti-bell {
    font-size: 1.125rem !important;
}

/* Notification badge */
#layout-navbar .badge-notifications {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    background-color: #f43f5e !important;
    color: #ffffff !important;
    line-height: 18px !important;
    text-align: center !important;
    border: 2px solid var(--ui-surface) !important;
}

/* Notification dropdown panel */
#layout-navbar .dropdown-notifications .dropdown-menu {
    border-radius: 1rem !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-panel) !important;
    overflow: hidden !important;
}

/* --- User Dropdown Overrides --- */
#layout-navbar .dropdown-user .dropdown-menu {
    border-radius: 1rem !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-panel) !important;
    padding: 0.5rem !important;
    overflow: hidden !important;
}

#layout-navbar .dropdown-user .dropdown-item {
    border-radius: 0.625rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ui-text-muted) !important;
    transition: all 0.15s ease !important;
}

#layout-navbar .dropdown-user .dropdown-item:hover {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-text) !important;
}

/* --- Mobile menu toggle --- */
#layout-navbar .layout-menu-toggle .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.5rem !important;
    width: 2.5rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid var(--ui-border) !important;
    background-color: var(--ui-surface) !important;
    color: var(--ui-text-muted) !important;
}

/* --- Layout Page Background --- */
.layout-page {
    background-color: var(--ui-page-bg) !important;
}



.biogenix-nav-btn-icon {
    height: 2.25rem !important;
    width: 2.25rem !important;
}


@media (max-width: 767.98px) {
    .biogenix-user-name-label {
        display: none !important;
    }
}


/* ============================================================
 * NAVBAR BRAND (Logo moved from sidebar to navbar)
 * ============================================================ */
.biogenix-navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
    margin-right: 1rem;
    flex-shrink: 0;
}

.biogenix-navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Increase navbar height by roughly 5% */
.layout-navbar {
    min-height: 72px !important;
    /* Slightly taller than standard 62-64px */
}

.biogenix-navbar-brand-text {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    /* text-slate-900 like dashboard */
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.biogenix-navbar-brand-text sub {
    color: var(--color-primary-600);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    vertical-align: bottom;
}

/* Hide old sidebar brand area (logo moved to navbar) */
#layout-menu .app-brand {
    display: none !important;
}


/* ============================================================
 * FIX: Sidebar hover content shift
 * Prevents Vuexy from expanding sidebar on hover and shifting content
 * ============================================================ */

/* Lock sidebar width and transparent bg — no expand on hover */
#layout-menu.layout-menu,
.layout-menu-collapsed #layout-menu.layout-menu,
.layout-menu-collapsed #layout-menu.layout-menu:hover,
#layout-menu.layout-menu:hover,
.layout-menu-collapsed:not(.layout-menu-hover-active) #layout-menu.layout-menu,
.layout-menu-hover-active #layout-menu.layout-menu {
    width: 260px !important;
    transition: none !important;
    background: transparent !important;
    border-right: none !important;
    padding: 1rem 0 1rem 1rem !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

/* Prevent layout-page from shifting when sidebar is hovered */
.layout-page,
.layout-menu-collapsed .layout-page,
.layout-menu-expanded .layout-page {
    transition: none !important;
}

@media (min-width: 1200px) {

    .layout-page,
    .layout-menu-collapsed .layout-page,
    .layout-menu-expanded .layout-page {
        padding-left: 260px !important;
    }
}

/* Ensure menu text is always visible regardless of hover/collapsed state */
.layout-menu-collapsed #layout-menu .menu-link>div[data-i18n],
.layout-menu-collapsed #layout-menu .menu-link>span,
.layout-menu-collapsed #layout-menu:hover .menu-link>div[data-i18n],
.layout-menu-collapsed #layout-menu:hover .menu-link>span {
    display: block !important;
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
    visibility: visible !important;
}

/* Keep admin label always visible */
.layout-menu-collapsed #layout-menu .biogenix-admin-label,
.layout-menu-collapsed #layout-menu .biogenix-admin-label-wrapper,
.layout-menu-collapsed #layout-menu:hover .biogenix-admin-label,
.layout-menu-collapsed #layout-menu:hover .biogenix-admin-label-wrapper {
    display: block !important;
    opacity: 1 !important;
}

/* Keep sub-menus structure intact when open (collapsed state) */
.layout-menu-collapsed #layout-menu .menu-item.open>.menu-sub,
.layout-menu-collapsed #layout-menu:hover .menu-item.open>.menu-sub {
    max-height: 1000px !important;
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* Prevent popper/tooltip-style submenus from appearing on hover */
.layout-menu-collapsed .menu-inner>.menu-item:not(.open)>.menu-sub,
.layout-menu-collapsed #layout-menu .menu-item:not(.open)>.menu-sub,
.layout-menu-collapsed #layout-menu:hover .menu-item:not(.open)>.menu-sub {
    max-height: 0 !important;
    overflow: hidden !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Override any JS-injected inline styles on the menu */
#layout-menu[style] {
    width: 260px !important;
}

/* Prevent the layout overlay from activating on hover */
.layout-overlay.layout-menu-toggle {
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Preserve card styling on menu-inner during hover/collapsed */
.layout-menu-collapsed #layout-menu .menu-inner,
.layout-menu-collapsed #layout-menu:hover .menu-inner,
#layout-menu:hover .menu-inner {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--ui-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)) !important;
    padding: 1rem !important;
    padding-bottom: 1.5rem !important;
}

/* Responsive: hide brand text on small navbar */
@media (max-width: 991.98px) {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Override any JS-injected inline styles on the menu */
#layout-menu[style] {
    width: 260px !important;
}

/* Prevent the layout overlay from activating on hover */
.layout-overlay.layout-menu-toggle {
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Preserve card styling on menu-inner during hover/collapsed */
.layout-menu-collapsed #layout-menu .menu-inner,
.layout-menu-collapsed #layout-menu:hover .menu-inner,
#layout-menu:hover .menu-inner {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--ui-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)) !important;
    padding: 1rem !important;
    padding-bottom: 1.5rem !important;
}

/* Responsive: hide brand text on small navbar */
@media (max-width: 991.98px) {
    .biogenix-navbar-brand-text {
        display: none;
    }
}

/* Page background */
.layout-container {
    background-color: var(--ui-page-bg) !important;
}

/* ============================================================
 * PAGINATION
 * ============================================================ */
.pagination .page-item .page-link {
    border-radius: 0.75rem !important;
    margin: 0 0.25rem !important;
}

.pagination .page-item:first-child .page-link {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

/* ============================================================
 * TOASTR NOTIFICATIONS - Biogenix Website Style
 * ============================================================ */
#toast-container.toast-top-right {
    top: 85px !important;
    right: 24px !important;
}

#toast-container>div {
    border-radius: 0.75rem !important;
    /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    /* shadow-lg */
    padding: 16px 16px 16px 48px !important;
    font-family: var(--font-sans) !important;
    backdrop-filter: blur(4px) !important;
    background-size: 20px !important;
    background-position: 16px center !important;
    /* Center icon vertically */
    background-repeat: no-repeat !important;
    color: #1e293b !important;
    /* text-slate-800 */
    min-height: 52px !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

#toast-container>div:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Close Button Override */
#toast-container>div .toast-close-button {
    color: #94a3b8 !important;
    text-shadow: none !important;
    font-weight: 300 !important;
    opacity: 1 !important;
    right: -0.2em !important;
    top: -0.2em !important;
}

#toast-container>div .toast-close-button:hover {
    color: #475569 !important;
}

/* Success Toast */
#toast-container>.toast-success {
    background-color: #f0faf4 !important;
    /* bg-primary-50 */
    border: 1px solid #a3e0bb !important;
    /* border-primary-200 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231A4D2E' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") !important;
}

/* Error Toast */
#toast-container>.toast-error {
    background-color: #fff1f2 !important;
    /* bg-rose-50 */
    border: 1px solid #fecdd3 !important;
    /* border-rose-200 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f43f5e' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") !important;
}

/* Info Toast */
#toast-container>.toast-info {
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230284c7' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") !important;
}

/* Warning Toast */
#toast-container>.toast-warning {
    background-color: #fefce8 !important;
    border: 1px solid #fde047 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d97706' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E") !important;
}

/* Toast title and message adjustments */
#toast-container>div .toast-title {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    margin-bottom: 0.25rem !important;
    color: #0f172a !important;
}

#toast-container>div .toast-message {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #1e293b !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Hide progress bar to match Biogenix site */
#toast-container>div .toast-progress {
    display: none !important;
}

/* ============================================================
 * Live Inventory Mobile Specific Overrides
 * ============================================================ */
@media (max-width: 767px) {
    .stocks-export-form {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .stocks-export-form .dropdown,
    .stocks-export-form button,
    .stocks-export-form ul.dropdown-menu {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
 * Dashboard UI/UX (HCV)
 * ============================================================ */
.dashboard-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-primary-900);
    margin-bottom: 1.5rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-card {
    background-color: #ffffff;
    border: 1px solid var(--color-primary-100);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    border-color: var(--color-primary-200);
}

.dashboard-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-primary-800);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
    margin-bottom: 1rem;
}

.dashboard-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary-900);
    line-height: 1.2;
}

.dashboard-stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.dashboard-trend {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}

.dashboard-trend.positive {
    background-color: #dcfce7;
    color: #166534;
}

.dashboard-trend.negative {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Mobile responsive dashboard */
@media (max-width: 767px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * CareIO-style sidebar expand/collapse
 * ============================================================ */
:root {
    --biogenix-sidebar-open-width: 260px;
    --biogenix-sidebar-collapsed-width: 78px;
    --biogenix-sidebar-transition: 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

#biogenixSidebarToggle {
    display: none;
}

@media (min-width: 1200px) {

    #layout-menu.layout-menu,
    .layout-menu-collapsed #layout-menu.layout-menu,
    .layout-menu-collapsed #layout-menu.layout-menu:hover,
    #layout-menu.layout-menu:hover,
    .layout-menu-collapsed:not(.layout-menu-hover-active) #layout-menu.layout-menu,
    .layout-menu-hover-active #layout-menu.layout-menu,
    .layout-menu-expanded #layout-menu,
    html:not([data-layout-menu-collapsed]) #layout-menu {
        width: var(--biogenix-sidebar-open-width) !important;
        transition: width var(--biogenix-sidebar-transition),
            padding var(--biogenix-sidebar-transition),
            background-color var(--biogenix-sidebar-transition) !important;
    }

    #layout-menu[style] {
        width: var(--biogenix-sidebar-open-width) !important;
    }

    .layout-page,
    .layout-menu-collapsed .layout-page,
    .layout-menu-expanded .layout-page {
        padding-left: var(--biogenix-sidebar-open-width) !important;
        transition: padding-left var(--biogenix-sidebar-transition) !important;
    }

    .layout-content-navbar .layout-page .content-wrapper>.container-xxl,
    .layout-content-navbar .layout-page .content-wrapper>.container-fluid {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        transition: padding-left var(--biogenix-sidebar-transition),
            padding-right var(--biogenix-sidebar-transition) !important;
    }

    #layout-menu .menu-inner {
        transition: padding var(--biogenix-sidebar-transition),
            border-radius var(--biogenix-sidebar-transition),
            box-shadow var(--biogenix-sidebar-transition) !important;
    }

    #layout-menu .menu-link,
    #layout-menu .menu-icon,
    #layout-menu .menu-caret,
    #layout-menu .menu-link>div[data-i18n],
    #layout-menu .biogenix-admin-label,
    #layout-menu .biogenix-admin-label-wrapper {
        transition: opacity var(--biogenix-sidebar-transition),
            transform var(--biogenix-sidebar-transition),
            width var(--biogenix-sidebar-transition),
            padding var(--biogenix-sidebar-transition),
            margin var(--biogenix-sidebar-transition),
            color 160ms ease,
            background-color 160ms ease !important;
    }

    #biogenixSidebarToggle {
        position: fixed;
        top: 110px;
        left: calc(var(--biogenix-sidebar-open-width) - 15px);
        z-index: 1085;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        background: #ffffff;
        color: var(--color-primary-700);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
        cursor: pointer;
        transition: left var(--biogenix-sidebar-transition),
            background-color 160ms ease,
            color 160ms ease,
            box-shadow 160ms ease !important;
    }

    #biogenixSidebarToggle:hover {
        background: var(--ui-surface-subtle);
        color: var(--color-primary-900);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    }

    #biogenixSidebarToggle i {
        margin: 0;
        font-size: 18px;
        line-height: 1;
    }

    html.biogenix-sidebar-collapsed #layout-menu.layout-menu,
    html.biogenix-sidebar-collapsed .layout-menu-collapsed #layout-menu.layout-menu,
    html.biogenix-sidebar-collapsed .layout-menu-collapsed #layout-menu.layout-menu:hover,
    html.biogenix-sidebar-collapsed #layout-menu.layout-menu:hover,
    html.biogenix-sidebar-collapsed .layout-menu-expanded #layout-menu,
    html.biogenix-sidebar-collapsed:not([data-layout-menu-collapsed]) #layout-menu {
        width: var(--biogenix-sidebar-collapsed-width) !important;
        padding: 1rem 0.5rem !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu[style] {
        width: var(--biogenix-sidebar-collapsed-width) !important;
    }

    html.biogenix-sidebar-collapsed .layout-page,
    html.biogenix-sidebar-collapsed .layout-menu-collapsed .layout-page,
    html.biogenix-sidebar-collapsed .layout-menu-expanded .layout-page {
        padding-left: var(--biogenix-sidebar-collapsed-width) !important;
    }

    html.biogenix-sidebar-collapsed .layout-content-navbar .layout-page .content-wrapper>.container-xxl,
    html.biogenix-sidebar-collapsed .layout-content-navbar .layout-page .content-wrapper>.container-fluid {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    html.biogenix-sidebar-collapsed #biogenixSidebarToggle {
        left: calc(var(--biogenix-sidebar-collapsed-width) - 23px);
    }

    html.biogenix-sidebar-collapsed #layout-menu .menu-inner,
    html.biogenix-sidebar-collapsed #layout-menu:hover .menu-inner,
    html.biogenix-sidebar-collapsed .layout-menu-collapsed #layout-menu .menu-inner,
    html.biogenix-sidebar-collapsed .layout-menu-collapsed #layout-menu:hover .menu-inner {
        padding: 0.75rem 0.55rem !important;
        padding-bottom: 1rem !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu .biogenix-admin-label-wrapper {
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu .biogenix-admin-label {
        width: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        transform: translateX(-8px) !important;
        visibility: hidden !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu .menu-inner>.menu-item {
        margin: 6px 0 !important;
        width: 100% !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu .menu-link,
    html.biogenix-sidebar-collapsed #layout-menu:hover .menu-link,
    html.biogenix-sidebar-collapsed .layout-menu-collapsed #layout-menu .menu-inner>.menu-item>.menu-link {
        justify-content: center !important;
        gap: 0 !important;
        width: 100% !important;
        min-height: 44px;
        padding: 0.75rem 0.5rem !important;
        text-align: center !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu .menu-item.active>.menu-link,
    html.biogenix-sidebar-collapsed .bg-menu-theme.menu-vertical .menu-item.active>.menu-link:not(.menu-toggle),
    html.biogenix-sidebar-collapsed .bg-menu-theme .menu-inner .menu-item.active>.menu-link.menu-toggle {
        width: 100% !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu .menu-icon,
    html.biogenix-sidebar-collapsed #layout-menu:hover .menu-icon {
        margin: 0 !important;
        transform: translateX(0) !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu .menu-link>div[data-i18n],
    html.biogenix-sidebar-collapsed #layout-menu .menu-link>span,
    html.biogenix-sidebar-collapsed #layout-menu:hover .menu-link>div[data-i18n],
    html.biogenix-sidebar-collapsed #layout-menu:hover .menu-link>span {
        display: block !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        white-space: nowrap !important;
        transform: translateX(-8px) !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu .menu-caret,
    html.biogenix-sidebar-collapsed #layout-menu:hover .menu-caret {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    html.biogenix-sidebar-collapsed #layout-menu .menu-sub,
    html.biogenix-sidebar-collapsed #layout-menu .menu-item.open>.menu-sub,
    html.biogenix-sidebar-collapsed #layout-menu:hover .menu-sub,
    html.biogenix-sidebar-collapsed .layout-menu-collapsed #layout-menu .menu-item.open>.menu-sub {
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 1199.98px) {
    #biogenixSidebarToggle {
        display: none !important;
    }
}