/**
 * shell-density (Wave D5b — load AFTER styles.css)
 */

/* --- styles.css L8032-L9900 --- */
/* LEGACY: Corrective shell/sidebar theme (see Layout density v1 at EOF for spacing). */
@media (min-width: 769px) {
    #main-app.dashboard-container {
        --bg-surface-1: #0f172a;
        --bg-surface-2: #111827;
        --bg-surface-3: #1e293b;
        --bg-muted: #182235;
        --bg-card: #111827;
        --bg-input: #0f172a;
        --bg-secondary: #1e293b;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --border-color: rgba(148, 163, 184, 0.24);
        --bg-hover: rgba(248, 250, 252, 0.14);
        --sidebar-bg: #08111f;
        --sidebar-text: #cbd5e1;
        --sidebar-text-active: #ffffff;
        --sidebar-accent: #e85d04;
        --sidebar-accent-rgb: 232, 93, 4;
        --sidebar-hover-bg: rgba(248, 250, 252, 0.14);
        --sidebar-section-label: #94a3b8;
        --sidebar-border: rgba(148, 163, 184, 0.18);
        --shell-header-bg: #0b1220;
        --shell-header-border: rgba(148, 163, 184, 0.22);
        --shell-header-text: #ffffff;
        --shell-header-muted: #cbd5e1;
        --shell-subnav-bg: rgba(15, 23, 42, 0.55);
        --shell-subnav-border: rgba(148, 163, 184, 0.18);
        --shell-subnav-hover-bg: rgba(248, 250, 252, 0.09);
        --shell-subnav-active-bg: rgba(232, 93, 4, 0.18);
        --shell-action-bg: rgba(15, 23, 42, 0.72);
        --shell-action-hover-bg: rgba(248, 250, 252, 0.1);
        --shell-action-border: rgba(148, 163, 184, 0.24);
        grid-template-columns: 260px 1fr !important;
        grid-template-rows: 64px 1fr !important;
        background-color: var(--bg-color) !important;
    }

    [data-theme="light"] #main-app.dashboard-container {
        --bg-surface-1: #f8fafc;
        --bg-surface-2: #ffffff;
        --bg-surface-3: #f1f5f9;
        --bg-muted: #e2e8f0;
        --bg-card: #ffffff;
        --bg-input: #ffffff;
        --bg-secondary: #e2e8f0;
        --text-primary: #0f172a;
        --text-secondary: #475569;
        --text-muted: #64748b;
        --border-color: #cbd5e1;
        --bg-hover: rgba(15, 23, 42, 0.04);
        --sidebar-bg: #ffffff;
        --sidebar-text: #475569;
        --sidebar-text-active: #0f172a;
        --sidebar-accent: #e85d04;
        --sidebar-accent-rgb: 232, 93, 4;
        --sidebar-hover-bg: rgba(15, 23, 42, 0.04);
        --sidebar-section-label: #64748b;
        --sidebar-border: #cbd5e1;
        --shell-header-bg: #0d3b66;
        --shell-header-border: rgba(8, 47, 73, 0.72);
        --shell-header-text: #ffffff;
        --shell-header-muted: #dbeafe;
        --shell-subnav-bg: rgba(255, 255, 255, 0.08);
        --shell-subnav-border: rgba(255, 255, 255, 0.18);
        --shell-subnav-hover-bg: rgba(255, 255, 255, 0.13);
        --shell-subnav-active-bg: rgba(232, 93, 4, 0.22);
        --shell-action-bg: rgba(255, 255, 255, 0.1);
        --shell-action-hover-bg: rgba(255, 255, 255, 0.16);
        --shell-action-border: rgba(255, 255, 255, 0.22);
    }

    #main-app .app-sidebar {
        min-width: 260px !important;
        padding: 0 !important;
        gap: 0 !important;
        background: var(--sidebar-bg) !important;
        border-right: 1px solid var(--sidebar-border) !important;
        color: var(--sidebar-text) !important;
    }

    #main-app .sidebar-header {
        padding: 14px 14px 12px !important;
        border-bottom: 1px solid var(--sidebar-border) !important;
    }

    #main-app .sidebar-brand {
        gap: 11px !important;
    }

    #main-app .sidebar-brand-info h2 {
        color: var(--sidebar-text-active) !important;
        font-size: 1.125rem !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
    }

    #main-app .version-badge {
        display: inline-flex !important;
        width: fit-content !important;
        margin-top: 5px !important;
        color: var(--text-muted) !important;
        background: rgba(var(--brand-color-rgb), 0.1) !important;
        border: 1px solid rgba(var(--brand-color-rgb), 0.18) !important;
        padding: 2px 7px !important;
        border-radius: 999px !important;
        font-size: 0.6875rem !important;
        line-height: 1.1 !important;
    }

    #main-app .sidebar-app-logo {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background: #0b1220 !important;
        padding: 5px !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    }

    #main-app .sidebar-app-logo-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    #main-app .sidebar-company-brand {
        margin: 10px 12px 8px !important;
        padding: 10px !important;
        border: 1px solid var(--sidebar-border) !important;
        border-radius: 8px !important;
        background: var(--sidebar-hover-bg) !important;
        gap: 11px !important;
        min-height: 66px !important;
    }

    #main-app .sidebar-company-logo {
        width: 42px !important;
        height: 42px !important;
        border-radius: 8px !important;
        background: var(--bg-surface-2) !important;
        padding: 5px !important;
        box-shadow: inset 0 0 0 1px var(--sidebar-border) !important;
    }

    #main-app .sidebar-company-logo-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 5px !important;
    }

    #main-app .sidebar-company-text {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    #main-app .sidebar-company-name {
        color: var(--sidebar-text-active) !important;
        font-size: 0.8125rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
    }

    #main-app .sidebar-company-text small {
        color: var(--text-muted) !important;
        opacity: 0.72;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #main-app .sidebar-nav {
        padding: 8px 12px !important;
        gap: 2px !important;
    }

    #main-app .sidebar-group {
        margin-bottom: 4px !important;
    }

    #main-app .sidebar-section-label {
        margin: 0 !important;
        padding: 16px 16px 6px !important;
        color: var(--sidebar-section-label) !important;
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
    }

    #main-app .app-sidebar button.sidebar-nav-item {
        min-height: unset !important;
        padding: 9px 16px !important;
        border-radius: 8px !important;
        color: var(--sidebar-text) !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        gap: 12px !important;
        background: transparent !important;
    }

    #main-app .app-sidebar button.sidebar-nav-item:hover {
        background: var(--sidebar-hover-bg) !important;
        color: var(--sidebar-text-active) !important;
    }

    #main-app .app-sidebar button.sidebar-nav-item.active {
        background: rgba(var(--sidebar-accent-rgb), 0.15) !important;
        color: var(--sidebar-accent) !important;
        font-weight: 600 !important;
    }

    #main-app .sidebar-nav-item.active i {
        color: var(--sidebar-accent) !important;
    }

    #main-app .sidebar-help {
        margin-top: 0 !important;
        padding: 8px 12px !important;
        border-top: 1px solid var(--sidebar-border) !important;
    }

    #main-app .sidebar-help-btn {
        min-height: unset !important;
        padding: 9px 16px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
    }

    #main-app .sidebar-footer {
        padding: 12px 16px !important;
        border-top: 1px solid var(--sidebar-border) !important;
        display: flex !important;
        gap: 12px !important;
    }

    #main-app .sidebar-user-info {
        min-height: 0 !important;
        padding: 6px 8px !important;
        background: transparent !important;
    }

    #main-app .sidebar-user-avatar {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
    }

    #main-app .app-header {
        height: 64px !important;
        padding: 0 24px !important;
        background: var(--shell-header-bg, var(--bg-surface-2)) !important;
        border-bottom: 1px solid var(--shell-header-border, var(--border-color)) !important;
        color: var(--shell-header-text, var(--text-primary)) !important;
        gap: 16px !important;
        box-shadow: none !important;
    }

    #main-app .header-left {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        gap: 0 !important;
    }

    #main-app .desktop-page-title {
        display: block !important;
        max-width: 100%;
    }

    #main-app .desktop-page-title h1 {
        font-size: 1.28rem !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        color: var(--shell-header-text, var(--text-primary)) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap;
    }

    #main-app .sub-nav-container {
        margin-left: 0 !important;
        height: 100% !important;
        padding-left: 6px !important;
        border-left: 0 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #main-app .sub-nav {
        height: 100% !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
        align-items: center !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    #main-app .sub-nav::-webkit-scrollbar {
        display: none !important;
    }

    #main-app .sub-nav-btn {
        position: relative !important;
        height: 36px !important;
        min-height: 0 !important;
        max-width: 260px !important;
        padding: 0 11px !important;
        border-radius: 8px !important;
        border: 0 !important;
        color: var(--shell-header-muted, var(--text-secondary)) !important;
        font-size: 0.8125rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #main-app .sub-nav-btn[style*="display: none"] {
        display: none !important;
    }

    #main-app .sub-nav-btn:hover {
        background: var(--shell-subnav-hover-bg, var(--bg-hover)) !important;
        color: var(--shell-header-text, var(--text-primary)) !important;
    }

    #main-app .sub-nav-btn::after {
        content: "" !important;
        position: absolute !important;
        right: 0 !important;
        bottom: 4px !important;
        left: 0 !important;
        height: 2px !important;
        border-radius: 999px 999px 0 0 !important;
        background: transparent !important;
    }

    #main-app .sub-nav-btn.active,
    #main-app .sub-nav-btn[aria-selected="true"] {
        color: var(--sidebar-accent) !important;
        background: var(--shell-subnav-active-bg, rgba(var(--sidebar-accent-rgb), 0.1)) !important;
        font-weight: 750 !important;
    }

    #main-app .sub-nav-btn.active::after,
    #main-app .sub-nav-btn[aria-selected="true"]::after {
        background: var(--sidebar-accent) !important;
    }

    #main-app .sub-nav-btn span:not(.sub-nav-count-badge) {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    #main-app .sub-nav-btn i {
        flex: 0 0 auto !important;
        color: inherit !important;
        font-size: 15px !important;
        line-height: 1 !important;
        opacity: 0.85 !important;
    }

    #main-app .sub-nav-btn.active i,
    #main-app .sub-nav-btn[aria-selected="true"] i {
        opacity: 1 !important;
    }

    #main-app .header-user {
        flex: 0 0 auto !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    #main-app .header-icon-btn,
    #main-app .notification-bell-btn,
    #main-app .profile-dropdown-trigger {
        border: 1px solid var(--shell-action-border, var(--shell-subnav-border, var(--border-color))) !important;
        border-radius: 8px !important;
        background: var(--shell-action-bg, var(--bg-surface-2)) !important;
        color: var(--shell-header-muted, var(--text-secondary)) !important;
        box-shadow: none !important;
    }

    #main-app .profile-dropdown-trigger {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 10px 0 3px !important;
        gap: 8px !important;
    }

    #main-app .header-user-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    #main-app .notification-bell-btn i,
    #main-app .header-icon-btn i,
    #main-app .profile-dropdown-trigger i,
    #main-app .profile-dropdown-trigger .user-name {
        color: inherit !important;
    }

    #main-app .header-icon-btn:hover,
    #main-app .notification-bell-btn:hover,
    #main-app .profile-dropdown-trigger:hover {
        background: var(--shell-action-hover-bg, var(--shell-subnav-hover-bg, var(--bg-hover))) !important;
        border-color: rgba(var(--sidebar-accent-rgb), 0.35) !important;
        color: var(--shell-header-text, var(--text-primary)) !important;
    }

    #main-app .sidebar-action-btn {
        border: 1px solid var(--sidebar-border) !important;
        background: transparent !important;
        color: var(--sidebar-text) !important;
    }

    #main-app .sidebar-action-btn:hover {
        background: var(--sidebar-hover-bg) !important;
        color: var(--sidebar-text-active) !important;
    }

    #main-app .app-container {
        /* Padding: see Layout density v1 §5 at EOF */
        background: var(--bg-color) !important;
    }

    #main-app #user-tab #user-overview-section {
        padding: var(--page-pad-y) var(--page-pad-x) var(--page-pad-bottom);
        background: var(--bg-surface-1);
        min-height: calc(100vh - 64px);
    }

    #main-app #user-overview-section > :not(.desktop-profile-dashboard) {
        display: none !important;
    }

    #main-app .desktop-profile-dashboard {
        display: grid;
        gap: 16px;
        color: var(--text-primary);
    }

    #main-app .desktop-profile-hero,
    #main-app .desktop-profile-panel,
    #main-app .desktop-profile-metric {
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-card);
        box-shadow: none;
    }

    #main-app .desktop-profile-hero {
        min-height: 104px;
        padding: 18px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        background: linear-gradient(90deg, rgba(var(--brand-color-rgb), 0.22) 0%, rgba(var(--safety-color-rgb, 232, 93, 4), 0.1) 100%);
    }

    #main-app .desktop-profile-eyebrow {
        margin-bottom: 5px;
        color: var(--safety-fg, var(--safety-color));
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    #main-app .desktop-profile-hero h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: 25px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: 0;
    }

    #main-app .desktop-profile-hero p {
        margin: 9px 0 0;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.35;
    }

    #main-app .desktop-profile-avatar {
        width: 74px;
        height: 74px;
        flex: 0 0 74px;
        border: 0;
        border-radius: 50%;
        background: var(--brand-color);
        color: var(--text-on-brand);
        display: grid;
        place-items: center;
        font-size: 35px;
        overflow: hidden;
    }

    #main-app .desktop-profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #main-app .desktop-profile-metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    #main-app .desktop-profile-metric {
        min-height: 96px;
        padding: 13px;
        display: grid;
        align-content: center;
        justify-items: start;
        text-align: left;
        color: var(--text-primary);
        cursor: pointer;
    }

    #main-app .desktop-profile-metric span,
    #main-app .desktop-profile-metric small {
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 700;
    }

    #main-app .desktop-profile-metric strong {
        margin-top: 9px;
        color: var(--text-primary);
        font-size: 25px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: 0;
    }

    #main-app .desktop-profile-metric small {
        margin-top: 7px;
        font-weight: 500;
    }

    #main-app .desktop-profile-main-grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(320px, 0.95fr);
        gap: 14px;
    }

    #main-app .desktop-profile-panel {
        overflow: hidden;
    }

    #main-app .desktop-profile-panel-head {
        min-height: 56px;
        padding: 12px 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid var(--border-color);
    }

    #main-app .desktop-profile-panel-head h3 {
        margin: 0;
        color: var(--text-primary);
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 0;
    }

    #main-app .desktop-profile-summary-grid {
        padding: 14px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    #main-app .desktop-assessor-feedback {
        margin: 0 14px 14px;
        padding: 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-surface-2);
    }

    #main-app .desktop-assessor-feedback[hidden] {
        display: none !important;
    }

    #main-app .desktop-assessor-feedback strong {
        display: block;
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 900;
        line-height: 1.25;
    }

    #main-app .desktop-profile-note-card,
    #main-app .desktop-profile-skill-card,
    #main-app .desktop-profile-agenda-card {
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-surface-2);
    }

    #main-app .desktop-profile-note-card {
        min-height: 62px;
        padding: 12px;
    }

    #main-app .desktop-profile-note-card strong,
    #main-app .desktop-profile-skill-card strong,
    #main-app .desktop-profile-agenda-card strong {
        display: block;
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 900;
        line-height: 1.25;
    }

    #main-app .desktop-profile-note-card p,
    #main-app .desktop-profile-skill-card small,
    #main-app .desktop-profile-agenda-card small,
    #main-app .desktop-profile-empty,
    #main-app .desktop-profile-agenda-empty {
        margin: 7px 0 0;
        color: var(--text-secondary);
        font-size: 12px;
        line-height: 1.4;
    }

    #main-app .desktop-profile-skill-grid {
        padding: 14px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #main-app .desktop-profile-skill-card {
        min-height: 52px;
        padding: 10px;
    }

    #main-app .desktop-profile-empty {
        grid-column: 1 / -1;
        min-height: 116px;
        display: grid;
        place-items: center;
        gap: 12px;
        border: 1px dashed var(--border-color);
        border-radius: 6px;
        background: var(--bg-muted);
        text-align: center;
    }

    #main-app .desktop-profile-agenda-panel {
        margin-top: 1px;
    }

    #main-app .desktop-profile-filter-row {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
    }

    #main-app .desktop-profile-filter-row button {
        min-height: 32px;
        padding: 0 11px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-surface-2);
        color: var(--text-primary);
        font-weight: 800;
        cursor: pointer;
    }

    #main-app .desktop-profile-filter-row button.is-active {
        border-color: rgba(var(--sidebar-accent-rgb), 0.55);
        color: var(--sidebar-accent);
        background: var(--shell-subnav-active-bg);
    }

    #main-app .desktop-profile-agenda-board {
        padding: 14px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    #main-app .desktop-profile-agenda-column {
        min-height: 214px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-surface-1);
        padding: 10px;
    }

    #main-app .desktop-profile-agenda-column-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 9px;
    }

    #main-app .desktop-profile-agenda-column-head strong {
        color: var(--text-primary);
        font-size: 12px;
        font-weight: 900;
    }

    #main-app .desktop-profile-count {
        min-width: 21px;
        height: 21px;
        padding: 0 7px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 900;
    }

    #main-app .desktop-profile-count.is-danger { background: rgba(185, 28, 28, 0.16); color: #fecaca; }
    #main-app .desktop-profile-count.is-info { background: rgba(13, 59, 102, 0.24); color: #bfdbfe; }
    #main-app .desktop-profile-count.is-warning { background: rgba(180, 83, 9, 0.18); color: #fed7aa; }
    #main-app .desktop-profile-count.is-success { background: rgba(45, 106, 79, 0.22); color: #bbf7d0; }

    #main-app .desktop-profile-agenda-items {
        display: grid;
        gap: 8px;
    }

    #main-app .desktop-profile-agenda-card {
        min-height: 54px;
        padding: 10px;
        text-align: left;
        cursor: pointer;
    }

    #main-app .desktop-profile-agenda-card:hover,
    #main-app .desktop-profile-metric:hover,
    #main-app .desktop-profile-filter-row button:hover {
        border-color: rgba(var(--sidebar-accent-rgb), 0.45);
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    [data-theme="light"] #main-app .desktop-profile-hero {
        background: linear-gradient(90deg, #ffffff 0%, #eaf2ff 100%);
    }

    [data-theme="light"] #main-app .desktop-profile-empty {
        background: #f7faff;
    }

    [data-theme="light"] #main-app .desktop-profile-agenda-column {
        background: #f8fbff;
    }

    [data-theme="light"] #main-app .desktop-profile-count.is-danger { background: #fde8e6; color: #bf3f3a; }
    [data-theme="light"] #main-app .desktop-profile-count.is-info { background: #e8f1ff; color: #1667cf; }
    [data-theme="light"] #main-app .desktop-profile-count.is-warning { background: #fff4d8; color: #a96f12; }
    [data-theme="light"] #main-app .desktop-profile-count.is-success { background: #e8f7ef; color: #16865d; }

    @media (max-width: 1180px) {
        #main-app .desktop-profile-main-grid,
        #main-app .desktop-profile-agenda-board {
            grid-template-columns: 1fr 1fr;
        }

        #main-app .desktop-profile-summary-grid,
        #main-app .desktop-profile-metrics {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

