/* ═════════════════════════════════════════════════════════════
   UTILITY CLASSES - APPEND ONLY
   Never modify existing utilities, only add new ones
   ═════════════════════════════════════════════════════════════ */

/* Spacing - Margin Top */
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* Spacing - Margin Bottom */
.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Spacing - Margin Left */
.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }

/* Spacing - Margin Right */
.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }

/* Spacing - Margin All */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }

/* Spacing - Padding Top */
.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

/* Spacing - Padding Bottom */
.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }

/* Spacing - Padding Left */
.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }

/* Spacing - Padding Right */
.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }

/* Spacing - Padding All */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

/* Layout - Display */
.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Layout - Width */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Layout - Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE DESIGN - MEDIA QUERIES
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   HEIGHT-BASED: Desktop with Console Open (≤800px height)
   ───────────────────────────────────────────────────────── */
@media (max-height: 960px) {
    .auth-box {
        padding: var(--space-3) var(--space-4);
        max-width: 400px;
    }

    .auth-box img[alt="ESG Disclose"] {
        height: 60px !important;
        margin-bottom: 0.4rem !important;
    }

    .auth-box .auth-tabs {
        margin-bottom: 1rem;
    }

    .auth-box form {
        gap: 0.625rem !important;
    }

    .auth-box .form-label {
        font-size: var(--text-xs);
        margin-bottom: 0.2rem;
    }

    .auth-box .form-input {
        padding: 0.5rem 0.75rem;
        font-size: var(--text-sm);
    }

    .auth-title {
        font-size: var(--text-2xl);
        margin-bottom: 1rem;
    }

    .auth-box p[style*="1.1rem"] {
        font-size: var(--text-sm) !important;
        margin-bottom: 1rem !important;
    }

    .auth-container {
        padding: var(--space-2);
    }

    .content-wrapper {
        padding: 0 2rem 1.5rem;
        margin-top: 0;
    }

    .top-panel {
        padding: 0 2rem 0 1.25rem;
    }

    .profile-popover {
        right: calc(2rem + 10px);
    }

    .search-container {
        max-width: 400px;
    }

    .page-title {
        font-size: var(--text-2xl);
        margin-bottom: 0.25rem;
    }

    .page-subtitle {
        font-size: var(--text-xs);
    }

    .page-header {
        margin-bottom: 0.75rem;
    }

    /* Stat cards */
    .stats-grid {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .stat-card {
        padding: 0.5rem 0.75rem;
    }

    .stat-label {
        font-size: var(--text-2xs);
        margin-bottom: 0.2rem;
    }

    .stat-value {
        font-size: var(--text-2xl);
        margin-bottom: 0.2rem;
    }

    .stat-unit {
        font-size: var(--text-2xs);
    }

    /* Charts */
    .chart-card {
        margin-bottom: 0.5rem;
        padding: 0.75rem;
    }

    .chart-card h3,
    .chart-card .chart-title {
        font-size: var(--text-sm);
        margin-bottom: 0.5rem;
    }

    /* Tables */
    .table-container {
        margin-bottom: 0.75rem;
    }

    th {
        padding: 0.35rem 0.5rem;
        font-size: var(--text-2xs);
    }

    td {
        padding: 0.3rem 0.5rem;
        font-size: var(--text-xs);
    }

    /* Forms */
    .form-group {
        margin-bottom: 0.75rem;
    }

    .form-label {
        font-size: var(--text-xs);
        margin-bottom: 0.25rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: 0.5rem 0.625rem;
        font-size: var(--text-xs);
    }

    /* Buttons */
    .btn {
        padding: 8px 20px;
        font-size: var(--text-xs);
    }

    /* Section headers / h2 / h3 */
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-base); }

    /* AI bookmark */
    .ai-float-button {
        height: 90px !important;
        width: 28px !important;
    }

    .ai-float-button svg {
        width: 18px !important;
        height: 18px !important;
    }

    .ai-float-button:hover {
        width: 34px !important;
    }

    /* Charts row */
    .charts-row {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .period-selector {
        margin-bottom: 0.75rem;
    }

    /* Export/action sections */
    .export-card,
    .card {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    /* Uniform vertical spacing across all pages */
    .chart-card {
        margin-bottom: 0.75rem;
    }

    .charts-row .chart-card {
        margin-bottom: 0;
    }

    /* Override inline margins on all section h2s */
    h2[style*="margin-bottom"] {
        margin-bottom: 0.5rem !important;
    }

    /* Override inline margins on all containers */
    [style*="margin-bottom: 3rem"],
    [style*="margin-bottom: 2.5rem"],
    [style*="margin-bottom: 2rem"] {
        margin-bottom: 0.75rem !important;
    }

    [style*="margin-top: 2rem"],
    [style*="margin-top: 1.75rem"] {
        margin-top: 0.75rem !important;
    }

    [style*="margin-bottom: 1.5rem"] {
        margin-bottom: 0.5rem !important;
    }

    [style*="margin-bottom: 1.25rem"] {
        margin-bottom: 0.5rem !important;
    }

    [style*="gap: 2rem"] {
        gap: 0.75rem !important;
    }

    /* Analytics filter ribbon */
    .az-filter-ribbon {
        margin-bottom: 0.75rem !important;
    }

    /* Compact sidebar nav to fit on one screen */
    .sidebar {
        scrollbar-width: none;
    }
    .sidebar::-webkit-scrollbar {
        display: none;
    }

    .logo {
        min-height: auto;
        padding: 0.5rem 1.25rem;
    }

    .logo img {
        height: 38px;
    }

    .nav-item {
        padding: 0.6rem 1.25rem;
        margin-bottom: 0.1rem;
        font-size: var(--text-sm);
    }

    .nav-icon svg {
        width: 16px;
        height: 16px;
    }

    .nav-separator {
        margin: 0.2rem 1rem;
    }

    .eclipse-branding {
        padding: 0.5rem 0 0.25rem 0 !important;
    }

    .theme-toggle {
        padding: 0.5rem 1rem;
    }

    .theme-toggle-btn {
        padding: 0.5rem;
    }

    .logo-text {
        font-size: var(--text-xs) !important;
    }

    /* Compact profile popover */
    .profile-popover {
        padding: 0.5rem;
    }

    .profile-header {
        padding-bottom: 0.35rem;
        margin-bottom: 0.35rem;
        gap: 0.4rem;
    }


    .profile-header .profile-name {
        font-size: var(--text-xs);
        margin-bottom: 0.1rem;
    }

    .profile-header .profile-email {
        font-size: var(--text-xs);
    }

    .profile-menu-item {
        padding: 0.35rem 0.5rem;
        font-size: var(--text-xs);
        gap: 0.5rem;
    }

    .profile-menu-item svg {
        width: 14px;
        height: 14px;
    }

    .profile-org-switcher {
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .profile-org-switcher label {
        font-size: var(--text-2xs);
        margin-bottom: 0.25rem;
    }

    .profile-popover .btn {
        padding: 5px 14px;
        font-size: var(--text-xs);
    }
}

/* ─────────────────────────────────────────────────────────
   SMALL LAPTOP: ≤1366px (12-13" screens)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1366px) {
    /* Narrower sidebar */
    :root {
        --sidebar-width: 220px;
    }

    /* Tighter content padding */
    .content-wrapper {
        padding: 0 2rem 3rem;
    }

    /* Smaller page titles */
    .page-title {
        font-size: var(--text-2xl);
    }

    .page-subtitle {
        font-size: var(--text-sm);
    }

    /* Stat cards: tighter grid */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-2);
    }

    .stat-card {
        padding: var(--space-3);
    }

    .stat-value {
        font-size: var(--text-2xl);
    }

    /* Compact tabs */
    .dm-tabs__tab {
        padding: 0.625rem 1rem;
        font-size: var(--text-sm);
        gap: 0.375rem;
    }

    .dm-tabs__tab-icon svg {
        width: 16px;
        height: 16px;
    }

    /* Sidebar nav items */
    .nav-item {
        padding: 0.5rem 1rem;
        font-size: var(--text-sm);
    }

    .nav-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Top panel */
    .top-panel {
        padding: 0 1.5rem;
    }

    /* Tables: smaller text */
    table th,
    table td {
        padding: 0.5rem 0.75rem;
        font-size: var(--text-sm);
    }

    /* Charts row */
    .charts-row {
        gap: var(--space-2);
    }

    /* Profile popover */
    .profile-popover {
        right: calc(2rem + 10px);
    }

    /* Period selector */
    .period-selector {
        gap: 0.375rem 0.75rem;
    }

    /* Search */
    .search-container {
        max-width: 500px;
    }
}

