:root{
  --bg:#0b1020;
  --panel:#0f1730;
  --panel2:#101a38;
  --border:rgba(255,255,255,.08);
  --text:#e8ecff;
  --muted:rgba(232,236,255,.65);
  --accent:#7c5cff;
  --good:#33d17a;
  --warn:#ffcc00;
  --bad:#ff5c5c;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --radius2: 22px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(51,209,122,.20), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
}

a{ color:inherit; text-decoration:none; }
button, input, select{ font-family:inherit; }

/* ================= TOP BAR ================= */
.topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid var(--border);
  background: rgba(10, 14, 30, .6);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:42px; height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(51,209,122,.65));
  box-shadow: var(--shadow);
}

.brand-title{ font-weight:800; }
.brand-subtitle{ font-size:12px; color:var(--muted); margin-top:2px; }

.topbar-actions{ display:flex; align-items:center; gap:10px; }

.pill{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.pill.good{ border-color: rgba(51,209,122,.35); color: rgba(51,209,122,.95); }
.pill.bad{ border-color: rgba(255,92,92,.35); color: rgba(255,92,92,.95); }
.pill.warn{ border-color: rgba(255,204,0,.35); color: rgba(255,204,0,.95); }

.userbox{ display:flex; align-items:center; gap:10px; }

/* ================= LAYOUT ================= */
.layout{ display:flex; min-height: calc(100vh - 72px); }

.sidebar{
  width:260px;
  padding:14px;
  border-right:1px solid var(--border);
  background: rgba(10, 14, 30, .45);
  backdrop-filter: blur(10px);
}

.nav{ display:flex; flex-direction:column; gap:6px; }

.nav-link{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color: var(--muted);
  background: rgba(255,255,255,.02);
}
.nav-link:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.nav-link.active{
  color: var(--text);
  border-color: rgba(124,92,255,.35);
  background: rgba(124,92,255,.12);
}

.main{ flex:1; padding:18px; }
.view{ max-width: 1200px; margin: 0 auto; }

/* ================= GRID ================= */
.grid{ display:grid; gap:14px; }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1000px){
  .grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .layout{ flex-direction:column; }
  .sidebar{ width:auto; border-right:none; border-bottom:1px solid var(--border); }
  .grid.cols-4,.grid.cols-3,.grid.cols-2{ grid-template-columns: 1fr; }
}

/* ================= CARDS ================= */
.card{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.card-header{ padding:14px 14px 0; }
.card-title{ font-size:16px; font-weight:800; }
.card-subtitle{ margin-top:4px; font-size:12px; color: var(--muted); }
.card-content{ padding:14px; }

/* ================= TEXT ================= */
.muted{ color: var(--muted); }
.small{ font-size:12px; }
.h1{ font-size:26px; font-weight:900; margin:0 0 6px; }
.h2{ font-size:18px; font-weight:850; margin:0; }

/* ================= BUTTONS ================= */
.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.06); }
.btn-primary{
  background: rgba(124,92,255,.16);
  border-color: rgba(124,92,255,.35);
}
.btn-danger{
  background: rgba(255,92,92,.12);
  border-color: rgba(255,92,92,.35);
}
.btn-ghost{ background: transparent; }
.btn-sm{ padding:7px 10px; font-size:13px; }

/* ================= INPUTS ================= */
.input, select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(10, 14, 30, .45);
  color: var(--text);
  outline:none;
}
.input:focus, select:focus{
  border-color: rgba(124,92,255,.55);
  box-shadow: 0 0 0 3px rgba(124,92,255,.18);
}

/* ================= TABLE ================= */
.table-wrap{
  overflow:auto;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
}

/* Ensure consistent layout across all pages */
table{ width:100%; border-collapse:collapse; }

th,td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  white-space:nowrap;

  /* ✅ This is the key: header + cells align the same */
  text-align:left;
  vertical-align:middle;
}

th{
  font-size:12px;
  color:var(--muted);

  /* ✅ Helps headers sit nicely above values */
  font-weight:700;
  vertical-align:bottom;
}

tr:hover td{ background: rgba(255,255,255,.02); }


/* ================= MODAL (FINAL, FIXED) ================= */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:18px;
  z-index:100;
  overflow:auto;
}

