/**
 * Desktop UI v2 tokens. Shared by the shell and later page slices.
 * Scope: viewport >= 769px and body.device-desktop only.
 * Mobile 390, tablet, and the sidebar accent stay on their existing sheets.
 */

@media (min-width: 769px) {
    body.device-desktop {
        --dv2-navy: #16324f;
        --dv2-ink: #172033;
        --dv2-muted: #5b6578;
        --dv2-line: #e6ebf2;
        --dv2-paper: #f4f6fa;
        --dv2-card: #ffffff;
        --dv2-brand: #e27a2a;
        --dv2-brand-soft: #fff1e4;
        --dv2-ok: #14804a;
        --dv2-ok-soft: #e7f7ee;
        --dv2-warn: #c47b12;
        --dv2-warn-soft: #fff4e0;
        --dv2-danger: #c03636;
        --dv2-danger-soft: #fdecec;
        --dv2-info: #2b6cb0;
        --dv2-info-soft: #e8f1fb;
        --dv2-shadow: 0 10px 30px rgba(22, 50, 79, 0.06);
        --dv2-radius: 16px;
        --dv2-header-title: #ffffff;
        --dv2-header-clock: rgba(255, 255, 255, 0.85);
    }

    body.device-desktop #main-app.dashboard-container {
        --shell-header-bg: var(--dv2-navy);
        --shell-header-text: var(--dv2-header-title);
        --shell-header-muted: var(--dv2-header-clock);
        --card-radius: var(--dv2-radius);
    }

    [data-theme="light"] body.device-desktop #main-app.dashboard-container {
        --bg-surface-1: var(--dv2-paper);
        --bg-color: var(--dv2-paper);
    }

    body.device-desktop #main-app .app-header {
        background: var(--dv2-navy) !important;
        color: var(--dv2-header-title) !important;
    }

    body.device-desktop #main-app .desktop-page-title h1 {
        color: var(--dv2-header-title) !important;
    }

    body.device-desktop #main-app .dc-header-clock {
        color: var(--dv2-header-clock) !important;
    }

    [data-theme="light"] body.device-desktop #main-app .app-container {
        background: var(--dv2-paper) !important;
        color: var(--dv2-ink);
    }

    /* Generic shell cards. Page interiors (kanban, zero tiles, copy) stay put. */
    body.device-desktop #main-app .card,
    body.device-desktop #main-app .stat-card,
    body.device-desktop #main-app .info-card,
    body.device-desktop #main-app .settings-card,
    body.device-desktop #main-app .user-dashboard-card,
    body.device-desktop #main-app .chart-card,
    body.device-desktop #main-app .recent-activity-card,
    body.device-desktop #main-app .form-section-card,
    body.device-desktop #main-app .company-info-card,
    body.device-desktop #main-app .brand-preview-card,
    body.device-desktop #main-app .org-preview-card,
    body.device-desktop #main-app .detail-card,
    body.device-desktop #main-app .talent-search-card,
    body.device-desktop #main-app .recruitment-panel,
    body.device-desktop #main-app .director-panel,
    body.device-desktop #main-app .company-cockpit-panel,
    body.device-desktop #main-app .approval-card,
    body.device-desktop #main-app .onboarding-card,
    body.device-desktop #main-app .panel {
        border-radius: var(--dv2-radius) !important;
        box-shadow: var(--dv2-shadow) !important;
    }

    [data-theme="light"] body.device-desktop #main-app .card,
    [data-theme="light"] body.device-desktop #main-app .stat-card,
    [data-theme="light"] body.device-desktop #main-app .info-card,
    [data-theme="light"] body.device-desktop #main-app .settings-card,
    [data-theme="light"] body.device-desktop #main-app .user-dashboard-card,
    [data-theme="light"] body.device-desktop #main-app .chart-card,
    [data-theme="light"] body.device-desktop #main-app .recent-activity-card,
    [data-theme="light"] body.device-desktop #main-app .form-section-card,
    [data-theme="light"] body.device-desktop #main-app .company-info-card,
    [data-theme="light"] body.device-desktop #main-app .brand-preview-card,
    [data-theme="light"] body.device-desktop #main-app .org-preview-card,
    [data-theme="light"] body.device-desktop #main-app .detail-card,
    [data-theme="light"] body.device-desktop #main-app .talent-search-card,
    [data-theme="light"] body.device-desktop #main-app .recruitment-panel,
    [data-theme="light"] body.device-desktop #main-app .director-panel,
    [data-theme="light"] body.device-desktop #main-app .company-cockpit-panel,
    [data-theme="light"] body.device-desktop #main-app .approval-card,
    [data-theme="light"] body.device-desktop #main-app .onboarding-card,
    [data-theme="light"] body.device-desktop #main-app .panel {
        background: var(--dv2-card) !important;
        border-color: var(--dv2-line) !important;
        color: var(--dv2-ink);
    }

    [data-theme="dark"] body.device-desktop #main-app .app-container,
    [data-theme="dark"] body.device-desktop #main-app .card,
    [data-theme="dark"] body.device-desktop #main-app .stat-card,
    [data-theme="dark"] body.device-desktop #main-app .panel,
    [data-theme="dark"] body.device-desktop #main-app .approval-card {
        color: var(--text-primary);
    }

    body.device-desktop .dv2-pill {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.3;
    }

    body.device-desktop .dv2-pill-danger {
        background: var(--dv2-danger-soft);
        color: var(--dv2-danger);
    }

    body.device-desktop .dv2-pill-warn {
        background: var(--dv2-warn-soft);
        color: var(--dv2-warn);
    }

    body.device-desktop .dv2-pill-ok {
        background: var(--dv2-ok-soft);
        color: var(--dv2-ok);
    }

    body.device-desktop .dv2-pill-info {
        background: var(--dv2-info-soft);
        color: var(--dv2-info);
    }

    /* One sentence plus one action. Later slices use this instead of a hero 0. */
    body.device-desktop .dv2-empty {
        margin: 0;
        padding: 16px;
        border: 1px dashed var(--dv2-line);
        border-radius: 12px;
        background: var(--dv2-card);
        color: var(--dv2-muted);
        text-align: center;
        font-size: 13px;
        line-height: 1.45;
    }

    body.device-desktop .dv2-empty p {
        margin: 0;
    }

    body.device-desktop .dv2-empty .dv2-empty-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        border: 0;
        border-radius: 10px;
        padding: 8px 12px;
        background: var(--dv2-brand);
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
    }

    body.device-desktop .agenda-desktop-empty-link {
        display: inline;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--dv2-info);
        font: inherit;
        font-weight: 700;
        text-decoration: underline;
        cursor: pointer;
    }

    /* Agenda list, kanban, and detail consume the shared sheet. Mobile stays put. */
    body.device-desktop #tasks-tab .tasks-stat-item.is-zero,
    body.device-desktop #tasks-tab #tasks-stats-bar.is-all-zero,
    body.device-desktop #tasks-tab.is-agenda-desktop-empty .agenda-view-toolbar {
        display: none !important;
    }

    body.device-desktop #agenda-desktop-empty {
        margin: 8px 0 16px;
    }

    body.device-desktop #tasks-tab .tasks-stat-item {
        border-radius: var(--dv2-radius);
        border-color: var(--dv2-line);
    }

    [data-theme="light"] body.device-desktop #tasks-tab .tasks-stat-item,
    [data-theme="light"] body.device-desktop #tasks-tab .kanban-card,
    [data-theme="light"] body.device-desktop #tasks-tab .task-row,
    [data-theme="light"] body.device-desktop #agenda-detail-modal .agenda-modal-content {
        background: var(--dv2-card);
        border-color: var(--dv2-line);
        color: var(--dv2-ink);
    }

    [data-theme="light"] body.device-desktop #tasks-tab .kanban-column {
        background: var(--dv2-paper);
        border: 1px solid var(--dv2-line);
        border-radius: var(--dv2-radius);
        color: var(--dv2-ink);
    }

    body.device-desktop #tasks-tab .kanban-column,
    body.device-desktop #tasks-tab .kanban-card,
    body.device-desktop #tasks-tab .task-row,
    body.device-desktop #agenda-detail-modal .agenda-modal-content {
        border-radius: var(--dv2-radius);
        box-shadow: var(--dv2-shadow);
    }

    body.device-desktop #tasks-tab .kanban-card,
    body.device-desktop #tasks-tab .task-row {
        border: 1px solid var(--dv2-line);
    }

    body.device-desktop #tasks-tab .kanban-column-header h4 {
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }

    body.device-desktop #tasks-tab .priority-badge,
    body.device-desktop #tasks-tab .task-status-badge,
    body.device-desktop #tasks-tab .kanban-card-deadline,
    body.device-desktop #tasks-tab .row-deadline-overdue,
    body.device-desktop #agenda-detail-modal .agenda-detail-status-pill {
        border-radius: 999px;
        font-weight: 800;
    }

    body.device-desktop #tasks-tab .priority-badge.priority-critical,
    body.device-desktop #tasks-tab .kanban-card-deadline.critical,
    body.device-desktop #tasks-tab .row-deadline-overdue,
    body.device-desktop #tasks-tab .task-deadline.overdue {
        background: var(--dv2-danger-soft);
        color: var(--dv2-danger);
    }

    body.device-desktop #tasks-tab .priority-badge.priority-high,
    body.device-desktop #tasks-tab .kanban-card-deadline.urgent,
    body.device-desktop #tasks-tab .kanban-card-deadline.near {
        background: var(--dv2-warn-soft);
        color: var(--dv2-warn);
    }

    body.device-desktop #tasks-tab .priority-badge.priority-medium,
    body.device-desktop #tasks-tab .priority-badge.priority-low,
    body.device-desktop #tasks-tab .task-status-badge.status-todo,
    body.device-desktop #tasks-tab .task-status-badge.status-in_progress,
    body.device-desktop #tasks-tab .kanban-card-deadline.safe {
        background: var(--dv2-info-soft);
        color: var(--dv2-info);
    }

    body.device-desktop #tasks-tab .task-status-badge.status-review {
        background: var(--dv2-warn-soft);
        color: var(--dv2-warn);
    }

    body.device-desktop #tasks-tab .task-status-badge.status-done,
    body.device-desktop #tasks-tab .kanban-card-deadline.done-ontime {
        background: var(--dv2-ok-soft);
        color: var(--dv2-ok);
    }

    [data-theme="dark"] body.device-desktop #tasks-tab .kanban-column,
    [data-theme="dark"] body.device-desktop #tasks-tab .kanban-card,
    [data-theme="dark"] body.device-desktop #tasks-tab .kanban-column-header,
    [data-theme="dark"] body.device-desktop #tasks-tab .task-row,
    [data-theme="dark"] body.device-desktop #agenda-detail-modal .agenda-modal-content,
    [data-theme="dark"] body.device-desktop #agenda-desktop-empty {
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #tasks-tab .kanban-card-title,
    [data-theme="dark"] body.device-desktop #tasks-tab .kanban-column-header h4,
    [data-theme="dark"] body.device-desktop #tasks-tab .tr-title-text,
    [data-theme="dark"] body.device-desktop #agenda-detail-modal .modal-title-input {
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #agenda-desktop-empty {
        background: var(--bg-card, #111827);
        border-color: var(--dv2-line);
        color: var(--text-primary);
    }

    body.device-desktop #agenda-detail-status-pill[hidden] {
        display: none !important;
    }

    body.device-desktop #agenda-detail-status-pill:not([hidden]) {
        display: inline-flex;
    }

    /* Persetujuan inbox. Mobile 390 keeps approvals.css. */
    body.device-desktop #main-app #approval-tab #approval-filter-pills {
        flex-wrap: wrap !important;
        overflow: visible;
        gap: 8px;
    }

    body.device-desktop #approval-tab .filter-pill {
        border-color: var(--dv2-line);
        background: var(--dv2-card);
        color: var(--dv2-ink);
        border-radius: 999px;
    }

    body.device-desktop #approval-tab .filter-pill.active,
    body.device-desktop #approval-tab .filter-pill.active:hover {
        background: var(--dv2-navy) !important;
        border-color: var(--dv2-navy) !important;
        color: #fff !important;
    }

    body.device-desktop #approval-tab .approval-stats-row {
        border-radius: var(--dv2-radius);
        border: 1px solid var(--dv2-line);
        background: var(--dv2-card);
        box-shadow: var(--dv2-shadow);
        color: var(--dv2-ink);
    }

    body.device-desktop #approval-tab .approval-stat-total {
        font-weight: 800;
    }

    body.device-desktop #main-app #approval-tab .approval-card {
        padding: 16px !important;
        gap: 14px;
        border-radius: var(--dv2-radius) !important;
        border: 1px solid var(--dv2-line) !important;
        box-shadow: var(--dv2-shadow) !important;
        align-items: flex-start;
    }

    [data-theme="light"] body.device-desktop #main-app #approval-tab .approval-card,
    [data-theme="light"] body.device-desktop #approval-tab .approval-stats-row,
    [data-theme="light"] body.device-desktop #approval-tab .filter-pill {
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    body.device-desktop #approval-tab .approval-desktop-lead {
        margin: 4px 0 8px;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.4;
        color: var(--dv2-ink);
    }

    body.device-desktop #approval-tab .approval-desktop-lead-rest {
        margin-top: 16px;
        color: var(--dv2-muted);
        font-weight: 700;
    }

    body.device-desktop #approval-tab .approval-card-type-line {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 6px;
    }

    body.device-desktop #approval-tab .approval-type-badge {
        background: transparent !important;
        color: var(--dv2-muted) !important;
        padding: 0;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    body.device-desktop #approval-tab .approval-card-title {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
        margin-bottom: 4px;
    }

    body.device-desktop #approval-tab .approval-card-desc,
    body.device-desktop #approval-tab .approval-card-detail {
        white-space: normal;
        color: var(--dv2-ink);
        font-size: 13px;
        line-height: 1.45;
    }

    body.device-desktop #approval-tab .approval-card-requester,
    body.device-desktop #approval-tab .approval-card-age {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.4;
    }

    body.device-desktop #approval-tab .approval-card-requester {
        color: var(--dv2-ink);
        font-weight: 650;
    }

    body.device-desktop #approval-tab .approval-card-age {
        color: var(--dv2-muted);
        font-weight: 600;
    }

    body.device-desktop #approval-tab .approval-card-list .operational-state,
    body.device-desktop #approval-tab .approval-card-list .empty-state {
        margin: 8px 0 0;
        padding: 16px;
        border: 1px dashed var(--dv2-line);
        border-radius: 12px;
        background: var(--dv2-card);
        color: var(--dv2-muted);
        text-align: center;
    }

    body.device-desktop #approval-tab .approval-card-list .operational-state i,
    body.device-desktop #approval-tab .approval-card-list .empty-state i {
        font-size: 1.25rem !important;
        color: var(--dv2-ok);
    }

    body.device-desktop #approval-tab .approval-card-list .operational-state strong,
    body.device-desktop #approval-tab .approval-card-list .empty-state p {
        color: var(--dv2-ink);
    }

    [data-theme="dark"] body.device-desktop #main-app #approval-tab .approval-card,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-stats-row,
    [data-theme="dark"] body.device-desktop #approval-tab .filter-pill,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-card-list .operational-state,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-card-list .empty-state {
        background: var(--bg-card) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #approval-tab .approval-card-title,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-card-desc,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-card-detail,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-card-requester,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-desktop-lead,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-stat-total,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-card-list .operational-state strong,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-card-list .empty-state p {
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #approval-tab .approval-type-badge,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-card-age,
    [data-theme="dark"] body.device-desktop #approval-tab .approval-desktop-lead-rest,
    [data-theme="dark"] body.device-desktop #approval-tab .filter-pill {
        color: var(--text-secondary) !important;
    }

    [data-theme="dark"] body.device-desktop #approval-tab .filter-pill.active,
    [data-theme="dark"] body.device-desktop #approval-tab .filter-pill.active:hover {
        background: var(--dv2-navy) !important;
        border-color: var(--dv2-navy) !important;
        color: #fff !important;
    }

    /* Penilaian + Absensi Tim. Mobile 390 keeps assessment.css. */
    body.device-desktop #assessor-center-section .assessor-task-card {
        border-radius: var(--dv2-radius) !important;
        border: 1px solid var(--dv2-line) !important;
        border-left-width: 4px !important;
        box-shadow: var(--dv2-shadow) !important;
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    body.device-desktop #assessor-center-section .assessor-task-card--overdue {
        border-left-color: var(--dv2-danger) !important;
    }

    body.device-desktop #assessor-center-section .assessor-task-card--urgent {
        border-left-color: var(--dv2-warn) !important;
    }

    body.device-desktop #assessor-center-section .assessor-task-card--soon {
        border-left-color: var(--dv2-info) !important;
    }

    body.device-desktop #assessor-center-section .penilaian-desktop-lead {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 15px;
        font-weight: 800;
        color: var(--dv2-ink);
    }

    body.device-desktop #assessor-center-section #assessor-center-empty {
        margin: 8px 0 0;
        padding: 16px;
        border: 1px dashed var(--dv2-line);
        border-radius: 12px;
        background: var(--dv2-card);
        color: var(--dv2-muted);
        text-align: center;
    }

    body.device-desktop #assessor-center-section #assessor-center-empty .empty-state-title,
    body.device-desktop #assessor-center-section .assessor-task-title {
        color: var(--dv2-ink);
    }

    body.device-desktop #assessor-discipline-card {
        border-radius: var(--dv2-radius);
        border: 1px solid var(--dv2-line);
        background: var(--dv2-card);
        box-shadow: var(--dv2-shadow);
    }

    body.device-desktop #assessor-discipline-card .mini-stat.is-zero {
        display: none !important;
    }

    body.device-desktop #assessor-attendance-section .user-dashboard-card {
        border-radius: var(--dv2-radius) !important;
        border: 1px solid var(--dv2-line) !important;
        box-shadow: var(--dv2-shadow) !important;
        background: var(--dv2-card);
    }

    body.device-desktop #assessor-attendance-section .user-card-header,
    body.device-desktop #assessor-tab .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    body.device-desktop #assessor-attendance-section .attendance-desktop-lead {
        margin: 0 0 8px;
        font-size: 15px;
        font-weight: 800;
        color: var(--dv2-ink);
    }

    body.device-desktop #assessor-attendance-section .attendance-desktop-people {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 10px;
        padding: 0;
        list-style: none;
    }

    body.device-desktop #assessor-attendance-section .attendance-desktop-person {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        padding: 8px 12px;
        border: 1px solid var(--dv2-line);
        border-radius: 999px;
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    body.device-desktop #assessor-attendance-section .attendance-desktop-scope,
    body.device-desktop #assessor-attendance-section .attendance-desktop-facts {
        margin: 0 0 8px;
        font-size: 13px;
        font-weight: 700;
        color: var(--dv2-muted);
    }

    body.device-desktop #assessor-attendance-section.is-attendance-empty .filter-bar-inline,
    body.device-desktop #subordinate-attendance-summary .stat-item {
        display: none !important;
    }

    body.device-desktop #assessor-attendance-section .filter-bar-inline {
        flex-wrap: wrap;
        align-items: flex-end;
    }

    body.device-desktop #assessor-attendance-section .filter-field {
        flex: 1 1 180px;
        min-width: 0;
        max-width: 100%;
    }

    body.device-desktop #assessor-attendance-section .filter-field select,
    body.device-desktop #assessor-attendance-section .filter-field input {
        width: 100% !important;
        max-width: 100%;
        height: 40px !important;
        min-height: 40px;
        max-height: 40px;
        /* Column flex-basis from the shared filter rule was stretching the select to 200px. */
        flex: 0 0 auto !important;
    }

    body.device-desktop #assessor-attendance-section .data-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    [data-theme="dark"] body.device-desktop #assessor-center-section .assessor-task-card,
    [data-theme="dark"] body.device-desktop #assessor-center-section #assessor-center-empty,
    [data-theme="dark"] body.device-desktop #assessor-discipline-card,
    [data-theme="dark"] body.device-desktop #assessor-attendance-section .user-dashboard-card,
    [data-theme="dark"] body.device-desktop #assessor-attendance-section .attendance-desktop-person {
        background: var(--bg-card) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #assessor-center-section .penilaian-desktop-lead,
    [data-theme="dark"] body.device-desktop #assessor-center-section .assessor-task-title,
    [data-theme="dark"] body.device-desktop #assessor-center-section #assessor-center-empty .empty-state-title,
    [data-theme="dark"] body.device-desktop #assessor-attendance-section .attendance-desktop-lead {
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #assessor-attendance-section .attendance-desktop-scope,
    [data-theme="dark"] body.device-desktop #assessor-attendance-section .attendance-desktop-facts {
        color: var(--text-secondary);
    }

    /* The shell grid row is 64px. A wrapped Penilaian tab strip must grow that row
       or the card (Refresh, filters) paints over the second line of tabs. */
    body.device-desktop #main-app.dashboard-container:has(.app-header #assessor-sub-nav:not([style*="display: none"]):not([style*="display:none"])) {
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    /* Full labels on their own header row so Struktur is not clipped to Stru. */
    body.device-desktop #main-app .app-header:has(#assessor-sub-nav:not([style*="display: none"]):not([style*="display:none"])) {
        height: auto !important;
        min-height: 64px;
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 4px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body.device-desktop #main-app .app-header:has(#assessor-sub-nav:not([style*="display: none"]):not([style*="display:none"])) .sub-nav-container {
        flex: 1 0 100% !important;
        order: 4;
        height: auto !important;
        min-height: 36px;
        overflow: visible !important;
    }

    body.device-desktop #main-app #assessor-sub-nav:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        overflow: visible !important;
        gap: 6px !important;
    }

    body.device-desktop #main-app #assessor-sub-nav .sub-nav-btn {
        flex: 0 0 auto !important;
        max-width: none !important;
        min-width: max-content !important;
        height: 36px !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    body.device-desktop #main-app #assessor-sub-nav .assessor-nav-full {
        display: inline !important;
    }

    body.device-desktop #main-app #assessor-sub-nav .assessor-nav-short {
        display: none !important;
    }

    body.device-desktop #main-app #assessor-sub-nav .sub-nav-btn span:not(.sub-nav-count-badge) {
        overflow: visible !important;
        text-overflow: clip !important;
        min-width: max-content !important;
        max-width: none !important;
    }

    @media (max-width: 1100px) {
        body.device-desktop #approval-tab .approval-card {
            flex-wrap: wrap;
        }

        body.device-desktop #approval-tab .approval-card-actions {
            width: 100%;
            justify-content: flex-end;
        }

        /* WITA clock eats the header row. Keep Menunggu / Pengajuan readable
           on their own line instead of center-clipping the labels. */
        body.device-desktop #main-app .app-header:has(#approval-sub-nav:not([style*="display: none"])) {
            height: auto !important;
            min-height: 64px;
            flex-wrap: wrap !important;
            align-items: center !important;
            row-gap: 2px !important;
            padding-top: 8px !important;
            padding-bottom: 6px !important;
        }

        body.device-desktop #main-app .app-header:has(#approval-sub-nav:not([style*="display: none"])) .sub-nav-container {
            flex: 1 0 100% !important;
            order: 4;
            height: auto !important;
            min-height: 36px;
            overflow: visible !important;
        }

        body.device-desktop #main-app #approval-sub-nav:not([style*="display: none"]) {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: 100%;
            height: auto !important;
            overflow: visible !important;
            gap: 4px !important;
        }

        body.device-desktop #main-app #approval-sub-nav .sub-nav-btn {
            flex: 0 0 auto !important;
            max-width: none !important;
            min-width: max-content !important;
            height: 36px !important;
            overflow: visible !important;
            padding: 0 10px !important;
            font-size: 12.5px !important;
            white-space: nowrap !important;
        }
    }

    /* HC Ringkasan + Analitik. Mobile 390 keeps the ops queue and the old tiles. */
    body.device-desktop #hc-dashboard-section #hc-stats-grid {
        display: none !important;
    }

    body.device-desktop #hc-dashboard-section .badge.is-zero {
        display: none !important;
    }

    body.device-desktop #hc-desktop-lead {
        margin: 0 0 16px;
        padding: 16px;
        border: 1px solid var(--dv2-line);
        border-radius: var(--dv2-radius);
        background: var(--dv2-card);
        box-shadow: var(--dv2-shadow);
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-desktop-lead[hidden] {
        display: none !important;
    }

    body.device-desktop #hc-desktop-lead .hc-desktop-kicker {
        margin: 0 0 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--dv2-muted);
    }

    body.device-desktop #hc-desktop-lead .hc-desktop-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 12px;
        padding: 0;
        list-style: none;
    }

    body.device-desktop #hc-desktop-lead .hc-desktop-action {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--dv2-line);
        border-radius: 999px;
        background: var(--dv2-warn-soft);
        color: var(--dv2-ink);
        font: inherit;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.35;
        text-align: left;
        cursor: pointer;
        white-space: normal;
    }

    body.device-desktop #hc-desktop-lead .hc-desktop-scope {
        margin: 0 0 6px;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-desktop-lead .hc-desktop-note,
    body.device-desktop #hc-dashboard-analytics-summary .hc-desktop-note {
        margin: 0 0 6px;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.45;
        color: var(--dv2-muted);
    }

    body.device-desktop #hc-dashboard-section .quick-actions-grid {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    body.device-desktop #hc-dashboard-section .quick-action-btn {
        flex: 1 1 180px !important;
        max-width: 100%;
        height: auto !important;
        min-height: 40px;
        white-space: normal !important;
        border: 1px solid var(--dv2-line) !important;
        border-radius: 12px !important;
        background: var(--dv2-card) !important;
        color: var(--dv2-ink) !important;
        box-shadow: none !important;
    }

    body.device-desktop #hc-dashboard-section .company-cockpit-panel,
    body.device-desktop #hc-strategic-section .user-dashboard-card,
    body.device-desktop #hc-strategic-analytics-panel .hc-analytics-card {
        border: 1px solid var(--dv2-line) !important;
        border-radius: var(--dv2-radius) !important;
        box-shadow: var(--dv2-shadow) !important;
    }

    [data-theme="light"] body.device-desktop #hc-dashboard-section .company-cockpit-panel,
    [data-theme="light"] body.device-desktop #hc-strategic-section .user-dashboard-card,
    [data-theme="light"] body.device-desktop #hc-strategic-analytics-panel .hc-analytics-card,
    [data-theme="light"] body.device-desktop #hc-desktop-lead {
        background: var(--dv2-card) !important;
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-strategic-analytics-panel .hc-analytics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
    }

    body.device-desktop #hc-strategic-analytics-panel .hc-analytics-card {
        padding: 16px;
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-strategic-analytics-panel .hc-analytics-value {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-strategic-analytics-panel .hc-analytics-empty {
        margin-top: 12px;
    }

    body.device-desktop #hc-strategic-section .section-header,
    body.device-desktop #hc-strategic-section .user-card-header,
    body.device-desktop #hc-dashboard-section .section-header,
    body.device-desktop #hc-dashboard-section .company-cockpit-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    body.device-desktop #hc-strategic-section .hc-strategic-sub-nav,
    body.device-desktop #hc-hub-secondary .hc-hub-leaf-group {
        display: flex;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 8px;
        max-width: 100%;
    }

    body.device-desktop #hc-strategic-section .hc-strategic-sub-nav .sub-nav-btn-secondary,
    body.device-desktop #hc-hub-secondary .sub-nav-btn-secondary {
        flex: 0 1 auto;
        max-width: 100%;
        height: auto;
        min-height: 36px;
        white-space: normal;
    }

    body.device-desktop #main-app.dashboard-container:has(.app-header #hc-sub-nav:not([style*="display: none"]):not([style*="display:none"])) {
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    body.device-desktop #main-app .app-header:has(#hc-sub-nav:not([style*="display: none"]):not([style*="display:none"])) {
        height: auto !important;
        min-height: 64px;
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 4px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body.device-desktop #main-app .app-header:has(#hc-sub-nav:not([style*="display: none"]):not([style*="display:none"])) .sub-nav-container {
        flex: 1 0 100% !important;
        order: 4;
        height: auto !important;
        min-height: 36px;
        overflow: visible !important;
    }

    body.device-desktop #main-app #hc-sub-nav:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        overflow: visible !important;
        gap: 6px !important;
    }

    body.device-desktop #main-app #hc-sub-nav .sub-nav-btn {
        flex: 0 0 auto !important;
        max-width: none !important;
        min-width: max-content !important;
        height: 36px !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    [data-theme="dark"] body.device-desktop #hc-desktop-lead,
    [data-theme="dark"] body.device-desktop #hc-dashboard-section .company-cockpit-panel,
    [data-theme="dark"] body.device-desktop #hc-dashboard-section .quick-action-btn,
    [data-theme="dark"] body.device-desktop #hc-strategic-section .user-dashboard-card,
    [data-theme="dark"] body.device-desktop #hc-strategic-analytics-panel .hc-analytics-card,
    [data-theme="dark"] body.device-desktop #hc-strategic-analytics-panel .hc-analytics-empty {
        background: var(--bg-card) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #hc-desktop-lead .hc-desktop-scope,
    [data-theme="dark"] body.device-desktop #hc-desktop-lead .hc-desktop-action,
    [data-theme="dark"] body.device-desktop #hc-strategic-analytics-panel .hc-analytics-value,
    [data-theme="dark"] body.device-desktop #hc-dashboard-section .quick-action-btn {
        color: var(--text-primary) !important;
    }

    [data-theme="dark"] body.device-desktop #hc-desktop-lead .hc-desktop-note,
    [data-theme="dark"] body.device-desktop #hc-desktop-lead .hc-desktop-kicker,
    [data-theme="dark"] body.device-desktop #hc-strategic-analytics-panel .hc-analytics-label,
    [data-theme="dark"] body.device-desktop #hc-strategic-analytics-panel .helper-text {
        color: var(--text-secondary);
    }

    /* HC Waktu. Mobile 390 keeps the stat tiles, the old clocks, and the section titles. */
    body.device-desktop #hc-attendance-stats-grid,
    body.device-desktop #hc-shift-assign-stats .hc-shift-stat-pill.is-zero {
        display: none !important;
    }

    body.device-desktop #hc-attendance-section > .section-header,
    body.device-desktop #hc-leave-section > .section-header {
        display: none;
    }

    body.device-desktop #hc-attendance-report-subsection > .section-subheader {
        display: flex;
        justify-content: flex-end;
        min-height: 0;
    }

    body.device-desktop #hc-attendance-report-subsection > .section-subheader h3 {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body.device-desktop #hc-waktu-lead {
        margin: 0 0 16px;
        padding: 16px;
        border: 1px solid var(--dv2-line);
        border-radius: var(--dv2-radius);
        background: var(--dv2-card);
        box-shadow: var(--dv2-shadow);
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-waktu-lead[hidden] {
        display: none !important;
    }

    body.device-desktop #hc-waktu-lead .hc-desktop-kicker {
        margin: 0 0 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--dv2-muted);
    }

    body.device-desktop #hc-waktu-lead .hc-waktu-sentence {
        margin: 0 0 12px;
        font-size: 16px;
        font-weight: 750;
        line-height: 1.4;
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-waktu-lead .hc-desktop-note {
        margin: 0 0 6px;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.45;
        color: var(--dv2-muted);
    }

    body.device-desktop #hc-waktu-lead .hc-desktop-actions,
    body.device-desktop #hc-waktu-lead .hc-waktu-people {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 12px;
        padding: 0;
        list-style: none;
    }

    body.device-desktop #hc-waktu-lead .hc-desktop-action {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--dv2-line);
        border-radius: 999px;
        background: var(--dv2-warn-soft);
        color: var(--dv2-ink);
        font: inherit;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.35;
        text-align: left;
        cursor: pointer;
        white-space: normal;
    }

    body.device-desktop #hc-waktu-lead .hc-waktu-person {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        padding: 8px 12px;
        border: 1px solid var(--dv2-line);
        border-radius: 999px;
        background: var(--dv2-paper);
        color: var(--dv2-ink);
    }

    body.device-desktop #main-app #hc-attendance-sub-nav,
    body.device-desktop #main-app #hc-leave-sub-nav,
    body.device-desktop #main-app #hc-shifts-inner-sub-nav,
    body.device-desktop #main-app #hc-overtime-inner-sub-nav,
    body.device-desktop #main-app #hc-attendance-section .sub-nav-secondary,
    body.device-desktop #main-app #hc-leave-section .sub-nav-secondary {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        overflow: visible !important;
        max-width: 100%;
        height: auto !important;
        gap: 8px;
    }

    body.device-desktop #main-app #hc-attendance-section .sub-nav-btn-secondary,
    body.device-desktop #main-app #hc-leave-section .sub-nav-btn-secondary {
        flex: 0 1 auto !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        height: auto !important;
        min-height: 36px;
    }

    body.device-desktop #hc-attendance-section .filter-row,
    body.device-desktop #hc-leave-section .filter-row,
    body.device-desktop #hc-attendance-section .hc-shift-assign-toolbar,
    body.device-desktop #hc-attendance-section .toolbar-group {
        display: flex;
        flex-wrap: wrap !important;
        align-items: flex-end;
        gap: 12px;
        max-width: 100%;
    }

    body.device-desktop #hc-attendance-section .filter-row .form-group,
    body.device-desktop #hc-leave-section .filter-row .form-group,
    body.device-desktop #hc-attendance-section .hc-shift-assign-toolbar .form-group {
        flex: 1 1 200px;
        min-width: 0;
        max-width: 100%;
    }

    body.device-desktop #hc-attendance-section .form-control,
    body.device-desktop #hc-leave-section .form-control,
    body.device-desktop #hc-attendance-section input[type="date"] {
        max-width: 100%;
        min-width: 0;
    }

    [data-theme="light"] body.device-desktop #hc-waktu-lead {
        background: var(--dv2-card) !important;
        color: var(--dv2-ink);
    }

    [data-theme="dark"] body.device-desktop #hc-waktu-lead,
    [data-theme="dark"] body.device-desktop #hc-waktu-lead .hc-waktu-person,
    [data-theme="dark"] body.device-desktop #hc-waktu-lead .hc-desktop-action {
        background: var(--bg-card) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #hc-waktu-lead .hc-waktu-sentence,
    [data-theme="dark"] body.device-desktop #hc-waktu-lead .hc-desktop-action {
        color: var(--text-primary) !important;
    }

    [data-theme="dark"] body.device-desktop #hc-waktu-lead .hc-desktop-note,
    [data-theme="dark"] body.device-desktop #hc-waktu-lead .hc-desktop-kicker {
        color: var(--text-secondary);
    }

    /* HC Struktur. Mobile 390 keeps org-chart.css, including drag, fit, and expand. */
    body.device-desktop #hc-employees-section > .section-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    body.device-desktop #hc-employees-section > .section-header h4,
    body.device-desktop #hc-emp-org-structure-subsection .org-preview-header h4,
    body.device-desktop #hc-emp-positions-manage-subsection .hc-entity-page-header h5,
    body.device-desktop #hc-emp-departments-subsection .hc-entity-page-header h5 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 800;
        line-height: 1.3;
        color: var(--dv2-ink);
    }

    body.device-desktop #main-app #hc-employees-sub-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        overflow: visible !important;
        max-width: 100%;
        height: auto !important;
        gap: 8px;
    }

    body.device-desktop #main-app #hc-employees-sub-nav .sub-nav-btn-secondary {
        flex: 0 1 auto !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        height: auto !important;
        min-height: 36px;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-stat.is-zero,
    body.device-desktop #hc-emp-org-structure-subsection .org-dept-count.is-zero,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-count.is-zero,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-meta.is-zero,
    body.device-desktop #hc-emp-org-structure-subsection .org-branch-section h4 span.is-zero {
        display: none !important;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-preview-card,
    body.device-desktop #hc-emp-positions-manage-subsection .hc-entity-page-header,
    body.device-desktop #hc-emp-departments-subsection .hc-entity-page-header,
    body.device-desktop #hc-emp-positions-manage-subsection .position-table-wrapper,
    body.device-desktop #hc-emp-departments-subsection .table-wrapper {
        border: 1px solid var(--dv2-line) !important;
        border-radius: var(--dv2-radius) !important;
        box-shadow: var(--dv2-shadow) !important;
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-preview-header,
    body.device-desktop #hc-emp-positions-manage-subsection .hc-entity-page-header,
    body.device-desktop #hc-emp-departments-subsection .hc-entity-page-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-preview-header {
        margin-bottom: 12px;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-mode-toggle {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-left: auto;
        max-width: 100%;
        padding: 4px;
        border: 1px solid var(--dv2-line);
        border-radius: 12px;
        background: var(--dv2-paper);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-mode-toggle .view-toggle-btn {
        height: auto;
        min-height: 36px;
        max-width: 100%;
        white-space: nowrap;
        border-radius: 8px;
        color: var(--dv2-muted);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-mode-toggle .view-toggle-btn.active {
        background: var(--dv2-card);
        color: var(--dv2-ink);
        box-shadow: var(--dv2-shadow);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-stats-bar {
        gap: 8px;
        margin: 0 0 12px;
        padding: 0;
        background: transparent;
        border-radius: 0;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-stat {
        padding: 6px 10px;
        border: 1px solid var(--dv2-line);
        border-radius: 999px;
        background: var(--dv2-paper);
        color: var(--dv2-muted);
        font-size: 13px;
        font-weight: 650;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-stat b {
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-toolbar,
    body.device-desktop #hc-emp-org-structure-subsection .org-toolbar-left,
    body.device-desktop #hc-emp-org-structure-subsection .org-toolbar-right {
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 0;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-search-box {
        flex: 1 1 180px;
        min-width: 0;
        max-width: 100%;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-search-box input,
    body.device-desktop #hc-emp-org-structure-subsection .org-search-box input:focus {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-search-clear[hidden] {
        display: none !important;
    }

    body.device-desktop #hc-emp-org-structure-subsection #org-dept-filter {
        flex: 1 1 160px;
        min-width: 0;
        max-width: 100%;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-dept-card,
    body.device-desktop #hc-emp-org-structure-subsection .org-tree-pane,
    body.device-desktop #hc-emp-org-structure-subsection .org-branch-panel,
    body.device-desktop #hc-emp-org-structure-subsection .org-drawer-section {
        border: 1px solid var(--dv2-line);
        border-radius: 12px;
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-tree-pane,
    body.device-desktop #hc-emp-org-structure-subsection .org-branch-panel {
        border-radius: var(--dv2-radius);
        min-width: 0;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-split {
        grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
        min-height: 420px;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-pane-header {
        flex-wrap: wrap;
        min-width: 0;
        background: transparent;
        border-bottom-color: var(--dv2-line);
        color: var(--dv2-ink);
        font-size: 13px;
        font-weight: 800;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-pane-hint,
    body.device-desktop #hc-emp-org-structure-subsection .org-empty-state,
    body.device-desktop #hc-emp-org-structure-subsection .org-empty-state p,
    body.device-desktop #hc-emp-org-structure-subsection .org-branch-empty,
    body.device-desktop #hc-emp-org-structure-subsection .org-branch-empty p,
    body.device-desktop #hc-emp-org-structure-subsection .org-branch-empty-reports {
        color: var(--dv2-muted);
        opacity: 1;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-empty-state p,
    body.device-desktop #hc-emp-org-structure-subsection .org-branch-empty p,
    body.device-desktop #hc-emp-org-structure-subsection .org-branch-empty-reports {
        margin: 0;
        max-width: 42ch;
        font-size: 14px;
        line-height: 1.45;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-dept-card {
        min-width: 0;
        max-width: 100%;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-dept-card-top strong,
    body.device-desktop #hc-emp-org-structure-subsection .org-tree-name,
    body.device-desktop #hc-emp-org-structure-subsection .org-branch-hero-copy h3 {
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-drawer-section {
        margin-bottom: 12px;
        padding: 12px;
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-chart {
        background: var(--bg-surface-1);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-card,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-card.is-person,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-card.is-root,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-toggle,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-zoom {
        background: var(--bg-card);
        border-color: var(--dv2-line);
        color: var(--text-primary);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-name,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-toggle,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-zoom button {
        color: var(--text-primary);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-meta,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-role,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-dept,
    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-zoom-pct {
        color: var(--text-secondary);
    }

    body.device-desktop #hc-emp-org-structure-subsection .org-pohon-count {
        background: var(--dv2-info-soft);
        color: var(--dv2-info);
    }

    body.device-desktop #hc-emp-org-structure-subsection[data-org-mode="pohon"] .org-preview-card {
        max-height: none;
    }

    body.device-desktop #hc-emp-org-structure-subsection[data-org-mode="pohon"] .org-split {
        height: clamp(320px, calc(100dvh - 280px), 640px);
        min-height: 320px;
        max-height: none;
    }

    body.device-desktop #hc-emp-org-structure-subsection[data-org-mode="pohon"] .org-branch-close {
        background: var(--bg-surface-1);
        color: var(--text-primary);
    }

    body.device-desktop #hc-emp-positions-manage-subsection .position-table-wrapper,
    body.device-desktop #hc-emp-departments-subsection .table-wrapper {
        max-width: 100%;
        overflow: auto;
    }

    body.device-desktop #hc-emp-positions-manage-subsection .hc-entity-page-header .btn-primary,
    body.device-desktop #hc-emp-departments-subsection .hc-entity-page-header .btn-primary {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
    }

    [data-theme="light"] body.device-desktop #hc-emp-org-structure-subsection .org-preview-card,
    [data-theme="light"] body.device-desktop #hc-emp-positions-manage-subsection .hc-entity-page-header,
    [data-theme="light"] body.device-desktop #hc-emp-departments-subsection .hc-entity-page-header,
    [data-theme="light"] body.device-desktop #hc-emp-positions-manage-subsection .position-table-wrapper,
    [data-theme="light"] body.device-desktop #hc-emp-departments-subsection .table-wrapper,
    [data-theme="light"] body.device-desktop #hc-emp-org-structure-subsection .org-tree-pane,
    [data-theme="light"] body.device-desktop #hc-emp-org-structure-subsection .org-branch-panel,
    [data-theme="light"] body.device-desktop #hc-emp-org-structure-subsection .org-dept-card {
        background: var(--dv2-card) !important;
        color: var(--dv2-ink);
    }

    [data-theme="dark"] body.device-desktop #hc-employees-section > .section-header h4,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-preview-header h4,
    [data-theme="dark"] body.device-desktop #hc-emp-positions-manage-subsection .hc-entity-page-header h5,
    [data-theme="dark"] body.device-desktop #hc-emp-departments-subsection .hc-entity-page-header h5,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pane-header,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-stat b,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-tree-name,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-branch-hero-copy h3,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-dept-card-top strong,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pohon-name,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-mode-toggle .view-toggle-btn.active {
        color: var(--text-primary) !important;
    }

    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-preview-card,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-tree-pane,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-branch-panel,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-dept-card,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-drawer-section,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-stat,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-mode-toggle,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pohon-card,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pohon-card.is-person,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pohon-card.is-root,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pohon-toggle,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pohon-zoom,
    [data-theme="dark"] body.device-desktop #hc-emp-positions-manage-subsection .hc-entity-page-header,
    [data-theme="dark"] body.device-desktop #hc-emp-departments-subsection .hc-entity-page-header,
    [data-theme="dark"] body.device-desktop #hc-emp-positions-manage-subsection .position-table-wrapper,
    [data-theme="dark"] body.device-desktop #hc-emp-departments-subsection .table-wrapper {
        background: var(--bg-card) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-mode-toggle .view-toggle-btn.active {
        background: var(--bg-surface-3) !important;
        color: var(--text-primary) !important;
    }

    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-dept-badge.is-head {
        background: var(--dv2-info-soft);
        color: var(--dv2-info);
    }

    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pane-hint,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-stat,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-empty-state,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-empty-state p,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-branch-empty,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-branch-empty p,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-branch-empty-reports,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pohon-meta,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-mode-toggle .view-toggle-btn {
        color: var(--text-secondary);
    }

    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-pohon-chart {
        background: var(--bg-surface-1);
    }

    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection .org-branch-close,
    [data-theme="dark"] body.device-desktop #hc-emp-org-structure-subsection[data-org-mode="pohon"] .org-branch-close {
        background: var(--bg-surface-1);
        color: var(--text-primary);
    }

    /* Lowongan + Proyek. Mobile 390 keeps the create form, the old clocks, and list order. */
    body.device-desktop #hc-recruitment-section > .section-header,
    body.device-desktop #project-workbench .project-toolbar-kicker {
        display: none;
    }

    /* Keep the workbench name for assistive tech. The header already shows Proyek. */
    body.device-desktop #project-workbench .project-toolbar-main {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body.device-desktop #lowongan-desktop-lead,
    body.device-desktop #proyek-desktop-lead {
        margin: 0 0 12px;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.4;
        color: var(--dv2-ink);
    }

    body.device-desktop #lowongan-desktop-lead[hidden],
    body.device-desktop #proyek-desktop-lead[hidden] {
        display: none !important;
    }

    body.device-desktop #lowongan-create-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        white-space: normal;
    }

    body.device-desktop #hc-recruitment-section .recruitment-job-workspace {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    body.device-desktop #hc-recruitment-section .recruitment-workspace-main {
        order: 1;
        display: grid;
        grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.2fr);
        gap: 16px;
        min-width: 0;
    }

    body.device-desktop #hc-recruitment-section .recruitment-create-panel {
        order: 2;
    }

    body.device-desktop #hc-recruitment-section .recruitment-create-panel:not(.is-open) {
        display: none;
    }

    body.device-desktop #talent-sub-nav,
    body.device-desktop #hc-recruitment-section .section-toolbar,
    body.device-desktop #hc-recruitment-section .applicant-filter-controls,
    body.device-desktop #hc-recruitment-section .flex-row-between,
    body.device-desktop #project-toolbar,
    body.device-desktop #project-toolbar-actions,
    body.device-desktop #project-detail-tabs,
    body.device-desktop #project-detail-actions,
    body.device-desktop #user-jobs-section .user-jobs-location-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        min-width: 0;
    }

    body.device-desktop #main-app #project-detail-tabs,
    body.device-desktop #main-app #talent-sub-nav {
        flex-wrap: wrap !important;
        overflow: visible !important;
        height: auto;
    }

    body.device-desktop #talent-sub-nav .sub-nav-btn-secondary,
    body.device-desktop .project-detail-tab {
        flex: 0 1 auto;
        max-width: 100%;
        min-width: max-content;
        height: auto;
        min-height: 36px;
        overflow: visible;
        white-space: nowrap;
    }

    body.device-desktop #hc-recruitment-section .recruitment-panel,
    body.device-desktop #hc-recruitment-section .job-card,
    body.device-desktop #hc-recruitment-section .form-section-card,
    body.device-desktop #project-workbench .project-toolbar,
    body.device-desktop #project-workbench .project-list,
    body.device-desktop #project-workbench .project-detail-panel,
    body.device-desktop #project-workbench .project-list-card,
    body.device-desktop #project-workbench .project-summary-item,
    body.device-desktop #project-panel-locations .manager-work-location-row,
    body.device-desktop #project-panel-locations .manager-work-location-option,
    body.device-desktop #user-jobs-section,
    body.device-desktop #user-applications-section,
    body.device-desktop #user-job-postings-grid .job-card,
    body.device-desktop #my-applications-list .job-card {
        border: 1px solid var(--dv2-line);
        border-radius: var(--dv2-radius);
        box-shadow: var(--dv2-shadow);
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    body.device-desktop #hc-recruitment-section .job-card.is-selected,
    body.device-desktop #project-workbench .project-list-card.active {
        border-color: var(--dv2-brand);
        box-shadow: var(--dv2-shadow);
    }

    body.device-desktop #project-list-count.is-zero,
    body.device-desktop .project-list-card-foot .is-zero,
    body.device-desktop #company-job-count-badge.is-zero,
    body.device-desktop #manager-project-team-count-badge.is-zero {
        display: none !important;
    }

    body.device-desktop #project-detail-empty {
        display: block;
        min-height: 0;
        padding: 16px;
        text-align: left;
    }

    body.device-desktop #project-detail-empty .ph {
        display: none;
    }

    body.device-desktop #hc-recruitment-section .recruitment-applicants-panel .empty-state {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
    }

    body.device-desktop #hc-recruitment-section .recruitment-applicants-panel .empty-state i,
    body.device-desktop #hc-recruitment-section .recruitment-applicants-panel .empty-state-desc,
    body.device-desktop #my-applications-empty i {
        display: none;
    }

    body.device-desktop #hc-recruitment-section .recruitment-applicants-panel .empty-state-title,
    body.device-desktop #hc-recruitment-section .dv2-empty,
    body.device-desktop #my-applications-empty {
        margin: 0;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.45;
        color: var(--dv2-muted);
    }

    body.device-desktop #hc-recruitment-section .job-card-actions,
    body.device-desktop #user-jobs-section .job-card-actions {
        flex-wrap: wrap;
        max-width: 100%;
    }

    body.device-desktop #project-workbench .project-search-control,
    body.device-desktop #project-workbench-status-filter,
    body.device-desktop #hc-recruitment-section .applicant-filter-controls select,
    body.device-desktop #user-jobs-section .user-jobs-filter-grid > input,
    body.device-desktop #user-jobs-section .user-jobs-filter-grid > select,
    body.device-desktop #my-applications-status-filter {
        flex: 1 1 10rem;
        min-width: min(100%, 10rem);
        max-width: 100%;
        width: auto;
    }

    body.device-desktop #hc-recruitment-section .recruitment-table-scroll {
        max-width: 100%;
        overflow-x: auto;
    }

    body.device-desktop #hc-recruitment-section .recruitment-table-scroll .data-table {
        min-width: 0;
        width: 100%;
    }

    body.device-desktop #hc-recruitment-section .recruitment-table-scroll .data-table th,
    body.device-desktop #hc-recruitment-section .recruitment-table-scroll .data-table td {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.device-desktop #project-workbench .project-list-card {
        height: auto;
        overflow: visible;
    }

    body.device-desktop #project-workbench .project-list-card-foot {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.device-desktop #project-workbench .project-list-card-foot span,
    body.device-desktop #project-workbench .project-list-card-foot span:first-child,
    body.device-desktop #project-workbench .project-list-card-foot span:last-child {
        width: auto;
        max-width: 100%;
        grid-column: auto;
        justify-content: flex-start;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    body.device-desktop #project-workbench .project-list-card-top .badge {
        max-width: none;
    }

    body.device-desktop #project-workbench .project-summary-strip,
    body.device-desktop #project-panel-locations .user-dashboard-card {
        border-radius: var(--dv2-radius);
        border: 1px solid var(--dv2-line);
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    [data-theme="light"] body.device-desktop #hc-recruitment-section .recruitment-panel,
    [data-theme="light"] body.device-desktop #hc-recruitment-section .job-card,
    [data-theme="light"] body.device-desktop #project-workbench .project-list,
    [data-theme="light"] body.device-desktop #project-workbench .project-detail-panel,
    [data-theme="light"] body.device-desktop #project-workbench .project-list-card,
    [data-theme="light"] body.device-desktop #user-jobs-section,
    [data-theme="light"] body.device-desktop #user-applications-section,
    [data-theme="light"] body.device-desktop #user-job-postings-grid .job-card,
    [data-theme="light"] body.device-desktop #my-applications-list .job-card {
        background: var(--dv2-card) !important;
        color: var(--dv2-ink);
    }

    [data-theme="dark"] body.device-desktop #hc-recruitment-section .recruitment-panel,
    [data-theme="dark"] body.device-desktop #hc-recruitment-section .job-card,
    [data-theme="dark"] body.device-desktop #hc-recruitment-section .form-section-card,
    [data-theme="dark"] body.device-desktop #hc-recruitment-section .dv2-empty,
    [data-theme="dark"] body.device-desktop #lowongan-desktop-lead,
    [data-theme="dark"] body.device-desktop #project-workbench .project-toolbar,
    [data-theme="dark"] body.device-desktop #project-workbench .project-list,
    [data-theme="dark"] body.device-desktop #project-workbench .project-detail-panel,
    [data-theme="dark"] body.device-desktop #project-workbench .project-list-card,
    [data-theme="dark"] body.device-desktop #project-workbench .project-summary-item,
    [data-theme="dark"] body.device-desktop #project-workbench .project-summary-strip,
    [data-theme="dark"] body.device-desktop #project-panel-locations .manager-work-location-row,
    [data-theme="dark"] body.device-desktop #project-panel-locations .manager-work-location-option,
    [data-theme="dark"] body.device-desktop #project-panel-locations .user-dashboard-card,
    [data-theme="dark"] body.device-desktop #proyek-desktop-lead,
    [data-theme="dark"] body.device-desktop #user-jobs-section,
    [data-theme="dark"] body.device-desktop #user-applications-section,
    [data-theme="dark"] body.device-desktop #user-job-postings-grid .job-card,
    [data-theme="dark"] body.device-desktop #my-applications-list .job-card,
    [data-theme="dark"] body.device-desktop #my-applications-empty {
        background: var(--bg-card) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #hc-recruitment-section .job-card-title,
    [data-theme="dark"] body.device-desktop #project-workbench .project-list-card-top strong,
    [data-theme="dark"] body.device-desktop #project-detail-title,
    [data-theme="dark"] body.device-desktop #user-jobs-section .job-card-title,
    [data-theme="dark"] body.device-desktop #lowongan-desktop-lead,
    [data-theme="dark"] body.device-desktop #proyek-desktop-lead {
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #hc-recruitment-section .dv2-empty,
    [data-theme="dark"] body.device-desktop #project-workbench .helper-text,
    [data-theme="dark"] body.device-desktop #project-workbench .project-list-card-meta,
    [data-theme="dark"] body.device-desktop #my-applications-empty {
        color: var(--text-secondary);
    }

    /* Perusahaan overview + Pengaturan. Mobile 390 keeps the old tiles and form. */
    body.device-desktop #company-overview .director-section-head {
        align-items: flex-start;
        flex-wrap: wrap;
        min-width: 0;
    }

    body.device-desktop #company-overview .director-section-head h2,
    body.device-desktop #company-overview .director-risk-card strong,
    body.device-desktop #company-overview .director-panel-head h3,
    body.device-desktop #company-overview .company-details h4 {
        color: var(--dv2-ink);
        overflow-wrap: anywhere;
    }

    body.device-desktop #company-overview .director-section-head .eyebrow {
        color: var(--dv2-muted);
    }

    body.device-desktop #company-overview .director-section-head p,
    body.device-desktop #company-overview .director-risk-card p,
    body.device-desktop #company-overview .director-row small {
        color: var(--dv2-muted) !important;
    }

    body.device-desktop #company-overview .director-risk-card,
    body.device-desktop #company-overview .director-panel,
    body.device-desktop #company-overview .director-row,
    body.device-desktop #company-overview .company-info-card,
    body.device-desktop #company-overview .company-cockpit-panel,
    body.device-desktop #company-overview .stat-card,
    body.device-desktop #company-overview .onboarding-card,
    body.device-desktop #company-settings-section .settings-card {
        background: var(--dv2-card) !important;
        border: 1px solid var(--dv2-line) !important;
        border-radius: var(--dv2-radius) !important;
        box-shadow: var(--dv2-shadow) !important;
        color: var(--dv2-ink);
        min-width: 0;
        max-width: 100%;
    }

    body.device-desktop #company-overview .director-risk-strip {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    body.device-desktop #company-overview .director-risk-card.is-clear,
    body.device-desktop #company-overview .stat-card.is-zero,
    body.device-desktop #company-overview .badge.is-zero,
    body.device-desktop #company-tab .count-badge.is-zero,
    body.device-desktop #company-settings-section .badge.is-zero,
    body.device-desktop #onboarding-progress-text.is-zero {
        display: none !important;
    }

    body.device-desktop #director-risk-empty {
        margin: 0;
    }

    body.device-desktop #director-risk-empty[hidden] {
        display: none !important;
    }

    body.device-desktop #company-overview .director-actions,
    body.device-desktop #company-overview .company-header,
    body.device-desktop #company-overview .company-contacts,
    body.device-desktop #main-app #company-settings-section .company-settings-jump,
    body.device-desktop #company-settings-section .logo-upload-wrapper,
    body.device-desktop #company-settings-section .color-picker-row,
    body.device-desktop #company-settings-section .danger-action,
    body.device-desktop #company-settings-section .settings-card-header,
    body.device-desktop #company-settings-section .competency-actions {
        flex-wrap: wrap !important;
        max-width: 100%;
        min-width: 0;
        overflow: visible !important;
    }

    body.device-desktop #company-settings-section .company-settings-jump a.btn-secondary,
    body.device-desktop #company-settings-section .form-control,
    body.device-desktop #company-settings-section input,
    body.device-desktop #company-settings-section select,
    body.device-desktop #company-settings-section .danger-info {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: normal;
    }

    body.device-desktop #company-settings-section .form-row {
        min-width: 0;
        max-width: 100%;
    }

    [data-theme="dark"] body.device-desktop #company-overview .director-risk-card,
    [data-theme="dark"] body.device-desktop #company-overview .director-panel,
    [data-theme="dark"] body.device-desktop #company-overview .director-row,
    [data-theme="dark"] body.device-desktop #company-overview .company-info-card,
    [data-theme="dark"] body.device-desktop #company-overview .company-cockpit-panel,
    [data-theme="dark"] body.device-desktop #company-overview .stat-card,
    [data-theme="dark"] body.device-desktop #company-overview .onboarding-card,
    [data-theme="dark"] body.device-desktop #company-settings-section .settings-card,
    [data-theme="dark"] body.device-desktop #director-risk-empty {
        background: var(--bg-card) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #company-overview .director-section-head h2,
    [data-theme="dark"] body.device-desktop #company-overview .director-risk-card strong,
    [data-theme="dark"] body.device-desktop #company-overview .director-panel-head h3,
    [data-theme="dark"] body.device-desktop #company-overview .director-row strong,
    [data-theme="dark"] body.device-desktop #company-overview .company-details h4,
    [data-theme="dark"] body.device-desktop #company-settings-section .settings-card-header h5,
    [data-theme="dark"] body.device-desktop #company-overview .stat-value {
        color: var(--text-primary) !important;
    }

    [data-theme="dark"] body.device-desktop #company-overview .director-section-head p,
    [data-theme="dark"] body.device-desktop #company-overview .director-section-head .eyebrow,
    [data-theme="dark"] body.device-desktop #company-overview .director-risk-card p,
    [data-theme="dark"] body.device-desktop #company-overview .director-row small,
    [data-theme="dark"] body.device-desktop #company-overview .helper-text,
    [data-theme="dark"] body.device-desktop #company-settings-section .helper-text,
    [data-theme="dark"] body.device-desktop #company-settings-section .section-subtitle,
    [data-theme="dark"] body.device-desktop #director-risk-empty {
        color: var(--text-secondary) !important;
    }

    body.device-desktop #assessor-team-section .org-preview-card {
        border: 1px solid var(--dv2-line) !important;
        border-radius: var(--dv2-radius) !important;
        box-shadow: var(--dv2-shadow) !important;
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    body.device-desktop #assessor-team-section .org-header-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    body.device-desktop #assessor-team-section .org-header-actions h4 {
        margin: 0;
        min-width: 0;
        font-size: 1.125rem;
        font-weight: 800;
        line-height: 1.3;
        color: var(--dv2-ink);
    }

    body.device-desktop #assessor-team-section .org-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        max-width: 100%;
        min-width: 0;
    }

    body.device-desktop #assessor-team-section .search-box {
        flex: 1 1 180px;
        min-width: 0;
        max-width: 100%;
    }

    body.device-desktop #assessor-team-section .search-box input,
    body.device-desktop #assessor-team-section .search-box input:focus {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.device-desktop #assessor-team-section .org-controls .btn-secondary {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: nowrap;
    }

    body.device-desktop #assessor-team-section .org-preview-card,
    body.device-desktop #hc-emp-org-structure-subsection .org-preview-card {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    body.device-desktop #assessor-team-section .org-editor,
    body.device-desktop #hc-emp-org-structure-subsection .org-editor,
    body.device-desktop #assessor-team-section .org-canvas,
    body.device-desktop #hc-emp-org-structure-subsection .org-canvas,
    body.device-desktop #hc-emp-org-structure-subsection #hc-org-canvas {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    body.device-desktop #assessor-team-section .org-canvas,
    body.device-desktop #hc-emp-org-structure-subsection .org-canvas,
    body.device-desktop #hc-emp-org-structure-subsection #hc-org-canvas {
        min-width: 0;
        max-width: 100%;
        height: min(640px, calc(100dvh - 240px));
        min-height: 420px;
        position: relative;
        border: 1px solid var(--dv2-line);
        border-radius: 12px;
        background: var(--dv2-paper);
    }

    body.device-desktop #assessor-team-section #user-org-tree,
    body.device-desktop #hc-emp-org-structure-subsection #hc-org-tree {
        width: 100%;
        height: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    body.device-desktop #assessor-team-section #user-org-tree svg.org-chart,
    body.device-desktop #hc-emp-org-structure-subsection #hc-org-tree svg.org-chart {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
    }

    [data-theme="light"] body.device-desktop #assessor-team-section .org-preview-card,
    [data-theme="light"] body.device-desktop #assessor-team-section .org-canvas {
        background: var(--dv2-card);
        color: var(--dv2-ink);
    }

    [data-theme="light"] body.device-desktop #assessor-team-section .org-canvas {
        background: var(--dv2-paper);
    }

    [data-theme="dark"] body.device-desktop #assessor-team-section .org-preview-card,
    [data-theme="dark"] body.device-desktop #assessor-team-section .org-canvas {
        background: var(--bg-card) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: var(--text-primary);
    }

    [data-theme="dark"] body.device-desktop #assessor-team-section .org-header-actions h4,
    [data-theme="dark"] body.device-desktop #assessor-team-section .org-controls .btn-secondary {
        color: var(--text-primary) !important;
    }

    @media (max-width: 1100px) {
        body.device-desktop #main-app.dashboard-container:has(#user-jobs-section-wrapper.active),
        body.device-desktop #main-app.dashboard-container:has(#user-applications-section-wrapper.active) {
            grid-template-rows: auto minmax(0, 1fr) !important;
        }

        body.device-desktop #main-app.dashboard-container:has(#user-jobs-section-wrapper.active) .app-header,
        body.device-desktop #main-app.dashboard-container:has(#user-applications-section-wrapper.active) .app-header {
            height: auto !important;
            min-height: 64px;
            flex-wrap: wrap !important;
            align-items: center !important;
            row-gap: 4px !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }

        body.device-desktop #main-app.dashboard-container:has(#user-jobs-section-wrapper.active) .sub-nav-container,
        body.device-desktop #main-app.dashboard-container:has(#user-applications-section-wrapper.active) .sub-nav-container {
            flex: 1 0 100% !important;
            order: 4;
            height: auto !important;
            min-height: 36px;
            overflow: visible !important;
        }

        body.device-desktop #main-app.dashboard-container:has(#user-jobs-section-wrapper.active) #user-sub-nav,
        body.device-desktop #main-app.dashboard-container:has(#user-applications-section-wrapper.active) #user-sub-nav {
            display: flex !important;
            flex-wrap: wrap !important;
            width: 100% !important;
            max-width: 100%;
            height: auto !important;
            overflow: visible !important;
            gap: 6px !important;
        }

        body.device-desktop #hc-recruitment-section .recruitment-workspace-main,
        body.device-desktop #project-workbench .project-workbench-layout,
        body.device-desktop #user-jobs-section .user-jobs-filter-grid {
            grid-template-columns: 1fr;
        }

        body.device-desktop #project-workbench .project-summary-grid {
            grid-template-columns: 1fr 1fr;
        }

        body.device-desktop #project-workbench-add-btn,
        body.device-desktop #lowongan-create-toggle {
            max-width: 100%;
        }

        body.device-desktop #main-app.dashboard-container:has(#company-sub-nav:not([style*="display: none"]):not([style*="display:none"])) {
            grid-template-rows: auto minmax(0, 1fr) !important;
        }

        body.device-desktop #main-app .app-header:has(#company-sub-nav:not([style*="display: none"]):not([style*="display:none"])) {
            height: auto !important;
            min-height: 64px;
            flex-wrap: wrap !important;
            align-items: center !important;
            row-gap: 4px !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }

        body.device-desktop #main-app .app-header:has(#company-sub-nav:not([style*="display: none"]):not([style*="display:none"])) .sub-nav-container {
            flex: 1 0 100% !important;
            order: 4;
            height: auto !important;
            min-height: 36px;
            overflow: visible !important;
        }

        body.device-desktop #main-app #company-sub-nav:not([style*="display: none"]):not([style*="display:none"]) {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            width: 100% !important;
            max-width: 100%;
            height: auto !important;
            overflow: visible !important;
            gap: 6px !important;
        }

        body.device-desktop #main-app #company-sub-nav .sub-nav-btn {
            flex: 0 0 auto !important;
            max-width: none !important;
            min-width: max-content !important;
            overflow: visible !important;
            white-space: nowrap !important;
        }

        body.device-desktop #company-overview .director-cockpit-layout,
        body.device-desktop #company-overview .director-risk-strip,
        body.device-desktop #company-overview .stats-grid,
        body.device-desktop #company-overview .company-cockpit-grid {
            grid-template-columns: 1fr;
        }

        body.device-desktop #company-overview .director-row {
            grid-template-columns: 38px minmax(0, 1fr);
        }

        body.device-desktop #company-overview .director-row > button,
        body.device-desktop #company-overview .director-row > .btn-primary,
        body.device-desktop #company-overview .director-row > .btn-secondary {
            grid-column: 1 / -1;
            justify-self: start;
            max-width: 100%;
        }

        body.device-desktop #company-settings-section .form-row {
            grid-template-columns: minmax(0, 1fr) !important;
        }

        body.device-desktop #company-settings-section .form-row label {
            text-align: left;
        }

        body.device-desktop #company-settings-section .form-control,
        body.device-desktop #company-settings-section input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
        body.device-desktop #company-settings-section select,
        body.device-desktop #company-settings-section textarea {
            width: 100% !important;
            max-width: 100% !important;
        }

        body.device-desktop #main-app.dashboard-container:has(#user-sub-nav:not([style*="display: none"]):not([style*="display:none"])),
        body.device-desktop #main-app.dashboard-container:has(#super-sub-nav:not([style*="display: none"]):not([style*="display:none"])) {
            grid-template-rows: auto minmax(0, 1fr) !important;
        }

        body.device-desktop #main-app .app-header:has(#user-sub-nav:not([style*="display: none"]):not([style*="display:none"])),
        body.device-desktop #main-app .app-header:has(#super-sub-nav:not([style*="display: none"]):not([style*="display:none"])) {
            height: auto !important;
            min-height: 64px;
            flex-wrap: wrap !important;
            align-items: center !important;
            row-gap: 4px !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }

        body.device-desktop #main-app .app-header:has(#user-sub-nav:not([style*="display: none"]):not([style*="display:none"])) .header-left,
        body.device-desktop #main-app .app-header:has(#super-sub-nav:not([style*="display: none"]):not([style*="display:none"])) .header-left {
            flex: 1 0 100% !important;
            max-width: 100%;
        }

        body.device-desktop #main-app .app-header:has(#desktop-today-chip:not([hidden])) .desktop-page-title {
            display: flex !important;
            align-items: center;
            gap: 8px;
        }

        body.device-desktop #main-app .app-header:has(#user-sub-nav:not([style*="display: none"]):not([style*="display:none"])) .sub-nav-container,
        body.device-desktop #main-app .app-header:has(#super-sub-nav:not([style*="display: none"]):not([style*="display:none"])) .sub-nav-container {
            flex: 1 0 100% !important;
            order: 4;
            height: auto !important;
            min-height: 36px;
            overflow: visible !important;
        }

        body.device-desktop #main-app #user-sub-nav:not([style*="display: none"]):not([style*="display:none"]),
        body.device-desktop #main-app #super-sub-nav:not([style*="display: none"]):not([style*="display:none"]) {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            width: 100% !important;
            max-width: 100%;
            height: auto !important;
            overflow: visible !important;
            gap: 6px !important;
        }

        body.device-desktop #main-app #user-sub-nav .sub-nav-btn,
        body.device-desktop #main-app #super-sub-nav .sub-nav-btn {
            flex: 0 0 auto !important;
            max-width: none !important;
            min-width: max-content !important;
            overflow: visible !important;
            text-overflow: clip !important;
            white-space: nowrap !important;
        }
    }
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-row,
body.device-desktop #assessor-nilai-tim-section .nilai-tim-table-wrap,
body.device-desktop #assessor-nilai-tim-section .nilai-tim-card {
    border-radius: var(--dv2-radius);
    border: 1px solid var(--dv2-line);
    background: var(--dv2-card);
    box-shadow: var(--dv2-shadow);
    color: var(--dv2-ink);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-table thead th,