/* ─────────────────────────────────────────────────────────
   TABLET & MOBILE: ≤1024px (Sidebar becomes drawer)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Sidebar: Hide off-screen by default */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s var(--ease-out-expo);
        z-index: var(--z-modal);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Sidebar Overlay (backdrop when sidebar open) */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(5, 5, 7, 0.85);
        backdrop-filter: blur(8px);
        z-index: calc(var(--z-modal) - 1);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }

    /* Content: Remove sidebar offset */
    .content {
        margin-left: 0;
    }

    /* Top Panel: Full width, add hamburger space */
    .top-panel {
        left: 0;
        padding: 0 1.5rem;
        gap: var(--space-2);
    }

    .logo {
        width: auto;
    }

    .profile-popover {
        right: 1.5rem;
    }

    /* Hamburger Menu Button (visible only on mobile) */
    .hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 1px solid var(--border-default);
        color: var(--corona-bright);
        cursor: pointer;
        transition: all 0.3s var(--ease-out-expo);
    }

    .hamburger-btn:hover {
        background: rgba(74, 173, 224, 0.1);
        border-color: var(--corona);
    }

    .hamburger-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Search: Reduce max-width */
    .search-container {
        max-width: 400px;
    }

    /* Content wrapper: Reduce padding */
    .content-wrapper {
        padding: 1.5rem;
    }

    /* Stats grid: Tighter spacing */
    .stats-grid {
        gap: var(--space-2);
    }

    /* Ribbons: More compact on tablet/mobile */
    .period-selector {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 1rem;
        gap: 0.25rem 0.5rem;
    }

    .period-selector label {
        font-size: var(--text-xs);
        margin-left: 0 !important;
    }

    .period-selector .custom-select {
        min-width: 120px;
    }

    .period-selector .custom-select-trigger {
        height: 30px !important;
        font-size: var(--text-xs);
        padding: 0 0.625rem;
    }

    .report-filter-bar {
        margin-bottom: 1rem;
    }

    .report-filter-toggle {
        padding: 0.5rem 0.75rem;
    }

    .az-filter-ribbon {
        padding: 0.625rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ─────────────────────────────────────────────────────────
   COMPACT WINDOW: ≤650px (Small windowed / split-screen)
   ───────────────────────────────────────────────────────── */
@media (max-width: 650px) {
    /* Sidebar: collapse to icons only, no scroll */
    .sidebar {
        width: 60px;
        overflow-y: hidden;
        display: flex;
        flex-direction: column;
    }

    .sidebar .nav-label {
        display: none;
    }

    .sidebar .nav-item {
        justify-content: center;
        padding: 0.69rem 0.25rem !important;
    }

    .sidebar .nav-icon {
        margin-right: 0;
    }

    .sidebar .nav-icon svg {
        width: 16px;
        height: 16px;
    }

    /* Hide "by Eclipse Labs" text */
    .eclipse-branding {
        display: none !important;
    }

    /* Theme toggle: compact icon-only */
    .theme-toggle {
        padding: 0.375rem;
        margin-top: auto;
    }

    .theme-toggle-btn {
        padding: 0.375rem;
        justify-content: center;
    }

    .theme-toggle-btn .theme-label,
    .theme-toggle-btn .theme-toggle-icon {
        display: none;
    }

    /* Content offset matches narrow sidebar */
    .content {
        margin-left: 60px;
    }

    .top-panel {
        left: 0;
        padding: 0 0.75rem;
        gap: 0.25rem;
    }

    .profile-popover {
        right: 0.75rem;
        width: 240px;
    }

    /* Content wrapper: tight padding */
    .content-wrapper {
        padding: 1rem 0.75rem 2rem;
    }

    /* Page title */
    .page-title {
        font-size: var(--text-xl);
    }

    .page-subtitle {
        font-size: var(--text-xs);
    }

    .page-header {
        margin-bottom: 1rem;
    }

    /* Stats: 2-column grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .stat-value {
        font-size: var(--text-lg);
    }

    .stat-label {
        font-size: var(--text-2xs);
    }

    .stat-card {
        padding: var(--space-2);
    }

    /* Tabs: compact */
    .dm-tabs__tab {
        padding: 0.375rem 0.625rem;
        font-size: var(--text-xs);
        gap: 0.25rem;
    }

    .dm-tabs__tab-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Tables */
    table th,
    table td {
        padding: 0.375rem 0.5rem;
        font-size: var(--text-xs);
    }

    /* Search */
    .search-container {
        max-width: 180px;
    }

    .search-bar {
        font-size: var(--text-xs);
        padding: 0 0.5rem 0 2rem;
    }

    /* User profile: avatar only */
    .user-profile-btn {
        width: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
        margin-right: 0;
    }

    .user-profile-btn #userName {
        display: none;
    }

    /* Charts */
    .charts-row {
        grid-template-columns: 1fr;
    }

    .chart-card {
        padding: var(--space-2);
    }

    /* Period selector: wrap and compact */
    .period-selector {
        padding: 0.375rem 0.5rem !important;
        gap: 0.25rem 0.5rem;
    }

    .period-selector label {
        font-size: var(--text-2xs);
    }

    .period-selector .custom-select-trigger {
        height: 28px !important;
        font-size: var(--text-xs);
        padding: 0 0.5rem;
    }

    .period-selector .custom-select {
        min-width: 90px;
    }

    /* Buttons */
    .btn-primary-premium {
        font-size: var(--text-xs);
        padding: 0.375rem 0.75rem;
    }

    /* A-Z filter */
    .az-filter-ribbon {
        padding: 0.375rem !important;
        margin-bottom: 0.75rem !important;
    }
}

