/* ============================================================
   RISIQ Responsive CSS — 2026-03-26
   
   3-tier layout:
     ≥ 1200px          Desktop    — untouched, zero rules here
     768px – 1199px    Tablet     — iPad portrait/landscape
     < 768px           Phone      — compact mobile

   All rules here are scoped. Desktop is NEVER affected.
============================================================ */


/* ============================================================
   TIER 1 — TABLET (iPad portrait 768px, landscape 1024px)
   Conservative: keep 2-col layouts, just scale down spacing.
============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {

    /* Sidebar overlay fix — same on all non-desktop */
    .layout-menu-expanded .layout-overlay { left: 16.25rem !important; }
    .layout-menu { z-index: 1200 !important; }

    /* Hide info boxes — boilerplate nobody reads */
    .alert.bg-light[role="alert"] { display: none !important; }

    body { font-size: 0.85rem; }

    .container-xxl,
    .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }

    .card { margin-bottom: 0.75rem !important; }
    .card-header { padding: 0.6rem 1rem !important; }
    .card-body { padding: 0.75rem 1rem !important; }

    /* Tables — scroll horizontally, slightly smaller font */
    .table-responsive, .dataTables_wrapper, .card-datatable {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table.dataTable, .table { font-size: 0.82rem !important; }
    table td, table th { padding: 0.3rem 0.5rem !important; white-space: nowrap; }
    table td .btn-group, table td .d-flex { flex-wrap: nowrap !important; }

    /* col-9/col-3 — on tablet (iPad landscape 1024px) there's room to keep them.
       On iPad portrait (~768px) col-3 = 25% of 768 = 192px — still workable.
       Only stack below 900px where col-3 starts getting too narrow.         */
    @media (max-width: 900px) {
        .col-9 { flex: 0 0 100% !important; max-width: 100% !important; }
        .col-3 { flex: 0 0 100% !important; max-width: 100% !important; }

        .col-3 .card-body img.img-responsive {
            max-width: 100px !important; width: 100px !important;
            height: 100px !important; object-fit: cover;
            border-radius: 50% !important; display: block; margin: 0 auto 0.5rem !important;
        }
        .col-3 .card-body .btn.w-100 {
            width: auto !important; display: inline-flex !important;
            margin: 0.2rem 0.15rem !important;
            font-size: 0.75rem !important; padding: 0.2rem 0.5rem !important;
        }
        .col-3 .card-body {
            display: flex; flex-wrap: wrap;
            align-items: center; justify-content: center;
        }
        .col-3 .card-body hr { margin: 0.3rem 0 !important; }
    }

    /* Risk counter cards — on tablet keep 6-in-a-row like desktop */
    .row.g-4 > .col-12.col-md-6.col-lg-2 {
        flex: 0 0 16.66% !important;
        max-width: 16.66% !important;
        padding: 0.3rem !important;
    }
    .info-box { padding: 0.6rem 0.5rem !important; }
    .info-label { font-size: 0.65rem !important; line-height: 1.2; }
    .info-value { font-size: 1.3rem !important; font-weight: 700; }

    /* Executive summary tighter */
    .card-body.p-0 > div { padding: 0.75rem 1rem !important; }

    /* Modals */
    .modal-dialog { margin: 1rem auto !important; }
    .modal-body { max-height: 70vh; overflow-y: auto; }

    /* Code/pre */
    pre, code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; max-width: 100%; font-size: 0.75rem !important; }

    /* Charts */
    canvas { max-width: 100% !important; height: auto !important; }

    /* Tabs */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link { white-space: nowrap; }

    .badge { font-size: 0.7rem !important; }
}


