/* Time Bomb HQ - Dashboard: the tile grid and the Needs your attention list.
   Tokens, buttons, tables, tiles, panels and badges come from styles.css: use them, and add
   here only what this section alone needs. Class names start with a short section prefix. */

.db-page{display:grid;gap:var(--s-4);align-content:start}
.db-page .page-head{margin-bottom:0}
.db-updated{font-size:var(--fs-xs);color:var(--faint);white-space:nowrap}

/* ---------- the four tiles: each one is a link to its section ---------- */
.db-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.db-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.db-tile{
  display:block;min-height:152px;color:inherit;text-decoration:none;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
a.db-tile:hover{border-color:rgba(229,181,68,.6);transform:translateY(-2px);box-shadow:var(--sh-2);text-decoration:none}
a.db-tile:focus-visible{outline-offset:2px}
.db-tile .tile-sub{min-height:2.9em}
/* the foot may take a second line on a narrow tile rather than be cut off mid-sentence */
.db-tile .tile-foot{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.45}
.db-tile-ico{color:var(--gold);display:inline-flex}
.db-tile-go{
  position:absolute;right:var(--s-4);bottom:var(--s-4);display:inline-flex;color:var(--gold-2);
  opacity:0;transform:translateX(-4px);transition:opacity var(--t),transform var(--t);
}
a.db-tile:hover .db-tile-go,a.db-tile:focus-visible .db-tile-go{opacity:1;transform:none}
.db-strong{color:var(--gold-2);font-weight:700}

/* ---------- the rows of panels ---------- */
.db-grid{display:grid;gap:var(--s-4);align-items:stretch}
.db-grid--wide{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.db-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.db-stack{display:grid;gap:var(--s-4);align-content:start}
/* a laptop-width page: the wide rows stack, the three become one wide and two side by side */
@media (max-width:1420px){
  .db-grid--wide{grid-template-columns:minmax(0,1fr)}
  .db-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-grid--three .db-panel--sales{grid-column:1 / -1}
  .db-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-panel--kinds .panel-body,.db-panel--attention .panel-body,.db-panel--sales .panel-body{min-height:0}
}
@media (max-width:900px){
  .db-grid--three,.db-stack{grid-template-columns:minmax(0,1fr)}
}
.db-panel{display:flex;flex-direction:column}
.db-panel .panel-body{flex:1}
/* each panel holds its height while loading, so nothing jumps when the numbers arrive */
.db-panel--kinds .panel-body{min-height:248px}
.db-panel--attention .panel-body{min-height:248px}
.db-panel--sales .panel-body,.db-panel--shows .panel-body,.db-panel--wheel .panel-body{min-height:292px}
.db-panel--recent .panel-body{min-height:420px}
.db-panel--supplies .panel-body,.db-panel--jobs .panel-body{min-height:116px}
.db-panel .panel-body--flush .skel-block{padding:var(--s-4)}

.db-table th[scope="row"]{
  position:static;height:42px;background:none;border-bottom:1px solid rgba(30,45,87,.55);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);
}
.db-table th[scope="row"] a{color:var(--text)}
.db-table th[scope="row"] a:hover{color:var(--gold-2)}
.db-table tbody tr:nth-child(even) th{background:rgba(255,255,255,.018)}   /* the row header takes the row's stripe */
.db-table tbody tr:last-child th{border-bottom:0}
.db-table tfoot th{height:40px;border-top:1px solid var(--line-strong);border-bottom:0;background:rgba(255,255,255,.03);color:var(--gold-2)}
.db-table.table--compact th[scope="row"]{height:36px}
.db-recent{table-layout:fixed}
.db-recent td a.td-main{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.db-recent td a.td-main:hover{color:var(--gold-2)}
.db-when{color:var(--muted);font-variant-numeric:tabular-nums}

/* where the value sits: one bar, a segment per kind */
.db-share{padding:var(--s-4);border-top:1px solid var(--line)}
.db-share-label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s-2)}
.db-share-bar{display:flex;gap:2px;height:14px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-2)}
.db-share-seg{display:block;min-width:3px;transition:opacity var(--t)}
.db-share-seg--sealed{background:var(--gold)}
.db-share-seg--single{background:var(--blue)}
.db-share-seg--slab{background:var(--ok)}
.db-share-bar:hover .db-share-seg{opacity:.6}
.db-share-bar .db-share-seg:hover{opacity:1}
.db-share-key{display:flex;gap:var(--s-5);flex-wrap:wrap;list-style:none;margin:var(--s-2) 0 0;padding:0;font-size:var(--fs-xs);color:var(--muted)}
.db-share-key li{display:inline-flex;align-items:center;gap:6px}
.db-share-key b{color:var(--text);font-weight:600}
.db-share-dot{width:9px;height:9px;border-radius:50%}

.db-note{margin:var(--s-3) 0 0;font-size:var(--fs-xs);color:var(--faint);line-height:1.5}
.panel-body--flush>.db-note{margin:0;padding:var(--s-3) var(--s-4);border-top:1px solid var(--line)}
.db-note--first{margin-top:0}

/* ---------- needs your attention ---------- */
.db-attn{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.db-attn-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--s-3);
  padding:10px var(--s-3);border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:var(--fs-sm);line-height:1.45;
}
.db-attn-ico{display:inline-flex;margin-top:1px;color:var(--blue-2)}
.db-attn-item--warn{border-color:rgba(242,176,94,.45);background:var(--warn-tint)}
.db-attn-item--warn .db-attn-ico{color:var(--warn)}
.db-attn-item--danger{border-color:var(--danger-deep);background:var(--danger-tint)}
.db-attn-item--danger .db-attn-ico{color:var(--danger)}
.db-attn-go{
  display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);color:var(--muted);
  border:1px solid transparent;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.db-attn-go:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--gold-2);text-decoration:none}

/* "all clear" lines */
.db-clear{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);color:var(--ok)}
.db-clear--warn{color:var(--warn)}
.db-clear--quiet{color:var(--muted)}

/* ---------- shows ---------- */
.db-shows{display:grid;gap:var(--s-3)}
.db-show{
  display:grid;gap:3px;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:1px solid var(--line);
  background:rgba(255,255,255,.02);color:inherit;text-decoration:none;min-height:104px;align-content:start;
  transition:border-color var(--t),background var(--t);
}
a.db-show:hover{border-color:rgba(229,181,68,.55);background:var(--gold-tint);text-decoration:none}
.db-show-label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.db-show b{font-size:var(--fs-md);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-show-when{font-size:var(--fs-xs);color:var(--muted)}
.db-show-facts{font-size:var(--fs-xs);color:var(--faint);line-height:1.5}
.db-show--none{border-style:dashed}
.db-show--none p{margin:0;font-size:var(--fs-xs);color:var(--faint);line-height:1.5}

/* ---------- short lists (plans, supplies, jobs) ---------- */
.db-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.db-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:8px 0;border-bottom:1px solid rgba(30,45,87,.55)}
.db-list li:last-child{border-bottom:0}
.db-list a{display:grid;gap:1px;min-width:0;color:inherit;text-decoration:none}
.db-list a b{font-size:var(--fs-sm);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-list a span{font-size:var(--fs-xs);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-list a:hover b{color:var(--gold-2)}
.db-list--plain{margin-top:var(--s-2)}
.db-facts{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}
.db-facts b{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--text);margin-right:4px}
.db-facts .db-warn,.db-facts .db-warn b{color:var(--warn)}

@media (prefers-reduced-motion:reduce){.db-tile,.db-tile-go{transition:none}a.db-tile:hover{transform:none}}