/**
 * Atelier Nusa — mobile layout
 * Bottom nav, touch targets, safe areas, table scroll, compact chrome.
 */

/* —— Base mobile —— */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.studio-bg {
    overscroll-behavior-y: contain;
}

/* Safe area (iPhone notch / home bar) */
@supports (padding: env(safe-area-inset-bottom)) {
    body.studio-bg {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* —— Viewport ≤ 1023px (below lg) —— */
@media (max-width: 1023px) {
    html {
        font-size: 16px;
    }

    /* Room for bottom nav */
    body.studio-bg main {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        padding-top: 1rem !important;
    }

    /* Sticky header — compact */
    body.studio-bg header.sticky {
        position: sticky;
        top: 0;
        z-index: 30;
        padding-top: env(safe-area-inset-top, 0px);
    }

    body.studio-bg header.sticky .h-16 {
        height: 3.25rem;
        min-height: 3.25rem;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }

    /* Touch targets */
    body.studio-bg .btn-primary,
    body.studio-bg .btn-secondary {
        min-height: 2.75rem;
        padding: 0.65rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 0.85rem !important;
    }

    body.studio-bg .btn-ghost,
    body.studio-bg .btn-danger {
        min-height: 2.5rem;
        padding: 0.5rem 0.75rem !important;
    }

    body.studio-bg .nav-link {
        min-height: 2.85rem;
        padding: 0.75rem 0.9rem !important;
        font-size: 1rem !important;
        border-radius: 0.85rem !important;
    }

    body.studio-bg .form-input,
    body.studio-bg input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    body.studio-bg textarea,
    body.studio-bg select {
        min-height: 2.85rem !important;
        font-size: 16px !important; /* cegah zoom iOS */
        border-radius: 0.85rem !important;
    }

    body.studio-bg .chip-yes,
    body.studio-bg .chip-no {
        min-height: 2.5rem;
        min-width: 3.5rem !important;
        padding: 0.45rem 0.65rem !important;
        font-size: 0.9rem !important;
    }

    /* KPI: full width stack, slightly tighter */
    body.studio-bg .kpi {
        padding: 1rem 1.1rem !important;
    }

    body.studio-bg .kpi-value {
        font-size: 1.45rem !important;
        word-break: break-word;
    }

    /* Hero */
    body.studio-bg .atn-hero {
        padding: 1.1rem 1.15rem !important;
        border-radius: 1rem !important;
    }

    body.studio-bg .atn-hero h1,
    body.studio-bg .atn-hero .atn-hero-title {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
    }

    /* Glass cards */
    body.studio-bg .glass,
    body.studio-bg .glass-strong {
        border-radius: 1rem !important;
    }

    /* Tables: scroll only inside wrapper (page never grows wider) */
    body.studio-bg .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 0.25rem;
    }

    body.studio-bg .table-dark {
        /* no fixed min-width on page — width driven by content, clipped by parent */
        font-size: 0.8125rem !important;
    }

    body.studio-bg .table-dark th,
    body.studio-bg .table-dark td {
        padding: 0.55rem 0.6rem !important;
    }

    /* Sticky first column on project matrices */
    body.studio-bg .table-dark th:first-child,
    body.studio-bg .table-dark td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #121a2b;
        box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.45);
    }

    body.studio-bg .table-dark thead th:first-child {
        z-index: 2;
        background: #1a2336;
    }

    /* Tab bars: snap scroll */
    body.studio-bg .atn-tabs,
    body.studio-bg [class*="overflow-x-auto"].rounded-2xl {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 0.25rem;
        scrollbar-width: none;
    }

    body.studio-bg .atn-tabs::-webkit-scrollbar,
    body.studio-bg [class*="overflow-x-auto"].rounded-2xl::-webkit-scrollbar {
        display: none;
    }

    body.studio-bg .atn-tabs > button,
    body.studio-bg [class*="overflow-x-auto"].rounded-2xl > button {
        scroll-snap-align: start;
        flex-shrink: 0;
        min-height: 2.65rem;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

    /* Charts shorter on phone */
    body.studio-bg .relative.h-72,
    body.studio-bg .relative.h-64 {
        height: 14rem !important;
    }

    /* Flex action rows wrap cleanly */
    body.studio-bg .flex.flex-wrap.gap-2 {
        gap: 0.5rem;
    }

    /* Person cards full width */
    body.studio-bg .person-card {
        padding: 1rem !important;
    }

    /* Mobile drawer full-height, wider */
    body.studio-bg .atn-drawer-panel {
        width: min(20rem, 88vw) !important;
        max-width: 100%;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Hide desktop-only chrome that crowds header */
    body.studio-bg .atn-hide-mobile {
        display: none !important;
    }

    /* Stack header CTA smaller */
    body.studio-bg header .btn-primary {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        font-size: 0.8rem !important;
        min-height: 2.4rem;
        white-space: nowrap;
    }

    /* Step strip on project: allow wrap */
    body.studio-bg .atn-step-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        max-width: 100%;
        padding-bottom: 0.25rem;
    }
}

/* —— Bottom navigation —— */
.atn-bottom-nav {
    display: none;
}

@media (max-width: 1023px) {
    .atn-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        align-items: stretch;
        justify-content: space-around;
        gap: 0.15rem;
        min-height: 3.65rem;
        padding: 0.35rem 0.35rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
        background: rgba(10, 14, 24, 0.94);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.5);
    }

    .atn-bottom-nav a,
    .atn-bottom-nav button {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 3.1rem;
        min-width: 0;
        padding: 0.35rem 0.2rem;
        border: 0;
        border-radius: 0.75rem;
        background: transparent;
        color: #9aa8bc;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.15;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .atn-bottom-nav a:active,
    .atn-bottom-nav button:active {
        background: rgba(255, 255, 255, 0.06);
    }

    .atn-bottom-nav a.atn-nav-active,
    .atn-bottom-nav button.atn-nav-active {
        color: #d4af78;
        background: rgba(201, 162, 39, 0.1);
    }

    .atn-bottom-nav .atn-nav-icon {
        width: 1.35rem;
        height: 1.35rem;
        display: block;
    }

    .atn-bottom-nav .atn-nav-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 0.1rem;
    }
}

/* —— Very small phones —— */
@media (max-width: 380px) {
    body.studio-bg .kpi-value {
        font-size: 1.25rem !important;
    }

    body.studio-bg .atn-bottom-nav .atn-nav-label {
        font-size: 0.62rem;
    }

    body.studio-bg header .btn-primary {
        font-size: 0.72rem !important;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }
}

/* Landscape phone: less bottom padding if short */
@media (max-width: 1023px) and (max-height: 480px) {
    body.studio-bg main {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .atn-bottom-nav {
        min-height: 3rem;
    }
}

/* File input full width on mobile */
@media (max-width: 640px) {
    body.studio-bg input[type="file"] {
        width: 100%;
        max-width: 100%;
    }

    body.studio-bg .grid.sm\:grid-cols-2,
    body.studio-bg .grid.sm\:grid-cols-3 {
        gap: 0.75rem;
    }
}