/* Analisis, Talian, Panggilan (and its pages). Built on app.css; adds only what is particular to these
   pages. The chart parts themselves live in app.css. */

/* ============================ Analisis ============================ */
.analisis .plate {
  max-width: none;
}
/* a one-line caption under a section heading (e.g. that the ledger is daily totals, not the live count) */
.section-cap {
  margin: -6px 0 12px;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.analisis-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
@media (min-width: 900px) {
  .analisis-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ============================ Talian (line states) ============================ */
.lines {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.line-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
.line-row:last-child {
  border-bottom: 0;
}
.line-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 14px 0;
  border-right: 1px solid var(--rule);
}
.line-main {
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.line-name {
  font-weight: 600;
}
.line-state {
  font-size: 0.875rem;
  color: var(--ink-2);
}
.line-facts {
  display: flex;
  gap: 28px;
  padding: 13px 18px;
}
.line-fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
}
.line-fact-k {
  font-size: 0.6875rem;
  font-stretch: 85%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.line-fact-v {
  font-size: 0.9375rem;
}
/* The head row carries the two column labels once; a line's facts sit under fixed-width columns so the
   head and every row line up. Hidden on a phone, where the labels stay per row. */
.line-head {
  display: none;
}
.line-fact-h {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (min-width: 561px) {
  .line-head {
    display: grid;
  }
  .line-head .line-mark,
  .line-head .line-main {
    padding: 0;
  }
  .line-head .line-facts {
    padding: 12px 18px 6px;
  }
  .lines .line-fact-k {
    display: none;
  }
  .line-fact--when {
    width: 160px;
  }
  .line-fact--lead {
    width: 44px;
  }
}
.line-ok .line-mark {
  color: var(--pen);
}
/* A line that is not connected or failed to read uses the warn tokens, the same as the notice band — not
   the owed red, which is kept for what the shop owes a customer. */
.line-putus {
  background: var(--warn-wash);
}
.line-putus .line-mark {
  color: var(--warn);
  border-right-color: color-mix(in srgb, var(--warn) 30%, transparent);
}
.line-putus .line-state {
  color: var(--warn);
  font-weight: 600;
}
.line-gagal {
  background: var(--warn-wash);
}
.line-gagal .line-mark {
  color: var(--warn);
  border-right-color: color-mix(in srgb, var(--warn) 30%, transparent);
}
.line-gagal .line-state {
  color: var(--warn);
  font-weight: 600;
}
@media (max-width: 560px) {
  .line-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  /* the mark spans both rows so its vertical rule runs the full height of every row (the rows are
     implicit, so "-1" would name the first line again: the span has to be counted) */
  .line-mark {
    grid-row: 1 / span 2;
  }
  .line-facts {
    grid-column: 2;
    padding: 0 16px 13px;
    gap: 24px;
  }
  .line-fact {
    text-align: left;
  }
}

/* ============================ Panggilan ============================ */
.call-id {
  margin-bottom: 16px;
}
.call-recorder {
  color: var(--ink-2);
  margin-bottom: 4px;
}
.change-name > summary {
  cursor: pointer;
  color: var(--pen);
  font-weight: 500;
  font-size: 0.9375rem;
  display: inline-block;
  padding: 4px 0;
}
.change-name-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}
.change-name-form .field {
  margin-bottom: 0;
}

.call-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}
.call-take {
  flex: 0 0 auto;
}
.call-take-btn {
  min-height: 48px;
  padding: 0 24px;
  font-size: 1rem;
}
.call-search {
  display: flex;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
}
.call-search input {
  min-width: 0;
}
/* the search submit sits in a row with the 48px field, so it is 48px tall at every width */
.call-search .btn {
  min-height: 48px;
}
@media (max-width: 560px) {
  .call-take,
  .call-take-btn {
    width: 100%;
  }
  .call-search {
    flex-basis: 100%;
  }
}
.call-owner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 6px;
}
/* the two owner links align with the page's left edge (drop the quiet button's left padding) */
.call-owner .btn {
  padding-left: 0;
}

/* held numbers: ruled panels in two columns on a desktop (the red margin rule belongs here) */
.call-grid {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
@media (min-width: 1024px) {
  .call-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.call-grid .call-panel {
  grid-template-columns: 44px minmax(0, 1fr);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.call-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.call-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.call-name {
  font-size: 1.0625rem;
  font-weight: 650;
}
.call-until {
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.call-dial {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
}
.call-none {
  color: var(--ink-3);
  font-size: 0.875rem;
}
.call-history {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.hist-cap {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-stretch: 85%;
  margin-bottom: 5px;
}
.hist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hist {
  font-size: 0.875rem;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.hist-what {
  color: var(--ink);
}
.hist-strike .hist-when,
.hist-strike .hist-what {
  text-decoration: line-through;
}
.hist-strike .hist-what {
  color: var(--ink-2);
}
.hist-note {
  color: var(--ink-3);
  font-style: italic;
}
.call-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.call-form .field {
  margin-bottom: 0;
}
.field-opt {
  font-weight: 400;
  color: var(--ink-3);
}
/* the note is optional, so it folds away until someone wants it */
.call-note > summary {
  padding: 9px 0;
  cursor: pointer;
  color: var(--pen);
  font-size: 0.9375rem;
  font-weight: 500;
}
.call-note[open] > summary {
  margin-bottom: 6px;
}
.call-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.call-results .btn {
  width: 100%;
}
/* "Jangan hubungi lagi" takes two steps: a quiet disclosure (not a button, 44px tall), then the confirm
   button at content width (not full width) so it is never hit by accident. */
.call-dnc {
  border-top: 1px solid var(--rule);
  padding-top: 6px;
}
/* a control, like "Tambah nota": the pen's ink and the browser's own disclosure marker; quiet, never red */
.call-dnc > summary {
  padding: 13px 0;
  cursor: pointer;
  color: var(--pen);
  font-size: 0.9375rem;
  font-weight: 500;
}
.call-dnc[open] > summary {
  margin-bottom: 8px;
}
.call-dnc-note {
  color: var(--ink-2);
  font-size: 0.875rem;
  margin-bottom: 10px;
  max-width: 48ch;
}

/* ============================ Cari (search a customer) ============================ */
.cari-search {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cari-search .field {
  margin-bottom: 0;
  flex: 1 1 240px;
  min-width: 0;
}
/* the submit sits in a row with the 48px field, so it is 48px tall at every width */
.cari-search .btn {
  min-height: 48px;
}
/* the empty / no-match state is as wide as the search field above it, and it teaches the next step */
.cari .empty {
  max-width: none;
}
.find {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.find-hit {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.find-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.find-name {
  font-size: 1.0625rem;
  font-weight: 650;
}
.find-phone {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* ============================ Import (Fresha upload) ============================ */
.import-steps {
  list-style: none;
  counter-reset: step;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.import-steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.import-steps > li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pen-wash);
  color: var(--pen);
  font-weight: 650;
  font-size: 0.9375rem;
}
.step-t {
  padding-top: 5px;
}
.import-form {
  grid-column: 2;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
}
.import-form .field {
  margin-bottom: 0;
}
.import-report {
  background: var(--pen-wash);
  border: 1px solid color-mix(in srgb, var(--pen) 28%, transparent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.import-report-h {
  font-weight: 650;
  margin-bottom: 8px;
}
.import-report ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink-2);
}

/* ============================ Kemajuan (progress) ============================ */
.kemajuan .plate {
  max-width: none;
}
/* One ledger sheet: Sudah/Belum dihubungi sum to the "Jumlah nombor" footing (single rule above, double
   below), then the breakdown note set apart beneath. */
.kem-ledger {
  max-width: 420px;
  margin-bottom: 8px;
}
.kem-count {
  padding-bottom: 7px;
}
.kem-count {
  margin: 0;
}
.kem-count .kv-row:nth-last-child(2) {
  border-bottom: 0;
}
.kem-count .kem-foot {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 3px double var(--rule-strong);
}
.kem-count .kem-foot dt,
.kem-count .kem-foot dd {
  font-weight: 650;
}
.kem-of {
  margin: 18px 0 8px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.kem-of-rows {
  margin: 0;
}
.kem-grid {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .kem-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Disclosures are controls: on a phone each is as tall as any other target (48 px). Last in the file so
   it wins over the base rules above. */
@media (max-width: 1023.98px) {
  .change-name > summary,
  .call-note > summary,
  .call-dnc > summary {
    padding-block: 13px;
  }
}