/* s47 — Branch switcher (top bar) + Branches list actions */

/* ── Top-bar branch switcher ─────────────────────────────── */
.branch-switcher {
    position: relative; display: inline-flex; align-items: center;
    margin: 0 4px 0 0; height: 40px;
}
.branch-switcher select {
    -webkit-appearance: none; appearance: none;
    height: 40px; min-width: 150px; max-width: 200px;
    padding: 0 34px 0 42px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 999px;
    font: inherit; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; box-shadow: var(--shadow-contact);
    text-overflow: ellipsis; white-space: nowrap;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.branch-switcher:hover select { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.branch-switcher select:focus-visible {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.branch-switcher-icon {
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 14%, var(--surface-alt, var(--surface)));
    color: var(--primary); pointer-events: none;
}
.branch-switcher-icon svg { width: 15px; height: 15px; stroke: currentColor; }
.branch-switcher-chevron {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); display: inline-flex; pointer-events: none;
}
.branch-switcher-chevron svg { width: 14px; height: 14px; stroke: currentColor; }
/* Tooltip would collide with the dropdown; show it underneath instead. */
.branch-switcher.tip::after { bottom: auto; top: calc(100% + 8px); }
.branch-switcher.tip::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom-color: var(--text); }

/* ── Branches list: icon-only action buttons + tooltips ───── */
.branches-table td.actions { overflow: visible !important; }
.branches-table td.actions .branch-toggle-form { display: inline-flex; margin: 0; }
.branches-table td.actions .btn { position: relative; }
.branches-table td.actions .btn svg { stroke: currentColor; }

/* ── Unified pager: ដំបូង មុន 1 2 3 4 5 បន្ទាប់ ចុងក្រោយ ──────── */
.pagination { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.pagination a.pagination-text,
.pagination button.pagination-text {
    min-width: 0; padding: 0 14px; white-space: nowrap; font-weight: 600;
}
.pagination a, .pagination button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px;
}
.pagination a.pagination-disabled { opacity: .4; pointer-events: none; }
.pagination .client-page-buttons { display: inline-flex; gap: 6px; }

/* ── Entry forms: fill the WIDTH, never stretch to the bottom ───────
   - the card spans the full content width but keeps its natural height
     (a 4-field form is a short, wide card — no empty space below);
   - fields flow into a responsive grid, max 4 columns, so few fields sit
     side by side across the screen instead of in one narrow column;
   - titles / notes / switch rows / button row always take a full row. */
:root { --s47-form-gap: 18px; }
.card-grid > .card:has(> form) { grid-column: 1 / -1; align-self: start; }
.main-content .card:has(> form:not(.filter-form):not(.no-form-grid)):not(.qr-print-sheet):not(.payslip-sheet):not(.digital-card-panel):not(.verify-public-card):not(.perf-vote-card):not(.post-composer) {
    max-width: none !important; width: 100%; height: auto; min-height: 0;
    align-self: start;
}
.main-content .card > form:not(.filter-form):not(.no-form-grid):not(:has(table)):not(:has(.table-wrap)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(260px, calc((100% - 3 * var(--s47-form-gap)) / 4)), 1fr));
    column-gap: var(--s47-form-gap);
    row-gap: 4px;
    align-items: start;
}
/* row wrappers dissolve so their fields flow into the shared grid */
.main-content .card > form:not(.filter-form):not(.no-form-grid) > :is(.form-row, .form-row-2, .form-grid) { display: contents; }
.main-content .card > form:not(.filter-form):not(.no-form-grid) .form-group { margin-bottom: 10px; min-width: 0; }
/* anything that is not a field takes a full row */
.main-content .card > form:not(.filter-form):not(.no-form-grid) > :not(.form-group):not(.form-row):not(.form-row-2):not(.form-grid):not(input[type="hidden"]) {
    grid-column: 1 / -1;
}
.main-content .card > form .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.main-content .card > form .form-group select,
.main-content .card > form .form-group textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.main-content .card > form .form-group input[style*="width"] { width: 100% !important; }
@media (min-width: 1000px) {
    .main-content .card > form .form-group:has(textarea) { grid-column: span 2; }
}
.main-content .card > form .form-group-full,
.main-content .card > form .form-group:has(input[type="file"]) { grid-column: 1 / -1; }
/* Save / Cancel row (wrapped by s47-pager.js) */
.s47-form-actions {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border);
}
.s47-form-actions .btn { margin: 0 !important; }
@media (min-width: 1200px) {
    .main-content .card:has(> form:not(.filter-form):not(.no-form-grid)) { padding: 28px 32px; }
}

