:root{
  --bg:#f6f3ed;
  --bg-soft:#fbf8f3;
  --panel:#ffffff;
  --line:#e6dfd2;
  --line-strong:#d9cfbf;
  --text:#171717;
  --muted:#6d6a64;
  --accent:#111111;
  --gold:#9a805a;
  --success:#25684d;
  --danger:#b54737;
  --warning:#a86b1f;
  --radius:18px;
  --shadow:0 14px 36px rgba(30,24,12,.06);
  --serif:"Libre Baskerville", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans)}
a{text-decoration:none;color:inherit}
body{min-height:100vh}

.app-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.sidebar{background:rgba(255,255,255,.92);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.sidebar-brand{padding:8px 14px 16px;border-bottom:1px solid var(--line)}
.kicker{text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--gold)}
.sidebar-brand h1{margin:8px 0 0;font-family:var(--serif);font-size:32px;line-height:1.1}
.sidebar-nav{display:flex;flex-direction:column;gap:6px;padding:4px}
.sidebar-section-label{padding:14px 12px 6px;color:var(--muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.side-link,.navlink{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;color:var(--muted);font-size:14px;border:1px solid transparent}
.side-link:hover,.navlink:hover{background:var(--bg-soft);border-color:var(--line)}
.side-link.active{background:var(--bg-soft);border-color:var(--line);color:var(--text);font-weight:600}
.sidebar-footer{margin-top:auto;padding:4px}
.logout-link{margin-top:auto}

.app-main{min-width:0;display:flex;flex-direction:column}
.mobile-topbar{display:none}
.topbar{background:rgba(246,243,237,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar-inner{padding:16px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.page-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;color:var(--muted)}
.userchip{font-size:12px;color:var(--muted);padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}
.page{padding:28px;max-width:none}
.page-title{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}
.page-title h2{margin:8px 0 0;font-size:34px;line-height:1.08;font-family:var(--serif)}
.muted{color:var(--muted)}
.small{font-size:13px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn,button{appearance:none;border:none;background:var(--accent);color:#fff;padding:12px 15px;border-radius:12px;font-weight:600;cursor:pointer;font:inherit}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--line-strong)}
.card,.table-wrap,.form-card,.login-card,.action-card,.metric-card,.panel-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card,.metric-card,.action-card,.panel-card{padding:18px}
.table-wrap,.form-card,.login-card{padding:20px}
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.metric{margin-top:10px;font-family:var(--serif);font-size:38px;line-height:1}
.good{color:var(--success)}
.warn{color:var(--danger)}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:18px}
.flash{padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--line-strong);background:#fff;border-radius:14px;margin-bottom:16px}
.flash.success{border-left-color:var(--success);color:var(--success)}
.flash.error{border-left-color:var(--danger);color:var(--danger)}
label{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
input,textarea,select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line-strong);background:#fff;font:inherit;color:var(--text)}
textarea{min-height:130px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .full{grid-column:1 / -1}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.section-head h3{margin:0;font-family:var(--serif);font-size:24px;line-height:1.15}
.panel-note{font-size:13px;color:var(--muted);margin-top:4px}

.dashboard-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.dashboard-main{display:grid;gap:18px}
.dashboard-side{display:grid;gap:18px}
.metrics-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.metrics-strip.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric-card .label{font-size:12px;color:var(--muted);margin:0 0 10px;text-transform:none;letter-spacing:0}
.metric-card .value{font-family:var(--serif);font-size:22px;line-height:1.1}
.metric-card.primary .value{font-size:28px}
.metric-card.soft{background:linear-gradient(180deg,#fff 0%,#fcfaf6 100%)}
.action-stack{display:grid;gap:10px}.action-link{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:600}.action-link small{display:block;margin-top:4px;color:var(--muted);font-weight:500}
.panel-card .mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.panel-card .mini-metric{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft)}
.panel-card .mini-metric .mini-label{font-size:12px;color:var(--muted)}
.panel-card .mini-metric .mini-value{margin-top:6px;font-family:var(--serif);font-size:24px}
.data-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}

.dashboard-table{width:100%;border-collapse:collapse}
.dashboard-table th,.dashboard-table td,table th,table td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.dashboard-table th,table th{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:600}
table{width:100%;border-collapse:collapse}
tr:last-child td{border-bottom:none}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-soft);font-size:12px}
.badge.good{color:var(--success)}.badge.warn{color:var(--danger)}

.ledger-product{display:flex;align-items:center;gap:12px;min-width:0}
.ledger-thumb{width:54px;height:54px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:var(--bg-soft);display:block}
.ledger-thumb-placeholder{display:flex;align-items:center;justify-content:center;font-size:11px;color:#8a7f72}
.ledger-product-meta{min-width:0}.ledger-product-meta strong{display:block}
.stock-pill{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:32px;padding:0 10px;border-radius:999px;border:1px solid;font-weight:700}
.stock-pill.stock-neutral{color:#6b7280;background:#f3f4f6;border-color:#e5e7eb}
.stock-pill.stock-bad{color:#b42318;background:#fef3f2;border-color:#f3b4b0}
.stock-pill.stock-low{color:#b54708;background:#fff7ed;border-color:#f7c58a}
.stock-pill.stock-good{color:#027a48;background:#ecfdf3;border-color:#95d5b2}
.ledger-row-alert td{background:#fff1f0}.ledger-row-low td{background:#fff8eb}
.order-cost-cell{font-weight:700;white-space:nowrap}
.table-wrap td a,.ledger-phone a{color:#0a66c2;text-decoration:underline;font-weight:600}
.table-wrap td a:hover,.ledger-phone a:hover{color:#084c92}

.login-shell{min-height:100vh;display:grid;place-items:center;padding:28px;background:linear-gradient(180deg,#fff,#f7f2e8)}
.login-card{width:min(520px,100%);padding:38px}.login-card h1{margin:8px 0 12px;font-family:var(--serif);font-size:50px;line-height:1.04}
.login-card form{display:grid;gap:16px;margin-top:22px}.login-card .brandline{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.login-card .mini{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}.login-card .seal{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-family:var(--serif);font-size:18px}
.footer-note{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}

@media (max-width:1200px){.dashboard-shell{grid-template-columns:1fr}.metrics-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics-strip.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.data-grid{grid-template-columns:1fr}}
@media (max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.mobile-topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:#fff}.topbar{position:static}.topbar-inner{padding:14px 18px}.page{padding:18px}.page-title,.split,.form-grid,.card-grid{grid-template-columns:1fr;display:grid}.page-title h2{font-size:30px}.metrics-strip,.metrics-strip.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.metrics-strip,.metrics-strip.compact{grid-template-columns:1fr}.topbar{display:none}.page{padding:14px}.table-wrap,.form-card{padding:14px}}

.table-wrap tbody tr.ledger-row-alert:hover td{background:#ffe4e1}
.table-wrap tbody tr.ledger-row-low:hover td{background:#fff1d6}


/* Supplier details restored on Products catalogue */
.catalogue-table {
  min-width: 980px;
}

.supplier-cell {
  min-width: 190px;
  max-width: 280px;
}

.supplier-address {
  margin-top: 3px;
  line-height: 1.35;
}

.supplier-phone {
  margin-top: 5px;
  color: #3f372f;
}

.whatsapp-link {
  color: #128c7e;
  font-weight: 700;
  text-decoration: none;
}

.whatsapp-link:hover {
  text-decoration: underline;
}

.price-cell {
  min-width: 120px;
  white-space: nowrap;
}

.price-cell div + div {
  margin-top: 4px;
}


/* Products page: make the add/import panel narrower so the catalogue fits beside it */
.products-layout{
  grid-template-columns:minmax(360px,520px) minmax(820px,1fr);
  align-items:start;
}
.products-layout .form-card{
  padding:18px;
}
.products-layout .form-card h3{
  font-size:22px;
}
.products-layout .form-grid{
  grid-template-columns:1fr;
  gap:12px;
}
.products-layout textarea{
  min-height:88px;
}
.products-layout input,
.products-layout textarea,
.products-layout select{
  padding:10px 12px;
}
.products-layout .table-wrap{
  overflow-x:auto;
}
.products-layout .catalogue-table{
  min-width:820px;
}
.products-layout .catalogue-table th,
.products-layout .catalogue-table td{
  padding:10px 9px;
}
.products-layout .supplier-cell{
  min-width:160px;
  max-width:210px;
}
.products-layout .price-cell{
  min-width:92px;
}
.products-layout .stock-pill{
  min-width:30px;
  height:28px;
}
@media (max-width:1400px){
  .products-layout{grid-template-columns:1fr;}
}

/* Product photo preview modal */
.photo-thumb-button {
  display: inline-flex;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid #e5dccf;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  flex: 0 0 auto;
}

.photo-thumb-button:hover {
  box-shadow: 0 8px 22px rgba(38, 28, 18, 0.13);
  transform: translateY(-1px);
}

.product-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.photo-modal.is-open {
  display: flex;
}

.photo-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(20, 16, 12, 0.68);
  cursor: zoom-out;
}

.photo-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 920px);
  max-height: 92vh;
  background: #fffdf9;
  border: 1px solid #e5dccf;
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(20, 16, 12, 0.32);
  overflow: hidden;
}

.photo-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5dccf;
}

.photo-modal__close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #d8cbb9;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.photo-modal__image {
  display: block;
  max-width: 92vw;
  max-height: calc(92vh - 60px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
}

body.photo-modal-open {
  overflow: hidden;
}


/* JS-free clickable photo popup: uses the URL hash, so it works even if JavaScript is blocked. */
.catalogue-table .photo-thumb-button{
  width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;
  min-height:46px!important;max-height:46px!important;padding:0!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;overflow:hidden!important;border:1px solid #e5dccf!important;
  border-radius:9px!important;background:#fff!important;cursor:zoom-in!important;line-height:0!important;text-decoration:none!important;
}
.catalogue-table .photo-thumb-button img,.catalogue-table img.product-thumb{
  width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;
  min-height:46px!important;max-height:46px!important;object-fit:cover!important;display:block!important;
}
.photo-lightbox{display:none;position:fixed;inset:0;z-index:999999;align-items:center;justify-content:center;padding:24px;}
.photo-lightbox:target{display:flex;}
.photo-lightbox__backdrop{position:absolute;inset:0;background:rgba(20,16,12,.72);cursor:zoom-out;}
.photo-lightbox__dialog{position:relative;z-index:1;background:#fffdf9;border:1px solid #e5dccf;border-radius:18px;box-shadow:0 26px 80px rgba(20,16,12,.34);overflow:hidden;max-width:min(94vw,1100px);max-height:94vh;}
.photo-lightbox__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid #e5dccf;}
.photo-lightbox__close{width:34px;height:34px;border-radius:999px;border:1px solid #d8cbb9;background:#fff;color:#111;text-decoration:none;font-size:26px;line-height:30px;text-align:center;}
.photo-lightbox__image{display:block;width:auto!important;height:auto!important;max-width:min(94vw,1100px)!important;max-height:calc(94vh - 62px)!important;object-fit:contain!important;background:#fff;}