/* Theme hardening: keep late desktop mockup rules readable in dark mode. */
@media (min-width: 769px) {
    #main-app .app-container {
        color: var(--text-primary) !important;
    }

    #main-app .app-container h1,
    #main-app .app-container h2,
    #main-app .app-container h3,
    #main-app .app-container h4,
    #main-app .app-container h5,
    #main-app .app-container h6,
    #main-app .app-container strong,
    #main-app .stat-value,
    #main-app .director-risk-card strong,
    #main-app .director-row strong,
    #main-app .director-panel-head h3,
    #main-app .company-cockpit-head h4,
    #main-app .company-cockpit-row strong,
    #main-app .company-cockpit-action strong {
        color: var(--text-primary) !important;
    }

    #main-app .app-container p,
    #main-app .app-container small,
    #main-app .helper-text,
    #main-app .text-muted,
    #main-app .stat-label,
    #main-app .director-risk-card p,
    #main-app .director-row small,
    #main-app .director-section-head p,
    #main-app .company-cockpit-row span,
    #main-app .company-cockpit-action span {
        color: var(--text-secondary) !important;
    }

    #main-app .director-risk-card,
    #main-app .director-panel,
    #main-app .director-row,
    #main-app .company-cockpit-row,
    #main-app .company-cockpit-action,
    #main-app .director-chart-fake,
    #main-app .card,
    #main-app .info-card,
    #main-app .user-dashboard-card,
    #main-app .stat-card,
    #main-app .company-cockpit-panel,
    #main-app .onboarding-card,
    #main-app .quick-actions,
    #main-app .approval-card,
    #main-app .panel {
        background: var(--bg-card) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    #main-app .director-panel-head,
    #main-app .company-cockpit-head {
        border-bottom-color: var(--border-color) !important;
    }

    #main-app .director-row > i,
    #main-app .company-cockpit-row i,
    #main-app .company-cockpit-action i {
        background: rgba(var(--sidebar-accent-rgb), 0.16) !important;
        color: var(--sidebar-accent) !important;
    }

    #main-app .director-section-head .eyebrow {
        color: var(--sidebar-accent) !important;
    }

    #main-app .btn-primary,
    #main-app button.btn-primary,
    #main-app .btn-primary:hover,
    #main-app button.btn-primary:hover {
        color: var(--text-on-brand) !important;
    }

    #main-app .btn-secondary,
    #main-app button.btn-secondary {
        color: var(--text-primary) !important;
    }

    #main-app .btn-secondary:hover,
    #main-app .quick-action-btn:hover,
    #main-app .director-row:hover,
    #main-app .company-cockpit-row:hover,
    #main-app .company-cockpit-action:hover,
    #main-app .approval-card:hover,
    #main-app .card:hover,
    #main-app .user-dashboard-card:hover,
    #main-app .stat-card:hover {
        background: var(--bg-hover) !important;
        border-color: rgba(var(--sidebar-accent-rgb), 0.45) !important;
        color: var(--text-primary) !important;
    }
}