.modal{
  width:min(900px, 100%);
  max-height: calc(100vh - 36px);
  border-radius:22px;
  border:1px solid var(--border);
  background: rgba(15, 23, 48, .92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);

  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.modal-header{
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:10px;
  align-items:center;
  position:sticky;
  top:0;
  background: rgba(15, 23, 48, .92);
  z-index:2;
}

.modal-title{ font-weight:900; }

.modal-body{
  padding:14px;
  overflow:auto;
}

.modal-footer{
  padding:14px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  position:sticky;
  bottom:0;
  background: rgba(15, 23, 48, .92);
  z-index:2;
}

/* ================= TOASTS ================= */
.toast-root{
  position: fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:200;
}
.toast{
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(15, 23, 48, .90);
  backdrop-filter: blur(10px);
  padding:10px 12px;
  box-shadow: var(--shadow);
  min-width:260px;
}
.toast .t-title{ font-weight:800; }
.toast .t-msg{ font-size:12px; color:var(--muted); }



/* ================= MOBILE V2 MODAL TOP ================= */
@media (max-width: 640px){
  .modal-backdrop{ align-items:flex-start; }
  .modal{ width:100%; margin-top:12px; }
}


/* Tracking barcode scan button (Sales) */
.scan-input-wrap{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.scan-input-wrap > input,
.scan-input-wrap > textarea,
.scan-input-wrap > select{
  width: 100%;
  padding-right: 46px; /* room for camera button */
}
.scan-btn{
  position: absolute;
  right: 8px;
  height: 34px;
  width: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(232,236,255,.92);
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  user-select: none;
}
.scan-btn:hover{
  background: rgba(255,255,255,.10);
}

/* --- Sales table polish (Phase A) --- */
.table-wrap{ overflow-x:auto; }
.table.sales-table{ min-width: 980px; }
.table.sales-table th, .table.sales-table td{ vertical-align: top; }

/* Tight emoji + ID columns (desktop fix) */
.table.sales-table th.emoji-col, .table.sales-table td.emoji-col{
  width: 86px;
  min-width: 86px;
  max-width: 86px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden; /* prevent icons bleeding into ID */
}
.table.sales-table th.id-col, .table.sales-table td.id-col{
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  padding-left: 14px;
  white-space: nowrap;
}
/* Skinny user column (1/2/W) */
.table.sales-table th.user-col, .table.sales-table td.user-col{
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  text-align: center;
  white-space: nowrap;
}

/* Notes wrap instead of stretching table */
.table.sales-table td.notes-col{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 320px;
}



/* ===========================
   Header logo clipping fix
   - Ensures VillainShop logo isn't clipped on top/left
   =========================== */
header .brand{
  padding-left: 10px;
  padding-top: 6px;
  overflow: visible;
}
header .brand .logo-img{
  margin-left: 2px;
  margin-top: 2px;
  transform: translateY(0); /* neutral */
}


/* ===========================
   MOBILE SIDEBAR TOGGLE (safe)
   - works with <aside id="sidebar" hidden> using the inline toggle script
   =========================== */
.nav-toggle{ display:none; }

.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 40;
}

@media (max-width: 900px){
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 40px;
    height: var(--control-h, 36px);
  }

  /* sidebar slides in above backdrop */
  #sidebar.sidebar{
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    z-index: 50;
    transform: translateX(-110%);
    transition: transform .18s ease;
  }

  body.sidebar-open, body.nav-open #sidebar.sidebar{ transform: translateX(0); }

  /* layout becomes 1-col so main uses full width */
  .layout{ grid-template-columns: 1fr; }
}


/* Mobile nav button + overlay (added for app.js mobile nav) */
.mobile-nav-btn{
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 1002;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.mobile-nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.55);
  display: none;
}
@media (max-width: 900px){
  .mobile-nav-btn{ display:flex; }
  body.nav-open .mobile-nav-overlay{ display:block; }
}

