/* ============================================================
   NAV BAR — clean flat modern
   Supports top & bottom placement via body.nav-top
   Default: bottom
   ============================================================ */

/* ── The bar itself ──────────────────────────────────────── */
.tab {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9500;
    width: 100%;
    max-width: 650px;
    min-width: 320px;
    margin: 0 auto;
    height: 60px;
    padding: 0;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: visible;
    background: #ffffff;
    border: none;
    border-radius: 0;
}

/* ── Bottom placement (default) ─────────────────────────── */
body .tab {
    bottom: 0;
    top: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -1px 0 rgba(0,0,0,0.08);
}

/* ── Top placement ───────────────────────────────────────── */
body.nav-top .tab {
    top: env(safe-area-inset-top, 0px);
    bottom: auto;
    padding-bottom: 0;
    padding-top: 0;
    height: 60px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* ── Tab buttons ─────────────────────────────────────────── */
.tab button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: #888;
    border-radius: 0;
    margin: 0;
    height: 60px;
    min-width: 0;
    transition: color 0.15s, background 0.15s;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
}

.tab button br { display: none; }

.tab button:active { background: rgba(0,0,0,0.04); }

.tab button.active {
    color: #007AFF;
    background: transparent;
    position: relative;
}

/* Active indicator — bottom nav */
body .tab button.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: #007AFF;
    border-radius: 2px 2px 0 0;
}

/* Active indicator — top nav */
body.nav-top .tab button.active::before {
    bottom: auto;
    top: 0;
    border-radius: 0 0 2px 2px;
}

/* ── Dark mode ───────────────────────────────────────────── */
.dark-mode .tab {
    background: #1c1c1e;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.08);
}

body.nav-top .dark-mode .tab,
.dark-mode body.nav-top .tab {
    box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

.dark-mode .tab button        { color: #888; }
.dark-mode .tab button.active { color: #0A84FF; }
.dark-mode .tab button.active::before { background: #0A84FF; }

/* ── Dark mode toggle pill ───────────────────────────────── */
.dark-toggle-btn {
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 4px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.07) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    transition: background 0.2s, transform 0.15s !important;
    box-shadow: none !important;
    align-self: center;
    flex-shrink: 0;
}

.dark-toggle-btn:hover  { background: rgba(0,0,0,0.12) !important; transform: scale(1.08) !important; }
.dark-toggle-btn:active { transform: scale(0.93) !important; }

.dark-mode .dark-toggle-btn {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* ── Tab content ─────────────────────────────────────────── */
.tabcontent {
    display: none;
    padding: 10px;
    box-sizing: border-box;
}

/* ── Nav position toggle (in Settings tab) ───────────────── */
.nav-position-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #f5f5f7;
    border-radius: 10px;
    margin: 8px 0;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.dark-mode .nav-position-toggle {
    background: #2c2c2e;
    color: #e5e5ea;
}

.nav-position-toggle .toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pill switch */
.nav-pos-switch {
    position: relative;
    width: 100px;
    height: 32px;
    background: #e0e0e0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    border: none;
    padding: 0;
    overflow: hidden;
}

.dark-mode .nav-pos-switch { background: #3a3a3c; }

.nav-pos-switch .switch-options {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.nav-pos-switch .switch-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    transition: color 0.2s;
    user-select: none;
}

.nav-pos-switch .switch-opt.selected           { color: #007AFF; }
.dark-mode .nav-pos-switch .switch-opt.selected { color: #0A84FF; }

.nav-pos-switch .switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: #fff;
    border-radius: 13px;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    z-index: 0;
}

.dark-mode .nav-pos-switch .switch-thumb {
    background: #636366;
    box-shadow: none;
}

body.nav-top .nav-pos-switch .switch-thumb       { transform: translateX(calc(100% + 3px)); }
body.nav-top .nav-pos-switch .switch-opt:first-child { color: #888; }
body.nav-top .nav-pos-switch .switch-opt:last-child  { color: #007AFF; }