/* tailwind.css - sleek iOS-style utility components and defaults */

/* -- Root variables (light mode defaults) -- */
:root{
    --bg: #f6f7fb;
    --card: #ffffff;
    --muted: #8b8f98;
    --primary: #007aff;
    --accent: #34c759;
    --danger: #ff3b30;
    --glass: rgba(255,255,255,0.6);
    --separator: rgba(60,60,67,0.12);
    --radius: 14px;
    --radius-sm: 10px;
    --radius-circle: 999px;
    --shadow-1: 0 6px 18px rgba(60,60,67,0.08);
    --shadow-2: 0 2px 6px rgba(60,60,67,0.06);
    --text: #0b0b0d;
    --text-strong: #030303;
    --glass-blur: 14px;
    --trans-dur: 200ms;
    --border: 1px solid var(--separator);
    --control-height: 44px;
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark){
    :root{
        --bg: #0b0b0d;
        --card: rgba(20,20,21,0.7);
        --muted: #9aa0a6;
        --primary: #0a84ff;
        --accent: #30d158;
        --danger: #ff453a;
        --glass: rgba(18,18,19,0.44);
        --separator: rgba(255,255,255,0.06);
        --shadow-1: 0 8px 24px rgba(0,0,0,0.6);
        --shadow-2: 0 2px 6px rgba(0,0,0,0.45);
        --text: #e9eef5;
        --text-strong: #ffffff;
        --glass-blur: 10px;
        --border: 1px solid rgba(255,255,255,0.04);
    }
}

/* Tend to iOS system font stack */
html,body{
    height:100%;
    margin:0;
    padding:0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* Container helpers */
.container{
    max-width:820px;
    margin:0 auto;
    padding: 20px;
}

/* Safe area helpers (for iPhone notch) */
.safe-top{ padding-top: calc(20px + var(--safe-top)); }
.safe-bottom{ padding-bottom: calc(20px + var(--safe-bottom)); }

/* Glass / blur surface */
.glass{
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.5));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    border: var(--border);
}

/* Card */
.ios-card{
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    border: var(--border);
    padding: 14px;
    transition: transform var(--trans-dur), box-shadow var(--trans-dur);
    color: var(--text);
}
.ios-card:active{ transform: translateY(1px); box-shadow: var(--shadow-2); }

/* App navbar (centered title with left/right controls) */
.ios-navbar{
    height: calc(var(--control-height) + var(--safe-top));
    padding-top: var(--safe-top);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-left: 12px;
    padding-right: 12px;
    background: transparent;
    position: sticky;
    top:0;
    z-index:50;
    backdrop-filter: blur(8px);
}
.nav-title{
    font-weight:600;
    font-size:17px;
    text-align:center;
    flex:1;
    color:var(--text-strong);
}
.nav-controls{
    display:flex;
    align-items:center;
    gap:8px;
}

/* Primary iOS-style button */
.ios-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--primary);
    color: white;
    font-weight:600;
    font-size:15px;
    border: none;
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
    cursor:pointer;
    transition: transform var(--trans-dur) ease, box-shadow var(--trans-dur) ease, opacity var(--trans-dur);
}
.ios-btn:active{ transform: translateY(1px) scale(0.998); }
.ios-btn.ghost{
    background: transparent;
    color: var(--primary);
    border: 1px solid rgba(0,122,255,0.12);
    box-shadow:none;
}

/* Small text button */
.ios-btn-sm{
    height:30px;
    padding: 0 10px;
    border-radius: 8px;
    font-size:13px;
    font-weight:600;
}

/* iOS segmented control (tab-like) */
.segmented{
    display:inline-flex;
    background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
    border-radius: 12px;
    padding: 4px;
    gap:4px;
    box-shadow: inset 0 1px rgba(255,255,255,0.4);
}
.segmented button{
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight:600;
    color: var(--muted);
    cursor:pointer;
}
.segmented button.active{
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
    color: var(--text-strong);
    box-shadow: var(--shadow-2);
}

/* List items */
.ios-list{
    list-style:none;
    margin:0;
    padding:0;
    border-radius: var(--radius-sm);
    overflow:hidden;
    background: var(--card);
    border: var(--border);
    box-shadow: var(--shadow-2);
}
.ios-list li{
    display:flex;
    align-items:center;
    gap:12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--separator);
}
.ios-list li:last-child{ border-bottom: none; }
.ios-avatar{
    width:44px;
    height:44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02));
    flex-shrink:0;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    font-weight:700;
}

/* Search input */
.ios-search{
    height:44px;
    display:flex;
    align-items:center;
    gap:8px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(0,0,0,0.03);
    border: 1px solid transparent;
}
.ios-search input{
    border: none;
    outline: none;
    background: transparent;
    width:100%;
    font-size:15px;
    color:var(--text);
}

/* Form controls */
.input{
    height:44px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--card);
    border: var(--border);
    box-shadow: var(--shadow-2);
    color:var(--text);
    font-size:15px;
}
.input:focus{
    outline: none;
    box-shadow: 0 6px 18px rgba(0,122,255,0.12);
    border: 1px solid rgba(0,122,255,0.18);
}

/* Toggle (iOS switch) */
.ios-toggle{
    --w:50px;
    --h:30px;
    width:var(--w);
    height:var(--h);
    background: rgba(0,0,0,0.12);
    border-radius: calc(var(--h)/2);
    padding:4px;
    position:relative;
    transition: background var(--trans-dur);
    display:inline-block;
    box-sizing:content-box;
}
.ios-toggle .knob{
    width: calc(var(--h) - 8px);
    height: calc(var(--h) - 8px);
    background: white;
    border-radius:50%;
    position:absolute;
    top:4px;
    left:4px;
    transition: transform var(--trans-dur) cubic-bezier(.2,.9,.2,1);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
.ios-toggle.on{
    background: linear-gradient(90deg, rgba(0,122,255,0.95), rgba(0,102,255,0.95));
}
.ios-toggle.on .knob{ transform: translateX(calc(var(--w) - var(--h))); }

/* Small utilities */
.row{ display:flex; align-items:center; gap:12px; }
.col{ display:flex; flex-direction:column; gap:8px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; }

/* Typographic scales */
.h1{ font-size:28px; font-weight:700; letter-spacing:-0.01em; color:var(--text-strong); }
.h2{ font-size:20px; font-weight:600; color:var(--text-strong); }
.p-muted{ color:var(--muted); font-size:15px; }

/* Tabbar (bottom navigation) */
.ios-tabbar{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(10px + var(--safe-bottom));
    width: min(720px, calc(100% - 32px));
    display:flex;
    justify-content:space-between;
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.72));
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    border: var(--border);
    z-index:60;
}
.tab-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding: 6px 8px;
    color:var(--muted);
    font-size:12px;
    cursor:pointer;
}
.tab-item.active{ color:var(--primary); transform: translateY(-2px); }

/* Micro interactions */
button, a { -webkit-tap-highlight-color: transparent; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
    :root{ --trans-dur: 1ms; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Accessibility: focus-visible */
:focus{ outline:none; }
:focus-visible{
    outline: 3px solid rgba(0,122,255,0.18);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Small screens adjustments */
@media (max-width:420px){
    .container{ padding:14px; }
    .nav-title{ font-size:16px; }
    .ios-tabbar{ width: calc(100% - 20px); bottom: calc(6px + var(--safe-bottom)); }
}