/* UI refresh layer — loaded after brand-system.css.
   Topbar control cluster, table + row-action overhaul, loading states, and
   dark-mode coverage for every surface introduced by the new interface. */

/* ============================================================
   Topbar control cluster
   ============================================================ */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-title { font-size: 15.3px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-icon-btn {
    position: relative; display: inline-grid; place-items: center;
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface); color: var(--text-secondary);
    font-size: 15.3px; text-decoration: none; cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background .18s ease, border-color .18s ease, color .18s ease,
        transform .18s ease, box-shadow .18s ease;
}
.topbar-icon-btn:hover { background: var(--bg-soft); border-color: var(--blue-400); color: var(--brand-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.topbar-icon-btn:active { transform: translateY(0) scale(.94); }

#themeIcon { display: inline-block; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
[data-theme="dark"] #themeIcon { transform: rotate(180deg); }

.topbar-bell.topbar-icon-btn:hover i { animation: bell-ring .5s ease; }
@keyframes bell-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(11deg); }
    60% { transform: rotate(-7deg); }
    80% { transform: rotate(4deg); }
}
.topbar-bell-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 0 var(--danger); animation: bell-dot-pulse 2s ease-out infinite;
}
@keyframes bell-dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(217, 75, 86, .55); }
    70% { box-shadow: 0 0 0 7px rgba(217, 75, 86, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 75, 86, 0); }
}
[data-theme="dark"] .topbar-bell-dot::after { animation-name: bell-dot-pulse-dark; }
@keyframes bell-dot-pulse-dark {
    0% { box-shadow: 0 0 0 0 rgba(240, 128, 138, .55); }
    70% { box-shadow: 0 0 0 7px rgba(240, 128, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(240, 128, 138, 0); }
}

.topbar-sep { width: 1px; height: 24px; background: var(--divider); flex: none; }

.topbar-profile {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface); cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.topbar-profile:hover { background: var(--bg-soft); border-color: var(--blue-400); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.topbar-profile:active { transform: translateY(0) scale(.98); }
.topbar-profile[aria-expanded="true"] { background: var(--bg-blue-soft); border-color: var(--blue-400); }
.topbar-profile .user-avatar {
    width: 30px; height: 30px; display: grid; place-items: center; font-size: 11.7px; font-weight: 700; flex: none;
    background: linear-gradient(135deg, var(--brand-primary), var(--teal-500)) !important;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(33, 87, 229, .18);
}
.topbar-profile-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; }
.topbar-profile-info .user-name { max-width: 150px; font-size: 11.7px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-profile-info .user-role { font-size: 11px; color: var(--text-muted); }
.topbar-profile-chevron { font-size: 11px; color: var(--text-muted); transition: transform .2s ease; }
.topbar-profile[aria-expanded="true"] .topbar-profile-chevron { transform: rotate(180deg); }

.topbar-dropdown-head {
    display: flex; align-items: center; gap: 10px; padding: 14px;
    background: linear-gradient(135deg, var(--bg-blue-soft), var(--surface));
    border-bottom: 1px solid var(--divider);
}
.topbar-dropdown-head .user-avatar {
    width: 36px; height: 36px; display: grid; place-items: center; font-size: 12.6px; font-weight: 700; flex: none;
    background: linear-gradient(135deg, var(--brand-primary), var(--teal-500)) !important;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(33, 87, 229, .18);
}
.topbar-dropdown-head .user-name { font-size: 12.6px; font-weight: 600; color: var(--text); }
.topbar-dropdown-head .user-role { font-size: 11px; color: var(--text-muted); }

.user-dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 14px; border: none; background: none; text-align: left;
    color: var(--text-secondary); font-size: 12.6px; cursor: pointer; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.user-dropdown-item i {
    display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
    border-radius: var(--radius-sm); font-size: 12.6px;
    background: var(--bg-blue-soft); color: var(--brand-primary);
    transition: background .15s ease, color .15s ease;
}
.user-dropdown-item:hover { background: var(--bg-soft); color: var(--brand-primary); }
.user-dropdown-item.danger { color: var(--danger); }
.user-dropdown-item.danger i { background: var(--danger-soft); color: var(--danger); }
.user-dropdown-item.danger:hover { background: var(--danger-soft); color: var(--danger); }
.user-dropdown-divider { height: 1px; margin: 4px 0; background: var(--divider); }

@media (max-width: 640px) {
    .topbar-profile-info { display: none; }
    .topbar-profile { padding: 4px; }
    .topbar-sep { display: none; }
}

@media (max-width: 768px) {
    /* Admin topbar only. brand-system.css squeezes .topbar to 12px on
       mobile for the respondent theme; give the admin hamburger/profile
       buttons breathing room from the screen edge instead. */
    .topbar:not(.respondent-topbar) { padding: 10px 16px !important; }
}

/* ============================================================
   Tables: quieter chrome, one action menu per row
   ============================================================ */
.table-wrapper { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.table-responsive { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: var(--surface); }
.dash-card .table-responsive, .table-wrapper .table-responsive { border: 0; border-radius: 0; }
.table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.table thead th { background: #F5F8FC !important; border-bottom: 1px solid var(--border) !important; border-top: 0 !important; text-transform: none !important; white-space: nowrap; }
.table tbody td { border-top: 0 !important; border-bottom: 1px solid var(--divider) !important; }
.table tbody tr:last-child td { border-bottom: 0 !important; }
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: #F8FBFF !important; }

@media (max-width: 768px) {
    /* Auto table layout treats `width` as a floor, not a cap: once cells
       stop wrapping, columns that need more room than 100% push the table
       wider than its container, which is what lets .table-responsive's
       overflow-x: auto actually produce a scrollbar instead of squeezing
       everything into place. */
    .table tbody td { white-space: nowrap; }
}

/* Row action menu */
.btn-table-action {
    display: inline-grid !important; place-items: center; width: 32px; height: 32px;
    padding: 0 !important; border: 1px solid transparent !important; border-radius: var(--radius-md) !important;
    background: transparent !important; color: var(--text-muted) !important; box-shadow: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-table-action::after { display: none !important; }
.btn-table-action:hover,
.btn-table-action[aria-expanded="true"] { background: var(--bg-blue-soft) !important; border-color: var(--blue-400) !important; color: var(--brand-primary) !important; }

.table .dropdown-menu { min-width: 186px; padding: 6px; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-floating) !important; }
.table .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12.6px; }
.table .dropdown-item i { width: 16px; font-size: 13.5px; color: var(--text-muted); }
.table .dropdown-item:hover { background: var(--bg-soft); color: var(--brand-primary); }
.table .dropdown-item:hover i { color: var(--brand-primary); }
.table .dropdown-item.text-danger,
.table .dropdown-item.text-danger i { color: var(--danger) !important; }
.table .dropdown-item.text-danger:hover { background: var(--danger-soft); }

/* A status switch is data, not an action — keep it calm and aligned */
.table .form-check.form-switch { display: flex; align-items: center; margin: 0; min-height: auto; }
.table .form-switch .form-check-input { margin: 0; cursor: pointer; }

/* DataTables re-applies an inline display:none to a just-toggled-visible
   checkbox column on some tables (root cause not isolated — the internal
   column model reports it as visible while the DOM cell disagrees), so
   force it back on with a stylesheet !important, which is the one thing
   that reliably outranks a plain (non-!important) inline style. */
[data-table].check-mode .col-check { display: table-cell !important; }

/* ============================================================
   Loading states
   ============================================================ */
#pageLoadingBar {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
    background: linear-gradient(90deg, var(--brand-primary), var(--teal-500));
    box-shadow: 0 0 10px rgba(33, 87, 229, .5);
    transition: width .2s ease, opacity .3s ease;
}

/* Skeleton rows are the single loading style for tables; DataTables' own
   processing indicator would otherwise sit on top and never gets hidden
   because it's toggled with an inline style that this stylesheet used to
   out-rank with !important, so it's suppressed entirely here. */
.dataTables_processing,
div.dataTables_wrapper div.dataTables_processing {
    display: none !important;
}

@keyframes fg-spin { to { transform: rotate(360deg); } }

/* Self-contained spinner used by setButtonLoading() (helpers.js) — inherits
   the button's own text color via currentColor, so it reads correctly on
   solid, outline, and icon-only buttons alike without depending on
   Bootstrap's spinner-border (not every layout loads Bootstrap's CSS). */
.btn-inline-spinner {
    display: inline-block; width: 13px; height: 13px; margin-right: 6px;
    vertical-align: -2px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    opacity: .85; animation: fg-spin .7s linear infinite;
}

.skeleton-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--divider); }
.skeleton-row:last-child { border-bottom: 0; }
.skeleton-line { height: 12px; border-radius: var(--radius-full); flex: 1; }
.skeleton-line.is-sm { max-width: 64px; }
.skeleton-line.is-md { max-width: 140px; }
.skeleton-circle { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.skeleton, .skeleton-line, .skeleton-circle { position: relative; overflow: hidden; background: #E7EDF5; }
.skeleton-line::after, .skeleton-circle::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: fg-shimmer 1.4s infinite;
}

.btn.is-loading, button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after, button.is-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    animation: fg-spin .7s linear infinite;
}
.btn-light.is-loading::after, .btn-secondary.is-loading::after { border-color: var(--bg-soft); border-top-color: var(--brand-primary); }

