:root{--font-family-primary:'Inter',sans-serif;--font-size-base:14px;--sidebar-width:16rem;--sidebar-collapsed-width:5.5rem;--sidebar-bg:#003d3d;--sidebar-text:#ffffff;--sidebar-text-active:#ffffff;--header-bg:#ffffff;--header-text:#0f172a;--border-radius-base:.5rem;--border-radius-card:1rem;--color-primary:#003d3d;--color-primary-hover:#002b2b;--color-secondary:#f97316;--color-secondary-hover:#ea580c;--color-bg-app:#fafafa;--color-card-bg:#ffffff;--color-text-base:#334155;--color-text-muted:#64748b;--color-text-heading:#0f172a;--table-header-bg:#003d3d;--table-header-text:#ffffff;--input-bg:#ffffff;--input-border:#cbd5e1;--page-title-text-color:#003d3d;--table-row-even-bg:#f8fafc;--table-row-hover-bg:#f1f5f9;--input-focus-ring:rgba(0,61,61,.15);}body{font-family:var(--font-family-primary);font-size:var(--font-size-base);background:var(--color-bg-app);color:var(--color-text-base);}a{text-decoration:none}.app-shell{min-height:100vh;background:var(--color-bg-app)}.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);color:var(--sidebar-text);min-height:100vh;position:sticky;top:0}.sidebar .nav-link{color:var(--sidebar-text);border-radius:var(--border-radius-base);margin-bottom:.25rem}.sidebar .nav-link.active,.sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:var(--sidebar-text-active)}.content-area{flex:1}.topbar{background:var(--header-bg);color:var(--header-text);border-bottom:1px solid #e2e8f0}.card{border-radius:var(--border-radius-card);border:1px solid #e2e8f0;box-shadow:0 6px 20px rgba(15,23,42,.05)}.card-header{background:transparent;border-bottom:1px solid #e2e8f0;}.table thead th{background:var(--table-header-bg);color:var(--table-header-text);font-weight:600}.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:var(--table-row-even-bg)}.table-hover>tbody>tr:hover>*{background-color:var(--table-row-hover-bg)}.form-control,.form-select{background:var(--input-bg);border-color:var(--input-border);border-radius:var(--border-radius-base)}.form-control:focus,.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 .2rem var(--input-focus-ring)}.page-title{color:var(--page-title-text-color)}.badge{border-radius:999px}.btn-light{background-color:#f1f5f9;border-color:#e2e8f0;color:#334155;}.btn-light:hover{background-color:#e2e8f0;border-color:#cbd5e1;color:#0f172a;}.btn-primary{background:var(--color-primary);border-color:var(--color-primary)}.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn-secondary{background:var(--color-secondary);border-color:var(--color-secondary)}.btn-secondary:hover{background:var(--color-secondary-hover);border-color:var(--color-secondary-hover)}.teal-accent{color:var(--color-primary)}.orange-accent{color:var(--color-secondary)}.sidebar-brand{font-weight:700;letter-spacing:.3px}.nav-section-title{font-size:.75rem;text-transform:uppercase;opacity:.8;letter-spacing:.08em}.stat-card{background:linear-gradient(180deg,#fff,#f8fafc)}.table-responsive{border-radius:var(--border-radius-card)}.pos-grid{display:none}
.pos-layout{display:grid;grid-template-columns:220px 1fr 340px;gap:0;height:calc(100vh - 120px)}
.pos-products-section{min-height:0}
.pos-product-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:1rem;overflow-y:auto;padding:.2rem;padding-bottom:2rem}
.pos-product-card{background:var(--color-card-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-card);padding:.75rem;cursor:pointer;transition:all .15s ease-in-out;user-select:none;position:relative;overflow:hidden}
.pos-product-card:hover{border-color:var(--color-primary);box-shadow:0 4px 15px rgba(0,61,61,.15);transform:translateY(-3px)}
.pos-product-card:active{transform:translateY(1px);box-shadow:0 2px 5px rgba(0,61,61,.1)}
.pos-cart-section{min-height:0}
.cart-item{transition:background-color .2s ease}
.cart-item:hover{background-color:var(--table-row-hover-bg)}
.cart-qty-ctrl{display:flex;align-items:center}
.cart-qty-ctrl .btn{padding:.1rem .4rem;line-height:1}
.category-filters::-webkit-scrollbar{height:4px}
.category-filters::-webkit-scrollbar-thumb{background-color:var(--input-border);border-radius:4px}

/* Sidebar Overrides & Enhancements (Enterprise POS & Inventory Grid Style) */
.sidebar {
    width: var(--sidebar-width);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1040;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--sidebar-bg);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

