/* ===========================================================================
   CyberSee — Responsive Enhancement Layer
   ─────────────────────────────────────────
   Mobile-first responsive strategy for the dashboard.
   Standardized breakpoints:
     - sm:  576px   (landscape phones)
     - md:  768px   (tablets)
     - lg:  992px   (small laptops)
     - xl:  1200px  (desktops)
     - xxl: 1400px  (large desktops)

   DEPENDS ON: tokens.css, core.css (loaded before this file)
   =========================================================================== */


/* =============================================================================
   §01  CSS Custom Properties for Responsive
============================================================================= */

:root {
    --content-padding: 16px;
    --dashboard-gap: 20px;
}

@media (min-width: 768px) {
    :root {
        --content-padding: 24px;
        --dashboard-gap: 24px;
    }
}

@media (min-width: 1200px) {
    :root {
        --content-padding: 28px;
        --dashboard-gap: 28px;
    }
}


/* =============================================================================
   §02  Sidebar — Tablet Auto-Collapse & Mobile Overlay
   Task 3: Fix sidebar layout on tablet breakpoint
============================================================================= */

/* ── Tablet (768px–991px): auto-collapse sidebar to icon-only ── */
@media (max-width: 991px) and (min-width: 769px) {
    .sidebar {
        width: var(--sidebar-collapsed-width) !important;
        padding: 14px 6px !important;
    }

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

    .sidebar .logo .site-name {
        display: none !important;
    }

    .sidebar .logo {
        justify-content: center;
        padding: 0 0 16px;
    }

    .sidebar .sidebar-item a,
    .sidebar .sidebar-item button {
        justify-content: center;
        padding: 12px 8px;
    }

    .sidebar .arrow-icon {
        display: none !important;
    }

    .sidebar-item.has-submenu .submenu {
        position: fixed;
        left: var(--sidebar-collapsed-width);
        top: auto;
        width: 220px;
        background: var(--brand-sidebar-bg);
        border: 1px solid var(--brand-border);
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
        z-index: 100;
        padding: 8px;
    }

    .sidebar-item.has-submenu .submenu .sidebar-text {
        display: inline !important;
    }

    /* Adjust main content margin for collapsed sidebar */
    body.sidebar-expanded .layout-header,
    body.sidebar-expanded .layout-footer,
    body.sidebar-expanded .main-content {
        margin-inline-start: var(--sidebar-collapsed-width) !important;
        inline-size: calc(100% - var(--sidebar-collapsed-width)) !important;
        width: calc(100% - var(--sidebar-collapsed-width)) !important;
    }
}