/* ============================================================
   Dark mode: cover every surface the new interface introduces
   ============================================================ */
[data-theme="dark"] .topbar { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .topbar-title { color: var(--text) !important; }
[data-theme="dark"] .topbar-icon-btn,
[data-theme="dark"] .topbar-profile { background: var(--hover) !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="dark"] .topbar-icon-btn:hover,
[data-theme="dark"] .topbar-profile:hover { background: var(--active) !important; border-color: var(--blue) !important; }
[data-theme="dark"] .topbar-profile[aria-expanded="true"] { background: var(--active) !important; border-color: var(--blue) !important; }
[data-theme="dark"] .topbar-sep { background: var(--border) !important; }
[data-theme="dark"] .topbar-dropdown-head { background: linear-gradient(135deg, var(--active), var(--surface)) !important; border-color: var(--border) !important; }
[data-theme="dark"] .user-dropdown-divider { border-color: var(--border) !important; }
[data-theme="dark"] .user-dropdown-item { color: var(--text-secondary) !important; }
[data-theme="dark"] .user-dropdown-item i { background: var(--hover) !important; color: var(--sky) !important; }
[data-theme="dark"] .user-dropdown-item:hover { background: var(--hover) !important; color: var(--text) !important; }
[data-theme="dark"] .user-dropdown-item.danger i { background: var(--danger-soft) !important; color: var(--danger) !important; }
[data-theme="dark"] .topbar-profile .user-avatar,
[data-theme="dark"] .topbar-dropdown-head .user-avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(87, 144, 255, .22); }