/* ==========================================================================
   PWA mobile viewport fallback
   Some standalone mobile browsers do not match hover:none/pointer:coarse.
   Keep critical shell sizing and header behavior tied to viewport width too.
   This block intentionally lives at the end of the stylesheet to win cascade
   order against older mobile-menu/header definitions above.
   ========================================================================== */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    #main-app.dashboard-container {
        width: 100%;
        max-width: 100vw;
        grid-template-columns: 1fr !important;
        overflow-x: hidden;
    }

    #main-app .app-header {
        width: 100%;
        max-width: 100vw;
        padding: 0 0 0 12px !important;
        justify-content: space-between !important;
        gap: 0 !important;
        overflow: hidden;
    }

    #main-app .header-left {
        flex: 1 1 auto !important;
        width: 100%;
        min-width: 0 !important;
        justify-content: space-between !important;
    }

    #main-app .header-brand {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100vw - 56px);
        overflow: hidden;
    }

    #main-app .brand-info,
    #main-app .header-company-name {
        min-width: 0;
    }

    #main-app .brand-info h2,
    #main-app .header-company-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #main-app .header-company-badge {
        flex: 0 1 auto;
        min-width: 0;
        max-width: min(42vw, 160px);
    }

    #main-app .app-header .header-user {
        display: none !important;
    }

    #main-app .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding: 0;
        border: none !important;
        background: transparent;
        color: var(--text-primary);
        font-size: 24px;
        flex: 0 0 48px;
        order: 99 !important;
    }

    #main-app .app-container,
    #main-app .tab-content,
    #main-app #user-tab,
    #main-app #user-overview-section {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    body.mobile-drawer-account-only #app-sidebar #sidebar-company-brand,
    body.mobile-drawer-account-only #app-sidebar #sidebar-nav,
    body.mobile-drawer-account-only #app-sidebar #sidebar-help-link,
    body.mobile-drawer-account-only #app-sidebar .sidebar-group,
    body.mobile-drawer-account-only #app-sidebar .sidebar-nav-item {
        display: none !important;
    }
}

