@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:        #1B2420;
  --ink-soft:   #4A554E;
  --muted:      #7C8A80;
  --cream:      #F6F4EE;
  --panel:      #FFFFFF;
  --line:       #E3DFD3;
  --forest:     #1F3A2E;
  --forest-dk:  #16291F;
  --wheat:      #C9902F;
  --wheat-lt:   #E8B968;
  --danger:     #B4432E;
  --radius:     10px;
  --shadow:     0 1px 2px rgba(27,36,32,0.06), 0 8px 24px -12px rgba(27,36,32,0.18);
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0;
  font-family:'IBM Plex Sans', sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1,h2{ font-family:'Fraunces', serif; margin:0; }

button{ font-family: inherit; }
input, textarea{ font-family: inherit; }

/* ============ LOGIN ============ */
.login-body{ height:100vh; overflow:hidden; }

.login-scene{
  display:grid;
  grid-template-columns: 440px 1fr;
  height:100vh;
}

.login-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 48px 56px;
  background: var(--panel);
  position:relative;
}

.brand-mark{ display:flex; align-items:center; gap:12px; margin-bottom:40px; }
.brand-glyph{
  width:40px; height:40px; border-radius:9px;
  background: linear-gradient(145deg, var(--forest), var(--forest-dk));
  color: var(--wheat-lt);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; font-size:20px;
  box-shadow: var(--shadow);
}
.brand-glyph.small{ width:32px; height:32px; font-size:16px; border-radius:7px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:'Fraunces', serif; font-weight:700; font-size:19px; color: var(--forest-dk); }
.brand-name em{ font-style:normal; color: var(--wheat); }
.brand-sub{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color: var(--muted); margin-top:2px; }

