/* Berlingvo Design System & Branding Tokens — v3 */

:root {
    /* Brand (German flag) */
    --brand-black: #000000;
    --brand-yellow: #F3B417;
    --brand-red: #D01C1F;

    /* v3 Page & Surface */
    --bg-main: #f5f4f1;         /* warm page bg */
    --bg-main-legacy: #F5F5F7;  /* kept for auth/landing pages */
    --surface: #FFFFFF;

    /* v3 Borders */
    --border: #e5e5e2;
    --border-soft: #f0efe9;
    --border-input: #d1d5db;

    /* v3 Text */
    --text-main: #111111;
    --text-sm: #6b7280;
    --text-muted: #9ca3af;
    --text-xs: #c4c4be;

    /* v3 Nav-active (blue) */
    --nav-blue: #2A6FDB;
    --nav-blue-bg: #eff4ff;
    --nav-blue-text: #1e3a8a;

    /* v3 Semantic */
    --accent: #2563eb;
    --accent-muted: #eff6ff;
    --success: #10B981;
    --success-bg: #f0fdf4;
    --warning: #F59E0B;
    --warning-bg: #fffbeb;
    --danger: #EF4444;
    --danger-bg: #fef2f2;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 1px 4px rgba(0,0,0,.04);
    --shadow-card-hover: 0 8px 32px rgba(0,0,0,.09);

    /* App shell */
    --header-h: 60px;
    --sidebar-w: 258px;
    --radius-card: 16px;
    --radius-btn: 10px;
    --radius-modal: 20px;

    /* Typography Scale */
    --text-display: clamp(1.875rem, 5vw, 3rem);
    --text-heading: clamp(1.25rem, 3vw, 1.875rem);
    --text-subheading: clamp(1rem, 2.5vw, 1.25rem);
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-caption: 0.75rem;

    /* Profile cover gradient */
    --cover-gradient: linear-gradient(135deg, #0a0a0a 0%, #1c1c1c 50%, #2a2a2a 100%);
}

/* Base Styles — :root body wins over Tailwind single-class selectors (0,1,1 > 0,1,0) */
:root body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Manrope', system-ui, sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Premium Layout Elements */
.premium-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    padding: 1.5rem; /* Default padding */
}

@media (max-width: 640px) {
    .premium-card {
        padding: 1rem;
        border-radius: 0.875rem;
    }
}

.premium-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(13, 148, 136, 0.2);
}

/* Responsive Typography */
h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.125rem, 4vw, 2rem); line-height: 1.2; }
h3 { font-size: clamp(1rem, 3vw, 1.5rem); line-height: 1.3; }

/* Display Font Utility */
.font-display {
    font-family: 'DM Serif Display', serif;
}

/* Page Header Pattern */
.page-header {
    margin-bottom: 1.5rem;
}
.page-header h1 {
    font-family: 'DM Serif Display', serif;
    font-size: var(--text-heading);
    color: var(--text-main);
    line-height: 1.2;
}
.page-header p {
    font-size: var(--text-small);
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Profile Cover Banner */
.profile-cover {
    background: var(--cover-gradient);
    position: relative;
    overflow: hidden;
}
.profile-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Buttons System */
.btn-primary {
    background-color: var(--accent);
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--surface);
    color: var(--text-main);
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--bg-main);
}

.btn-ghost {
    color: var(--text-muted);
    font-weight: 600;
    transition: color 0.2s ease;
}

.btn-ghost:hover {
    color: var(--text-main);
}

/* Input Fields */
.form-input {
    height: 42px;
    background-color: #ffffff;
    border: 1px solid #D1D5DB; /* gray-300 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 0 1rem;
    width: 100%;
    outline: none;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    transition: all 0.2s ease;
}

.form-input:focus {
    border-color: #F3B417; /* brand-yellow */
    box-shadow: 0 0 0 1px #F3B417;
}

.form-input::placeholder {
    color: #9CA3AF;
}

/* New Standard Buttons (My Materials Style) */
.btn-yellow {
    height: 42px;
    background-color: #F3B417;
    color: #000000;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(243, 180, 23, 0.1), 0 2px 4px -1px rgba(243, 180, 23, 0.06);
    transition: all 0.2s ease;
}

.btn-yellow:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-red {
    height: 42px;
    background-color: #D01C1F;
    color: #ffffff;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(208, 28, 31, 0.1), 0 2px 4px -1px rgba(208, 28, 31, 0.06);
    transition: all 0.2s ease;
}

.btn-red:hover {
    background-color: #b91c1c;
    transform: translateY(-1px);
}

.btn-black {
    height: 42px;
    background-color: #000000;
    color: #ffffff;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    transition: all 0.2s ease;
}

/* Interactive Tabs */
.tab-item {
    padding-bottom: 0.75rem;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-item.active {
    border-bottom-color: var(--accent);
    color: var(--text-main);
}

/* Utility Classes */
.shadow-premium {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
}

.hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.active-shrink:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

/* Premium Form Design System */
.premium-form-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #475569; /* slate-600 */
    margin-bottom: 0.75rem;
    display: block;
    padding-left: 0.5rem;
}

