/*
 * raa.css — Role Auto-Assign in the five risk-management apps' admin pages (v0.56.0, Flagler edition).
 *
 * The Apps Script apps' own Role Auto-Assign look (rule cards with a coloured edge, suggestion cards, KPI tiles, change rows with
 * pills, lock badges, the building table), drawn in the Appearance colours: --primary, --accent and the page's own greys. The
 * apps' blue is --primary here. NO TENANT COLOUR OR NAME IS WRITTEN HERE. [I20]
 * Every rule sits under `.raa` (the screen's own wrapper), so the apps' short class names (.pill, .kpi, .chg) never reach another page.
 */

/* A line break before the group, so its label and five tabs read as one set. */
.acc-tabbreak { flex: 0 0 100%; height: 0; }

/* The group of five tabs, a labelled run inside the admin tab row. */
.acc-tabgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.2rem 0.35rem 0.2rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.acc-tabgroup__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.acc-tabgroup .acc-tab-btn { min-height: 2.5rem; border-color: transparent; }
.acc-tabgroup .acc-tab-btn:not(.is-active):hover { background: var(--bg); }
@media (max-width: 40rem) {
  .acc-tabgroup { border-radius: 0.9rem; padding: 0.5rem; width: 100%; }
  .acc-tabgroup__label { width: 100%; }
}