[data-theme="dark"] .dash-card, [data-theme="dark"] .kpi-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dash-card-title, [data-theme="dark"] .kpi-value, [data-theme="dark"] .ring-pct,
[data-theme="dark"] .dash-donut-center strong, [data-theme="dark"] .dash-legend-value,
[data-theme="dark"] .dash-table-score, [data-theme="dark"] .ring-label { color: var(--text) !important; }
[data-theme="dark"] .dash-chip { background: var(--hover) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .dash-chip:hover { background: var(--active) !important; border-color: var(--blue) !important; color: var(--text) !important; }
[data-theme="dark"] .kpi-track { background: var(--hover) !important; }
[data-theme="dark"] .ring-bg { stroke: #24304A !important; }
[data-theme="dark"] .dash-table th, [data-theme="dark"] .table thead th { background: var(--hover) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dash-table td, [data-theme="dark"] .table tbody td { color: var(--text-secondary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dash-table tbody tr:hover td, [data-theme="dark"] .table tbody tr:hover { background: var(--hover) !important; }
[data-theme="dark"] .dash-table-avatar { background: var(--active) !important; color: var(--sky) !important; }
[data-theme="dark"] .table-wrapper, [data-theme="dark"] .table-responsive { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .table .dropdown-menu { background: var(--surface) !important; }
[data-theme="dark"] .table .dropdown-item { color: var(--text-secondary) !important; }
[data-theme="dark"] .table .dropdown-item:hover { background: var(--hover) !important; color: var(--text) !important; }
[data-theme="dark"] .btn-table-action:hover,
[data-theme="dark"] .btn-table-action[aria-expanded="true"] { background: var(--active) !important; border-color: var(--blue) !important; color: var(--sky) !important; }
[data-theme="dark"] .skeleton, [data-theme="dark"] .skeleton-line, [data-theme="dark"] .skeleton-circle { background: #1B2740; }
[data-theme="dark"] .skeleton-line::after, [data-theme="dark"] .skeleton-circle::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }

[data-theme="dark"] .score-level { border-color: var(--border) !important; }
[data-theme="dark"] .level-sangat-baik { background: rgba(15, 159, 145, .14) !important; color: #4FD5C6 !important; }
[data-theme="dark"] .level-baik { background: rgba(33, 87, 229, .16) !important; color: #7CA9FF !important; }
[data-theme="dark"] .level-cukup { background: rgba(233, 162, 59, .14) !important; color: #F0B75E !important; }
[data-theme="dark"] .level-terbatas { background: rgba(199, 123, 18, .16) !important; color: #E9A23B !important; }
[data-theme="dark"] .level-risiko { background: rgba(217, 75, 86, .14) !important; color: #F0808A !important; }

[data-theme="dark"] .kategori-badge.kategori-sangat-baik { background: rgba(15, 159, 145, .14) !important; border-color: transparent !important; }
[data-theme="dark"] .kategori-badge.kategori-baik { background: rgba(33, 87, 229, .16) !important; border-color: transparent !important; }
[data-theme="dark"] .kategori-badge.kategori-cukup { background: rgba(233, 162, 59, .14) !important; border-color: transparent !important; }
[data-theme="dark"] .kategori-badge.kategori-terbatas { background: rgba(199, 123, 18, .16) !important; border-color: transparent !important; }
[data-theme="dark"] .kategori-badge.kategori-risiko,
[data-theme="dark"] .kategori-badge.kategori-gagal { background: rgba(217, 75, 86, .14) !important; border-color: transparent !important; }
[data-theme="dark"] .kategori-badge.kategori-netral { background: var(--hover) !important; color: var(--text-muted) !important; }

[data-theme="dark"] .ui-dropzone { background: var(--hover) !important; border-color: var(--border) !important; }
[data-theme="dark"] .ui-dropzone-title { color: var(--text) !important; }
[data-theme="dark"] .page-breadcrumb a { color: var(--text-secondary) !important; }
[data-theme="dark"] .empty-state-icon { background: var(--active) !important; color: var(--sky) !important; }
[data-theme="dark"] .table-footer { border-color: var(--border) !important; color: var(--text-secondary) !important; }

/* Skeleton rows replace the tbody while a server-side page is loading */
.skeleton-tr td { padding: 0 !important; height: auto !important; border-bottom: 0 !important; background: transparent !important; }