/* === MOBILE POLISH PHASE 1 === */
@media (max-width: 768px){
  /* allow horizontal table scrolling (no global lock) */

  /* topbar/header: allow wrapping and reduce density */
  .topbar{
    height:auto;
    padding:10px 12px;
    gap:10px;
    flex-wrap:wrap;
  }
  .brand{ gap:10px; }
  .logo{ width:36px; height:36px; border-radius:12px; }
  .brand-title{
    font-size:14px;
    line-height:1.2;
  }
  .topbar-actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
  }
  .pill{ padding:7px 10px; font-size:12px; }

  /* comfortable page gutters */
  .page{ padding:12px; }
  .card{ border-radius:18px; }
  .card-header{ padding:12px 12px 0; }
  .card-content{ padding:12px; }

  /* buttons + toolbars: wrap and stay tappable */
  .btn{
    min-height:44px;
    padding:10px 12px;
    font-size:14px;
  }
  .btn.btn-sm{
    min-height:40px;
    padding:8px 10px;
    font-size:13px;
  }
  .actions, .toolbar, .page-actions, .row-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .actions .btn, .toolbar .btn, .page-actions .btn, .row-actions .btn{
    flex:1 1 45%;
  }

  /* inputs: stop iOS zoom and ensure full width */
  input, select, textarea{
    width:100%;
    font-size:16px;
  }
  textarea{ min-height:110px; }

  /* tables: smoother horizontal scroll */
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  table{ min-width:640px; }
  /* modal usability */
  .modal{
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
  }
  .modal-body{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ===================================================
   Mobile Phase 2 (CSS-only, safe/opt-in)
   - Adds optional mobile "table -> card" styling for
     tables that have class: .mobile-card-table
   - Improves mobile toolbar wrapping + spacing
   =================================================== */

@media (max-width: 768px) {
  /* Optional: smoother horizontal table scroll when needed */
  .table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrapper table {
    width: max-content;
    min-width: 100%;
  }

  /* ------------------------------
     OPT-IN: mobile card tables
     Add class="mobile-card-table" to any <table>
     ------------------------------ */
  table.mobile-card-table thead {
    display: none;
  }

  table.mobile-card-table tbody tr {
    display: block;
    margin: 0 0 12px 0;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--card, rgba(255,255,255,0.03));
  }

  table.mobile-card-table tbody tr td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border: 0 !important;
    font-size: 0.95rem;
    text-align: left !important;
    align-items: center;
  }

  /* Label text from data-label attr (recommended) */
  table.mobile-card-table tbody tr td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted, rgba(255,255,255,0.55));
    flex: 0 0 auto;
    text-align: left;
  }

  /* If data-label is missing, don't show stray colon/blank */
  table.mobile-card-table tbody tr td:not([data-label])::before,
  table.mobile-card-table tbody tr td[data-label=""]::before {
    content: "";
    display: none;
  }

  /* Keep action buttons usable inside card rows */
  table.mobile-card-table tbody tr td .btn,
  table.mobile-card-table tbody tr td button.btn {
    white-space: nowrap;
  }

  /* ------------------------------
     FIX: mobile card tables should not force wide layouts
     (keeps expense cards within screen, no horizontal scroll)
     ------------------------------ */
  table.mobile-card-table{
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }
  table.mobile-card-table tbody tr{
    width: 100%;
  }
  table.mobile-card-table tbody tr td{
    flex-wrap: wrap;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    justify-content: space-between;
    align-items: flex-start;
  }
  table.mobile-card-table tbody tr td::before{
    min-width: 96px;
  }

  /* Expenses: keep amount line tidy */
  table.mobile-card-table tbody tr td[data-label="Amount"]{ white-space: nowrap; }

  /* ------------------------------
     Toolbars / button rows wrap better
     ------------------------------ */
  .toolbar,
  .page-actions,
  .filters-row,
  .controls,
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .toolbar .btn,
  .page-actions .btn,
  .filters-row .btn,
  .controls .btn,
  .actions .btn {
    flex: 1 1 46%;
    min-width: 140px;
    min-height: 44px;
  }

  /* Inputs: full width + prevent iOS zoom */
  input,
  select,
  textarea {
    width: 100%;
    font-size: 16px;
  }

  /* Cards: consistent padding */
  .card,
  .panel,
  .box {
    padding: 16px;
  }
}