/* ─────────────────────────────────────────────────────────
   SHORT VIEWPORT: ≤700px height (Sidebar fits without scroll)
   ───────────────────────────────────────────────────────── */
@media (max-height: 700px) {
    .sidebar {
        overflow-y: auto !important;
        scrollbar-width: none;
    }
    .sidebar::-webkit-scrollbar {
        display: none !important;
    }

    .sidebar .nav-item {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        margin-bottom: 0 !important;
    }

    .sidebar .nav-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .sidebar .nav-separator {
        margin: 0.1rem 1rem !important;
    }

    /* Hide "by Eclipse Labs" branding */
    .sidebar .eclipse-branding {
        display: none !important;
    }

    /* Theme toggle: compact */
    .theme-toggle {
        padding: 0.25rem 0.75rem !important;
        margin-top: auto !important;
    }

    .theme-toggle-btn {
        padding: 0.25rem 0.5rem !important;
        font-size: var(--text-xs) !important;
    }

    /* Profile popover: compact for short viewports */
    .profile-popover {
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        padding: 0.625rem 0.75rem 0.375rem !important;
    }

    .profile-header {
        padding-bottom: 0.375rem !important;
        margin-bottom: 0.375rem !important;
    }

    .profile-header svg {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 0.25rem !important;
    }

    .profile-name {
        font-size: var(--text-sm) !important;
    }

    .profile-email {
        font-size: var(--text-2xs) !important;
        margin-bottom: 0.125rem !important;
    }

    #profileRoleBadge {
        font-size: 9px !important;
        padding: 0.0625rem 0.375rem !important;
    }

    .profile-org-switcher {
        padding-bottom: 0.375rem !important;
        margin-bottom: 0.375rem !important;
    }

    .profile-org-switcher label {
        font-size: 9px !important;
        margin-bottom: 0.25rem !important;
    }

    #popoverInviteSection {
        padding-bottom: 0.375rem !important;
        margin-bottom: 0.375rem !important;
    }

    .popover-nav-btn {
        padding: 0.3rem 0.625rem !important;
        font-size: var(--text-xs) !important;
    }

    .popover-nav-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────
   MOBILE: ≤768px (Compact layout)
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* My Account: stack columns on mobile */
    #settingsPanelMyAccount div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Content wrapper: Minimal padding */
    .content-wrapper {
        padding: 1rem;
    }

    /* Top panel: Minimal padding */
    .top-panel {
        padding: 0 1rem;
    }

    /* Search: Narrower on mobile */
    .search-container {
        max-width: 280px;
    }

    /* Search bar: Smaller text */
    .search-bar {
        font-size: var(--text-sm);
        padding: 0 0.75rem 0 2.5rem;
    }

    /* User profile button: Avatar only */
    .user-profile-btn {
        width: 48px;
        min-width: 48px;
        padding: 0;
        justify-content: center;
        margin-right: 0;
    }

    .user-profile-btn #userName {
        display: none;
    }

    /* Stats grid: Force single column */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    /* Buttons: Full width on mobile */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Forms: Larger text for iOS (prevents auto-zoom) */
    .form-input,
    .form-select,
    .form-textarea {
        font-size: var(--text-base); /* 16px minimum for iOS */
        padding: 0.75rem;
    }

    .form-label {
        font-size: var(--text-sm);
        margin-bottom: 0.375rem;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    /* Modal: Wider on tablet */
    .modal-content {
        width: 95%;
        max-width: none;
        padding: var(--space-4);
    }

    /* Auth box: Reduce padding */
    .auth-box {
        padding: var(--space-4);
    }

    .auth-title {
        font-size: var(--text-2xl);
        margin-bottom: 1.5rem;
    }

    /* DM Tabs: Smaller on mobile */
    .dm-tabs__tab {
        padding: 0.5rem 0.75rem;
        font-size: var(--text-xs);
    }

    /* Table: Allow horizontal scroll on small screens as fallback */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Chart cards: Reduce padding */
    .chart-card {
        padding: var(--space-3);
    }

    /* Page title: Smaller */
    .page-title {
        font-size: var(--text-2xl);
    }

    /* Page header: Less margin */
    .page-header {
        margin-bottom: 1.5rem;
    }

    /* Stat values: Smaller on tablet/mobile */
    .stat-value {
        font-size: var(--text-2xl);
    }

    /* Logo: Scale down on mobile */
    .logo img {
        height: 40px;
    }

    .logo-text {
        font-size: var(--text-xs);
    }

    /* ── Step 1: AI Assistant page — responsive layout ── */
    #aiPage [style*="min-width: 250px"] { min-width: 100% !important; }
    #aiPage [style*="height: 600px"] { height: auto !important; max-height: 60vh !important; }
    #aiPage [style*="padding: 1.5rem"] { padding: 0.75rem !important; }

    /* ── Step 2: Emission Factors — full-width filter ── */
    #emissionFactorScopeFilter { width: 100% !important; }
    #emissionFactorsPage [style*="display: flex"][style*="gap: 1rem"] { flex-wrap: wrap !important; }

    /* ── Step 3: Add User form — stack on mobile ── */
    #addUserForm > div[style*="display: flex"] {
        flex-direction: column !important;
    }
    #addUserForm .form-input,
    #addUserForm .form-select {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* ── Step 4: Touch targets — 44px minimum ── */
    .btn, .btn-primary, .btn-secondary, .btn-primary-premium { min-height: 44px; }
    .form-input, .form-select, .form-textarea { min-height: 44px; }
    .notification-toggle-slider { min-width: 44px; min-height: 24px; }

    /* ── Step 5: Modal form grids — stack on mobile ── */
    .modal-content [style*="grid-template-columns: 1fr 1fr"],
    .modal-content [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Step 6: Table containers — force horizontal scroll ── */
    .table-container[style*="overflow: visible"] { overflow-x: auto !important; }

    /* ── Step 8: Report filter bar — single column ── */
    #reportFilterBody { grid-template-columns: 1fr !important; }

    /* ── Step 9: BU detail stat cards — 2 columns ── */
    #buDetailView .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ── Step 10: Split-top page headers — stack below title on mobile ── */
    .page-header--split-top {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }
    #dashboardPage > .page-header--split-top > div:last-child {
        flex-shrink: 0;
    }

    /* ── A1: MFA/2FA UI — stack on mobile ── */
    .mfa-code-input,
    .mfa-recovery-input {
        width: 100%;
        max-width: 100%;
    }
    .mfa-recovery__codes {
        grid-template-columns: 1fr;
    }
    .mfa-qr-container img,
    .mfa-qr-container canvas {
        max-width: 100%;
        height: auto;
    }
    .mfa-recovery__actions {
        flex-direction: column;
    }

    /* ── A3: Session timeout toast — full-width on mobile ── */
    .session-warning-toast {
        right: var(--space-2);
        left: var(--space-2);
        gap: var(--space-2);
        padding: var(--space-3);
        font-size: var(--text-xs);
    }

    /* ── A4: Billing panel — stack grids on mobile ── */
    .billing-usage-grid,
    .billing-includes__grid {
        grid-template-columns: 1fr;
    }
    .billing-panel {
        padding: var(--space-3);
    }
    .billing-plan-card {
        padding: var(--space-3);
    }
    .billing-plan-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    /* ── A5: Audit log filters — stack on mobile ── */
    .audit-filter-row {
        flex-direction: column;
    }
    .audit-filter-row > .form-group {
        width: 100% !important;
    }

}

