:root{
    --navy:#1B2A41;
    --navy-2:#233B57;
    --slate:#4B5A6A;
    --paper:#F3F4F6;
    --card:#FFFFFF;
    --gold:#B98A34;
    --gold-light:#EFDFC0;
    --green:#2E7D32;
    --red:#B3261E;
    --border:#E1E4E8;
    --text:#1F2937;
    --text-soft:#6B7280;
    --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-display: Georgia, "Times New Roman", Times, serif;
    --font-mono: "Courier New", Courier, monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--font-body);
    background:var(--paper);
    color:var(--text);
    font-size:14px;
  }
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;margin:0;padding:0;}

  /* ===== APP SHELL ===== */
  .app{
    display:grid;
    grid-template-columns:240px 1fr;
    grid-template-rows:56px 1fr;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main";
    min-height:100vh;
  }

  /* ===== SIDEBAR ===== */
  .sidebar{
    grid-area:sidebar;
    background:var(--navy);
    color:#E8ECF1;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
  }
  .brand{
    padding:18px 20px;
    font-family:var(--font-display);
    font-size:22px;
    letter-spacing:0.5px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .brand-mark{
    width:30px;height:30px;
    border:2px solid var(--gold);
    border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);
    font-weight:bold;
    color:var(--gold);
    font-size:15px;
  }
  .brand-sub{
    display:block;
    font-family:var(--font-body);
    font-size:10px;
    letter-spacing:2px;
    color:#9FB0C3;
    margin-top:2px;
  }
  .nav-scroll{
    overflow-y:auto;
    flex:1;
    padding:10px 0 20px;
  }
  .nav-section-title{
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#7D8DA3;
    padding:16px 20px 6px;
  }
  .nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 20px;
    font-size:13.5px;
    color:#D6DDE6;
    cursor:pointer;
    border-left:3px solid transparent;
  }
  .nav-item:hover{background:rgba(255,255,255,0.04);}
  .nav-item.active{
    background:rgba(185,138,52,0.12);
    border-left:3px solid var(--gold);
    color:#fff;
    font-weight:bold;
  }
  .nav-icon{
    width:18px;text-align:center;
    color:var(--gold);
    font-family:var(--font-display);
    font-size:13px;
  }
  .nav-badge{
    margin-left:auto;
    background:var(--gold);
    color:#1B2A41;
    font-size:10px;
    font-weight:bold;
    padding:1px 6px;
    border-radius:10px;
  }

  /* ===== TOPBAR ===== */
  .topbar{
    grid-area:topbar;
    background:var(--card);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
  }
  .page-title{
    font-family:var(--font-display);
    font-size:18px;
    color:var(--navy);
  }
  .topbar-right{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .search-box{
    border:1px solid var(--border);
    border-radius:4px;
    padding:6px 10px;
    font-size:13px;
    width:220px;
    color:var(--text-soft);
    background:var(--paper);
  }
  .user-chip{
    display:flex;align-items:center;gap:8px;
    font-size:13px;
  }
  .avatar{
    width:30px;height:30px;border-radius:50%;
    background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);
    font-size:13px;
  }

  /* ===== MAIN ===== */
  main{
    grid-area:main;
    padding:24px;
    overflow-y:auto;
    max-height:calc(100vh - 56px);
  }
  .view{display:none;}
  .view.active{display:block;}

  .breadcrumb{
    font-size:12px;
    color:var(--text-soft);
    margin-bottom:16px;
  }

  /* ===== CARDS / GRID (Dashboard) ===== */
  .stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:24px;
  }
  .stat-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:6px;
    padding:16px 18px;
    border-top:3px solid var(--gold);
  }
  .stat-label{
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--text-soft);
    margin-bottom:8px;
  }
  .stat-value{
    font-family:var(--font-display);
    font-size:26px;
    color:var(--navy);
  }
  .stat-delta{
    font-size:12px;
    margin-top:6px;
  }
  .stat-delta.up{color:var(--green);}
  .stat-delta.down{color:var(--red);}

  .panel-row{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:16px;
  }
  .panel{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:6px;
    padding:18px 20px;
  }
  .panel h3{
    font-family:var(--font-display);
    font-size:16px;
    color:var(--navy);
    margin:0 0 14px;
    border-bottom:1px solid var(--border);
    padding-bottom:10px;
  }
  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{
    text-align:left;
    text-transform:uppercase;
    font-size:10.5px;
    letter-spacing:0.5px;
    color:var(--text-soft);
    padding:8px 6px;
    border-bottom:1px solid var(--border);
  }
  td{
    padding:9px 6px;
    border-bottom:1px solid #F0F1F3;
  }
  .badge{
    font-size:10.5px;
    padding:3px 8px;
    border-radius:10px;
    font-weight:bold;
  }
  .badge.paid{background:#E5F3E6;color:var(--green);}
  .badge.due{background:#FBE8E7;color:var(--red);}
  .low-stock-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #F0F1F3;font-size:13px;}
  .low-stock-row span.qty{color:var(--red);font-weight:bold;}

  /* ===== POS SCREEN ===== */
  .pos-wrap{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:16px;
    height:calc(100vh - 130px);
  }
  .pos-products{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:6px;
    padding:16px;
    display:flex;
    flex-direction:column;
  }
  .pos-cats{
    display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;
  }
  .cat-pill{
    padding:6px 14px;
    border:1px solid var(--border);
    border-radius:20px;
    font-size:12.5px;
    cursor:pointer;
    color:var(--slate);
  }
  .cat-pill.active{background:var(--navy);color:#fff;border-color:var(--navy);}
  .product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    overflow-y:auto;
  }
  .product-card{
    border:1px solid var(--border);
    border-radius:6px;
    padding:12px 10px;
    text-align:center;
    cursor:pointer;
  }
  .product-card:hover{border-color:var(--gold);}
  .product-thumb{
    width:100%;height:60px;
    background:var(--gold-light);
    border-radius:4px;
    margin-bottom:8px;
    display:flex;align-items:center;justify-content:center;
    color:var(--gold);
    font-family:var(--font-display);
    font-size:20px;
  }
  .product-name{font-size:12.5px;font-weight:bold;color:var(--text);}
  .product-price{font-size:12px;color:var(--text-soft);margin-top:3px;}

  .pos-cart{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:6px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .cart-header{
    background:var(--navy);
    color:#fff;
    padding:14px 16px;
    font-family:var(--font-display);
    font-size:15px;
    display:flex;
    justify-content:space-between;
  }
  .cart-items{flex:1;overflow-y:auto;padding:10px 16px;}
  .cart-line{
    display:flex;justify-content:space-between;align-items:center;
    padding:9px 0;border-bottom:1px dashed var(--border);
  }
  .cart-line-name{font-size:13px;font-weight:bold;}
  .cart-line-meta{font-size:11.5px;color:var(--text-soft);}
  .cart-line-price{font-size:13px;font-weight:bold;color:var(--navy);}
  .cart-totals{padding:14px 16px;border-top:1px solid var(--border);font-size:13px;}
  .cart-totals .row{display:flex;justify-content:space-between;margin-bottom:6px;}
  .cart-totals .grand{
    font-family:var(--font-display);
    font-size:19px;color:var(--navy);
    border-top:1px solid var(--border);
    padding-top:8px;margin-top:8px;
  }
  .btn{
    display:inline-block;
    padding:10px 16px;
    border-radius:4px;
    font-size:13.5px;
    font-weight:bold;
    border:none;
    cursor:pointer;
    text-align:center;
  }
  .btn-gold{background:var(--gold);color:#1B2A41;}
  .btn-navy{background:var(--navy);color:#fff;}
  .btn-outline{background:transparent;border:1px solid var(--border);color:var(--slate);}
  .btn-block{width:100%;margin-top:8px;}
  .pay-row{display:flex;gap:8px;padding:0 16px 16px;}
  .pay-row .btn{flex:1;}

  /* ===== INVOICE / RECEIPT (Classic Style) ===== */
  .invoice-layout{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:24px;
  }
  .settings-form .field{margin-bottom:14px;}
  .settings-form label{
    display:block;font-size:12px;color:var(--text-soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px;
  }
  .settings-form input, .settings-form select, .settings-form textarea{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:4px;
    font-size:13px;
    font-family:var(--font-body);
    color:var(--text);
    background:#fff;
  }
  .field-row{display:flex;gap:10px;}
  .field-row .field{flex:1;}
  .swatches{display:flex;gap:8px;margin-top:4px;}
  .swatch{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);cursor:pointer;}

  .receipt-frame{
    background:#EDEEF0;
    border-radius:6px;
    padding:30px;
    display:flex;
    justify-content:center;
  }
  .receipt{
    width:340px;
    background:#fff;
    padding:26px 24px;
    font-family:var(--font-mono);
    font-size:12.5px;
    color:#222;
    box-shadow:0 2px 10px rgba(0,0,0,0.12);
  }
  .receipt-header{text-align:center;margin-bottom:14px;}
  .receipt-store{font-family:var(--font-display);font-size:19px;font-weight:bold;letter-spacing:0.5px;}
  .receipt-line-addr{font-size:11px;color:#555;margin-top:4px;line-height:1.5;}
  .receipt-divider{border-top:1px dashed #999;margin:12px 0;}
  .receipt-meta-row{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:4px;}
  .receipt-table th, .receipt-table td{
    font-family:var(--font-mono);
    font-size:11.5px;
    padding:4px 0;
    border:none;
  }
  .receipt-table th{border-bottom:1px dashed #999;color:#333;text-transform:none;letter-spacing:0;}
  .receipt-totals .row{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;}
  .receipt-totals .grand{
    font-size:15px;font-weight:bold;
    border-top:1px dashed #999;border-bottom:3px double #333;
    padding:6px 0;margin-top:6px;
  }
  .receipt-footer{text-align:center;margin-top:16px;font-size:11.5px;color:#444;line-height:1.6;}
  .barcode{
    text-align:center;
    margin-top:14px;
    font-family:'Libre Barcode 39', var(--font-mono);
    font-size:30px;
    letter-spacing:2px;
    color:#111;
  }

  /* ===== MODULE MANAGER ===== */
  .module-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
  .module-tabs{display:flex;gap:6px;}
  .module-tab{
    padding:7px 16px;font-size:13px;border:1px solid var(--border);
    border-bottom:none;border-radius:4px 4px 0 0;color:var(--slate);cursor:pointer;
  }
  .module-tab.active{background:var(--card);color:var(--navy);font-weight:bold;border-color:var(--border);}
  .module-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  }
  .module-card{
    background:var(--card);border:1px solid var(--border);border-radius:6px;
    padding:18px;position:relative;
  }
  .module-icon{
    width:42px;height:42px;border-radius:8px;background:var(--gold-light);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);color:var(--gold);font-size:19px;margin-bottom:12px;
  }
  .module-name{font-family:var(--font-display);font-size:16px;color:var(--navy);margin-bottom:4px;}
  .module-desc{font-size:12.5px;color:var(--text-soft);line-height:1.5;margin-bottom:14px;min-height:52px;}
  .module-meta{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text-soft);margin-bottom:12px;}
  .module-status{
    position:absolute;top:16px;right:16px;
    font-size:10px;padding:3px 9px;border-radius:10px;font-weight:bold;
  }
  .module-status.installed{background:#E5F3E6;color:var(--green);}
  .module-status.available{background:#EFF2F5;color:var(--slate);}

  .footnote{
    margin-top:26px;
    font-size:12px;
    color:var(--text-soft);
    text-align:center;
    padding:14px;
    border-top:1px dashed var(--border);
  }

/* ===== EXTRA: FORMS, ALERTS, AUTH, PAGINATION, TABLE ACTIONS ===== */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--navy);
}
.login-card{
  width:360px;background:#fff;border-radius:8px;padding:34px 30px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
}
.login-brand{text-align:center;margin-bottom:22px;}
.login-brand .brand-mark{margin:0 auto 10px;border-color:var(--gold);color:var(--gold);}
.login-brand h1{font-family:var(--font-display);font-size:22px;color:var(--navy);margin:0;}
.login-brand p{font-size:12px;color:var(--text-soft);letter-spacing:2px;text-transform:uppercase;margin:4px 0 0;}
.form-field{margin-bottom:16px;}
.form-field label{display:block;font-size:12px;color:var(--text-soft);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:4px;font-size:13.5px;font-family:var(--font-body);
}
.alert{padding:10px 14px;border-radius:4px;font-size:13px;margin-bottom:16px;}
.alert-success{background:#E5F3E6;color:var(--green);border:1px solid #BFE3C1;}
.alert-error{background:#FBE8E7;color:var(--red);border:1px solid #F2C4C1;}
.alert-info{background:#EAF1FB;color:#1F5AA6;border:1px solid #C9DCF4;}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.toolbar-title{font-family:var(--font-display);font-size:19px;color:var(--navy);}
.toolbar-actions{display:flex;gap:8px;}

.data-table-wrap{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:6px 20px;}
.action-btn{
  display:inline-block;padding:4px 10px;font-size:11.5px;border-radius:4px;border:1px solid var(--border);
  color:var(--slate);margin-right:4px;
}
.action-btn.edit{color:#1F5AA6;border-color:#C9DCF4;}
.action-btn.delete{color:var(--red);border-color:#F2C4C1;}
.action-btn.view{color:var(--green);border-color:#BFE3C1;}

.pagination{display:flex;gap:6px;justify-content:flex-end;padding:14px 0;}
.pagination a, .pagination span{
  padding:5px 11px;border:1px solid var(--border);border-radius:4px;font-size:12.5px;color:var(--slate);
}
.pagination .active{background:var(--navy);color:#fff;border-color:var(--navy);}

.stat-card.small{padding:12px 14px;}
.text-muted{color:var(--text-soft);}
.mt-16{margin-top:16px;}
.mb-16{margin-bottom:16px;}
.filters-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.filters-row input, .filters-row select{
  padding:8px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.badge.inactive{background:#EFF2F5;color:var(--slate);}
.badge.void{background:#F3E7EA;color:#8A2E3C;}