/* Custom premium scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.sidebar .nav-label {
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-size: 0.88rem;
    font-weight: 500;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    padding: 0.7rem 1rem;
    margin: 0.15rem 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

/* Beautiful hover/active styling with active orange highlight line and glowing background */
.sidebar .nav-link:hover {
    color: var(--sidebar-text-active);
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateX(3px);
}

.sidebar .nav-link.active {
    color: var(--sidebar-text-active);
    background: var(--color-primary);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.01));
    font-weight: 600;
    box-shadow: inset 4px 0 0 var(--color-secondary), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Active nested submenu indicators */
.sidebar .collapse .nav-link.active {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff;
    box-shadow: none;
    border-left: 2px solid var(--color-secondary);
    border-radius: 0 6px 6px 0;
}

/* Collapsed Desktop State */
.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .sidebar .nav-label,
.sidebar-collapsed .sidebar .nav-section-title,
.sidebar-collapsed .sidebar .nav-chevron,
.sidebar-collapsed .sidebar .sidebar-brand span,
.sidebar-collapsed .sidebar .sidebar-tagline {
    opacity: 0;
    display: none !important;
}

.sidebar-collapsed .sidebar .logo-box {
    margin: 0 auto;
    width: 38px;
    height: 38px;
}

.sidebar-collapsed .sidebar .nav-link {
    justify-content: center;
    padding: 0.75rem 0;
    margin: 0.2rem 0.5rem;
}

.sidebar-collapsed .sidebar .nav-link i {
    margin-right: 0 !important;
    font-size: 1.25rem;
}

.sidebar-collapsed .collapse.show {
    display: none !important;
}

/* Sidebar Submenus */
.sidebar .nav-chevron {
    transition: transform 0.2s ease;
    font-size: 0.7rem;
    margin-left: auto;
}
.sidebar .nav-link[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
}

.sidebar .collapse {
    transition: height 0.35s ease;
}

.sidebar .collapse .nav {
    padding: 0.25rem 0;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    margin: 0 0.75rem 0.5rem 0.75rem;
}

.sidebar .collapse .nav-link {
    font-size: 0.82rem;
    opacity: 0.85;
    padding: 0.5rem 1rem 0.5rem 2.2rem;
    margin: 0;
    border-radius: 4px;
}
.sidebar .collapse .nav-link:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.03);
}

/* Section titles */
.sidebar .nav-section-title {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.1em;
    font-weight: 700;
    padding-left: 1.75rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* High-contrast brand section */
.sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-tagline {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

/* User Account Display in Sidebar footer */
.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(0, 0, 0, 0.15);
}

/* Topbar Styles */
.topbar {
    background-color: #ffffff;
    height: 70px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
    border-bottom: 1px solid #eef2f6;
    position: sticky;
    top: 0;
    z-index: 1000;
}

#sidebarToggle {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}
#sidebarToggle:hover {
    background-color: #f1f5f9;
    color: var(--color-primary);
    transform: scale(1.05);
}

/* Breadcrumbs formatting */
.header-breadcrumb {
    font-size: 0.8rem;
}
.header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "" !important;
    font-family: 'bootstrap-icons' !important;
    color: #94a3b8;
    font-size: 0.72rem;
}
.header-breadcrumb a {
    color: var(--color-text-muted);
    font-weight: 500;
    transition: color 0.15s ease;
}
.header-breadcrumb a:hover {
    color: var(--color-secondary);
}
.header-breadcrumb .active {
    color: #475569;
    font-weight: 600;
}

/* Search bar styling */
.header-search-box {
    position: relative;
    max-width: 320px;
}
.header-search-box input {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.45rem 1rem 0.45rem 2.3rem;
    font-size: 0.82rem;
    width: 260px;
    transition: all 0.2s ease-in-out;
}
.header-search-box input:focus {
    width: 310px;
    background-color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem var(--input-focus-ring);
    outline: none;
}
.header-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
    font-size: 0.85rem;
}

