:root {
    --qbit-sidebar: 264px;
    --qbit-radius: 18px;
    --qbit-border: rgba(255,255,255,.08);
    --qbit-muted: #8d98aa;
}
html, body { min-height: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bs-body-bg); }
.admin-shell { min-height: 100vh; }
.admin-sidebar { width: var(--qbit-sidebar) !important; min-height: 100vh; background: linear-gradient(180deg, #111827 0%, #0b1120 100%); border-right: 1px solid var(--qbit-border); }
.sidebar-link { color: var(--bs-secondary-color); font-weight: 600; border-radius: 12px; margin-bottom: 4px; padding: 10px 13px; display: flex; align-items: center; text-decoration: none; transition: .18s ease; }
.sidebar-link:hover, .sidebar-link.active { background: rgba(13,110,253,.14); color: #76a9ff; }
.sidebar-link i { width: 22px; font-size: 1rem; }
.sidebar-section { letter-spacing: .08em; font-size: .68rem; }
.admin-main { height: 100vh; overflow-y: auto; min-width: 0; }
.topbar { min-height: 72px; border-bottom: 1px solid var(--qbit-border) !important; backdrop-filter: blur(16px); }
.page-wrap { padding: 28px; }
.stat-card, .admin-card { border-radius: var(--qbit-radius) !important; border: 1px solid var(--qbit-border) !important; }
.stat-card { transition: transform .2s ease, box-shadow .2s ease; }
.stat-card:hover { transform: translateY(-3px); }
.table-card { overflow: hidden; }
.form-control, .form-select, .input-group-text { border-radius: 12px; }
.btn { min-height: 42px; }
.btn-icon { width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.app-bottom-nav { display: none; }
.offcanvas { z-index: 1085 !important; }
.offcanvas-backdrop { z-index: 1080 !important; }
.empty-state { padding: 48px 20px; text-align: center; color: var(--qbit-muted); }
.theme-toggle { width: 40px; height: 40px; }
.mobile-action { display: none; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, rgba(13,110,253,.15), transparent 45%), #080c14; }
.login-card { width: 100%; max-width: 430px; border-radius: 26px; backdrop-filter: blur(24px); background: rgba(18,24,38,.86); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.login-brand { width: 68px; height: 68px; object-fit: cover; border-radius: 18px; }
.login-input { background: rgba(0,0,0,.22) !important; }
.public-hero-copy { max-width: 760px; }
.portfolio-media { width: 100%; height: 220px; object-fit: cover; }
.theme-icon-btn { width: 40px; height: 40px; }
/*
 * Touch-device fallback:
 * iOS Safari can be put into "Request Desktop Website" mode, which reports a
 * wide CSS viewport even on an iPhone. In that case the normal max-width media
 * query does not fire. Keep the mobile app navigation active on coarse-pointer
 * devices as a fallback.
 */
@media screen and (pointer: coarse) and (max-width: 1199.98px),
       screen and (max-device-width: 991.98px) {
    .admin-sidebar,
    .admin-sidebar.offcanvas,
    .admin-sidebar.offcanvas-lg {
        display: none !important;
    }
    .topbar .btn[data-bs-target="#sidebarMenu"],
    .topbar button[data-bs-target="#sidebarMenu"] {
        display: none !important;
    }
    .admin-main {
        width: 100%;
        height: 100dvh;
        overflow-y: auto;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
    .app-bottom-nav {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 1100;
        display: block;
    }
}

@media (max-width: 991.98px) {
    /* Mobile is a bottom-navigation app: no drawer/sidebar and no hamburger. */
    .admin-sidebar,
    .admin-sidebar.offcanvas,
    .admin-sidebar.offcanvas-lg {
        display: none !important;
    }
    .topbar .btn[data-bs-target="#sidebarMenu"],
    .topbar button[data-bs-target="#sidebarMenu"] {
        display: none !important;
    }
    .admin-main {
        width: 100%;
        height: 100dvh;
        overflow-y: auto;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
    .page-wrap { padding: 18px 16px calc(112px + env(safe-area-inset-bottom)); }
    .topbar {
        min-height: 64px;
        padding: 12px 14px !important;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
    .topbar-title { font-size: 1rem; }
    .desktop-user { display: none !important; }

    /* Full-width, horizontally swipeable mobile app dock. */
    .app-bottom-nav {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 1100;
        display: block;
        padding: 7px;
        border-radius: 20px;
        background: rgba(13, 20, 34, .97);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow: 0 16px 44px rgba(0,0,0,.42);
        overflow: hidden;
    }
    .app-bottom-nav-scroll {
        display: flex;
        align-items: stretch;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .app-bottom-nav-scroll::-webkit-scrollbar { display: none; }
    .app-bottom-nav a {
        flex: 0 0 72px;
        min-width: 72px;
        color: #9ca6b8;
        text-decoration: none;
        text-align: center;
        font-size: .68rem;
        line-height: 1.1;
        padding: 8px 4px 7px;
        border-radius: 14px;
        white-space: nowrap;
        scroll-snap-align: center;
        -webkit-tap-highlight-color: transparent;
    }
    .app-bottom-nav a.active {
        color: #fff;
        background: rgba(13,110,253,.22);
        box-shadow: inset 0 0 0 1px rgba(70,140,255,.08);
    }
    .app-bottom-nav a:hover { color: #fff; }
    .app-bottom-nav a.danger { color: #ff9a9a; }
    .app-bottom-nav i {
        display: block;
        font-size: 1.08rem;
        line-height: 1.15;
        margin-bottom: 4px;
    }
    .app-bottom-nav span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Slightly smaller cards/forms for phone screens. */
    .stat-card:hover { transform: none; }
}
@media (max-width: 575.98px) {
    .page-wrap { padding-left: 12px; padding-right: 12px; }
    .display-4 { font-size: 2.2rem; }
    .table-responsive { border-radius: 14px; }
    .card-body { padding: 16px !important; }
    .modal-dialog { margin: 10px; }
    .topbar { padding-left: 12px !important; padding-right: 12px !important; }
    .topbar h5 { font-size: 1.05rem; }
    .app-bottom-nav { left: 6px; right: 6px; }
    .app-bottom-nav a { flex-basis: 70px; min-width: 70px; }
}
/*
 * Explicit iPhone/iPad app mode. This is intentionally class-based rather than
 * media-query-only because Safari's "Request Desktop Website" can report a
 * desktop-sized CSS viewport on an iPhone.
 */
.mobile-app-mode .admin-sidebar,
.mobile-app-mode .admin-sidebar.offcanvas,
.mobile-app-mode .admin-sidebar.offcanvas-lg {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    position: static !important;
    visibility: hidden !important;
}
.mobile-app-mode .admin-main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    height: 100dvh;
    overflow-y: auto;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
}
.mobile-app-mode .topbar .btn[data-bs-target="#sidebarMenu"],
.mobile-app-mode .topbar button[data-bs-target="#sidebarMenu"],
.mobile-app-mode .mobile-action {
    display: none !important;
}
.mobile-app-mode .app-bottom-nav {
    display: block !important;
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 2000 !important;
}
.mobile-app-mode .page-wrap {
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
}

@media print {
    .no-print { display: none !important; }
}

.portfolio-thumb { width:60px; height:45px; object-fit:cover; }
.admin-request-message{max-width:320px}
@media (max-width:767.98px){.admin-request-message{max-width:190px}.admin-main{padding-bottom:96px}}

/* Quote request workflow */
.letter-space-1{letter-spacing:.12em}
.quote-request-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:28px;border:1px solid var(--bs-border-color);border-radius:28px;background:linear-gradient(145deg,rgba(13,110,253,.12),rgba(255,255,255,.025));box-shadow:0 24px 70px rgba(0,0,0,.12)}
.quote-request-status{display:inline-flex;align-items:center;justify-content:center;padding:.55rem .8rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(120,173,255,.18);background:rgba(120,173,255,.08);color:#9bc1ff;white-space:nowrap}
.quote-request-status.status-reviewing{color:#ffd36e;background:rgba(255,193,7,.08);border-color:rgba(255,193,7,.18)}
.quote-request-status.status-quoted,.quote-request-status.status-converted{color:#78e0b3;background:rgba(25,135,84,.10);border-color:rgba(25,135,84,.2)}
.quote-request-status.status-closed{color:#aebbd0;background:rgba(108,117,125,.1);border-color:rgba(108,117,125,.18)}
.quote-request-status.status-spam{color:#ff9696;background:rgba(220,53,69,.08);border-color:rgba(220,53,69,.18)}
.request-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.request-detail-grid>div{padding:14px 0;border-bottom:1px solid var(--bs-border-color)}
.request-detail-grid span,.request-client-card span{display:block;color:var(--bs-secondary-color);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-bottom:4px}
.request-detail-grid a{color:var(--bs-body-color);text-decoration:none}
.quote-request-message{line-height:1.8;white-space:normal}
.request-service-list{display:grid;gap:10px}.request-service-row{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid var(--bs-border-color)}.request-service-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(13,110,253,.12);color:#79adff;flex:0 0 38px}.request-service-row strong{display:block}.request-service-row p{color:var(--bs-secondary-color);font-size:.86rem;margin:3px 0 0}
.request-client-card{display:grid;gap:7px;padding:16px;border-radius:18px;border:1px solid var(--bs-border-color);background:rgba(255,255,255,.025)}.request-client-card strong{font-size:1.1rem}
.empty-inline{display:flex;gap:12px;align-items:center;padding:16px;border:1px dashed var(--bs-border-color);border-radius:18px;color:var(--bs-secondary-color)}.empty-inline i{font-size:1.3rem;color:#79adff}
.admin-form-stack{display:grid;gap:14px}.quote-from-request-banner{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 16px;margin-bottom:20px;border:1px solid rgba(13,110,253,.25);border-radius:18px;background:rgba(13,110,253,.08)}.quote-from-request-banner>div{display:grid;gap:2px}.quote-from-request-banner strong{font-size:1.05rem}.quote-from-request-banner>div>span:last-child{color:var(--bs-secondary-color);font-size:.86rem}
@media (max-width: 767.98px){.quote-request-hero{align-items:flex-start;flex-direction:column;padding:22px;border-radius:22px}.request-detail-grid{grid-template-columns:1fr}.quote-from-request-banner{align-items:flex-start;flex-direction:column}.quote-from-request-banner .btn{width:100%}}