@import "../style.css";
@import "../tokens.css";
/* Direct tokens import is a safety net so colours resolve even if
   ../style.css's own import chain changes shape; harmless duplicate
   otherwise. Per etalase/CLAUDE.md rule 3 + SITEMAP-JOURNEY.md.

   ============================================================
   dashboard.css — Dashboard Pos, board-specific layout only.
   Reuses .container/.section/.btn/.card/.pill from ../style.css.
   Every colour/space/radius/font is a var(--token). No hex, no
   invented px. "Hadir" and every calm state stay on the neutral
   ramp — --sev-kosong and --sev-tunggu are the only warm tokens
   used anywhere in this file.
   ============================================================ */

[x-cloak] { display: none !important; }

html, body {
  min-height: 100%;
  background: var(--bg-deep);
}

body {
  padding-bottom: 0;
}

/* ---- top bar --------------------------------------------------------- */

.dp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--margin);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

/* On a narrow screen the agency name and the clock cannot share one line
   without the name truncating mid-word, which reads as unfinished on the one
   screen a stranger judges. Stack them; both are short. */
@media (max-width: 559px) {
  .dp-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

.dp-top__agency {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.dp-top__agency span:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dp-top__clock {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--muted);
  white-space: nowrap;
}

/* ---- banner — slot-independent, always visible ------------------------ */

.dp-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-1) var(--margin);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  min-height: 32px;
}

.dp-banner__ok {
  font-size: var(--text-small);
  color: var(--muted);
}

.dp-banner__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
}

.dp-banner__pill--kosong { color: var(--sev-kosong-text); }
.dp-banner__pill--tunggu { color: var(--sev-tunggu-text); }

/* ---- layout: board + inbox ------------------------------------------- */

.dp-layout {
  padding: var(--space-2) var(--margin) var(--space-8);
}

.dp-panel { display: none; }
.dp-panel.is-active { display: block; }

/* ---- slot chips -------------------------------------------------------- */

.dp-slots {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block: var(--space-2);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.dp-slots::-webkit-scrollbar { display: none; }

.dp-chip {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding-inline: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.dp-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.dp-chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sev-kosong);
}
.dp-chip.is-active .dp-chip__dot { background: var(--paper); }

/* ---- exception cards ---------------------------------------------------- */

.dp-exceptions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dp-exception {
  text-align: left;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

/* No coloured left rule. The tinted ground and the named state already say it
   twice; a third encoding of one fact is the alert-card kit every generated
   page ships, and it reads as machine-made. Border stays the plain neutral
   --border token — a tinted border here would be a third warm hue, which
   the token rule (only --sev-kosong and --sev-tunggu are warm) forbids. */
.dp-exception--kosong { background: var(--sev-kosong-soft); border-color: var(--border); }
.dp-exception--tunggu { background: var(--sev-tunggu-soft); border-color: var(--border); }

/* The chip's fill is the same colour as the card it sits on, so the pill was an
   invisible box. Plain label in its severity colour, one less box on the page. */
.dp-exception .pill { background: none; padding-inline: 0; }

.dp-exception.dp-flash { animation: dp-flash 1.6s ease-out; }
@keyframes dp-flash {
  0% { box-shadow: 0 0 0 3px var(--ink); }
  100% { box-shadow: var(--elev-1); }
}

.dp-exception__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.dp-exception__post {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

.dp-exception__site {
  margin-top: 1px;
  font-size: 12px;
  color: var(--muted);
}

.dp-exception__line {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}
.dp-exception__line b { font-weight: 600; color: var(--ink); }
.dp-exception__line .dp-since { color: var(--muted); }

.dp-exception__quote {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dp-exception__quote .dp-who { font-weight: 600; color: var(--ink); }

/* ---- manual entry — exception card door -------------------------------- */
/* rule 6, ../../CLAUDE.md: a WhatsApp paste box may never be the only way
   in. This is a plain text-button, not a second dp-btn box, so it costs the
   exception card as little height as possible — the /dashboard/ arrival must
   not get busier. No warm token here: Catat manual is a neutral action, not
   a severity, and Ember stays reserved for Kosong alone. */

.dp-exception__manual {
  margin-top: var(--space-1);
}

.dp-exception__manualbtn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

@media (hover: hover) {
  .dp-exception__manualbtn:hover { color: var(--ink); }
}

/* ---- calm site groups --------------------------------------------------- */

.dp-sitegroups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.dp-sitegroup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.dp-sitegroup__h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}

.dp-postrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.dp-postrow:last-child { border-bottom: none; }


.dp-postrow__name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: var(--text-small);
}
.dp-postrow__post { font-weight: 500; color: var(--ink); }
.dp-postrow__worker { color: var(--muted); font-size: 12px; }

.dp-postrow__note {
  font-size: 11px;
  color: var(--sev-tunggu-text);
  flex: none;
}

.dp-postrow__tag {
  flex: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.dp-postrow.dp-flash { animation: dp-flash-row 1.6s ease-out; }
@keyframes dp-flash-row {
  0% { background: var(--n-100); }
  100% { background: transparent; }
}

.dp-empty {
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  color: var(--muted);
}

/* ---- inbox panel --------------------------------------------------------- */

.dp-paste { padding: var(--space-4); margin-bottom: var(--space-4); }
.dp-paste__h2 { font-size: var(--text-h3); font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); }
.dp-paste__area {
  width: 100%;
  min-height: 96px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-small);
  resize: vertical;
  background: var(--surface-2);
  color: var(--ink);
}
.dp-paste .dp-btn { margin-top: var(--space-3); }