/* ─────────────────────────────────────────────────────────
   SMALL MOBILE: ≤480px (Minimal spacing)
   ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .modal-content {
        width: 95%;
        padding: var(--space-3);
    }

    .auth-box {
        padding: var(--space-3);
    }

    .content-wrapper {
        padding: 0.75rem;
    }

    /* Stat values: Even smaller on small phones */
    .stat-value {
        font-size: var(--text-2xl);
    }

    /* Top panel: Tighter padding */
    .top-panel {
        padding: 0 0.75rem;
    }

    .profile-popover {
        right: 0.75rem;
    }

    /* Search: Compact on small phones */
    .search-container {
        max-width: 180px;
    }

    .search-bar {
        font-size: var(--text-xs);
        padding: 0 0.5rem 0 2rem;
    }

    /* Chart containers: Prevent 380px overflow */
    .chart-card [style*="max-width: 380px"] {
        max-width: 100% !important;
    }

    /* Ribbons: Even tighter on small phones */
    .period-selector {
        padding: 0.375rem 0.5rem !important;
        margin-bottom: 0.75rem;
        gap: 0.25rem 0.375rem;
    }

    .period-selector .custom-select-trigger {
        height: 28px !important;
        font-size: var(--text-xs);
        padding: 0 0.5rem;
    }

    .period-selector .custom-select {
        min-width: 100px;
    }

    .period-selector label {
        font-size: var(--text-xs);
    }

    .report-filter-bar {
        margin-bottom: 0.75rem;
    }

    .report-filter-toggle {
        padding: 0.375rem 0.625rem;
    }

    .az-filter-ribbon {
        padding: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* ── Step 1 (480px): AI chat container — shorter ── */
    #aiPage [style*="max-height: 70vh"] { max-height: 50vh !important; }

    /* ── Step 7: A-Z filter ribbon — compact on small mobile ── */
    .az-filter-ribbon button { padding: 0.2rem !important; font-size: 10px !important; }

    /* ── A2: Password strength checklist — single column ── */
    .password-strength__checklist {
        grid-template-columns: 1fr;
    }

    /* ── A6: Data retention select — full width ── */
    #retentionMonthsSelect {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────
   TINY MOBILE: ≤360px (Very small screens)
   ───────────────────────────────────────────────────────── */
@media (max-width: 360px) {
    .content-wrapper {
        padding: 0.5rem;
    }

    .top-panel {
        padding: 0 0.5rem;
        gap: 0.25rem;
    }

    .profile-popover {
        right: 0.5rem;
        width: 240px;
        padding: 0.75rem 0.75rem 0.5rem;
    }

    .page-title {
        font-size: var(--text-xl);
    }

    .page-subtitle {
        font-size: var(--text-xs);
    }

    .page-header {
        margin-bottom: 1rem;
    }

    .stat-value {
        font-size: var(--text-xl);
    }

    .stat-label {
        font-size: var(--text-2xs);
    }

    .stat-card {
        padding: var(--space-2);
    }

    /* Tabs: icon-only or very compact */
    .dm-tabs__tab {
        padding: 0.375rem 0.5rem;
        font-size: var(--text-2xs);
        gap: 0.25rem;
    }

    .dm-tabs__tab-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Tables */
    table th,
    table td {
        padding: 0.375rem 0.5rem;
        font-size: var(--text-xs);
    }

    /* Modal */
    .modal-content {
        padding: var(--space-2);
    }

    /* Auth */
    .auth-box {
        padding: var(--space-2);
    }

    .auth-title {
        font-size: var(--text-xl);
    }

    /* Search */
    .search-container {
        max-width: 140px;
    }

    /* Chart cards */
    .chart-card {
        padding: var(--space-2);
    }

    /* Period selector */
    .period-selector {
        padding: 0.25rem 0.375rem !important;
        gap: 0.125rem 0.25rem;
    }

    .period-selector label {
        font-size: var(--text-2xs);
    }

    .period-selector .custom-select-trigger {
        height: 26px !important;
        font-size: var(--text-2xs);
        padding: 0 0.375rem;
    }

    .period-selector .custom-select {
        min-width: 80px;
    }

    /* A-Z filter */
    .az-filter-ribbon {
        padding: 0.375rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Buttons */
    .btn-primary-premium {
        font-size: var(--text-xs);
        padding: 0.375rem 0.75rem;
    }

    .btn-primary-premium svg {
        width: 14px;
        height: 14px;
    }

    /* Logo */
    .logo img {
        height: 32px;
    }

    .logo-text {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────
   DESKTOP ONLY: Hide hamburger on desktop
   ───────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .hamburger-btn {
        display: none;
    }

    .sidebar-overlay {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   AI ASSISTANT - TYPING INDICATOR
   ═══════════════════════════════════════════════════════ */
.typing-dots {
    display: inline-block;
    animation: typing-pulse 1.4s ease-in-out infinite;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--corona);
}

@keyframes typing-pulse {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
}