/* Set-as-default star: amber on hover so it reads as "promote" */
.branches-table .btn-set-default:hover { color: #d97706; border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); }

/* Branch code chip next to the branch name */
.branch-code {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px;
    font: 600 0.72rem/1.6 ui-monospace, Consolas, monospace; letter-spacing: .04em;
    color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border);
}


/* ══ Department overview + branch scope chips (dbo-*) ═══════════════
   Tokens only (var(--…)) so every colour theme + dark mode just work. */
.dbo-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:var(--space-1);
    font-size:.85rem; font-weight:600; color:var(--text-muted); text-decoration:none; }
.dbo-back:hover { color:var(--primary); }

.dbo-hero { display:flex; gap:var(--space-2); align-items:center; margin-bottom:var(--space-2); }
.dbo-hero-icon { flex:0 0 auto; width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--primary) 12%, var(--surface)); color:var(--primary);
    box-shadow:var(--shadow-ambient), var(--shadow-contact); }
.dbo-hero-icon svg { width:28px; height:28px; stroke:currentColor; }
.dbo-hero-text h1 { margin:0 0 4px; font-size:1.5rem; line-height:1.25; }
.dbo-hero-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.dbo-hero-sub { margin:6px 0 0; font-size:.875rem; }

/* scope chips */
.dbo-scope { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 var(--space-2); }
.dbo-chip { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:999px;
    background:var(--surface); color:var(--text); border:1px solid var(--border); font-size:.85rem; font-weight:600;
    text-decoration:none; box-shadow:var(--shadow-contact); transition:border-color .15s, background .15s, color .15s, transform .15s; }
.dbo-chip svg { width:15px; height:15px; stroke:currentColor; color:var(--text-muted); }
a.dbo-chip:hover { border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); transform:translateY(-1px); }
a.dbo-chip:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.dbo-chip.is-active { background:color-mix(in srgb, var(--primary) 12%, var(--surface)); color:var(--primary);
    border-color:color-mix(in srgb, var(--primary) 50%, var(--border)); }
