/* ============================================================================
   SEA Host — Responsive
   Dark sidebar SaaS layout
   Breakpoints: 320 / 375 / 390 / 414 / 768 / 992 / 1200 / 1920
   ============================================================================ */

/* Bottom navigation is a phone-only pattern; hidden everywhere else */
.sea-bottom-nav { display: none; }

/* ============================================================================
   ≥ 1200px — full sidebar + content
   ============================================================================ */
@media (min-width: 1200px) {
    .tiles { grid-template-columns: repeat(4, 1fr); }
    .sea-quick-actions { grid-template-columns: repeat(4, 1fr); }
    .home-shortcuts ul { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================================
   992px – 1199px
   ============================================================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    :root { --sea-sidebar-width: 230px; }
    .tiles { grid-template-columns: repeat(3, 1fr); }
    .sea-quick-actions { grid-template-columns: repeat(3, 1fr); }
    .home-shortcuts ul { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================================
   768px – 991px — tablet: collapsible sidebar
   ============================================================================ */
@media (min-width: 768px) and (max-width: 991px) {
    :root { --sea-sidebar-width: 200px; }

    .pull-md-left { float: left; }
    .pull-md-right { float: right; }

    /* Sidebar narrower on tablet */
    #main-body > .container > .row > .sidebar {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
        padding: 18px 0;
    }
    #main-body > .container > .row > .sidebar .list-group-item { padding: 9px 16px 9px 20px; font-size: 0.88rem; }
    #main-body > .container > .row > .sidebar .panel-heading { padding: 8px 16px 4px !important; }
    #main-body .main-content { padding: 24px 24px 44px !important; }

    /* Info rail stacks beneath the content on tablets (no room for 3 tracks) */
    #main-body .sea-sidebar-info {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
        order: 3;
        position: static;
        height: auto;
        overflow: visible;
        border-left: 0;
        padding: 0 24px 44px;
    }

    .tiles { grid-template-columns: repeat(2, 1fr); }
    .sea-quick-actions { grid-template-columns: repeat(2, 1fr); }
    .home-shortcuts ul { grid-template-columns: repeat(2, 1fr); }

    /* Sidebar panel-actions inline chips */
    .panel-actions { border: 0 !important; box-shadow: none !important; }
    .panel-actions > .list-group {
        padding: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        background: transparent;
    }
    .panel-actions > .list-group .list-group-item {
        display: inline-block;
        border: 1px solid var(--sea-border) !important;
        border-radius: var(--sea-radius-sm) !important;
        margin: 2px;
        padding: 6px 18px;
        background: var(--sea-surface);
        color: var(--sea-text);
        font-size: 0.86rem;
    }
}

/* ============================================================================
   ≤ 767px — phone: sidebar collapses to full-width content
   ============================================================================ */
@media (max-width: 767px) {
    body { font-size: 0.98rem; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }

    /* Header: compact, hamburger first, logo beside it, actions right */
    section#header .container {
        gap: 10px;
        padding: 6px 14px;
        min-height: 52px;
        justify-content: flex-start;
    }
    .sea-drawer-toggle { order: -1; margin-right: 2px; }
    body:has(#main-body > .container > .row > .sidebar) .sea-drawer-toggle { display: inline-flex; }
    #header .logo { order: 1; }
    #header .logo img { max-height: 30px; }
    #header .logo-text { font-size: 1.35rem; }
    ul.top-nav { display: none !important; }

    /* E-commerce bottom navigation replaces the top utility menu on phones */
    body { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
    .logincontainer .sea-auth-logo { max-height: 40px; margin-bottom: 10px; }
    .sea-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--sea-border);
        box-shadow: 0 -6px 24px rgba(15, 8, 35, 0.10);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .sea-bottom-nav .sea-bottom-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        color: var(--sea-text-muted);
        font-size: 0.66rem;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .sea-bottom-nav .sea-bottom-item i { font-size: 1.15rem; color: var(--sea-text-muted); }
    .sea-bottom-nav .sea-bottom-item:active i,
    .sea-bottom-nav .sea-bottom-item.sea-bottom-item-cart i,
    .sea-bottom-nav .sea-bottom-item.sea-bottom-item-cart { color: var(--sea-primary); }
    .sea-bottom-nav .sea-bottom-spacer { pointer-events: none; }

    /* Sidebar drawer: submenu parents expand their own stacked lists on tap */
    .sea-sidebar-menu > li.open > .dropdown-menu { display: block !important; }
    .sea-sidebar-menu .dropdown-menu { display: none; }

    /* Main menu: becomes a right-side slide-over panel (not a dropdown) */
    section#main-menu { border-bottom: 0 !important; }
    section#main-menu .container { padding: 0 14px; }
    section#main-menu .navbar { min-height: 46px; }
    section#main-menu .navbar-header { position: static; }
    section#main-menu .navbar-toggle { display: block; margin: 9px 0; float: left; }
    .navbar-main .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px !important;
        max-width: 85vw;
        height: 100vh;
        background: var(--sea-header-bg);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        border-top: 0;
        border-radius: 0;
        padding: 0;
        margin: 0;
        z-index: 62;
        box-shadow: var(--sea-shadow-lg);
        transform: translateX(102%);
        transition: transform 0.28s var(--sea-ease);
        overflow-y: auto;
        display: block !important;
    }
    .navbar-main .navbar-collapse.in { transform: translateX(0); display: block !important; }
    .navbar-main .navbar-collapse.collapse { display: block !important; }
    .navbar-main .navbar-collapse .nav.navbar-nav,
    .navbar-main .navbar-collapse .nav.navbar-nav.navbar-right {
        float: none !important;
        width: 100%;
        margin: 0;
    }
    .navbar-main .navbar-nav > li {
        float: none !important;
        width: 100%;
    }
    .navbar-main .navbar-nav > li > a {
        padding: 13px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 0;
        margin: 0;
        color: #ffffff !important;
    }
    .navbar-main .navbar-collapse > .navbar-nav:first-child > li:first-child > a { padding-top: 22px; }
    .navbar-main .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100%;
        box-shadow: none;
        border: 0;
        background: rgba(255, 255, 255, 0.04);
        margin: 0;
    }
    .navbar-main .dropdown-menu > li > a { color: #ffffff !important; padding: 11px 34px; }
    .navbar-main .dropdown-menu > li > a:hover { background: var(--sea-sidebar-hover); color: #fff !important; }
    /* Backdrop for the right drawer */
    .sea-nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 8, 35, 0.55);
        z-index: 61;
        display: none;
    }
    body.sea-nav-open .sea-nav-backdrop { display: block; }
    body.sea-nav-open { overflow: hidden; }
    /* Hide the sidebar drawer toggle state clash on the main-menu bar */
    section#main-menu { z-index: 29; }

    /* Sidebar becomes a slide-over drawer from the left */
    #main-body > .container > .row { display: block; }
    #main-body > .container > .row > .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        padding: 24px 0 40px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 60;
        transform: translateX(-105%);
        transition: transform 0.28s var(--sea-ease), box-shadow 0.28s var(--sea-ease);
        box-shadow: none;
        display: block;
    }
    html.sea-drawer-open #main-body > .container > .row > .sidebar {
        transform: translateX(0);
        box-shadow: var(--sea-shadow-lg);
    }
    /* Drawer panels stack as the desktop rail, not chips */
    #main-body > .container > .row > .sidebar .panel-sidebar,
    #main-body > .container > .row > .sidebar .panel { display: block; width: 100%; }
    /* Real list-group menus show; WHMCS mobile-select duplicates stay hidden */
    #main-body > .container > .row > .sidebar .hidden-sm.hidden-xs { display: block !important; }
    #main-body > .container > .row > .sidebar .hidden-lg.hidden-md { display: none !important; }
    #main-body > .container > .row > .sidebar .panel-heading { padding: 10px 24px 6px !important; }
    #main-body > .container > .row > .sidebar .panel-title { font-size: 0.72rem !important; }
    #main-body > .container > .row > .sidebar .list-group { display: block; }
    #main-body > .container > .row > .sidebar .list-group-item {
        display: block;
        border-radius: 0 !important;
        border-left: 3px solid transparent !important;
        padding: 10px 24px 10px 28px !important;
        font-size: 0.92rem;
        white-space: normal;
        background: transparent !important;
    }
    #main-body > .container > .row > .sidebar .list-group-item.active { background: var(--sea-sidebar-active) !important; border-left-color: var(--sea-accent) !important; }
    #main-body > .container > .row > .sidebar .list-group-item:hover { background: var(--sea-sidebar-hover) !important; }
    #main-body > .container > .row > .sidebar .panel-footer { display: none; }

    /* Content full width under the drawer */
    #main-body .main-content {
        border-left: 0;
        min-height: auto;
        padding: 20px 16px 40px !important;
    }
    /* Relocated sidebar info — cards under the content on mobile */
    #main-body .sea-sidebar-info {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;
        padding: 0 16px 40px;
        position: static;
        max-height: none;
        overflow: visible;
        border-left: 0;
    }
    #main-body .sea-sidebar-info .panel { margin-bottom: 14px; }

    .header-lined { padding: 20px 16px 16px !important; }
    .header-lined h1 { font-size: 1.4rem !important; }
    .header-lined h1 small { display: none; }

    /* Dashboard */
    .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tiles .tile { padding: 16px 14px; }
    .tiles .tile .stat { font-size: 1.65rem; }
    .tiles .tile .icon { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 1.15rem; }

    .sea-quick-actions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .sea-quick-action { padding: 13px 12px; font-size: 0.88rem; }

    .sea-wallet-banner { flex-direction: column; text-align: center; }
    .home-shortcuts { margin-top: -36px; }
    .home-shortcuts ul { gap: 10px; }
    .home-shortcuts ul li a { padding: 14px; }
    .home-shortcuts ul li a i { width: 42px; height: 42px; font-size: 1.2rem; }

    #home-banner { padding: 50px 0 70px; }
    #home-banner h2 { font-size: 1.5rem; }

    .logincontainer { margin: 14px 12px 40px; padding: 24px 18px; }

    .invoice-container { padding: 22px 16px; }

    section#footer .container { flex-direction: column; text-align: center; }
    section#footer { padding: 18px 0 calc(80px + env(safe-area-inset-bottom, 0px)); }

    .container { padding-left: 14px; padding-right: 14px; }
    .table-responsive { border: 0; }
}

