/* ============================================================
   MEGABASKET ADMIN - SAFE RESPONSIVE + PREMIUM POLISH
   Loaded LAST. Kept deliberately conservative: layout/sidebar
   untouched here to avoid breaking SPA navigation.
   ============================================================ */

/* ---------- 1. MODALS: always fit the screen, body scrolls ---------- */
.modal-dialog {
    margin: 1.5rem auto !important;
    max-height: calc(100vh - 3rem);
    width: auto;
    min-width: 0;
}
.modal-dialog .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem);
    width: 100%;
    overflow: hidden;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px -28px rgba(16, 24, 40, 0.35) !important;
}
.modal-dialog .modal-header { flex-shrink: 0; }
.modal-dialog .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1.25rem 1.5rem !important;
}
.modal-dialog .modal-footer { flex-shrink: 0; }

/* Sensible, viewport-capped modal sizes */
.modal-dialog.modal-sm { max-width: 420px !important; }
.modal-dialog.modal-lg { max-width: 860px !important; }
.modal-dialog.modal-xl { max-width: min(1180px, calc(100vw - 2rem)) !important; }
/* Wide editing modals (feature sections, tabs-based forms, etc.) */
.modal-dialog.modal-xxl,
.modal-dialog.mb-modal-wide,
#mymodal .modal-dialog,
.modal-dialog:has(.nav-tabs) {
    max-width: min(1400px, calc(100vw - 2rem)) !important;
}

/* ---------- 2. CONTENT PADDING: breathable + responsive (no layout hacks) ---------- */
#main-content {
    padding: 24px 28px 40px !important;
}

@media (max-width: 1199.98px) {
    #main-content { padding: 18px 18px 32px !important; }
    .page-heading { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 991.98px) {
    #main-content { padding: 14px 14px 28px !important; }
    .page-heading h3 { font-size: 1.35rem !important; }
    .card-header, .card-body { padding-right: 1rem !important; padding-left: 1rem !important; }
}
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
    .modal-dialog.modal-sm,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-xxl,
    .modal-dialog.mb-modal-wide,
    #mymodal .modal-dialog {
        max-width: calc(100vw - 1rem) !important;
    }
    .modal-header { padding: 1rem 1.25rem !important; }
    .modal-body { padding: 1rem 1.25rem !important; }
    .modal-footer {
        padding: 12px 16px !important;
        gap: 12px !important;
    }
    #main-content { padding: 12px 10px 24px !important; }
}

/* ---------- 3. CONTROLS: focus + radius (no layout change) ---------- */
.form-control,
.form-select,
select.form-control {
    border-radius: 10px;
    border: 1px solid #E2E4EA;
    box-shadow: none !important;
}
.form-control:focus,
.form-select:focus,
select.form-control:focus {
    border-color: var(--mb-primary, #FF3D00) !important;
    box-shadow: 0 0 0 3px rgba(255, 61, 0, 0.12) !important;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mb-primary, #FF3D00);
    outline-offset: 2px;
}

/* ---------- 4. CARDS / TABLES (visual only) ---------- */
.card {
    border-radius: 16px;
    border: 1px solid #EAEBF1;
    box-shadow: 0 4px 16px -6px rgba(16, 24, 40, 0.08);
}
.table-responsive {
    border-radius: 14px;
}

/* thin, unobtrusive scrollbars */
.modal-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.modal-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #D0D3DC;
    border-radius: 99px;
}

/* modal entrance (transforms only) */
.modal.fade .modal-dialog {
    transform: translateY(-8px) scale(0.99);
}
.modal.show .modal-dialog {
    transform: none;
}

/* ---------- 5. DARK-MODE SAFE ---------- */
body.theme-dark .modal-content,
body.theme-dark .card {
    border-color: rgba(255, 255, 255, 0.09);
}
body.theme-dark .form-control,
body.theme-dark select.form-control {
    background-color: #1E2029;
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}