/* ============================================================
   PreventiveCore Component Layer
   Shared surfaces, buttons, badges, tables, forms, states.
   Requires pc-tokens.css and pc-base.css.
   ============================================================ */

/* ============================================================
   SURFACES
   ============================================================ */
.pc-surface{
  background:var(--pc-surface);
  border:1px solid var(--pc-border);
  border-radius:var(--pc-r-lg);
  box-shadow:var(--pc-e-0);
}
.pc-surface--elevated{ box-shadow:var(--pc-e-1); }
.pc-surface--sunken{ background:var(--pc-surface-sunken); }
.pc-surface--interactive{ transition:background var(--pc-transition), border-color var(--pc-transition); cursor:pointer; }
.pc-surface--interactive:hover{ background:var(--pc-surface-hover); border-color:var(--pc-border-strong); }

.pc-surface__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pc-3);
  padding:var(--pc-3) var(--pc-4);
  border-bottom:1px solid var(--pc-border);
}
.pc-surface__head-title{ display:flex; align-items:center; gap:var(--pc-2); min-width:0; }
.pc-surface__head-title .pc-icon{ color:var(--pc-text-tertiary); }
.pc-surface__body{ padding:var(--pc-4); }
.pc-surface__body--flush{ padding:0; }
.pc-surface__foot{
  padding:var(--pc-3) var(--pc-4);
  border-top:1px solid var(--pc-border);
  color:var(--pc-text-secondary);
  font-size:var(--pc-fs-support);
}

/* Alert surface — semantic left rule + tint. Always carries a text label. */
.pc-surface--alert{
  border-left:3px solid var(--pc-neutral);
  background:var(--pc-neutral-bg);
  border-radius:var(--pc-r-md);
  padding:var(--pc-3) var(--pc-4);
}
.pc-surface--alert.is-success{ border-left-color:var(--pc-success); background:var(--pc-success-bg); }
.pc-surface--alert.is-warning{ border-left-color:var(--pc-warning); background:var(--pc-warning-bg); }
.pc-surface--alert.is-danger { border-left-color:var(--pc-danger);  background:var(--pc-danger-bg); }
.pc-surface--alert.is-info   { border-left-color:var(--pc-info);    background:var(--pc-info-bg); }

/* Data surface — hosts a table, no inner padding */
.pc-surface--data > .pc-surface__body{ padding:0; }

/* ============================================================
   KPI
   ============================================================ */
.pc-kpi{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--pc-2);
  padding:var(--pc-4);
  background:var(--pc-surface);
  border:1px solid var(--pc-border);
  border-radius:var(--pc-r-lg);
  min-height:96px;
}
.pc-kpi.is-warning{ border-left:3px solid var(--pc-warning); }
.pc-kpi.is-danger { border-left:3px solid var(--pc-danger); }
.pc-kpi.is-success{ border-left:3px solid var(--pc-success); }
.pc-kpi__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--pc-2); }
.pc-kpi__head .pc-icon{ color:var(--pc-text-tertiary); }
.pc-kpi__value{
  font-size:var(--pc-fs-kpi);
  line-height:var(--pc-lh-kpi);
  font-weight:650;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--pc-text);
}
.pc-kpi__label{
  font-size:var(--pc-fs-label);
  font-weight:600;
  letter-spacing:var(--pc-tracking-label);
  text-transform:uppercase;
  color:var(--pc-text-tertiary);
}
.pc-kpi__detail{
  display:flex; align-items:center; gap:var(--pc-2);
  font-size:var(--pc-fs-support);
  color:var(--pc-text-secondary);
  margin-top:auto;
}

/* Status dot — decorative reinforcement only, never the sole signal */
.pc-dot{ width:6px; height:6px; border-radius:var(--pc-r-pill); background:var(--pc-neutral); flex:0 0 auto; }
.pc-dot--success{ background:var(--pc-success); }
.pc-dot--warning{ background:var(--pc-warning); }
.pc-dot--danger { background:var(--pc-danger); }
.pc-dot--info   { background:var(--pc-info); }