/* ================= MOBILE UX POLISH: Sales Cards (Mobile Only) ================= */
@media (max-width: 768px){
  /* Sales table rows become cards via existing .mobile-card-table rules */
  .sales-page table.sales-table tbody tr td{
    align-items:flex-start;
  }

  /* Customer header: show status emoji beside name on mobile */
  .sales-page .customer-status{
    display:inline !important;
    font-size: 18px;
    line-height: 1;
  }
  .sales-page .customer-name{
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
  }

  /* Money stack (Total / Profit / Margin) */
  .sales-page .money-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    min-width: 0;
  }
  .sales-page .sale-total{
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
  }
  .sales-page .sale-profit{
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }
  .sales-page .profit-positive{ color: rgba(51, 209, 122, 0.95); }
  .sales-page .profit-negative{ color: rgba(255, 77, 110, 0.95); }
  .sales-page .profit-zero{ opacity: .75; }

  .sales-page .sale-margin{
    font-size: 11px;
    opacity: .65;
    white-space: nowrap;
  }

  /* Emoji line: keep icons on one row (notes/tracking/photo/deposit) */
  .sales-page td.notes-col,
  .sales-page td.tracking-col,
  .sales-page td.satchel-col{
    display:inline-flex !important;
    width:auto !important;
    padding: 10px 6px 6px 0 !important;
    gap: 12px;
  }
  .sales-page td.notes-col::before,
  .sales-page td.tracking-col::before,
  .sales-page td.satchel-col::before{
    display:none !important;
    content:"" !important;
  }

  .sales-page .emoji-line{
    display:inline-flex;
    gap: 14px;
    align-items:center;
  }

  .sales-page .icon-btn{
    border:0;
    background: transparent;
    font-size: 20px;
    padding: 6px 8px;
    border-radius: 10px;
    color: inherit;
  }
  .sales-page .icon-link{
    font-size: 20px;
    text-decoration: none;
  }
  .sales-page .deposit-indicator{
    font-size: 18px;
    opacity: .95;
    white-space: nowrap;
  }

  /* Actions: wrap cleanly */
  .sales-page .row-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }
  .sales-page .deposit-toggle input[type="checkbox"]{
    width: 18px;
    height: 18px;
  }

  /* Modal: extra bottom padding so Android nav bar never covers submit */
  :root{ --safe-bottom: env(safe-area-inset-bottom, 0px); }
  .modal-footer{
    padding-bottom: calc(14px + var(--safe-bottom) + 28px);
  }
}


