/* Base layout, counters, cards and buttons (strict CSP: every dashboard
   style lives in these files; see tests/test_static_csp_markup.py). */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Round 8 (P3.2309 row 4): the scrollbar's room is kept whether or not the page
   scrolls, so a short tab and a long tab place the content identically. */
html { scrollbar-gutter: stable; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; background: #f5f5f5; color: #333; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
/* P3.2226 POLISH row 5: room below the last history row, so it can scroll
   clear of the bottom-left toast (tablet/desktop; on phones the toast sits
   at the top and the phone rule below keeps the compact padding). */
@media (min-width: 641px) {
  .container { padding-bottom: 120px; }
  /* P3.2301: toast.js sets body.toasts-N (notices on screen), so two or
     three stacked notices (each up to three lines at 460 px) still leave
     room to scroll the last row clear of them. */
  body.toasts-2 .container { padding-bottom: 230px; }
  body.toasts-3 .container { padding-bottom: 340px; }
}
/* P3.2301: on a short screen the stack is capped at 30% of the height
   (shell.css), so that cap plus its 20 px offset is enough. */
@media (min-width: 641px) and (max-height: 520px) {
  body.toasts-2 .container, body.toasts-3 .container { padding-bottom: calc(30vh + 36px); }
}
/* Round 8: from 1000 px the notices sit in their own lane (shell.css), not over
   the content, so the page's bottom padding does not grow with them. */
@media (min-width: 1000px) {
  body.toasts-2 .container, body.toasts-3 .container { padding-bottom: 120px; }
}
/* P3.2218: keeps "received today 12:33 PM" on one line. Below 360 px (a
   phone at 200% zoom) it may wrap rather than push the page sideways. */
.nowrap { white-space: nowrap; }
@media (max-width: 359px) {
  .nowrap { white-space: normal; }
}
.section-gap { margin-top: 30px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-card { background: white; border-radius: 8px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(0,0,0,.1); min-width: 0; }
.stat-card .label { font-size: 0.72rem; color: #666; text-transform: uppercase; letter-spacing: .05em; overflow-wrap: anywhere; }
.stat-card .value { font-size: 2rem; font-weight: 700; margin-top: 4px; }
.stat-card.alert .value { color: #c0392b; }
.stat-card.draft .value { color: #1a5276; }
.stat-card.done .value { color: #27ae60; }
.stat-card.fallback .value { color: #d35400; font-size: 1.3rem; }

h2 { font-size: 1rem; font-weight: 600; color: #555; margin: 18px 0 10px; text-transform: uppercase; letter-spacing: .05em; }

.card { background: white; border-radius: 8px; padding: 14px 18px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); display: flex; gap: 12px; align-items: flex-start; }
.card-side { min-width: 110px; text-align: center; }
.card-side-dec { margin-top: 6px; }

.card-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.card-info .subject { font-weight: 500; font-size: 0.9rem; }
.card-info .doc-id { font-size: 0.72rem; color: #999; font-family: monospace; }
.card-info .reasoning { font-size: 0.85rem; color: #555; margin-top: 4px; }
.card-info .draft { background: #eaf4fb; border-left: 3px solid #2e86c1; padding: 8px 12px; border-radius: 0 4px 4px 0; margin-top: 8px; font-size: 0.85rem; color: #1a5276; }

.actions { display: flex; gap: 6px; flex-direction: column; }
.btn { padding: 7px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600; }
.btn-approve, .btn-handle { background: #27ae60; color: white; }
.btn-reject, .btn-escalate { background: #e74c3c; color: white; }
.btn:hover { opacity: 0.85; }
.empty { color: #999; font-size: 0.9rem; padding: 10px 0; }

/* P3.2206: phone layout. Each card stacks (badges row, text, full-width
   action row), counters are compact. */
@media (max-width: 640px) {
  .container { padding: 14px 10px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-bottom: 16px; }
  .stat-card { padding: 6px 8px; }
  .stat-card .label { font-size: 0.62rem; letter-spacing: .02em; }
  .stat-card .value { font-size: 1.15rem; margin-top: 2px; }
  .stat-card.fallback .value { font-size: 1rem; }

  .card { flex-direction: column; gap: 8px; padding: 10px 12px; }
  .card-side { min-width: 0; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .card-side-dec { margin-top: 0; }
  .card-info { width: 100%; }
  .actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .actions .btn { flex: 1 1 120px; padding: 10px 12px; }
}

/* P3.2620 row 7: the office phone on the key panel (tap to call) never
   breaks across lines, even below 360 px where .nowrap lets go. */
.key-phone { white-space: nowrap; }
a.key-phone { color: #1a5276; font-weight: 600; text-decoration: underline; }
a.key-phone:focus-visible { outline: 2px solid #1a5276; outline-offset: 2px; }