body.device-desktop #assessor-nilai-tim-section .nilai-tim-group-label {
    background: var(--dv2-paper);
    color: var(--dv2-muted);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-data-row:hover,
body.device-desktop #assessor-nilai-tim-section .nilai-tim-data-row.is-open,
body.device-desktop #assessor-nilai-tim-section .nilai-tim-card.is-open {
    background: var(--dv2-paper);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-person .nilai-tim-jabatan,
body.device-desktop #assessor-nilai-tim-section .nilai-tim-card-meta {
    color: var(--dv2-muted);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-final-success {
    background: var(--dv2-ok-soft);
    color: var(--dv2-ok);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-final-primary {
    background: var(--dv2-info-soft);
    color: var(--dv2-info);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-final-warning {
    background: var(--dv2-warn-soft);
    color: var(--dv2-warn);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-final-danger {
    background: var(--dv2-danger-soft);
    color: var(--dv2-danger);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-empty {
    border: 1px dashed var(--dv2-line);
    border-radius: 12px;
    background: var(--dv2-card);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-compare-table {
    background: var(--dv2-card);
    color: var(--dv2-ink);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-rank-row,
body.device-desktop #assessor-nilai-tim-section .nilai-tim-compare-chart {
    color: var(--dv2-ink);
}

body.device-desktop #assessor-nilai-tim-section .nilai-tim-radar-axis,
body.device-desktop #assessor-nilai-tim-section .nilai-tim-radar-tip,
body.device-desktop #assessor-nilai-tim-section .nilai-tim-radar-scale {
    fill: var(--dv2-ink);
}