/* ==========================================================================
   MEDISTORE PRO — OFFICIAL PHARMACY DESIGN SYSTEM COLOR PALETTE
   Exact specification: Blue + Cyan + Indigo Gradient, White Cards & Dark Blue Sidebar
   Primary Blue: #0A7CFF | Deep Blue: #1246A0 | Cyan Accent: #06B6D4
   Indigo Highlight: #6366F1 | Grad Light: #38BDF8 | Grad Dark: #1D4ED8
   Page Bg: #F8FAFC | Card Bg: #FFFFFF | Text: #1E293B / #64748B
   Warning: #F59E0B | Danger: #EF4444
   ========================================================================== */

:root {
    /* 1. Primary Blue (#0A7CFF) */
    --ms-primary: #0A7CFF;
    --ms-primary-hover: #006fe6;
    --ms-primary-active: #0056b3;
    --ms-primary-soft: #eff6ff;
    --ms-primary-glow: rgba(10, 124, 255, 0.35);

    /* 2. Deep Blue (#1246A0) */
    --ms-secondary: #1246A0;
    --ms-secondary-hover: #0e377f;
    --ms-secondary-soft: #eef2ff;

    /* 3. Cyan Accent (#06B6D4) */
    --ms-cyan: #06B6D4;
    --ms-cyan-hover: #0891b2;
    --ms-cyan-soft: #ecfeff;

    /* 4. Indigo Highlight (#6366F1) */
    --ms-indigo: #6366F1;
    --ms-indigo-hover: #4f46e5;
    --ms-indigo-soft: #eef2ff;

    /* 5. Gradients */
    --ms-grad-light: #38BDF8;
    --ms-grad-dark: #1D4ED8;
    --ms-gradient-primary: linear-gradient(135deg, #0A7CFF 0%, #1D4ED8 100%);
    --ms-gradient-accent: linear-gradient(135deg, #06B6D4 0%, #0A7CFF 50%, #6366F1 100%);
    --ms-gradient-sidebar: 
        radial-gradient(circle at 20% 0%, rgba(6, 182, 212, 0.26) 0%, transparent 55%),
        radial-gradient(circle at 95% 35%, rgba(99, 102, 241, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(10, 124, 255, 0.32) 0%, rgba(18, 70, 160, 0.35) 45%, transparent 75%),
        linear-gradient(180deg, rgba(11, 30, 59, 0.94) 0%, rgba(7, 19, 38, 0.98) 100%);

    /* 6. Sidebar / Dark Blue Navigation (#0B1E3B & #E2E8F0) */
    --ms-sidebar-bg: #0B1E3B;
    --ms-sidebar-text: #E2E8F0;
    --ms-sidebar-active: #0A7CFF;
    --ms-sidebar-hover: rgba(255, 255, 255, 0.08);

    /* 7. Backgrounds (#F8FAFC Page Background & #FFFFFF Card Background) */
    --ms-main-bg: #F8FAFC;
    --ms-page-bg: #F8FAFC;
    --ms-card-bg: #FFFFFF;
    --ms-surface-white: #FFFFFF;

    /* 8. Typography Hierarchy */
    --ms-text-primary: #1E293B;
    --ms-text-secondary: #64748B;
    --ms-text-muted: #94A3B8;

    /* 9. Analytics & Charts */
    --ms-accent-indigo: #6366F1;
    --ms-chart-sales: #0A7CFF;
    --ms-chart-purchase: #06B6D4;
    --ms-chart-profit: #6366F1;

    /* 10. Status & Alerts */
    --ms-warning: #F59E0B;
    --ms-danger: #EF4444;
    --ms-success: #10B981;
    --ms-info: #06B6D4;

    /* 11. Border & Overlay */
    --ms-border: #E2E8F0;
    --ms-border-subtle: #F1F5F9;
    --ms-modal-overlay: rgba(11, 30, 59, 0.55);
}

/* --------------------------------------------------------------------------
   GLOBAL BODY & MAIN CONTENT CANVAS (#F8FAFC Clean Canvas)
   -------------------------------------------------------------------------- */
html, body {
    background-color: var(--ms-main-bg) !important;
    background-image: radial-gradient(at 0% 0%, rgba(10, 124, 255, 0.04) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.03) 0px, transparent 50%) !important;
    color: var(--ms-text-primary) !important;
    min-height: 100%;
}

.page-main, main, .main-content, .page-shell, .app-shift {
    background-color: transparent !important;
}

/* Header Bar & Top Progress */
.header-bar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--ms-border) !important;
    box-shadow: 0 4px 20px rgba(11, 30, 59, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.header-accent, #pageProgress {
    background: linear-gradient(90deg, #06B6D4 0%, #0A7CFF 50%, #6366F1 100%) !important;
}

/* --------------------------------------------------------------------------
   DARK BLUE SIDEBAR & NAVIGATION (#0B1E3B · #E2E8F0 · Active: #0A7CFF -> #1D4ED8)
   -------------------------------------------------------------------------- */
#sidebar, .sidebar-shell, aside#sidebar {
    background-color: rgba(11, 30, 59, 0.94) !important;
    background-image: var(--ms-gradient-sidebar) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-right: 1px solid rgba(56, 189, 248, 0.14) !important;
    color: var(--ms-sidebar-text) !important;
    box-shadow: 4px 0 28px rgba(7, 19, 38, 0.45) !important;
}

.sidebar-tip, .sidebar-tip > div {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.sidebar-brand .font-display, .sidebar-brand span, .sidebar-brand h1 {
    color: #FFFFFF !important;
}

.sidebar-brand p:last-child, .sidebar-brand small {
    color: rgba(226, 232, 240, 0.8) !important;
}

.sidebar-section-title {
    color: rgba(226, 232, 240, 0.75) !important;
}

.sidebar-section-title:hover {
    background-color: var(--ms-sidebar-hover) !important;
    color: #FFFFFF !important;
}

.sidebar-link {
    color: var(--ms-sidebar-text) !important;
}

.sidebar-link:hover {
    background-color: var(--ms-sidebar-hover) !important;
    color: #FFFFFF !important;
}

.sidebar-link-icon {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--ms-grad-light) !important;
    border-radius: 8px !important;
}

/* Active Menu Item (#0A7CFF -> #1D4ED8 Gradient) */
.sidebar-link-active,
.sidebar-link.sidebar-link-active,
.nav-flyout-link.is-on {
    background: linear-gradient(135deg, #0A7CFF 0%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(10, 124, 255, 0.4) !important;
}

.sidebar-link-active .sidebar-link-icon,
.sidebar-link.sidebar-link-active .sidebar-link-icon {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}

.nav-section-inner {
    border-left-color: rgba(10, 124, 255, 0.25) !important;
}

/* --------------------------------------------------------------------------
   PRIMARY, POS ACTIONS, SAVE & SUBMIT BUTTONS (#0A7CFF -> #1D4ED8 Gradient)
   -------------------------------------------------------------------------- */
.btn-primary, button.btn-primary, a.btn-primary,
button[type="submit"].btn-primary, input[type="submit"].btn-primary,
.btn-submit, #openPaymentDrawer, #saveBill, #addBarcodeBtn, .btn-pos {
    background: linear-gradient(135deg, #0A7CFF 0%, #1D4ED8 100%) !important;
    border: 1px solid #0A7CFF !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(10, 124, 255, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-radius: 12px !important;
}

.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover,
#openPaymentDrawer:hover, #saveBill:hover, #addBarcodeBtn:hover {
    background: linear-gradient(135deg, #006fe6 0%, #1742b6 100%) !important;
    border-color: #006fe6 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(10, 124, 255, 0.45) !important;
}

.btn-primary:active, button.btn-primary:active, a.btn-primary:active,
#openPaymentDrawer:active, #saveBill:active {
    background: #0056b3 !important;
    transform: translateY(0);
}

/* Secondary Buttons: White Surface with #1246A0 Deep Blue Accents */
.btn-secondary, button.btn-secondary, a.btn-secondary {
    background-color: #FFFFFF !important;
    border: 1px solid var(--ms-border) !important;
    color: var(--ms-secondary) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-radius: 12px !important;
}

.btn-secondary:hover, button.btn-secondary:hover, a.btn-secondary:hover {
    background-color: var(--ms-main-bg) !important;
    border-color: var(--ms-secondary) !important;
    color: var(--ms-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(18, 70, 160, 0.08) !important;
}

/* Danger Buttons (#EF4444) */
.btn-danger, button.btn-danger, a.btn-danger {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: var(--ms-danger) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}
.btn-danger:hover {
    background-color: #fee2e2 !important;
    border-color: var(--ms-danger) !important;
}

/* --------------------------------------------------------------------------
   SURFACES: WHITE CARDS (#FFFFFF), PANELS, CONTAINERS & TABLES
   -------------------------------------------------------------------------- */
.card, .table-panel, .panel, .login-card,
section.bg-white, div.bg-white.rounded-2xl, .pos-topbar, .filter-bar {
    background-color: var(--ms-surface-white) !important;
    border: 1px solid var(--ms-border) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 24px rgba(15, 23, 42, 0.04) !important;
    border-radius: 16px !important;
}

/* KPI Cards & Section Separation */
.kpi-container, .chart-container-box, .section-divider, .section-separation {
    border-color: var(--ms-border) !important;
}

.stat-card {
    background-color: var(--ms-surface-white) !important;
    border: 1px solid var(--ms-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 20px rgba(15, 23, 42, 0.04) !important;
}
.stat-card:hover {
    border-color: rgba(10, 124, 255, 0.4) !important;
    box-shadow: 0 6px 20px rgba(10, 124, 255, 0.14) !important;
}
.stat-card::before {
    background-image: linear-gradient(to bottom, var(--ms-primary), var(--ms-cyan)) !important;
}

/* Tables & Headings */
table thead tr th, th {
    background-color: var(--ms-page-bg) !important;
    color: var(--ms-text-secondary) !important;
    border-bottom: 1px solid var(--ms-border) !important;
    font-weight: 700 !important;
}

table tbody tr, td {
    border-bottom: 1px solid var(--ms-border) !important;
    transition: background-color 0.15s ease !important;
}

table tbody tr:hover {
    background-color: rgba(241, 245, 249, 0.7) !important;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY HIERARCHY (#1E293B Primary · #64748B Secondary · #94A3B8 Muted)
   -------------------------------------------------------------------------- */
h1:not(.text-white):not([class*="text-white"]), 
h2:not(.text-white):not([class*="text-white"]), 
h3:not(.text-white):not([class*="text-white"]), 
h4:not(.text-white):not([class*="text-white"]), 
.card-title:not(.text-white), 
.page-title:not(.text-white) {
    color: var(--ms-text-primary);
}

.text-white, [class*="text-white"] {
    color: #FFFFFF !important;
}

.page-subtitle:not(.text-white), .text-slate-500, .text-slate-600, .secondary-text {
    color: #475569;
}

.text-slate-400, .muted-text {
    color: var(--ms-text-muted);
}

/* Bulletproof Collapsed Sidebar Rules (Zero Overlap) */
html.nav-collapsed .sidebar-tip,
html.nav-collapsed .sidebar-tip *,
html.nav-collapsed .nav-label,
html.nav-collapsed .nav-text,
html.nav-collapsed .nav-section-chevron,
html.nav-collapsed [data-nav-group="Reports"] span:last-child {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

html.nav-collapsed .sidebar-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    width: 100% !important;
}

html.nav-collapsed .nav-section-icon {
    margin: 0 auto !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
}

/* Page Icon Wrap (Blue + Cyan / Indigo Gradient) */
.page-icon-wrap {
    background: linear-gradient(135deg, #0A7CFF 0%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(10, 124, 255, 0.3) !important;
}

/* --------------------------------------------------------------------------
   INPUT FIELDS, SELECTS & DROPDOWNS (#FFFFFF with #E2E8F0 Border)
   -------------------------------------------------------------------------- */
.input-field, .input-base, .input-with-icon, .header-search, select,
input[type="text"], input[type="search"], input[type="date"], input[type="number"],
input[type="email"], input[type="password"] {
    background-color: var(--ms-surface-white) !important;
    border: 1px solid var(--ms-border) !important;
    color: var(--ms-text-primary) !important;
    border-radius: 12px !important;
}

.input-field:focus, .input-base:focus, .input-with-icon:focus, .header-search:focus, select:focus,
input[type="text"]:focus, input[type="search"]:focus, input[type="date"]:focus {
    border-color: var(--ms-primary) !important;
    box-shadow: 0 0 0 3px rgba(10, 124, 255, 0.2) !important;
    outline: none !important;
}

.input-field::placeholder, .input-with-icon::placeholder, .header-search::placeholder {
    color: var(--ms-text-muted) !important;
}

.pos-results, .dropdown-menu, .header-search-dropdown {
    background-color: var(--ms-surface-white) !important;
    border: 1px solid var(--ms-border) !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08) !important;
    border-radius: 12px !important;
}

/* --------------------------------------------------------------------------
   STATUS BADGES & ALERTS (Amber #F59E0B · Danger #EF4444 · Cyan #06B6D4 · Indigo #6366F1)
   -------------------------------------------------------------------------- */
/* Warning: Amber (#F59E0B) — Low Stock & Near Expiry */
.badge-warning, .status-warning, .alert-warning {
    background-color: #fffbeb !important;
    color: var(--ms-warning) !important;
    border: 1px solid #fde68a !important;
}

/* Danger / Critical: Red (#EF4444) — Expired Medicine & Critical Alerts */
.badge-danger, .status-danger, .alert-danger {
    background-color: #fef2f2 !important;
    color: var(--ms-danger) !important;
    border: 1px solid #fecaca !important;
}

/* Success / Normal: (#10B981) — In-Stock & Payment Success */
.badge-success, .status-success, .alert-success {
    background-color: #ecfdf5 !important;
    color: var(--ms-success) !important;
    border: 1px solid #a7f3d0 !important;
}

/* Cyan Accent (#06B6D4) */
.badge-info, .status-info, .alert-info, .badge-cyan {
    background-color: var(--ms-cyan-soft) !important;
    color: var(--ms-cyan-hover) !important;
    border: 1px solid #a5f3fc !important;
}

/* Indigo Highlight (#6366F1) — Gross Profit, Live Analytics & Mix */
.text-indigo-highlight, .accent-indigo {
    color: var(--ms-indigo) !important;
}
.bg-indigo-soft, .badge-indigo {
    background-color: var(--ms-indigo-soft) !important;
    color: var(--ms-indigo) !important;
    border: 1px solid #c7d2fe !important;
}

/* --------------------------------------------------------------------------
   POS SYSTEM STYLES
   -------------------------------------------------------------------------- */
.pos-total, .pos-pay-card {
    background: linear-gradient(135deg, #0A7CFF 0%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 16px rgba(10, 124, 255, 0.28) !important;
}

.pos-pay-tile.pos-pay-tile-on {
    border-color: var(--ms-primary) !important;
    background-color: var(--ms-primary-soft) !important;
}
.pos-pay-tile.pos-pay-tile-on span.rounded-xl {
    background-color: var(--ms-primary) !important;
}

.pos-key {
    background-color: #FFFFFF !important;
    border: 1px solid var(--ms-border) !important;
    color: var(--ms-text-secondary) !important;
}
.shortcut-key {
    background-color: #F1F5F9 !important;
    color: var(--ms-text-primary) !important;
}

/* --------------------------------------------------------------------------
   MODAL OVERLAY (rgba(11, 30, 59, 0.55))
   -------------------------------------------------------------------------- */
#sidebarOverlay, .modal-backdrop, .overlay, .return-drawer-backdrop {
    background-color: var(--ms-modal-overlay) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.modal-dialog, .modal-content, [data-modal] {
    background-color: var(--ms-surface-white) !important;
    border: 1px solid var(--ms-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 45px rgba(11, 30, 59, 0.18) !important;
}

/* --------------------------------------------------------------------------
   MAPPING TAILWIND UTILITIES TO BLUE + CYAN + INDIGO PALETTE
   -------------------------------------------------------------------------- */
.text-pharmacy-500, .text-pharmacy-600 { color: var(--ms-primary) !important; }
.text-pharmacy-700, .text-pharmacy-800 { color: var(--ms-secondary) !important; }
.text-pharmacy-900 { color: var(--ms-sidebar-bg) !important; }
.bg-pharmacy-50 { background-color: var(--ms-main-bg) !important; }
.bg-pharmacy-100 { background-color: #F1F5F9 !important; }
.bg-pharmacy-500 { background-color: var(--ms-primary) !important; }
.border-pharmacy-500 { border-color: var(--ms-primary) !important; }
.ring-pharmacy-100, .ring-pharmacy-200 { --tw-ring-color: rgba(10, 124, 255, 0.3) !important; }

/* Global safety mapping for legacy emerald utilities -> Blue/Cyan theme */
.text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--ms-primary) !important; }
.bg-emerald-500, .bg-emerald-600 { background-color: var(--ms-primary) !important; }
.bg-emerald-50, .bg-emerald-50\/60, .bg-emerald-50\/80, .bg-emerald-50\/90 { background-color: #eff6ff !important; }
.bg-emerald-100 { background-color: #dbeafe !important; }
.border-emerald-200, .border-emerald-300 { border-color: #bfdbfe !important; }
.border-emerald-500, .border-emerald-600 { border-color: var(--ms-primary) !important; }
.ring-emerald-200 { --tw-ring-color: #bfdbfe !important; }

/* Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==========================================================================
   PURCHASE & POS AUTOCOMPLETE / PORTAL / SEARCH-SELECT STYLES
   ========================================================================== */
.po-ac-portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    z-index: 999999;
    pointer-events: none;
}

.po-ac-list {
    position: fixed;
    pointer-events: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    max-height: 290px;
    overflow-y: auto;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
}

.po-ac-list.hidden {
    display: none !important;
}

.po-ac-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.po-ac-item:hover, .po-ac-item.is-selected {
    background-color: #eff6ff !important;
}

.po-ac-item .po-ac-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
}

.po-ac-item .po-ac-sub {
    display: flex;
    align-items: center;
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 0.15rem;
}

/* Search Select Styles */
.ss-portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    z-index: 999999;
    pointer-events: none;
}

.ss-list {
    position: fixed;
    pointer-events: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    max-height: 280px;
    overflow-y: auto;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
}

.ss-list.hidden {
    display: none !important;
}

.ss-opt {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    background: transparent;
    cursor: pointer;
    font-size: 0.75rem;
    color: #1e293b;
    transition: background-color 0.15s ease;
}

.ss-opt:last-child {
    border-bottom: none;
}

.ss-opt:hover, .ss-opt.ss-opt-on {
    background-color: #eff6ff !important;
    color: var(--ms-primary) !important;
}

.ss-opt-title {
    font-weight: 600;
}

.ss-opt-sub {
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 0.125rem;
}

.ss-native {
    display: none !important;
}

.ss-wrap {
    position: relative;
    width: 100%;
}