/* ============================================================
   TIER 2 — PHONE (< 768px)
   Aggressive: small font, compact spacing, no 2-col forms.
============================================================ */
@media (max-width: 767px) {

    /* Sidebar overlay fix */
    .layout-menu-expanded .layout-overlay { left: 16.25rem !important; }
    .layout-menu { z-index: 1200 !important; }

    /* Hide info boxes */
    .alert.bg-light[role="alert"] { display: none !important; }

    body { font-size: 0.8rem !important; }

    .container-xxl,
    .container-fluid { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }

    .layout-navbar .navbar { padding: 0.35rem 0.6rem !important; }
    .navbar-nav.flex-row { flex-wrap: wrap; }
    .breadcrumb { font-size: 0.7rem !important; margin-bottom: 0.2rem !important; }

    /* Cards */
    .card { overflow: hidden; margin-bottom: 0.6rem !important; }
    .card-header { padding: 0.5rem 0.75rem !important; font-size: 0.8rem !important; }
    .card-body { padding: 0.6rem 0.75rem !important; }
    .card-body.p-4 { padding: 0.6rem 0.75rem !important; }

    /* Typography */
    h4, h5, h6, .fs-5, .fs-4 { font-size: 0.88rem !important; }
    p, li { font-size: 0.78rem !important; line-height: 1.5 !important; }
    .form-label, label { font-size: 0.75rem !important; margin-bottom: 0.2rem !important; }
    .form-control, .form-select {
        font-size: 0.78rem !important;
        padding: 0.25rem 0.5rem !important;
        height: auto !important;
    }

    /* Buttons */
    .btn { font-size: 0.78rem !important; padding: 0.25rem 0.6rem !important; }
    .btn-sm { font-size: 0.72rem !important; padding: 0.18rem 0.4rem !important; }
    .badge { font-size: 0.65rem !important; padding: 0.25em 0.45em !important; }

    /* Tables */
    .table-responsive, .dataTables_wrapper, .card-datatable {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table.dataTable, .table { font-size: 0.75rem !important; min-width: 480px; }
    table td, table th { padding: 0.25rem 0.4rem !important; white-space: nowrap; }
    table td .btn-group, table td .d-flex { flex-wrap: nowrap !important; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { font-size: 0.72rem !important; }
    .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0.15rem 0.35rem !important; }

    /* Detail page — col-9 info + col-3 sidebar: stack vertically */
    .col-9 { flex: 0 0 100% !important; max-width: 100% !important; }
    .col-3 { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Profile avatar */
    .col-3 .card-body img.img-responsive {
        max-width: 90px !important; width: 90px !important;
        height: 90px !important; object-fit: cover;
        border-radius: 50% !important; display: block; margin: 0 auto 0.4rem !important;
    }
    .col-3 .card-body hr { margin: 0.3rem 0 !important; }
    .col-3 .card-body .btn.w-100 {
        width: auto !important; display: inline-flex !important;
        margin: 0.2rem 0.1rem !important;
        font-size: 0.72rem !important; padding: 0.18rem 0.45rem !important;
    }
    .col-3 .card-body {
        display: flex; flex-wrap: wrap;
        align-items: center; justify-content: center;
    }

    /* Risk counter cards — 3 per row on phone */
    .row.g-4 > .col-12.col-md-6.col-lg-2 {
        flex: 0 0 33.33% !important;
        max-width: 33.33% !important;
        padding: 0.2rem !important;
    }
    .info-box { padding: 0.5rem 0.4rem !important; min-height: unset !important; }
    .info-label { font-size: 0.6rem !important; line-height: 1.2; }
    .info-value { font-size: 1.1rem !important; font-weight: 700; }

    /* Executive summary */
    .card-body.p-0 > div { padding: 0.6rem 0.75rem !important; }
    .card-body.p-0 > div > div:first-child { margin-bottom: 0.35rem !important; }

    /* Modals */
    .modal-dialog { margin: 0.4rem !important; max-width: calc(100vw - 0.8rem) !important; }
    .modal-header { padding: 0.5rem 0.75rem !important; }
    .modal-body { padding: 0.6rem 0.75rem !important; max-height: 65vh; overflow-y: auto; }
    .modal-footer { padding: 0.4rem 0.75rem !important; }

    /* Accordion */
    .accordion-button { font-size: 0.78rem !important; padding: 0.5rem 0.75rem !important; }
    .accordion-body { padding: 0.6rem 0.75rem !important; font-size: 0.78rem !important; }

    /* Tabs */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link { white-space: nowrap; font-size: 0.75rem !important; padding: 0.3rem 0.5rem !important; }

    /* Code / pre blocks */
    pre, code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; max-width: 100%; font-size: 0.68rem !important; }

    /* Charts */
    canvas { max-width: 100% !important; height: auto !important; }

    /* Modal z-index fix — Sneat layout-overlay sits at z-index:1099 and blocks
       modal buttons when navigating from the sidebar. Raise modals above it. */
    .modal-backdrop { z-index: 1100 !important; }
    .modal          { z-index: 1150 !important; }
}

/* Confirmation modals: center Cancel + action buttons (all viewports) */
.modal-dialog-centered .modal-footer,
.modal-footer.justify-content-center {
  justify-content: center !important;
}