@media (max-width: 480px) {
    #main-app .header-company-badge {
        display: none !important;
    }
}

/* ==========================================================================
   Layout density v1 — canonical #main-app layout (Phases 1–6)
   Wins over "LEGACY: Desktop dashboard mockup" and "LEGACY: Corrective shell" above.

   Tokens on #main-app:
   --page-pad-*, --section-gap, --stack-gap, --table-cell-pad-*,
   --card-pad, --form-max-width, --form-readable-max
   (also declared in styles/tokens.css :root for non-#main-app use)

   Border ownership (avoid double boxes):
   · Page: .app-container padding only
   · Section title: .section-header → border-bottom, NOT card chrome
   · Data card: .card, .panel, .stat-card, .settings-card, …
   · Table: .table-wrapper border when standalone; NONE inside card/panel
   · Modals: separate max-width (unchanged by density pass)

   §1 Shell visibility · §2 Tokens · §3 Utilities · §4 Forms
   §5 Shell padding & sections · §6 Tables · §7 Components
   ========================================================================== */

/* §1 Shell visibility */
#main-app .sidebar-nav-item[hidden],
#main-app .sidebar-nav-item[aria-hidden="true"],
#main-app .sidebar-nav-item.is-hidden,
#main-app .sidebar-nav-item.hidden,
#main-app .sidebar-group[hidden],
#main-app .sidebar-group[aria-hidden="true"],
#main-app .sub-nav[hidden],
#main-app .sub-nav[aria-hidden="true"],
#main-app .sub-nav-btn[hidden],
#main-app .sub-nav-btn[aria-hidden="true"],
#main-app .sub-nav-btn.is-hidden,
#main-app .sub-nav-btn.hidden,
#main-app .sub-nav-btn[style*="display: none"],
#main-app .sub-nav-btn[style*="display:none"] {
    display: none !important;
}

