/*
 * COMFORTEX Configurator — design system.
 *
 * A plain stylesheet, deliberately: no Vite, no build step, no npm on the server.
 * The deployment is a file copy onto a host with no console, so anything needing
 * a build would have to be built somewhere else and shipped — one more thing to
 * go stale silently.
 *
 * Colours come from frontend spec §1.1, corrected to the vector logo's true
 * values rather than the JPEG-sampled ones in the document (see logs.md D3).
 *
 * THE COLOUR RULE THAT MATTERS (§1.1):
 *   brand red is NEVER used for warnings.
 *   alert red is NEVER used for buttons or branding.
 * If a user cannot tell "this is our brand" from "something is wrong", the whole
 * palette has failed.
 */

:root {
  --brand-red: #ED1C24;
  --ink:       #231F20;
  --white:     #FFFFFF;

  /* Neutrals do the structural work. Never tint them red. */
  --grey-50:  #F7F7F6;
  --grey-100: #ECECEA;
  --grey-200: #D6D6D3;
  --grey-400: #9A9A96;
  --grey-600: #5C5C58;

  /* Functional palette, deliberately separate from the brand. */
  --alert:   #9B1B1B;
  --success: #1E7A46;
  --warning: #B7791F;

  --r-ctrl: 8px;
  --r-card: 12px;

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--grey-50);
  color: var(--ink);
  font: 400 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  /* Frontend spec §3.4, hard rule: never a sideways scroll, at any width. */
  overflow-x: hidden;
}

h1, h2, h3 { font-weight: 500; margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

a { color: var(--brand-red); }

/* ---- shell -------------------------------------------------------------- */

.topbar {
  background: var(--ink);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 54px;
  flex-wrap: wrap;
}
.topbar__logo { height: 30px; display: block; }
.topbar__spacer { flex: 1; }
.topbar__ctx { color: #fff; opacity: .7; font-size: 13px; }
.topbar__user { color: #fff; font-size: 13px; display: flex; align-items: center; gap: 12px; }
.topbar__user form { margin: 0; }
.topbar__user button {
  background: none; border: 0; color: #fff; opacity: .7;
  font: 400 13px var(--font); cursor: pointer; padding: 0; text-decoration: underline;
}
.topbar__user button:hover { opacity: 1; }

/* Role-dependent nav. Flat — this is a tool, not a marketing site (§4.1). */
.nav { display: flex; gap: 2px; align-items: stretch; }
.nav a {
  color: #fff; opacity: .72; text-decoration: none; font-size: 14px;
  padding: 17px 12px; border-bottom: 2px solid transparent;
}
.nav a:hover { opacity: 1; }
/* The one place brand red appears in the chrome (§4.1). */
.nav a.on { opacity: 1; border-bottom-color: var(--brand-red); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 20px 16px 80px; }
.wrap--narrow { max-width: 460px; }

.page-head {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.page-head .sub { color: var(--grey-600); font-size: 13px; }

/* ---- surfaces ----------------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-card);
  padding: 16px;
}
.card + .card { margin-top: 14px; }
.card > h2, .card > h3 { margin-bottom: 12px; }

.rule { height: 1px; background: var(--grey-200); margin: 12px 0; }

/* ---- forms -------------------------------------------------------------- */

label { display: block; font-size: 13px; color: var(--grey-600); margin-bottom: 5px; }

input, select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-ctrl);
  font: 400 15px var(--font);
}
textarea { min-height: 80px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand-red);
  outline-offset: -1px;
  border-color: var(--brand-red);
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.field-row + .field-row { margin-top: 12px; }
.hint { font-size: 12px; color: var(--grey-400); margin-top: 4px; }

/* Two-segment control. Frequently touched and error-prone, so it is large and
   unmistakable (§5) — a wrong operation side means a shutter is remade. */
.seg { display: flex; border: 1px solid var(--grey-200); border-radius: var(--r-ctrl); overflow: hidden; }
.seg button {
  flex: 1; height: 40px; border: 0; background: #fff; color: var(--grey-600);
  font: 400 14px var(--font); cursor: pointer;
}
.seg button.on {
  color: var(--brand-red); font-weight: 500;
  box-shadow: inset 0 0 0 2px var(--brand-red);
}

/* ---- buttons ------------------------------------------------------------ */
/* Primary is solid brand red, ONE per screen. Never two competing (§5). */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-ctrl);
  background: var(--brand-red); color: #fff;
  font: 500 15px var(--font); cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(.94); }
