/* ---------------------------------------------------------------------------
   Sales Hub additions. Loads after site.css, which is shared verbatim with the
   Tester app. Everything here is specific to this application; nothing in here
   should ever need to go back into site.css.
   --------------------------------------------------------------------------- */

/* Asset-type tiles on the home page. */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.type-tile { display: block; background: var(--panel); border: 1px solid var(--line);
             border-radius: var(--radius); padding: 14px 16px; color: var(--ink); }
.type-tile:hover { background: var(--panel-2); text-decoration: none; border-color: var(--accent); }
.type-tile .n { font-size: 1.02rem; font-weight: 600; display: block; margin-bottom: 4px; }
.type-tile .d { color: var(--muted); font-size: .84rem; display: block; }
/* A count, and it has to read as one. A bare number set large and right-aligned reads as
   an index, which is exactly how the first version was misread. */
.type-tile .cnt { display: block; margin-top: 10px; font-size: .76rem; font-weight: 600;
                  text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.type-tile.empty { opacity: .5; }
.type-tile.empty .cnt { color: var(--muted); }
.type-tile.empty:hover { opacity: .8; }

/* Section heading with a rule, used to break up the home page. */
.sec { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 10px; }
.sec h2 { margin: 0; }
.sec .line { flex: 1; height: 1px; background: var(--line); }

/* Asset rows. */
.asset-row .t { font-weight: 600; }
.asset-row .sub { color: var(--muted); font-size: .84rem; margin-top: 2px; }

/* Tier and freshness markers. Deliberately quiet - they are constant furniture,
   not alerts, and should not compete with the content. */
.badge.tier-internal { background: transparent; color: #f5c451; border: 1px solid #6b5a22; }
.badge.tier-partner  { background: transparent; color: #7fc4e6; border: 1px solid #2f5a70; }
.badge.soon { background: transparent; color: var(--blocked); border: 1px solid #5a4780; }
.badge.stale { background: var(--warn); color: #1a1a1a; }
.badge.ver { background: transparent; color: var(--muted); border: 1px solid var(--line);
             font-family: ui-monospace, Menlo, monospace; font-size: .72rem; }

/* Filter bar above the library. */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.filters .f { display: flex; flex-direction: column; gap: 4px; }
.filters label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.filters select, .filters input[type=text] { min-width: 170px; padding: 8px 10px; }
.filters .grow { flex: 1; min-width: 220px; }

/* Coming-soon card: dimmed, but the interim file is right there rather than hidden
   in another system. */
.card.soon { border-style: dashed; }
.card.soon h3 { color: var(--muted); }
.interim { margin-top: 10px; padding: 10px 12px; background: var(--tint-amber);
           border-left: 4px solid var(--warn); border-radius: 0 8px 8px 0; font-size: .88rem; }

/* Play slots. An empty slot is a first-class thing, not an absence - it is styled to
   read as a named gap somebody should fill. */
.slots { list-style: none; padding: 0; margin: 0; }
.slot { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
        border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px;
        background: var(--panel); }
.slot .num { font-family: 'Teko', sans-serif; font-size: 22px; line-height: 1; color: var(--muted);
             min-width: 22px; }
.slot .body { flex: 1; }
.slot.empty { border-style: dashed; background: transparent; }
.slot.empty .label { color: var(--muted); }
.slot .gap { color: var(--warn); font-size: .82rem; margin-top: 4px; }

/* Audit table wants to be dense - it is read in bulk. */
table.grid.dense th, table.grid.dense td { padding: 6px 10px; font-size: .86rem; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; }

/* Pager. */
.pager { display: flex; gap: 8px; align-items: center; margin-top: 14px; }

/* Shown on the admin screen when alerting has no webhook configured. An alerter that is
   silently switched off is the failure this whole estate keeps relearning, so its absence
   is made loud rather than invisible. */
.config-warn { background: #3b1214; color: #ff8f96; border: 1px solid #6b2229;
               padding: 12px 14px; border-radius: var(--radius); margin-bottom: 14px; }

.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; }

/* Compact table actions. The default .btn is sized for a page's primary action; a row of
   them in a grid cell turns every row into a three-line block and makes "Disable" shout
   louder than anything on the page. */
.btn.small { padding: 4px 10px; font-size: .8rem; border-radius: 6px; white-space: nowrap; line-height: 1.4; }
td .row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
/* Destructive, but not alarming: outlined until you are actually over it. */
.btn.small.danger { background: transparent; color: #ff8f96; border: 1px solid #6b2229; }
.btn.small.danger:hover { background: var(--bad); color: #fff; filter: none; }
.btn.small.go { background: transparent; color: #6ee7a0; border: 1px solid #1f5c38; }
.btn.small.go:hover { background: var(--ok); color: #1a1a1a; filter: none; }

/* Inline role picker on the People page. */
.role-form { display: flex; gap: 6px; align-items: center; }
.role-form select { min-width: 118px; padding: 4px 8px; font-size: .82rem; }

/* People table: sized so it never needs a horizontal scrollbar. The publish-type list is
   the one genuinely long value, so it lives in a disclosure that is shut by default. */
table.grid.people { table-layout: fixed; width: 100%; }
table.grid.people td, table.grid.people th { overflow-wrap: anywhere; }
table.grid.people th:nth-child(1) { width: 25%; }
table.grid.people th:nth-child(2) { width: 14%; }
table.grid.people th:nth-child(3) { width: 21%; }
table.grid.people th:nth-child(4) { width: 12%; }
table.grid.people th:nth-child(5) { width: 13%; }
table.grid.people th:nth-child(6) { width: 15%; }
.nowrap { white-space: nowrap; }

details.types { margin-top: 6px; }
details.types > summary { cursor: pointer; color: var(--muted); font-size: .78rem;
                          list-style: none; text-transform: uppercase; letter-spacing: .04em; }
details.types > summary::-webkit-details-marker { display: none; }
details.types > summary::before { content: '\25B8 '; }
details.types[open] > summary::before { content: '\25BE '; }
details.types > summary:hover { color: var(--accent); }
details.types textarea { font-family: ui-monospace, Menlo, monospace; font-size: .74rem;
                         margin: 6px 0; min-height: 0; }

@media (max-width: 900px) {
  table.grid.people { table-layout: auto; }
}