@media (min-width: 769px) {
    #main-app .app-header {
        min-width: 0 !important;
    }

    #main-app .header-left {
        flex: 0 1 230px !important;
        min-width: 0 !important;
        max-width: 260px !important;
    }

    #main-app .desktop-page-title {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #main-app .desktop-page-title h1 {
        font-size: 1.25rem !important;
        line-height: 1.05 !important;
    }

    #main-app .sub-nav-container {
        min-width: 0 !important;
    }

    #main-app .sub-nav-btn {
        max-width: 220px !important;
    }
}

/* §2 Tokens */
#main-app {
    --page-pad-x: 12px;
    --page-pad-y: 12px;
    --page-pad-bottom: 16px;
    --page-pad-x-mobile: 10px;
    --page-pad-y-mobile: 10px;
    --page-pad-bottom-mobile: calc(88px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    --section-gap: 12px;
    --section-gap-sm: 10px;
    --stack-gap: 8px;
    --table-cell-pad-y: 10px;
    --table-cell-pad-x: 12px;
    --card-pad: 12px;
    --form-max-width: 960px;
    --form-readable-max: 1100px;
}

/* §4 Forms — full-width on desktop */
#main-app form.grid-form {
    width: 100% !important;
    max-width: min(100%, var(--form-max-width)) !important;
}