/* ============================================================
   BUTTONS
   ============================================================ */
.pc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--pc-2);
  height:var(--pc-control-h);
  padding:0 var(--pc-3);
  font-family:inherit;
  font-size:var(--pc-fs-btn);
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  border:1px solid transparent;
  border-radius:var(--pc-r-md);
  cursor:pointer;
  transition:background var(--pc-transition), border-color var(--pc-transition), color var(--pc-transition);
  text-decoration:none;
}
.pc-btn:hover{ text-decoration:none; }
.pc-btn:focus-visible{ box-shadow:var(--pc-focus-ring); }
.pc-btn:disabled,.pc-btn.is-disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.pc-btn .pc-icon{ width:16px; height:16px; }

.pc-btn--primary{ background:var(--pc-brand-solid); border-color:var(--pc-brand-solid); color:#fff; }
.pc-btn--primary:hover{ background:var(--pc-brand); border-color:var(--pc-brand); color:#fff; }
.pc-btn--primary:active{ background:var(--pc-brand-active); }

.pc-btn--secondary{ background:var(--pc-surface); border-color:var(--pc-border-strong); color:var(--pc-text); }
.pc-btn--secondary:hover{ background:var(--pc-surface-hover); border-color:var(--pc-text-tertiary); color:var(--pc-text); }

.pc-btn--tertiary{ background:transparent; border-color:transparent; color:var(--pc-text-secondary); }
.pc-btn--tertiary:hover{ background:var(--pc-surface-hover); color:var(--pc-text); }

.pc-btn--danger{ background:var(--pc-danger); border-color:var(--pc-danger); color:#fff; }
.pc-btn--danger:hover{ background:var(--pc-danger-text); border-color:var(--pc-danger-text); color:var(--pc-text-inverse); }

.pc-btn--sm{ height:28px; padding:0 var(--pc-2); font-size:var(--pc-fs-support); }
.pc-btn--lg{ height:38px; padding:0 var(--pc-4); font-size:var(--pc-fs-body); }
.pc-btn--icon{ width:var(--pc-control-h); padding:0; }
.pc-btn--icon.pc-btn--sm{ width:28px; }
.pc-btn--block{ width:100%; }

/* ============================================================
   STATUS BADGES
   Canonical mapping — the label is mandatory, colour is support:
     success  APPROVED / COMPLIANT / VERIFIED / COMPLETE
     warning  DUE SOON / IN REVIEW / ATTENTION
     danger   OVERDUE / MAJOR NC / CRITICAL / FAILED
     info     INFO / ACTIVE
     neutral  DRAFT / PENDING / INACTIVE / N/A
   ============================================================ */
.pc-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--pc-1);
  padding:2px var(--pc-2);
  font-size:var(--pc-fs-label);
  font-weight:600;
  letter-spacing:var(--pc-tracking-label);
  text-transform:uppercase;
  line-height:1.5;
  white-space:nowrap;
  border:1px solid var(--pc-neutral-border);
  border-radius:var(--pc-r-sm);
  background:var(--pc-neutral-bg);
  color:var(--pc-neutral-text);
}
.pc-badge .pc-icon{ width:12px; height:12px; }
.pc-badge--success{ background:var(--pc-success-bg); border-color:var(--pc-success-border); color:var(--pc-success-text); }
.pc-badge--warning{ background:var(--pc-warning-bg); border-color:var(--pc-warning-border); color:var(--pc-warning-text); }
.pc-badge--danger { background:var(--pc-danger-bg);  border-color:var(--pc-danger-border);  color:var(--pc-danger-text); }
.pc-badge--info   { background:var(--pc-info-bg);    border-color:var(--pc-info-border);    color:var(--pc-info-text); }
.pc-badge--neutral{ background:var(--pc-neutral-bg); border-color:var(--pc-neutral-border); color:var(--pc-neutral-text); }
.pc-badge--count{ text-transform:none; letter-spacing:0; font-variant-numeric:tabular-nums; }

/* ============================================================
   TABLES
   ============================================================ */
.pc-table-wrap{ width:100%; overflow-x:auto; }
.pc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--pc-fs-table);
  line-height:var(--pc-lh-table);
}
.pc-table thead th{
  position:sticky; top:0; z-index:1;
  padding:var(--pc-2) var(--pc-3);
  text-align:left;
  font-size:var(--pc-fs-label);
  font-weight:600;
  letter-spacing:var(--pc-tracking-label);
  text-transform:uppercase;
  color:var(--pc-text-tertiary);
  background:var(--pc-surface-sunken);
  border-bottom:1px solid var(--pc-border);
  white-space:nowrap;
}
.pc-table tbody td{
  padding:0 var(--pc-3);
  height:var(--pc-row-h);
  border-bottom:1px solid var(--pc-border);
  color:var(--pc-text);
  vertical-align:middle;
}
.pc-table tbody tr:last-child td{ border-bottom:0; }
.pc-table tbody tr{ transition:background var(--pc-transition); }
.pc-table tbody tr:hover{ background:var(--pc-surface-hover); }
.pc-table tbody tr.is-selected{
  background:var(--pc-brand-subtle);
  box-shadow:inset 2px 0 0 var(--pc-brand);
}
.pc-table__num,.pc-table__id{
  font-family:var(--pc-font-mono);
  font-variant-numeric:tabular-nums;
}
.pc-table__num{ text-align:right; }