/* --- Mobile Sales cards (v4) scoped to touch devices (prevents desktop impact) --- */
/* Prevent horizontal scroll containers from fighting the card layout */
  .is-mobile .sales-page .table-wrap { overflow-x: hidden !important; }
  .is-mobile table.sales-table { width: 100% !important; max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed; }

  .is-mobile .sales-table thead { display: none; }
  .is-mobile .sales-table tbody, 
  .is-mobile .sales-table tr { display: block; width: 100%; }
  .is-mobile .sales-table tr { margin: 0 0 12px 0; }

  .is-mobile .sales-table td { display: none; }
  .is-mobile .sales-table td.sale-customer-cell { 
    display: block; 
    width: 100%;
    padding: 0;
    border: 0;
  }

  .is-mobile .desktop-only { display: none !important; }
  .is-mobile .m-sale-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px;
  }

  /* Prevent any long strings (names, tracking, etc.) from forcing width */
  .is-mobile .m-sale-card, .m-sale-card * { max-width: 100%; }
  .is-mobile .m-sale-name span:last-child { white-space: normal; overflow-wrap: anywhere; }

  .is-mobile .m-sale-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
  .is-mobile .m-sale-name { display:flex; align-items:center; gap:8px; min-width:0; font-size:18px; font-weight:700; line-height:1.2; }
  .is-mobile .m-sale-name span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .is-mobile .m-sale-fin { text-align:right; flex:0 0 auto; }
  .m-total { font-size:18px; font-weight:700; white-space:nowrap; }
  .m-profit { font-size:14px; font-weight:600; }
  .m-profit.profit-pos { color: #2ecc71; }
  .m-profit.profit-neg { color: #e74c3c; }
  .m-profit.profit-zero { opacity: .7; }
  .m-margin { font-size:11px; opacity:.65; }

  .is-mobile .m-sale-meta { margin-top: 2px; font-size:12px; opacity:.75; }
  .is-mobile .m-sale-meta2 { margin-top: 0px; font-size:13px; opacity:.85; }

  .is-mobile .m-sale-status { margin-top: 6px; }
  .is-mobile .m-sale-status .m-label { font-size:12px; opacity:.7; margin-bottom:6px; }
  .is-mobile .m-sale-status select { width: 100%; }

  .is-mobile .m-sale-icons { margin-top: 6px; display:flex; gap:14px; align-items:center; }
  .is-mobile .sale-icon-btn { border:0; background:transparent; font-size:20px; padding:6px 8px; border-radius:10px; color: inherit; }
  .is-mobile .sale-deposit-ind { font-size:18px; }

  .is-mobile .m-sale-actions { margin-top: 6px; }
  .is-mobile .m-sale-actions .actions { display:flex; flex-wrap:wrap; gap:8px; }
  .is-mobile .m-sale-actions .actions button { flex: 1 1 120px; }
  .is-mobile .deposit-toggle { display:flex; align-items:center; gap:8px; font-size:12px; opacity:.9; padding:6px 8px; border:1px solid rgba(255,255,255,.10); border-radius:10px; }
  .is-mobile .deposit-toggle input { transform: scale(1.1); }

  /* Fix Android bottom nav overlap for modal footer buttons */
  .is-mobile .modal-footer, .modalFooter {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + 44px) !important;
  }


/* Defaults for mobile-only sales card */
.desktop-only { display: inline; }
.m-sale-card { display: none; }



/* --- Mobile Sales cards: activation fallback via media query (keeps mobile working even if UA detection fails) --- */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-width: 900px) {
  /* Prevent horizontal scroll containers from fighting the card layout */
  .sales-page .table-wrap { overflow-x: hidden !important; }
  table.sales-table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: fixed; }

  .sales-table thead { display: none; }
  .sales-table tbody, 
  .sales-table tr { display: block; width: 100%; }
  .sales-table tr { margin: 0 0 12px 0; }

  .sales-table td { display: none; }
  .sales-table td.sale-customer-cell { 
    display: block; 
    width: 100%;
    padding: 0;
    border: 0;
  }

  .desktop-only { display: none !important; }
  .m-sale-card { display: block; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px; }
  .m-sale-card, .m-sale-card * { max-width: 100%; }

  .m-sale-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
  .m-sale-name { display:flex; align-items:center; gap:8px; min-width:0; font-size:18px; font-weight:700; line-height:1.2; }
  .m-sale-name span:last-child { white-space: normal; overflow-wrap: anywhere; min-width:0; }

  .m-sale-fin { text-align:right; flex:0 0 auto; }
  .m-total { font-size:18px; font-weight:700; white-space:nowrap; }
  .m-profit { font-size:14px; font-weight:600; }
  .m-profit.profit-pos { color: #2ecc71; }
  .m-profit.profit-neg { color: #e74c3c; }
  .m-profit.profit-zero { opacity: .7; }
  .m-margin { font-size:11px; opacity:.65; }

  .m-sale-meta { margin-top: 2px; font-size:12px; opacity:.75; }
  .m-sale-meta2 { margin-top: 0px; font-size:13px; opacity:.85; }

  .m-sale-status { margin-top: 6px; }
  .m-sale-status .m-label { font-size:12px; opacity:.7; margin-bottom:6px; }
  .m-sale-status select { width: 100%; }

  .m-sale-icons { margin-top: 6px; display:flex; gap:14px; align-items:center; flex-wrap: wrap; }
  .sale-icon-btn { border:0; background:transparent; font-size:20px; padding:6px 8px; border-radius:10px; color: inherit; }
  .sale-deposit-ind { font-size:18px; }

  .m-sale-actions { margin-top: 6px; }
  .m-sale-actions .actions { display:flex; flex-wrap:wrap; gap:8px; }
  .m-sale-actions .actions button { flex: 1 1 120px; }
  .deposit-toggle { display:flex; align-items:center; gap:8px; font-size:12px; opacity:.9; padding:6px 8px; border:1px solid rgba(255,255,255,.10); border-radius:10px; }
  .deposit-toggle input { transform: scale(1.1); }

  /* Fix Android bottom nav overlap for modal footer buttons */
  .modal-footer, .modalFooter { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + 44px) !important; }
}


/* Deposit indicator line between name and meta (mobile cards) */
.is-mobile .m-sale-depositline { margin-top: 0px; }
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-width: 900px) {
  .m-sale-depositline { margin-top: 0px; }
}

/* Mobile sales card: left column wrapper to remove vertical gap under name */
.is-mobile .m-sale-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-width: 900px) {
  .m-sale-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .m-sale-depositline { margin-top: 0px; }
}


/* Desktop deposit emoji column */
.deposit-emoji-col { width: 44px; text-align: center; }

.status-emoji-col { width: 44px; text-align: center; }



/* ===========================
   INVENTORY: Mobile cards (v4 JS classnames)
   - Added to match inventory.js markup (inv-mcard-*)
   - Does not affect Sales or desktop
   =========================== */

@media (max-width: 768px){
  .inv-mobile-cards{ display:flex !important; flex-direction:column; gap:12px; }
  .inv-desktop-table{ display:none !important; }
}
.inv-mobile-cards{ display:none; }