.btn--secondary { background: #fff; color: var(--ink); border: 1px solid var(--grey-200); }
.btn--small { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn--danger { background: #fff; color: var(--alert); border: 1px solid var(--grey-200); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ---- messages ----------------------------------------------------------- */

.msg { border-radius: var(--r-ctrl); padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.msg--error   { background: #F7E9E9; color: var(--alert);   border: 1px solid #E4C4C4; }
.msg--success { background: #E4F2EA; color: var(--success); border: 1px solid #C2DFCF; }
.msg--warning { background: #FBF3E3; color: var(--warning); border: 1px solid #EBDCBB; }
.msg--info    { background: var(--grey-100); color: var(--grey-600); }

/* A pending input, not an error — style it neutral grey, never alert red (§4.2). */
.pending { color: var(--grey-400); }

/* ---- badges ------------------------------------------------------------- */

.badge {
  display: inline-block; font-size: 11px; font-weight: 500;
  padding: 2px 9px; border-radius: 99px; background: var(--grey-100); color: var(--grey-600);
}
.badge--draft    { background: var(--grey-100); color: var(--grey-600); }
.badge--pending  { background: #FBF0DC; color: var(--warning); }
.badge--approved { background: #E4F2EA; color: var(--success); }
.badge--rejected { background: #F5E3E3; color: var(--alert); }

/* ---- tables ------------------------------------------------------------- */
/* Hairline rows, no zebra striping, right-aligned tabular numbers (§5).
   On phones every table re-cuts into stacked cards — NEVER a horizontal scroll
   and never a min-width overflow (§3.4, the hard rule). */

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--grey-600);
  padding: 8px 10px; border-bottom: 1px solid var(--grey-200);
}
.table td { padding: 11px 10px; border-bottom: 1px solid var(--grey-100); font-size: 14px; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table a { text-decoration: none; color: var(--ink); font-weight: 500; }
.table a:hover { color: var(--brand-red); }

@media (max-width: 720px) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr {
    border: 1px solid var(--grey-200); border-radius: var(--r-card);
    padding: 12px; margin-bottom: 10px; background: #fff;
  }
  .table td { border: 0; padding: 2px 0; }
  /* Name and total stay prominent; the rest is demoted (§3.4). */
  .table td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--grey-400); font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; display: block;
  }
  .table .num { text-align: left; }
}

.empty { text-align: center; padding: 42px 16px; color: var(--grey-600); }
.empty p { margin: 0 0 16px; }

/* ---- product tiles ------------------------------------------------------ */
/*
 * The picker. auto-fill rather than a fixed column count, so the same markup gives
 * four tiles on a desk and one on a phone with no breakpoint to maintain — and
 * minmax()'s lower bound is what keeps a long product name from forcing the page
 * sideways (§3.4: never a sideways scroll, at any width).
 */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-ctrl);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
}

a.tile:hover { border-color: var(--brand-red); }

.tile__name { font-weight: 500; font-size: 15px; }
.tile__meta { font-size: 12px; color: var(--grey-400); }

/* The affordance carries the brand red, not the whole tile: seventeen red tiles
   would read as seventeen warnings (§1.1). */
.tile__cta { margin-top: auto; font-size: 13px; color: var(--brand-red); }

/* Present, legible, plainly not for now. Not display:none — see the view. */
.tile--soon { background: var(--grey-50); border-style: dashed; }
.tile--soon .tile__name { color: var(--grey-600); font-weight: 400; }
.tile--soon .badge { margin-top: auto; align-self: flex-start; }

/* One column on a phone, so the equal-height that makes a grid readable is only
   scroll to get through. Twenty-three tiles at a desk height would be a long thumb. */
@media (max-width: 560px) {
  .tile { min-height: 0; padding: 11px 12px; }
  .tile__cta, .tile--soon .badge { margin-top: 4px; }
}

/* ---- login -------------------------------------------------------------- */

.login { min-height: 72vh; display: flex; align-items: center; justify-content: center; }
.login .card { width: 100%; }
.login__mark { text-align: center; margin-bottom: 20px; }
.login__mark img { height: 46px; }