/* public/assets/css/s53-appraisals.css
   KHMER HRMS — Annual Staff Appraisal (screen + print)
   Theme variables only (Day/Night + colour themes safe). Namespaced .appr-* */

.appr-tabs { display:flex; flex-wrap:nowrap; gap:6px; margin-bottom:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
.appr-tabs::-webkit-scrollbar { display:none; }
.appr-tab { flex:0 0 auto; white-space:nowrap; }
.appr-tab { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid var(--border);
    background:var(--surface); color:var(--text); font-size:.85rem; font-weight:600; text-decoration:none; }
.appr-tab svg { width:15px; height:15px; }
.appr-tab:hover { border-color:var(--primary); }
.appr-tab.is-active { background:var(--primary); border-color:var(--primary); color:#fff; }

.appr-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.appr-stat { border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); padding:14px 16px; }
.appr-stat b { display:block; font-size:1.6rem; line-height:1.1; }
.appr-stat span { font-size:.78rem; color:var(--text-muted); }
.appr-progress { height:10px; border-radius:999px; background:var(--border); overflow:hidden; margin:8px 0 4px; }
.appr-progress > i { display:block; height:100%; background:var(--primary); }

.appr-grade { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 8px; border-radius:8px;
    color:#fff; font-weight:800; font-size:.85rem; }
.appr-score { font-weight:700; font-variant-numeric:tabular-nums; }
.appr-muted { color:var(--text-muted); font-size:.8rem; }

.appr-hero { display:flex; flex-wrap:wrap; gap:18px; align-items:center; border:1px solid var(--border); background:var(--surface);
    border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; }
.appr-hero .avatar-photo, .appr-hero .avatar-initial { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.appr-hero h2 { margin:0; font-size:1.15rem; }
.appr-hero-meta { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:.82rem; color:var(--text-muted); margin-top:4px; }
.appr-hero-scores { margin-left:auto; display:flex; gap:16px; text-align:center; }
.appr-hero-scores div b { display:block; font-size:1.35rem; }
.appr-hero-scores div span { font-size:.72rem; color:var(--text-muted); }

.appr-steps { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.appr-step { flex:1 1 150px; border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; font-size:.8rem; background:var(--bg); color:var(--text-muted); }
.appr-step b { display:block; color:var(--text); font-size:.85rem; }
.appr-step.is-done { border-color:#16A34A; }
.appr-step.is-done b::before { content:"✓ "; color:#16A34A; }
.appr-step.is-now { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent); }

.appr-section { border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; }
.appr-section > header { padding:12px 16px; background:color-mix(in srgb, var(--primary) 8%, transparent); border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; }
.appr-section > header h3 { margin:0; font-size:1rem; }
.appr-q { padding:14px 16px; border-bottom:1px solid var(--border); }
.appr-q:last-child { border-bottom:0; }
.appr-q-text { font-weight:600; margin-bottom:2px; }
.appr-q-text em { color:#DC2626; font-style:normal; }
.appr-q-hint { font-size:.78rem; color:var(--text-muted); margin-bottom:8px; }
.appr-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.appr-cols.one { grid-template-columns:1fr; }
.appr-col { border:1px dashed var(--border); border-radius:10px; padding:10px 12px; background:var(--bg); min-width:0; }
.appr-col-title { font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); font-weight:700; margin-bottom:6px; }
@media (max-width:768px) { .appr-cols { grid-template-columns:1fr; } .appr-hero-scores { margin-left:0; } }

.appr-rate { display:flex; flex-wrap:wrap; gap:6px; }
.appr-rate label { cursor:pointer; }
.appr-rate input { position:absolute; opacity:0; pointer-events:none; }
.appr-rate span { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface); font-weight:700; transition:.12s; }
.appr-rate input:checked + span { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-1px); }
.appr-rate input:focus-visible + span { outline:2px solid var(--primary); outline-offset:2px; }
.appr-rate-ends { display:flex; justify-content:space-between; font-size:.7rem; color:var(--text-muted); margin-top:4px; }
.appr-choice { display:flex; align-items:flex-start; gap:8px; padding:6px 0; }
.appr-choice input[type=text] { flex:1; min-width:0; }
.appr-choice-text { margin:2px 0 6px 26px; }
.appr-ans-rate { font-weight:700; }
.appr-ans-text { white-space:pre-wrap; word-break:break-word; }
.appr-ans-other { color:var(--text-muted); font-size:.85rem; }
.appr-pending { color:var(--text-muted); font-style:italic; font-size:.85rem; }

.appr-panel { border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; }
.appr-panel h3 { margin:0 0 10px; font-size:1rem; }
.appr-panel.is-hr { border-color:color-mix(in srgb, var(--primary) 50%, var(--border)); }
.appr-outcomes { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; margin-bottom:10px; }
.appr-outcomes label { display:flex; gap:8px; align-items:center; border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; background:var(--bg); }
.appr-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:12px; }
.appr-sticky { position:sticky; bottom:0; background:var(--bg); padding:10px 0; border-top:1px solid var(--border); z-index:5; }

/* builder */
.appr-b-sec { border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); margin-bottom:16px; }
.appr-b-sec > .appr-b-head { padding:12px 14px; background:color-mix(in srgb, var(--primary) 8%, transparent); display:grid; gap:10px;
    grid-template-columns:1fr 1fr 110px auto; align-items:end; border-bottom:1px solid var(--border); }
.appr-b-q { margin:12px 14px; border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--bg); }
.appr-b-grid { display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.appr-b-row { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-top:10px; }
.appr-b-row .form-group { margin:0; min-width:130px; }
.appr-b-opt { display:grid; grid-template-columns:64px 1fr 1fr 90px auto auto; gap:8px; align-items:center; margin-top:8px; }
@media (max-width:768px) { .appr-b-sec > .appr-b-head, .appr-b-grid { grid-template-columns:1fr; } .appr-b-opt { grid-template-columns:64px 1fr 1fr; } }

/* ───── Print form ───── */
.appr-print { font-size:10pt; color:#111; }
.appr-print + .appr-print { page-break-before:always; break-before:page; }
.appr-print h2 { break-inside:avoid; page-break-inside:avoid; break-after:avoid; page-break-after:avoid; font-size:11.5pt; margin:12px 0 4px; padding:3px 8px; background:#eef1f6; border-left:4px solid #1A1A2E; }
.appr-print table { width:100%; border-collapse:collapse; margin-bottom:6px; }
.appr-print th, .appr-print td { border:1px solid #9aa3b2; padding:4px 6px; vertical-align:top; text-align:left; white-space:normal !important; font-size:9pt; }
.appr-print th { background:#f3f5f9; font-weight:700; }
.appr-print .info td:nth-child(odd) { background:#f3f5f9; font-weight:700; width:18%; }
.appr-print .info td:nth-child(even) { width:32%; }
.appr-print .alt { display:block; font-size:7.5pt; color:#555; font-weight:400; }
.appr-print .tick { display:inline-block; width:12px; height:12px; border:1px solid #333; margin-right:4px; vertical-align:-2px; text-align:center; line-height:11px; font-size:10px; }
.appr-print .tick.on { background:#1A1A2E; color:#fff; }
.appr-print .rate { display:flex; justify-content:center; align-items:center; gap:4px; }
.appr-print .rate span { display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:20px; height:20px; padding:0; margin:0; line-height:1; text-align:center; border:1px solid #333; border-radius:50%; font-size:8.5pt; }
.appr-print .rate span.on { background:#1A1A2E; color:#fff; }
.appr-print .lines { min-height:34px; background-image:repeating-linear-gradient(transparent 0 16px, #bbb 16px 17px); }
.appr-print .box { border:1px solid #9aa3b2; padding:6px 8px; min-height:46px; white-space:pre-wrap; }
.appr-print .sign { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:26px; text-align:center; font-size:9pt; }
.appr-print .sign div { padding-top:44px; border-top:1px solid #333; }
.appr-print .conf { font-size:8pt; color:#a00; text-align:right; }
.appr-print tr { break-inside:avoid; page-break-inside:avoid; }
.appr-print .grade { display:inline-block; padding:1px 8px; border:1px solid #333; font-weight:800; }
@media print { .appr-print, .appr-print * { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }

.appr-warn { background: color-mix(in srgb, #D97706 14%, transparent); border-left: 4px solid #D97706; padding: 8px 12px; border-radius: 6px; margin: 8px 0; }

/* Responsive hardening: grid children may shrink, inputs never exceed their cell */
.appr-b-opt > *, .appr-b-grid > *, .appr-b-row > *, .appr-cols > * { min-width: 0; }
.appr-b-opt input[type="text"], .appr-b-opt input[type="number"] { width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 480px) { .appr-b-opt { grid-template-columns: 1fr; } }

/* Print: the shared fixed footer is drawn inside the page area and would overlap long forms; the form carries its own reference no. and confidential line. */
@media print { body:has(.appr-print) .print-footer { display:none !important; } }

/* Page header: title block left, action buttons right on the SAME row (stacks on phones). */
.page-header.appr-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; }
.page-header.appr-head > div:first-child { flex:1 1 260px; min-width:0; }
.page-header.appr-head .header-actions { margin-left:auto; flex:0 0 auto; max-width:100%; }
@media (max-width:575px) { .page-header.appr-head .header-actions { margin-left:0; width:100%; } }

/* Empty state */
.appr-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:40px 20px; margin-bottom:16px;
    border:1px dashed var(--border); border-radius:var(--radius); background:var(--surface); }
.appr-empty-icon { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:4px;
    background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); }
.appr-empty-icon svg { width:26px; height:26px; }
.appr-empty h3 { margin:0; font-size:1.05rem; }
.appr-empty p { margin:0 0 6px; max-width:440px; color:var(--text-muted); font-size:.9rem; }
.appr-empty .btn, .appr-empty .btn:hover { text-decoration:none; }

/* Tab row + actions on one line */
.appr-bar { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin-bottom:16px; }
.appr-bar .appr-tabs { margin-bottom:0; flex:1 1 auto; min-width:0; }
.appr-bar-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto; }
.appr-bar-actions form { margin:0; }
@media (max-width:767px) { .appr-bar-actions { width:100%; margin-left:0; } .appr-bar-actions .btn { flex:1 1 auto; justify-content:center; } .appr-bar-actions form { flex:1 1 auto; display:flex; } .appr-bar-actions form .btn { width:100%; } }
.appr-empty-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:6px; }
.appr-empty-actions form { margin:0; }

/* Rating bands editor */
.appr-grades-panel { padding:6px 16px 10px; }
.appr-grade-row { display:grid; grid-template-columns:90px minmax(0,1.2fr) minmax(0,1.2fr) 110px 120px 64px 44px; gap:12px; align-items:end; padding:10px 0; border-bottom:1px solid var(--border); }
.appr-grade-row:last-child { border-bottom:0; }
.appr-grade-row .form-group { margin:0; }
.appr-grade-row .form-group label { display:none; }
.appr-grade-row input { width:100%; min-width:0; box-sizing:border-box; }
.appr-grade-head { align-items:center; padding:10px 0 8px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
.appr-swatch { width:100% !important; height:38px; padding:2px !important; border-radius:10px; cursor:pointer; }
.g-del { display:flex; justify-content:center; }
.appr-grade-row .g-desc { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width:768px) { .appr-grade-row .g-desc { grid-template-columns:1fr; } }
.appr-del { color:var(--danger, #DC2626); border-color:color-mix(in srgb, var(--danger, #DC2626) 40%, var(--border)); }
@media (max-width:899px) {
    .appr-grade-head { display:none; }
    .appr-grade-row { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 12px; padding:14px 0; align-items:start; }
    .appr-grade-row .form-group label { display:block; font-size:.75rem; margin-bottom:4px; }
    .appr-grade-row .g-kh, .appr-grade-row .g-en { grid-column:1 / -1; }
    .appr-grade-row .g-del { grid-column:1 / -1; justify-content:flex-end; }
}
@media (max-width:767px) { .page-header.appr-head { flex-direction:column; align-items:stretch; } .page-header.appr-head > div:first-child { flex:0 0 auto; } }
.appr-bar-actions .btn, .appr-bar-actions .btn:hover { text-decoration:none; }

/* ═════════════════════════════════════════════════════════════════════
   S54 — Staff Appraisal UI polish (screen only; theme variables only)
   Same field look as .form-group inputs, ui-select / s11 date picker / combo
   aware, Khmer-friendly spacing, responsive.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Tabs ── */
.appr-tabs { padding:4px; background:var(--surface-alt, var(--bg)); border:1px solid var(--border); border-radius:999px; gap:4px; }
.appr-tab { border-color:transparent; background:transparent; padding:8px 16px; line-height:1.5; transition:background .15s ease, color .15s ease, box-shadow .15s ease; }
.appr-tab:hover { background:color-mix(in srgb, var(--primary) 10%, transparent); border-color:transparent; color:var(--primary); }
.appr-tab.is-active, .appr-tab.is-active:hover { background:var(--primary); color:#fff; box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent); }
.appr-tab:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* ── Page head ── */
.page-header.appr-head h1 { letter-spacing:0; }
.appr-meta-date { display:inline-flex; align-items:center; gap:5px; margin-right:12px; }
.appr-meta-date svg, .appr-chip svg, .appr-hero-meta svg { width:14px; height:14px; flex:0 0 auto; }
.appr-hero-meta span { display:inline-flex; align-items:center; gap:5px; }

/* ── One field look for every input inside the appraisal screens ── */
.appr-input, .appr-panel input[type="text"], .appr-panel input[type="number"], .appr-panel textarea,
.appr-b-sec input[type="text"], .appr-b-sec input[type="number"], .appr-b-sec textarea, .appr-b-q input[type="text"], .appr-b-q input[type="number"], .appr-b-q textarea,
.appr-q input[type="text"], .appr-q textarea, .appr-choice-text input[type="text"], .appr-filter input[type="text"] {
    width:100%; box-sizing:border-box; padding:10px 14px; border-radius:var(--radius-sm, 10px); border:1px solid var(--border);
    background:var(--surface); color:var(--text); font:inherit; font-size:.92rem; line-height:1.6;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.appr-b-q input, .appr-b-q textarea, .appr-b-q select { background:var(--surface); }
.appr-input:hover, .appr-panel input:hover, .appr-panel textarea:hover, .appr-b-sec input:hover, .appr-b-sec textarea:hover { border-color:color-mix(in srgb, var(--primary) 40%, var(--border)); }
.appr-input:focus, .appr-panel input:focus, .appr-panel textarea:focus, .appr-b-sec input:focus, .appr-b-sec textarea:focus, .appr-q input:focus, .appr-q textarea:focus, .appr-filter input:focus {
    outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.appr-panel textarea, .appr-b-sec textarea, .appr-q textarea { resize:vertical; min-height:84px; }
.appr-input::placeholder, .appr-panel input::placeholder, .appr-panel textarea::placeholder, .appr-b-sec input::placeholder, .appr-q textarea::placeholder { color:var(--text-muted); opacity:.75; }
.appr-input:disabled, .appr-panel input:disabled, .appr-panel textarea:disabled, fieldset:disabled .appr-b-sec input, fieldset:disabled .appr-b-sec textarea { opacity:.65; cursor:not-allowed; background:var(--surface-alt, var(--bg)); }

/* Native <select> that stays native (dynamic builder rows): custom arrow, same field look */
.appr-b-q select, .appr-b-sec select, .appr-panel select:not(.ui-select-native) {
    -webkit-appearance:none; appearance:none; width:100%; padding:10px 38px 10px 14px; border-radius:var(--radius-sm, 10px);
    border:1px solid var(--border); background-color:var(--surface); color:var(--text); font:inherit; font-size:.92rem; cursor:pointer;
    background-image:linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:calc(100% - 19px) 52%, calc(100% - 13px) 52%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.appr-b-q select:focus, .appr-b-sec select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

/* ui-select inside forms: full width, field radius, no funnel icon (that icon is for filter bars) */
.appr-panel .ui-select, .appr-b-sec .ui-select { display:block; width:100%; min-width:0; }
.appr-panel .ui-select-trigger { border-radius:var(--radius-sm, 10px); min-height:44px; font-weight:500; font-size:.92rem; box-shadow:none; padding:9px 14px; }
.appr-panel .ui-select-icon { display:none; }
.appr-panel .ui-select-panel { min-width:0; }
.appr-panel, .appr-form-block { overflow:visible; }

/* Filter bar (index / cycle overview) */
.appr-filter { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.appr-filter input[type="text"] { width:auto; min-width:200px; flex:1 1 200px; border-radius:999px; padding:9px 16px; }
.appr-filter .ui-select { flex:0 1 220px; }
.filter-form .ui-select-trigger { min-height:40px; }

/* Date picker inside the appraisal forms */
.appr-panel .s11-picker-field { width:100%; }

/* Combo (evaluator) */
.appr-combo { min-width:260px; flex:1 1 280px; }

/* ── Form blocks (cycle form) ── */
.appr-form-block { padding:4px 0 8px; }
.appr-form-block + .appr-form-block { border-top:1px dashed var(--border); margin-top:14px; padding-top:18px; }
.appr-form-title { display:flex; align-items:center; gap:10px; margin:0 0 14px !important; font-size:1rem; }
.appr-form-ico { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); }
.appr-form-ico svg { width:16px; height:16px; }
.appr-form-grid { gap:14px 16px; }
.appr-form-grid .form-group { margin:0; min-width:0; }
.appr-form-grid .form-group > label { display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color:var(--text); }
.appr-form-grid small { display:block; margin-top:5px; line-height:1.5; }
.appr-form-grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.appr-form-grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:991px) { .appr-form-grid-4, .appr-form-grid-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:575px) { .appr-form-grid-4, .appr-form-grid-3 { grid-template-columns:1fr; } }
.appr-panel .form-group > label, .appr-b-row .form-group > label { font-size:.82rem; font-weight:600; margin-bottom:6px; display:block; }
.appr-panel .form-group > label.label-icon { display:flex; }

/* ── Tables / list ── */
.appr-table { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.appr-table .data-table thead th { background:color-mix(in srgb, var(--primary) 6%, var(--surface)); font-size:.78rem; text-transform:none; letter-spacing:.01em; }
.appr-table .data-table tbody tr { transition:background .12s ease; }
.appr-table .data-table tbody tr:hover { background:color-mix(in srgb, var(--primary) 5%, transparent); }
.appr-person { display:flex; align-items:center; gap:10px; min-width:0; }
.appr-avatar { flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem; color:var(--primary);
    background:color-mix(in srgb, var(--primary) 14%, transparent); }
.appr-norows { padding:28px 12px !important; }
.appr-inline-form { display:inline; margin:0; }

/* ── Hero / stats ── */
.appr-hero { box-shadow:0 1px 3px rgba(15,23,42,.05); }
.appr-hero .avatar-initial { display:grid; place-items:center; background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary); font-weight:800; font-size:1.3rem; }
.appr-hero-scores div { min-width:74px; padding:8px 12px; border-radius:12px; background:var(--bg); border:1px solid var(--border); }
.appr-stat { position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.appr-stat::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--primary); opacity:.85; }
.appr-stat b { font-variant-numeric:tabular-nums; }
.appr-panel, .appr-section, .appr-b-sec { box-shadow:0 1px 2px rgba(15,23,42,.04); }
.appr-panel h3 { display:flex; align-items:center; gap:8px; }
.appr-dash { align-items:start; }
.appr-dist-row { display:flex; align-items:center; gap:10px; margin:8px 0; }
.appr-dist-bar { flex:1; margin:0 !important; }
.appr-dept-row { display:flex; justify-content:space-between; gap:10px; margin:8px 0; padding-bottom:8px; border-bottom:1px dashed var(--border); }
.appr-dept-row:last-child { border-bottom:0; padding-bottom:0; }
.appr-step { box-shadow:0 1px 2px rgba(15,23,42,.03); }
.appr-actions .btn svg, .appr-empty .btn svg { width:16px; height:16px; }

/* ── Choices: radio / checkbox as tappable cards, policy as switches ── */
.appr-panel input[type="checkbox"], .appr-panel input[type="radio"], .appr-q input[type="checkbox"], .appr-q input[type="radio"], .appr-b-q input[type="checkbox"] { accent-color:var(--primary); width:18px; height:18px; flex:0 0 auto; margin:2px 0 0; cursor:pointer; }
.appr-choice.is-card { border:1px solid var(--border); border-radius:10px; padding:9px 12px; margin:6px 0; background:var(--surface); cursor:pointer; transition:border-color .12s ease, background .12s ease; }
.appr-choice.is-card:hover { border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); }
.appr-choice.is-card:has(input:checked) { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.appr-choice-text { margin:0 0 6px 0; }
.appr-outcomes label.appr-outcome { transition:border-color .12s ease, background .12s ease; min-height:44px; }
.appr-outcomes label.appr-outcome:hover { border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); }
.appr-outcomes label.appr-outcome:has(input:checked) { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, var(--surface)); font-weight:600; }
.appr-rate span { width:42px; height:42px; }
.appr-rate label:hover span { border-color:var(--primary); }

.appr-policy .appr-choice.is-switch { border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:8px 0; background:var(--bg); align-items:center; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.appr-policy .appr-choice.is-switch:hover { border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); }
.appr-policy .appr-choice.is-switch:has(input:checked) { border-color:color-mix(in srgb, var(--primary) 60%, var(--border)); background:color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.appr-policy .appr-choice.is-switch input[type="checkbox"] { -webkit-appearance:none; appearance:none; width:42px; height:24px; margin:0; border-radius:999px; background:var(--border); position:relative; transition:background .18s ease; flex:0 0 auto; }
.appr-policy .appr-choice.is-switch input[type="checkbox"]::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s ease; }
.appr-policy .appr-choice.is-switch input[type="checkbox"]:checked { background:var(--primary); }
.appr-policy .appr-choice.is-switch input[type="checkbox"]:checked::after { transform:translateX(18px); }
.appr-policy .appr-choice.is-switch input[type="checkbox"]:disabled { opacity:.55; cursor:not-allowed; }
.appr-policy .appr-choice.is-switch input[type="checkbox"]:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* ── Grade rows ── */
.appr-code-wrap { display:flex; align-items:center; gap:8px; }
.appr-code-wrap .appr-grade { flex:0 0 auto; min-width:34px; height:34px; }
.appr-code-wrap input { min-width:0; }
.appr-swatch { border-radius:10px !important; border:1px solid var(--border) !important; background:var(--surface); }
.appr-grade-row .form-group > label { margin-bottom:4px; }

/* ── Empty state ── */
.appr-empty { padding:48px 20px; background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, var(--surface)), var(--surface)); }
.appr-empty h3 { font-size:1.1rem; }
.appr-empty-icon { width:64px; height:64px; box-shadow:0 0 0 8px color-mix(in srgb, var(--primary) 7%, transparent); }

/* ── Sticky action bar ── */
.appr-sticky { background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:12px 0; }

/* ── Builder ── */
.appr-b-sec > .appr-b-head { align-items:end; }
.appr-b-q { transition:border-color .15s ease; }
.appr-b-q:hover { border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }
.appr-b-row .form-group { min-width:150px; }
.appr-b-opt input[type="number"] { text-align:center; }

@media (max-width:767px) {
    .appr-tabs { border-radius:14px; }
    .appr-hero-scores div { flex:1 1 90px; }
    .appr-filter input[type="text"], .appr-filter .ui-select { flex:1 1 100%; width:100%; }
    .appr-sticky .btn { flex:1 1 auto; justify-content:center; }
}
@media print { .appr-tabs, .appr-bar, .appr-sticky { display:none !important; } }

.appr-opt-code { text-align:center; font-weight:600; }
.appr-back-row { justify-content:flex-start; margin-top:8px; }
.appr-scale-bar { margin:8px 0 2px; }

/* ── Cycle form polish ───────────────────────────── */
.appr-form-grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.appr-form-grid-6 { grid-template-columns:repeat(6, minmax(0, 1fr)); }
.appr-form-grid-6 > .span-2 { grid-column:span 2; }
.appr-form-grid-6 > .span-3 { grid-column:span 3; }
@media (max-width:991px) { .appr-form-grid-6 > .span-2, .appr-form-grid-6 > .span-3 { grid-column:span 3; } }
@media (max-width:575px) { .appr-form-grid-2 { grid-template-columns:1fr; } .appr-form-grid-6 { grid-template-columns:1fr; } .appr-form-grid-6 > .span-2, .appr-form-grid-6 > .span-3 { grid-column:auto; } }
.appr-form-block { padding:6px 4px 10px; }
.appr-form-title { padding-bottom:10px; border-bottom:1px solid var(--border); }
.appr-form-footer { margin-top:22px; padding-top:16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.appr-form-footer .appr-actions { margin-top:0; }
.appr-form-footer .appr-actions .btn-primary { min-width:120px; justify-content:center; }
.appr-form-footer .appr-actions .btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.appr-form-footer .appr-back-row { margin-top:0; }
.appr-notice { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; padding:14px 18px;
  border:1px solid color-mix(in srgb, #D97706 35%, var(--border)); border-left:4px solid #D97706; border-radius:var(--radius);
  background:color-mix(in srgb, #D97706 8%, var(--surface)); }
.appr-notice-ico { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:color-mix(in srgb, #D97706 18%, transparent); color:#B45309; flex:0 0 auto; }
.appr-notice-ico svg { width:18px; height:18px; }
.appr-notice-body { flex:1 1 240px; font-weight:500; }

/* ── Printed appraisal form polish ───────────────── */
.appr-print .qtable { table-layout:fixed; }
.appr-print .qtable th, .appr-print .qtable td { vertical-align:middle; padding:3px 6px; }
.appr-print .qtable td:first-child { text-align:center; }
.appr-print .qtable td.ans .box, .appr-print .qtable td.ans .lines { text-align:left; }
.appr-print .defs { table-layout:fixed; margin-bottom:2px; }
.appr-print .defs th, .appr-print .defs td { vertical-align:middle; padding:3px 6px; }
.appr-print .defs td.c, .appr-print .defs th:nth-child(1), .appr-print .defs th:nth-child(3) { text-align:center; }
.appr-print .defs { break-inside:avoid; page-break-inside:avoid; }
.appr-print .def-note { font-size:7.5pt; color:#555; margin:2px 0 6px; }

/* ── Printed form, round 2 ───────────────────────── */
/* heading: Khmer / English on one line, same size */
.appr-print h2 .alt { display:inline; font-size:inherit; color:inherit; font-weight:inherit; }
.appr-print h2 .alt::before { content:" / "; }
.appr-print .defs .alt { display:inline; font-size:inherit; color:inherit; }
.appr-print .defs .alt::before { content:" / "; }
/* no ruled lines in writing areas; just free space */
.appr-print .write { min-height:46px; }
.appr-print .qtable tr.q-text td { height:58px; }
.appr-print .oth-box { border:1px solid #9aa3b2; min-height:42px; margin:3px 0 2px; }
.appr-print .qtable tr.q-other td { height:auto; }
/* result table: roomy cells so it can be filled by hand */
.appr-print .result td { height:42px; text-align:center; vertical-align:middle; font-size:11pt; }
.appr-print .result th { text-align:center; }

/* no box inside a box: the table cell itself is the writing area */
.appr-print td .box, .appr-print .oth-box { border:0; padding:0; background:none; }
.appr-print td .box { min-height:52px; }
.appr-print .oth-box { min-height:30px; margin:0; }

/* labels centred vertically; one-respondent answers use one wide cell */
.appr-print th { vertical-align:middle; }
.appr-print .ans-wide .opts { display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; }
.appr-print .ans-wide .opts .oth-box { grid-column:1 / -1; }

/* Printed form: a question that only the other side answers, inside a section that has both columns */
.appr-print .qtable td.ans-na { background:#f1f3f6; }

/* Printed form: Employee / Manager headers sit centred over their answer column (also when a section has only one of them) */
.appr-print .qtable thead th:nth-child(n+3) { text-align:center; }
.appr-print .qtable td.ans-wide .appr-pending { display:block; text-align:center; }