.inv-mcard{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px;
  max-width: 100%;
}
.inv-mcard *{ max-width: 100%; }

.inv-mcard-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}
.inv-mcard-head-left{ min-width:0; }
.inv-mcard-title{
  font-size:16px;
  font-weight:900;
  line-height:1.15;
  overflow-wrap:anywhere;
  word-break: break-word;
}
.inv-mcard-sub{
  margin-top:4px;
  font-size:12px;
  color: var(--muted);
}
.inv-mcard-status{
  font-size:18px;
  line-height:1;
  padding-top:2px;
  flex:0 0 auto;
}

/* Section headings (Locations/Pricing + right meta) */
.inv-mcard-sec-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:10px;
  margin-bottom:6px;
}
.inv-mcard-sec-head-spaced{ margin-top:12px; }
.inv-mcard-sec-title{
  font-size:11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.inv-mcard-sec-right{
  font-size:12px;
  color: var(--muted);
}
.inv-mcard-sec-right b{
  color: var(--text);
  font-size:14px;
  font-weight:900;
}

/* Two-column metric grid */
.inv-mcard-grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.inv-mcard-metric{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(10, 14, 30, .25);
  border-radius: 14px;
  padding: 10px;
  min-width: 0;
}
.inv-mcard-label{
  font-size:11px;
  color: var(--muted);
  margin-bottom:4px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-mcard-value{
  font-size:15px;
  font-weight:900;
  white-space: nowrap;
}

/* Actions */
.inv-mcard-actions,
.inv-card-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}
.inv-mcard-actions .btn,
.inv-card-actions .btn{
  flex:1 1 120px;
  min-height:44px;
}


/* Sales: keep deposit + status emojis aligned inside the Status column */
.sales-emoji-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}


/* ===========================
   Inventory mobile polish (final)
   Scoped to .page-inventory only
   =========================== */