#main-app .self-assessment-form {
    width: 100% !important;
    max-width: min(100%, var(--form-readable-max)) !important;
    margin: 0 !important;
}

#main-app .no-company-dashboard {
    max-width: min(100%, var(--form-max-width)) !important;
}

#main-app .kanban-board-container {
    min-height: 360px;
}

#main-app .kanban-board-container:not(:empty) {
    min-height: min(480px, 70vh);
}

/* §3 Spacing utilities */
.stack-sm { margin-bottom: var(--section-gap-sm, 10px); }
.stack-md { margin-bottom: var(--section-gap, 12px); }
.stack-lg { margin-bottom: var(--space-4, 16px); }
.stack-mt-sm { margin-top: var(--section-gap-sm, 10px); }
.stack-mt-md { margin-top: var(--section-gap, 12px); }

.flex-row-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--stack-gap, 8px);
}

.flex-row-wrap-end {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--stack-gap, 8px);
}

.flex-row-between {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-gap, 8px);
}

.inset-panel-sm {
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 8px);
}

.inset-panel-muted {
    padding: 10px 12px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.settings-inset-panel {
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.form-grid-stack {
    display: grid;
    gap: var(--section-gap-sm, 10px);
}

.chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-gap, 8px);
}

.list-stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 8px);
}

.metrics-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--stack-gap, 8px);
    margin-bottom: var(--section-gap, 12px);
}

.metrics-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--section-gap, 12px);
    margin-bottom: var(--section-gap, 12px);
}

.metrics-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--section-gap, 12px);
    margin-bottom: var(--section-gap, 12px);
}

.report-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--section-gap, 12px);
    margin-bottom: var(--section-gap, 12px);
}

.report-summary-cards--md {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.report-summary-cards--sm {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.panel-head-bar {
    background: var(--bg-card);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.panel-head-bar h5 {
    margin: 0;
    font-size: 14px;
}

.panel-body-pad {
    padding: 10px 12px;
}

.panel-body-pad-muted {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-main);
}

.empty-state-pad {
    text-align: center;
    padding: var(--space-4, 16px);
    color: var(--text-secondary);
}

.competency-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-gap, 8px);
    margin-bottom: var(--section-gap, 12px);
}

.competency-tabs {
    margin-bottom: var(--section-gap, 12px);
    border-bottom: 2px solid var(--border-color);
}

.module-preset-bar {
    margin-bottom: var(--section-gap-sm, 10px);
}

.assessor-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--section-gap, 12px);
    margin-bottom: var(--section-gap, 12px);
}

#main-app #suspicious-stats-cards .stat-card {
    text-align: center;
}

@media (max-width: 1100px) {
    .metrics-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* §5 Shell padding, sections, responsive layout */
#main-app .app-container,
#main-app .tab-content,
#main-app .super-section,
#main-app .company-section,
#main-app .assessor-section,
#main-app .hc-section,
#main-app .manager-section,
#main-app .tasks-section {
    min-width: 0 !important;
    max-width: 100% !important;
}

@media (min-width: 769px) {
    #main-app .app-container {
        padding: var(--page-pad-y) var(--page-pad-x) var(--page-pad-bottom) !important;
        overflow-x: hidden !important;
    }

    #main-app .tab-content.active {
        display: block !important;
    }

    #main-app .section-header {
        margin: 0 0 var(--section-gap) !important;
        padding: 0 0 var(--stack-gap) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        align-items: center !important;
    }

    #main-app .section-subheader {
        margin-bottom: var(--section-gap) !important;
    }

    #main-app .stats-grid,
    #main-app .company-cockpit-grid {
        gap: var(--section-gap) !important;
        margin-bottom: var(--section-gap) !important;
    }

    #main-app .company-cockpit-grid {
        margin-top: var(--section-gap) !important;
        margin-bottom: var(--section-gap) !important;
    }

    #main-app .director-cockpit {
        gap: var(--section-gap) !important;
        margin-bottom: var(--section-gap) !important;
    }

    #main-app .section-header h2,
    #main-app .section-header h3,
    #main-app .section-header h4,
    #main-app .section-subheader h3,
    #main-app .section-toolbar h5 {
        text-align: left !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #main-app .section-header-actions {
        margin-left: auto !important;
        justify-content: flex-end !important;
    }

    #main-app .section-header h2 {
        font-size: 1.125rem !important;
        line-height: 1.2 !important;
    }

    #main-app .section-header h3,
    #main-app .section-header h4 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 1280px) {
    #main-app.dashboard-container {
        grid-template-columns: var(--sidebar-width-desktop-wide) minmax(0, 1fr) !important;
    }

    #main-app .app-sidebar {
        min-width: var(--sidebar-width-desktop-wide) !important;
    }
}

