:root {
    --portal-primary: #1a1a1a;
    --portal-accent: #f39c12;
    --portal-bg: #f5f7fa;

    /* Shared theme token for UI components (SweetAlert2, etc.) */
    --theme-color: var(--portal-accent);

    /* SweetAlert2 tokens */
    --mk-swal-radius: 14px;
    --mk-swal-btn-radius: 10px;
}

body {
    background: var(--portal-bg);
}

/* Navbar */
.portal-navbar {
    background: #ffffff;
    border-bottom: 3px solid var(--portal-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.portal-navbar .navbar-brand {
    font-weight: 700;
    font-size: 20px;
    color: var(--portal-primary) !important;
    padding-top: 2px;
    padding-bottom: 2px;
}

.portal-navbar .navbar-brand img {
    width: auto !important;
    height: 44px !important;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

.portal-navbar .navbar-brand i {
    color: var(--portal-accent);
    margin-right: 8px;
}

.portal-navbar .nav-link {
    color: #666 !important;
    margin: 0 6px;
    transition: color 0.2s ease;
}

.portal-navbar .nav-link:hover,
.portal-navbar .nav-link.active {
    color: var(--portal-accent) !important;
}

.portal-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--portal-accent) 0%, #e67e22 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

/* Utilities */
.no-print {
    /* used by print styles in pages */
}

.pre-wrap {
    white-space: pre-wrap;
}

@media print {
    body {
        background: #ffffff !important;
    }

    .no-print,
    .portal-navbar {
        display: none !important;
    }

    .container {
        max-width: none !important;
    }

    .invoice-document {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* ============================
   SweetAlert2 (MK styling)
   ============================ */

.swal2-popup,
.mk-swal-popup {
    border-radius: var(--mk-swal-radius) !important;
}

.swal2-toast {
    border-radius: var(--mk-swal-radius) !important;
}

.mk-swal-btn {
    border-radius: var(--mk-swal-btn-radius) !important;
    font-weight: 600;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Confirm button = corporate theme color */
.mk-swal-btn-confirm {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

.mk-swal-btn-confirm:hover {
    filter: brightness(0.95);
}

.mk-swal-btn-confirm:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--theme-color) 28%, transparent);
}

.swal2-timer-progress-bar {
    background: var(--theme-color) !important;
}

/* Fade-in / fade-out (SaaS-ish micro interaction) */
@keyframes mkSwalFadeIn {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mkSwalFadeOut {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, 6px, 0); }
}

@keyframes mkSwalBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mkSwalBackdropOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.mk-swal-fade-in { animation: mkSwalFadeIn 160ms ease-out; }
.mk-swal-fade-out { animation: mkSwalFadeOut 120ms ease-in; }
.mk-swal-backdrop-fade-in { animation: mkSwalBackdropIn 160ms ease-out; }
.mk-swal-backdrop-fade-out { animation: mkSwalBackdropOut 120ms ease-in; }

/* ============================================================
   MOBILE-FIRST RESPONSIVE SYSTEM
   Global utility classes and baseline fixes.
   Applied across all pages — no per-page JS or HTML required.
   ============================================================ */

/* ── 0. Overflow protection ──────────────────────────────── */
html {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* ── 1. .mobile-scroll ───────────────────────────────────── */
/* Controlled horizontal scroll region (replaces overflow-x  */
/* on individual table / content wrappers).                  */
.mobile-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* ── 2. .mobile-stack ────────────────────────────────────── */
/* Flex row that collapses to full-width column on phones.   */
.mobile-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 575.98px) {
    .mobile-stack {
        flex-direction: column;
        align-items: stretch;
    }
    .mobile-stack > * {
        width: 100%;
    }
}

/* ── 3. .table-mobile ────────────────────────────────────── */
/* Table wrapper: always touch-scrollable horizontally.      */
.table-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

/* ── 4. .btn-touch ───────────────────────────────────────── */
/* WCAG 2.5.5 — minimum 44 × 44 px interactive area.        */
.btn-touch {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── 5. .mobile-actions ──────────────────────────────────── */
/* Action button bar: wraps on tablet, stacks on phone.      */
.mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 575.98px) {
    .mobile-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .mobile-actions > *,
    .mobile-actions a,
    .mobile-actions button {
        width: 100%;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   GLOBAL TOUCH TARGET — btn overrides on mobile
   ============================================================ */
@media (max-width: 767.98px) {
    /* Standard buttons need 44px tap area */
    .btn:not(.btn-close):not(.navbar-toggler) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* btn-sm gets slightly relaxed target (still ≥ 38px) */
    .btn-sm:not(.btn-close) {
        min-height: 38px;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    /* Inline table action buttons can stay compact */
    .table .btn,
    .table .btn-sm {
        min-height: 34px;
        padding: 0.25rem 0.5rem;
    }
}

/* ============================================================
   GLOBAL ACTION GROUP FIX
   Targets .action-group used in quotation-detail, appointments.
   Overrides per-page min-width: 120px on mobile.
   ============================================================ */
.action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .action-group {
        flex-direction: column;
        align-items: stretch;
    }
    .action-group a,
    .action-group button {
        min-width: unset !important;
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   GLOBAL TABLE FIXES
   ============================================================ */

/* Ensure table-responsive uses touch scroll everywhere */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Actions cells: allow wrap on mobile so buttons don't
   force the whole table to scroll horizontally.             */
@media (max-width: 767.98px) {
    .table .actions,
    td.actions {
        white-space: normal !important;
    }

    .table .actions a,
    .table .actions button,
    td.actions a,
    td.actions button {
        display: inline-flex;
        min-height: 34px;
        align-items: center;
        margin: 1px;
    }
}

/* Wizard step nav: hide scrollbar but keep scroll gesture */
@media (max-width: 767.98px) {
    .wizard-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .wizard-nav::-webkit-scrollbar {
        display: none;
    }
}

/* Price grids — override page-level white-space: nowrap and
   min-width inside table-responsive wrappers.               */
@media (max-width: 575.98px) {
    .dak-grid th,
    .dak-grid td,
    .zw-grid th,
    .zw-grid td {
        white-space: normal !important;
        min-width: 72px !important;
    }

    .zs-grid th,
    .zs-grid td {
        min-width: 72px !important;
    }

    .zs-grid input {
        width: 64px !important;
    }
}

/* ============================================================
   GLOBAL MODAL RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 575.98px) {
    /* All modals go nearly full-screen on phones unless they
       already declare modal-fullscreen-sm-down.              */
    .modal-dialog:not(.modal-fullscreen-sm-down):not(.modal-fullscreen) {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-xl,
    .modal-lg {
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-header {
        padding: 0.75rem 1rem;
    }

    .modal-footer {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer > *:not(.btn-close) {
        flex: 1 1 auto;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   GLOBAL FORM FIXES ON MOBILE
   ============================================================ */
@media (max-width: 575.98px) {
    /* Inputs with inline max-width / width must expand on mobile */
    .form-control,
    .form-select {
        max-width: 100% !important;
    }

    /* Input groups with fixed pixel widths */
    .input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* range-row inline flex becomes column */
    .range-row {
        flex-wrap: wrap;
    }
    .range-row .form-control {
        max-width: 100% !important;
        flex: 1 1 80px;
    }

    /* Slot time-picker buttons: allow wrap, maintain touch size */
    .slot-btn {
        min-height: 38px;
        min-width: 72px !important;
        flex: 0 0 auto;
    }
}

/* ============================================================
   NAVBAR MOBILE IMPROVEMENTS
   ============================================================ */
@media (max-width: 991.98px) {
    /* Touch-friendly nav links in collapsed menu */
    .portal-navbar .nav-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Detach user section border when menu is collapsed */
    .portal-navbar .navbar-collapse .ms-3.ps-3.border-start {
        border-left: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-top: 1px solid #f0f0f0 !important;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
    }
}

/* ============================================================
   320–360px MINIMUM VIEWPORT SUPPORT
   ============================================================ */
@media (max-width: 360px) {
    html {
        font-size: 15px;
    }

    .container,
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.25rem; }
    h3, .h3 { font-size: 1.1rem; }

    .card {
        border-radius: 0.5rem;
    }

    .btn-sm {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }
}

/* ── End of Mobile-First Responsive System ──────────────── */