/**
 * WOH Growth Track — Responsive UI overrides
 * Layered on top of woh-sms/sms-app.css. Every rule that touches layout
 * geometry is media-query scoped so desktop (≥1024px) inherits sms-app.css
 * untouched.
 */

/* ── Truly global (non-geometry) ──────────────────────────────── */
body.woh-app-body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Layer ordering: backdrop above content, sidebar above backdrop,
   topbar above sidebar — matches sms-app.css expectations. */
.sidebar-backdrop { z-index: 39; }

/* ── Tablet & mobile (≤1023px) ─────────────────────────────────── */
@media (max-width: 1023px) {
    .woh-topbar  { padding: 0 0.85rem; }
    .topbar-brand { font-size: 0.95rem; gap: 0.5rem; }
    .topbar-logo  { height: 28px; }
    .topbar-left  { gap: 0.5rem; }
    .topbar-right { gap: 0.25rem; }

    /* Mobile sidebar overlay — fully rewrite animation to use transform.
       Pinning left:0 and sliding via translateX avoids cascade/transition
       glitches we were hitting on iOS Safari where the sidebar rendered
       only a thin strip. !important fences the geometry from sms-app.css
       and any WP theme rules that might leak in. */
    .woh-sidebar {
        left: 0 !important;
        width: min(85vw, 320px) !important;
        max-width: 320px;
        transform: translateX(-100%);
        transition: transform 0.3s ease !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }
    .woh-sidebar.open {
        transform: translateX(0) !important;
    }

    .user-dropdown-btn { gap: 0.5rem; padding: 0.35rem; }
    .user-dropdown-btn .user-name {
        max-width: 140px;
        font-size: 0.8rem;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .woh-content { padding: 1rem; }
}

/* ── Phone (≤767px) ────────────────────────────────────────────── */
@media (max-width: 767px) {
    :root { --topbar-height: 56px; }

    .woh-topbar { padding: 0 0.65rem; height: 56px; }
    .woh-app-container { padding-top: 56px; min-height: calc(100vh - 56px); }
    .woh-sidebar { top: 56px; }

    .topbar-brand   { font-size: 0.9rem; gap: 0.4rem; }
    .topbar-logo    { height: 24px; }
    .topbar-brand .system-name { font-size: 0.85rem; }
    .topbar-left    { gap: 0.35rem; }
    .topbar-right   { gap: 0.1rem; }

    .user-dropdown-btn { gap: 0.35rem; padding: 0.25rem; }
    .user-dropdown-btn .avatar { width: 28px; height: 28px; }
    .user-dropdown-btn .user-name { display: none; }

    .woh-content { padding: 0.75rem; }

    /* Typography scale */
    .woh-content h1 { font-size: 1.35rem; line-height: 1.25; }
    .woh-content h2 { font-size: 1.15rem; line-height: 1.3; }
    .woh-content h3 { font-size: 1rem;    line-height: 1.35; }
    .woh-content p,
    .woh-content li,
    .woh-content label { font-size: 0.9rem; }

    /* Modals tighter */
    .woh-modal-header { padding: 0.9rem 1rem; }
    .woh-modal-body   { padding: 1rem; }
    .woh-modal-footer { padding: 0.75rem 1rem; }

    /* Scope table overflow to content region so sidebar/topbar tables
       (if any) aren't affected. */
    .woh-content table { font-size: 0.825rem; }
    .woh-content .table-wrap,
    .woh-content .woh-table-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Prevent iOS zoom on focus — 16px baseline on form controls only. */
    .woh-content input,
    .woh-content select,
    .woh-content textarea {
        font-size: 16px;
        padding: 0.65rem 0.75rem;
    }

    /* Sidebar — tighter nav spacing on phones. */
    .sidebar-nav   { padding: 1rem 0.75rem; }
    .sidebar-group { margin-top: 1rem; font-size: 0.7rem; }
    .sidebar-link  { font-size: 0.95rem; padding: 0.7rem 0.75rem; gap: 0.7rem; }
    .sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
}

/* ── Small phone (≤380px) ──────────────────────────────────────── */
@media (max-width: 380px) {
    .woh-content { padding: 0.6rem; }
    .topbar-brand { font-size: 0.8rem; }
    .topbar-brand .system-name { display: none; }
    .topbar-logo { height: 22px; }
    .woh-content h1 { font-size: 1.2rem; }
    .woh-content h2 { font-size: 1.05rem; }
}

/* ── Desktop (≥1024px) — protect from stray mobile bleed ───────── */
@media (min-width: 1024px) {
    .sidebar-backdrop { display: none !important; }
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .woh-sidebar,
    .sidebar-backdrop,
    .dropdown-menu,
    .card { transition: none !important; animation: none !important; }
}