/* ============================================================================
   ≤ 414px — large phones
   ============================================================================ */
@media (max-width: 414px) {
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .tiles .tile .title { font-size: 0.82rem; }
    .sea-quick-actions { grid-template-columns: 1fr 1fr; }
    .sea-quick-action { flex-direction: column; text-align: center; gap: 8px; }
    .sea-welcome-actions { width: 100%; }
    .sea-welcome-actions .btn { flex: 1; }
    .btn-lg { padding: 10px 16px; font-size: 1rem; }

    /* Sidebar pills even more compact */
    #main-body > .container > .row > .sidebar .list-group-item { padding: 6px 10px !important; font-size: 0.78rem; }
}

/* ============================================================================
   ≤ 375px — small phones
   ============================================================================ */
@media (max-width: 375px) {
    .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tiles .tile .stat { font-size: 1.5rem; }
    .tiles .tile .icon { width: 34px; height: 34px; }
    .sea-quick-actions { grid-template-columns: 1fr; }
    .home-shortcuts ul { grid-template-columns: 1fr; }
    ul.top-nav > li > a { font-size: 0.82rem; padding: 6px 8px !important; }

    .form-control { font-size: 16px; } /* prevent iOS zoom */
    .logincontainer { padding: 20px 14px; }
}

/* ============================================================================
   ≤ 320px — smallest
   ============================================================================ */
@media (max-width: 320px) {
    .tiles { grid-template-columns: 1fr; }
    .btn { padding: 9px 12px; font-size: 0.9rem; }
    .header-lined h1 { font-size: 1.3rem !important; }
}

/* ============================================================================
   Reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   Print
   ============================================================================ */
@media print {
    section#header, section#main-menu, section#footer, .sea-bottom-nav { display: none !important; }
    #main-body > .container > .row > .sidebar { display: none !important; }
    #main-body .main-content { border: 0; background: #fff; padding: 0 20px; }
    body { color: #000; background: #fff; }
    .panel { box-shadow: none; border: 1px solid #ccc; }
}