/* ── Mobile (<768px): sidebar as full overlay from top ── */
@media (max-width: 768px) {
    .sidebar {
        z-index: 1060;
        top: 0 !important;
        height: 100vh;
        transition: transform 0.25s ease;
    }

    .sidebar:not(.expanded) {
        transform: translateX(-100%) !important;
    }

    .sidebar.expanded {
        width: 280px !important;
        max-width: 85vw;
        transform: translateX(0) !important;
    }

    /* Close button inside sidebar on mobile */
    .sidebar .sidebar-close-btn {
        display: flex !important;
        position: absolute;
        top: 16px;
        right: 12px;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        border: none;
        background: color-mix(in srgb, var(--brand-fg, #fff) 10%, transparent);
        color: var(--brand-fg, #fff);
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
        z-index: 10;
        transition: background 0.15s ease;
    }

    .sidebar .sidebar-close-btn:hover {
        background: color-mix(in srgb, var(--brand-fg, #fff) 20%, transparent);
    }

    /* Overlay backdrop when sidebar is open — managed by JS (#sidebar-backdrop) */
    #sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1059;
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    #sidebar-backdrop.hidden {
        opacity: 0;
        pointer-events: none;
    }

    /* Header stays below sidebar overlay */
    .dashboard-header {
        z-index: 1030;
    }
}

/* Hide close button and backdrop on desktop */
@media (min-width: 769px) {
    .sidebar .sidebar-close-btn {
        display: none !important;
    }

    #sidebar-backdrop {
        display: none !important;
    }
}


/* =============================================================================
   §03  KPI Hero Cards — Responsive
   Task 2: Make KPI hero cards responsive on mobile
============================================================================= */

/* ── Mobile (<576px): stack everything vertically ── */
@media (max-width: 576px) {
    .kpi-dashboard {
        gap: 12px;
    }

    .kpi-hero-card {
        flex-direction: column;
        padding: 16px;
        gap: 16px;
        border-radius: 12px;
    }

    .kpi-hero-left {
        min-width: unset;
        max-width: 100%;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--brand-border);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
    }

    .kpi-hero-header {
        width: 100%;
        margin-bottom: 8px;
    }

    .kpi-hero-value {
        font-size: 36px !important;
        margin-bottom: 8px;
    }

    .kpi-hero-trend {
        font-size: 12px;
    }

    .kpi-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .kpi-service-card {
        padding: 10px !important;
    }

    .kpi-service-value {
        font-size: 18px !important;
    }

    .kpi-service-label {
        font-size: 11px;
    }

    .kpi-service-icon {
        width: 28px;
        height: 28px;
    }

    .kpi-service-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Secondary stat cards */
    .kpi-secondary-section {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .kpi-keywords-card {
        grid-column: span 1 !important;
    }

    .kpi-stat-card {
        padding: 14px;
    }

    .kpi-stat-value {
        font-size: 28px;
    }

    .kpi-mini-stat {
        font-size: 12px;
    }
}

/* ── Small tablets (577px–768px): 2-column services, compact hero ── */
@media (min-width: 577px) and (max-width: 768px) {
    .kpi-hero-card {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .kpi-hero-left {
        min-width: unset;
        max-width: 100%;
        padding-right: 0;
        padding-bottom: 20px;
        border-right: none;
        border-bottom: 1px solid var(--brand-border);
    }

    .kpi-hero-value {
        font-size: 44px;
    }

    .kpi-services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px;
    }

    .kpi-secondary-section {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kpi-keywords-card {
        grid-column: span 2 !important;
    }
}

/* ── Tablets (769px–991px): compact hero, 3-col services ── */
@media (min-width: 769px) and (max-width: 991px) {
    .kpi-hero-value {
        font-size: 48px;
    }

    .kpi-services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .kpi-secondary-section {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* =============================================================================
   §04  Data Tables — Horizontal Scroll on Mobile
   Task 4: Make data tables horizontally scrollable on mobile
============================================================================= */

/* ── All screens below lg: ensure table container allows scroll ── */
@media (max-width: 991px) {
    .responsive-table {
        overflow: visible;
        position: relative;
    }
}

/* ── Mobile (<992px): force horizontal scroll with min-width ── */
@media (max-width: 991px) {

    .phishing-table,
    .config-table {
        min-width: 900px;
    }

    .table-viewport {
        /* Show horizontal scrollbar on mobile for discoverability */
        scrollbar-width: thin;
    }

    .table-viewport::-webkit-scrollbar {
        height: 6px;
        display: block;
    }

    .table-viewport::-webkit-scrollbar-thumb {
        background: var(--brand-border);
        border-radius: 3px;
    }

    .table-viewport::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* ── Sticky first column on mobile for context ── */
@media (max-width: 768px) {

    .phishing-table thead th:first-child,
    .phishing-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 5;
        background: var(--brand-elev, var(--bs-card-bg));
    }

    /* Shadow to indicate scroll */
    .phishing-table thead th:first-child::after,
    .phishing-table tbody td:first-child::after {
        content: "";
        position: absolute;
        top: 0;
        right: -8px;
        bottom: 0;
        width: 8px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
        pointer-events: none;
    }

    html[data-bs-theme="dark"] .phishing-table thead th:first-child::after,
    html[data-bs-theme="dark"] .phishing-table tbody td:first-child::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
    }

    /* Reduce table cell padding on mobile */
    .phishing-table thead th,
    .phishing-table tbody td {
        padding: 8px 10px;
        font-size: 13px;
    }

    /* Reduce min-height of viewport on mobile */
    .table-viewport {
        min-height: 300px;
    }

    /* Header toolbar stacks on mobile */
    .header-toolbar {
        flex-direction: column;
        gap: 12px;
    }

    .header-toolbar .d-flex {
        flex-wrap: wrap;
    }
}

/* ── Extra small (<576px): more compact tables ── */
@media (max-width: 576px) {

    .phishing-table thead th,
    .phishing-table tbody td {
        padding: 6px 8px;
        font-size: 12px;
    }

    .phishing-table {
        min-width: 750px;
    }

    /* Scroll hint gradient on the right edge */
    .responsive-table::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to left, var(--brand-bg, #fff), transparent);
        pointer-events: none;
        z-index: 2;
    }

    html[data-bs-theme="dark"] .responsive-table::after {
        background: linear-gradient(to left, var(--brand-bg, #121721), transparent);
    }
}


/* =============================================================================
   §05  Charts — Responsive
   Task 5: Responsive charts resizing
============================================================================= */

/* Ensure chart containers are fluid */
.apexcharts-canvas {
    max-width: 100% !important;
}

/* Charts adapt to container width automatically via JS ResizeObserver
   (see public/js/views/livewire-dashboard-main-dashboard.js) */

@media (max-width: 991px) {
    .chart-height {
        min-height: 220px !important;
        height: 340px !important;
    }

    /* Chart grid columns become full-width */
    .chart.col-8,
    .chart.col-6 {
        grid-column: span 12;
    }

    .chart.col-4 {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .chart-height {
        min-height: 180px !important;
    }

    /* All chart columns go full-width */
    .chart.col-6,
    .chart.col-4,
    .col-6,
    .col-4 {
        grid-column: span 12;
    }

    /* Reduce chart toolbar button size on mobile */
    .apexcharts-toolbar button,
    .apexcharts-toolbar .apexcharts-menu-icon,
    .apexcharts-toolbar .apexcharts-reset-icon {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 576px) {
    .chart-height {
        min-height: 160px !important;
    }

    /* Hide chart toolbar on very small screens to save space */
    .apexcharts-toolbar {
        display: none !important;
    }

    /* Google GeoChart container */
    #stealerLogsMap {
        min-height: 200px;
    }
}


/* =============================================================================
   §06  Modals — Full Screen on Mobile
   Task 6: Make modals full-screen on mobile
============================================================================= */

/* ── Tablets (<768px): wider modals ── */
@media (max-width: 768px) {
    .modal .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    .modal .modal-dialog.modal-lg,
    .modal .modal-dialog.modal-xl {
        max-width: 100%;
        margin: 0;
    }

    .modal .modal-dialog.modal-lg .modal-content,
    .modal .modal-dialog.modal-xl .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    /* Offcanvas wider on tablet */
    .offcanvas {
        --bs-offcanvas-width: min(420px, 90vw) !important;
    }

    /* Modals opened from offcanvas (nested) */
    .modals-offcanvas-right .modal .modal-dialog {
        width: 95vw;
        max-width: 95vw;
    }
}

/* ── Mobile (<576px): all modals full-screen ── */
@media (max-width: 576px) {
    .modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
        width: 100%;
    }

    .modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
        border: none;
    }

    /* Modal header compact */
    .modal .modal-header {
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--brand-elev-2, var(--bs-modal-header-bg));
    }

    .modal .modal-title {
        font-size: 16px;
    }

    /* Modal body scrollable */
    .modal .modal-body {
        padding: 16px;
        flex: 1;
        overflow-y: auto;
    }

    /* Modal footer sticky at bottom */
    .modal .modal-footer {
        padding: 12px 16px;
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: var(--brand-elev, var(--bs-modal-bg));
        border-top: 1px solid var(--brand-border);
    }

    .modal .modal-footer .btn {
        flex: 1;
        min-width: 0;
    }

    /* Offcanvas full-width */
    .offcanvas {
        --bs-offcanvas-width: 100vw !important;
    }

    /* Centered dialog also goes full-screen */
    .modal .modal-dialog-centered {
        align-items: stretch;
        min-height: 100vh;
    }

    /* Scrollable dialog takes full height */
    .modal .modal-dialog-scrollable {
        max-height: 100vh;
    }

    .modal .modal-dialog-scrollable .modal-content {
        max-height: 100vh;
    }
}


/* =============================================================================
   §07  Filter Sidebar — Offcanvas on Mobile
   Task 7: Responsive filter sidebar as offcanvas on mobile
============================================================================= */

/* ── Tablet (<768px): stack filters vertically ── */
@media (max-width: 768px) {
    .filters-bar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .filters-slab {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-left,
    .filters-right {
        width: 100%;
    }

    .search-container {
        max-width: 100%;
        min-width: 0;
    }

    .filters-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .filters-row::-webkit-scrollbar {
        display: none;
    }

    /* Filter chips don't wrap — horizontal scroll instead */
    .filters-row .dropdown,
    .filters-row .btn {
        flex-shrink: 0;
    }

    .filters-actions {
        justify-content: stretch;
        width: 100%;
    }

    .filters-actions .btn {
        flex: 1;
    }

    .dropdown-menu-filter {
        max-width: 95vw;
        min-width: unset !important;
    }

    /* Filter dropdown menus position fixed on mobile for better UX */
    .dropdown-menu-filter.show {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: 0 !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
        transform: none !important;
        width: auto !important;
        z-index: 1060;
    }

    /* Backdrop for filter dropdown */
    .dropdown-menu-filter.show::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: -1;
    }
}

/* ── Mobile (<576px): even more compact filters ── */
@media (max-width: 576px) {
    .filters-slab {
        padding: 8px;
        gap: 8px;
    }

    .filter-chip {
        font-size: 12px;
        padding: 4px 8px;
    }

    .chip-count {
        font-size: 10px;
    }

    .search-input {
        font-size: 14px;
        height: 36px;
    }

    /* Export/Clear buttons compact */
    .filters-actions .btn {
        font-size: 13px;
        padding: 6px 12px;
    }

    .btn-clear-filters {
        position: unset;
    }
}


/* =============================================================================
   §08  Notification Dropdown — Overflow Fix
   Task 8: Fix notification dropdown overflow on small screens
============================================================================= */

/* ── Mobile (<768px): notification dropdown under the bell icon ── */
@media (max-width: 768px) {
    .csn-dd {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
    }

    .csn-list {
        max-height: 55vh;
    }

    .csn-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 8px;
    }

    .csn-item {
        padding: 10px 12px;
    }

    .csn-ico {
        width: 36px;
        height: 36px;
    }

    .csn-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
}

@media (max-width: 576px) {
    .csn-btn {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }
}


/* =============================================================================
   §09  Dashboard Header — Responsive
============================================================================= */

/* ── Tablet (<768px): compact header ── */
@media (max-width: 768px) {
    .dashboard-header {
        padding: 8px 12px;
    }

    .dashboard-header .header-bar {
        gap: 8px;
    }

    .dashboard-header .header-actions {
        gap: 8px !important;
    }

    /* Tour button: icon only */
    .cs-tour-btn .label {
        display: none;
    }

    .cs-tour-btn {
        padding: 6px 8px;
        border-radius: 8px;
    }

    /* Time period: compact */
    .time-period {
        font-size: 11px;
        white-space: nowrap;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Toggle sidebar button compact */
    .toggle-switch-sidebar {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 8px;
    }

    /* Avatar smaller */
    .avatar-trigger {
        --_size: 30px;
    }

    .avatar-initials {
        font-size: 10px;
    }

    /* btn-icon smaller */
    .csn-btn,
    .dashboard-header .btn-icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .dashboard-header .btn-icon i {
        font-size: 14px;
    }

    /* Theme toggle compact */
    .theme-toggle-skin {
        height: 30px;
    }
}

/* ── Mobile (<576px): minimal header ── */
@media (max-width: 576px) {
    .dashboard-header {
        padding: 6px 8px;
    }

    .dashboard-header .header-bar {
        gap: 4px;
    }

    .dashboard-header .header-actions {
        gap: 6px !important;
    }

    /* Hide tour button completely on very small screens */
    .cs-tour-btn {
        display: none !important;
    }

    /* Hide time period on very small screens */
    .time-period {
        display: none;
    }

    /* Sidebar toggle compact */
    .toggle-switch-sidebar {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 6px;
        box-shadow: none;
    }

    .toggle-switch-sidebar i {
        font-size: 16px;
    }

    /* Notification bell compact */
    .notification-bell .btn-link {
        font-size: 16px;
    }

    /* Reduce main content top padding since header is smaller */
    .main-content {
        padding-top: 70px !important;
    }
}

/* ── Extra small (<420px): absolute minimum ── */
@media (max-width: 420px) {
    .dashboard-header .header-actions {
        gap: 4px !important;
    }

    .avatar-trigger {
        --_size: 26px;
    }

    .avatar-initials {
        font-size: 9px;
    }

    .dashboard-header .btn-icon {
        width: 26px;
        height: 26px;
    }

    .dashboard-header .btn-icon i {
        font-size: 13px;
    }

    .toggle-switch-sidebar {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }
}


/* =============================================================================
   §10  Footer — Responsive
============================================================================= */

@media (max-width: 768px) {
    .footer .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .footer .footer-legal {
        font-size: 12px;
    }
}


/* =============================================================================
   §11  General Dashboard Content — Responsive Padding
============================================================================= */

@media (max-width: 768px) {
    .main-content {
        padding: var(--content-padding) !important;
    }

    .management-panel {
        padding: 12px;
    }
}

@media (max-width: 576px) {
    .main-content {
        padding: 12px !important;
    }

    .management-panel {
        padding: 8px;
    }

    /* Page title */
    .header h1 {
        font-size: 22px;
    }
}


/* =============================================================================
   §12  Dropdown Menus — Mobile Fixes
============================================================================= */

/* ── Tablet (<768px): constrain all dropdowns ── */
@media (max-width: 768px) {

    /* Generic Bootstrap dropdowns */
    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    /* Dropdown-end that overflows right */
    .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }

    .csn-dd.dropdown-menu-end {
        right: 0 !important;
        left: 10px !important;
        top: 60px !important;
    }

    /* Status dropdown inside tables */
    .status-dropdown .dropdown-menu {
        min-width: 160px;
        max-width: calc(100vw - 32px);
    }

    /* Filter dropdowns (already handled in §07 but reinforcing) */
    .dropdown-menu-filter {
        min-width: unset !important;
        max-width: calc(100vw - 16px) !important;
    }

    .dropdown-menu-filter .dropdown-scroll {
        max-height: 50vh;
    }

    /* cs-filter panel */
    .dropdown-menu-filter.cs-filter {
        min-width: unset !important;
        max-width: calc(100vw - 16px) !important;
        padding: 10px;
    }

    .cs-filter .row-2 {
        grid-template-columns: 1fr;
    }

    /* User menu dropdown */
    #userMenu+.dropdown-menu {
        min-width: 150px;
    }

    /* Page size dropdown in tables */
    .dropdown .dropdown-menu {
        font-size: 13px;
    }

    .dropdown .dropdown-item {
        padding: 6px 12px;
    }
}

/* ── Mobile (<576px): dropdowns as bottom sheets ── */
@media (max-width: 576px) {

    /* Status dropdown becomes bottom sheet */
    .status-dropdown .dropdown-menu.show {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 0 !important;
        top: auto !important;
        max-height: 50vh;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
        transform: none !important;
        width: auto !important;
        z-index: 1070;
        padding: 12px 8px;
    }

    /* Filter dropdown (cs-filter) bottom sheet */
    .dropdown-menu-filter.cs-filter.show {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1070;
        padding: 16px;
    }

    /* General dropdown menus - constrain */
    .dropdown-menu {
        max-width: calc(100vw - 16px);
        font-size: 13px;
    }
}

/* ── Extra small (<420px) ── */
@media (max-width: 420px) {
    .dropdown-menu-filter.cs-filter {
        padding: 10px;
    }

    .cs-filter .filter-head {
        padding: 4px 4px 8px;
    }
}


/* =============================================================================
   §13  Miscellaneous Mobile Fixes
============================================================================= */

/* ── Action buttons in tables ── */
@media (max-width: 768px) {
    .action-buttons {
        gap: 4px;
    }

    .action-btn,
    .action-btn-view,
    .action-btn-comment {
        padding: 6px 8px;
        font-size: 12px;
    }

    /* Found count / stat items in toolbar */
    .found-count {
        font-size: 12px;
    }

    .stat-item {
        gap: 4px;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .stat-value {
        font-size: 0.8rem;
    }

    /* Link cell - truncate URLs */
    .link-cell a {
        max-width: 150px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .link-cell .cs-logo-round {
        width: 20px !important;
    }

    /* Tags cell compact */
    .tags-cell .ui-badge {
        font-size: 10px;
        padding: 0.25em 0.5em;
    }

    /* Detail grid inside modals */
    .detail-grid {
        gap: 8px;
    }

    .detail-card {
        grid-column: span 12 !important;
    }

    /* Source list items compact */
    .source-list-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .source-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    /* Timeline stat cards */
    .timeline-stat-card {
        padding: 10px;
        gap: 8px;
    }

    .timeline-stat-icon {
        width: 36px;
        height: 36px;
    }

    .timeline-stat-value {
        font-size: 1.1rem;
    }
}

/* ── Tooltip on mobile: wider ── */
@media (max-width: 576px) {
    .tooltip-inner {
        max-width: calc(100vw - 32px) !important;
    }

    .tooltip-inner:has(.risk-tooltip) {
        max-width: calc(100vw - 24px) !important;
    }

    /* Badge sizes compact */
    .ui-badge {
        font-size: 0.65rem;
    }

    /* Form controls */
    .form-control,
    .form-select {
        height: 38px;
        font-size: 14px;
    }

    /* Consent / terms banner */
    .consent-actions {
        flex-direction: column;
    }

    .consent-actions .btn {
        width: 100%;
    }
}