/* Sortable headers */
.pc-table th[aria-sort]{ cursor:pointer; user-select:none; }
.pc-table th[aria-sort]:hover{ color:var(--pc-text-secondary); }
.pc-table th[aria-sort="ascending"],
.pc-table th[aria-sort="descending"]{ color:var(--pc-brand); }

/* Row actions — visible on hover, always reachable by keyboard */
.pc-table__actions{ display:flex; gap:var(--pc-1); justify-content:flex-end; opacity:0; transition:opacity var(--pc-transition); }
.pc-table tbody tr:hover .pc-table__actions,
.pc-table__actions:focus-within{ opacity:1; }
@media (hover:none){ .pc-table__actions{ opacity:1; } }

.pc-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pc-3);
  padding:var(--pc-3) var(--pc-4);
  border-top:1px solid var(--pc-border);
  font-size:var(--pc-fs-support);
  color:var(--pc-text-secondary);
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.pc-field{ display:flex; flex-direction:column; gap:var(--pc-1); }
.pc-field__label{
  font-size:var(--pc-fs-support);
  font-weight:600;
  color:var(--pc-text-secondary);
}
.pc-field__label .pc-required{ color:var(--pc-danger-text); margin-left:2px; }
.pc-field__help{ font-size:var(--pc-fs-support); color:var(--pc-text-tertiary); }
.pc-field__error{
  display:flex; align-items:center; gap:var(--pc-1);
  font-size:var(--pc-fs-support);
  color:var(--pc-danger-text);
}

.pc-input,.pc-select,.pc-textarea{
  width:100%;
  min-height:var(--pc-control-h);
  padding:var(--pc-2) var(--pc-3);
  font-family:inherit;
  font-size:var(--pc-fs-body);
  color:var(--pc-text);
  background:var(--pc-surface-sunken);
  border:1px solid var(--pc-border-strong);
  border-radius:var(--pc-r-md);
  outline:none;
  transition:border-color var(--pc-transition), box-shadow var(--pc-transition);
}
.pc-input::placeholder,.pc-textarea::placeholder{ color:var(--pc-text-tertiary); }
.pc-input:hover,.pc-select:hover,.pc-textarea:hover{ border-color:var(--pc-text-tertiary); }
.pc-input:focus,.pc-select:focus,.pc-textarea:focus{
  border-color:var(--pc-brand);
  box-shadow:0 0 0 3px var(--pc-brand-subtle);
}
.pc-input:disabled,.pc-select:disabled,.pc-textarea:disabled{
  opacity:.5; cursor:not-allowed; background:var(--pc-bg-elevated);
}
.pc-textarea{ min-height:88px; resize:vertical; line-height:var(--pc-lh-body); }