/* Centered Layout Wrapper for login/auth pages */
.auth-layout-wrapper {
    background: radial-gradient(circle at top right, rgba(0, 61, 61, 0.08), transparent 40%),
                radial-gradient(circle at bottom left, rgba(249, 115, 22, 0.06), transparent 40%),
                #f1f5f9;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layout adjustments on Desktop */
.content-area {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Table and Card Responsiveness Settings */
.table-responsive {
    border-radius: var(--border-radius-card);
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    background-color: #ffffff;
}
.table-responsive::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

/* Profile Badge with Initials */
.profile-initial-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.88rem;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}
.profile-initial-avatar:hover {
    transform: rotate(5deg) scale(1.05);
}

/* User Dropdown Premium Menu */
.navbar-user-dropdown {
    animation: fadeScale 0.2s ease-out;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.navbar-user-dropdown .dropdown-item {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
    transition: all 0.15s ease-in-out;
}
.navbar-user-dropdown .dropdown-item:hover {
    background-color: #f8fafc;
    color: var(--color-secondary);
    padding-left: 1.4rem;
}
.navbar-user-dropdown .dropdown-item.text-danger:hover {
    background-color: #fff1f2;
    color: #e11d48;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Mobile Sidebar & Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-mobile-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
}

/* Global Responsive Rules (Grid, Scroll, Card Padding) */
@media(max-width:991.98px) {
    .sidebar {
        position: fixed;
        left: calc(-1 * var(--sidebar-width));
        width: var(--sidebar-width) !important;
        height: 100vh;
        min-height: 100vh !important;
        box-shadow: 0 8px 30px rgba(15,23,42,0.15);
    }
    body.sidebar-mobile-open .sidebar {
        left: 0;
    }
    .topbar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Sidebar Nav Single-Column Strict Constraint & Active item styles */
.sidebar .nav,
#sidebarNav,
#sidebarNav .nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

.sidebar .nav-link {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sidebar .nav-link.active {
    background-color: rgba(249, 115, 22, 0.12) !important; /* Secondary orange highlight */
    color: var(--color-secondary) !important;
    border-left: 3px solid var(--color-secondary);
}

.sidebar .nav-link:hover {
    color: var(--color-secondary) !important;
    background: rgba(255, 255, 255, 0.05);
}

/* Helper keys */
.kbd{background:#0f172a;color:#fff;padding:.15rem .4rem;border-radius:.35rem;font-size:.8rem}

/* ==========================================================================
   SYSTEM-WIDE CORPORATE UI DESIGN & BRAND POLISH (Strict Consistency)
   ========================================================================== */

/* 1. Clear Typography Contrast (Headers, Titles, Card Headers) */
h1, h2, h3, h4, h5, h6, 
.page-title, .card-title, .modal-title,
.section-title, .title-accent {
    color: var(--color-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    opacity: 1 !important;
}

.text-muted, .text-muted-80 {
    color: #475569 !important; /* Slightly darker for higher contrast and legibility */
}

/* Topbar Header Title Contrast */
.topbar .badge {
    font-size: 0.8rem !important;
    letter-spacing: 0.03em;
}

/* 2. Global Strict Table Header Formatting */
.table, table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table thead th, 
table thead th,
.table-responsive table thead th,
#queryTable thead th,
.pos-layout table thead th,
.grv-section table thead th {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 2px solid rgba(0,0,0,0.1) !important;
    text-align: left;
    vertical-align: middle !important;
}

/* 3. Global Premium Button Consistency */
.btn {
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    padding: 0.5rem 1.1rem !important;
    border-radius: var(--border-radius-base) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.btn:active {
    transform: scale(0.98);
}

/* Primary Button: Deep Teal */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 61, 61, 0.2) !important;
}

/* Secondary / Highlight Button: Active Orange */
.btn-secondary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: #ffffff !important;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-secondary-hover) !important;
    border-color: var(--color-secondary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2) !important;
}

/* Success Button: Clean Emerald */
.btn-success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

/* Danger Button: Corporate Ruby */
.btn-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

/* Warning Button: High Legibility Honey */
.btn-warning {
    background-color: #eab308 !important;
    border-color: #eab308 !important;
    color: #0f172a !important;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #ca8a04 !important;
    border-color: #ca8a04 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.2) !important;
}

/* Info Button: Azure Blue */
.btn-info {
    background-color: #06b6d4 !important;
    border-color: #06b6d4 !important;
    color: #ffffff !important;
}
.btn-info:hover, .btn-info:focus {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
    color: #ffffff !important;
}

/* Light / Ghost Button styling to prevent unreadable white buttons */
.btn-light, .btn-white {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
.btn-light:hover, .btn-white:hover {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Disabled state handling */
.btn:disabled, .btn.disabled {
    opacity: 0.65 !important;
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Outline Buttons */
.btn-outline-primary {
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.btn-outline-secondary {
    border: 2px solid var(--color-secondary) !important;
    color: var(--color-secondary) !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover {
    background-color: var(--color-secondary) !important;
    color: #ffffff !important;
}

/* Standardize Card actions and filters bar */
.card-actions .btn,
.filter-bar .btn,
.modal-footer .btn {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.85rem !important;
}