/* AQARK CONSOLIDATED DASHBOARD CSS — generated from v1 + v2 + v3 + v31 + premium-v1, preserving order. */

/* ===== SOURCE: aqark-dashboard-v1.css ===== */

/* ==========================================================
   AQARK DASHBOARD DESIGN SYSTEM V1
   Premium property-tech / app-ready dashboard layer
   Safe presentation-only enhancement
   ========================================================== */

:root {
    --aq-dash-navy: #172053;
    --aq-dash-navy-2: #232c73;
    --aq-dash-blue: #2f6fed;
    --aq-dash-baby: #dceaff;
    --aq-dash-bg: #f5f8fc;
    --aq-dash-surface: rgba(255,255,255,.88);
    --aq-dash-surface-solid: #ffffff;
    --aq-dash-border: #dce5f2;
    --aq-dash-text: #111633;
    --aq-dash-muted: #68738b;
    --aq-dash-success: #18a673;
    --aq-dash-warning: #f5b400;
    --aq-dash-danger: #dc4c64;
    --aq-dash-radius-lg: 20px;
    --aq-dash-radius-md: 14px;
    --aq-dash-radius-sm: 10px;
    --aq-dash-shadow:
        0 18px 45px rgba(28,43,92,.08),
        0 3px 10px rgba(28,43,92,.04);
}

/* ==========================================================
   DASHBOARD PAGE FOUNDATION
   ========================================================== */

.portal-page {
    background:
        radial-gradient(circle at 12% 8%, rgba(47,111,237,.07), transparent 28%),
        radial-gradient(circle at 92% 22%, rgba(102,181,255,.07), transparent 24%),
        var(--aq-dash-bg) !important;

    min-height: calc(100vh - 80px);
    padding-top: 28px !important;
    padding-bottom: 64px !important;
}

.portal-container {
    max-width: 1440px !important;
}

.portal-main {
    min-width: 0 !important;
}

/* ==========================================================
   PROFILE / DASHBOARD HERO
   ========================================================== */

.portal-hero {
    position: relative !important;
    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;

    background:
        radial-gradient(circle at 85% 0%, rgba(79,133,255,.26), transparent 35%),
        linear-gradient(125deg, #141d4d 0%, #252d72 62%, #303885 100%) !important;

    color: #ffffff !important;

    padding: 24px 26px !important;
    margin-bottom: 22px !important;

    box-shadow:
        0 24px 55px rgba(21,31,81,.16),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
}

.portal-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    right: -110px;
    top: -170px;

    background: rgba(255,255,255,.05);
    pointer-events: none;
}

html[dir="rtl"] .portal-hero::after {
    right: auto;
    left: -110px;
}

.portal-name-row h1 {
    color: #ffffff !important;
    letter-spacing: -.02em;
}

.portal-hero p,
.portal-contact {
    color: rgba(255,255,255,.78) !important;
}

.portal-avatar {
    background: rgba(255,255,255,.94) !important;
    border: 2px solid rgba(245,180,0,.9) !important;
    color: var(--aq-dash-navy) !important;

    box-shadow:
        0 9px 24px rgba(0,0,0,.12),
        inset 0 1px 0 #fff;
}

.verified-pill {
    border: 1px solid rgba(82,230,183,.38) !important;
    background: rgba(24,166,115,.18) !important;
    color: #a9f0d7 !important;
}

/* ==========================================================
   HERO STATS
   ========================================================== */