.pc-select{
  appearance:none;
  padding-right:var(--pc-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C8797' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--pc-3) center;
  cursor:pointer;
}

.pc-input.is-invalid,.pc-select.is-invalid,.pc-textarea.is-invalid{ border-color:var(--pc-danger); }
.pc-input.is-invalid:focus{ box-shadow:0 0 0 3px var(--pc-danger-bg); }
.pc-input.is-valid,.pc-select.is-valid{ border-color:var(--pc-success); }

.pc-check,.pc-radio{
  width:16px; height:16px;
  accent-color:var(--pc-brand);
  cursor:pointer;
}
.pc-check-label{
  display:inline-flex; align-items:center; gap:var(--pc-2);
  font-size:var(--pc-fs-body);
  cursor:pointer;
}

.pc-toggle{
  position:relative;
  display:inline-flex;
  width:36px; height:20px;
  flex:0 0 auto;
  background:var(--pc-border-strong);
  border-radius:var(--pc-r-pill);
  cursor:pointer;
  transition:background var(--pc-transition);
}
.pc-toggle::after{
  content:"";
  position:absolute; top:2px; left:2px;
  width:16px; height:16px;
  background:var(--pc-text);
  border-radius:var(--pc-r-pill);
  transition:transform var(--pc-transition);
}
.pc-toggle[aria-checked="true"]{ background:var(--pc-brand); }
.pc-toggle[aria-checked="true"]::after{ transform:translateX(16px); background:#fff; }
.pc-toggle:focus-visible{ box-shadow:var(--pc-focus-ring); }

/* ============================================================
   TABS
   ============================================================ */
.pc-tabs{ display:flex; gap:var(--pc-1); border-bottom:1px solid var(--pc-border); margin-bottom:var(--pc-4); }
.pc-tab{
  padding:var(--pc-2) var(--pc-3);
  font-size:var(--pc-fs-body);
  font-weight:500;
  color:var(--pc-text-secondary);
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  cursor:pointer;
  transition:color var(--pc-transition), border-color var(--pc-transition);
}
.pc-tab:hover{ color:var(--pc-text); }
.pc-tab[aria-selected="true"]{ color:var(--pc-brand-text); border-bottom-color:var(--pc-brand); }

/* ============================================================
   EMPTY / LOADING STATES
   ============================================================ */
.pc-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--pc-2);
  padding:var(--pc-10) var(--pc-4);
  color:var(--pc-text-secondary);
}
.pc-empty .pc-icon{ width:28px; height:28px; color:var(--pc-text-tertiary); }
.pc-empty__title{ font-size:var(--pc-fs-body); font-weight:600; color:var(--pc-text); }
.pc-empty__text{ font-size:var(--pc-fs-support); max-width:44ch; }
.pc-empty__action{ margin-top:var(--pc-2); }

.pc-skeleton{
  height:12px;
  border-radius:var(--pc-r-sm);
  background:linear-gradient(90deg,var(--pc-surface-hover) 25%,var(--pc-border) 37%,var(--pc-surface-hover) 63%);
  background-size:400% 100%;
  animation:pc-shimmer 1.4s ease-in-out infinite;
}
.pc-skeleton + .pc-skeleton{ margin-top:var(--pc-2); }
.pc-skeleton--wide{ width:100%; }
.pc-skeleton--half{ width:50%; }
.pc-skeleton--kpi{ height:28px; width:60%; }
@keyframes pc-shimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
@media (prefers-reduced-motion:reduce){ .pc-skeleton{ animation:none; } }

