/* ===== Staff page (light/dark) ===== */
:root{
  --bg: #f6f7f8;
  --surface:#ffffff;
  --surface-1:#fafafa;
  --surface-2:#f1f5f9;
  --surface-3:#eef2f7;
  --text:#0f172a;
  --muted:#6b7280;
  --muted-strong:#374151;
  --border:#e5e7eb;
  --brand-50:#eef6ff;
  --brand-700:#0f5fb9;
  --brand-500:#137fec;
  --danger-500:#e11d48;
  --danger-600:#be123c;
  --emerald:#10b981;
  --rose:#f43f5e;
  --shadow: 0 1px 0 rgba(0,0,0,.04);
  --radius: 12px;
}
.dark{
  --bg:#101922;
  --surface:#0b1220;
  --surface-1:#0f172a;
  --surface-2:#0e1726;
  --surface-3:#0c1522;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --muted-strong:#cbd5e1;
  --border:#1f2937;
  --brand-50:#0c1f33;
  --brand-700:#2b88e4;
  --brand-500:#3ba0ff;
  --danger-500:#f43f5e;
  --danger-600:#e11d48;
  --shadow: 0 1px 0 rgba(255,255,255,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text); background:var(--bg); line-height:1.4;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
.material-symbols-outlined{ font-variation-settings:'OPSZ' 24; }

/* Utilities */
.hide-sm{ display:none; } @media (min-width:640px){ .hide-sm{ display:flex; } }
.row{ display:flex; align-items:center; gap:.5rem; }
.gap-6{ gap:.6rem; }
.muted{ color:var(--muted); }
.xs{ font-size:.78rem; }
.semibold{ font-weight:600; }
.link{ color:var(--brand-700); }

/* Page shell */
.page{ min-height:100vh; }
.app{ display:flex; height:100vh; overflow:hidden; position:relative; }
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; }
.skiplink{ position:absolute; left:-9999px; }
.skiplink:focus{ position:fixed; left:12px; top:12px; z-index:1000; padding:8px 10px; border-radius:10px; background:var(--surface); border:1px solid var(--border); }

/* Sidebar */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; z-index:50; width:256px;
  transform:translateX(-100%); background:var(--surface); border-right:1px solid var(--border);
  transition:transform .28s ease, width .28s ease;
}
.sidebar.is-open{ transform:translateX(0); }
@media (min-width:1024px){ .sidebar{ transform:none; } }
.sidebar__inner{ height:100%; display:flex; flex-direction:column; }
.brand{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--border); }
.brand__icon{ width:28px; height:28px; color:var(--brand-500); }
.brand__name{ font-size:1.05rem; font-weight:800; }
.nav{ display:flex; flex-direction:column; padding:10px; gap:6px; }
.nav__item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--muted); }
.nav__item:hover{ background:var(--brand-50); color:var(--brand-700); }
.nav__item--active{ background:rgba(19,127,236,.12); color:var(--brand-700); }
.nav__text{ font-size:.95rem; font-weight:600; }
.nav--footer{ margin-top:auto; padding-top:8px; border-top:1px solid var(--border); }

/* Content */
.content{ display:flex; flex-direction:column; flex:1 1 auto; margin-left:0; transition:margin-left .28s ease; }
@media (min-width:1024px){ .content{ margin-left:256px; } }
.content--collapsed{ margin-left:80px; }
.content--expanded{ margin-left:256px; }
.container{ max-width:1200px; margin:0 auto; padding:20px 16px; }

/* Header */
.header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--surface);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow);
}
.header__left, .header__right{ display:flex; align-items:center; gap:10px; }
.header__title{ font-size:1.1rem; font-weight:800; letter-spacing:-.01em; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border);
}
.icon-btn:hover{ background:var(--surface-3); }
.icon-btn.ghost{ background:transparent; border-color:var(--border); }
.avatar{ --size:40px; width:var(--size); height:var(--size); border-radius:50%; background: center/cover no-repeat var(--avatar); border:1px solid var(--border); }

/* Search */
.search{ display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); padding:6px 10px; border-radius:10px; }
.search__icon{ color:var(--muted); }
.search__input{ border:0; outline:0; background:transparent; min-width:220px; color:var(--text); }

/* Toolbar */
.toolbar{ display:flex; align-items:center; justify-content:space-between; margin:10px 0 16px; gap:10px; }
.chip{ display:inline-flex; align-items:center; gap:.5rem; background:var(--surface-2); border:1px solid var(--border); padding:.45rem .6rem; border-radius:999px; color:var(--muted); font-size:.85rem; }
.switch{ width:16px; height:16px; }

/* Card / table */
.card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:16px; box-shadow:var(--shadow); }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card__title{ font-weight:700; }

.table-wrap{ position:relative; overflow:auto; border-radius:12px; }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ padding:.75rem .9rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.table thead th{ background:var(--surface-2); color:var(--muted-strong); font-weight:600; text-align:left; }
.table tr:hover td{ background:var(--surface-1); }
.th-actions{ width:1%; white-space:nowrap; }