.raa { --raa-tint: color-mix(in srgb, var(--primary) 8%, #fff); --raa-edge: color-mix(in srgb, var(--primary) 28%, #fff); --raa-warn: #8a4b08; }
.raa h3 { margin: 0.25rem 0 0.25rem; }
.raa .muted { color: var(--ink-soft); font-size: 0.82rem; }
.raa .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; }
.raa .warn-text { color: var(--raa-warn); }
.raa .danger-text { color: var(--stop); }
.raa .adm-panel { background: var(--card); border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.9rem 1rem; margin: 0 0 1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.raa .adm-panel.soft { background: var(--bg); box-shadow: none; }
.raa .adm-panel.warn-panel { border-color: var(--warn-line); background: var(--warn-bg); }
.raa .adm-h3 { margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); }
.raa .adm-sub { margin: 0 0 0.75rem; max-width: 52rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); }
.raa .adm-sub b { color: var(--ink); }
.raa .adm-help { margin: 0.15rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); }
.raa .adm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0.25rem; }
.raa .adm-actions .btn { min-height: 2.5rem; }
.raa .adm-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.raa .adm-field > span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.raa .adm-empty { text-align: center; padding: 1.4rem 1rem; color: var(--ink-soft); font-size: 0.9rem; border: 1px dashed var(--line); border-radius: 0.75rem; background: var(--bg); line-height: 1.6; }
.raa input[type="text"], .raa input[type="email"], .raa input[type="search"], .raa select {
  width: 100%; min-height: 2.5rem; padding: 0.4rem 0.6rem; font: inherit; color: var(--ink); background: #fff; border: 1px solid #b8bec4; border-radius: 0.4rem;
}
.raa input:focus-visible, .raa select:focus-visible, .raa button:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, #fff); outline-offset: 1px; }
.raa .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Pills */
.raa .pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 0.74rem; font-weight: 700; line-height: 1.5; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.raa .pill.blue { background: var(--info-bg); border-color: var(--info-line); color: #1b3f6e; }
.raa .pill.green { background: var(--ok-bg); border-color: var(--ok-line); color: #1d5330; }
.raa .pill.amber { background: var(--warn-bg); border-color: var(--warn-line); color: #6b4a10; }
.raa .pill.red { background: var(--stop-bg); border-color: var(--stop-line); color: #7d1f1f; }
.raa .rchip { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--raa-tint); color: var(--primary); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.raa .loc-abbrev-tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 0.25rem; background: var(--raa-tint); color: var(--primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }

/* Lock badges: "Locked" (set by hand) and "Auto-assign" (filled by a rule). */
.lock-badge { display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 1; white-space: nowrap; background: color-mix(in srgb, var(--primary) 8%, #fff); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 28%, #fff); }
.lock-badge.is-auto { background: var(--bg); color: var(--ink-soft); border-color: var(--line); font-weight: 600; }

/* KPI tiles */
.raa .kpis { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.75rem; }
.raa .kpi { flex: 0 1 11rem; min-width: 8.5rem; border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.6rem 0.8rem; background: var(--card); }
.raa .kpi .n { font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.raa .kpi .n.n--sm { font-size: 0.92rem; padding-top: 0.25rem; }
.raa .kpi .l { margin-top: 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }

/* Rules */
.raa .rule-list { display: flex; flex-direction: column; gap: 0.7rem; }
.raa .rule-card { border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 0.6rem; padding: 0.7rem 0.9rem 0.8rem; background: var(--card); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.raa .rule-card.is-off { border-left-color: var(--neutral); background: var(--bg); }
.raa .rule-head { display: flex; align-items: center; gap: 0.6rem; }
.raa .rule-head input.rule-label { flex: 1; font-weight: 700; }
.raa .rule-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }
.raa .rule-toggle input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; }
.raa .rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.65rem; margin-top: 0.65rem; }
.raa .rule-grid.raa-addrow { margin: 0.75rem 0 0; }
@media (max-width: 30rem) { .raa .rule-head { flex-wrap: wrap; } .raa .rule-head input.rule-label { flex-basis: 100%; order: 3; } }

/* Suggest from roster */
.raa .sug-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; }
.raa .sug-tools input[type="search"] { max-width: 17rem; min-height: 2.25rem; }
.raa .sug-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.55rem; max-height: 26rem; overflow: auto; padding: 0.15rem; }
.raa .sug-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; }
.raa .sug-card.is-hit { border-color: var(--raa-edge); background: var(--raa-tint); }
.raa .sug-card.is-covered { opacity: 0.6; }
.raa .sug-kw { font-weight: 800; font-size: 0.85rem; overflow-wrap: anywhere; }
.raa .sug-sample { font-size: 0.74rem; color: var(--ink-soft); }
.raa .sug-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; font-size: 0.74rem; color: var(--ink-soft); }
.raa .sug-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.raa .sug-foot .btn { min-height: 2rem; padding: 0.2rem 0.75rem; font-size: 0.82rem; }
.raa .sug-more { grid-column: 1 / -1; }

/* Locations & buildings */
.raa .loc-base { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.raa .xw-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.5rem; }
.raa .cbox { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; cursor: pointer; }
.raa .cbox input { width: 1.1rem; height: 1.1rem; min-height: 0; }
.raa .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.raa .data-table th { text-align: left; padding: 0.5rem 0.65rem; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.raa .data-table td { padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.raa .data-table tr:last-child td { border-bottom: 0; }
.raa .data-table tr:hover td { background: var(--raa-tint); }
.raa .data-table td:nth-child(2) { width: 5.5rem; font-variant-numeric: tabular-nums; }
.raa .data-table td:nth-child(3) { min-width: 14rem; }

/* Changes, locks, opt-outs, held revocations */
.raa .chg-list { display: flex; flex-direction: column; gap: 0.4rem; }
.raa .chg { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; font-size: 0.88rem; }
.raa .chg-main { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.raa .chg input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0; }
.raa .chg select { width: auto; max-width: 100%; min-height: 2.25rem; }
.raa .chg .btn { min-height: 2.25rem; }

/* Schedule: the two modes */
.raa .raa-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; }
.raa .raa-mode { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; text-align: left; padding: 0.7rem 0.9rem; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 0.6rem; cursor: pointer; }
.raa .raa-mode span { font-size: 0.8rem; color: var(--ink-soft); }
.raa .raa-mode:hover { border-color: var(--primary); }
.raa .raa-mode.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--raa-tint); }
.raa .raa-mode.is-on::after { content: 'In use'; margin-top: 0.2rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 700; }

/* Locations & positions (v0.60.0): one card per location — the building, its Position Assignment Desc, who holds it, who is in the slot. */
.raa .pos-search { flex: 1 1 14rem; max-width: 22rem; }
.raa .pos-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.75rem; }
.raa .pos-card { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; padding: 0.8rem 0.95rem 0.6rem; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 0.6rem; background: var(--card); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.raa .pos-card.is-issue { border-left-color: var(--warn-line); }
.raa .pos-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.raa .pos-card__name { flex: 1 1 auto; min-width: 0; font-size: 1rem; overflow-wrap: anywhere; }
.raa .pos-card__grid { display: grid; grid-template-columns: minmax(6.5rem, 0.6fr) minmax(0, 2fr); gap: 0.6rem; }
.raa .pos-card__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 0.75rem; margin: 0; font-size: 0.86rem; }
.raa .pos-card__facts dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.2rem; }
.raa .pos-card__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.raa .pos-card .adm-actions { margin: 0; justify-content: flex-end; }
.raa .pos-card .adm-actions:empty { display: none; }
@media (max-width: 30rem) {
  .raa .pos-card__grid, .raa .pos-card__facts { grid-template-columns: 1fr; }
  .raa .pos-card__facts dt { padding-top: 0; }
}