/* The app's colours and shape. One column on a phone, two on a big screen. */

:root {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --ink: #1d1d1f;
  --muted: #86868b;
  --line: #d1d1d6;
  --accent: #0071e3;
  --good: #34c759;
  --warn: #ff9f0a;
}

* { box-sizing: border-box; }

/* What the app hides stays hidden.
   The browser's own rule for [hidden] is weaker than any class in this
   stylesheet, so a class that sets a display would show it again. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2 { margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }

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

.muted { color: var(--muted); }

/* The shell: one column until there is room for two. The header takes
   the room it needs and the screen takes the rest: two rows that share
   what is left would give the header half the phone.

   The column is minmax(0, 1fr) and not 1fr: a plain 1fr track may not
   be smaller than the widest thing in it, so one wide table would make
   the whole page scroll sideways on a phone. minmax(0, 1fr) lets the
   screen shrink to the phone and lets the table scroll inside its own
   box instead. */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: 1rem;
  min-width: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand { font-weight: 700; }
.nav { display: flex; flex-wrap: wrap; gap: 1rem; flex: 1; }
.account { display: flex; align-items: center; gap: .75rem; }
.name { color: var(--muted); font-size: .95rem; }

/* The screen in the shell. min-width: 0 lets it shrink below the width
   of what it holds, so a wide table scrolls inside the screen and the
   page keeps the width of the phone. */
.view {
  padding: 1rem;
  min-width: 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
}

/* Sign in. */
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-form {
  width: 100%;
  max-width: 22rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
}

.login-form h1 { font-size: 1.25rem; }
.login-form label {
  display: block;
  margin: .75rem 0 .25rem;
  font-size: .9rem;
  color: var(--muted);
}

