/* ============================================================
   MOS Dashboard – Global Stylesheet
   ============================================================ */

/* ===== CSS VARIABLES ===== */
:root {
    --teal:       #3fc1a8;
    --teal-dark:  #16a08a;
    --peach-bg:   #fde3d3;
    --peach-text: #c0512a;
    --border:     #e7e9ee;
    --text:       #222531;
    --muted:      #8a93a3;
}

* { box-sizing: border-box; }

html, body {
    background: #f4f5f7;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    margin: 0;
    padding: 0;
}

/* ============================================================
   LEFT SIDEBAR RAIL
   ============================================================ */
.side-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 54px;
    background: #fff;
    border-right: 1px solid var(--border);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 11px;
}

.side-rail .logo-badge {
    width: 34px; height: 34px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.side-rail .logo-badge img { width: 100%; height: 100%; object-fit: contain; }

.side-rail .nav-divider {
    width: 32px;
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

.side-rail .nav-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 0 7px;
}

.side-rail .nav-link {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    text-decoration: none;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.side-rail .nav-link:hover {
    background: #f0faf8;
    color: var(--teal-dark);
}

.side-rail .nav-link.active {
    background: #e6f7f4;
    color: var(--teal-dark);
}

.side-rail .nav-link .nav-tooltip {
    position: absolute;
    left: 52px;
    background: #1f2430;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}

.side-rail .nav-link:hover .nav-tooltip { opacity: 1; }

/* ============================================================
   MAIN CONTENT WRAPPER
   ============================================================ */
.main-wrapper { margin-left: 54px; }

/* ============================================================
   TOP BREADCRUMB BAR
   ============================================================ */
.topbar {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar .left-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9aa3b2;
    font-size: 14px;
}

.topbar .left-crumb i.bars { color: #374151; font-size: 17px; cursor: pointer; }
.topbar .left-crumb b { color: #1f2430; font-weight: 600; }

.topbar .crumb-labels {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 6px 14px;
    border-radius: 8px;
}

.topbar .right-area { display: flex; align-items: center; gap: 14px; }

.moe-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: #1f2430;
}

.moe-brand .shield {
    width: 30px; height: 30px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.moe-brand .shield img { width: 100%; height: 100%; object-fit: contain; }

.moe-greeting {
    font-size: 14px;
    font-weight: 600;
    color: #1f2430;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border-radius: 20px;
    padding: 5px 12px;
}
.user-pill i { color: var(--teal); }
.logout-btn {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.logout-btn:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.bell-btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.bell-btn .notif-dot {
    position: absolute;
    top: 6px; right: 7px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ef4444;
}

/* ============================================================
   CONTENT WRAP
   ============================================================ */
.wrap { padding: 18px 24px 30px 24px; position: relative; }

/* ============================================================
   HEADER ROW
   ============================================================ */
.header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    position: relative;
    flex-wrap: wrap;
    gap: 10px;
}

.header-left h1 { font-size: 17px; font-weight: 700; margin: 0 0 1px 0; }
.header-left .ts { color: var(--muted); font-size: 11.5px; }

.header-center { display: flex; align-items: center; gap: 8px; }

.header-right { display: flex; align-items: center; gap: 10px; }

.date-range {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12.5px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    white-space: nowrap;
}

.icon-btn-sq {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
}

/* ============================================================
   QUICK LINKS
   ============================================================ */
.quick-links {
    display: flex;
    gap: 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--teal-dark);
    align-items: center;
}

.quick-links .ql {
    cursor: pointer;
    text-decoration: none;
    color: var(--teal-dark);
}

.quick-links .ql:hover { text-decoration: underline; }
.quick-links .ql.active { text-decoration: underline; }
.quick-links .sep { color: #d1d5db; }
.quick-links i.fa-check { color: var(--teal-dark); margin-left: -6px; }

/* ============================================================
   TAB BAR
   ============================================================ */
.tabbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tabbar-spacer { flex: 1; min-width: 0; }
/* On small screens the spacer collapses so right-side tabs wrap below naturally */
@media (max-width: 640px) { .tabbar-spacer { display: none; } }

.tab-btn {
    background: var(--peach-bg);
    color: var(--peach-text);
    border: none;
    border-radius: 7px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    transition: background 0.12s;
}

.tab-btn:hover { background: #fbd5bb; color: var(--peach-text); }
.tab-btn.active { box-shadow: inset 0 0 0 1.5px #e8895c; }

/* ============================================================
   MAIN GRID (Map page)
   ============================================================ */
/* .main-grid replaced by .dash-grid defined inline in dashboard view */
@media (max-width: 992px) { .dash-grid { grid-template-columns: 1fr !important; } }

/* ============================================================
   MAP CARD
   ============================================================ */
.map-card {
    position: relative;
    min-height: 420px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #cfe3ee;
}

.map-card iframe,
#dashboardMap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1;
}

.map-controls {
    position: absolute;
    top: 14px; left: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
}

.map-controls .ctrl {
    width: 34px; height: 34px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    cursor: pointer;
    font-size: 14px;
}

.zoom-ctrl {
    position: absolute;
    top: 14px; right: 14px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    overflow: hidden;
    z-index: 5;
    display: flex;
    flex-direction: column;
}

.zoom-ctrl div {
    width: 32px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    color: #444;
}

.zoom-ctrl div:last-child { border-bottom: none; }
.zoom-ctrl div.home-btn { font-size: 13px; }

.filter-tab {
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    background: var(--peach-bg);
    color: var(--peach-text);
    padding: 14px 6px;
    border-radius: 8px 0 0 8px;
    font-size: 12px;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.side-stack { display: flex; flex-direction: column; gap: 16px; }

.stat-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-card h6 { font-size: 15.5px; font-weight: 600; margin-bottom: 8px; text-align: center; }
.stat-card .big-num { font-size: 30px; font-weight: 700; color: #1f2430; line-height: 1; text-align: center; }
.stat-card .cursor-bar { display: inline-block; width: 2px; height: 22px; background: #2f6fed; vertical-align: middle; margin-left: 4px; }
.stat-card .sub { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.55; text-align: center; }
/* ── Overview card (single card, right column) ────────────── */
.stat-overview-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.stat-overview-card h6 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--muted);
    margin: 0 0 16px;
}

.overview-stat-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.overview-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.overview-stat-row:first-of-type { padding-top: 0; }

.overview-stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.overview-stat-icon.teal   { background: rgba(13,148,136,.12); color: var(--teal-dark); }
.overview-stat-icon.blue   { background: rgba(59,130,246,.12); color: #3b82f6; }
.overview-stat-icon.purple { background: rgba(168,85,247,.12); color: #a855f7; }
.overview-stat-icon.orange { background: rgba(249,115,22,.12);  color: #f97316; }

.overview-stat-info { flex: 1; }
.overview-stat-num   { font-size: 30px; font-weight: 800; color: #111827; line-height: 1; letter-spacing: -0.5px; }
.overview-stat-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; }

/* ============================================================
   DONUT CHART
   ============================================================ */
.donut-wrap { display: flex; align-items: center; justify-content: center; margin-top: 10px; }

.donut {
    width: 128px; height: 128px;
    border-radius: 50%;
    background: conic-gradient(#e9ebef 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.donut::before {
    content: "";
    position: absolute;
    width: 94px; height: 94px;
    border-radius: 50%;
    background: #fff;
}

.donut span { position: relative; font-size: 18px; font-weight: 700; color: #1f2430; }

/* ============================================================
   FORM TABLE PAGES
   ============================================================ */
.form-page-outer { position: relative; }
.form-page { background: #fff; border-radius: 8px; border: 1px solid var(--border); overflow-x: auto; }
.form-page-outer .filter-tab { position: fixed; top: 50%; right: 0; }

table.form-table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 1300px; }
table.form-table th,
table.form-table td { border-bottom: 1px solid #f0f1f3; padding: 11px 14px; white-space: nowrap; text-align: center; }

table.form-table thead tr.group-row th {
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    background: #fff;
}

table.form-table thead tr.subhead th {
    font-weight: 600;
    color: #374151;
    font-size: 12.5px;
    background: #fff;
}

table.form-table td.type-col,
table.form-table td.school-col { white-space: normal; max-width: 220px; text-align: left; }
table.form-table td.type-col { font-weight: 600; color: #374151; vertical-align: top; padding-top: 18px; }
table.form-table td.school-col { font-weight: 500; color: #1f2430; }
table.form-table td.num { text-align: right; }

/* ============================================================
   PERFORMANCE PILLS
   ============================================================ */
.perf-pill { display: inline-block; min-width: 62px; text-align: center; padding: 5px 12px; border-radius: 14px; font-weight: 700; font-size: 12.5px; }
.perf-green  { background: #3ecf97; color: #1f2430; }
.perf-orange { background: #f5a93c; color: #1f2430; }
.perf-blue-outline { box-shadow: inset 0 0 0 2px #2f6fed; background: #fff; color: #1f2430; }
.penalty-red  { color: #dc2626; font-weight: 600; }
.penalty-zero { color: #374151; }
.dash { color: #9ca3af; }

/* ============================================================
   SECTION TITLE
   ============================================================ */
.section-title {
    font-size: 18px;
    font-weight: 700;
    margin: 26px 0 12px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.download-btn {
    width: 32px; height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    cursor: pointer;
    text-decoration: none;
}

/* ============================================================
   EMPTY / PLACEHOLDER STATE
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--muted);
}

.empty-state i { font-size: 48px; margin-bottom: 16px; opacity: 0.35; display: block; }
.empty-state h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px 0; color: #374151; }
.empty-state p { font-size: 14px; margin: 0; }

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
    .main-wrapper { margin-left: 0; }
    .side-rail { display: none; }
    .header-row { flex-direction: column; }
    .topbar { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   FORM PAGE ACTIONS (Add Entry button row)
   ============================================================ */
.form-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.form-page-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2430;
}

.entry-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--teal-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.entry-btn:hover { background: #12877a; color: #fff; }

/* ============================================================
   DRAWER (slide-in panel from right)
   ============================================================ */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.46);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.drawer-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(75vw, 900px);
    background: #fff;
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    box-shadow: -6px 0 28px rgba(0,0,0,0.13);
}

.drawer-panel.open { transform: translateX(0); }

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: #fff;
}

.drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2430;
}

.drawer-close {
    width: 32px; height: 32px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.12s;
    line-height: 1;
}

.drawer-close:hover { background: #e5e7eb; color: #374151; }

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Basic info sticky section at top of drawer body */
.drawer-basic-info {
    padding: 20px 24px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border);
}

.drawer-basic-info .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.drawer-sections { padding: 16px 24px 8px; }

.drawer-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.drawer-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: #f9fafb;
    user-select: none;
    transition: background 0.12s;
}

.drawer-section-header:hover { background: #f0faf8; }

.drawer-section-header .ds-title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2430;
}

.drawer-section-header .ds-count {
    font-size: 11px;
    color: var(--muted);
    margin-left: 8px;
    font-weight: 400;
}

.drawer-section-header i {
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.drawer-section.open .drawer-section-header i.ds-chevron { transform: rotate(180deg); }

.drawer-section-body {
    display: none;
    overflow-x: auto;
}

.drawer-section.open .drawer-section-body { display: block; }

.elements-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 700px;
}

.elements-table th {
    background: #fafafa;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.elements-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.elements-table tr:last-child td { border-bottom: none; }

.el-name {
    font-weight: 500;
    color: #1f2430;
    min-width: 180px;
    max-width: 220px;
    white-space: normal;
    line-height: 1.4;
}

.check-group {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
}

.check-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
}

.check-item input[type="checkbox"],
.check-item input[type="radio"] {
    width: 13px;
    height: 13px;
    accent-color: var(--teal-dark);
    cursor: pointer;
    flex-shrink: 0;
}

/* Numeric 0–10 grade buttons */
.num-grade-row { display: flex; gap: 4px; flex-wrap: wrap; }
.num-grade-btn { display: inline-flex; align-items: center; cursor: pointer; }
.num-grade-btn input[type="radio"] { display: none; }
.num-grade-btn span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid #d1d5db;
    font-size: 12px; font-weight: 600; color: #6b7280;
    transition: background .12s, border-color .12s, color .12s;
    user-select: none;
}
.num-grade-btn:hover span { border-color: var(--teal); color: var(--teal); }
.num-grade-btn input:checked + span { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }

.el-num { width: 70px; }
.el-points { width: 70px; }
.el-desc { min-width: 140px; }

/* Shared form controls used in drawer and modals */
.form-group { display: flex; flex-direction: column; gap: 5px; }

.form-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-control {
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 13px;
    color: #1f2430;
    background: #fff;
    outline: none;
    transition: border-color 0.12s;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.form-control:focus { border-color: var(--teal-dark); box-shadow: 0 0 0 3px rgba(22,160,138,.08); }

textarea.form-control { resize: vertical; min-height: 72px; }

.drawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}

.btn-cancel {
    padding: 9px 20px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: #374151;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

.btn-cancel:hover { background: #f3f4f6; }

.btn-submit {
    padding: 9px 22px;
    border: none;
    border-radius: 7px;
    background: var(--teal-dark);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.btn-submit:hover { background: #12877a; }

.btn-draft {
    padding: 9px 22px;
    border: 2px solid var(--teal);
    border-radius: 7px;
    background: #fff;
    color: var(--teal);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.btn-draft:hover { background: var(--teal); color: #fff; }

.form-actions-bar {
    position: sticky;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    margin-top: 20px;
}

.autosave-indicator {
    font-size: 12px;
    color: #16a34a;
    opacity: 0;
    transition: opacity 0.4s;
}

.autosave-indicator.visible { opacity: 1; }

/* ============================================================
   ENTRY PAGE — Full page audit form
   ============================================================ */
.entry-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    transition: background 0.12s, color 0.12s;
}

.back-link:hover { background: #f3f4f6; color: #374151; }

.entry-page-heading {
    font-size: 16px;
    font-weight: 700;
    color: #1f2430;
    flex: 1;
    text-align: center;
}

.top-bar-right { display: flex; align-items: center; gap: 10px; }

.total-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.total-score-badge.score-pos { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.total-score-badge.score-neg { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.total-score-badge #grandTotal {
    font-size: 17px;
    font-weight: 800;
}

/* Entry basic info card */
.entry-basic-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.entry-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.entry-card-title i { color: var(--teal-dark); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

/* Entry accordion sections */
.entry-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}

.entry-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    background: #f9fafb;
    user-select: none;
    transition: background 0.12s;
}

.entry-section-header:hover { background: #f0faf8; }

.es-left { display: flex; align-items: center; gap: 10px; }

.es-title { font-size: 13.5px; font-weight: 700; color: #1f2430; }

.es-count {
    font-size: 11.5px;
    color: var(--muted);
    background: #eff1f3;
    padding: 2px 9px;
    border-radius: 10px;
    font-weight: 500;
}

.es-right { display: flex; align-items: center; gap: 12px; }

.es-score {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    min-width: 52px;
    text-align: right;
    transition: color 0.2s;
}

.es-score.score-pos  { color: #059669; }
.es-score.score-neg  { color: #dc2626; }

.es-chevron {
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.entry-section.open .es-chevron { transform: rotate(180deg); }

.entry-section-body { display: none; overflow-x: auto; }
.entry-section.open .entry-section-body { display: block; }

/* Per-element score badge (replaces the old points input) */
.el-score-cell { text-align: center; white-space: nowrap; }

.el-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    transition: background 0.15s, color 0.15s;
}

.el-score.score-none      { background: #f3f4f6; color: #9ca3af; }
.el-score.score-good-pass { background: #d1fae5; color: #065f46; }
.el-score.score-pass      { background: #dcfce7; color: #15803d; }
.el-score.score-fail      { background: #fef3c7; color: #92400e; }
.el-score.score-bad-fail  { background: #fee2e2; color: #991b1b; }

/* ============================================================
   GENERAL PAGE — Audit Listing Table
   ============================================================ */
.listing-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow-x: auto;
}

table.listing-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

table.listing-table th {
    background: #f9fafb;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table.listing-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: middle;
}

table.listing-table tbody tr:last-child td { border-bottom: none; }
table.listing-table tbody tr:hover td { background: #fafafa; }

.status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
}

.status-submitted { background: #d1fae5; color: #065f46; }
.status-draft     { background: #fef3c7; color: #92400e; }
.status-pending   { background: #e0e7ff; color: #3730a3; }

.listing-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}

.listing-empty i { font-size: 40px; opacity: 0.3; display: block; margin-bottom: 12px; }
.listing-empty p { font-size: 13.5px; margin: 0; }

/* Horizontal scroll wrapper inside listing-card */
.listing-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Score pills used in listing table cells */
.score-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    min-width: 36px;
    text-align: center;
}
.score-pill-pos  { background: #d1fae5; color: #065f46; }
.score-pill-neg  { background: #fee2e2; color: #991b1b; }
.score-pill-zero { background: #f3f4f6; color: #6b7280; }

/* Percentage column in listing tables */
.pct-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 80px;
}
.pct-label {
    font-size: 12.5px;
    font-weight: 700;
}
.pct-high   { color: #065f46; }
.pct-good   { color: #0369a1; }
.pct-mid    { color: #92400e; }
.pct-low    { color: #991b1b; }
.pct-bar {
    height: 5px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}
.pct-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease;
}
.pct-fill-high { background: #10b981; }
.pct-fill-good { background: #3b82f6; }
.pct-fill-mid  { background: #f59e0b; }
.pct-fill-low  { background: #ef4444; }

/* Audit result status pills */
.status-good-pass { background: #d1fae5; color: #065f46; }
.status-pass      { background: #e0f2fe; color: #0369a1; }
.status-fail      { background: #fef3c7; color: #92400e; }
.status-bad-fail  { background: #fee2e2; color: #991b1b; }

/* Remove overflow-x from card itself since wrapper handles it */
.listing-card { overflow-x: visible; }

/* ============================================================
   SCHOOL PAGE
   ============================================================ */
.school-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.school-page-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1f2430;
    margin: 0;
}

.school-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 16px;
}

.school-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow 0.15s, border-color 0.15s;
    cursor: pointer;
}

.school-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.08); border-color: #d0d5dd; }

.school-card-top { display: flex; align-items: flex-start; gap: 14px; }

.school-card-logo {
    width: 50px; height: 50px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.school-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.school-card-logo i { font-size: 22px; color: #d1d5db; }

.school-card-info { flex: 1; min-width: 0; }

.school-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2430;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.school-card-desc {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.school-card-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.school-card-footer > span { flex: 1; min-width: 0; }
.school-card-footer i { color: var(--teal-dark); font-size: 13px; }
.school-card-disabled { opacity: .65; }

/* Status badge */
.school-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 6px;
}
.school-status-badge.enabled  { background: #dcfce7; color: #15803d; }
.school-status-badge.disabled { background: #fee2e2; color: #b91c1c; }

/* Card actions row — pinned at bottom */
.school-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}
.school-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 0;
    width: 80px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
}
.school-action-btn.view-btn    { border-color: #6b7280; color: #6b7280; background: transparent; }
.school-action-btn.view-btn:hover    { background: #6b7280; color: #fff; }
.school-action-btn.edit-btn    { border-color: var(--teal-dark); color: var(--teal-dark); background: transparent; }
.school-action-btn.edit-btn:hover    { background: var(--teal-dark); color: #fff; }
.school-action-btn.disable-btn { border-color: #dc2626; color: #dc2626; background: transparent; }
.school-action-btn.disable-btn:hover { background: #dc2626; color: #fff; }
.school-action-btn.enable-btn  { border-color: #15803d; color: #15803d; background: transparent; }
.school-action-btn.enable-btn:hover  { background: #15803d; color: #fff; }

/* School show page */
.school-show-grid { display: flex; flex-direction: column; gap: 24px; padding: 20px 28px; }
.school-show-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
}
.school-show-logo {
    width: 72px; height: 72px; border-radius: 12px;
    background: #f3f4f6; display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--teal-dark); overflow: hidden; margin-bottom: 16px;
}
.school-show-logo img { width: 100%; height: 100%; object-fit: cover; }
.school-show-name { font-size: 20px; font-weight: 700; color: #1f2430; margin: 0 0 6px; }
.school-show-desc { font-size: 14px; color: #6b7280; margin: 0 0 8px; }
.school-show-coord { font-size: 13px; color: #374151; margin: 0; }
.school-show-meta-row {
    display: flex; gap: 24px; margin-top: 20px;
    padding-top: 16px; border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.school-show-stat { display: flex; flex-direction: column; gap: 2px; }
.school-show-stat-num { font-size: 22px; font-weight: 700; color: var(--teal-dark); }
.school-show-stat-lbl { font-size: 12px; color: #9ca3af; }
.school-audit-group {
    background: #fff; border: 1px solid var(--border);
    border-radius: 14px; padding: 20px 24px;
}
.school-audit-group-title {
    font-size: 14px; font-weight: 700; color: #1f2430;
    margin-bottom: 4px;
}

/* School modal */
.school-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 24px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.school-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.modal-box {
    background: #fff;
    border-radius: 12px;
    width: min(92vw, 680px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    transform: scale(0.95);
    transition: transform 0.22s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}

.school-modal-overlay.open .modal-box { transform: scale(1); }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2430;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.logo-upload-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-preview {
    width: 72px; height: 72px;
    border-radius: 10px;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 0.15s;
}

.logo-preview:hover { border-color: var(--teal-dark); }
.logo-preview img { width: 100%; height: 100%; object-fit: cover; display: none; }
.logo-preview i { font-size: 26px; color: #d1d5db; }

.logo-upload-info { display: flex; flex-direction: column; gap: 6px; }

.logo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

.logo-upload-btn:hover { background: #f3f4f6; }
.logo-upload-hint { font-size: 11.5px; color: var(--muted); }

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.map-picker-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.map-picker-label span { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.map-picker-wrap {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
}

#schoolMap {
    height: 220px;
    width: 100%;
    z-index: 1;
}

.map-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(31,36,48,0.82);
    color: #fff;
    font-size: 11.5px;
    padding: 5px 12px;
    border-radius: 20px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

/* ============================================================
   SUCCESS / ERROR BANNERS
   ============================================================ */
.alert-success-banner {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13.5px;
    color: #065f46;
    margin-bottom: 16px;
    font-weight: 500;
}
.alert-err-banner {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #991b1b;
    margin-bottom: 16px;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 300px;
    max-width: 420px;
    padding: 14px 16px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    font-size: 13.5px;
    font-weight: 500;
    pointer-events: all;
    transform: translateX(130%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), opacity 0.3s;
}

.toast-item.toast-in {
    transform: translateX(0);
    opacity: 1;
}

.toast-item.toast-out {
    transform: translateX(130%);
    opacity: 0;
}

.toast-success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.toast-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.toast-warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.toast-info    { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }

.toast-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.toast-body { flex: 1; line-height: 1.45; }
.toast-close {
    background: none; border: none; cursor: pointer;
    opacity: 0.5; font-size: 14px; padding: 0; margin-left: 4px;
    color: inherit; flex-shrink: 0; line-height: 1;
}
.toast-close:hover { opacity: 1; }

/* ============================================================
   CONFIRM MODAL
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
}

.modal-overlay.modal-open {
    opacity: 1;
    pointer-events: all;
}

.modal-dialog {
    background: #fff;
    border-radius: 14px;
    padding: 28px 28px 22px;
    max-width: 420px;
    width: calc(100% - 40px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    transform: scale(0.92);
    transition: transform 0.2s cubic-bezier(.22,1,.36,1);
}

.modal-overlay.modal-open .modal-dialog {
    transform: scale(1);
}

.modal-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.modal-icon-warning { background: #fff7ed; color: #ea580c; }

.modal-title {
    font-size: 16px; font-weight: 700;
    color: #111827; margin-bottom: 6px;
}

.modal-message {
    font-size: 13.5px; color: #4b5563;
    line-height: 1.55; margin-bottom: 22px;
}

.modal-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}

.modal-btn-cancel {
    padding: 8px 18px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    color: #374151;
    font-size: 13.5px; font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

.modal-btn-cancel:hover { background: #f3f4f6; }

.modal-btn-confirm {
    padding: 8px 18px;
    border: none;
    border-radius: 7px;
    background: var(--teal-dark);
    color: #fff;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.modal-btn-confirm:hover { background: #12877a; }
.modal-btn-confirm.danger { background: #dc2626; }
.modal-btn-confirm.danger:hover { background: #b91c1c; }

/* ============================================================
   AUDIT FILTER BAR
   ============================================================ */
.audit-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.filter-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-date-input {
    border: none;
    background: transparent;
    font-size: 13px;
    color: #374151;
    outline: none;
    padding: 0;
    width: 130px;
}

.filter-date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }

.filter-count {
    font-size: 12.5px;
    color: var(--muted);
    margin-left: 4px;
}

.filter-active-badge {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination-wrap {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.pagination-wrap .pagination {
    margin: 0;
    gap: 4px;
}

.pagination-wrap .page-link {
    border-radius: 8px !important;
    border: 1px solid var(--border);
    color: #374151;
    font-size: 13px;
    padding: 5px 12px;
    line-height: 1.4;
}

.pagination-wrap .page-item.active .page-link {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.pagination-wrap .page-link:hover {
    background: #f0faf8;
    border-color: var(--teal);
    color: var(--teal-dark);
}

.pagination-wrap .page-item.disabled .page-link {
    color: #d1d5db;
    border-color: var(--border);
}

/* ============================================================
   FORM VALIDATION STATES
   ============================================================ */
.field-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important;
    background: #fff5f5 !important;
}

.row-error {
    background: #fff5f5 !important;
}
.row-error > td:first-child {
    border-left: 3px solid #ef4444;
}

/* ============================================================
   AUDIT SHOW / RESULT PAGE
   ============================================================ */

/* View button in listing table */
.btn-view-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0faf8;
    color: var(--teal-dark);
    border: 1px solid #c6ede8;
    border-radius: 7px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.btn-view-row:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

.btn-edit-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
    border-radius: 7px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 6px;
    transition: background .15s, border-color .15s;
}
.btn-edit-row:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }

.btn-edit-audit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.btn-edit-audit:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* Print button */
.btn-print {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
}
.btn-print:hover { background: #f3f4f6; }

/* Summary grid: 3 columns on wide screens */
.show-summary-grid {
    display: grid;
    grid-template-columns: 1fr 220px 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .show-summary-grid { grid-template-columns: 1fr; }
}

.show-info-card,
.show-score-card,
.show-breakdown-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}

.show-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.show-card-title i { color: var(--teal-dark); }

/* Info table */
.show-info-table { width: 100%; border-collapse: collapse; }
.show-info-table th,
.show-info-table td { padding: 6px 4px; font-size: 13px; vertical-align: top; }
.show-info-table th { color: var(--muted); font-weight: 500; width: 38%; padding-right: 12px; white-space: nowrap; }
.show-info-table td { color: #1f2430; font-weight: 500; }
.show-info-table tr + tr th,
.show-info-table tr + tr td { border-top: 1px solid #f3f4f6; }

/* Donut */
.show-donut-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
}
.show-donut-svg { width: 100%; height: 100%; }
.show-donut-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.show-pct-num { font-size: 24px; font-weight: 800; line-height: 1; }
.show-pct-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

.show-draft-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #f9fafb;
    border: 3px dashed #d1d5db;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.show-draft-indicator i { font-size: 26px; color: #d1d5db; }

.show-score-meta { border-top: 1px solid var(--border); padding-top: 14px; }
.show-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 4px 0;
    color: #374151;
}
.show-score-row span:first-child { color: var(--muted); }

/* Section breakdown bars */
.show-breakdown-list { display: flex; flex-direction: column; gap: 10px; }
.show-breakdown-row { display: flex; align-items: center; gap: 10px; }
.show-breakdown-label {
    font-size: 12px;
    color: #374151;
    width: 160px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.show-breakdown-bar-wrap { flex: 1; }
.show-breakdown-nums {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    width: 56px;
    flex-shrink: 0;
}

/* Section detail cards */
.show-sections { display: flex; flex-direction: column; gap: 14px; }

.show-section-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.show-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: #fafafa;
}

.show-section-left { display: flex; align-items: center; gap: 10px; }
.show-section-right { display: flex; align-items: center; gap: 8px; }

.show-section-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.show-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2430;
}

.show-elements-table { font-size: 13px; }
.show-elements-table th { font-size: 12px; }

/* ============================================================
   USER DROPDOWN
   ============================================================ */
.user-dropdown-wrap {
    position: relative;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px 5px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.user-pill:hover { background: #e9ecef; }

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 9999;
    overflow: hidden;
}

.user-dropdown-header {
    padding: 14px 16px 10px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff;
}
.user-dropdown-name  { font-size: 14px; font-weight: 700; }
.user-dropdown-email { font-size: 11.5px; opacity: .85; margin-top: 2px; }
.user-dropdown-role  {
    display: inline-block;
    margin-top: 6px;
    background: rgba(255,255,255,.2);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
}

.user-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}
.user-dropdown-item:hover { background: #f3f4f6; }
.user-dropdown-item i { width: 16px; text-align: center; color: var(--teal); }

.user-dropdown-logout { color: #dc2626; }
.user-dropdown-logout i { color: #dc2626; }
.user-dropdown-logout:hover { background: #fef2f2; }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
}

.profile-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border);
}
.profile-card-header > i {
    font-size: 22px;
    color: var(--teal);
    width: 36px;
    text-align: center;
}
.profile-card-header h2 { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.profile-card-header p  { font-size: 12.5px; color: var(--muted); margin: 0; }

.profile-form { padding: 22px; display: flex; flex-direction: column; gap: 16px; }

.pf-row { display: flex; flex-direction: column; gap: 5px; }
.pf-label { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.pf-optional { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.req { color: #ef4444; }

.pf-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--text-dark);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    appearance: auto;
}
.pf-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.pf-input.field-error { border-color: #ef4444; background: #fff5f5; }

.pf-err { font-size: 12px; color: #ef4444; }

.pf-actions { padding-top: 4px; }
.pf-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.pf-save-btn:hover { background: var(--teal-dark); }

/* ============================================================
   USER MANAGEMENT
   ============================================================ */
.user-avatar-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-you-badge {
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}

.user-role-pill {
    display: inline-block;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
}
.role-admin    { background: #fef3c7; color: #92400e; }
.role-inspector { background: #d1fae5; color: #065f46; }

.btn-delete-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff5f5;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 7px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 6px;
    transition: background .15s;
}
.btn-delete-row:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ===== WIZARD STYLES ===== */
.wizard-bar {
    background: #fff;
    border-bottom: 1px solid #e8edf5;
    padding: 14px 28px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.wizard-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 4px;
}
.wizard-static-header {
    border-bottom: 2px solid var(--teal);
    margin-bottom: 0;
    border-radius: 12px 12px 0 0;
}
.wdot {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: #9ca3af;
    border: 2px solid #d1d5db;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s, transform .2s, opacity .2s;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}
.wdot.active {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(63,193,168,.25);
}
.wdot.done {
    background: var(--teal);
    color: #fff;
    border-color: transparent;
}
.wdot.disabled {
    background: #fff;
    color: #d1d5db;
    border-color: #e5e7eb;
    cursor: not-allowed;
}
.wdot[data-tooltip]:not(.disabled):hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2430;
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    max-width: clamp(200px, 30vw, 360px);
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.wdot[data-tooltip]:not(.disabled):hover::before {
    content: '';
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #1f2430;
    pointer-events: none;
    z-index: 200;
}
.wizard-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
}
.wizard-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid #e8edf5;
    background: #f9fafb;
    position: sticky;
    bottom: 0;
    z-index: 10;
}
.wiz-prev { margin-right: auto; }
.wiz-busy { opacity: .7; cursor: not-allowed; }
.draft-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #fcd34d;
    margin-left: 6px;
    vertical-align: middle;
}

/* Print styles */
@media print {
    .side-rail,
    .topbar,
    .header-row,
    .tabbar,
    .entry-top-bar .btn-print,
    .back-link { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    .wrap { padding: 0 !important; }
    .show-section-card { break-inside: avoid; }
}

/* ── Audit Grouped Listing — legacy classes removed, now using .agl-* in component ── */

.btn-detail-compare {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--teal-dark);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s;
}
.btn-detail-compare:hover { background: var(--teal); }

/* ============================================================
   ES FORM PAGES (Form A, E, Aa)
   ============================================================ */

.es-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 32px;
}

.es-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 20px 22px;
}

.es-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--teal-dark);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.es-card-title small {
    font-weight: 400;
    color: var(--muted);
    font-size: 12px;
}

.es-table-wrap { overflow-x: auto; }

.es-chk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.es-chk-table th {
    background: #f4f5f7;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 10px;
    border-bottom: 1.5px solid var(--border);
    text-align: left;
}
.es-chk-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.es-chk-table tr:last-child td { border-bottom: none; }

.es-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
}
.es-radio-label input[type="radio"] {
    accent-color: var(--teal-dark);
    cursor: pointer;
}

.es-risk-table th:nth-child(3) { min-width: 200px; }
.es-risk-table th:nth-child(4) { min-width: 160px; }

.es-remark-input {
    width: 100%;
    min-width: 140px;
    padding: 5px 8px;
    font-size: 12px;
}

/* Yes/No question list */
.es-yn-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.es-yn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 7px;
    border: 1px solid var(--border);
}
.es-yn-question {
    flex: 1;
    font-size: 13px;
    color: var(--text);
}
.es-yn-options {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.es-yn-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.15s;
}
.es-yn-yes {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
}
.es-yn-yes:has(input:checked),
.es-yn-yes input:checked ~ * { font-weight: 700; }
.es-yn-yes { position: relative; }
.es-yn-yes input[type="radio"]:checked { accent-color: #047857; }

.es-yn-no {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}
.es-yn-label input[type="radio"] { cursor: pointer; accent-color: var(--teal-dark); }

/* ES Actions row */
.es-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    padding: 14px 22px;
}

/* Report / Show views */
.es-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.es-info-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.es-info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 600;
}

.es-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.es-report-table th {
    background: #f4f5f7;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 10px;
    border-bottom: 1.5px solid var(--border);
    text-align: left;
}
.es-report-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.es-report-table tr:last-child td { border-bottom: none; }

.es-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: #f1f5f9;
    color: var(--text);
}
.es-badge-yes  { background: #dcfce7; color: #15803d; }
.es-badge-no   { background: #fee2e2; color: #b91c1c; }
.es-badge-warn { background: #fef9c3; color: #a16207; }

/* Listing table reuse */
.list-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.audit-table thead tr {
    background: #f4f5f7;
}
.audit-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1.5px solid var(--border);
}
.audit-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.audit-table tbody tr:last-child td { border-bottom: none; }
.audit-table tbody tr:hover { background: #f8fafc; }

.tbl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    margin-left: 4px;
    text-decoration: none;
    transition: opacity 0.15s;
}
.tbl-btn:hover { opacity: 0.8; }
.tbl-btn-report { background: #d1fae5; color: #065f46; }
.tbl-btn-view   { background: #e0f2fe; color: #0369a1; }
.tbl-btn-edit   { background: #fef9c3; color: #a16207; }
.tbl-btn-del    { background: #fee2e2; color: #b91c1c; }

/* ── Report pages ─────────────────────────────────────────────── */
.rpt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 10px;
    flex-wrap: wrap;
}
.rpt-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 32px 28px;
    border: 1px solid var(--border);
    max-width: 1100px;
    margin: 0 auto;
}
.rpt-header {
    text-align: center;
    margin-bottom: 24px;
}
.rpt-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a2940;
    margin: 0 0 4px;
}
.rpt-subtitle {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px;
}
.rpt-school {
    margin: 3px 0;
    font-size: 14px;
    color: #374151;
}
.rpt-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 13px;
}
.rpt-table th,
.rpt-table td {
    border: 1px solid #000;
    padding: 5px 7px;
    vertical-align: middle;
}
.rpt-section-hdr {
    background: #1a2940;
    color: #fff;
    font-weight: 700;
    padding: 7px 10px;
    font-size: 13px;
}
.rpt-section-hdr-inline {
    background: #d9d9d9;
    font-weight: 700;
    color: #1a2940;
    font-size: 13px;
}
.rpt-col-hdr th { background: #e5e7eb; font-weight: 700; }
.rpt-col-sub th { background: #f3f4f6; font-size: 12px; }
.rpt-chk {
    width: 22px;
    text-align: center;
    font-size: 16px;
    color: #065f46;
}
.rpt-remark {
    background: #f9fafb;
    font-style: italic;
    color: #6b7280;
    padding: 6px 10px;
}
.rpt-bg-grey { background: #b4c6e7; }
.rpt-cnco {
    width: 36px;
    text-align: center;
    font-weight: 700;
}
.rpt-table-risk .rpt-bg-grey { width: 36px; }
.rpt-comments-block {
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.7;
}
.rpt-comments-block p { margin: 4px 0; }
.rpt-table-details th { background: #f3f4f6; font-size: 13px; width: 22%; }
.rpt-table-details td { font-size: 13px; }
.rpt-table-yn thead th { background: #1a2940; color: #fff; }
.rpt-yn-col { width: 60px; text-align: center; }
.rpt-yn-cell { text-align: center; font-size: 18px; }
.rpt-yn-yes { color: #065f46; font-weight: 700; }
.rpt-yn-no  { color: #b91c1c; font-weight: 700; }
.rpt-footer { margin-top: 36px; }
.rpt-sig-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
.rpt-sig-col { min-width: 0; }
.rpt-sig-dated { margin: 0 0 4px; font-size: 14px; }
.rpt-sig-label-sm { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.rpt-sig-name { font-weight: 600; font-size: 14px; margin: 2px 0 12px; }
.rpt-sig-img {
    max-width: 260px;
    max-height: 90px;
    display: block;
    object-fit: contain;
}
.rpt-sig-empty {
    height: 70px;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 12px;
    margin-bottom: 8px;
}
.rpt-sig-line { border: none; border-top: 1.5px solid #374151; margin: 10px 0 6px; }
.rpt-sig-caption { font-size: 12px; color: #374151; line-height: 1.5; margin: 0; }
@media print {
    .rpt-toolbar { display: none !important; }
    .sidebar, .topbar, nav { display: none !important; }
    .rpt-wrap { border: none; padding: 10px; max-width: 100%; }
    body { background: #fff !important; }
}
@media (max-width: 640px) {
    .rpt-sig-row { grid-template-columns: 1fr; gap: 24px; }
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}
.empty-state i { font-size: 40px; margin-bottom: 12px; display: block; }

.pagination-wrap { padding: 12px 16px; }

.alert-error-bar {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   SIGNATURE SECTION
   ============================================================ */
.es-sig-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.es-sig-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.es-sig-canvas-wrap {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 8px;
    background: #fafafa;
    height: 150px;
    cursor: crosshair;
    overflow: hidden;
    transition: border-color 0.2s;
}
.es-sig-canvas-wrap:hover { border-color: var(--teal); }
.es-sig-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}
.es-sig-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #9ca3af;
    pointer-events: none;
    user-select: none;
}
.es-sig-actions {
    display: flex;
    justify-content: flex-end;
}
.es-sig-clear {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 12px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.es-sig-clear:hover { background: #f3f4f6; color: #374151; }
.es-sig-label {
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    margin: 4px 0 0;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    line-height: 1.5;
}
.es-sig-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}
.es-sig-display {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fafafa;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.es-sig-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.es-sig-empty {
    font-size: 12px;
    color: #9ca3af;
}
@media (max-width: 640px) {
    .es-sig-wrap { grid-template-columns: 1fr; gap: 24px; }
}