@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

/* Remapping the utilities beats editing ~30 class attributes, and keeps
   the scale in one place. Prefixed with body for specificity: the
   Tailwind CDN injects its own rules after this block. */
body .rounded-lg,
body .rounded-xl { border-radius: var(--r-field); }
body .rounded-2xl { border-radius: var(--r-row); }
body .rounded-3xl { border-radius: var(--r-card); }

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-main);
    color: var(--slate-dark);
    /* Same reasoning as index.html: padding here rather than a p-4
       utility so it can absorb the iPhone safe-area insets. */
    padding:
        calc(1rem + env(safe-area-inset-top))
        calc(1rem + env(safe-area-inset-right))
        calc(1rem + env(safe-area-inset-bottom))
        calc(1rem + env(safe-area-inset-left));
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.tablet-card {
    background: white;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
    border-radius: var(--r-card);
}

.row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: var(--r-row);
    border: 1px solid #E2E8F0;
    background: white;
}

input, select {
    padding: 0.6rem 0.9rem;
    border-radius: var(--r-field);
    border: 1px solid #E2E8F0;
    font-size: 0.8rem;
    outline: none;
}

input:focus, select:focus {
    box-shadow: 0 0 0 2px #FBBF24;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--r-field);
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748B;
    white-space: nowrap;
}

.nav-item.active {
    background: #0F172A;
    color: white;
}

.nav-item:not(.active):hover {
    background: #F1F5F9;
}

.admin-panel { display: none; }
.admin-panel.active { display: block; }

/* --- Mobile bottom bar ------------------------------------------- */
.bnav {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.5rem 0.25rem;
    color: #64748B;
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bnav.active { color: #4F46E5; }
.bnav:active { background: #F1F5F9; }

.sheet-link {
    width: 100%;
    padding: 1rem;
    border-radius: var(--r-row);
    background: #F1F5F9;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}
.sheet-link.active { background: #0F172A; color: white; }

/* --- Mobile / iOS ------------------------------------------------ */
@media (max-width: 767px) {
    /* Below 16px iOS zooms the viewport on focus and never zooms back. */
    input, select, textarea { font-size: 16px !important; }
    input, select { padding: 0.7rem 0.9rem; }

    /* Clear the fixed bottom bar plus the home indicator, so the last
       field in a panel is never trapped underneath it. */
    body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
    #admin-bottom-bar { padding-bottom: env(safe-area-inset-bottom); }

    /* Apple's minimum comfortable touch target is 44pt. */
    .nav-item { min-height: 44px; }
    .bnav { min-height: 48px; }
    .icon-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .row-item button { min-width: 40px; min-height: 40px; }
}