.table-loading{ display:grid; place-items:center; gap:8px; padding:28px 0; }
.spinner{ width:28px; height:28px; border-radius:999px; border:3px solid #dbeafe; border-top-color:var(--brand-500); animation:spin .9s linear infinite; }
@keyframes spin{ to { transform:rotate(360deg); } }
.empty-row{ padding:18px; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:12px; background:var(--surface); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 12px; border-radius:10px; border:1px solid var(--border); background:#673ab7; color:#ffffff; font-weight:600; }
.btn:hover{ background:var(--brand-50); }
.btn--primary{ background:var(--brand-500); color:#fff; border-color:transparent; }
.btn--primary:hover{ background:#0f6ed6; }
.btn--danger{ background:var(--danger-500); color:#fff; border-color:transparent; }
.btn--danger:hover{ background:var(--danger-600); }
.btn--ghost{ background:#e91e63; }

/* Pills */
.pill{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border-radius:999px; font-size:.75rem; border:1px solid var(--border); background:var(--surface-2); }
.pill--admin{ background:#eef2ff; color:#4338ca; }
.pill--neutral{ background:#f1f5f9; color:#334155; }
.pill--active{ background:#ecfdf5; color:#065f46; }
.pill--inactive{ background:#fef2f2; color:#991b1b; }
.dot{ width:.45rem; height:.45rem; border-radius:50%; background:#cbd5e1; }
.dot--purple{ background:#7c3aed; }
.dot--slate{ background:#64748b; }
.dot--green{ background:#10b981; }
.dot--rose{ background:#ef4444; }

.actions{ display:flex; gap:.5rem; align-items:center; }

/* Modal (shared) */
.modal-scrim{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(2,8,23,.46); z-index:80; }
.modal{ width:min(720px, calc(100vw - 24px)); background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.28); max-height:80vh; overflow:auto; }
.modal--panel{ display:flex; flex-direction:column; }
.modal__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.modal__title{ font-weight:800; font-size:1rem; }
.modal__body{ padding:16px; }
.modal__foot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 16px; border-top:1px solid var(--border); }

.form.grid.gap{ display:grid; gap:12px; }
.field .field__label{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px; }
.input{ width:100%; padding:9px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); outline:none; }
.input:focus{ border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(19,127,236,.16); }
.req{ color:#d22; }

/* Avatars */
.avatar.sm{ width:28px; height:28px; border-radius:50%; background: center/cover no-repeat var(--avatar); border:1px solid var(--border); }








/* ===== Appraisal table: final alignment ===== */
.table--appraisal{
  width:100%;
  table-layout: fixed;
  border-collapse: collapse;     /* one solid header band */
}

.table--appraisal th,
.table--appraisal td{
  box-sizing: border-box;
  padding:.56rem .8rem;
  vertical-align: middle;
  line-height:1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom:1px solid var(--border);
}

.table--appraisal thead th{
  background:var(--surface-2);
  color:var(--muted-strong);
  font-weight:600;
}

/* exact widths handled by <colgroup>, keep alignment helpers */
.table--appraisal .col-closed,
.table--appraisal .col-avg,
.table--appraisal .col-total{
  text-align:center;
  font-variant-numeric: tabular-nums;
}
.table--appraisal .col-grade{ text-align:center; }

/* tidy hover */
.table--appraisal tbody tr:hover td{ background:var(--surface-1); }

/* truncation helper */
.truncate-1{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* sort caret & header button */
.th-sort{
  display:inline-flex; align-items:center; gap:.32rem;
  padding:0; background:transparent; border:0; color:inherit; font-weight:600; cursor:pointer;
}
.sort-caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; opacity:.4; }
.sort-caret.asc  { border-bottom:6px solid currentColor; }
.sort-caret.desc { border-top:6px solid currentColor; }

/* pills compact */
.pill--tight{ padding:.14rem .44rem; gap:.3rem; font-size:.78rem; line-height:1; }

/* wrapper: no horizontal scroll on desktop */
.table-wrap{ overflow-x: visible; }
@media (max-width: 980px){
  .table-wrap{ overflow-x:auto; }
}

/* responsive: optionally hide username on very small screens (you already use hide-sm) */
@media (max-width: 640px){
  .table--appraisal .col-username{ display:none; }
}








/* ===== Toolbar filter chips (Appraisals) ===== */
.toolbar__left { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* Chip = small pill container for a label + control */
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .5rem; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text);
  box-shadow:var(--shadow);
}
.chip .xs{ line-height:1; }

/* Compact inputs to fit inside chips */
.input--xs{
  height:32px; line-height:32px;
  padding:.25rem .5rem; border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface); color:var(--text);
  outline:none;
}
.input--xs:focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-500) 25%, transparent);
}

/* Number input width helper */
.w-16{ width:4rem; }

/* Remove number spinners (Chrome/Edge/Opera) */
.input--xs[type="number"]::-webkit-outer-spin-button,
.input--xs[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none; margin:0;
}
/* Remove number spinners (Firefox) */
.input--xs[type="number"]{ -moz-appearance: textfield; }

/* Select: compact, consistent height */
select.input--xs{
  padding-right:2rem;   /* room for native arrow */
  min-width: 5.5rem;    /* enough to show 3-digit options */
}

/* Dark-mode subtle tweaks */
.dark .chip{
  background:var(--surface-2); border-color:var(--border);
}
.dark .input--xs{
  background:var(--surface-1); border-color:var(--border); color:var(--text);
}

/* Make chips wrap nicely on small screens */
@media (max-width: 640px){
  .toolbar__left{ gap:.5rem; }
  .chip{ padding:.3rem .45rem; }
  .input--xs{ height:30px; line-height:30px; }
}






/* --- Actions column alignment & responsiveness --- */
.table--appraisal .col-actions{
  text-align:right;
  white-space:nowrap;
}
.table--appraisal .col-actions .btn{
  padding:.4rem .6rem;
}

/* keep table compact on narrow viewports */
@media (max-width: 900px){
  /* if space gets tight, let actions wrap under the cell label width */
  .table--appraisal .col-actions{ width:auto !important; }
}