@media (max-width: 768px){
  .page-inventory,
  .page-inventory * {
    min-width: 0;
  }

  .page-inventory{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .page-inventory .inv-page-header{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }

  .page-inventory .inv-page-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    width: 100%;
  }

  .page-inventory .inv-sort-row{
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .page-inventory .inv-sort-row .input,
  .page-inventory .inv-sort-row select,
  .page-inventory .inv-sort-row .btn{
    width: 100%;
    max-width: 100%;
  }

  .page-inventory .inv-page-actions > .btn{
    min-width: 0;
    width: 100%;
  }

  .page-inventory .card{
    overflow: hidden;
  }

  .page-inventory .card-header{
    align-items: flex-start !important;
  }

  .page-inventory .card-content{
    padding: 12px;
  }

  .page-inventory .inv-filter-row{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch !important;
  }

  .page-inventory .inv-filter-input{
    min-width: 0 !important;
    width: 100%;
  }

  .page-inventory .inv-mobile-cards{
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .page-inventory .inv-desktop-table{
    display: none !important;
  }

  .page-inventory .inv-mcard{
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    border-radius: 18px;
    box-shadow: none;
    padding: 14px;
    overflow: hidden;
  }

  .page-inventory .inv-mcard__header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .page-inventory .inv-mcard__titlewrap{
    min-width: 0;
    flex: 1 1 auto;
  }

  .page-inventory .inv-mcard__title{
    font-size: 17px;
    line-height: 1.15;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .page-inventory .inv-mcard__sub{
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.25;
  }

  .page-inventory .inv-mcard__status{
    font-size: 24px;
    line-height: 1;
    flex: 0 0 auto;
  }

  .page-inventory .inv-mcard__body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin: 12px 0;
  }

  .page-inventory .inv-mcard__col{
    min-width: 0;
    padding: 12px 10px;
  }

  .page-inventory .inv-mcard__col + .inv-mcard__col{
    border-left: 1px solid rgba(255,255,255,.08);
  }

  .page-inventory .inv-mcard__sec-head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
  }

  .page-inventory .inv-mcard__sec-title{
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .page-inventory .inv-mcard__sec-right{
    font-size: 12px;
    color: var(--muted);
    text-align: right;
  }

  .page-inventory .inv-mcard__sec-right b{
    color: var(--text);
    font-weight: 800;
  }

  .page-inventory .inv-mcard__metric{
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    margin-bottom: 10px;
  }

  .page-inventory .inv-mcard__metric:last-child{
    margin-bottom: 0;
  }

  .page-inventory .inv-mcard__label{
    font-size: 12px;
    color: var(--muted);
    line-height: 1.25;
    margin-bottom: 2px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .page-inventory .inv-mcard__val{
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }

  .page-inventory .inv-mcard__actions{
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
  }

  .page-inventory .inv-mcard__actions .btn{
    flex: 1 1 0;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
}



/* =========================================
   INVENTORY TABLE DESKTOP HEADER + WIDTH FIX
   (keeps mobile cards untouched)
   ========================================= */

@media (min-width: 769px){

  .page-inventory table{
    table-layout:auto;
    width:100%;
  }

  .page-inventory th,
  .page-inventory td{
    padding:8px 10px;
  }

  .page-inventory th{
    white-space:normal;
    line-height:1.2;
  }

  /* keep numeric columns compact */
  .page-inventory td:nth-child(4),
  .page-inventory td:nth-child(5),
  .page-inventory td:nth-child(6),
  .page-inventory td:nth-child(7),
  .page-inventory td:nth-child(8),
  .page-inventory td:nth-child(9),
  .page-inventory td:nth-child(10),
  .page-inventory td:nth-child(11){
    white-space:nowrap;
  }

  /* action buttons */
  .page-inventory td:last-child{
    white-space:nowrap;
  }

}


/* =========================================
   INVENTORY MOBILE CARD DENSITY TUNE
   (safe compact pass to fit ~3 cards)
   ========================================= */
@media (max-width: 768px){
  .page-inventory .inv-mobile-cards{
    gap: 10px;
  }

  .page-inventory .inv-mcard{
    padding: 12px;
    border-radius: 16px;
  }

  .page-inventory .inv-mcard__header{
    gap: 10px;
    margin-bottom: 8px;
  }

  .page-inventory .inv-mcard__title{
    font-size: 15px;
    line-height: 1.1;
  }

  .page-inventory .inv-mcard__sub{
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.2;
  }

  .page-inventory .inv-mcard__status{
    font-size: 22px;
  }

  .page-inventory .inv-mcard__body{
    margin: 8px 0;
  }

  .page-inventory .inv-mcard__col{
    padding: 9px 8px;
  }

  .page-inventory .inv-mcard__sec-head{
    margin: 0 0 8px;
  }

  .page-inventory .inv-mcard__sec-title,
  .page-inventory .inv-mcard__sec-right{
    font-size: 11px;
  }

  .page-inventory .inv-mcard__metric{
    margin-bottom: 8px;
  }

  .page-inventory .inv-mcard__label{
    font-size: 11px;
    line-height: 1.15;
    margin-bottom: 1px;
  }

  .page-inventory .inv-mcard__val{
    font-size: 14px;
    line-height: 1.1;
  }

  .page-inventory .inv-mcard__actions{
    gap: 6px;
  }

  .page-inventory .inv-mcard__actions .btn{
    min-height: 38px;
    padding: 6px 8px;
    font-size: 13px;
  }
}


/* ===========================
   SALES STATUS SELECT READABILITY
   - forces dark readable selects for sales status controls
   =========================== */
.sales-page select,
.sales-page .m-sale-status select,
.sales-page .deposit-toggle select,
.sales-page .row-actions select,
.sales-page .actions select {
  background: rgba(10, 14, 30, .92) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.sales-page select option,
.sales-page .m-sale-status select option {
  background: #101a38;
  color: #e8ecff;
}


/* Deposit UI */
.deposit-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);font-size:12px;line-height:1.2;white-space:normal;}
.deposit-chip--done{background:rgba(51,209,122,.12);border-color:rgba(51,209,122,.30);color:rgba(51,209,122,.96);}
.deposit-chip--pending{background:rgba(255,204,0,.10);border-color:rgba(255,204,0,.25);color:rgba(255,230,140,.96);}
.deposit-col{min-width:220px;max-width:260px;}
.deposit-preview-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;}
.deposit-preview-item,.deposit-note-block{padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03);}
.deposit-modal-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.deposit-modal-stat{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03);}
.deposits-page .page-actions{display:flex;gap:8px;flex-wrap:wrap;}
.deposit-detail{display:flex;flex-direction:column;gap:12px;}
.deposit-detail-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;}
@media (max-width: 700px){.deposit-modal-summary{grid-template-columns:1fr;}.deposit-col{min-width:0;max-width:none;}.deposit-chip{font-size:11px;}}