input {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

button {
  font: inherit;
  cursor: pointer;
  padding: .6rem 1rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

button.primary {
  width: 100%;
  margin-top: 1rem;
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

button.primary:disabled { opacity: .6; cursor: default; }

.error {
  margin: .75rem 0 0;
  padding-left: .6rem;
  border-left: 3px solid var(--warn);
}

.error:empty { display: none; }

/* People: the owner's list of accounts.
   The table is as wide as it needs to be, and this box is where it
   scrolls: the page itself keeps the width of the phone. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.people-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.people-table th,
.people-table td {
  padding: .55rem .6rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.people-table th {
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.people-table select {
  padding: .3rem .4rem;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.row-actions { display: flex; gap: .5rem; }

button.small { padding: .35rem .6rem; font-size: .85rem; }

button:disabled { opacity: .5; cursor: not-allowed; }

input:disabled,
select:disabled {
  opacity: .65;
  cursor: not-allowed;
  background: #f2f2f4;
}

.status { display: inline-flex; align-items: center; gap: .4rem; }

.status .dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--muted);
}

.status.on .dot { background: var(--good); }

.hint { font-size: .8rem; }

.add-person { margin-top: 1.25rem; max-width: 34rem; }

.add-person h3 { margin: 0 0 .25rem; font-size: 1rem; }

.add-person .fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
}

.add-person label {
  display: block;
  margin: 0 0 .25rem;
  font-size: .85rem;
  color: var(--muted);
}

.add-person select {
  padding: .6rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.add-person .muted { font-size: .85rem; }

button.primary.inline { width: auto; margin-top: .5rem; }

/* Designs: the list, the month strip and the search. */
.month-strip {
  margin: 0 0 .75rem;
  color: var(--muted);
  font-size: .9rem;
}

.design-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.segmented .seg {
  border: 0;
  border-radius: 0;
  padding: .45rem .8rem;
  background: var(--panel);
}

.segmented .seg + .seg { border-left: 1px solid var(--line); }

.segmented .seg.on {
  background: var(--accent);
  color: #fff;
}

input.search { max-width: 16rem; }

.design-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.design-row { border-bottom: 1px solid var(--line); }

.design-open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .75rem;
  width: 100%;
  padding: .7rem .2rem;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: none;
}

.design-open:hover { background: #f2f2f4; }

.design-open .customer { font-weight: 600; }

.design-open .area,
.design-open .panels,
.design-open .owner {
  color: var(--muted);
  font-size: .9rem;
}

.design-open .price {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* A sold job is quiet, and the badge says so in words as well. */
.design-row.sold .customer { font-weight: 500; color: var(--muted); }

.badge {
  padding: .1rem .45rem;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.badge.quoted { color: var(--accent); border-color: var(--accent); }

.badge.deposit_paid { color: #1f7a37; border-color: var(--good); }

.empty {
  padding: 1.5rem 0;
  text-align: center;
}

.new-design { margin-top: 1.25rem; max-width: 34rem; }

.new-design h3 { margin: 0 0 .25rem; font-size: 1rem; }

.new-design .fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
}

.new-design label {
  display: block;
  margin: 0 0 .25rem;
  font-size: .85rem;
  color: var(--muted);
}

.new-design .row-actions { margin-top: .75rem; }

/* The room: the five steps of a quote. */
.room-page { display: grid; gap: .75rem; }

.room .steps {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.room .step {
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}

.room .step:first-child { padding-top: 0; border-top: 0; }

.room .step-title {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .6rem;
  font-size: 1rem;
}

.room .step-name { font-weight: 600; }

.room .step-body {
  display: grid;
  gap: .75rem;
}

/* A step that is done says so. A step that is not done is not wrong. */
.tick {
  color: #1f7a37;
  font-size: .8rem;
  font-weight: 500;
}

.tick:empty { display: none; }

.room .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .5rem;
}

button.card {
  padding: .6rem .8rem;
  text-align: left;
  border-radius: 10px;
}

button.card.on {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.room .field label {
  display: block;
  margin: 0 0 .25rem;
  font-size: .85rem;
  color: var(--muted);
}

.room input.number { max-width: 12rem; }

.room select {
  max-width: 22rem;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.bill {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.frozen {
  margin: .75rem 0 0;
  padding: .6rem .75rem;
  color: #8a5a00;
  background: #fff8ef;
  border: 1px solid var(--warn);
  border-radius: 8px;
}

/* The design step: the money, the choices and the picture. */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  padding: .85rem;
  background: #f2f2f4;
  border-radius: 10px;
}

.sum { display: grid; gap: .15rem; }

.sum-label {
  color: var(--muted);
  font-size: .8rem;
}

.sum-value {
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.room .amount { font-variant-numeric: tabular-nums; }

.saving {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
}

.saving:empty { display: none; }

.stale {
  display: block;
  color: #8a5a00;
  font-size: .75rem;
  font-weight: 500;
}

.stale:empty { display: none; }

.choice {
  display: grid;
  gap: .4rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

.choice h4 {
  margin: 0;
  font-size: .95rem;
}

.count-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.count {
  min-width: 2rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

button.count-btn {
  padding: .25rem .7rem;
  font-size: 1.1rem;
  line-height: 1.2;
}

.note {
  margin: 0;
  color: #8a5a00;
  font-size: .85rem;
}

.note:empty { display: none; }

.extras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}

.extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.extra label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .9rem;
}

.extra input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.diagram-box { margin-top: .25rem; }

.diagram-box svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* The present screen: the picture first, then the numbers that matter. */
.present-head { margin-bottom: .75rem; }

.present-head h2 { margin-bottom: .15rem; }

.present .diagram-box { margin-bottom: .9rem; }

.present-operator {
  display: grid;
  gap: .5rem;
  justify-items: start;
  margin: .9rem 0 0;
  padding: .75rem .85rem;
  background: #f2f2f4;
  border-radius: 10px;
}

.present-operator h3 {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
}

.present-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .9rem;
}

.confirm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem;
  padding: .75rem .85rem;
  background: #fff8ef;
  border: 1px solid var(--warn);
  border-radius: 10px;
}

.confirm-bar p { margin: 0; font-weight: 600; }

/* The catalogue: the price list and the tariffs. */
.catalogue-body { display: grid; gap: 1.25rem; }

.catalogue-group h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
}

.catalogue-group > .muted { font-size: .85rem; }

.catalogue-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.catalogue-row {
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}

.catalogue-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
}

.catalogue-line.muted {
  color: var(--muted);
  font-size: .85rem;
}

.catalogue-name { font-weight: 600; }

.catalogue-kind {
  padding: .05rem .4rem;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.catalogue-numbers { color: var(--muted); font-size: .9rem; }

/* A row that is switched off is on the screen, but quiet. */
.catalogue-row.off { color: var(--muted); }

.catalogue-row.off .catalogue-name { font-weight: 500; }

.catalogue-off {
  padding: .05rem .4rem;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.catalogue-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  font-size: .9rem;
}

.catalogue-toggle input[type="checkbox"] { width: auto; }

.catalogue-price {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.catalogue-row .stale { margin-top: .2rem; }

.sample-banner {
  margin: 0;
  padding: .6rem .75rem;
  color: #8a5a00;
  background: #fff8ef;
  border: 1px solid var(--warn);
  border-radius: 8px;
}

.catalogue-form { max-width: 46rem; }

.catalogue-form h4 {
  margin: 0 0 .5rem;
  font-size: .95rem;
}

.catalogue-form .fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
}

.catalogue-form label {
  display: block;
  margin: 0 0 .25rem;
  font-size: .85rem;
  color: var(--muted);
}

.catalogue-form .check label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .9rem;
  color: var(--ink);
}

.catalogue-form input[type="checkbox"] { width: auto; }

.catalogue-form select {
  padding: .6rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.catalogue-form .row-actions { margin-top: .75rem; }

@media (min-width: 900px) {
  /* On a wide screen the shell is a sidebar and a screen, side by side:
     one row, and the sidebar reaches the bottom of it. The screen keeps
     minmax(0, 1fr) so that a wide table still scrolls inside it. */
  .shell { grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: 1fr; }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .nav { flex-direction: column; gap: .5rem; }

  .view { padding: 1.5rem; }
}