/* static/styles/pages.css
 * V1 (inline-CSS Fase 2): per-template klasser for long-tail-sider, samlet i én
 * global fil (loaded i base.html) så vi undgår page_styles-blokke i hver template.
 * Prefiks pr. side: meas- (measures/detail) osv. Data-drevne styles (fx farve fra
 * dict) forbliver inline.
 */

/* ── measures/detail.html ─────────────────────────────────────── */
.meas-head        { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.meas-badge-row   { display: flex; gap: 8px; margin-bottom: 4px; }
/* F6: rolle-filter i kataloget */
.meas-role-filter { display: inline-flex; gap: 4px; align-items: center; }
.meas-role-filter select { font-size: 11px; padding: 2px 6px; }
.meas-pill        { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.meas-st--active  { background: var(--success-bg); color: var(--success-dark); }
.meas-st--draft   { background: var(--warning-bg); color: var(--warning-dark); }
.meas-st--other   { background: var(--line-solid); color: #64748b; }
.meas-fit--full    { background: var(--success-bg); color: var(--success-dark); }
.meas-fit--partial { background: var(--warning-bg); color: var(--warning-dark); }
.meas-fit--other   { background: #e0f2fe; color: #075985; }
.meas-grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.meas-grid-2-10  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.meas-h2         { font-size: 16px; font-weight: 800; margin: 0 0 10px; }
.meas-h2-mt      { font-size: 16px; font-weight: 800; margin: 24px 0 10px; }
.meas-pad-14     { padding: 14px; }
.meas-pad-12-mt  { padding: 12px; margin-top: 10px; }
.meas-pad-14-mt  { padding: 14px; margin-top: 10px; }
.meas-label-mb14 { display: block; margin-bottom: 14px; }
.meas-note       { font-size: 12px; margin: 0 0 10px; }
.meas-warn       { font-size: 13px; color: var(--danger-dark); margin: 0 0 10px; }
.meas-scroll-320 { max-height: 320px; overflow-y: auto; }
.meas-th-l       { padding: 6px 8px; text-align: left; font-weight: 700; }
.meas-th-c32     { padding: 6px 4px; text-align: center; font-weight: 700; width: 32px; }
.meas-td-c4      { padding: 4px; text-align: center; }
.meas-actions    { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.meas-sub-label    { font-size: 11px; font-weight: 700; color: #475569; margin-bottom: 6px; }
.meas-sub-label-12 { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 8px; }
.meas-grid-1-2-auto { display: grid; grid-template-columns: 1fr 2fr auto; gap: 6px; }
.meas-th2-l      { padding: 10px 14px; text-align: left; font-weight: 700; }
.meas-w-130      { width: 130px; }
.meas-w-40       { width: 40px; }
.meas-empty      { padding: 14px; text-align: center; }
.meas-td-strong  { padding: 8px 14px; font-weight: 600; }
.meas-td-12      { padding: 8px 14px; font-size: 12px; }
.meas-td-12-muted { padding: 8px 14px; font-size: 12px; color: var(--muted); }
.meas-td         { padding: 8px 14px; }
.meas-btn-x      { font-size: 11px; padding: 2px 6px; color: var(--danger-dark); }
.meas-grid-link  { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.meas-grid-link2 { display: grid; grid-template-columns: 200px 1fr auto; gap: 8px; margin-top: 10px; align-items: end; }
.meas-ctrl-12    { font-size: 12px; width: 100%; }
/* F2 kaskade-vælger (gruppe → type → aktiv) */
.meas-asset-picker        { margin-top: 10px; }
.meas-asset-picker-row    { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 8px; align-items: end; }
.meas-asset-field         { display: block; }
.meas-asset-picker-actions{ display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.meas-results    { max-height: 200px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 4px; display: none; }

/* ── incidents/detail.html ───────────────────────────────────── */
.incd-badge-row  { display: flex; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.incd-pill       { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.incd-st--closed    { background: var(--success-bg); color: var(--success-dark); }
.incd-st--resolved  { background: #e0f2fe; color: #075985; }
.incd-st--contained { background: var(--warning-bg); color: var(--warning-dark); }
.incd-st--open      { background: var(--danger-bg); color: var(--danger-dark); }
.incd-sub        { font-size: 11px; margin-top: 6px; }
.incd-cia-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.incd-cia-card   { padding: 12px; text-align: center; }
.incd-bl--c { border-left: 4px solid var(--danger-dark); }
.incd-bl--i { border-left: 4px solid var(--info); }
.incd-bl--a { border-left: 4px solid var(--warning-dark); }
.incd-letter { font-size: 22px; font-weight: 900; }
.incd-on--c { color: var(--danger-dark); }
.incd-on--i { color: var(--info); }
.incd-on--a { color: var(--warning-dark); }
.incd-off   { color: #cbd5e1; }
.incd-cia-status { font-size: 11px; font-weight: 700; margin-top: 2px; }
.incd-stat-off   { color: #94a3b8; }
.incd-card-1214  { padding: 12px 14px; margin-bottom: 16px; }
.incd-flow-title { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 8px; }
.incd-flow-row   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.incd-flow-item  { display: flex; align-items: center; gap: 6px; }
.incd-circle     { display: inline-block; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; text-align: center; font-size: 11px; font-weight: 700; }
.incd-circle--done { background: var(--success-bg); color: var(--success-dark); }
.incd-circle--curr { background: var(--text); color: #fff; }
.incd-circle--todo { background: var(--line-solid); color: #94a3b8; }
.incd-flow-label       { font-size: 12px; }
.incd-flow-label--curr { font-size: 12px; font-weight: 700; }
.incd-flow-label--todo { font-size: 12px; color: var(--muted); }
.incd-status-form { margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.incd-select-12   { font-size: 12px; padding: 3px 6px; }
.incd-btn-xs      { font-size: 11px; padding: 3px 10px; }
.incd-gdpr-card   { padding: 16px; margin-bottom: 16px; }
.incd-gbl--overdue { border-left: 4px solid var(--danger-dark); }
.incd-gbl--urgent  { border-left: 4px solid var(--warning-dark); }
.incd-gbl--warning { border-left: 4px solid var(--warning); }
.incd-gbl--sent    { border-left: 4px solid var(--success-dark); }
.incd-gbl--none    { border-left: 4px solid #cbd5e1; }
.incd-gdpr-h2     { font-size: 15px; font-weight: 800; margin: 0 0 10px; }
.incd-72-row      { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.incd-72-val      { font-weight: 700; }
.incd-72-val--overdue { color: var(--danger-dark); }
.incd-72-val--urgent  { color: var(--warning-dark); }
.incd-72-val--warning { color: var(--warning); }
.incd-72-val--ok      { color: #475569; }
.incd-72-track    { height: 10px; background: var(--line-solid); border-radius: 5px; overflow: hidden; }
.incd-72-fill     { height: 100%; }   /* width:NN% inline (data-drevet) */
.incd-72--crit    { background: var(--danger-dark); }
.incd-72--warn-d  { background: var(--warning-dark); }
.incd-72--warn    { background: var(--warning); }
.incd-72--ok      { background: var(--success); }
.incd-pd-box      { margin-bottom: 12px; padding: 10px; background: var(--bg-subtle); border-radius: 4px; font-size: 12px; }
.incd-grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.incd-check-pt    { display: flex; align-items: center; padding-top: 18px; }
.incd-ml-label    { font-size: 12px; margin-left: 6px; }
.incd-pd-label    { display: block; margin-bottom: 10px; padding: 8px 10px; background: var(--warning-bg); border-radius: 4px; }
.incd-h3          { font-size: 14px; font-weight: 700; margin: 16px 0 8px; }