#main-app .section-header,
#main-app .section-header-actions,
#main-app .section-subheader,
#main-app .section-toolbar,
#main-app .section-toolbar-left,
#main-app .section-toolbar-right,
#main-app .section-toolbar-left,
#main-app .section-toolbar-right,
#main-app .section-header-actions {
    flex-wrap: wrap !important;
}

#main-app .section-toolbar input,
#main-app .section-toolbar select,
#main-app .section-toolbar textarea,
#main-app .section-header-actions input,
#main-app .section-header-actions select,
#main-app .section-header-actions textarea {
    min-width: 0 !important;
    max-width: 100% !important;
}

#main-app .sub-nav-secondary {
    padding: 6px 8px !important;
    margin-bottom: var(--section-gap-sm) !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#main-app .sub-nav-btn-secondary {
    max-width: 240px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#main-app .table-wrapper,
#main-app .responsive-table-wrapper,
#main-app .table-responsive,
#main-app .data-table-wrapper,
#main-app .employee-table-wrapper {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* §6 Tables — nested wrappers (parent card owns border) */
#main-app .card .table-wrapper,
#main-app .panel .table-wrapper,
#main-app .settings-card .table-wrapper,
#main-app .company-cockpit-panel .table-wrapper,
#main-app .director-panel .table-wrapper,
#main-app .approval-card .table-wrapper,
#main-app .form-section-card .table-wrapper,
#main-app .info-card .table-wrapper,
#main-app .user-dashboard-card .table-wrapper,
#main-app .onboarding-card .table-wrapper {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#main-app table {
    max-width: 100%;
}

#main-app th,
#main-app td {
    padding: var(--table-cell-pad-y) var(--table-cell-pad-x) !important;
}

@media (min-width: 769px) {
    #main-app .stat-card {
        min-height: 92px;
        padding: var(--card-pad) !important;
        gap: var(--stack-gap) !important;
    }

    #main-app .filter-bar,
    #main-app .user-filter-bar,
    #main-app .attendance-filter-bar,
    #main-app .tasks-filter-bar,
    #main-app .employee-filter-bar {
        gap: var(--stack-gap) !important;
        margin-bottom: var(--section-gap-sm) !important;
    }

    #main-app .attendance-filter-bar,
    #main-app .compact-toolbar.attendance-filter-bar {
        padding: 10px 12px !important;
    }
}

#main-app .card,
#main-app .settings-card,
#main-app .user-dashboard-card,
#main-app .stat-card,
#main-app .chart-card,
#main-app .form-section-card,
#main-app .company-info-card,
#main-app .company-cockpit-panel,
#main-app .director-panel,
#main-app .approval-card,
#main-app .panel {
    min-width: 0 !important;
    max-width: 100% !important;
}

#main-app img,
#main-app canvas,
#main-app svg,
#main-app video {
    max-width: 100%;
}

@media (max-width: 768px) {
    #main-app .app-container {
        padding: var(--page-pad-y-mobile) var(--page-pad-x-mobile) var(--page-pad-bottom-mobile) !important;
    }

    #main-app .section-header,
    #main-app .section-subheader,
    #main-app .section-toolbar {
        align-items: stretch !important;
        gap: 10px !important;
    }

    #main-app .section-header {
        margin-bottom: var(--section-gap) !important;
        padding-bottom: var(--stack-gap) !important;
    }

    #main-app .section-subheader {
        margin-bottom: var(--section-gap-sm) !important;
    }

    #main-app .stats-grid {
        gap: var(--stack-gap) !important;
        margin-bottom: var(--section-gap-sm) !important;
    }

    #main-app .section-header-actions,
    #main-app .section-toolbar-left,
    #main-app .section-toolbar-right {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    #main-app .sub-nav-secondary {
        flex-wrap: nowrap !important;
        padding: 6px !important;
        margin-bottom: var(--section-gap-sm) !important;
    }

    #main-app .sub-nav-btn-secondary {
        flex: 0 0 auto !important;
        max-width: 72vw !important;
    }
}

/* §7 Components — buttons, cards, inputs, badges */
#main-app .btn-primary,
#main-app .btn-secondary,
#main-app .btn-danger,
#main-app .btn-warning,
#main-app .btn-outline,
#main-app .btn-outline-secondary,
#main-app .btn-danger-outline,
#main-app .btn-export,
#main-app .btn-view-profile,
#main-app .btn-contact,
#main-app .btn-shortlist,
#main-app .btn-quick,
#main-app .modal-actions button,
#main-app .form-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

#main-app .btn-sm,
#main-app .btn-group-sm .btn,
#main-app .column-toggle-btn {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 0.8125rem !important;
    border-radius: 7px !important;
}

#main-app .btn-xs {
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
}

#main-app .btn-icon,
#main-app .header-icon-btn,
#main-app .notification-bell-btn,
#main-app .sidebar-action-btn,
#main-app .formula-tooltip-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    line-height: 1 !important;
}

#main-app .btn-primary i,
#main-app .btn-secondary i,
#main-app .btn-danger i,
#main-app .btn-warning i,
#main-app .btn-outline i,
#main-app .btn-outline-secondary i,
#main-app .btn-danger-outline i,
#main-app .btn-export i,
#main-app .btn-icon i {
    flex: 0 0 auto !important;
    line-height: 1 !important;
}