/* ============================================================
   MODAL / TOAST
   ============================================================ */
.pc-modal-backdrop{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  padding:var(--pc-4);
}
.pc-modal{
  width:100%; max-width:560px;
  max-height:calc(100vh - var(--pc-16));
  display:flex; flex-direction:column;
  background:var(--pc-surface);
  border:1px solid var(--pc-border-strong);
  border-radius:var(--pc-r-lg);
  box-shadow:var(--pc-e-3);
  overflow:hidden;
}
.pc-modal__body{ padding:var(--pc-4); overflow-y:auto; }
.pc-modal__foot{
  display:flex; justify-content:flex-end; gap:var(--pc-2);
  padding:var(--pc-3) var(--pc-4);
  border-top:1px solid var(--pc-border);
}

.pc-toast{
  display:flex; align-items:center; gap:var(--pc-2);
  padding:var(--pc-3) var(--pc-4);
  background:var(--pc-surface);
  border:1px solid var(--pc-border-strong);
  border-left:3px solid var(--pc-brand);
  border-radius:var(--pc-r-md);
  box-shadow:var(--pc-e-2);
  font-size:var(--pc-fs-body);
}
.pc-toast.is-success{ border-left-color:var(--pc-success); }
.pc-toast.is-warning{ border-left-color:var(--pc-warning); }
.pc-toast.is-danger { border-left-color:var(--pc-danger); }

/* ── App-wide guards ─────────────────────────────────────────
   These were introduced with the legacy bridge but are not
   aliases; they are genuine shared rules and outlived it. */

/* Pages ship their own `body` rule; this pins the ground colour
   so no page can reintroduce a gradient or a light background. */
body{ background:var(--pc-bg); }

/* A <select> styled dark still opens a popup the browser paints
   itself; without this the option list renders black-on-black. */
select option{
  background:var(--pc-surface);
  color:var(--pc-text);
}

/* 23 pages declare .shell{grid-template-columns:280px 1fr} with
   their own 980px collapse, while the sidebar drawer takes over
   at 1024px. Between those widths the grid reserved a column for
   an off-canvas sidebar and pushed the page sideways. */
.shell{ grid-template-columns:var(--pc-sidebar-w) 1fr; }
@media (max-width:1024px){
  .shell{ grid-template-columns:1fr !important; }
  .main{ min-width:0; }
}
.shell > .main,
.shell > main{ min-width:0; }

/* Primary actions: the structural brand blue carries white text at
   only 3.75:1, so every filled primary control uses the fill token
   chosen for white (4.76:1). Fill and label only — no layout. */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
.btn-small.btn-primary{
  background:var(--pc-brand-solid);
  color:#fff;
}
.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover{
  background:var(--pc-brand);
  color:#fff;
}
/* A selected tab reads as text, not a filled block. */
.tab.active,
.tab-btn.active{ color:var(--pc-brand-text); }

/* ── Icons in hero and empty-state blocks ─────────────────────
   These containers pre-date the icon set and were sized for an
   emoji (font-size:2-3rem). A line icon at its inline size looks
   lost in them, which reads as a broken panel rather than an
   empty one. Sized here, once, rather than per page. */
.empty-icon .pc-icon,
.empty-state-icon .pc-icon,
.empty-steps-icon .pc-icon,
.card-icon .pc-icon,
.lock-icon .pc-icon,
.expired-icon .pc-icon,
.change-pw-icon .pc-icon,
.chooser-card-icon .pc-icon,
.decision-preview-icon .pc-icon,
.archive-warning-icon .pc-icon,
.data-safe-icon .pc-icon{
  width:32px; height:32px;
  color:var(--pc-text-tertiary);
}
.pc-empty > .pc-icon{ width:28px; height:28px; }