.login-panel h1{ font-size:28px; color: var(--forest-dk); margin-bottom:8px; }
.lede{ color: var(--ink-soft); margin:0 0 32px 0; font-size:14.5px; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.field span{ font-size:12.5px; font-weight:600; color: var(--ink-soft); letter-spacing:.01em; }
.field input, .field textarea{
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 13px;
  font-size:14.5px;
  color: var(--ink);
  background: var(--cream);
  outline:none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field textarea:focus{
  border-color: var(--forest);
  background: var(--panel);
  box-shadow: 0 0 0 3px rgba(31,58,46,0.12);
}

.field-error{
  color: var(--danger);
  font-size:13px;
  margin: -6px 0 14px 0;
  font-weight:500;
}

.btn-primary{
  width:100%;
  background: var(--forest);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:13px 16px;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  transition: background .15s, transform .05s;
}
.btn-primary:hover{ background: var(--forest-dk); }
.btn-primary:active{ transform: translateY(1px); }
.btn-primary.full{ margin-top:18px; }

.hint{ margin-top:22px; font-size:12.5px; color: var(--muted); }
.hint code{ background: var(--cream); border:1px solid var(--line); padding:1px 6px; border-radius:5px; font-family:'IBM Plex Mono', monospace; }

.login-side{
  position:relative;
  background: radial-gradient(circle at 20% 20%, #274A38 0%, var(--forest-dk) 55%, #0F1D16 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.furrow-lines{
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    100deg,
    rgba(201,144,47,0.10) 0px,
    rgba(201,144,47,0.10) 2px,
    transparent 2px,
    transparent 46px
  );
  mask-image: radial-gradient(circle at 60% 50%, black 10%, transparent 72%);
}
.side-copy{ position:relative; max-width:440px; padding:0 56px; color:#fff; }
.eyebrow{
  display:inline-block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--wheat-lt); font-weight:600; margin-bottom:18px;
}
.side-copy h2{ font-size:33px; line-height:1.22; color:#fff; margin-bottom:16px; font-weight:600; }
.side-copy p{ color: rgba(255,255,255,0.72); font-size:15px; line-height:1.6; margin:0; }

/* ============ APP SHELL ============ */
.app-body{ height:100vh; overflow:hidden; }
.app-shell{ display:grid; grid-template-columns: 232px 1fr; height:100vh; transition: grid-template-columns .22s ease; }
.app-shell.sidebar-collapsed{ grid-template-columns: 76px 1fr; }

.sidebar-collapsed .sidebar{ padding-left:12px; padding-right:12px; }
.sidebar-collapsed .sidebar-brand{ justify-content:center; padding-left:0; padding-right:0; }
.sidebar-collapsed .brand-text,
.sidebar-collapsed .sidebar-brand .brand-name,
.sidebar-collapsed .nav-item span,
.sidebar-collapsed .sidebar-logout span{ display:none; }
.sidebar-collapsed .nav-item,
.sidebar-collapsed .sidebar-logout{ justify-content:center; padding-left:0; padding-right:0; }

.sidebar{
  background: var(--forest-dk);
  color: #EFEBDE;
  display:flex; flex-direction:column;
  padding: 22px 16px;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px; padding: 4px 8px 28px 8px;
  background:none; border:none; width:100%; text-align:left; cursor:pointer;
  border-radius:8px;
}
.sidebar-brand:hover{ background: rgba(255,255,255,0.06); }
.sidebar-brand .brand-name{ color:#fff; font-size:16.5px; }
.sidebar-brand .brand-name em{ color: var(--wheat-lt); }

.sidebar-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:11px;
  background:none; border:none; text-align:left;
  color: rgba(239,235,222,0.68);
  padding:11px 12px; border-radius:8px;
  font-size:14px; font-weight:500; cursor:pointer;
  transition: background .15s, color .15s;
}
.nav-item:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{ background: rgba(201,144,47,0.16); color: var(--wheat-lt); }
.nav-icon{ width:18px; height:18px; flex-shrink:0; }

.sidebar-logout{
  display:flex; align-items:center; gap:11px;
  background:none; border:1px solid rgba(255,255,255,0.12);
  color: rgba(239,235,222,0.75);
  padding:11px 12px; border-radius:8px;
  font-size:14px; font-weight:500; cursor:pointer;
}
.sidebar-logout:hover{ background: rgba(255,255,255,0.06); color:#fff; }

.main-area{ overflow-y:auto; padding: 30px 36px 60px; }

.view{ display:none; }
.view.active{ display:block; }

.view-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; }
.view-header h1{ font-size:25px; color: var(--forest-dk); margin-bottom:4px; }
.muted{ color: var(--muted); font-size:13.5px; margin:0; }
.muted-cell{ color: var(--muted); text-align:center; padding: 22px 0; }

.user-chip{
  font-size:12px; font-weight:600; color: var(--forest-dk);
  background: var(--wheat-lt); padding:6px 12px; border-radius:20px;
}

.sale-grid{ display:grid; grid-template-columns: 1fr 320px; gap:22px; align-items:start; }
.sale-form-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.sale-summary-col{ position:sticky; top:0; }

.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.card-title{ font-size:15px; color: var(--forest-dk); margin-bottom:14px; }
.card-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-title-row .card-title{ margin-bottom:0; }

.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 14px 16px; }
.grid-3 .field{ margin-bottom:0; }

.btn-secondary{
  background: var(--cream); border:1px solid var(--line); color: var(--forest-dk);
  padding:8px 14px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer;
}
.btn-secondary:hover{ background:#EFEBDE; }

.btn-ghost{
  background:none; border:1px solid var(--line); color: var(--ink-soft);
  padding:11px 16px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer;
  margin-top:10px;
}
.btn-ghost:hover{ background: var(--cream); color: var(--danger); border-color: var(--danger); }
.btn-ghost.full{ width:100%; }

.table-wrap{ overflow-x:auto; }
.item-input-table{ width:100%; border-collapse:collapse; font-size:13px; }
.item-input-table th{
  text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.03em;
  color: var(--muted); font-weight:600; padding:8px 6px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.item-input-table td{ padding:6px 5px; border-bottom:1px solid var(--line); vertical-align:middle; }
.item-input-table input{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:7px 8px;
  font-size:13px; background: var(--cream); text-align:right;
}
.item-input-table input.al{ text-align:left; }
.item-input-table tr:last-child td{ border-bottom:none; }

.row-remove{
  background:none; border:none; color: var(--muted); cursor:pointer; font-size:16px;
  width:26px; height:26px; border-radius:6px;
}
.row-remove:hover{ color: var(--danger); background: rgba(180,67,46,0.08); }

textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px;
  font-size:13.5px; background: var(--cream); resize:vertical; outline:none;
}
textarea:focus{ border-color: var(--forest); background: var(--panel); }

.summary-card{ padding: 22px; }
.summary-row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:13.5px; color: var(--ink-soft); }
.summary-row span:last-child{ font-weight:600; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-divider{ height:1px; background: var(--line); margin:8px 0; }
.summary-net{ font-size:15.5px; }
.summary-net span:last-child{ color: var(--forest-dk); font-weight:700; }
.summary-card .field{ margin: 10px 0 4px; }
.summary-card .field input{ text-align:right; }

@media (max-width: 980px){
  .login-scene{ grid-template-columns: 1fr; }
  .login-side{ display:none; }
  .app-shell{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .sale-grid{ grid-template-columns: 1fr; }
}

/* Hide printable invoice on screen */
.invoice-print-root{ display:none; }