#main-app .sub-nav-btn,
#main-app .sub-nav-btn-secondary,
#main-app .payment-tab {
    min-width: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

#main-app .sub-nav-btn span:not(.sub-nav-count-badge),
#main-app .sub-nav-btn-secondary span,
#main-app .payment-tab span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#main-app .card,
#main-app .settings-card,
#main-app .user-dashboard-card,
#main-app .chart-card,
#main-app .recent-activity-card,
#main-app .form-section-card,
#main-app .company-info-card,
#main-app .brand-preview-card,
#main-app .org-preview-card,
#main-app .detail-card,
#main-app .talent-search-card,
#main-app .recruitment-panel,
#main-app .director-panel,
#main-app .company-cockpit-panel,
#main-app .approval-card,
#main-app .panel {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--bg-card) !important;
    box-shadow: none !important;
}

#main-app .settings-card-header,
#main-app .card-header,
#main-app .user-card-header,
#main-app .detail-card-header,
#main-app .form-section-header,
#main-app .table-header-row {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 10px !important;
}

#main-app .settings-card-header h5,
#main-app .card-header h3,
#main-app .user-card-header h3,
#main-app .detail-card-header,
#main-app .form-section-header,
#main-app .table-header-row h3 {
    margin: 0 !important;
    min-width: 0 !important;
    color: var(--text-primary) !important;
    font-size: 0.9375rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

#main-app .form-control,
#main-app .form-select,
#main-app .search-input-field,
#main-app .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
#main-app .form-field select,
#main-app .form-field textarea,
#main-app .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
#main-app .form-group select,
#main-app .form-group textarea,
#main-app .section-toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
#main-app .section-toolbar select,
#main-app .section-toolbar textarea,
#main-app .settings-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
#main-app .settings-card select,
#main-app .settings-card textarea {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--bg-input, var(--bg-card)) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem !important;
    line-height: 1.35 !important;
}

#main-app textarea.form-control,
#main-app .form-field textarea,
#main-app .form-group textarea,
#main-app .settings-card textarea {
    min-height: 88px !important;
    resize: vertical !important;
}

#main-app input:focus,
#main-app select:focus,
#main-app textarea:focus {
    outline: none !important;
    border-color: var(--sidebar-accent, var(--brand-color)) !important;
    box-shadow: 0 0 0 3px rgba(var(--sidebar-accent-rgb, 232, 93, 4), 0.16) !important;
}

#main-app input[type="checkbox"]:not(.module-switch),
#main-app input[type="radio"] {
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 0 !important;
    max-width: 16px !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    accent-color: var(--sidebar-accent, var(--brand-color));
}

#main-app input.module-switch[type="checkbox"] {
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#main-app .form-actions,
#main-app .modal-actions,
#main-app .bulk-import-actions,
#main-app .bulk-action-toolbar,
#main-app .table-header-row,
#main-app .section-toolbar,
#main-app .section-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#main-app .form-actions,
#main-app .bulk-action-toolbar {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--bg-card) !important;
    box-shadow: none !important;
}

#main-app .data-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--text-primary) !important;
    font-size: 0.8125rem !important;
}

#main-app .data-table th,
#main-app .data-table td,
#main-app .compact-table th,
#main-app .compact-table td {
    padding: 10px 12px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

#main-app .data-table th {
    color: var(--text-secondary) !important;
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

#main-app .actions,
#main-app td.actions,
#main-app .user-doc-item-actions,
#main-app .assessor-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

#main-app .badge,
#main-app .badge-sm,
#main-app .company-badge,
#main-app .skill-badge,
#main-app .privacy-badge,
#main-app .insight-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

#main-app .badge,
#main-app .company-badge,
#main-app .skill-badge,
#main-app .privacy-badge,
#main-app .insight-badge {
    min-height: 24px !important;
    padding: 3px 10px !important;
    font-size: 0.75rem !important;
}

#main-app .badge-sm {
    min-height: 20px !important;
    padding: 2px 8px !important;
    font-size: 0.6875rem !important;
}

@media (max-width: 768px) {
    #main-app .btn-primary,
    #main-app .btn-secondary,
    #main-app .btn-danger,
    #main-app .btn-warning,
    #main-app .btn-outline,
    #main-app .btn-outline-secondary,
    #main-app .btn-danger-outline,
    #main-app .btn-export,
    #main-app .btn-view-profile,
    #main-app .btn-contact,
    #main-app .btn-shortlist,
    #main-app .btn-quick,
    #main-app .modal-actions button,
    #main-app .form-actions button {
        min-height: 44px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #main-app .form-control,
    #main-app .form-select,
    #main-app .search-input-field,
    #main-app .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    #main-app .form-field select,
    #main-app .form-field textarea,
    #main-app .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    #main-app .form-group select,
    #main-app .form-group textarea,
    #main-app .section-toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    #main-app .section-toolbar select,
    #main-app .section-toolbar textarea,
    #main-app .settings-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    #main-app .settings-card select,
    #main-app .settings-card textarea {
        min-height: 44px !important;
        font-size: 1rem !important;
    }

    #main-app .form-actions,
    #main-app .modal-actions,
    #main-app .bulk-import-actions,
    #main-app .bulk-action-toolbar,
    #main-app .table-header-row {
        align-items: stretch !important;
    }

    #main-app .form-actions > *,
    #main-app .modal-actions > *,
    #main-app .bulk-import-actions > *,
    #main-app .bulk-action-toolbar > * {
        min-width: 0 !important;
    }
}