.dbo-chip.is-active svg { color:var(--primary); }
.dbo-chip.is-inactive { opacity:.6; }
.dbo-chip.is-static { cursor:default; }
.dbo-scope-note { font-size:.8rem; color:var(--text-muted); }
@media (max-width:640px) {
    .dbo-scope:not(.dbo-scope-locked) { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
    .dbo-chip { flex:0 0 auto; }
}

/* stats */
.dbo-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:var(--space-3); }
.dbo-stat { display:flex; align-items:center; gap:12px; padding:var(--space-2); background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-ambient), var(--shadow-contact); }
.dbo-stat-icon { flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); }
.dbo-stat-icon svg { width:20px; height:20px; stroke:currentColor; }
.dbo-stat-icon.dbo-tone-ok { background:color-mix(in srgb, var(--success) 12%, transparent); color:var(--success); }
.dbo-stat-icon.dbo-tone-info { background:color-mix(in srgb, var(--info) 12%, transparent); color:var(--info); }
.dbo-stat-value { font-size:1.65rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.dbo-stat-label { font-size:.8rem; color:var(--text-muted); margin-top:2px; }
@media (max-width:640px) {
    .dbo-stats { grid-template-columns:1fr; gap:8px; }
    .dbo-stat { padding:12px var(--space-2); }
}

/* sections */
.dbo-section { margin-bottom:var(--space-3); }
.dbo-section-title { display:flex; align-items:center; gap:8px; margin:0 0 var(--space-1); font-size:1.05rem; }
.dbo-section-title svg { width:18px; height:18px; stroke:currentColor; color:var(--text-muted); }
.dbo-sub { font-size:.78rem; }
.dbo-col-count { width:34%; min-width:190px; }

/* meter bar */
.dbo-bar { display:block; height:8px; border-radius:999px; background:var(--surface-alt); overflow:hidden; }
.dbo-bar > span { display:block; height:100%; border-radius:999px; background:var(--primary); transition:width .3s ease; }
.dbo-meter { display:flex; align-items:center; gap:10px; }
.dbo-meter .dbo-bar { flex:1 1 auto; min-width:60px; }
.dbo-num { min-width:1.6em; text-align:right; font-variant-numeric:tabular-nums; }
.dbo-pct { min-width:3em; font-size:.78rem; font-variant-numeric:tabular-nums; }
.dbo-zero { font-size:.8rem; color:var(--text-muted); font-style:italic; }

/* branch cards */
.dbo-branch-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px; }
.dbo-branch-card { display:flex; flex-direction:column; gap:12px; padding:var(--space-2); color:var(--text); text-decoration:none;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-ambient), var(--shadow-contact); transition:transform .15s, border-color .15s; }
a.dbo-branch-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); }
a.dbo-branch-card:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.dbo-branch-card.is-active { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.dbo-branch-card.is-empty { opacity:.75; }
.dbo-branch-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dbo-branch-figures { display:flex; gap:var(--space-3); }
.dbo-big { display:block; font-size:1.5rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.dbo-cap { display:block; font-size:.75rem; color:var(--text-muted); margin-top:2px; }

/* empty state */
.dbo-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:var(--space-4) var(--space-2); color:var(--text-muted); text-align:center; }
.dbo-empty svg { width:30px; height:30px; stroke:currentColor; opacity:.6; }
.dbo-empty p { margin:0; }
.dbo-branch-grid > .dbo-empty { grid-column:1 / -1; }

/* departments list: count pills + link */
.dbo-pill { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:999px;
    background:var(--surface-alt); color:var(--text); font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; }
.dbo-pill svg { width:14px; height:14px; stroke:currentColor; color:var(--text-muted); }
.dbo-pill-strong { background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); }
.dbo-pill-strong svg { color:var(--primary); }
.dbo-pill.is-zero { background:transparent; border:1px dashed var(--border); color:var(--text-muted); font-weight:500; }
.dbo-link { color:inherit; text-decoration:none; }
.dbo-link:hover strong { color:var(--primary); text-decoration:underline; text-underline-offset:3px; }

/* dropdown version of the scope picker (reuses .branch-switcher look) */
.dbo-switcher { margin:0; }
.dbo-switcher select { min-width:220px; max-width:320px; }
a.dbo-pill-link { text-decoration:none; transition:background .15s, transform .15s; }
a.dbo-pill-link svg:last-child { width:12px; height:12px; transform:rotate(-90deg); opacity:.7; }
a.dbo-pill-link:hover { background:color-mix(in srgb, var(--primary) 22%, transparent); transform:translateY(-1px); }
a.dbo-pill-link:focus-visible, a.dbo-stat-link:focus-visible, .dbo-numlink:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
a.dbo-stat-link { color:inherit; text-decoration:none; transition:transform .15s, border-color .15s; }
a.dbo-stat-link:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); }
.dbo-numlink { color:var(--primary); text-decoration:none; border-radius:6px; }
.dbo-numlink:hover strong { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:640px) { .dbo-switcher, .dbo-switcher select { width:100%; max-width:none; } }

/* toolbar: [branch picker] [Show N] grouped on the left */
.table-toolbar-left { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.table-toolbar-left .dbo-scope { margin:0; }
.table-toolbar-left .dbo-switcher select { min-width:190px; height:38px; }
.table-toolbar-left .dbo-switcher { height:38px; }
.emp-code-branch { display:flex; align-items:center; gap:4px; margin-top:4px; font-size:.75rem; line-height:1.2; }
.emp-code-branch svg { width:12px; height:12px; flex:0 0 auto; stroke:currentColor; }
@media (max-width:640px) { .table-toolbar-left { width:100%; } .table-toolbar-left .dbo-switcher { flex:1 1 100%; } }