.portal-hero-stats {
    overflow: hidden;
    border-radius: 14px !important;

    background: rgba(255,255,255,.09) !important;
    border: 1px solid rgba(255,255,255,.14) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.portal-hero-stats > div {
    border-color: rgba(255,255,255,.1) !important;
    padding: 13px 16px !important;
}

.portal-hero-stats span {
    color: rgba(255,255,255,.68) !important;
    letter-spacing: .055em;
}

.portal-hero-stats b {
    color: #ffffff !important;
}

/* ==========================================================
   DASHBOARD GRID
   ========================================================== */

.portal-grid {
    gap: 22px !important;
    align-items: start !important;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.portal-sidebar {
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important;

    background:
        linear-gradient(180deg, #111a44 0%, #131e4d 100%) !important;

    box-shadow:
        0 20px 50px rgba(20,30,75,.14) !important;

    padding: 14px 12px 18px !important;

    position: sticky;
    top: 90px;
}

.portal-side-brand {
    margin-bottom: 12px !important;
    padding: 14px !important;

    border-radius: 14px !important;

    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;

    border: 1px solid rgba(255,255,255,.1) !important;
}

.portal-side-brand span,
.portal-nav-group > small {
    color: #8fa8e9 !important;
}

.portal-side-brand b {
    color: #ffffff !important;
}

.portal-nav-group {
    margin-top: 14px !important;
}

.portal-nav-group > small {
    padding: 0 10px !important;
    margin-bottom: 5px !important;

    display: block;
    font-size: 10px !important;
    letter-spacing: .09em !important;
}

.portal-nav-group a {
    min-height: 43px !important;

    border-radius: 11px !important;

    color: rgba(255,255,255,.84) !important;

    margin: 3px 0 !important;
    padding: 9px 10px !important;

    transition:
        background .18s ease,
        transform .18s ease,
        color .18s ease !important;
}

.portal-nav-group a:hover {
    background: rgba(255,255,255,.07) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

html[dir="rtl"] .portal-nav-group a:hover {
    transform: translateX(-2px);
}

.portal-nav-group a.active {
    color: #ffffff !important;

    background:
        linear-gradient(135deg, #2963db, #3679ef) !important;

    box-shadow:
        0 8px 18px rgba(47,111,237,.26),
        inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.portal-nav-group a i {
    width: 22px !important;
    color: #8eb8ff !important;
}

.portal-nav-group a.active i {
    color: #ffffff !important;
}

.portal-nav-group a strong {
    background: rgba(255,255,255,.13) !important;
    color: #ffffff !important;
}

/* ==========================================================
   KPI CARDS
   ========================================================== */

.portal-kpis {
    gap: 14px !important;
    margin-bottom: 16px !important;
}

.portal-kpi {
    position: relative;
    overflow: hidden;

    min-height: 122px;

    border: 1px solid var(--aq-dash-border) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(248,251,255,.92)
        ) !important;

    box-shadow:
        0 10px 25px rgba(29,47,91,.055) !important;

    padding: 18px !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.portal-kpi::after {
    content: "";
    position: absolute;

    width: 78px;
    height: 78px;
    border-radius: 50%;

    right: -32px;
    top: -34px;

    background: rgba(47,111,237,.06);
}

html[dir="rtl"] .portal-kpi::after {
    right: auto;
    left: -32px;
}

.portal-kpi:hover {
    transform: translateY(-2px);
    border-color: #bdd0ee !important;

    box-shadow:
        0 15px 32px rgba(29,47,91,.09) !important;
}

.portal-kpi > span {
    color: #64718d !important;
    font-size: 11px !important;
    letter-spacing: .055em !important;
}

.portal-kpi > b {
    display: block;

    margin-top: 9px !important;

    color: var(--aq-dash-text) !important;

    font-size: clamp(22px, 2vw, 30px) !important;
    letter-spacing: -.025em;
}

.portal-kpi > small {
    color: var(--aq-dash-success) !important;
    margin-top: 8px !important;
}

.portal-kpi.green {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(239,251,247,.95)
        ) !important;
}

/* ==========================================================
   MAIN PANELS / GLASS
   ========================================================== */

.portal-panel {
    border: 1px solid var(--aq-dash-border) !important;

    border-radius: var(--aq-dash-radius-lg) !important;

    background: var(--aq-dash-surface) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: var(--aq-dash-shadow) !important;

    padding: 20px !important;
}

.portal-panel + .portal-panel {
    margin-top: 18px !important;
}

.portal-panel-head {
    padding-bottom: 13px !important;
    margin-bottom: 14px !important;

    border-bottom: 1px solid #e4ebf5 !important;
}

.portal-panel-head h2 {
    color: var(--aq-dash-text) !important;
    font-size: 18px !important;
    letter-spacing: -.015em;
}

.portal-panel-head small,
.portal-panel-head span {
    color: var(--aq-dash-muted);
}

/* ==========================================================
   TWO-COLUMN WIDGETS
   ========================================================== */

.portal-two {
    gap: 16px !important;
}

/* ==========================================================
   TABLES
   ========================================================== */

.portal-table-wrap {
    overflow: auto !important;
    border-radius: 12px;
}

.portal-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.portal-table thead th {
    background: #f4f7fb !important;

    color: #66738e !important;

    font-size: 10px !important;
    letter-spacing: .065em !important;

    border-bottom: 1px solid #dce5f1 !important;
}

.portal-table tbody td {
    border-bottom-color: #e8eef6 !important;
}

.portal-table tbody tr {
    transition: background .15s ease;
}

.portal-table tbody tr:hover {
    background: #f8fbff !important;
}

/* ==========================================================
   COMMON BUTTONS
   ========================================================== */

.portal-gold-btn {
    border-radius: 11px !important;

    background:
        linear-gradient(135deg, #ffc800, #f3b600) !important;

    color: #111633 !important;

    box-shadow:
        0 8px 18px rgba(245,180,0,.22) !important;

    font-weight: 800 !important;
}

.portal-gold-btn:hover {
    transform: translateY(-1px);
}

.mini-dark-btn {
    border-radius: 9px !important;

    background:
        linear-gradient(135deg, #182258, #252f75) !important;

    box-shadow:
        0 6px 14px rgba(31,36,88,.15) !important;
}

/* ==========================================================
   FORM CONTROLS INSIDE DASHBOARDS
   ========================================================== */

.portal-page input,
.portal-page select,
.portal-page textarea {
    border-color: #cfdaeb !important;
    border-radius: 11px !important;

    background: rgba(255,255,255,.94) !important;

    transition:
        border-color .16s ease,
        box-shadow .16s ease !important;
}

.portal-page input:focus,
.portal-page select:focus,
.portal-page textarea:focus {
    border-color: #76a6f6 !important;

    box-shadow:
        0 0 0 3px rgba(47,111,237,.10) !important;

    outline: none !important;
}

/* ==========================================================
   STATUS PILLS
   ========================================================== */

.status-pill {
    border-radius: 999px !important;
}

.status-pill.published,
.status-pill.active {
    background: #e6f8f1 !important;
    color: #087b56 !important;
}

.status-pill.pending,
.status-pill.pending_payment {
    background: #fff4d8 !important;
    color: #956700 !important;
}

.status-pill.rejected,
.status-pill.inactive {
    background: #fde9ed !important;
    color: #ad3047 !important;
}

/* ==========================================================
   ADMIN TITLE BLOCK
   ========================================================== */

.portal-title-row {
    margin-bottom: 17px !important;
}

.portal-title-row h1 {
    color: var(--aq-dash-text) !important;
    letter-spacing: -.025em;
}

.portal-title-row .eyebrow {
    color: var(--aq-dash-blue) !important;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    .portal-grid {
        grid-template-columns: 210px minmax(0,1fr) !important;
        gap: 15px !important;
    }

    .portal-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .portal-hero {
        gap: 16px !important;
    }
}

/* ==========================================================
   MOBILE APP-READY MODE
   ========================================================== */

@media (max-width: 767px) {

    .portal-page {
        padding-top: 12px !important;
        padding-bottom: 30px !important;
    }

    .portal-container {
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .portal-hero {
        border-radius: 17px !important;
        padding: 18px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .portal-name-row {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }

    .portal-name-row h1 {
        font-size: 23px !important;
    }

    .portal-hero-stats {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .portal-grid,
    .admin-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 13px !important;
    }

    /* App-style horizontal nav rail */
    .portal-sidebar {
        position: relative !important;
        top: auto !important;

        width: 100% !important;
        max-width: none !important;

        border-radius: 15px !important;

        padding: 9px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        display: flex !important;
        align-items: center !important;
        gap: 7px !important;

        scrollbar-width: none;
    }

    .portal-sidebar::-webkit-scrollbar {
        display: none;
    }

    .portal-side-brand {
        display: none !important;
    }

    .portal-nav-group {
        display: contents !important;
    }

    .portal-nav-group > small {
        display: none !important;
    }

    .portal-nav-group a {
        flex: 0 0 auto !important;

        min-height: 42px !important;

        white-space: nowrap !important;

        padding: 9px 13px !important;
        margin: 0 !important;

        background: rgba(255,255,255,.05) !important;
    }

    .portal-nav-group a strong {
        margin-inline-start: 5px !important;
    }

    .portal-main {
        width: 100% !important;
    }

    .portal-kpis {
        display: flex !important;
        overflow-x: auto !important;

        gap: 10px !important;

        scroll-snap-type: x mandatory;

        padding-bottom: 3px !important;

        scrollbar-width: none;
    }

    .portal-kpis::-webkit-scrollbar {
        display: none;
    }

    .portal-kpi {
        flex: 0 0 78% !important;
        min-width: 245px !important;

        scroll-snap-align: start;
    }

    .portal-two {
        grid-template-columns: 1fr !important;
    }

    .portal-panel {
        border-radius: 16px !important;
        padding: 15px !important;
    }

    .portal-panel-head {
        gap: 9px !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }

    .portal-panel-head h2 {
        font-size: 16px !important;
    }

    /* Tables remain scroll-safe until converted to mobile cards */
    .portal-table-wrap {
        margin-left: -3px;
        margin-right: -3px;
    }

    .portal-table {
        min-width: 670px;
    }
}

/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 390px) {

    .portal-container {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .portal-hero {
        padding: 15px !important;
    }

    .portal-kpi {
        flex-basis: 86% !important;
    }
}

/* ==========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .portal-page *,
    .portal-page *::before,
    .portal-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* ===== SOURCE: aqark-dashboard-v2.css ===== */

/* ==========================================================
   AQARK DASHBOARD UX V2
   Mobile Application Readiness Layer
   Depends on aqark-dashboard-v1.css
   ========================================================== */

:root {
    --aq-app-bottom-height: 72px;
    --aq-app-fab-size: 56px;
    --aq-glass:
        linear-gradient(
            145deg,
            rgba(255,255,255,.90),
            rgba(247,250,255,.78)
        );
}


/* ==========================================================
   DESKTOP REFINEMENT
   ========================================================== */

@media (min-width: 768px) {

    .portal-main {
        animation: aqPortalEnter .25s ease-out both;
    }

    @keyframes aqPortalEnter {
        from {
            opacity: 0;
            transform: translateY(5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .portal-sidebar {
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.15) transparent;
    }

    .portal-sidebar::-webkit-scrollbar {
        width: 4px;
    }

    .portal-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.14);
        border-radius: 99px;
    }

    .portal-panel {
        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
    }

    .portal-panel:hover {
        border-color: #cedced !important;

        box-shadow:
            0 20px 45px rgba(28,43,92,.085),
            0 3px 10px rgba(28,43,92,.04) !important;
    }

}


/* ==========================================================
   MOBILE APPLICATION MODE
   ========================================================== */

@media (max-width: 767px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-bottom:
            calc(
                var(--aq-app-bottom-height)
                + env(safe-area-inset-bottom)
                + 14px
            ) !important;
    }


    /* ------------------------------------------------------
       PAGE
       ------------------------------------------------------ */

    .portal-page {
        min-height: 100vh !important;

        padding-top: 10px !important;

        padding-bottom:
            calc(
                var(--aq-app-bottom-height)
                + env(safe-area-inset-bottom)
                + 24px
            ) !important;
    }

    .portal-container {
        width: 100% !important;
        max-width: none !important;

        padding-inline: 12px !important;
    }


    /* ------------------------------------------------------
       MOBILE PROFILE HERO
       ------------------------------------------------------ */

    .portal-hero {
        position: relative;

        padding: 17px !important;

        margin-bottom: 13px !important;

        border-radius: 19px !important;

        display: grid !important;

        grid-template-columns:
            52px
            minmax(0,1fr) !important;

        gap: 10px 12px !important;

        align-items: center !important;
    }

    .portal-avatar {
        grid-column: 1 !important;

        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;

        border-radius: 15px !important;

        font-size: 19px !important;
    }

    .portal-hero > div:nth-child(2) {
        grid-column: 2 !important;

        min-width: 0 !important;
    }

    .portal-name-row {
        display: flex !important;

        align-items: center !important;

        gap: 7px !important;

        flex-wrap: wrap !important;
    }

    .portal-name-row h1 {
        margin: 0 !important;

        font-size: 20px !important;

        line-height: 1.2 !important;
    }

    .verified-pill {
        font-size: 8px !important;

        padding: 4px 6px !important;
    }

    .portal-hero p {
        margin-top: 5px !important;
        margin-bottom: 3px !important;

        font-size: 11px !important;

        line-height: 1.5 !important;
    }

    .portal-contact {
        font-size: 10px !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        white-space: nowrap !important;
    }


    /* ------------------------------------------------------
       HERO STATS — HORIZONTAL APP CAROUSEL
       ------------------------------------------------------ */

    .portal-hero-stats,
    .portal-hero-stats.compact {
        grid-column: 1 / -1 !important;

        display: flex !important;

        width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;

        gap: 0 !important;

        border-radius: 13px !important;

        scrollbar-width: none;
    }

    .portal-hero-stats::-webkit-scrollbar {
        display: none;
    }

    .portal-hero-stats > div {
        flex: 0 0 42% !important;

        min-width: 120px !important;

        scroll-snap-align: start;

        border-inline-end:
            1px solid rgba(255,255,255,.11) !important;
    }

    .portal-hero-stats span {
        font-size: 8px !important;
    }

    .portal-hero-stats b {
        margin-top: 3px;

        font-size: 17px !important;
    }


    /* ------------------------------------------------------
       ADD PROPERTY → FLOATING ACTION BUTTON
       ------------------------------------------------------ */

    .portal-hero > .portal-gold-btn {
        position: fixed !important;

        z-index: 1005 !important;

        right: 18px !important;

        bottom:
            calc(
                var(--aq-app-bottom-height)
                + env(safe-area-inset-bottom)
                + 15px
            ) !important;

        width: var(--aq-app-fab-size) !important;
        height: var(--aq-app-fab-size) !important;

        min-width: var(--aq-app-fab-size) !important;

        border-radius: 18px !important;

        padding: 0 !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        font-size: 0 !important;

        box-shadow:
            0 16px 32px rgba(21,31,81,.22),
            0 6px 15px rgba(245,180,0,.24) !important;
    }

    html[dir="rtl"] .portal-hero > .portal-gold-btn {
        right: auto !important;
        left: 18px !important;
    }

    .portal-hero > .portal-gold-btn i {
        margin: 0 !important;

        font-size: 22px !important;
    }


    /* ------------------------------------------------------
       APP BOTTOM NAVIGATION
       Reuses existing sidebar — no duplicate routing logic
       ------------------------------------------------------ */

    .portal-grid {
        display: block !important;
    }

    .portal-sidebar {
        position: fixed !important;

        z-index: 1000 !important;

        left: 10px !important;
        right: 10px !important;

        bottom:
            calc(
                8px
                + env(safe-area-inset-bottom)
            ) !important;

        top: auto !important;

        width: auto !important;

        height: var(--aq-app-bottom-height) !important;

        max-width: none !important;

        padding: 7px !important;

        margin: 0 !important;

        display: flex !important;

        align-items: stretch !important;

        gap: 5px !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        border:
            1px solid rgba(255,255,255,.15) !important;

        border-radius: 20px !important;

        background:
            linear-gradient(
                135deg,
                rgba(17,26,68,.96),
                rgba(30,43,105,.94)
            ) !important;

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        box-shadow:
            0 18px 42px rgba(9,18,56,.28),
            inset 0 1px 0 rgba(255,255,255,.12) !important;

        scrollbar-width: none;
    }

    .portal-sidebar::-webkit-scrollbar {
        display: none;
    }

    .portal-side-brand,
    .portal-nav-group > small {
        display: none !important;
    }

    .portal-nav-group {
        display: contents !important;
    }

    .portal-nav-group a {
        position: relative;

        flex:
            0 0
            min(84px, 23vw) !important;

        min-width: 72px !important;

        min-height: 56px !important;

        margin: 0 !important;

        padding: 6px 8px !important;

        border-radius: 14px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 4px !important;

        color:
            rgba(255,255,255,.68) !important;

        background: transparent !important;

        white-space: nowrap !important;

        transform: none !important;
    }

    .portal-nav-group a:hover {
        transform: none !important;
    }

    .portal-nav-group a i {
        width: auto !important;

        margin: 0 !important;

        font-size: 17px !important;

        color: #a9c7ff !important;
    }

    .portal-nav-group a span {
        max-width: 74px;

        overflow: hidden;

        font-size: 8.5px !important;

        line-height: 1.15 !important;

        text-overflow: ellipsis;

        text-align: center;
    }

    .portal-nav-group a strong {
        position: absolute;

        top: 3px;
        right: 4px;

        min-width: 16px;
        height: 16px;

        padding: 0 4px !important;

        border-radius: 99px !important;

        display: flex;

        align-items: center;
        justify-content: center;

        font-size: 8px !important;

        background: #f5b400 !important;

        color: #111633 !important;
    }

    html[dir="rtl"] .portal-nav-group a strong {
        right: auto;
        left: 4px;
    }

    .portal-nav-group a.active {
        background:
            linear-gradient(
                145deg,
                rgba(47,111,237,.95),
                rgba(64,128,245,.88)
            ) !important;

        color: #ffffff !important;

        box-shadow:
            0 8px 16px rgba(47,111,237,.23),
            inset 0 1px 0 rgba(255,255,255,.2) !important;
    }

    .portal-nav-group a.active i {
        color: #ffffff !important;
    }


    /* ------------------------------------------------------
       MAIN CONTENT
       ------------------------------------------------------ */

    .portal-main {
        width: 100% !important;

        min-width: 0 !important;
    }


    /* ------------------------------------------------------
       KPI SWIPE CAROUSEL
       ------------------------------------------------------ */

    .portal-kpis {
        display: flex !important;

        width: calc(100% + 12px) !important;

        margin-inline-end: -12px !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        gap: 10px !important;

        padding:
            2px 12px 7px 0 !important;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    html[dir="rtl"] .portal-kpis {
        padding:
            2px 0 7px 12px !important;

        margin-inline-start: 0 !important;
        margin-inline-end: -12px !important;
    }

    .portal-kpis::-webkit-scrollbar {
        display: none;
    }

    .portal-kpi {
        flex: 0 0 78% !important;

        min-width: 235px !important;

        min-height: 132px !important;

        scroll-snap-align: start;

        border-radius: 18px !important;

        padding: 17px !important;
    }

    .portal-kpi > b {
        font-size: 25px !important;
    }


    /* ------------------------------------------------------
       DASHBOARD PANELS
       ------------------------------------------------------ */

    .portal-two {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }

    .portal-panel {
        width: 100% !important;

        min-width: 0 !important;

        padding: 15px !important;

        border-radius: 18px !important;
    }

    .portal-panel-head {
        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 9px !important;
    }

    .portal-panel-head h2 {
        font-size: 16px !important;
    }


    /* ------------------------------------------------------
       ACTION ROWS
       ------------------------------------------------------ */

    .action-row,
    .action-row.static,
    .action-row button {
        min-height: 58px !important;

        border-radius: 13px !important;
    }

    .action-row button,
    a.action-row {
        padding: 10px !important;
    }

    .action-row span {
        min-width: 0 !important;
    }

    .action-row b {
        font-size: 12px !important;
    }

    .action-row small {
        font-size: 9px !important;
    }


    /* ------------------------------------------------------
       PERFORMANCE METRICS
       ------------------------------------------------------ */

    .metric-row {
        display: grid !important;

        grid-template-columns:
            minmax(0,1fr)
            auto !important;

        gap: 7px 10px !important;

        padding:
            11px 0 !important;
    }

    .metric-row > div:first-child {
        min-width: 0;
    }

    .metric-row > div:first-child b {
        display: block;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        font-size: 11px;
    }

    .metric-bar {
        grid-column: 1 / -1 !important;

        grid-row: 2 !important;

        width: 100% !important;
    }

    .metric-row > strong {
        grid-column: 2 !important;
        grid-row: 1 !important;

        font-size: 10px !important;
    }


    /* ------------------------------------------------------
       DASHBOARD TABLES — MOBILE SCROLL CARD
       Phase 3 will convert to semantic mobile cards.
       ------------------------------------------------------ */

    .portal-table-wrap {
        width: 100% !important;

        overflow-x: auto !important;

        border:
            1px solid #e1e8f2;

        border-radius: 14px !important;

        background: #fff;

        -webkit-overflow-scrolling: touch;
    }

    .portal-table {
        min-width: 650px !important;
    }

    .portal-table th,
    .portal-table td {
        padding:
            11px 12px !important;

        white-space: nowrap;
    }


    /* ------------------------------------------------------
       PACKAGE CARDS
       ------------------------------------------------------ */

    .package-grid,
    .package-grid.four {
        display: flex !important;

        width: calc(100% + 12px);

        overflow-x: auto !important;

        gap: 11px !important;

        padding-bottom: 8px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    .package-grid::-webkit-scrollbar {
        display: none;
    }

    .package-card {
        flex: 0 0 84% !important;

        min-width: 260px !important;

        scroll-snap-align: start;

        border-radius: 18px !important;
    }


    /* ------------------------------------------------------
       PLAN PANEL
       ------------------------------------------------------ */

    .portal-plan {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 15px !important;

        border-radius: 18px !important;

        padding: 18px !important;
    }

    .plan-actions {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 8px !important;
    }

    .plan-actions form,
    .plan-actions button,
    .plan-actions a {
        width: 100% !important;
    }


    /* ------------------------------------------------------
       TOOL CARDS
       ------------------------------------------------------ */

    .tool-grid {
        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    .tool-grid article {
        border-radius: 16px !important;
    }


    /* ------------------------------------------------------
       FORMS / TOUCH TARGETS
       ------------------------------------------------------ */

    .portal-page button,
    .portal-page .btn,
    .portal-page select,
    .portal-page input {
        min-height: 44px;
    }

}


/* ==========================================================
   SMALL PHONE OPTIMIZATION
   ========================================================== */

@media (max-width: 390px) {

    :root {
        --aq-app-bottom-height: 68px;
        --aq-app-fab-size: 52px;
    }

    .portal-container {
        padding-inline: 9px !important;
    }

    .portal-sidebar {
        left: 7px !important;
        right: 7px !important;

        padding: 6px !important;

        border-radius: 18px !important;
    }

    .portal-nav-group a {
        flex-basis: 72px !important;

        min-width: 68px !important;
    }

    .portal-nav-group a span {
        font-size: 8px !important;
    }

    .portal-kpi {
        flex-basis: 86% !important;
    }

}


/* ==========================================================
   MOBILE LANDSCAPE
   ========================================================== */

@media
(max-width: 900px)
and (orientation: landscape) {

    .portal-sidebar {
        height: 62px !important;
    }

    .portal-nav-group a {
        min-height: 48px !important;

        flex-direction: row !important;

        gap: 6px !important;
    }

    .portal-nav-group a span {
        max-width: 100px;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .portal-page *,
    .portal-page *::before,
    .portal-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

}


/* ===== SOURCE: aqark-dashboard-v3.css ===== */

/* ==========================================================
   AQARK DASHBOARD V3
   Native Mobile Navigation + Mobile Workspace Cleanup
   ========================================================== */

@media (max-width: 767px) {

    /* Dashboard should feel like an application, not a public webpage */
    body:has(.portal-page) .footer {
        display: none !important;
    }

    body:has(.portal-page) {
        background: #f5f8fc !important;
    }

    /* Slightly tighter dashboard shell */
    .portal-page {
        padding-bottom:
            calc(
                88px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    /* ======================================================
       HERO
       ====================================================== */

    .portal-hero {
        padding: 14px !important;
        border-radius: 17px !important;
    }

    .portal-name-row h1 {
        font-size: 18px !important;
    }

    .portal-hero p {
        font-size: 10px !important;
    }

    .portal-contact {
        font-size: 9px !important;
    }

    .portal-hero-stats {
        margin-top: 4px !important;
    }

    .portal-hero-stats > div {
        flex: 1 0 33.333% !important;
        min-width: 92px !important;
        padding: 10px 6px !important;
        text-align: center !important;
    }

    .portal-hero-stats span {
        font-size: 7px !important;
    }

    .portal-hero-stats b {
        font-size: 15px !important;
    }

    /* ======================================================
       PRIMARY BOTTOM NAV
       ====================================================== */

    .portal-sidebar {
        height: 67px !important;

        left: 8px !important;
        right: 8px !important;

        bottom:
            calc(
                7px
                + env(safe-area-inset-bottom)
            ) !important;

        display: grid !important;

        grid-template-columns:
            repeat(5, minmax(0,1fr)) !important;

        gap: 4px !important;

        overflow: visible !important;

        padding: 6px !important;

        border-radius: 19px !important;
    }

    /* Hide every original item by default */
    .portal-sidebar .portal-nav-group a {
        display: none !important;
    }

    /* Primary app destinations */
    .portal-sidebar .portal-nav-group a.aq-mobile-primary {
        display: flex !important;

        width: 100% !important;
        min-width: 0 !important;

        min-height: 54px !important;

        padding: 5px 2px !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 3px !important;

        border-radius: 13px !important;
    }

    .portal-sidebar a.aq-mobile-primary i {
        font-size: 16px !important;
    }

    .portal-sidebar a.aq-mobile-primary span {
        max-width: 100% !important;

        font-size: 7.5px !important;

        overflow: hidden !important;

        white-space: nowrap !important;

        text-overflow: ellipsis !important;
    }

    /* More button */
    .aq-mobile-more-button {
        appearance: none;

        width: 100%;

        min-width: 0;
        min-height: 54px;

        padding: 5px 2px;

        border: 0;
        border-radius: 13px;

        background: transparent;

        color: rgba(255,255,255,.72);

        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 3px;

        cursor: pointer;
    }

    .aq-mobile-more-button i {
        font-size: 17px;
        color: #a9c7ff;
    }

    .aq-mobile-more-button span {
        font-family: "Cairo", "Inter", sans-serif;
        font-size: 7.5px;
        font-weight: 700;

        white-space: nowrap;
    }

    .aq-mobile-more-button.active {
        background:
            linear-gradient(
                145deg,
                rgba(47,111,237,.95),
                rgba(64,128,245,.88)
            );

        color: #fff;
    }

    .aq-mobile-more-button.active i {
        color: #fff;
    }

    /* ======================================================
       MORE DRAWER
       ====================================================== */

    .aq-mobile-more-sheet {
        position: fixed;

        z-index: 1100;

        left: 10px;
        right: 10px;

        bottom:
            calc(
                82px
                + env(safe-area-inset-bottom)
            );

        max-height: min(480px, 65vh);

        overflow-y: auto;

        padding: 10px;

        border:
            1px solid rgba(255,255,255,.14);

        border-radius: 20px;

        background:
            linear-gradient(
                150deg,
                rgba(18,27,70,.98),
                rgba(31,44,107,.97)
            );

        box-shadow:
            0 24px 60px rgba(7,14,48,.36);

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

        opacity: 0;

        transform: translateY(14px);

        pointer-events: none;

        transition:
            opacity .18s ease,
            transform .18s ease;
    }

    .aq-mobile-more-sheet.open {
        opacity: 1;

        transform: translateY(0);

        pointer-events: auto;
    }

    .aq-mobile-more-head {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 10px;

        padding: 8px 8px 12px;

        color: #fff;
    }

    .aq-mobile-more-head b {
        font-size: 14px;
    }

    .aq-mobile-more-close {
        appearance: none;

        width: 34px;
        height: 34px;

        min-height: 34px !important;

        border: 0;
        border-radius: 10px;

        background: rgba(255,255,255,.08);

        color: #fff;

        display: inline-flex;

        align-items: center;
        justify-content: center;
    }

    .aq-mobile-more-links {
        display: grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 7px;
    }

    .aq-mobile-more-links a {
        min-height: 58px;

        padding: 9px;

        border-radius: 13px;

        background: rgba(255,255,255,.055);

        border:
            1px solid rgba(255,255,255,.07);

        color: #fff;

        display: flex;

        align-items: center;

        gap: 9px;

        text-decoration: none;
    }

    .aq-mobile-more-links a.active {
        background:
            linear-gradient(
                135deg,
                #2963db,
                #3679ef
            );
    }

    .aq-mobile-more-links i {
        width: 29px;
        height: 29px;

        border-radius: 9px;

        background: rgba(255,255,255,.08);

        display: inline-flex;

        align-items: center;
        justify-content: center;

        color: #acd0ff;
    }

    .aq-mobile-more-links span {
        min-width: 0;

        font-size: 10px;
        font-weight: 700;

        line-height: 1.25;
    }

    /* ======================================================
       FAB
       ====================================================== */

    .portal-hero > .portal-gold-btn {
        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;

        right: 14px !important;

        bottom:
            calc(
                85px
                + env(safe-area-inset-bottom)
            ) !important;

        border-radius: 16px !important;
    }

    html[dir="rtl"] .portal-hero > .portal-gold-btn {
        right: auto !important;
        left: 14px !important;
    }

    /* ======================================================
       KPI CARDS
       ====================================================== */

    .portal-kpis {
        gap: 8px !important;

        padding-bottom: 8px !important;
    }

    .portal-kpi {
        flex-basis: 72% !important;

        min-width: 218px !important;

        min-height: 115px !important;

        padding: 14px !important;
    }

    .portal-kpi > b {
        font-size: 22px !important;
    }

    /* ======================================================
       CONTENT
       ====================================================== */

    .portal-panel {
        box-shadow:
            0 8px 20px rgba(28,43,92,.05) !important;
    }

    .metric-row {
        min-width: 0 !important;
    }

}


/* Smaller phones */

@media (max-width: 390px) {

    .aq-mobile-more-links {
        grid-template-columns: 1fr 1fr;
    }

    .portal-sidebar {
        left: 5px !important;
        right: 5px !important;
    }

    .portal-kpi {
        flex-basis: 80% !important;
    }

}


/* ===== SOURCE: aqark-dashboard-v31.css ===== */

/* ==========================================================
   AQARK DASHBOARD V3.1
   Mobile UX Refinement
   ========================================================== */

@media (max-width: 767px) {

    /* ======================================================
       ADD PROPERTY — NO CONTENT OVERLAP
       Keep it inside hero instead of floating over content
       ====================================================== */

    .portal-hero > .portal-gold-btn {
        position: relative !important;

        z-index: 1 !important;

        grid-column: 1 / -1 !important;

        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;
        height: 42px !important;

        min-width: 0 !important;
        min-height: 42px !important;

        margin-top: 2px !important;

        padding: 0 14px !important;

        border-radius: 12px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        font-size: 11px !important;
        font-weight: 800 !important;

        box-shadow:
            0 8px 18px rgba(245,180,0,.16) !important;
    }

    .portal-hero > .portal-gold-btn i {
        font-size: 15px !important;
    }


    /* ======================================================
       MORE DRAWER BACKDROP
       ====================================================== */

    .aq-mobile-sheet-backdrop {
        position: fixed;

        z-index: 1090;

        inset: 0;

        background:
            rgba(7,14,42,.48);

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .18s ease,
            visibility .18s ease;
    }

    .aq-mobile-sheet-backdrop.open {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }

    .aq-mobile-more-sheet {
        z-index: 1100 !important;
    }


    /* ======================================================
       KPI SWIPE CUE
       ====================================================== */

    .aq-swipe-hint {
        width: max-content;

        margin:
            -2px auto
            11px !important;

        padding: 5px 10px;

        border:
            1px solid #dce5f2;

        border-radius: 999px;

        background:
            rgba(255,255,255,.82);

        color: #71809a;

        font-size: 8.5px;
        font-weight: 700;

        box-shadow:
            0 4px 12px rgba(28,43,92,.04);

        display: flex;

        align-items: center;

        gap: 5px;

        pointer-events: none;
    }

    .aq-swipe-hint i {
        color: #2f6fed;
    }


    /* ======================================================
       KPI EDGE FADE
       Shows that more cards exist horizontally
       ====================================================== */

    .portal-main {
        position: relative;
    }

    .portal-kpis {
        position: relative !important;

        mask-image:
            linear-gradient(
                to right,
                transparent 0,
                #000 10px,
                #000 calc(100% - 28px),
                transparent 100%
            );

        -webkit-mask-image:
            linear-gradient(
                to right,
                transparent 0,
                #000 10px,
                #000 calc(100% - 28px),
                transparent 100%
            );
    }

    html[dir="rtl"] .portal-kpis {
        mask-image:
            linear-gradient(
                to left,
                transparent 0,
                #000 10px,
                #000 calc(100% - 28px),
                transparent 100%
            );

        -webkit-mask-image:
            linear-gradient(
                to left,
                transparent 0,
                #000 10px,
                #000 calc(100% - 28px),
                transparent 100%
            );
    }


    /* ======================================================
       MORE SHEET IMPROVEMENT
       ====================================================== */

    .aq-mobile-more-sheet {
        bottom:
            calc(
                84px
                + env(safe-area-inset-bottom)
            ) !important;

        border-radius: 22px !important;

        transform:
            translateY(20px)
            scale(.985);

        transform-origin: bottom center;
    }

    .aq-mobile-more-sheet.open {
        transform:
            translateY(0)
            scale(1);
    }

    .aq-mobile-more-links a {
        transition:
            background .15s ease,
            transform .15s ease;
    }

    .aq-mobile-more-links a:active {
        transform: scale(.98);
    }


    /* ======================================================
       MOBILE CONTENT SPACING
       ====================================================== */

    .portal-kpis + .portal-two,
    .portal-kpis + .portal-panel {
        margin-top: 2px !important;
    }

    .portal-panel {
        overflow: hidden;
    }

}


/* ==========================================================
   390px refinement
   ========================================================== */

@media (max-width: 390px) {

    .portal-hero > .portal-gold-btn {
        height: 40px !important;
        min-height: 40px !important;

        font-size: 10px !important;
    }

    .aq-swipe-hint {
        font-size: 8px;
    }

}



/* ==========================================================
   AQARK ADMIN MOBILE — PHASE 5B
   ========================================================== */

@media (max-width: 767px) {

    /* Admin forms should feel like app screens */
    .admin-portal .portal-main,
    .admin-grid .portal-main {
        min-width: 0;
    }


    .admin-filterbar,
    .admin-filter-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;

        padding: 10px !important;

        margin-bottom: 12px !important;

        border: 1px solid #dce5f2;
        border-radius: 16px;

        background: rgba(255,255,255,.82);
    }


    .admin-filterbar input,
    .admin-filterbar select,
    .admin-filterbar button,
    .admin-filter-bar input,
    .admin-filter-bar select,
    .admin-filter-bar button,
    .admin-filter-bar a {
        width: 100% !important;
        min-height: 42px;
    }


    /* Dense admin tables remain usable without breaking layout */
    .admin-grid .portal-table-wrap {
        width: 100%;

        overflow-x: auto !important;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        border-radius: 12px;
    }


    .admin-grid .portal-table {
        min-width: 690px;
    }


    .packages-page .portal-table {
        min-width: 620px;
    }


    /* Keep action controls reachable */
    .admin-actions,
    .inline-status-form,
    .unit-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }


    .admin-actions select,
    .inline-status-form select {
        min-width: 125px;
    }


    /* Forms become one-column app cards */
    .form-grid.compact-form,
    .admin-form-grid,
    .admin-form-grid.compact,
    .settings-grid {
        grid-template-columns: 1fr !important;
    }


    .form-grid.compact-form .wide,
    .admin-form-grid .wide {
        grid-column: 1 / -1 !important;
    }


    .admin-inline-card {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }


    .admin-inline-card input,
    .admin-inline-card select,
    .admin-inline-card button {
        width: 100%;
    }


    /* Network cards */
    .admin-card-list {
        grid-template-columns: 1fr !important;
    }


    .amenity-admin-grid {
        grid-template-columns: 1fr !important;
    }


    /* Package administration */
    .package-admin-card {
        border-radius: 16px !important;
    }


    .package-admin-top {
        gap: 8px;
        align-items: flex-start !important;
    }


    .package-role-checks {
        gap: 8px !important;
    }


    /* Settings */
    .settings-card {
        border-radius: 16px !important;
    }


    .settings-submit {
        position: sticky;
        bottom: calc(
            78px
            + env(safe-area-inset-bottom)
        );

        z-index: 40;

        padding: 8px;

        border-radius: 14px;

        background: rgba(245,248,252,.94);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }


    .settings-submit .btn {
        width: 100%;
        min-height: 44px;
    }

}


/* ===== SOURCE: aqark-dashboard-premium-v1.css ===== */

/* ==========================================================
   AQARK PREMIUM DASHBOARD SYSTEM
   Desktop + Tablet + Mobile
   ========================================================== */

:root {

    --aq-dash-navy: #1f285f;
    --aq-dash-navy-2: #28357d;
    --aq-dash-blue: #4d7df3;
    --aq-dash-blue-soft: #edf3ff;
    --aq-dash-cyan: #82cfff;

    --aq-dash-bg: #f5f7fb;
    --aq-dash-card: #ffffff;
    --aq-dash-border: #e5e9f2;

    --aq-dash-text: #182033;
    --aq-dash-muted: #7b8497;

    --aq-dash-success: #1b9a70;
    --aq-dash-warning: #db9228;
    --aq-dash-danger: #d5535c;

    --aq-dash-radius-xl: 24px;
    --aq-dash-radius-lg: 18px;
    --aq-dash-radius-md: 14px;

    --aq-dash-shadow:
        0 12px 35px rgba(31,40,95,.07);

    --aq-dash-shadow-hover:
        0 18px 45px rgba(31,40,95,.12);

}


/* ==========================================================
   DASHBOARD PAGE
   ========================================================== */

body.dashboard-shell {

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(77,125,243,.08),
            transparent 28%
        ),
        var(--aq-dash-bg);

    color: var(--aq-dash-text);

}


body.dashboard-shell > .smart-strip,
body.dashboard-shell > .topbar,
body.dashboard-shell > footer {

    display: none !important;

}


body.dashboard-shell main {

    min-height: calc(100vh - 72px);

}


body.dashboard-shell .portal-page {

    padding: 28px 0 60px !important;

    background: transparent !important;

}


body.dashboard-shell .portal-container {

    width: min(1600px, calc(100% - 42px));

    max-width: 1600px !important;

    margin-inline: auto;

}



/* ==========================================================
   PREMIUM HEADER
   ========================================================== */

.aq-dashboard-header {

    position: sticky;

    top: 0;

    z-index: 990;

    height: 72px;

    background:
        rgba(255,255,255,.94);

    border-bottom:
        1px solid rgba(222,228,240,.9);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

}


.aq-dashboard-header-inner {

    height: 100%;

    width:
        min(1600px, calc(100% - 42px));

    margin-inline: auto;

    display: flex;

    align-items: center;

    gap: 14px;

}


.aq-dashboard-logo {

    width: 138px;

    height: 46px;

    display: flex;

    align-items: center;

    padding-inline-end: 18px;

    border-inline-end:
        1px solid var(--aq-dash-border);

}


.aq-dashboard-logo img {

    display: block;

    width: 100%;

    height: 38px;

    object-fit: contain;

}


.aq-dashboard-workspace {

    display: flex;

    align-items: center;

    gap: 10px;

}


.aq-dashboard-workspace-icon {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: var(--aq-dash-navy);

    background:
        linear-gradient(
            145deg,
            #edf3ff,
            #f8fbff
        );

    border:
        1px solid #dde7ff;

    font-size: 18px;

}


.aq-dashboard-workspace > div {

    display: flex;

    flex-direction: column;

    line-height: 1.15;

}


.aq-dashboard-workspace small {

    color: #9aa3b4;

    font-size: 9px;

    letter-spacing: .12em;

    font-weight: 800;

}


.aq-dashboard-workspace strong {

    margin-top: 4px;

    font-size: 14px;

    color: var(--aq-dash-navy);

}


.aq-dashboard-header-spacer {

    flex: 1;

}


.aq-dashboard-header-action {

    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 0 13px;

    border-radius: 12px;

    border:
        1px solid var(--aq-dash-border);

    background: #fff;

    color: #45506a;

    font-size: 13px;

    font-weight: 700;

    transition:
        .2s ease;

}


.aq-dashboard-header-action:hover {

    border-color: #cfd8ee;

    background:
        var(--aq-dash-blue-soft);

    color: var(--aq-dash-navy);

    transform: translateY(-1px);

}


.aq-dashboard-language {

    min-width: 68px;

}


.aq-dashboard-user {

    position: relative;

}


.aq-dashboard-user > summary {

    list-style: none;

    min-height: 46px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 4px 8px 4px 5px;

    cursor: pointer;

    border-radius: 14px;

    border:
        1px solid transparent;

    transition: .2s ease;

}


.rtl .aq-dashboard-user > summary {

    padding: 4px 5px 4px 8px;

}


.aq-dashboard-user > summary::-webkit-details-marker {

    display: none;

}


.aq-dashboard-user > summary:hover,
.aq-dashboard-user[open] > summary {

    background: #f7f9fd;

    border-color:
        var(--aq-dash-border);

}


.aq-dashboard-avatar {

    width: 38px;

    height: 38px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--aq-dash-navy),
            #4056b8
        );

    box-shadow:
        0 5px 14px rgba(31,40,95,.18);

    font-size: 12px;

    font-weight: 800;

}


.aq-dashboard-user-copy {

    min-width: 0;

    display: flex;

    flex-direction: column;

}


.aq-dashboard-user-copy b {

    max-width: 150px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #26304a;

    font-size: 12px;

}


.aq-dashboard-user-copy small {

    margin-top: 2px;

    color: #929bad;

    font-size: 9px;

}


.aq-dashboard-user-menu {

    position: absolute;

    top: calc(100% + 9px);

    inset-inline-end: 0;

    width: 220px;

    padding: 8px;

    border-radius: 16px;

    border:
        1px solid var(--aq-dash-border);

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 22px 60px rgba(31,40,95,.16);

    z-index: 1005;

}


.aq-dashboard-user-menu a,
.aq-dashboard-user-menu button {

    width: 100%;

    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 11px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color: #374057;

    text-align: start;

    font: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

}


.aq-dashboard-user-menu a:hover,
.aq-dashboard-user-menu button:hover {

    background:
        var(--aq-dash-blue-soft);

    color:
        var(--aq-dash-navy);

}


.aq-dashboard-menu-divider {

    height: 1px;

    margin: 6px 3px;

    background:
        var(--aq-dash-border);

}


.aq-dashboard-menu {

    display: none;

}



/* ==========================================================
   MAIN DASHBOARD LAYOUT
   ========================================================== */

body.dashboard-shell .portal-grid {

    display: grid !important;

    grid-template-columns:
        278px minmax(0,1fr);

    gap: 26px;

    align-items: start;

}


body.rtl.dashboard-shell .portal-grid {

    grid-template-columns:
        278px minmax(0,1fr);

}


body.dashboard-shell .portal-main {

    min-width: 0;

}



/* ==========================================================
   SIDEBAR
   ========================================================== */

body.dashboard-shell .portal-sidebar {

    position: sticky !important;

    top: 98px !important;

    width: auto !important;

    max-height:
        calc(100vh - 120px);

    overflow-y: auto;

    overflow-x: hidden;

    display: block !important;

    padding: 14px !important;

    border-radius:
        var(--aq-dash-radius-xl) !important;

    border:
        1px solid rgba(223,228,239,.95) !important;

    background:
        rgba(255,255,255,.92) !important;

    box-shadow:
        var(--aq-dash-shadow);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    scrollbar-width: thin;

}


body.dashboard-shell .portal-side-brand {

    position: relative;

    min-height: 112px;

    margin-bottom: 16px;

    padding: 18px !important;

    overflow: hidden;

    border-radius: 18px !important;

    color: #fff !important;

    background:
        linear-gradient(
            140deg,
            #1d2558,
            #293a8d 65%,
            #3855be
        ) !important;

    box-shadow:
        0 12px 28px rgba(31,40,95,.23);

}


body.dashboard-shell .portal-side-brand::after {

    content: "";

    position: absolute;

    width: 110px;

    height: 110px;

    inset-inline-end: -40px;

    bottom: -50px;

    border-radius: 50%;

    background:
        rgba(131,207,255,.15);

}


body.dashboard-shell .portal-side-brand span {

    display: block;

    color:
        rgba(255,255,255,.68) !important;

    font-size: 9px !important;

    font-weight: 800 !important;

    letter-spacing: .13em;

}


body.dashboard-shell .portal-side-brand b {

    display: block;

    margin-top: 9px;

    max-width: 190px;

    color: #fff !important;

    font-size: 15px !important;

    line-height: 1.45;

}


body.dashboard-shell .portal-side-brand em {

    position: absolute;

    inset-inline-end: 15px;

    bottom: 11px;

    color:
        rgba(255,255,255,.16) !important;

    font-style: normal;

    font-size: 30px;

    font-weight: 900;

}


body.dashboard-shell .portal-nav-group {

    margin-top: 17px;

}


body.dashboard-shell .portal-nav-group:first-of-type {

    margin-top: 5px;

}


body.dashboard-shell .portal-nav-group > small {

    display: block;

    padding: 0 11px 8px;

    color: #a0a8b8 !important;

    font-size: 9px !important;

    font-weight: 800;

    letter-spacing: .1em;

}


body.dashboard-shell .portal-nav-group a {

    position: relative;

    min-height: 45px;

    display: flex !important;

    align-items: center;

    gap: 11px;

    margin: 3px 0;

    padding: 0 11px !important;

    border-radius: 12px !important;

    color: #566078 !important;

    background: transparent !important;

    font-size: 12px;

    font-weight: 700;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;

}


body.dashboard-shell .portal-nav-group a i {

    width: 31px;

    height: 31px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border-radius: 9px;

    background: #f1f4f9;

    color: #74809a;

    font-size: 14px;

    transition: .18s ease;

}


body.dashboard-shell .portal-nav-group a:hover {

    color:
        var(--aq-dash-navy) !important;

    background:
        #f4f7fd !important;

    transform:
        translateX(2px);

}


body.rtl.dashboard-shell
.portal-nav-group a:hover {

    transform:
        translateX(-2px);

}


body.dashboard-shell
.portal-nav-group a.active {

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            var(--aq-dash-navy),
            #354cae
        ) !important;

    box-shadow:
        0 8px 20px rgba(31,40,95,.18);

}


body.dashboard-shell
.portal-nav-group a.active i {

    color:
        var(--aq-dash-navy);

    background:
        #fff;

}


body.dashboard-shell
.portal-nav-group a strong {

    margin-inline-start: auto;

    min-width: 21px;

    height: 21px;

    display: grid;

    place-items: center;

    padding: 0 5px;

    border-radius: 8px;

    color:
        var(--aq-dash-navy);

    background:
        #edf3ff;

    font-size: 9px;

}



/* ==========================================================
   HERO
   ========================================================== */

body.dashboard-shell .portal-hero {

    position: relative;

    overflow: hidden;

    min-height: 164px;

    margin-bottom: 24px !important;

    padding: 26px 28px !important;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius:
        26px !important;

    border:
        1px solid rgba(216,223,239,.9) !important;

    background:
        linear-gradient(
            118deg,
            #ffffff 0%,
            #f8faff 54%,
            #edf3ff 100%
        ) !important;

    box-shadow:
        var(--aq-dash-shadow);

}


body.dashboard-shell .portal-hero::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    top: -150px;

    inset-inline-end: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(90,135,248,.16),
            transparent 68%
        );

    pointer-events: none;

}


body.dashboard-shell .portal-avatar {

    width: 64px !important;

    height: 64px !important;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border-radius: 18px !important;

    color: #fff !important;

    background:
        linear-gradient(
            140deg,
            #20295f,
            #4057bd
        ) !important;

    box-shadow:
        0 10px 25px rgba(31,40,95,.22);

    font-size: 25px !important;

}


body.dashboard-shell .portal-name-row h1,
body.dashboard-shell .portal-hero h1 {

    margin: 0;

    color:
        var(--aq-dash-navy) !important;

    font-size:
        clamp(23px,2vw,31px) !important;

    line-height: 1.3;

    letter-spacing: -.02em;

}


body.dashboard-shell .portal-hero p {

    margin:
        7px 0 0 !important;

    color:
        var(--aq-dash-muted) !important;

    font-size: 12px;

}


body.dashboard-shell .portal-contact {

    margin-top: 8px;

    color: #69748c;

    font-size: 11px;

}


body.dashboard-shell .verified-pill,
body.dashboard-shell .plan-badge {

    border-radius: 999px !important;

    background:
        #eaf1ff !important;

    color:
        var(--aq-dash-navy) !important;

    border:
        1px solid #d8e4ff !important;

    font-size: 9px !important;

    font-weight: 800 !important;

}


body.dashboard-shell .portal-hero-stats {

    margin-inline-start: auto;

    display: flex;

    align-items: stretch;

    gap: 8px;

}


body.dashboard-shell
.portal-hero-stats > div {

    min-width: 92px;

    padding: 12px 14px;

    border-radius: 15px;

    background:
        rgba(255,255,255,.76);

    border:
        1px solid #e5eaf4;

}


body.dashboard-shell
.portal-hero-stats span {

    display: block;

    color:
        #919bad !important;

    font-size:
        8px !important;

    font-weight: 800;

    letter-spacing: .07em;

}


body.dashboard-shell
.portal-hero-stats b {

    display: block;

    margin-top: 6px;

    color:
        var(--aq-dash-navy) !important;

    font-size:
        16px !important;

}



/* ==========================================================
   KPI CARDS
   ========================================================== */

body.dashboard-shell .portal-kpis {

    display: grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 14px !important;

    margin-bottom: 22px;

}


body.dashboard-shell .portal-kpi {

    position: relative;

    min-width: 0 !important;

    padding: 19px !important;

    overflow: hidden;

    border-radius:
        var(--aq-dash-radius-lg) !important;

    border:
        1px solid var(--aq-dash-border) !important;

    background:
        var(--aq-dash-card) !important;

    box-shadow:
        0 8px 24px rgba(31,40,95,.045);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


body.dashboard-shell .portal-kpi:hover {

    transform:
        translateY(-3px);

    border-color:
        #d6def0 !important;

    box-shadow:
        var(--aq-dash-shadow-hover);

}


body.dashboard-shell .portal-kpi::before {

    content: "";

    position: absolute;

    inset-inline-start: 0;

    top: 15px;

    bottom: 15px;

    width: 3px;

    border-radius: 4px;

    background:
        linear-gradient(
            var(--aq-dash-blue),
            var(--aq-dash-cyan)
        );

}


body.dashboard-shell .portal-kpi > span {

    color:
        #8790a3 !important;

    font-size: 9px !important;

    font-weight: 800;

    letter-spacing: .07em;

}


body.dashboard-shell .portal-kpi > b {

    margin-top: 8px;

    color:
        var(--aq-dash-navy) !important;

    font-size:
        clamp(21px,2vw,28px) !important;

}


body.dashboard-shell .portal-kpi > small {

    margin-top: 6px;

    color:
        #a0a7b5 !important;

    font-size: 10px;

}



/* ==========================================================
   PANELS
   ========================================================== */

body.dashboard-shell .portal-panel,
body.dashboard-shell .portal-plan,
body.dashboard-shell .package-card,
body.dashboard-shell .settings-card {

    border-radius:
        var(--aq-dash-radius-lg) !important;

    border:
        1px solid var(--aq-dash-border) !important;

    background:
        var(--aq-dash-card) !important;

    box-shadow:
        0 8px 26px rgba(31,40,95,.045);

}


body.dashboard-shell .portal-panel {

    padding: 20px !important;

}


body.dashboard-shell .portal-panel-head {

    min-height: 44px;

    margin-bottom: 15px !important;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px solid #eef1f6;

    padding-bottom: 13px;

}


body.dashboard-shell
.portal-panel-head h2 {

    margin: 0;

    color:
        #222d49 !important;

    font-size:
        15px !important;

    font-weight: 800 !important;

}


body.dashboard-shell
.portal-panel-head small {

    display: block;

    margin-top: 4px;

    color:
        #98a1b2;

    font-size: 10px;

}


body.dashboard-shell .portal-two {

    display: grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(300px,.65fr);

    gap: 16px !important;

}



/* ==========================================================
   TABLES
   ========================================================== */

body.dashboard-shell .portal-table-wrap {

    border-radius: 13px;

    border:
        1px solid #edf0f5;

    overflow-x: auto;

    overflow-y: hidden;

    background: #fff;

}


body.dashboard-shell .portal-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

}


body.dashboard-shell
.portal-table thead th {

    padding: 11px 12px !important;

    background:
        #f8f9fc !important;

    color:
        #7f899d !important;

    border-bottom:
        1px solid #e9edf3 !important;

    font-size:
        9px !important;

    font-weight: 800 !important;

    letter-spacing: .045em;

    text-transform: none !important;

}


body.dashboard-shell
.portal-table tbody td {

    padding:
        13px 12px !important;

    border-bottom:
        1px solid #f0f2f6 !important;

    color:
        #4b556c;

    font-size:
        11px;

    vertical-align: middle;

}


body.dashboard-shell
.portal-table tbody tr:last-child td {

    border-bottom: 0 !important;

}


body.dashboard-shell
.portal-table tbody tr:hover td {

    background:
        #fafbfe;

}


body.dashboard-shell
.portal-table td b {

    color:
        #29334d;

}


body.dashboard-shell
.portal-table td small {

    display: block;

    margin-top: 3px;

    color:
        #9ca4b3;

}



/* ==========================================================
   FORM CONTROLS
   ========================================================== */

body.dashboard-shell input,
body.dashboard-shell select,
body.dashboard-shell textarea {

    border:
        1px solid #dce2ed !important;

    border-radius:
        11px !important;

    background:
        #fff !important;

    color:
        #303a52 !important;

    font: inherit;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;

}


body.dashboard-shell input,
body.dashboard-shell select {

    min-height: 42px;

}


body.dashboard-shell textarea {

    min-height: 100px;

}


body.dashboard-shell input:focus,
body.dashboard-shell select:focus,
body.dashboard-shell textarea:focus {

    outline: none !important;

    border-color:
        #9eb7f4 !important;

    box-shadow:
        0 0 0 3px rgba(77,125,243,.10) !important;

}


body.dashboard-shell label {

    color:
        #59637a;

    font-size:
        10px;

    font-weight:
        700;

}



/* ==========================================================
   BUTTONS
   ========================================================== */

body.dashboard-shell .portal-gold-btn,
body.dashboard-shell .btn:not(.outline):not(.danger),
body.dashboard-shell .mini-dark-btn {

    border: 0 !important;

    border-radius:
        11px !important;

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            var(--aq-dash-navy),
            #3950b0
        ) !important;

    box-shadow:
        0 7px 17px rgba(31,40,95,.15);

    font-weight:
        700;

}


body.dashboard-shell .portal-gold-btn:hover,
body.dashboard-shell .btn:not(.outline):not(.danger):hover,
body.dashboard-shell .mini-dark-btn:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 22px rgba(31,40,95,.21);

}


body.dashboard-shell .btn.outline,
body.dashboard-shell .portal-outline-btn {

    border:
        1px solid #d4dbea !important;

    border-radius:
        11px !important;

    background:
        #fff !important;

    color:
        var(--aq-dash-navy) !important;

}


body.dashboard-shell .btn.danger {

    border-radius: 10px !important;

    background:
        #fff2f3 !important;

    border:
        1px solid #ffd6da !important;

    color:
        var(--aq-dash-danger) !important;

}



/* ==========================================================
   STATUS PILLS
   ========================================================== */

body.dashboard-shell .status-pill {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        25px;

    padding:
        0 9px;

    border-radius:
        999px !important;

    border:
        1px solid #dfe5ef;

    background:
        #f5f7fa;

    color:
        #68738a;

    font-size:
        8px !important;

    font-weight:
        800 !important;

}


body.dashboard-shell
.status-pill.published,
body.dashboard-shell
.status-pill.paid,
body.dashboard-shell
.status-pill.active,
body.dashboard-shell
.status-pill.available,
body.dashboard-shell
.status-pill.approved {

    color:
        #167356 !important;

    background:
        #ebfaf4 !important;

    border-color:
        #ccefe3 !important;

}


body.dashboard-shell
.status-pill.pending,
body.dashboard-shell
.status-pill.pending_payment,
body.dashboard-shell
.status-pill.reserved {

    color:
        #a66b14 !important;

    background:
        #fff7e8 !important;

    border-color:
        #f5dfb8 !important;

}


body.dashboard-shell
.status-pill.rejected,
body.dashboard-shell
.status-pill.failed,
body.dashboard-shell
.status-pill.cancelled {

    color:
        #b8444d !important;

    background:
        #fff0f1 !important;

    border-color:
        #f5ced2 !important;

}



/* ==========================================================
   ADMIN / EDITOR TITLE ROW
   ========================================================== */

body.dashboard-shell .portal-title-row {

    margin-bottom:
        18px;

    padding:
        4px 2px;

}


body.dashboard-shell
.portal-title-row h1 {

    margin:
        3px 0 0;

    color:
        var(--aq-dash-navy);

    font-size:
        26px;

    line-height:
        1.3;

}


body.dashboard-shell
.portal-title-row .eyebrow {

    color:
        var(--aq-dash-blue);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .12em;

}



/* ==========================================================
   PACKAGE CARDS
   ========================================================== */

body.dashboard-shell .package-grid {

    gap:
        15px !important;

}


body.dashboard-shell .package-card {

    padding:
        20px !important;

    transition:
        .2s ease;

}


body.dashboard-shell .package-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        var(--aq-dash-shadow-hover);

}


body.dashboard-shell
.package-card.featured {

    border-color:
        #ccd9fb !important;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f5f8ff
        ) !important;

}



/* ==========================================================
   ACTION ROWS
   ========================================================== */

body.dashboard-shell .action-row {

    border-radius:
        12px !important;

    transition:
        .18s ease;

}


body.dashboard-shell .action-row:hover {

    background:
        #f7f9fd !important;

}



/* ==========================================================
   MOBILE SIDEBAR BACKDROP
   ========================================================== */

.aq-dashboard-sidebar-backdrop {

    display: none;

}



/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1180px) {

    body.dashboard-shell .portal-grid {

        grid-template-columns:
            238px minmax(0,1fr);

        gap:
            18px;

    }


    body.dashboard-shell .portal-kpis {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    body.dashboard-shell .portal-hero {

        flex-wrap:
            wrap;

    }


    body.dashboard-shell
    .portal-hero-stats {

        width:
            100%;

        margin-inline-start:
            0;

    }


    .aq-dashboard-user-copy {

        display:
            none;

    }

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .aq-dashboard-header {

        height:
            64px;

    }


    .aq-dashboard-header-inner {

        width:
            calc(100% - 20px);

        gap:
            8px;

    }


    .aq-dashboard-menu {

        width:
            40px;

        height:
            40px;

        display:
            grid;

        place-items:
            center;

        flex:
            0 0 auto;

        border:
            1px solid var(--aq-dash-border);

        border-radius:
            11px;

        background:
            #fff;

        color:
            var(--aq-dash-navy);

        font-size:
            20px;

    }


    .aq-dashboard-logo {

        width:
            103px;

        height:
            40px;

        padding-inline-end:
            8px;

    }


    .aq-dashboard-logo img {

        height:
            31px;

    }


    .aq-dashboard-workspace {

        display:
            none;

    }


    .desktop-only {

        display:
            none !important;

    }


    .aq-dashboard-header-action {

        min-width:
            42px;

        width:
            42px;

        padding:
            0;

    }


    .aq-dashboard-header-action span {

        display:
            none;

    }


    .aq-dashboard-language span {

        display:
            inline;

        font-size:
            10px;

    }


    .aq-dashboard-user > summary {

        padding:
            2px;

        border:
            0;

    }


    .aq-dashboard-user > summary > i {

        display:
            none;

    }


    body.dashboard-shell main {

        min-height:
            calc(100vh - 64px);

    }


    body.dashboard-shell
    .portal-page {

        padding:
            14px 0 32px !important;

    }


    body.dashboard-shell
    .portal-container {

        width:
            calc(100% - 22px);

    }


    body.dashboard-shell
    .portal-grid,
    body.rtl.dashboard-shell
    .portal-grid {

        display:
            block !important;

    }


    /* Override the previous fixed bottom navigation */
    body.dashboard-shell .portal-sidebar {

        position:
            fixed !important;

        top:
            0 !important;

        bottom:
            0 !important;

        width:
            min(310px,86vw) !important;

        max-height:
            100vh !important;

        z-index:
            1200 !important;

        padding:
            14px !important;

        margin:
            0 !important;

        border-radius:
            0 !important;

        overflow-y:
            auto !important;

        transform:
            translateX(-110%);

        transition:
            transform .24s ease;

        box-shadow:
            20px 0 60px rgba(24,31,67,.22);

    }


    body.rtl.dashboard-shell .portal-sidebar {

        right:
            0 !important;

        left:
            auto !important;

        transform:
            translateX(110%);

        box-shadow:
            -20px 0 60px rgba(24,31,67,.22);

    }


    body:not(.rtl).dashboard-shell
    .portal-sidebar {

        left:
            0 !important;

        right:
            auto !important;

    }


    body.dashboard-shell.dashboard-sidebar-open
    .portal-sidebar {

        transform:
            translateX(0) !important;

    }


    .aq-dashboard-sidebar-backdrop {

        position:
            fixed;

        inset:
            0;

        z-index:
            1150;

        background:
            rgba(15,22,52,.36);

        backdrop-filter:
            blur(3px);

        -webkit-backdrop-filter:
            blur(3px);

        opacity:
            0;

        visibility:
            hidden;

        display:
            block;

        transition:
            .22s ease;

    }


    body.dashboard-sidebar-open
    .aq-dashboard-sidebar-backdrop {

        opacity:
            1;

        visibility:
            visible;

    }


    body.dashboard-sidebar-open {

        overflow:
            hidden;

    }


    /* Disable previous V3 mobile bottom nav / More system */
    body.dashboard-shell
    .aq-mobile-more,
    body.dashboard-shell
    .aq-mobile-sheet,
    body.dashboard-shell
    .aq-mobile-sheet-backdrop {

        display:
            none !important;

    }


    body.dashboard-shell
    .portal-sidebar .portal-nav-group {

        display:
            block !important;

    }


    body.dashboard-shell
    .portal-sidebar .portal-nav-group a {

        display:
            flex !important;

        position:
            relative !important;

        width:
            100% !important;

    }


    body.dashboard-shell .portal-hero {

        min-height:
            auto;

        padding:
            18px !important;

        gap:
            13px;

        border-radius:
            19px !important;

    }


    body.dashboard-shell .portal-avatar {

        width:
            52px !important;

        height:
            52px !important;

        border-radius:
            15px !important;

        font-size:
            21px !important;

    }


    body.dashboard-shell
    .portal-name-row {

        align-items:
            flex-start;

        flex-wrap:
            wrap;

        gap:
            6px;

    }


    body.dashboard-shell
    .portal-name-row h1,
    body.dashboard-shell
    .portal-hero h1 {

        font-size:
            20px !important;

    }


    body.dashboard-shell
    .portal-hero-stats {

        display:
            grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            7px;

    }


    body.dashboard-shell
    .portal-hero-stats > div {

        min-width:
            0;

        padding:
            10px;

    }


    body.dashboard-shell
    .portal-hero > .portal-gold-btn {

        width:
            100% !important;

        position:
            static !important;

        margin:
            0 !important;

    }


    body.dashboard-shell .portal-kpis {

        display:
            grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            9px !important;

        overflow:
            visible !important;

    }


    body.dashboard-shell .portal-kpi {

        min-width:
            0 !important;

        padding:
            14px !important;

    }


    body.dashboard-shell
    .portal-kpi > b {

        font-size:
            20px !important;

    }


    body.dashboard-shell
    .portal-two {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            12px !important;

    }


    body.dashboard-shell .portal-panel {

        padding:
            14px !important;

        border-radius:
            16px !important;

    }


    body.dashboard-shell
    .portal-panel-head {

        align-items:
            flex-start;

        flex-wrap:
            wrap;

    }


    body.dashboard-shell
    .portal-title-row h1 {

        font-size:
            21px;

    }


    body.dashboard-shell
    .portal-table {

        min-width:
            680px;

    }


    body.dashboard-shell
    .portal-table-wrap {

        width:
            100%;

        overflow-x:
            auto !important;

        -webkit-overflow-scrolling:
            touch;

    }


    body.dashboard-shell
    .admin-filterbar,
    body.dashboard-shell
    .admin-filter-bar,
    body.dashboard-shell
    .form-grid,
    body.dashboard-shell
    .admin-form-grid,
    body.dashboard-shell
    .settings-grid {

        grid-template-columns:
            1fr !important;

    }


    body.dashboard-shell
    .package-grid {

        grid-template-columns:
            1fr !important;

    }


    body.dashboard-shell
    .settings-submit {

        position:
            sticky;

        bottom:
            10px;

        z-index:
            50;

    }

}



/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 430px) {

    body.dashboard-shell
    .portal-kpis {

        grid-template-columns:
            1fr 1fr;

    }


    .aq-dashboard-logo {

        width:
            92px;

    }


    .aq-dashboard-language {

        width:
            38px;

        min-width:
            38px;

    }


    .aq-dashboard-language i {

        display:
            none;

    }

}



/* ==========================================================
   AQARK PREMIUM DASHBOARD — PHASE 6B VISUAL REFINEMENT
   ========================================================== */


/* ==========================================================
   1. REMOVE LEGACY V3 MOBILE UI FROM PREMIUM DASHBOARDS
   ========================================================== */

body.dashboard-shell .aq-mobile-more,
body.dashboard-shell .aq-mobile-more-button,
body.dashboard-shell .aq-mobile-sheet,
body.dashboard-shell .aq-mobile-sheet-backdrop,
body.dashboard-shell .aq-mobile-backdrop,
body.dashboard-shell .aq-mobile-more-sheet,

body.dashboard-shell [class*="aq-mobile-more"],
body.dashboard-shell [class*="mobile-more"],
body.dashboard-shell [class*="mobile-sheet"],

body.dashboard-shell .aq-swipe-hint,
body.dashboard-shell .portal-swipe-hint,
body.dashboard-shell .portal-kpi-swipe-hint,
body.dashboard-shell [class*="swipe-hint"],
body.dashboard-shell [data-swipe-hint] {

    display: none !important;

}



/* ==========================================================
   2. CLEAN ACTIVE SIDEBAR STATE
   ========================================================== */

body.dashboard-shell
.portal-nav-group a.active::before,
body.dashboard-shell
.portal-nav-group a.active::after {

    display: none !important;

    content: none !important;

}


body.dashboard-shell
.portal-nav-group a.active {

    position: relative;

    overflow: hidden;

}


body.dashboard-shell
.portal-nav-group a.active {

    padding-inline-start: 11px !important;
    padding-inline-end: 11px !important;

}



/* ==========================================================
   3. SIDEBAR POLISH
   ========================================================== */

@media (min-width: 768px) {

    body.dashboard-shell .portal-sidebar {

        padding: 12px !important;

    }


    body.dashboard-shell .portal-side-brand {

        min-height: 104px;

        margin-bottom: 13px;

        padding: 16px !important;

    }


    body.dashboard-shell .portal-nav-group {

        margin-top: 13px;

    }


    body.dashboard-shell
    .portal-nav-group > small {

        padding-bottom: 6px;

    }


    body.dashboard-shell
    .portal-nav-group a {

        min-height: 42px;

        margin: 2px 0;

    }

}



/* ==========================================================
   4. HERO REFINEMENT
   ========================================================== */

body.dashboard-shell .portal-hero {

    isolation: isolate;

}


body.dashboard-shell .portal-hero > * {

    position: relative;

    z-index: 2;

}


body.dashboard-shell
.portal-hero-stats > div {

    box-shadow:
        0 4px 15px rgba(31,40,95,.035);

}


body.dashboard-shell
.portal-hero .portal-gold-btn {

    white-space: nowrap;

}



/* ==========================================================
   5. DASHBOARD CONTENT WIDTH / RHYTHM
   ========================================================== */

@media (min-width: 1200px) {

    body.dashboard-shell
    .portal-container {

        width:
            min(1540px, calc(100% - 64px));

    }


    body.dashboard-shell
    .portal-grid {

        gap: 22px;

    }


    body.dashboard-shell
    .portal-main {

        padding-bottom: 24px;

    }

}



/* ==========================================================
   6. MODULE CARDS — ADMIN
   ========================================================== */

body.dashboard-shell
.admin-module-grid {

    gap: 12px !important;

}


body.dashboard-shell
.admin-module-grid > a {

    min-height: 110px;

    padding: 17px !important;

    border:
        1px solid var(--aq-dash-border) !important;

    border-radius:
        16px !important;

    background:
        #fff !important;

    box-shadow:
        0 6px 20px rgba(31,40,95,.035);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;

}


body.dashboard-shell
.admin-module-grid > a:hover {

    transform: translateY(-2px);

    border-color:
        #d4def5 !important;

    box-shadow:
        0 12px 28px rgba(31,40,95,.08);

}


body.dashboard-shell
.admin-module-grid > a > i {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    margin-bottom: 10px;

    border-radius: 10px;

    background:
        var(--aq-dash-blue-soft);

    color:
        #3971dd;

    font-size: 16px;

}


body.dashboard-shell
.admin-module-grid > a > b {

    display: block;

    color:
        #26304a;

    font-size: 13px;

}


body.dashboard-shell
.admin-module-grid > a > span {

    display: block;

    margin-top: 5px;

    color:
        #8c95a7;

    font-size: 10px;

    line-height: 1.5;

}



/* ==========================================================
   7. ADMIN TWO-COLUMN CONTENT
   ========================================================== */

body.dashboard-shell
.portal-two > .portal-panel {

    min-width: 0;

}



/* ==========================================================
   8. COUNTRY CONTROL
   ========================================================== */

body.dashboard-shell
.country-admin-grid {

    gap: 9px !important;

}


body.dashboard-shell
.country-admin-grid > a {

    min-height: 64px;

    border:
        1px solid #e3e8f1 !important;

    border-radius:
        13px !important;

    background:
        #fbfcfe !important;

    transition:
        .18s ease;

}


body.dashboard-shell
.country-admin-grid > a:hover {

    background:
        #f3f7ff !important;

    border-color:
        #d4def4 !important;

    transform:
        translateY(-1px);

}



/* ==========================================================
   9. TABLE DENSITY
   ========================================================== */

@media (min-width: 768px) {

    body.dashboard-shell
    .portal-table tbody td {

        padding-top: 11px !important;
        padding-bottom: 11px !important;

    }


    body.dashboard-shell
    .portal-table thead th {

        padding-top: 10px !important;
        padding-bottom: 10px !important;

    }

}



/* ==========================================================
   10. RTL TABLE / FORM ALIGNMENT
   ========================================================== */

body.rtl.dashboard-shell
.portal-table th,
body.rtl.dashboard-shell
.portal-table td {

    text-align: right;

}


body.rtl.dashboard-shell
input,
body.rtl.dashboard-shell
select,
body.rtl.dashboard-shell
textarea {

    text-align: right;

}



/* ==========================================================
   11. MOBILE GENERAL
   ========================================================== */

@media (max-width: 767px) {

    body.dashboard-shell {

        overflow-x: hidden;

    }


    body.dashboard-shell
    .portal-container {

        width:
            calc(100% - 16px);

    }


    body.dashboard-shell
    .portal-page {

        padding-top: 10px !important;

    }


    body.dashboard-shell
    .portal-hero {

        margin-bottom: 16px !important;

    }


    body.dashboard-shell
    .portal-kpis {

        margin-bottom: 14px;

    }


    body.dashboard-shell
    .portal-panel {

        margin-bottom: 12px;

    }


    body.dashboard-shell
    .portal-panel-head {

        margin-bottom: 11px !important;

        padding-bottom: 10px;

    }

}



/* ==========================================================
   12. MOBILE ADMIN MODULE GRID
   ========================================================== */

@media (min-width: 360px) and (max-width: 767px) {

    body.dashboard-shell
    .admin-module-grid {

        display: grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap: 9px !important;

    }


    body.dashboard-shell
    .admin-module-grid > a {

        min-height: 124px;

        padding: 14px !important;

    }


    body.dashboard-shell
    .admin-module-grid > a > i {

        width: 31px;

        height: 31px;

        margin-bottom: 9px;

    }


    body.dashboard-shell
    .admin-module-grid > a > b {

        font-size: 12px;

    }


    body.dashboard-shell
    .admin-module-grid > a > span {

        font-size: 9px;

    }

}


@media (max-width: 359px) {

    body.dashboard-shell
    .admin-module-grid {

        grid-template-columns:
            1fr !important;

    }


    body.dashboard-shell
    .admin-module-grid > a {

        min-height: 94px;

    }

}



/* ==========================================================
   13. MOBILE COUNTRY GRID
   ========================================================== */

@media (min-width: 360px) and (max-width: 767px) {

    body.dashboard-shell
    .country-admin-grid {

        display: grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

    }


    body.dashboard-shell
    .country-admin-grid > a {

        min-width: 0;

    }

}



/* ==========================================================
   14. MOBILE KPI CARDS
   ========================================================== */

@media (max-width: 767px) {

    body.dashboard-shell
    .portal-kpi {

        min-height: 112px;

    }


    body.dashboard-shell
    .portal-kpi > span {

        line-height: 1.35;

    }


    body.dashboard-shell
    .portal-kpi > small {

        line-height: 1.35;

    }

}



/* ==========================================================
   15. MOBILE HERO STATS
   ========================================================== */

@media (max-width: 767px) {

    body.dashboard-shell
    .portal-hero-stats > div {

        min-height: 64px;

        display: flex;

        flex-direction: column;

        justify-content: center;

    }


    body.dashboard-shell
    .portal-hero-stats b {

        font-size: 15px !important;

    }

}



/* ==========================================================
   16. MOBILE HEADER
   ========================================================== */

@media (max-width: 767px) {

    .aq-dashboard-header-inner {

        justify-content:
            space-between;

    }


    .aq-dashboard-header-spacer {

        display: none;

    }


    .aq-dashboard-logo {

        margin-inline-end: auto;

    }


    body.rtl
    .aq-dashboard-logo {

        margin-inline-end: 0;

        margin-inline-start: auto;

    }


    .aq-dashboard-avatar {

        width: 36px;

        height: 36px;

        border-radius: 11px;

    }

}



/* ==========================================================
   17. MOBILE ACTION CARDS
   ========================================================== */

@media (max-width: 767px) {

    body.dashboard-shell
    .action-row {

        min-height: 58px;

        padding: 10px !important;

    }


    body.dashboard-shell
    .portal-panel .action-row + .action-row {

        margin-top: 7px;

    }

}



/* ==========================================================
   18. MOBILE PERFORMANCE LISTS
   ========================================================== */

@media (max-width: 767px) {

    body.dashboard-shell
    .performance-row,
    body.dashboard-shell
    .listing-performance-row {

        gap: 8px;

    }


    body.dashboard-shell
    .progress {

        min-width: 110px;

    }

}



/* ==========================================================
   19. PACKAGE / SETTINGS MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.dashboard-shell
    .package-admin-card,
    body.dashboard-shell
    .settings-card {

        padding:
            14px !important;

    }


    body.dashboard-shell
    .package-admin-actions {

        gap:
            7px !important;

    }

}



/* ==========================================================
   20. NO LEGACY BOTTOM FIXED UI
   ========================================================== */

body.dashboard-shell
[class*="bottom-nav"],
body.dashboard-shell
[data-aqark-mobile-bottom-nav],

body.dashboard-shell
.aqark-dashboard-mobile-nav-v2,

body.dashboard-shell
.aqark-r3-mobile-workspace-nav {

    display: none !important;

}


/* ==========================================================
   AQARK PREMIUM DASHBOARD — SOFTER CARD SHADOWS
   ========================================================== */

body.dashboard-shell .portal-panel,
body.dashboard-shell .portal-kpi,
body.dashboard-shell .package-card,
body.dashboard-shell .editor-page-card,
body.dashboard-shell .metric-row,
body.dashboard-shell .action-row.static,
body.dashboard-shell .aq-dashboard-stat,
body.dashboard-shell .aq-dashboard-widget,
body.dashboard-shell .aq-dashboard-card,
body.dashboard-shell .portal-sidebar,
body.dashboard-shell .portal-hero,
body.dashboard-shell .portal-table-wrap {
    box-shadow:
        0 8px 24px rgba(23, 32, 83, 0.06),
        0 2px 8px rgba(23, 32, 83, 0.04) !important;
}

/* softer hover too */
body.dashboard-shell .portal-panel:hover,
body.dashboard-shell .portal-kpi:hover,
body.dashboard-shell .package-card:hover,
body.dashboard-shell .editor-page-card:hover,
body.dashboard-shell .aq-dashboard-card:hover,
body.dashboard-shell .aq-dashboard-widget:hover {
    box-shadow:
        0 10px 28px rgba(23, 32, 83, 0.08),
        0 3px 10px rgba(23, 32, 83, 0.05) !important;
}

/* keep header shadow light */
body.dashboard-shell .aq-dashboard-header {
    box-shadow:
        0 6px 18px rgba(23, 32, 83, 0.05) !important;
}


/* ==========================================================
   AQARK DASHBOARD — TITLE / SIDEBAR TOP ALIGNMENT
   ========================================================== */

@media (min-width: 768px) {

    /*
     * Align page title visually with the top of the
     * sidebar profile / workspace card.
     */
    body.dashboard-shell
    .admin-grid
    .portal-main > .portal-title-row,

    body.dashboard-shell
    .editor-grid
    .portal-main > .portal-title-row {

        margin-top: -10px !important;
        margin-bottom: 16px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    body.dashboard-shell
    .portal-title-row .eyebrow {

        display: block;

        margin-bottom: 4px !important;

        line-height: 1.15;

    }


    body.dashboard-shell
    .portal-title-row h1 {

        margin-top: 0 !important;

        line-height: 1.08 !important;

        font-size: 27px !important;

        letter-spacing: -0.025em;

    }


    body.dashboard-shell
    .portal-title-row p {

        margin-top: 6px !important;

    }

}


/* Slightly tighter sidebar profile card for visual balance */

@media (min-width: 768px) {

    body.dashboard-shell
    .portal-side-brand {

        min-height: 96px !important;

        padding-top: 15px !important;
        padding-bottom: 15px !important;

    }

}



/* ==========================================================
   AQARK PHASE 7A — ADMIN PAGE PREMIUM POLISH
   ========================================================== */


/* ==========================================================
   1. FILTER BARS
   ========================================================== */

body.dashboard-shell
.admin-filterbar,

body.dashboard-shell
.admin-filter-bar {

    display: grid;

    grid-template-columns:
        minmax(240px,1fr)
        190px
        auto
        auto;

    gap: 9px;

    align-items: center;

    margin-bottom: 14px;

    padding: 11px;

    border:
        1px solid #e4e9f2;

    border-radius: 15px;

    background:
        rgba(255,255,255,.86);

    box-shadow:
        0 4px 14px rgba(31,40,95,.035);

}


body.dashboard-shell
.admin-filterbar input,

body.dashboard-shell
.admin-filterbar select,

body.dashboard-shell
.admin-filter-bar input,

body.dashboard-shell
.admin-filter-bar select {

    width: 100%;

    min-height: 40px;

}


body.dashboard-shell
.admin-filterbar .btn,

body.dashboard-shell
.admin-filter-bar .btn {

    min-height: 40px;

    white-space: nowrap;

}



/* ==========================================================
   2. USERS & ROLES
   ========================================================== */

body.dashboard-shell
.admin-users-panel {

    padding: 15px !important;

}


body.dashboard-shell
.admin-users-panel
.portal-table td {

    height: 68px;

}


body.dashboard-shell
.admin-users-panel
.portal-table td:first-child b {

    font-size: 12px;

}


body.dashboard-shell
.admin-users-panel select {

    min-width: 170px;

}


body.dashboard-shell
.admin-users-panel
.portal-table td:last-child {

    width: 210px;

}



/* ==========================================================
   3. PROPERTIES
   ========================================================== */

body.dashboard-shell
.admin-properties-panel {

    padding: 15px !important;

}


body.dashboard-shell
.admin-properties-panel
.portal-table td:first-child {

    min-width: 260px;

}


body.dashboard-shell
.admin-properties-panel
.portal-table td:first-child a {

    color: var(--aq-dash-navy);

}


body.dashboard-shell
.admin-actions {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: nowrap;

}


body.dashboard-shell
.admin-actions form {

    margin: 0;

}


body.dashboard-shell
.admin-actions select {

    min-width: 125px;

    min-height: 35px;

}


body.dashboard-shell
.admin-actions .btn {

    min-height: 35px;

}



/* ==========================================================
   4. COMMERCE
   ========================================================== */

body.dashboard-shell
.admin-commerce-page
.portal-panel {

    margin-bottom: 15px;

}


body.dashboard-shell
.admin-commerce-page
.portal-panel-head > span {

    min-width: 30px;

    height: 30px;

    display: grid;

    place-items: center;

    padding: 0 8px;

    border-radius: 10px;

    background:
        var(--aq-dash-blue-soft);

    color:
        var(--aq-dash-navy);

    font-size: 10px;

    font-weight: 800;

}


body.dashboard-shell
.inline-status-form {

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

}


body.dashboard-shell
.inline-status-form select {

    min-width: 145px;

    min-height: 36px;

}


body.dashboard-shell
.inline-status-form .btn {

    min-height: 36px;

}



/* ==========================================================
   5. PACKAGE CREATE
   ========================================================== */

body.dashboard-shell
.admin-package-create {

    margin-bottom: 16px;

}


body.dashboard-shell
.admin-package-create
.admin-form-grid {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 12px;

}


body.dashboard-shell
.admin-form-grid label {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


body.dashboard-shell
.admin-form-grid .wide {

    grid-column:
        1 / -1;

}


body.dashboard-shell
.admin-form-submit {

    display: flex;

    align-items: flex-end;

}


body.dashboard-shell
.admin-form-submit .btn {

    min-height: 42px;

    padding-inline: 22px;

}



/* ==========================================================
   6. PACKAGE MANAGEMENT CARDS
   ========================================================== */

body.dashboard-shell
.package-admin-list {

    display: grid;

    gap: 12px;

}


body.dashboard-shell
.package-admin-card {

    padding: 16px !important;

    border:
        1px solid #e5e9f2 !important;

    border-radius:
        16px !important;

    background:
        #fbfcfe !important;

    box-shadow:
        0 4px 14px rgba(31,40,95,.035) !important;

}


body.dashboard-shell
.package-admin-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin-bottom: 13px;

    padding-bottom: 10px;

    border-bottom:
        1px solid #e9edf4;

}


body.dashboard-shell
.package-admin-top b {

    color:
        var(--aq-dash-navy);

    font-size: 13px;

}


body.dashboard-shell
.package-admin-top small {

    display: block;

    margin-top: 3px;

    color: #959eae;

}


body.dashboard-shell
.package-admin-card
.admin-form-grid.compact {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 10px;

}


body.dashboard-shell
.package-role-checks {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px 13px;

    padding: 11px;

    border-radius: 12px;

    background:
        #f4f7fc;

    border:
        1px solid #e4e9f2;

}


body.dashboard-shell
.package-role-checks label {

    display: inline-flex;

    flex-direction: row;

    align-items: center;

    gap: 5px;

    margin: 0;

}


body.dashboard-shell
.package-role-checks input[type="checkbox"] {

    min-height: auto;

    width: 15px;

    height: 15px;

}


body.dashboard-shell
.package-admin-actions {

    display: flex;

    justify-content: flex-end;

    gap: 7px;

    margin-top: 12px;

}



/* ==========================================================
   7. SETTINGS
   ========================================================== */

body.dashboard-shell
.admin-settings-page
.settings-grid {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 14px;

}


body.dashboard-shell
.admin-settings-page
.settings-card {

    padding: 17px !important;

    margin: 0 !important;

}


body.dashboard-shell
.admin-settings-page
.settings-card
.portal-panel-head {

    margin-bottom: 13px !important;

}


body.dashboard-shell
.admin-settings-page
.settings-card
.portal-panel-head h2 {

    display: flex;

    align-items: center;

    gap: 8px;

}


body.dashboard-shell
.admin-settings-page
.settings-card
.portal-panel-head h2 i {

    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        var(--aq-dash-blue-soft);

    color:
        #3971dd;

}


body.dashboard-shell
.admin-settings-page
.settings-card label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-top: 10px;

}


body.dashboard-shell
.admin-settings-page
.switch-line {

    flex-direction: row !important;

    align-items: center;

    min-height: 44px;

    padding: 10px;

    border-radius: 11px;

    background: #f7f9fc;

}


body.dashboard-shell
.admin-settings-page
.switch-line input {

    min-height: auto;

    width: 16px;

    height: 16px;

}


body.dashboard-shell
.local-engine-note {

    margin-top: 12px;

    padding: 11px;

    border-radius: 11px;

    background:
        #f6f8fc;

    border:
        1px solid #e4e9f2;

    color:
        #657087;

    font-size: 10px;

}


body.dashboard-shell
.settings-submit {

    grid-column:
        1 / -1;

    display: flex;

    justify-content: flex-end;

    padding-top: 4px;

}


body.dashboard-shell
.settings-submit .btn {

    min-width: 175px;

    min-height: 44px;

}



/* ==========================================================
   8. DESKTOP TABLE REFINEMENT
   ========================================================== */

@media (min-width: 768px) {

    body.dashboard-shell
    .admin-grid
    .portal-table thead th {

        height: 41px;

    }


    body.dashboard-shell
    .admin-grid
    .portal-table tbody td {

        height: 54px;

    }

}



/* ==========================================================
   9. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.dashboard-shell
    .admin-filterbar,

    body.dashboard-shell
    .admin-filter-bar {

        grid-template-columns:
            1fr !important;

        padding: 9px;

    }


    body.dashboard-shell
    .admin-users-panel,
    body.dashboard-shell
    .admin-properties-panel {

        padding: 11px !important;

    }


    body.dashboard-shell
    .admin-package-create
    .admin-form-grid,

    body.dashboard-shell
    .package-admin-card
    .admin-form-grid.compact,

    body.dashboard-shell
    .admin-settings-page
    .settings-grid {

        grid-template-columns:
            1fr !important;

    }


    body.dashboard-shell
    .package-admin-card {

        padding:
            13px !important;

    }


    body.dashboard-shell
    .package-admin-top {

        align-items:
            flex-start;

    }


    body.dashboard-shell
    .package-role-checks {

        gap:
            9px;

    }


    body.dashboard-shell
    .package-admin-actions {

        justify-content:
            stretch;

    }


    body.dashboard-shell
    .package-admin-actions .btn {

        flex:
            1;

    }


    body.dashboard-shell
    .admin-settings-page
    .settings-card {

        padding:
            14px !important;

    }


    body.dashboard-shell
    .settings-submit {

        position:
            sticky;

        bottom:
            10px;

        z-index:
            50;

        padding:
            8px;

        border-radius:
            14px;

        background:
            rgba(255,255,255,.92);

        backdrop-filter:
            blur(10px);

    }


    body.dashboard-shell
    .settings-submit .btn {

        width:
            100%;

    }

}


/* ==========================================================
   AQARK PHASE 7B — COMPACT PACKAGE MANAGER
   ========================================================== */

body.dashboard-shell .packages-page {
    --pkg-border: #e5eaf2;
}


/* ADD PACKAGE */

body.dashboard-shell
.admin-package-create {
    padding: 14px 16px !important;
}

body.dashboard-shell
.admin-package-create .portal-panel-head {
    margin: 0 !important;
}

body.dashboard-shell
.admin-package-create .portal-panel-head {
    cursor: pointer;
}

body.dashboard-shell
.admin-package-create .portal-panel-head::after {
    content: "+";
    margin-inline-start: auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eef3ff;
    color: #25357d;
    font-size: 18px;
    font-weight: 700;
}

body.dashboard-shell
.admin-package-create.aq-open
.portal-panel-head::after {
    content: "−";
}

body.dashboard-shell
.admin-package-create:not(.aq-open)
.admin-form-grid {
    display: none !important;
}

body.dashboard-shell
.admin-package-create.aq-open
.admin-form-grid {
    margin-top: 15px;
}


/* PACKAGE LIST */

body.dashboard-shell
.package-admin-list {
    gap: 9px !important;
}

body.dashboard-shell
.package-admin-card {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--pkg-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow:
        0 3px 10px rgba(31,40,95,.025) !important;
    overflow: hidden;
}


/* TOP ROW */

body.dashboard-shell
.package-admin-top {
    min-height: 66px;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

body.dashboard-shell
.package-admin-top > div:first-child {
    flex: 1;
    min-width: 0;
}

body.dashboard-shell
.package-admin-top b {
    font-size: 12px !important;
    line-height: 1.3;
}

body.dashboard-shell
.package-admin-top small {
    font-size: 9px !important;
}


/* SUMMARY */

.aq-package-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-inline-start: auto;
}

.aq-package-summary span {
    padding: 5px 8px;
    border-radius: 8px;
    background: #f4f6fa;
    color: #6b7487;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.aq-package-summary .aq-price {
    color: #25357d;
    background: #edf2ff;
}


/* EDIT BUTTON */

.aq-package-toggle {
    border: 1px solid #dce3ef;
    background: #fff;
    color: #263574;
    height: 32px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.aq-package-toggle:hover {
    background: #f5f7fc;
}


/* COLLAPSED */

body.dashboard-shell
.package-admin-card:not(.aq-open)
.admin-form-grid.compact,

body.dashboard-shell
.package-admin-card:not(.aq-open)
.package-admin-actions {
    display: none !important;
}


/* OPEN */

body.dashboard-shell
.package-admin-card.aq-open {
    border-color: #ced8ee !important;
    box-shadow:
        0 6px 18px rgba(31,40,95,.045) !important;
}

body.dashboard-shell
.package-admin-card.aq-open
.package-admin-top {
    background: #fafbfe;
    border-bottom: 1px solid #e8ecf3 !important;
}

body.dashboard-shell
.package-admin-card
.admin-form-grid.compact {
    padding: 14px !important;
    gap: 9px !important;
}


/* REDUCE FIELD HEIGHT */

body.dashboard-shell
.package-admin-card input,
body.dashboard-shell
.package-admin-card select {
    min-height: 38px !important;
}

body.dashboard-shell
.package-admin-card textarea {
    min-height: 68px !important;
    height: 68px;
    resize: vertical;
}


/* ROLE AREA */

body.dashboard-shell
.package-admin-card
.package-role-checks {
    padding: 9px 10px !important;
    gap: 6px 12px !important;
}


/* ACTION BAR */

body.dashboard-shell
.package-admin-actions {
    margin: 0 !important;
    padding: 10px 14px 13px !important;
    border-top: 1px solid #edf0f5;
    background: #fbfcfe;
}

body.dashboard-shell
.package-admin-actions .btn {
    min-height: 36px !important;
}


/* DESKTOP: denser fields */

@media (min-width: 900px) {

    body.dashboard-shell
    .package-admin-card
    .admin-form-grid.compact {
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    body.dashboard-shell
    .package-admin-top {
        min-height: 72px;
        padding: 11px !important;
        flex-wrap: wrap;
    }

    .aq-package-summary {
        order: 3;
        width: 100%;
        margin: 2px 0 0;
    }

    .aq-package-toggle {
        margin-inline-start: auto;
    }

    body.dashboard-shell
    .package-admin-card
    .admin-form-grid.compact {
        padding: 11px !important;
    }

    body.dashboard-shell
    .package-admin-card textarea {
        min-height: 62px !important;
        height: 62px;
    }

}


/* ==========================================================
   AQARK PHASE 7C — ADMIN COMPACT UX
   Packages page intentionally excluded
   ========================================================== */


/* ----------------------------------------------------------
   USERS
   ---------------------------------------------------------- */

body.dashboard-shell
.admin-grid
.admin-users-panel {
    border-radius: 16px !important;
}

body.dashboard-shell
.admin-users-panel
.portal-table td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body.dashboard-shell
.admin-users-panel select {
    min-height: 38px !important;
    border-radius: 10px !important;
}


/* ----------------------------------------------------------
   PROPERTIES
   ---------------------------------------------------------- */

body.dashboard-shell
.admin-properties-panel
.portal-table td {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

body.dashboard-shell
.admin-properties-panel
.status-pill {
    min-width: 78px;
    justify-content: center;
}

body.dashboard-shell
.admin-properties-panel
.admin-actions {
    gap: 5px !important;
}

body.dashboard-shell
.admin-properties-panel
.admin-actions .btn {
    padding-inline: 10px !important;
}


/* ----------------------------------------------------------
   COMMERCE
   ---------------------------------------------------------- */

body.dashboard-shell
.admin-commerce-page
.portal-panel {
    padding: 14px !important;
}

body.dashboard-shell
.admin-commerce-page
.portal-panel-head {
    margin-bottom: 10px !important;
}

body.dashboard-shell
.admin-commerce-page
.portal-table td {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

body.dashboard-shell
.admin-commerce-page
.inline-status-form select {
    min-width: 130px !important;
}

body.dashboard-shell
.admin-commerce-page
.inline-status-form .btn {
    padding-inline: 11px !important;
}


/* ----------------------------------------------------------
   SETTINGS
   ---------------------------------------------------------- */

body.dashboard-shell
.admin-settings-page
.settings-card {
    min-height: auto !important;
}

body.dashboard-shell
.admin-settings-page
.settings-card input,
body.dashboard-shell
.admin-settings-page
.settings-card select {
    min-height: 39px !important;
}

body.dashboard-shell
.admin-settings-page
.settings-card p.muted {
    line-height: 1.65;
    margin-bottom: 9px;
}


/* ----------------------------------------------------------
   PAGINATION
   ---------------------------------------------------------- */

body.dashboard-shell
.admin-grid nav[role="navigation"] {
    margin-top: 12px;
}

body.dashboard-shell
.admin-grid nav[role="navigation"] > div {
    box-shadow: none !important;
}


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1100px) {

    body.dashboard-shell
    .admin-users-panel .portal-table,
    body.dashboard-shell
    .admin-properties-panel .portal-table,
    body.dashboard-shell
    .admin-commerce-page .portal-table {
        font-size: 10.5px;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    body.dashboard-shell
    .admin-users-panel .portal-table-wrap,
    body.dashboard-shell
    .admin-properties-panel .portal-table-wrap,
    body.dashboard-shell
    .admin-commerce-page .portal-table-wrap {
        margin-inline: -3px;
    }

    body.dashboard-shell
    .admin-users-panel .portal-table,
    body.dashboard-shell
    .admin-properties-panel .portal-table,
    body.dashboard-shell
    .admin-commerce-page .portal-table {
        min-width: 720px;
    }

    body.dashboard-shell
    .admin-settings-page
    .settings-card {
        border-radius: 14px !important;
    }

}


/* ==========================================================
   AQARK PHASE 7D — SUPER ADMIN COMPLETION
   Packages intentionally excluded
   ========================================================== */


/* ==========================================================
   ADMIN HOME
   ========================================================== */

body.dashboard-shell
.admin-home-page
.admin-hero {
    padding: 20px !important;
    border-radius: 18px !important;
}

body.dashboard-shell
.admin-home-page
.portal-hero-stats {
    gap: 8px !important;
}

body.dashboard-shell
.admin-home-page
.portal-hero-stats > div {
    min-width: 92px;
    padding: 9px 11px !important;
}

body.dashboard-shell
.admin-home-page
.admin-module-grid {
    gap: 9px !important;
}

body.dashboard-shell
.admin-home-page
.admin-module-grid > a {
    min-height: 104px !important;
    padding: 14px !important;
    border-radius: 14px !important;
}

body.dashboard-shell
.admin-home-page
.admin-module-grid > a i {
    font-size: 18px;
}

body.dashboard-shell
.admin-home-page
.admin-module-grid > a b {
    font-size: 11px;
}

body.dashboard-shell
.admin-home-page
.admin-module-grid > a span {
    font-size: 9px;
    line-height: 1.5;
}

body.dashboard-shell
.admin-home-page
.portal-two {
    gap: 10px !important;
}

body.dashboard-shell
.admin-home-page
.country-admin-grid {
    gap: 7px !important;
}

body.dashboard-shell
.admin-home-page
.country-admin-grid a {
    padding: 11px !important;
    min-height: 76px !important;
}


/* ==========================================================
   LEADS
   ========================================================== */

body.dashboard-shell
.admin-leads-panel {
    padding: 0 !important;
    overflow: hidden;
}

body.dashboard-shell
.admin-leads-panel
.portal-table td {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

body.dashboard-shell
.admin-leads-panel
.portal-table td:nth-child(3) {
    max-width: 270px;
    line-height: 1.55;
}

body.dashboard-shell
.admin-leads-panel select {
    min-width: 116px;
    min-height: 36px !important;
    border-radius: 9px !important;
}


/* ==========================================================
   LOCATIONS
   ========================================================== */

body.dashboard-shell
.admin-locations-page
.portal-panel {
    padding: 14px !important;
}

body.dashboard-shell
.admin-location-create {
    gap: 9px !important;
}

body.dashboard-shell
.admin-location-create input,
body.dashboard-shell
.admin-location-create select {
    min-height: 38px !important;
}

body.dashboard-shell
.admin-locations-page
.portal-table td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

body.dashboard-shell
.admin-locations-page
.btn.danger.small {
    min-height: 32px !important;
    padding: 6px 10px !important;
}


/* ==========================================================
   NETWORK
   ========================================================== */

body.dashboard-shell
.admin-network-page
.portal-panel {
    padding: 14px !important;
}

body.dashboard-shell
.admin-network-page
.admin-card-list {
    gap: 8px !important;
}

body.dashboard-shell
.admin-network-page
.admin-inline-card {
    padding: 10px !important;
    gap: 7px !important;
    border-radius: 12px !important;
}

body.dashboard-shell
.admin-network-page
.admin-inline-card input,
body.dashboard-shell
.admin-network-page
.admin-inline-card select {
    min-height: 37px !important;
}

body.dashboard-shell
.admin-network-page
.portal-table input,
body.dashboard-shell
.admin-network-page
.portal-table select {
    min-height: 35px !important;
}

body.dashboard-shell
.admin-network-page
.amenity-admin-grid {
    gap: 8px !important;
}

body.dashboard-shell
.admin-network-page
.amenity-admin-grid form {
    padding: 9px !important;
    border-radius: 11px !important;
}


/* ==========================================================
   DESKTOP DENSITY
   ========================================================== */

@media (min-width: 1100px) {

    body.dashboard-shell
    .admin-location-create {
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

    body.dashboard-shell
    .admin-network-page
    .admin-inline-card {
        grid-template-columns:
            1.15fr 1.15fr .9fr 1.15fr 1.15fr auto auto;
        align-items: center;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.dashboard-shell
    .admin-home-page
    .admin-hero {
        padding: 14px !important;
    }

    body.dashboard-shell
    .admin-home-page
    .portal-hero-stats {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    body.dashboard-shell
    .admin-home-page
    .admin-module-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    body.dashboard-shell
    .admin-home-page
    .admin-module-grid > a {
        min-height: 94px !important;
        padding: 11px !important;
    }

    body.dashboard-shell
    .admin-leads-panel
    .portal-table {
        min-width: 700px;
    }

    body.dashboard-shell
    .admin-locations-page
    .portal-table {
        min-width: 720px;
    }

    body.dashboard-shell
    .admin-network-page
    .portal-table {
        min-width: 820px;
    }

    body.dashboard-shell
    .admin-network-page
    .admin-inline-card {
        grid-template-columns: 1fr !important;
    }

    body.dashboard-shell
    .admin-network-page
    .amenity-admin-grid {
        grid-template-columns: 1fr !important;
    }

}


/* ==========================================================
   AQARK PHASE 7E — PACKAGE VISUAL HARDENING
   No Blade/controller changes
   ========================================================== */

body.dashboard-shell .packages-page {
    padding-bottom: 20px;
}

/* tighter page title */
body.dashboard-shell
.packages-page
.portal-title-row {
    margin-bottom: 12px !important;
}

body.dashboard-shell
.packages-page
.portal-title-row h1 {
    margin-bottom: 3px !important;
}

body.dashboard-shell
.packages-page
.portal-title-row .muted {
    margin-top: 2px !important;
    line-height: 1.5 !important;
}


/* make collapsed package cards clearly compact */
body.dashboard-shell
.package-admin-card:not(.aq-open) {
    min-height: 0 !important;
}

body.dashboard-shell
.package-admin-card:not(.aq-open)
.package-admin-top {
    min-height: 56px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}


/* reduce excessive gaps between cards */
body.dashboard-shell
.package-admin-list {
    row-gap: 7px !important;
}


/* compact package headings */
body.dashboard-shell
.package-admin-top b {
    font-size: 11px !important;
    line-height: 1.25 !important;
}

body.dashboard-shell
.package-admin-top small {
    opacity: .72;
}


/* cleaner summary chips */
body.dashboard-shell
.aq-package-summary span {
    padding: 4px 7px !important;
    border-radius: 7px !important;
    font-size: 8.5px !important;
}


/* compact edit button */
body.dashboard-shell
.aq-package-toggle {
    height: 29px !important;
    min-height: 29px !important;
    padding-inline: 9px !important;
}


/* opened card form density */
body.dashboard-shell
.package-admin-card.aq-open
.admin-form-grid.compact {
    padding: 11px 12px !important;
    gap: 7px !important;
}

body.dashboard-shell
.package-admin-card.aq-open label {
    margin-bottom: 0 !important;
}

body.dashboard-shell
.package-admin-card.aq-open input,
body.dashboard-shell
.package-admin-card.aq-open select {
    min-height: 35px !important;
    height: 35px;
}

body.dashboard-shell
.package-admin-card.aq-open textarea {
    min-height: 58px !important;
    height: 58px !important;
}


/* role/flags area */
body.dashboard-shell
.package-admin-card
.package-role-checks {
    min-height: 38px !important;
    padding: 7px 9px !important;
}


/* action bar */
body.dashboard-shell
.package-admin-actions {
    padding: 8px 12px 10px !important;
}

body.dashboard-shell
.package-admin-actions .btn {
    min-height: 33px !important;
}


/* add package panel */
body.dashboard-shell
.admin-package-create {
    margin-bottom: 10px !important;
}

body.dashboard-shell
.admin-package-create:not(.aq-open) {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* desktop */
@media (min-width: 900px) {

    body.dashboard-shell
    .packages-page
    .package-admin-card.aq-open
    .admin-form-grid.compact {
        grid-template-columns:
            repeat(4,minmax(0,1fr)) !important;
    }

}


/* mobile */
@media (max-width: 767px) {

    body.dashboard-shell
    .package-admin-card:not(.aq-open)
    .package-admin-top {
        min-height: 64px !important;
    }

    body.dashboard-shell
    .aq-package-summary {
        gap: 4px !important;
    }

    body.dashboard-shell
    .aq-package-summary span {
        padding: 4px 6px !important;
    }

    body.dashboard-shell
    .package-admin-card.aq-open
    .admin-form-grid.compact {
        padding: 10px !important;
    }

}