*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Main layout - Flex container for sidebar + content */
body{
display:flex;  
background:#f5f5f5;
overflow-x: hidden;
min-height:100vh;
}

/* Login Page Styles */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background:  #2c3e50;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.login-container {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.login-logo {
    width: 80px;
    height: auto;
    margin-bottom: 20px;
} 

.login-form h1 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.login-form p {
    margin-bottom: 30px;
    color: #7f8c8d;
}

.login-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login-form input {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.login-form button {
    padding: 12px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.login-form button:hover {
    background: rgba(24, 119, 201, 0.82);
}

/* ========================================
   SIDEBAR & NAVIGATION - Left navigation menu
   ======================================== */
/* Logo styling in sidebar */
.logo{
    width:80px;
    height:auto;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 8px;
    display: block;
}

/* Sidebar title/brand name */
.title{
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
}

/* Hamburger */
.menu-toggle{
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

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

.sidebar-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

/* SIDEBAR NAVIGATION - Fixed left panel with menu links */
.sidebar{
  width: 250px;  /* Sidebar width */
  height: 100vh;  /* Full viewport height */
  background: linear-gradient(180deg, var(--nav-bg-start, #12263a) 0%, var(--nav-bg-end, #1a3a52) 100%);
  color: var(--nav-text, #ffffff);
  padding-top: 20px;
  transition: 0.6s;  /* Smooth animation for collapse/expand */
  flex-shrink: 0;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Sidebar title/brand */
.sidebar h2{
  text-align: center;
  margin-bottom: 20px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
}

/* Menu list styling */
.sidebar ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Menu list items */
.sidebar ul li{
  padding: 0;
  margin: 0;
}

/* Menu links - Navigation items in sidebar */
.sidebar ul li a{
  display: block;
  padding: 11px 16px;
  color: var(--nav-link, #b3d9ff);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  margin: 4px 8px;
}

/* Menu link hover effect - Highlight when hovered */
.sidebar ul li a:hover{
  background: var(--nav-active-bg, rgba(24, 119, 201, 0.92));
  color: #ffffff;
  transform: translateX(4px);
}

/* .sidebar ul li.active a{
  background: #1abc9c;  dup
} */

/* COLLAPSED SIDEBAR */
/* COLLAPSED SIDEBAR - Mobile/small screen sidebar state */
/* Hide text and shrink sidebar when collapsed */
.sidebar.collapsed{
    width: 70px;
}

/* Hide text when collapsed */
.sidebar.collapsed .title,
.sidebar.collapsed ul li a{
    display: none;
}

/* Hide sidebar groups when collapsed */
.sidebar.collapsed .sidebar-group-toggle span:first-child {
    display: none;
}

/* Center logo when collapsed */
.sidebar.collapsed .logo{
    width: 40px;
}

/*Main - User Layout*/
/* MAIN CONTENT AREA - Right side flex container for page content */
/* .userAdmin{
flex:1;
padding:30px;
}

.userAdmin h1{
margin-bottom:10px;
}

.userAdmin p{
margin-bottom:20px;
color:#474747;
}

/* TABLE */
/* .userTable {
width: 100%;
border-collapse:collapse;
background:white;
table-layout: auto;
}

.userTable th{
background:#1abc9c;
color:white;
padding: 13px;
text-align:left;
}

.userTable td{
padding:12px;
border-bottom:1px solid #ddd;
}

.userTable {
        font-size: 12px;
    }

    .userTable th,
    .userTable td {
        padding: 8px;
    }
.userTable {
        font-size: 11px;
        width: 100%;
        display: block;
        overflow-x: auto;
    }

    .userTable thead {
        display: none;
    }

    .userTable tbody {
        display: block;
    }

    .userTable tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
    }

    .userTable td {
        display: block;
        padding: 8px;
        text-align: right;
        border: none;
        border-bottom: 1px solid #eee;
    }

    .userTable td:before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        color: #1abc9c;
    }

    .userTable td:last-child {
        border-bottom: none;
    }
.userTable-section {
    margin-bottom: 30px;
}

.userTable-section h2 {
    margin-bottom: 15px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}
 */
/* end */

/* USER TABLE - Displays users/products/inventory data */
.userTable {
width: 100%;
border-collapse:collapse;
background:white;
table-layout: auto;
}

.userTable th{
background:#1abc9c;
color:white;
padding: 13px;
text-align:left;
/* Header cells - Green background with white text for visibility */
}

/* Table data cells - Standard padding with bottom border for row separation */
.userTable td{
padding:12px;
border-bottom:1px solid #ddd;
}

/* ========================================
   STATUS BADGES - Inline status indicators
   ======================================== */
/* STATUS - Colored badge for active/inactive state */
.status {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  color: white;
  text-align: center;
  display: inline-block;
}

.status.active {
  background: #28a745; /* green */
}

.status.inactive {
  background: #d42626; /* red */
}

/*Add user - admin*/
/* .form-container block removed to avoid duplication; enhanced block defined later */

.form-container input,
.form-container select{
width:100%;
padding:8px;
margin-bottom:10px;
border:1px solid #ccc;
}

.form-container button{
padding:8px 15px;
border:none;
background:#2c3e50;
color:white;
cursor:pointer;
border-radius:4px;
transition:background 0.3s;
}

.form-container button:hover{
background:rgba(24, 119, 201, 0.82);
}

/* Admin - User Management Messages and Status Buttons */
.message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}

.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-btn {
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.activate-btn {
    background-color: #28a745;
    color: white;
}

.deactivate-btn {
    background-color: #dc3545;
    color: white;
}

/* ========================================
   FORMS - Input fields and form layouts
   ======================================== */
/* FORM CONTAINER - Main wrapper for all forms, contains labels/inputs/buttons */
/* Uses 3-column grid layout: labels span full width, inputs fill 2 cols, button in col 3 */
.form-container {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.form-container h2 {
    margin-bottom: 15px;
    margin-top: 0;
}

.form-container form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: end;
}

.form-container label {
    grid-column: 1 / -1;
    font-weight: 700;
    margin-bottom: 0px;/* if some label got messed up put -8px  */
    display: block;
    font-size: 13px;
    /* Make label span full width; bold for emphasis */
}

/* Form inputs (text, select) - Styled with gray border and rounded corners */
.form-container input, .form-container select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 100%;
    font-size: 13px;
}

/* Form submit button - Green button on right side, spans full column width */
.form-container button {
    padding: 10px 20px;
    background-color: #2c3e50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    grid-column: 3;
    width: 100%;
    font-size: 13px;
    height: fit-content;
    margin-top: 22px;
}

.form-container button:hover {
    background-color: rgba(24, 119, 201, 0.82);
}

/* Products Table Scrollbar */
.products-table-wrapper {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 40px;
}

/* Alert Container */
.alert-container {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

.alert-container h2 {
    color: #856404;
    margin-bottom: 10px;
}

.alert-container ul {
    list-style: none;
    padding: 0;
}

.alert-container li {
    color: #856404;
    margin-bottom: 5px;
}

.alert-warning {
    background: #fff1f0;
    border: 1px solid #f5c2c7;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    color: #842029;
}

.near-expiration td {
    background-color: rgba(255, 235, 205, 0.75);
}

.expired td {
    background-color: rgba(255, 205, 210, 0.9);
}

/* Dashboard Cards */
.dashboard-cards {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    flex: 1;
    text-align: center;
}

.card h3 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.card p {
    margin-bottom: 15px;
    color: #7f8c8d;
}

.card a {
    display: inline-block;
    padding: 10px 20px;
    background: #1abc9c;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.card a:hover {
    background: #16a085;
}

/* ========================================
   POS - POINT OF SALE SYSTEM
   ======================================== */
/* POS layout - Products on left, checkout sidebar on right */
/* PRODUCTS-CHECKOUT LAYOUT - Main container for POS */
.pos-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    min-height: calc(100vh - 160px);
}

.products-section {
    flex: 1 1 0;
    min-width: 0;
}

.cart-section {
    flex: 0 0 380px;
    max-width: 380px;
    min-width: 320px;
    position: sticky;
    top: 30px;
    align-self: flex-start;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.category-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tab-button {
    padding: 10px 15px;
    background: #ecf0f1;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.tab-button.active {
    background: #3498db;
    color: white;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    background: white;
}

.product-card h3 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.product-card p {
    font-size: 18px;
    font-weight: 700;
    color: #27ae60;
    margin-bottom: 10px;
}

.product-card button {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.product-card button:hover {
    background: #2980b9;
}

.cart-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.checkout-sidebar {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.checkout-sidebar h2 {
    margin-bottom: 20px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

#cart-items {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    min-height: 100px;
}

/* ========================================
   CART DISPLAY - Shopping cart items and layout
   ======================================== */
/* CART ITEM - Individual product line in shopping cart */
/* Shows product name, quantity, unit price, total, and discount */
.cart-item {
    background: #f9f9f9;
    border: 1px solid #ecf0f1;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Product name on left, quantity badge on right */
}

/* Item name with bold styling for product identification */
.item-name {
    font-weight: 700;
    color: #2c3e50;
    flex: 1;
}

/* Quantity badge - Blue pill-shaped display of item quantity */
.item-qty {
    background: #3498db;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    min-width: 32px;
    justify-content: center;
}

.qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-qty {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: #3498db;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-qty:hover {
    background: #2573b4;
}

/* Prices breakdown in cart item - Shows unit price and total */
.item-prices {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Row displaying unit price or total price with 2-column layout */
.item-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
}

/* Discount display - Green bold text to highlight savings */
.item-discount {
    color: #27ae60;
    font-weight: 700;
}

/* Cart item control buttons - Remove button row at bottom */
.cart-item-controls {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    border-top: 1px solid #ecf0f1;
    padding-top: 10px;
}

/* Remove button - Red button to delete item from cart */
.btn-remove {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    flex: 1;
}

.btn-remove:hover {
    background: #c0392b;
}

/* ========================================
   CHECKOUT OPTIONS - Discount and payment preferences
   ======================================== */
/* DISCOUNT SECTION - Options for Retail/Wholesale/Sack discounts */
.discount-section {
    background: #ecf0f1;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    /* Light gray background to visually separate discount options */
}

.discount-section label {
    display: block;
    margin: 8px 0;
    font-size: 14px;
}

.discount-section input {
    margin-right: 5px;
}

/* ========================================
   CHECKOUT SUMMARY - Total calculations and payment info
   ======================================== */
/* CHECKOUT SUMMARY - Box showing subtotal, discounts, and cart total */
.checkout-summary {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

/* Summary row - Single line showing label and amount (e.g., "Subtotal: ₱500") */
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}

/* Highlight right-side amount in bold dark color */
.summary-row span:last-child {
    font-weight: 700;
    color: #2c3e50;
}

/* Total row - Bold, larger, with top border separator and green color */
.summary-row.total-row {
    border-top: 2px solid #3498db;
    padding-top: 10px;
    margin-top: 10px;
    font-size: 18px;
    color: #27ae60;
}

#cart-total {
    font-size: 18px;
    font-weight: 700;
    color: #27ae60;
}

/* ========================================
   CART BUTTONS - Confirm/Cancel transaction buttons
   ======================================== */
/* CART BUTTONS - Flex column layout for stacked button display */
.cart-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* CANCEL BUTTON - Gray button to clear cart and abort transaction */
.btn-cancel {
    background: #95a5a6;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.btn-cancel:hover {
    background: #7f8c8d;
}

/* CONFIRM BUTTON - Green button to proceed to payment/transaction modal */
.btn-confirm {
    background: #27ae60;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.btn-confirm:hover:not(:disabled) {
    background: #229954;
}

/* Disabled state - Gray out button when cart is empty or validation fails */
.btn-confirm:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

.product-price {
    font-size: 16px;
    font-weight: 700;
    color: #27ae60;
}

.product-subcategory {
    font-size: 12px;
    color: #7f8c8d;
    font-style: italic;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

/* ========================================
   MODALS - Pop-up dialogs and forms
   ======================================== */
/* Start Day Modal - Full screen overlay for opening cash input */
.modal.modal-start {
    display: flex !important;  /* Force display for start modal */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 85%;
    max-width: 450px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.modal-content-start {
    margin: 0;
    text-align: center;
}

.modal-content-start h2 {
    margin-bottom: 10px;
    font-size: 28px;
    color: #2c3e50;
}

.modal-content-start p {
    margin-bottom: 25px;
    color: #7f8c8d;
    font-size: 16px;
}

.modal-content-start form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-content-start label {
    text-align: left;
    font-weight: 700;
    color: #2c3e50;
}

.modal-content-start input {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.modal-content-start button {
    padding: 12px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
}

.modal-content-start button:hover {
    background: #229954;
}

/* MODAL TRANSACTION - Modal variant for payment details (max-width constraint) */
.modal-transaction {
    max-width: 480px;
}

/* TRANSACTION DETAILS - Box containing order total and payment inputs */
.transaction-details {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
    /* Light background for payment info section */
}

.transaction-details p {
    margin: 15px 0;
    font-size: 16px;
    /* Display order total and change amount */
}

/* Label for payment input fields - Bold and left-aligned */
.transaction-details label {
    display: block;
    margin-top: 15px;
    margin-bottom: 8px;
    font-weight: 700;
}

/* Payment input field - Full width for amount received entry */
.transaction-details input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* CLOSE BUTTON - X icon to dismiss modal */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    /* Gray by default, darkens on hover */
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

.modal-content h2 {
    margin: 0 0 20px 0;
}

.modal-content p {
    margin: 10px 0;
}

.modal-content input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.modal-content button {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    margin-top: 10px;
}

.modal-content button:hover {
    background: #229954;
}

.btn-confirm-trans {
    background: #27ae60 !important;
    color: white !important;
}

.btn-confirm-trans:hover {
    background: #229954 !important;
}

/* Shift Header */
.shift-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e8f8f5;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 5px solid #27ae60;
}

/* END SHIFT BUTTON - Red button in shift header to close day and reconcile cash */
.btn-end-shift {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}

.btn-end-shift:hover {
    background: #c0392b;
}

/* ========================================
   RESPONSIVE DESIGN - Media Queries
   ========================================
   Tablet View: 768px and below
   Mobile View: 480px and below
   Desktop: 1200px and above
   ======================================== */

/* TABLET LAYOUT - 768px and below */
/* Adjust grid, fonts, and spacing for medium screens */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        display: none;
        padding-top: 10px;
        flex-direction: column;
    }

    .sidebar.collapsed {
        display: flex;
    }

    .sidebar h2 {
        display: none;
    }

    .sidebar ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .sidebar ul li a {
        padding: 10px 15px;
        font-size: 14px;
    }

    .userAdmin {
        padding: 15px;
        width: 100%;
        flex: 1;
    }

    .userAdmin h1 {
        font-size: 24px;
    }

    .dashboard-cards {
        flex-direction: column;
        gap: 15px;
    }

    .card {
        padding: 15px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .product-card {
        padding: 10px;
    }

    .login-container {
        width: 90%;
        padding: 30px 20px;
    }

    .userTable {
        font-size: 12px;
    }

    .userTable th,
    .userTable td {
        padding: 8px;
    }
}

/* MOBILE LAYOUT - 480px and below */
/* Sidebar becomes fixed overlay, products become smaller, layout single-column */
@media (max-width: 480px) {
    body {
        flex-direction: column;
        height: 100vh;
    }

    .sidebar {
        position: absolute;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100vh;
        background: #2c3e50;
        transition: left 0.3s;
        z-index: 999;
        padding-top: 60px;
    }

    .sidebar.collapsed {
        left: 0;
    }

    .sidebar h2 {
        display: block;
        margin-bottom: 20px;
    }

    .sidebar ul {
        flex-direction: column;
    }

    .sidebar ul li a {
        padding: 12px 15px;
        font-size: 14px;
    }

    .menu-toggle {
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1000;
    }

    .userAdmin {
        width: 100%;
        padding: 15px;
        padding-top: 50px;
    }

    .userAdmin h1 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .userAdmin p {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .form-container {
        padding: 15px;
        margin-top: 15px;
    }

    .form-container h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .form-container form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .form-container label {
        margin-bottom: 3px;
    }

    .form-container input,
    .form-container select {
        width: 100%;
        padding: 10px;
        margin-bottom: 0;
        font-size: 14px;
    }

    .form-container button {
        padding: 10px;
        font-size: 14px;
        width: 100%;
        grid-column: auto;
        margin-top: 0;
    }

    .products-table-wrapper {
        max-height: 250px;
        overflow-y: auto;
    }

    .userTable {
        font-size: 11px;
        width: 100%;
        display: block;
        overflow-x: auto;
    }

    .userTable thead {
        display: none;
    }

    .userTable tbody {
        display: block;
    }

    .userTable tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
    }

    .userTable td {
        display: block;
        padding: 8px;
        text-align: right;
        border: none;
        border-bottom: 1px solid #eee;
    }

    .userTable td:before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        color: #1abc9c;
    }

    .userTable td:last-child {
        border-bottom: none;
    }

    .dashboard-cards {
        flex-direction: column;
        gap: 10px;
    }

    .card {
        padding: 12px;
    }

    .card h3 {
        font-size: 16px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .product-card {
        padding: 8px;
    }

    .product-card h3 {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .product-card p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .product-card button {
        padding: 6px 10px;
        font-size: 12px;
    }

    .pos-container {
        flex-direction: column;
        gap: 10px;
    }

    .products-section,
    .cart-section {
        min-width: 100%;
    }

    .cart-section {
        padding: 12px;
    }

    #cart-total {
        font-size: 18px;
    }

    #process-sale-btn {
        width: 100%;
        padding: 12px;
    }

    .login-container {
        width: 95%;
        padding: 20px;
        max-width: 100%;
    }

    .login-container h1 {
        font-size: 22px;
    }

    .login-form input {
        padding: 10px;
        font-size: 14px;
    }

    .login-form button {
        padding: 10px;
        font-size: 14px;
    }
}

/* Large Desktop (1200px and above) */
@media (min-width: 1200px) {
    .userAdmin {
        padding: 40px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .form-container form {
        max-width: 500px;
    }
}

/* DISABLED PROCESS SALE BUTTON - Gray out when cart empty or invalid */
#process-sale-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

/* Search and Filter Styles */
.search-filter-container {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 200px;
    align-items: center;
}

.search-box input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.search-box input:focus {
    outline: none;
    border-color: #1abc9c;
    box-shadow: 0 0 5px rgba(26, 188, 156, 0.3);
}

.filter-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background-color: white;
    cursor: pointer;
}

.filter-select:focus {
    outline: none;
    border-color: #1abc9c;
    box-shadow: 0 0 5px rgba(26, 188, 156, 0.3);
}

.filter-label {
    font-weight: 700;
    color: #2c3e50;
    white-space: nowrap;
}

.primary-button {
    padding: 10px 18px;
    margin-bottom: 20px;
    background-color: #1abc9c;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.primary-button:hover {
    background-color: #16a085;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 15px;
}

.popup-content {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.popup-content .form-container {
    margin: 0;
    border-radius: 0;
}

.popup-content .form-container button {
    margin-right: 10px;
}

/* others style add new product  */
#customCategoryField, #customSupplierField {
    margin-bottom: 10px;
}

/* ===== SALES REPORT STYLES ===== */
.report-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* .sales-filters .filter-btn{
  color:inherit;  
} */

.filter-btn {
    padding: 10px 20px;
    border: 2px solid #ddd;
    background: white;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
    color:inherit
}

.filter-btn.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.filter-btn:hover {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.report-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.report-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.report-card h3 {
    margin: 0 0 10px 0;
    color: #7f8c8d;
    font-size: 14px;
    text-transform: uppercase;
}

.report-card .value {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
}

.userTable-section {
    margin-bottom: 30px;
}

.userTable-section h2 {
    margin-bottom: 15px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

.sales-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sales-table th {
    background: #34495e;
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 700;
}

.sales-table td {
    padding: 12px;
    border-bottom: 1px solid #ecf0f1;
}

.sales-table tr:hover {
    background: #f9f9f9;
}

.print-btn {
    background: #1c3a57;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 14px;
}

.print-btn:hover {
    background: #12263a;
}

@media print {
    .report-filters, .print-btn, .menu-toggle, .sidebar {
        display: none;
    }
    .userAdmin {
        padding: 20px;
    }
}

/* stock color legends */
/* .Legend::before {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
} */

.box {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    background-color: #000;
}
.red {
    background-color: rgba(255, 17, 0, 0.38); /* semi-transparent red */
}

.yellow {
    background-color: rgba(229, 255, 0, 0.43); /* semi-transparent yellow */
}



/* Stock status colors */
.low-stock {
    background-color: rgba(255, 17, 0, 0.38); /* semi-transparent red */
    /* color: #b30000; */
}

.medium-stock {
    background-color: rgba(229, 255, 0, 0.43); /* semi-transparent yellow */
    /* color: #665c00; */
}

/* ========================================
   UI REFRESH OVERRIDES
   ======================================== */
:root {
    --ui-bg: #f3f7fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fbff;
    --ui-border: #d8e3f0;
    --ui-text: #1d2b3a;
    --ui-muted: #5a6a7d;
    --ui-primary: #1877c9;
    --ui-primary-strong: #0f5f9d;
    --ui-accent: #17a874;
    --ui-shadow: 0 10px 26px rgba(18, 43, 70, 0.08);
    --nav-bg-start: #12263a;
    --nav-bg-end: #1c3a57;
    --nav-text: #f4f8fe;
    --nav-link: #eaf2fb;
    --nav-active-bg: rgba(24, 119, 201, 0.82);
}

/* body {
    background: linear-gradient(180deg, #f2f7fc 0%, #eef3f9 100%);
    color: var(--ui-text);
} */

.sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    padding: 20px 14px;
    background: linear-gradient(180deg, var(--nav-bg-start, #12263a) 0%, var(--nav-bg-end, #1a3a52) 100%);
    border-right: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 24px rgba(8, 24, 41, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.sidebar .title {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--nav-text);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sidebar .logo {
    margin: 14px auto 18px;
    display: block;
    width: 72px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 8px;
    transition: 0.2s;
}

.sidebar .logo:hover {
    background: rgba(255, 255, 255, 0.12);
}

.sidebar ul li {
    margin-bottom: 6px;
}

.sidebar ul li a {
    border-radius: 8px;
    font-weight: 600;
    padding: 11px 14px;
    color: var(--nav-link);
    font-size: 14px;
    transition: all 0.2s ease;
    margin: 2px 4px;
    display: block;
}

.sidebar ul li a:hover,
.sidebar ul li.active a {
    background: var(--nav-active-bg);
    color: #ffffff;
    transform: translateX(3px);
}

/* Section headers in sidebar */
.sidebar ul li.menu-section {
    padding: 14px 16px 8px 16px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 12px 8px 6px 8px;
    display: block;
    line-height: 1;
}

.menu-toggle {
    border-radius: 10px;
    width: 36px;
    height: 36px;
    left: 12px;
    top: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.userAdmin {
    flex: 1;
    padding: 28px;
    min-width: 0;
}

.userAdmin h1 {
    font-size: 1.85rem;
    margin-bottom: 8px;
    color: var(--ui-text);
}

.userAdmin p {
    margin-bottom: 20px;
    color: var(--ui-muted);
}

.message {
    border-radius: 10px;
    box-shadow: var(--ui-shadow);
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: var(--ui-shadow);
    padding: 18px;
}

.card h3 {
    margin-bottom: 10px;
    color: #143a5f;
}

.card p {
    color: var(--ui-muted);
    margin-bottom: 14px;
}

.card a {
    display: inline-block;
    background: var(--ui-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    padding: 9px 12px;
    font-weight: 600;
}

.card a:hover {
    background: var(--ui-primary-strong);
}

.user-table-wrapper {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: var(--ui-shadow);
    overflow: auto;
}

.userTable,
.sales-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    background: transparent;
}

.userTable th,
.sales-table th {
    background: #143a5f;
    color: #fff;
    padding: 13px 12px;
    font-size: 0.9rem;
    border: none;
}

.userTable td,
.sales-table td {
    padding: 12px;
    border-bottom: 1px solid #e5edf7;
    vertical-align: top;
}

.userTable tr:hover,
.sales-table tr:hover {
    background: #f5f9ff;
}

.form-container,
.report-card,
.table-section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: var(--ui-shadow);
}

.form-container {
    padding: 18px;
    margin-top: 20px;
}

.search-filter-container {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
    box-shadow: var(--ui-shadow);
}

.search-box input,
.filter-select,
input[type="date"],
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
select {
    border: 1px solid #c5d5e6;
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
}

.primary-button,
.filter-btn,
.print-btn,
.btn-confirm,
.btn-cancel,
.btn-end-shift,
.btn-confirm-trans {
    border-radius: 8px;
    border: none;
    font-weight: 600;
}

.primary-button,
.btn-confirm,
.btn-confirm-trans {
    background: var(--ui-primary);
    color: #fff;
}

.primary-button:hover,
.btn-confirm:hover,
.btn-confirm-trans:hover {
    background: var(--ui-primary-strong);
}

.btn-cancel {
    background: #dfe8f2;
    color: #24425f;
}

.btn-cancel:hover {
    background: #cedaea;
}

.report-card .value {
    color: #123656;
}

.table-section {
    margin: 18px 0;
    padding: 14px;
}

.table-section h2 {
    margin-bottom: 12px;
    color: #143a5f;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.stat-card {
    background: linear-gradient(145deg, #ffffff 0%, #f5f9ff 100%);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--ui-shadow);
}

.stat-card .label {
    color: var(--ui-muted);
    font-size: 0.88rem;
}

.stat-card .value {
    font-size: 1.45rem;
    color: #133a5f;
    font-weight: 700;
    margin-top: 6px;
}

.chip {
    display: inline-block;
    background: #e3efff;
    border: 1px solid #c6ddff;
    color: #0f4f86;
    font-size: 0.78rem;
    border-radius: 999px;
    padding: 4px 10px;
}

@media (max-width: 900px) {
    .sidebar {
        width: 250px;
    }

    .sidebar.collapsed {
        width: 72px;
    }

    .userAdmin {
        padding: 20px 14px 24px;
    }
}

/* ========================================
   POS + FORM UX TUNING
   ======================================== */
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.secondary-button {
    background: #eef3f9 !important;
    color: #1d3e5d !important;
    border: 1px solid #c8d8ea !important;
}

.secondary-button:hover {
    background: #dfe9f3 !important;
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.dot-low { background: #f1c40f; }
.dot-out { background: #e74c3c; }
.dot-ok { background: #2ecc71; }

/* Batch Status Indicators */
.status-expired {
    color: #e74c3c;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(231, 76, 60, 0.1);
}

.status-expiring-soon {
    color: #f39c12;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(243, 156, 18, 0.1);
}

.status-valid {
    color: #27ae60;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(39, 174, 96, 0.1);
}

.status-archived {
    color: #95a5a6;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(149, 165, 166, 0.1);
}

/* Action Buttons */
.action-btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
    margin-right: 5px;
}

.action-btn:hover {
    background-color: #2980b9;
}

.action-btn-small {
    padding: 6px 10px;
    font-size: 0.8rem;
    background-color: #e74c3c;
    margin-right: 3px;
}

.action-btn-small:hover {
    background-color: #c0392b;
}

/* Large Modal Styling for Batch Details */
.popup-overlay-large {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    padding: 15px;
}

.popup-overlay-large[style*="flex"] {
    display: flex !important;
}

.popup-content-large {
    width: 90%;
    max-width: 1200px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.batch-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid #ecf0f1;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.batch-details-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #2c3e50;
}

.close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #7f8c8d;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background-color: #ecf0f1;
    color: #e74c3c;
}

.batch-table-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.batch-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.batch-table thead {
    background: #34495e;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.batch-table th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
}

.batch-table tbody tr {
    border-bottom: 1px solid #ecf0f1;
    transition: background-color 0.2s ease;
}

.batch-table tbody tr:hover {
    background-color: #f8f9fa;
}

.batch-table td {
    padding: 12px;
    font-size: 0.9rem;
    color: #2c3e50;
}

.popup-content-large .form-actions {
    padding: 15px 20px;
    border-top: 1px solid #ecf0f1;
    background: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Stock History Filter Styles */
.stock-history-filters {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #ecf0f1;
}

.history-filter-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.history-filter-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.history-filter-item label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2c3e50;
}

.history-filter-item input,
.history-filter-item select {
    padding: 8px 12px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    font-size: 0.9rem;
    background: #fff;
}

.history-filter-item input:focus,
.history-filter-item select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

.low-stock,
.medium-stock,
.high-stock {
    background-color: transparent !important;
}

.Legend {
    /* display: inline; */
    gap: 14px;
    margin: 10px 0 14px;
    color: #41556c;
    font-size: 0.9rem;
}

.pos-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.pos-toolbar input {
    width: 260px;
    max-width: 100%;
    border: 1px solid #cad8e6;
    border-radius: 999px;
    padding: 10px 14px;
}

.product-tile {
    border: 1px solid #d8e4f1;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 8px 20px rgba(15, 44, 79, 0.07);
}

.product-tile h3 {
    font-size: 1rem;
}

.product-tile .product-price {
    font-weight: 700;
    color: #0f5f9d;
}

.product-tile button {
    width: 100%;
}

.checkout-sidebar {
    border: 1px solid #d8e4f1;
    border-radius: 12px;
    background: #fff;
}

.checkout-summary .summary-row {
    font-size: 0.96rem;
}

.checkout-summary .total-row {
    border-top: 1px solid #e4edf6;
    padding-top: 10px;
    margin-top: 10px;
    font-weight: 700;
}

/* ========================================
   POS THEME V2 (NAV-INSPIRED)
   ======================================== */
.pos-page {
    background: radial-gradient(circle at top right, #eef5fb 0%, #e7f0f8 45%, #eaf2f9 100%);
}

.pos-page .shift-header {
    background: linear-gradient(135deg, #12314e 0%, #1b466c 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    color: #eaf4ff;
    box-shadow: 0 10px 24px rgba(10, 34, 58, 0.22);
}

.pos-page .shift-status {
    color: #d8ffe9;
    font-weight: 700;
    letter-spacing: 0.1px;
}

.pos-page .btn-end-shift {
    background: #f39c12;
    color: #11263b;
    font-weight: 700;
}

.pos-page .pos-container {
    gap: 16px;
}

.pos-page .products-section {
    background: linear-gradient(160deg, #f9fcff 0%, #eef4fb 100%);
    border: 1px solid #ccdaea;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 14px 32px rgba(17, 48, 78, 0.1);
}

.pos-page .pos-toolbar h2 {
    color: #12314e;
    font-size: 1.35rem;
}

.pos-page .pos-toolbar input {
    border: 1px solid #9eb6cc;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(18, 49, 78, 0.06);
}

.pos-page .category-tabs {
    background: #dce9f5;
    border-radius: 12px;
    padding: 8px;
    gap: 8px;
}

.pos-page .tab-button {
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    background: #f6faff;
    color: #2c4661;
    padding: 9px 14px;
}

.pos-page .tab-button.active {
    background: linear-gradient(135deg, #143a5f 0%, #1f547f 100%);
    border-color: #12314e;
    color: #ffffff;
}

.pos-page .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.pos-page .product-tile {
    border: 1px solid #c6d7e9;
    border-radius: 12px;
    background: #ffffff;
    padding: 12px 11px;
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pos-page .product-tile:hover {
    transform: translateY(-2px);
    border-color: #8fb1d3;
    box-shadow: 0 10px 20px rgba(22, 56, 88, 0.14);
}

.pos-page .product-tile h3 {
    color: #12314e;
    font-size: 0.98rem;
    line-height: 1.35;
    margin-bottom: 7px;
}

.pos-page .product-tile p {
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 5px;
    color: #4b6178;
}

.pos-page .product-tile .product-price {
    color: #0f6f6a;
    font-size: 1rem;
    font-weight: 800;
}

.pos-page .product-tile button {
    margin-top: 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, #138f7a 0%, #0e7b68 100%);
    font-weight: 700;
}

.pos-page .product-tile button:hover {
    background: linear-gradient(135deg, #0f7c69 0%, #0a6657 100%);
}

.pos-page .checkout-sidebar {
    background: linear-gradient(180deg, #f7fbff 0%, #edf5fc 100%);
    border: 1px solid #c6d7e8;
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(13, 44, 73, 0.15);
    padding: 14px;
}

.pos-page .checkout-sidebar h2 {
    color: #12314e;
    margin-bottom: 12px;
    border-bottom: 2px solid #c9d9ea;
}

.pos-page #cart-items {
    background: #ffffff;
    border: 1px solid #d3e0ee;
    border-radius: 10px;
    padding: 10px;
}

.pos-page .cart-item {
    background: #f7fbff;
    border: 1px solid #d7e4f2;
    border-radius: 8px;
}

.pos-page .item-qty {
    background: #1c5b8c;
}

.pos-page .discount-section {
    background: #deebf8;
    border: 1px solid #c7d7e8;
}

.pos-page .checkout-summary {
    background: #ffffff;
    border: 1px solid #cfdeed;
    border-radius: 10px;
}

.pos-page .cart-buttons {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
}

.pos-page .btn-cancel {
    background: #e8eef5;
    color: #2c4661;
    border: 1px solid #ccd9e7;
    font-weight: 700;
}

.pos-page .btn-cancel:hover {
    background: #dce7f2;
}

.pos-page .btn-confirm {
    background: linear-gradient(135deg, #123a5f 0%, #1f5b8b 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.pos-page .btn-confirm:hover:not(:disabled) {
    background: linear-gradient(135deg, #0f314f 0%, #1a4e77 100%);
}

.pos-page .btn-confirm:disabled {
    background: #9fb3c6;
}

@media (max-width: 768px) {
    .pos-page .products-section,
    .pos-page .checkout-sidebar {
        padding: 12px;
    }

    .pos-page .cart-buttons {
        grid-template-columns: 1fr;
    }
}

.sidebar-group {
    margin-bottom: 8px;
}

.sidebar-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
    margin: 12px 8px 6px 8px;
    text-transform: uppercase;
}

.sidebar-group-toggle:hover {
    background: var(--nav-active-bg);
    color: #ffffff;
}

.sidebar-submenu,
.sidebar-footer {
    list-style: none;
    margin: 0;
    padding: 0 0 0 8px;
}

.sidebar-group:not(.open) .sidebar-submenu {
    display: none;
}

.sidebar-group.open .caret {
    transform: rotate(180deg);
}

.caret {
    transition: transform 0.2s ease;
}

.sidebar-submenu li a {
    font-size: 13px;
    font-weight: 500;
    padding: 9px 16px;
    margin: 3px 8px;
}

.sidebar-submenu li.active a,
.sidebar-footer li a:hover {
    font-weight: 700;
    background: var(--nav-active-bg);
    color: #ffffff;
}

.out-of-stock {
    opacity: 0.55;
}

.analytics-grid,
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin: 18px 0;
}

.promo-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface-soft);
    margin-bottom: 12px;
}

.promo-pill {
    background: rgba(24, 119, 201, 0.12);
    color: #0f5f9d;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ui-text);
}

.inline-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.sidebar-top-link {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}

.sidebar-top-link li a {
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0 8px;
    display: block;
    color: var(--nav-link, #b3d9ff);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.sidebar-top-link li a:hover,
.sidebar-top-link li.active a {
    background: var(--nav-active-bg, rgba(24, 119, 201, 0.92));
    color: #ffffff;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer li a {
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0 8px;
    display: block;
    color: var(--nav-link, #b3d9ff);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.status-text.ok {
    color: #157347;
    font-weight: 700;
}

.status-text.warn {
    color: #b45309;
    font-weight: 700;
}

.health-list {
    margin: 10px 0 0 18px;
}

.mini-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-chart-row {
    display: grid;
    grid-template-columns: 72px 1fr 120px;
    gap: 10px;
    align-items: center;
}

.mini-chart-label,
.mini-chart-value {
    font-size: 12px;
    color: var(--ui-muted);
}

.mini-chart-bar-wrap {
    background: #e6eef7;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.mini-chart-bar {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: #1877c9;
}

.mini-chart-bar.alt {
    background: #17a874;
}