.dp-note {
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.dp-proposal { padding: var(--space-4); margin-bottom: var(--space-3); }
.dp-proposal__reason { font-size: var(--text-small); color: var(--ink-2); margin-bottom: var(--space-2); }
.dp-proposal__change { font-size: var(--text-small); color: var(--ink); margin-bottom: var(--space-2); line-height: 1.5; }
.dp-proposal__actions { display: flex; gap: var(--space-2); }
.dp-proposal__actions .dp-btn { flex: 1; }
.dp-proposal__result { font-size: var(--text-small); font-weight: 600; color: var(--ink); }
.dp-proposal__result--muted { color: var(--muted); font-weight: 500; }

.dp-inbox__h3 { font-size: 12px; font-weight: 600; color: var(--muted); margin: var(--space-4) 0 var(--space-2); }

.dp-wa {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  scroll-margin-top: var(--space-8);
}
.dp-wa__meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: var(--space-1); }
.dp-wa__text { font-size: var(--text-small); color: var(--ink); }
.dp-wa__status {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.dp-wa__status.baru { color: var(--sev-tunggu-text); }
.dp-wa .dp-btn { margin-top: var(--space-2); }

.dp-wa.dp-wa--highlight {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  animation: dp-flash-wa 2.4s ease-out;
}
@keyframes dp-flash-wa {
  0% { background: var(--n-100); }
  100% { background: var(--surface); }
}

/* ---- buttons — dark ink is the only "primary", accent is reserved ------ */

.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-4);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  border: 1px solid transparent;
  cursor: pointer;
}
.dp-btn--dark { background: var(--ink); color: var(--paper); }
.dp-btn--outline { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.dp-btn--ghost { background: transparent; color: var(--muted); }

@media (hover: hover) {
  .dp-btn--dark:hover { filter: brightness(1.2); }
  .dp-btn--outline:hover { background: var(--paper); }
  .dp-exception:hover { box-shadow: var(--elev-2); }
  .dp-postrow:hover { background: var(--paper); }
  .dp-chip:hover:not(.is-active) { background: var(--paper); }
}

/* ---- bottom tabs — mobile only ------------------------------------------ */

.dp-tabs { display: none; }

/* ---- detail overlay ------------------------------------------------------ */

.dp-detail {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
}

.dp-detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 14, 12, 0.5);
}

.dp-detail__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--space-4) var(--margin) var(--space-8);
  box-shadow: var(--elev-2);
}

.dp-detail__top { margin-bottom: var(--space-3); }
.dp-detail__close {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}

