/* ---------- Inter, self-hosted so the shop still looks right offline ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/inter-latin-1f021a24.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/inter-latin-ext-65edaaef.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The rupee sign is outside every standard subset, so it ships on its own —
   without this, every price would mix Inter digits with a fallback ₹. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/inter-rupee-f107ddfd.woff2") format("woff2");
  unicode-range: U+20B9;
}

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-sunken: #fafbfc;
  --border: #e6e8ee;
  --border-strong: #d3d7e0;
  --text: #12141a;
  --text-soft: #454b57;
  --muted: #737a88;
  --accent: #3d4ee8;
  --accent-hover: #3140cc;
  --accent-soft: #eef0fe;
  --ok: #04795b;
  --ok-soft: #e3f5ef;
  --bad: #c02618;
  --bad-soft: #fdeceb;
  --warn: #8a5300;
  --warn-soft: #fdf2e0;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(18, 20, 26, .05);
  --shadow: 0 1px 3px rgba(18, 20, 26, .06), 0 4px 12px -4px rgba(18, 20, 26, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { letter-spacing: -.018em; }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 216px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 18px;
}
.brand__mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--accent), #6f7cf0);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.02em;
}
.brand__text { min-width: 0; }
.brand__name {
  font-weight: 650;
  font-size: 14px;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__sub { font-size: 11px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.nav__link:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.nav__link--active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav__link svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav__spacer { margin-top: auto; }

/* Sign out is a button_to form, so it needs the browser chrome stripped off. */
button.nav__link {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

/* Capped so the billing rows never stretch to silly widths, and centred in the
   space left over — otherwise an ultrawide monitor pins everything to the left
   edge with a third of the screen empty beside it. */
.main {
  flex: 1;
  padding: 26px 30px 64px;
  max-width: 1440px;
  min-width: 0;
  margin-inline: auto;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-head h1 { font-size: 23px; margin: 0; font-weight: 650; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.page-head__actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Cards & tables ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow: hidden;
}
.card__head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.card__body { padding: 16px; }
.card__body--flush { padding: 0; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-sunken);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--surface-sunken); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

.empty { padding: 46px 16px; text-align: center; color: var(--muted); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 17px;
  box-shadow: var(--shadow-sm);
}
.stat__label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stat__value {
  font-size: 26px;
  font-weight: 650;
  margin-top: 6px;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.stat__note { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  /* An <input type=submit> ignores inline-flex and takes the browser's own
     line-height, so a submit and a link styled as buttons end up different
     heights and sit at different levels in a row. */
  line-height: 1.4;
}
.btn:hover { background: var(--surface-sunken); border-color: var(--muted); text-decoration: none; }
.btn:active { box-shadow: none; }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(61, 78, 232, .3);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--danger { color: var(--bad); border-color: #f0cbc7; background: var(--surface); }
.btn--danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn--small { padding: 5px 10px; font-size: 12.5px; }
.btn--link { border: 0; background: none; box-shadow: none; color: var(--muted); padding: 4px 6px; }
.btn--link:hover { background: var(--bad-soft); color: var(--bad); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 15px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.field .hint { font-size: 11.5px; color: var(--muted); }

input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], input[type=search], input[type=tel], select, textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61, 78, 232, .13);
}
input[type=number] { font-variant-numeric: tabular-nums; }
textarea { resize: vertical; min-height: 70px; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.checkbox input { width: auto; accent-color: var(--accent); }

/* Buttons inside a stretching field column should keep their own width. */
.field .btn { align-self: flex-start; }

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
}

.filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.filters .field { min-width: 150px; }

/* A checkbox needs only its own width; the 150px floor meant for text inputs
   left a gap between it and the buttons. */
.filters .field:has(> .checkbox) { min-width: 0; }

/* ---------- Price lookup ---------- */
.lookup { position: relative; margin-bottom: 18px; max-width: 460px; }
.lookup input[type=search] { padding-left: 12px; }

/* The results float over the page rather than pushing it down, so checking a
   price never disturbs whatever is on screen. */
.lookup__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);   /* below the input, not on top of it */
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.lookup__hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.lookup__hit:last-child { border-bottom: 0; }
.lookup__hit:hover { background: var(--accent-soft); text-decoration: none; }

.lookup__name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lookup__meta { white-space: nowrap; }
.lookup__empty { padding: 13px; }

@media (max-width: 620px) {
  .lookup { max-width: none; }
  .lookup__hit { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .lookup__meta { grid-column: 1 / -1; }
}

/* Dashboard panels share the width evenly and wrap on their own, rather than
   using the billing screen's fixed narrow sidebar column. */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
  align-items: start;
}
.dash-grid > * { min-width: 0; }

/* ---------- Ranked bar chart ---------- */
/* One grid for the whole chart, with each row contributing its cells to it.
   A grid per row would size the value column to that row's own text, so a
   short "7 PCS" would widen its track and knock the bars out of line. */
.chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40% auto;
  align-items: center;
  gap: 11px 12px;
}
.chart__row { display: contents; }
.chart__label {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart__label a { color: var(--text); }

/* The track shows the scale each bar is read against. */
.chart__track {
  height: 10px;
  border-radius: 5px;
  background: var(--bg);
  overflow: hidden;
}
.chart__bar {
  height: 100%;
  min-width: 3px;
  border-radius: 0 4px 4px 0;   /* rounded data end, square against the baseline */
  transition: width .2s ease;
}
.chart__value {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.filters__spacer { flex: 1; }

/* Narrow screens: the label sits above its bar instead of stealing its width. */
@media (max-width: 620px) {
  .chart { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .chart__label { grid-column: 1 / -1; }
}

/* ---------- Badges & flash ---------- */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--bad { background: var(--bad-soft); color: var(--bad); }
.badge--muted { background: var(--bg); color: var(--muted); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }

.flash {
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid;
}
.flash--notice { background: var(--ok-soft); border-color: #b9e3d5; color: var(--ok); }
.flash--alert { background: var(--bad-soft); border-color: #f0cbc7; color: var(--bad); }

.errors {
  background: var(--bad-soft);
  border: 1px solid #f0cbc7;
  color: var(--bad);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.errors ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Billing screen ---------- */
.bill-layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }

/* Grid children are min-width:auto by default, so the wide items table would
   push the column past the viewport and scroll the whole page instead of
   scrolling inside its own wrapper. */
.bill-layout > * { min-width: 0; }
.card, .table-wrap { max-width: 100%; }

/* Below this the row cannot stay legible, so the wrapper scrolls instead of
   crushing every column. */
/* Fixed layout so the column widths set on the header are honoured. With
   automatic layout the browser hands the description column the slack it wants
   and squeezes the selects until "COIL" reads as "COI". */
.lines { width: 100%; min-width: 790px; font-size: 13.5px; table-layout: fixed; }
.lines th { padding: 8px 6px; }
.lines td { padding: 5px 6px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.lines input, .lines select { padding: 6px 7px; font-size: 13.5px; }

/* The native dropdown arrow is drawn inside the control, so selects keep a
   little room for it on the right. */
.lines select { padding-right: 16px; }
.lines input[type=number] { text-align: right; }

/* Spinners eat width the amounts need, and nobody nudges a rate one paisa at
   a time with an arrow. */
.lines input[type=number]::-webkit-inner-spin-button,
.lines input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lines input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.lines tbody tr:hover { background: transparent; }
.line__amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.line--removed { display: none; }

.totals { font-size: 13.5px; }
.totals__row { display: flex; justify-content: space-between; padding: 7px 0; gap: 12px; }
.totals__row + .totals__row { border-top: 1px solid var(--border); }
.totals__row span:first-child { color: var(--text-soft); }
.totals__row span:last-child { font-variant-numeric: tabular-nums; font-weight: 550; }
.totals__row--grand {
  border-top: 2px solid var(--border-strong) !important;
  margin-top: 5px;
  padding-top: 12px;
  font-size: 20px;
  letter-spacing: -.025em;
}
.totals__row--grand span { font-weight: 700 !important; color: var(--text) !important; }

.summary-box {
  background: var(--accent-soft);
  border: 1px solid #dfe3fd;
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ---------- Invoice view ---------- */
.invoice-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.kv { font-size: 13.5px; margin: 0; }
.kv dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kv dd { margin: 3px 0 12px; }

/* ---------- Responsive ---------- */

/* Tablet: the totals panel drops below the items rather than squeezing them. */
@media (max-width: 1080px) {
  .bill-layout { grid-template-columns: 1fr; }
  .main { padding: 22px 20px 56px; }
}

/* Phones and small tablets: the sidebar becomes a scrolling bar across the top
   so the whole width goes to the work. */
@media (max-width: 860px) {
  .app { flex-direction: column; }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
  }

  .brand { padding: 0 6px 0 0; flex-shrink: 0; }
  .brand__text { display: none; }

  .nav { flex-direction: row; gap: 4px; }
  .nav__link { white-space: nowrap; padding: 7px 10px; }
  .nav__spacer { margin-top: 0; margin-left: auto; }

  /* Once the app stacks, main is a flex item in a column container and will
     not shrink below its content's minimum on its own — the wide tables would
     stretch it past the viewport instead of scrolling inside their wrappers. */
  .main { padding: 18px 14px 48px; width: 100%; max-width: 100%; }
  .page-head h1 { font-size: 20px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .stat__value { font-size: 21px; }
  .form-grid { grid-template-columns: 1fr; gap: 13px; }
  .filters .field { min-width: 0; flex: 1 1 100%; }
  .card { border-radius: 10px; }
}

/* Very small phones: the nav keeps only its icons. The button selector is
   spelled out because button.nav__link outranks a bare .nav__link rule. */
@media (max-width: 480px) {
  .nav__link, button.nav__link { padding: 7px 9px; font-size: 0; gap: 0; }
  .nav__link svg { width: 19px; height: 19px; }
  .sidebar { overflow-x: visible; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1; justify-content: center; }
}

/* ---------- Login ---------- */
.auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth .card { width: 100%; max-width: 380px; margin: 0; box-shadow: var(--shadow); }
.auth__brand { text-align: center; margin-bottom: 18px; }
.auth__brand .brand__mark { margin: 0 auto 10px; width: 40px; height: 40px; font-size: 17px; }
.auth__brand h1 { font-size: 19px; margin: 0; font-weight: 650; }
.auth__brand p { color: var(--muted); font-size: 13px; margin: 4px 0 0; }