/* ================================================
   mobile.css - Responsive overrides for SpyCent
   Include AFTER app.css in App.razor:
   <link rel="stylesheet" href="@Assets["styles/mobile.css"]" />
   ================================================ */

/* ── Utility grid classes for inline-style replacement ── */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.dash-main {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
}

.dash-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.summary-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: center;
}

.strategy-cards-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.alert-type-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.source-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}


/* ══════════════════════════════════════════════════
   TABLET - max 1024px
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .dash-kpis {
        grid-template-columns: repeat(3, 1fr);
    }

    .dash-main {
        grid-template-columns: 1fr;
    }

    .strategy-cards-5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .alert-type-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ══════════════════════════════════════════════════
   RADZEN DATAGRID - Card Mode (matches app.css 968px)
   This MUST load after app.css to override the broken
   table-layout:fixed + colgroup rules.
   The key: break TABLE display model entirely.
   ══════════════════════════════════════════════════ */
@media (max-width: 968px) {

    .c-table .rz-data-grid,
    .c-table .rz-datatable-scrollable-wrapper,
    .c-table .rz-datatable-scrollable-view {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .c-table table {
        display: block !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    .c-table colgroup {
        display: none !important;
    }

    .c-table thead {
        display: none !important;
    }

    .c-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .c-table tbody tr {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        margin: 12px 0;
        background: #fff;
        border: 1px solid var(--sc-border, #e6eaf2);
        border-radius: 12px;
        padding: 14px 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,.04);
    }

    .c-table tbody tr:hover {
        background: #fff !important;
    }

    .c-table tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box;
        text-align: left !important;
    }

    .c-table tbody td + td {
        border-top: 1px dashed var(--sc-border, #e6eaf2) !important;
        margin-top: 8px;
        padding-top: 8px !important;
    }

    /* Show column title as label above each cell value */
    .c-table tbody td .rz-column-title {
        display: block !important;
        margin-bottom: 4px;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--sc-text-muted, #6b7280);
    }

    /* Hide empty action column titles */
    .c-table tbody td:last-child .rz-column-title:empty {
        display: none !important;
    }

    /* Action buttons: horizontal row */
    .spy-actions-cell {
        display: flex !important;
        gap: 8px;
        justify-content: flex-start;
    }

    /* Radzen pager: keep functional */
    .c-table .rz-paginator {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px 0;
    }

    /* Radzen empty message */
    .c-table .rz-datatable-emptymessage td {
        border: none !important;
        margin: 0 !important;
        padding: 24px 0 !important;
        text-align: center !important;
    }

    .c-table .rz-datatable-emptymessage td + td {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════════
   MOBILE - max 768px
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Page header: stack vertically ── */
    .c-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .c-header__action {
        width: 100%;
        flex-wrap: wrap;
    }

    .c-header__action .c-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }

    /* ── Dashboard KPIs: 2 columns ── */
    .dash-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Summary 3-col → stack ── */
    .summary-3col {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .summary-3col > div {
        border-left: none !important;
        border-right: none !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .summary-3col > div:last-child {
        border-bottom: none;
    }

    /* ── Strategy/Alert cards: 2 columns ── */
    .strategy-cards-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .alert-type-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Source comparison: stack ── */
    .source-split {
        grid-template-columns: 1fr;
    }

    .source-split > div {
        border-right: none !important;
        border-bottom: 1px solid #f1f5f9;
    }

    .source-split > div:last-child {
        border-bottom: none;
    }

    /* ── Cards: reduce padding ── */
    .c-card__body {
        padding: 16px;
    }

    .c-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
    }

    /* ── Stats summary dark section ── */
    .stats-summary-section {
        padding: 10px;
    }

    .stats-summary-card {
        padding: 16px;
    }

    /* ── Billing plan grid: stack ── */
    div[style*="grid-template-columns:repeat("] {
        grid-template-columns: 1fr !important;
    }

    /* ── Usage bars: make full width ── */
    .billing-page .grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Modal dialogs: full width ── */
    div[style*="width:480px"] {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* ── Form grids: stack on phone ── */
    .c-form .grid--2,
    .c-form .grid--3,
    .c-form .grid--4 {
        grid-template-columns: 1fr;
    }

    /* ── Font sizes: slightly smaller ── */
    h2 {
        font-size: 22px;
    }

    h4 {
        font-size: 15px;
    }

    /* ── Page content: less padding ── */
    .page-content {
        padding: 0 8px;
    }
}


/* ══════════════════════════════════════════════════
   SMALL PHONE - max 480px
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── KPIs: single column ── */
    .dash-kpis {
        grid-template-columns: 1fr;
    }

    /* ── Strategy/Alert cards: single column ── */
    .strategy-cards-5,
    .alert-type-cards {
        grid-template-columns: 1fr;
    }

    /* ── Scope cards in Rules/Alerts Edit ── */
    .grid--3 {
        grid-template-columns: 1fr !important;
    }

    /* ── Constraints row: single column ── */
    .grid--4 {
        grid-template-columns: 1fr !important;
    }

    /* ── Action buttons: full width stack ── */
    .c-header__action {
        flex-direction: column;
    }

    .c-header__action .c-btn {
        width: 100%;
    }

    /* ── Tabs: smaller text ── */
    .rz-tabview-nav li .rz-tabview-title {
        font-size: 13px !important;
    }
}