.dp-detail__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-h2); color: var(--ink); }
.dp-detail__site { margin-top: var(--space-1); font-size: var(--text-small); color: var(--muted); }
.dp-detail__panel > div > .pill { margin-top: var(--space-3); }

.dp-detail__field { margin-top: var(--space-4); }
.dp-detail__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 2px; }
.dp-detail__value { font-size: var(--text-body); color: var(--ink); }

/* ---- manual entry — detail door + form ---------------------------------- */
/* Same doctrine as above: neutral tokens only. dp-btn--dark here is the same
   "ink is the only primary" rule the inbox's Konfirmasi button already
   follows — Catat manual is a normal action, not a warning. */

.dp-manualwrap { margin-top: var(--space-4); }

.dp-manual {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dp-manual__summary {
  font-size: var(--text-small);
  color: var(--ink);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.dp-manual__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--muted);
}

.dp-manual__field input,
.dp-manual__field textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-small);
  background: var(--surface-2);
  color: var(--ink);
}

.dp-manual__field textarea {
  min-height: 64px;
  resize: vertical;
}

/* Not a severity colour: a blank required field is not Kosong or Menunggu,
   and giving it either token would be a third meaning for a two-step ladder.
   Weight carries the emphasis instead. */
.dp-manual__error {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.dp-manual__actions { display: flex; gap: var(--space-2); }
.dp-manual__actions .dp-btn { flex: 1; }

.dp-detail__notice {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border-radius: var(--radius);
  font-size: var(--text-small);
  color: var(--ink-2);
}

.dp-detail__logh3 { margin-top: var(--space-6); font-size: 12px; font-weight: 600; color: var(--muted); }

.dp-detail__log { margin-top: var(--space-2); border-top: 1px solid var(--border); }
.dp-detail__logitem { padding-block: var(--space-3); border-bottom: 1px solid var(--border); }
.dp-detail__logtime { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.dp-detail__logwho { margin-top: 2px; font-size: var(--text-small); font-weight: 600; color: var(--ink); }
.dp-detail__logwhat { margin-top: 2px; font-size: var(--text-small); color: var(--ink-2); }
.dp-detail__logempty { padding-block: var(--space-3); font-size: var(--text-small); color: var(--muted); }

/* ---- toast --------------------------------------------------------------- */

.dp-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  transform: translate(-50%, 0);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-small);
  font-weight: 600;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dp-toast.is-show { opacity: 1; }

/* ============================================================
   Breakpoint: ≥960px — board + inbox side by side, no nav at all.
   ============================================================ */

@media (min-width: 960px) {
  .dp-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--gutter);
    align-items: start;
    padding-block: var(--space-6) var(--space-16);
  }
  .dp-panel { display: block; }
  .dp-panel--inbox { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8)); overflow-y: auto; }
  .dp-exceptions { grid-template-columns: 1fr 1fr; }
  .dp-sitegroups { grid-template-columns: 1fr 1fr; }
  .dp-tabs { display: none !important; }
  .dp-toast { bottom: var(--space-6); }
  .dp-detail { align-items: center; justify-content: center; }
  .dp-detail__panel { max-width: 520px; border-radius: var(--radius); max-height: 80vh; }
}

/* ============================================================
   Breakpoint: <960px — two bottom-bar tabs, one panel at a time.
   ============================================================ */

@media (max-width: 959px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .dp-tabs {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  }
  .dp-tabs button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 44px;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
  }
  .dp-tabs button.is-active { color: var(--ink); }
  .dp-tabs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--sev-tunggu);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 700;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-exception.dp-flash,
  .dp-postrow.dp-flash,
  .dp-wa.dp-wa--highlight,
  .dp-toast { animation: none !important; transition: none !important; }
}

/* ---- footer: who made this, and the way back ---------------------------- */

.dp-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-8) var(--margin) var(--space-10);
  border-top: 1px solid var(--border);
  margin-top: var(--space-8);
}

.dp-foot__note {
  font-size: var(--text-small);
  color: var(--faint);
}

.dp-foot__link {
  font-size: var(--text-small);
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 960px) {
  .dp-foot {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
  }
}