.premium-form-input {
    width: 100% !important;
    height: 64px;
    padding: 0 1.5rem !important;
    background-color: #f8fafc !important; /* slate-50 */
    border: 2px solid #f1f5f9 !important; /* slate-100 */
    border-radius: 1.5rem !important;
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* slate-900 */
    font-size: 16px !important;
    box-shadow: none !important;
}

.premium-form-input:focus {
    background-color: #ffffff !important;
    border-color: #f3b417 !important; /* brand-yellow */
    box-shadow: 0 20px 25px -5px rgba(243, 180, 23, 0.08) !important;
    transform: translateY(-2px);
}

.premium-form-input::placeholder {
    color: #94a3b8 !important; /* slate-400 */
    font-weight: 600 !important;
    opacity: 0.4 !important;
}

textarea.premium-form-input {
    height: auto !important;
    min-height: 120px !important;
    padding: 1.25rem 1.5rem !important;
    line-height: 1.6 !important;
    resize: none !important;
}

.premium-form-btn-primary {
    background-color: #f3b417; /* brand-yellow */
    color: #000;
    font-weight: 900;
    height: 64px;
    border-radius: 1.5rem;
    padding: 0 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px -5px rgba(243, 180, 23, 0.3);
}

.premium-form-btn-primary:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1);
}

.premium-form-btn-secondary {
    background-color: #fff1f2; /* rose-50 */
    color: #d01c1f; /* brand-red */
    font-weight: 900;
    height: 64px;
    border-radius: 1.5rem;
    padding: 0 2rem;
    border: 2px solid #ffe4e6; /* rose-100 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.premium-form-btn-secondary:hover {
    background-color: #d01c1f;
    color: #fff;
    border-color: #d01c1f;
}

.premium-form-error {
    font-size: 10px;
    font-weight: 800;
    color: #d01c1f; /* brand-red */
    padding-left: 0.5rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Mobile Adjustments for Forms */
@media (max-width: 640px) {
    .premium-form-input,
    .premium-form-btn-primary,
    .premium-form-btn-secondary {
        height: 48px; /* Compact for mobile */
        border-radius: 1rem !important;
    }
    .premium-form-label {
        font-size: 9px;
        margin-bottom: 0.375rem;
        letter-spacing: 0.08em;
    }
    textarea.premium-form-input {
        min-height: 96px !important;
        padding: 0.875rem 1.25rem !important;
    }
}

/* ─── Prevent iOS focus-zoom ──────────────────────────────────────────────────
   iOS Safari auto-zooms any focused control whose font-size < 16px and does not
   reliably zoom back out, which shifts the layout. Force 16px on focusable
   controls below the desktop breakpoint. !important is required because most of
   these fields set font-size via inline style (search bar, smart sheet, Smart
   Deck editor/report/sort). Visual height is untouched — only the text grows. */
@media (max-width: 1023px) {
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
    textarea,
    select {
        font-size: 16px !important;
    }
}
/* Glassmorphism Utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

/* Extended Shadows */
.shadow-premium-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.03), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
}

