/* ──────────────────────────────────────────────────────────────────────────
   THEME · PRO  —  sleek / clean / modern refinement layer for the UI kit
   Loaded LAST (after style.css + kit.css). Elevates the stock-admin look into
   a refined product aesthetic: IBM Plex type, cool-slate neutrals, restrained
   color, hairline cards, crisp line icons (see Icons.jsx).
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --font:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* cool-slate neutral ramp */
  --bg:           #F7F8FA;
  --surface:      #FFFFFF;
  --surface-2:    #F3F4F7;
  --border:       #E3E6EC;
  --border-light: #EDEFF3;
  --text:         #0F141C;
  --text-2:       #39414F;
  --text-muted:   #69707E;
  --text-hint:    #9CA3B0;

  --blue:       #2C5FF6;
  --blue-hover: #1F4BD8;
  --blue-bg:    #EEF3FF;
  --green:      #1A8049;  --green-bg: #E9F7EF;
  --orange:     #B45309;  --orange-bg:#FBF3E4;
  --red:        #C23A2B;  --red-bg:   #FBEDEB;

  --shadow-sm: 0 1px 2px rgba(15,20,28,.05);
  --shadow:    0 10px 28px -10px rgba(15,20,28,.18);
  --shadow-lg: 0 24px 60px -18px rgba(15,20,28,.28);
  --shadow-md: 0 10px 28px -12px rgba(15,20,28,.16);

  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 14px;
}

body {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.app-header {
  height: 64px;
  padding: 0 28px;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--border-light);
  backdrop-filter: saturate(180%) blur(20px);
}
.brand-icon { border-radius: 9px; height: 34px; min-width: 34px; }
.app-header .brand-title { font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--text); }
.app-header .brand-subtitle { font-size: 11.5px; color: var(--text-muted); letter-spacing: 0; }
.header-actions { gap: 6px; }
.app-header .header-user {
  background: transparent; border: none; padding: 4px 4px 4px 8px; gap: 9px;
}
.user-avatar { border-radius: 9px; width: 32px; height: 32px; font-size: 12px; }
.app-header .user-name { font-weight: 600; font-size: 13px; color: var(--text); }
.app-header .user-role { font-size: 11px; color: var(--text-muted); }