/* Brand Gradients */
.bg-brand-gradient {
    background: linear-gradient(135deg, #000000 0%, #2d2d2d 100%);
}

.text-brand-gradient {
    background: linear-gradient(135deg, #000000 0%, #D01C1F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Language Badges */
.lang-badge {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #f0f0f0;
    color: #555;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ─── v3 Font utility ───────────────────────────────────────────────────────── */
.font-manrope,
.app-shell,
.app-shell * {
    font-family: 'Manrope', system-ui, sans-serif;
}

/* ─── v3 App Shell — Header ────────────────────────────────────────────────── */
.app-header {
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 500;
    flex-shrink: 0;
}

/* ─── v3 App Shell — Sidebar ────────────────────────────────────────────────── */
.app-sidebar {
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    align-self: flex-start;
}

.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background: #ddddd8; border-radius: 99px; }

/* Sidebar nav item */
.snav-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s;
    position: relative;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: inherit;
    user-select: none;
}
.snav-header:hover { background: #fafaf7; }
.snav-header.active {
    background: var(--nav-blue-bg);
    border-left-color: var(--nav-blue);
}
.snav-header.active .snav-icon { color: var(--nav-blue); }
.snav-header.active .snav-label { color: var(--nav-blue-text); font-weight: 800; }
.snav-icon  { font-size: 12px; width: 16px; text-align: center; color: var(--text-muted); flex-shrink: 0; }
.snav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-sm); font-weight: 700; flex: 1; }
.snav-chevron { font-size: 9px; color: var(--text-muted); transition: transform .18s; flex-shrink: 0; }
.snav-chevron.open { transform: rotate(180deg); }

/* Sidebar accordion body */
.snav-body {
    margin: 3px 4px 6px 14px;
    padding-left: 12px;
    border-left: 1px dashed var(--border);
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.22,1,.36,1), opacity .28s ease;
    max-height: 0;
    opacity: 0;
}
.snav-body.open { opacity: 1; }

/* Sidebar sort/sub-items */
.snav-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 1px;
    transition: background .12s;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.snav-sub:hover { background: #fafaf7; }
.snav-sub.active { background: #faf8f3; }
.snav-sub.active::before {
    content: '';
    position: absolute;
    left: -1px; top: 7px; bottom: 7px;
    width: 2px;
    background: var(--brand-red);
    border-radius: 2px;
}
.snav-sub-icon { font-size: 10px; width: 13px; text-align: center; color: var(--text-muted); flex-shrink: 0; }
.snav-sub.active .snav-sub-icon { color: var(--brand-red); }
.snav-sub-label { font-size: 11px; font-weight: 700; color: var(--text-sm); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snav-sub.active .snav-sub-label { color: var(--text-main); font-weight: 800; }
.snav-badge {
    font-size: 10px; font-weight: 800; padding: 1px 7px;
    border-radius: 999px; min-width: 22px; text-align: center;
    background: #f0efe9; color: var(--text-muted); border: 1px solid transparent;
}
.snav-sub.active .snav-badge {
    background: #fff0f0; color: var(--brand-red);
    border-color: rgba(208,28,31,.18);
}
.snav-create {
    width: 100%; margin-bottom: 6px; margin-top: 2px;
    background: transparent; color: var(--text-main);
    border: 1px solid var(--border); border-radius: 9px;
    font-size: 10px; font-weight: 900; text-transform: uppercase;
    letter-spacing: .12em; cursor: pointer;
    display: flex; align-items: center; gap: 8px; padding: 7px 10px;
    transition: background .12s, border-color .12s;
    font-family: 'Manrope', system-ui, sans-serif;
}
.snav-create:hover { background: #fafaf7; border-color: #d8d8d2; }
.snav-section-title {
    font-size: 9px; font-weight: 900; letter-spacing: .18em;
    text-transform: uppercase; color: var(--text-muted); padding: 4px 10px 6px;
}

/* ─── v3 App Shell — Notification badge ────────────────────────────────────── */
.notif-badge {
    font-size: 10px; font-weight: 800; color: #fff;
    background: var(--brand-red); border-radius: 999px;
    padding: 1px 6px; min-width: 20px; text-align: center;
}

/* ─── v3 App Shell — Dropdown ───────────────────────────────────────────────── */
.hdr-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 16px 48px rgba(0,0,0,.13);
    z-index: 999;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.hdr-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ─── v3 App Shell — Mobile bottom nav ──────────────────────────────────────── */
.app-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    /* Topmost app layer: above the sheet overlay (800) AND the sheet itself (850)
       so the bottom nav stays visible and tappable while any sheet is open — a
       second tap then closes it. The sheet is anchored above the 64px bar, so the
       two never overlap; this z-index guarantees the bar is never covered. */
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -1px 0 var(--border);
}
.app-bottomnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 9px; font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: color .15s;
}
.app-bottomnav-item.active { color: var(--brand-red); }
.app-bottomnav-item .bnav-icon {
    width: 34px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; transition: background .15s;
    font-size: 15px;
}
.app-bottomnav-item.active .bnav-icon { background: #fff0f0; }

/* ─── v3 App Shell — Bottom sheet ──────────────────────────────────────────── */
.app-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 800;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.app-sheet-overlay.open { opacity: 1; visibility: visible; }
.app-sheet {
    position: fixed;
    left: 0; right: 0;
    /* Sit above the 64px bottom nav so it doesn't cover the "Меню" button. */
    bottom: calc(64px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.18);
    z-index: 850;
    max-height: calc(85vh - 64px);
    max-height: calc(85dvh - 64px); /* dvh excludes the iOS toolbar; vh is the fallback */
    display: flex; flex-direction: column;
    transform: translateY(150%);
    transition: transform .28s cubic-bezier(.32,1,.32,1);
    overflow: hidden;
}
.app-sheet.open { transform: translateY(0); }
.app-sheet-handle {
    width: 36px; height: 4px; border-radius: 999px;
    background: #e0dfda; margin: 12px auto 8px;
    flex-shrink: 0;
}
.app-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 18px 14px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
}
.app-sheet-body { overflow-y: auto; flex: 1; padding: 0 14px 20px; }

@media (min-width: 1024px) {
    .app-sheet, .app-sheet-overlay { display: none !important; }
}

/* On mobile, 100vh (Tailwind .min-h-screen) includes the area behind the iOS
   toolbar and causes content jumps. Upgrade to dvh where supported; falls back
   to 100vh otherwise. Element+class specificity wins over the compiled utility. */
@supports (min-height: 100dvh) {
    @media (max-width: 1023px) {
        body.min-h-screen { min-height: 100dvh; }
    }
}

/* ─── v3 Body background override for cabinet ───────────────────────────────── */
.app-shell-body {
    background-color: var(--bg-main) !important;
    padding-bottom: 0;
}
@media (max-width: 1023px) {
    .app-sidebar { display: none; }
}
@media (max-width: 1023px) {
    .app-bottomnav { display: flex; }
    .app-shell-body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
    .app-bottomnav { display: none; }
}
/* Divider */
.snav-divider {
    height: 1px; background: var(--border-soft); margin: 6px 12px;
}