/* refined nav buttons in header */
.app-header .btn-sm { height: 34px; min-height: 34px; padding: 0 13px; font-weight: 500; border-radius: 8px; }
.app-header .btn-ghost { color: var(--text-muted); }
.app-header .btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.app-header .btn-secondary {
  background: var(--surface-2); border-color: transparent; color: var(--text);
}
.app-header .btn-secondary:hover:not(:disabled) { background: #E8EAEF; color: var(--text); }

/* status pill in header */
.app-header .badge-active {
  background: var(--green-bg); color: var(--green);
  border: 1px solid rgba(26,128,73,.16); font-weight: 500; padding: 5px 11px;
}

/* ── Typography polish ──────────────────────────────────────────────────── */
h1,h2,h3,.page-title,.dept-title,.proc-detail-title { letter-spacing: -.015em; color: var(--text); }
.proc-detail-title { font-weight: 600; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { border-radius: 9px; font-weight: 500; letter-spacing: 0; transition: all .14s ease; }
.btn-primary, .btn-blue {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 1px 2px rgba(44,95,246,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover:not(:disabled), .btn-blue:hover:not(:disabled) { background: #1F4BD8; border-color: #1F4BD8; }
.btn-secondary { background: #fff; border-color: var(--border); color: var(--text-2); box-shadow: var(--shadow-sm); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.btn-success { background: var(--green); border-color: var(--green); box-shadow: 0 1px 2px rgba(26,128,73,.25); }
.btn-warning { background: var(--orange); border-color: var(--orange); }
.btn-danger  { background: var(--red); border-color: var(--red); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn .ico { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Inputs / search ────────────────────────────────────────────────────── */
.form-control, .search-input, .filter-bar select {
  border-radius: 9px; border-color: var(--border); background: #fff;
  font-size: .92rem; transition: all .14s ease;
}
.form-control:focus, .search-input:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3.5px rgba(44,95,246,.13);
}
.search-input { padding-left: 42px; }
.search-icon { color: var(--text-hint); display: flex; }
.search-icon .ico { width: 17px; height: 17px; }

/* ── KPI cards ──────────────────────────────────────────────────────────── */
.kpi-card {
  border: 1px solid var(--border-light); border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 20px 22px; background: #fff;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border); }
.kpi-card.kpi-selected { box-shadow: 0 0 0 2px var(--blue), var(--shadow-md); border-color: transparent; }
.kpi-number { font-size: 2.15rem; font-weight: 600; letter-spacing: -.02em; }
.kpi-label {
  display: flex; align-items: center; gap: 7px;
  font-size: .68rem; letter-spacing: .09em; color: var(--text-muted); margin-top: 8px;
}
.kpi-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.kpi-active  .kpi-label::before { background: #1f9d57; }
.kpi-draft   .kpi-label::before { background: #8a93a3; }
.kpi-pending .kpi-label::before { background: #e08a1e; }
.kpi-archive .kpi-label::before { background: #aab1bd; }
.kpi-active  .kpi-number { color: #1a8049; }
.kpi-draft   .kpi-number { color: #5a626f; }
.kpi-pending .kpi-number { color: #b8740f; }
.kpi-archive .kpi-number { color: #9aa1ad; }

/* ── Action chips ───────────────────────────────────────────────────────── */
.action-strip-label { letter-spacing: .09em; font-size: .68rem; }
.action-chip {
  border-radius: 10px; font-weight: 500; padding: 10px 15px; gap: 8px;
  box-shadow: var(--shadow-sm); transition: all .14s ease;
}
.action-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.action-chip .ico { width: 16px; height: 16px; }
.chip-red   { background: #fff; border-color: var(--border); color: #b23527; }
.chip-red .chip-count { background: var(--red-bg); color: #b23527; }
.chip-blue  { background: #fff; border-color: var(--border); color: var(--blue); }
.chip-blue .chip-count { background: var(--blue-bg); color: var(--blue); }
.chip-neutral { background: #fff; border-color: var(--border); color: var(--text-muted); }
.chip-count { font-weight: 600; border-radius: 7px; }

/* ── Filter / toolbar ───────────────────────────────────────────────────── */
.filter-card { border-radius: 14px; border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.view-toggle { border-radius: 9px; background: var(--surface-2); border-color: var(--border-light); }
.view-toggle button { border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; }
.view-toggle button .ico { width: 15px; height: 15px; }
.view-toggle button.vt-active { box-shadow: 0 1px 3px rgba(15,20,28,.12); }
.table-toolbar .btn-ghost { color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.table-toolbar .btn-ghost .ico { width: 15px; height: 15px; }
.result-count { color: var(--text-2); }

/* ── Table ──────────────────────────────────────────────────────────────── */
.proc-table-wrap { border-radius: 14px; border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.proc-table thead tr { background: transparent; }
.proc-table th {
  background: transparent; font-size: .68rem; letter-spacing: .07em;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.proc-table td { padding: 15px 18px; border-color: var(--border-light); }
.proc-table tbody tr:nth-child(even) { background: transparent; }
.proc-table tbody tr:hover { background: var(--surface-2); }
.proc-table tbody tr td strong { font-weight: 600; color: var(--text); }
.proc-table .btn-ghost .ico { width: 16px; height: 16px; }

/* ── Cards (procedure card view) ────────────────────────────────────────── */
.proc-card { border-radius: 14px; border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.proc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.proc-card-name { font-weight: 600; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { font-weight: 500; border-radius: 7px; padding: 4px 9px; font-size: .72rem; letter-spacing: 0; }
.badge-active  { background: var(--green-bg);  color: var(--green); }
.badge-pending { background: #FBF3E4; color: #b8740f; }
.badge-draft   { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-light); }
.badge-archive { background: var(--surface-2); color: var(--text-hint); }
.version-chip  { border-radius: 7px; background: var(--surface-2); border-color: var(--border-light); font-weight: 500; }

/* ── Procedure detail ───────────────────────────────────────────────────── */
.proc-toolbar { padding: 12px 28px; border-bottom: 1px solid var(--border-light); background: rgba(255,255,255,.92); }
.proc-toolbar .btn-ghost { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.proc-toolbar .btn .ico { width: 15px; height: 15px; }
.proc-detail-header, .form-section, .section { border-radius: 14px; border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.readonly-overlay-msg { border-radius: 10px; }
.tab-bar { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--border); padding: 0 28px; }
.tab-btn { font-weight: 500; }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.section-header { background: var(--surface-2); }
.info-label { letter-spacing: .06em; color: var(--text-muted); }
.energy-table th { background: var(--surface-2); font-size: .67rem; letter-spacing: .06em; }
.energy-table-wrap { border-radius: 12px; border-color: var(--border-light); }

/* step numbers — flatter, refined */
.step-num { font-weight: 600; box-shadow: 0 1px 2px rgba(15,20,28,.18); }

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-page { background: radial-gradient(120% 90% at 50% -10%, rgba(44,95,246,.10), transparent 60%), var(--bg); }
.login-box { border-radius: 18px; border-color: var(--border-light); box-shadow: var(--shadow-lg); }
.login-logo h1 { font-weight: 600; letter-spacing: -.01em; }
.logo-icon { border-radius: 13px; }
.fs-notice { border-radius: 12px; }
.fs-notice h4 { display: flex; align-items: center; gap: 7px; }
.fs-notice .ico { width: 16px; height: 16px; }
.btn-fs { border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.login-defaults { border-radius: 12px; background: var(--surface-2); border-color: var(--border-light); }

/* ── Training matrix ────────────────────────────────────────────────────── */
.tm-sidebar { border-right-color: var(--border-light); }
.dept-btn.active { border-left-color: var(--blue); }
.tm-stat { border-radius: 12px; border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.tm-stat-val { font-weight: 600; letter-spacing: -.01em; }
.dept-header { border-bottom-color: var(--border-light); }
.matrix-table th, .matrix-table td.emp-cell { background: var(--surface); }
.cell-trained { font-weight: 600; }

/* ── Browser chrome (deployed-app shell) ────────────────────────────────── */
.bw-root { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }
.bw-tabs { display: flex; align-items: flex-end; height: 42px; background: #DEE1E6; padding: 7px 8px 0; gap: 3px; flex-shrink: 0; }
.bw-tab { display: flex; align-items: center; gap: 9px; height: 35px; padding: 0 14px; border-radius: 10px 10px 0 0;
  font-size: 12.5px; color: #3c4043; max-width: 250px; min-width: 150px; }
.bw-tab.active { background: #fff; box-shadow: 0 -1px 2px rgba(0,0,0,.04); font-weight: 500; }
.bw-tab.inactive { color: #5f6368; }
.bw-tab img { width: 15px; height: 15px; border-radius: 3px; flex-shrink: 0; object-fit: cover; }
.bw-tab span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-tab .x { color: #9aa0a6; font-size: 12px; }
.bw-newtab { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: #5f6368; border-radius: 50%; align-self: center; margin-bottom: 4px; }
.bw-newtab:hover { background: rgba(0,0,0,.06); }
.bw-toolbar { display: flex; align-items: center; gap: 6px; height: 48px; background: #fff; padding: 0 12px; border-bottom: 1px solid #e3e6ec; flex-shrink: 0; }
.bw-nav { display: flex; gap: 1px; }
.bw-ico-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #5f6368; cursor: default; }
.bw-ico-btn:hover { background: #f1f3f4; }
.bw-url { flex: 1; display: flex; align-items: center; gap: 9px; height: 34px; background: #f1f3f4; border-radius: 18px;
  padding: 0 15px; margin: 0 6px; font-size: 13.5px; color: #202124; font-family: var(--font); }
.bw-url .lock { color: #1a8049; display: flex; align-items: center; }
.bw-url .dim { color: #80868b; }
.bw-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-gradient);
  color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2); flex-shrink: 0; }
.bw-viewport { flex: 1; overflow: auto; background: var(--bg); position: relative; }
.bw-viewport .login-page { min-height: 100%; }
.bw-viewport .tm-layout { height: calc(100vh - 90px - 64px); }
/* sticky offsets adjust to the app header height inside the framed viewport */
.bw-viewport .proc-toolbar { top: 64px; }
.bw-viewport .tab-bar { top: 64px; }