/* ============================================================
   CSS Variables
   ============================================================ */
:root {
    /* Page palette — clean near-white surfaces with subtle warmth, orange accent.
       Matches the Figma prototype (shadcn warm-neutral theme). */
    --bg: #fafaf7;
    --bg-card: #ffffff;
    --bg-sidebar: #fafaf7;
    --topbar-bg: #fafaf7;
    --topbar-text: #0f172a;
    --topbar-muted: #64748b;
    --topbar-height: 60px;

    --primary: #f97316;
    --primary-hover: #ea580c;
    --primary-light: #fff1e6;

    --sidebar-width: 240px;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --radius: 12px;
    --radius-sm: 8px;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; }

/* ============================================================
   Layout — no-sidebar (auth pages)
   ============================================================ */
body.no-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}

/* ============================================================
   Layout — with-sidebar (app pages)
   ============================================================ */
body.with-sidebar .app-layout {
    display: flex;
    min-height: 100vh;
}

body.with-sidebar .main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 32px;
    max-width: 1200px;
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: #fff;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--border);
}

.sidebar-logo-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-footer {
    padding: 8px;
    border-top: 1px solid var(--border);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background .15s, color .15s;
    text-decoration: none;
}

.nav-item:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--primary-light); color: var(--primary); }
.nav-item.active svg { stroke: var(--primary); }

.nav-item svg { flex-shrink: 0; }

/* Admin nav item */
.nav-item-admin { color: #7c3aed; }
.nav-item-admin svg { stroke: #7c3aed; }
.nav-item-admin:hover { background: #f5f3ff; color: #6d28d9; }

/* US #324 — "Kaip naudotis?" tutorial entry, green to draw new users
   without being too loud. */
.nav-item-accent-green        { color: #16a34a; }
.nav-item-accent-green svg    { stroke: #16a34a; }
.nav-item-accent-green:hover  { background: #f0fdf4; color: #15803d; text-decoration: none; }
.nav-item-accent-green.active { background: #dcfce7; color: #166534; }
.nav-item-admin.active { background: #ede9fe; color: #6d28d9; }
.nav-item-admin.active svg { stroke: #6d28d9; }

.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 8px;
}

/* Chevron */
.chevron { margin-left: auto; transition: transform .2s; }
.nav-group.open .chevron { transform: rotate(180deg); }

/* Submenu */
.nav-submenu {
    display: none;
    padding-left: 32px;
    gap: 2px;
    flex-direction: column;
}
.nav-group.open .nav-submenu { display: flex; }

.nav-subitem {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.nav-subitem:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.nav-subitem.active { background: var(--primary-light); color: var(--primary); }

/* Hamburger — hidden on desktop */
.hamburger {
    display: none;
    position: fixed;
    top: 12px; left: 12px;
    z-index: 200;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}
.hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 99;
    touch-action: pan-y; /* let JS claim horizontal swipes for closing */
}
.sidebar-overlay.visible { display: block; }

/* Invisible left-edge zone that captures horizontal swipes BEFORE the
   browser's back-gesture kicks in. touch-action: pan-y means vertical
   scrolling still works, but horizontal swipes belong to JS. */
.sidebar-swipe-edge {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 22px;
    z-index: 98;
    background: transparent;
    touch-action: pan-y;
}
@media (min-width: 769px) {
    .sidebar-swipe-edge { display: none; }
}

/* ============================================================
   Page Header
   ============================================================ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 9999px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    border: none;
    transition: background .15s, transform .1s;
    text-decoration: none;
    box-sizing: border-box;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--primary);
    color: #fff;
}
.btn-primary:hover { background: var(--primary-hover); color: #fff; }

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}
.btn-outline:hover { background: var(--primary-light); color: var(--primary); }

.btn-danger {
    background: #fee2e2;
    color: #dc2626;
}
.btn-danger:hover { background: #fca5a5; }

.btn-lg {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 1rem;
    border-radius: 9999px;
}

.btn-sm { padding: 6px 14px; font-size: .8rem; }

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.recipe-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 20px;
    cursor: pointer;
    transition: box-shadow .2s, transform .2s, border-color .2s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.recipe-card:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, .06);
    border-color: var(--border-strong);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.recipe-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.recipe-card-desc {
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
}
.badge-private  { background: #f3f4f6; color: #6b7280; }
.badge-community{ background: #ede9fe; color: #7c3aed; }
.badge-public   { background: var(--primary-light); color: var(--primary); }

/* ============================================================
   Forms
   ============================================================ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.form-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
}

.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.form-control {
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-family: var(--font);
    background: #fff;
    color: var(--text);
    transition: border-color .15s;
    width: 100%;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

select.form-control { cursor: pointer; }

/* ============================================================
   Login / Auth Pages
   ============================================================ */
.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    gap: 24px;
    padding: 48px 16px;
    box-sizing: border-box;
}

.auth-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* Welcome / intro copy that sits under the potato on the login page.
   Width-matched to the auth-card below it so the visual column lines up. */
.auth-intro {
    width: 100%;
    max-width: 420px;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--text);
    text-align: left;
}
.auth-intro p     { margin: 0 0 10px; }
.auth-intro p:last-child { margin-bottom: 0; }
.auth-intro ul    { margin: 6px 0 0; padding-left: 22px; }
.auth-intro li    { margin-bottom: 4px; }
.auth-intro strong { color: var(--primary); }

.auth-card-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.auth-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 32px;
    width: 100%;
    max-width: 420px;
}

.auth-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    font-size: .875rem;
}

/* Consent line under the registration button — small, centered, the three
   policy names are linked. Keeps the auth-card visually tidy. */
.auth-consent {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
    margin: 14px 0 0;
}
.auth-consent a { color: inherit; text-decoration: underline; }
.auth-consent a:hover { color: var(--primary); }

.auth-divider {
    color: var(--border);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}
.form-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}
.form-check label { cursor: pointer; }

/* Potato SVG */
.potato-mascot {
    width: 180px;
    height: 180px;
}

/* ============================================================
   Recipe Detail
   ============================================================ */
.recipe-detail-header {
    margin-bottom: 24px;
}

.recipe-detail-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.recipe-detail-desc {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 16px;
}

.recipe-detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text);
}

.ingredients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.ingredients-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--bg);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.ingredients-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.ingredients-table tr:last-child td { border-bottom: none; }

.instructions-text {
    white-space: pre-line;
    font-size: .9rem;
    color: var(--text);
    line-height: 1.8;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-weight: 500;
    transition: color .15s;
}
.back-btn:hover { color: var(--text); text-decoration: none; }
.back-btn svg { stroke: currentColor; }

/* ============================================================
   Recipe Form
   ============================================================ */
.ingredient-row {
    display: grid;
    grid-template-columns: 1fr 120px 160px 40px;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.ingredient-row .btn-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fee2e2;
    border: none;
    cursor: pointer;
    color: #dc2626;
    font-size: 1.2rem;
    line-height: 1;
    transition: background .15s;
    flex-shrink: 0;
}
.ingredient-row .btn-remove:hover { background: #fca5a5; }

/* ============================================================
   Shopping List
   ============================================================ */
.shopping-list-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shopping-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

/* Item content — wraps name row + note text + note editor */
.item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.item-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.shopping-item-name {
    flex: 1;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text);
    min-width: 0;
    word-break: break-word;
}

/* Note icon button */
.note-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s, background .15s;
    padding: 0;
}

.note-icon-btn:hover,
.note-icon-btn.active {
    color: var(--primary);
    background: var(--primary-light);
}

/* Note text (displayed below item name) */
.item-note {
    font-size: .78rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.3;
    word-break: break-word;
}

/* Inline note editor */
.note-editor {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.note-input {
    flex: 1;
    font-size: .8rem;
    font-family: inherit;
    border: 1.5px solid var(--primary);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
    color: var(--text);
    background: #fff;
    min-width: 0;
}

.note-save-btn {
    font-size: .75rem;
    font-family: inherit;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
    line-height: 1.4;
}

.note-save-btn:hover {
    background: var(--primary-hover);
}

.note-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: .85rem;
    padding: 0;
    flex-shrink: 0;
    transition: color .15s, background .15s;
    line-height: 1;
}

.note-cancel-btn:hover {
    color: #dc2626;
    background: #fee2e2;
}

/* Secondary controls row — holds unit toggle + delete on desktop, expands on mobile */
.item-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Mobile inline note input — hidden on desktop, shown inside expanded row on mobile */
.note-inline-input {
    display: none;
}

/* Unit hint shown in qty-controls on mobile only */
.qty-unit-hint {
    display: none;
}

.shopping-item.picked {
    opacity: .6;
}

.shopping-item.picked .shopping-item-name {
    color: #6b7280 !important;
    text-decoration: line-through !important;
}

.item-check {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    color: #374151;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, background .15s, color .15s;
    padding: 0;
    user-select: none;
}

.qty-btn:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.qty-display {
    min-width: 28px;
    width: 40px;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    outline: none;
    padding: 0 2px;
    border-radius: 0;
    cursor: text;
    -moz-appearance: textfield;
    transition: border-color .15s;
}
.qty-display::-webkit-outer-spin-button,
.qty-display::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-display:hover {
    border-bottom-color: #9ca3af;
}
.qty-display:focus {
    border-bottom-color: var(--primary);
}

/* Unit segmented control — iOS-style pill */
/* Transparent wrapper — holds the reserved width; JS equalizes across all items */
.unit-toggle-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.unit-toggle {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 7px;
    padding: 2px;
    gap: 1px;
    flex-shrink: 0;
}

.unit-btn {
    border: none;
    background: transparent;
    font-size: .72rem;
    font-family: inherit;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    color: #6b7280;
    transition: background .15s, color .15s, box-shadow .15s;
    line-height: 1.3;
    white-space: nowrap;
    user-select: none;
}

.unit-btn.active {
    background: #fff;
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.unit-btn:hover:not(.active) {
    color: var(--text);
}

.btn-icon-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    padding: 0;
}

.btn-icon-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Legacy shopping category styles (kept for recipe integrations) */
.shopping-category {
    margin-bottom: 24px;
}

.shopping-category-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 8px 0 6px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 8px;
}

.shopping-item-amount {
    font-size: .85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.shopping-item-recipe {
    font-size: .75rem;
    background: var(--bg);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 9999px;
    white-space: nowrap;
}

/* ============================================================
   Sticky add-item input wrapper (US #57)
   ============================================================ */
.sl-sticky-input {
    position: sticky;
    top: 0;
    z-index: 50;
    margin-bottom: 8px;
}

/* ── US #271: potato encouragement toast ─────────────────────────
   Floating yellow cloud anchored to the top of the visible viewport.
   Uses position:absolute (NOT fixed) — JS tracks scrollY on every
   scroll/resize and writes inline `top` so the toast follows the
   visible viewport regardless of which mobile browser is mis-handling
   position:fixed today. Centering via margin:auto with left:0/right:0
   so no transform interferes. */
.potato-toast {
    position: absolute !important;
    /* `top` is set inline by JS — falls back here if JS hasn't run yet */
    top: 16px;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: max-content;
    max-width: calc(100vw - 24px);
    z-index: 99999;
    background: #fde68a;       /* yellow */
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 14px;       /* all corners — looks like a cloud, not a banner */
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
    padding: 12px 22px;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    will-change: opacity;
}
.potato-toast-show { opacity: 1 !important; }

/* ── US #270: bottom-pinned input on mobile (per-user preference) ──
   When body[data-sl-input-bottom="1"] is set AND viewport is mobile, the
   shopping-list input bar detaches from the document flow and locks to
   the bottom of the visual viewport, sitting just above the on-screen
   keyboard. The autocomplete dropdown flips to render above the input
   so it stays visible while the keyboard is up.

   Desktop is intentionally untouched — the media query gates the entire
   override. The shopping list keeps its sticky-top behaviour on phones
   when the toggle is OFF, exactly per US #57's original design. */
@media (max-width: 768px) {
    body[data-sl-input-bottom="1"][data-page="shopping-list"] .sl-sticky-input {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: var(--sl-keyboard-offset, 0px);
        margin: 0;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        background: var(--bg);
        border-top: 1px solid var(--border);
        z-index: 200;
        transition: bottom .12s linear;
    }
    /* Make sure the list isn't hidden behind the now-fixed bar — the bar
       is ~60 px tall; 80 px = bar + ~20 px breathing room. */
    body[data-sl-input-bottom="1"][data-page="shopping-list"] .main-content {
        padding-bottom: 80px;
    }
    /* Suggestions appear above the input instead of below it */
    body[data-sl-input-bottom="1"][data-page="shopping-list"] .ac-dropdown {
        top: auto;
        bottom: calc(100% + 4px);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .1);
    }
}

/* ============================================================
   Category grouping toggle (US #54)
   ============================================================ */
.sl-group-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sl-group-toggle input[type="checkbox"] { display: none; }

.sl-toggle-track {
    position: relative;
    width: 32px;
    height: 18px;
    background: var(--border);
    border-radius: 9999px;
    flex-shrink: 0;
    transition: background .2s;
}
.sl-group-toggle input:checked + .sl-toggle-track {
    background: var(--primary);
}
.sl-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
}
.sl-group-toggle input:checked + .sl-toggle-track::after {
    transform: translateX(14px);
}

/* ============================================================
   Category separator (US #53)
   ============================================================ */
.sl-cat-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 1px;
    font-size: .54rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.sl-cat-divider:first-child { margin-top: 0; }
.sl-cat-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ============================================================
   Highlight newly added item (US #56)
   ============================================================ */
@keyframes sl-item-flash {
    0%   { background-color: rgba(34,197,94,.18); }
    60%  { background-color: rgba(34,197,94,.09); }
    100% { background-color: transparent; }
}
.sl-item-new {
    animation: sl-item-flash 3s ease forwards;
    border-radius: var(--radius-sm);
}

#itemInput {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
}
#itemInput:focus {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .25);
}

/* ============================================================
   Add-item duplicate hint (floating tooltip)
   ============================================================ */
.add-hint {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 13px;
    background: #fffbeb;
    border: 1.5px solid #fbbf24;
    border-radius: 10px;
    font-size: .82rem;
    color: #78350f;
    line-height: 1.4;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .13);
    z-index: 300;
    animation: hintFadeIn .15s ease-out;
}

/* Upward caret */
.add-hint::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 20px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fbbf24;
}
.add-hint::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 22px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fffbeb;
}

.add-hint-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #f59e0b;
    margin-top: 1px;
}

@keyframes hintFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Autocomplete dropdown
   ============================================================ */
.ac-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    z-index: 200;
    overflow: hidden;
}

.ac-item,
.ac-create {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--text);
    transition: background .1s;
}

.ac-item:hover,
.ac-item-active {
    background: var(--bg);
}

.ac-create {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .85rem;
}

.ac-create:hover,
.ac-create.ac-item-active {
    background: var(--bg);
    color: var(--primary);
}

.ac-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-badge-custom {
    font-size: .68rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 9999px;
    background: #dbeafe;
    color: #1d4ed8;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ============================================================
   Modal dialog
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Higher than page-level modals (z-index 1000) so siteConfirm /
       siteAlert / siteConfirmTyped always sit above any modal that
       triggered them — e.g. the templates modal's delete confirm. */
    z-index: 2000;
    padding: 16px;
}

.modal-box {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    padding: 28px 24px 22px;
    max-width: 360px;
    width: 100%;
    animation: modalIn .15s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(.95) translateY(-8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

.modal-message {
    font-size: .95rem;
    color: var(--text);
    margin-bottom: 22px;
    line-height: 1.5;
    text-align: center;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ============================================================
   Admin pages
   ============================================================ */

/* Inline inputs inside admin tables */
.admin-inline-input {
    font-size: .85rem;
    font-family: inherit;
    border: 1.5px solid var(--primary);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
    color: var(--text);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.admin-inline-input:focus { border-color: var(--primary-hover); }

/* Category section heading in ingredients list */
.ing-category-section { margin-bottom: 28px; }
.ing-category-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text);
    padding: 0 0 8px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 0;
}
.ing-category-empty {
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: .85rem;
    font-style: italic;
}

/* "＋ Naujas produktas" link-style button at bottom of each category table */
.cat-add-link {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 700;
    font-size: .875rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color .15s;
}
.cat-add-link:hover { color: var(--primary-hover); text-decoration: underline; }

/* Quick-access cards on admin overview */
.admin-section-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow .15s, transform .15s;
}
.admin-section-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--text);
}
.admin-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Admin data table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.admin-table thead tr {
    border-bottom: 2px solid var(--border);
    background: var(--bg);
}
.admin-table th {
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.admin-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--bg); }
.admin-table-muted { color: var(--text-muted); }

/* Category list */
.cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
    cursor: default;
}
.cat-row:last-child { border-bottom: none; }
.cat-row:hover { background: var(--bg); }
.cat-row.dragging { opacity: .4; }
.cat-row.drag-over { background: var(--primary-light); }

.cat-drag-handle {
    color: #d1d5db;
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    user-select: none;
}
.cat-drag-handle:active { cursor: grabbing; }
.cat-drag-handle:hover  { color: var(--text-muted); }

.cat-name {
    flex: 1;
    font-size: .9rem;
    font-weight: 500;
}

.cat-editor {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cat-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.cat-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}
.cat-action-btn:hover { background: var(--bg); color: var(--text); }
.cat-delete-btn:hover { background: #fee2e2; color: #dc2626; }

/* ============================================================
   Communities
   ============================================================ */
.community-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .2s, transform .2s;
}
.community-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.community-card-name {
    font-size: 1rem;
    font-weight: 600;
}

.community-card-desc {
    font-size: .875rem;
    color: var(--text-muted);
    flex: 1;
}

.community-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.community-members {
    font-size: .8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   Empty State
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: .5;
}

.empty-state h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: var(--text);
}

/* ============================================================
   Alerts & Flash Messages
   ============================================================ */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    margin-bottom: 16px;
    line-height: 1.5;
}
.alert-error  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-success{ background: var(--primary-light); color: #166534; border: 1px solid #86efac; }
.alert-info   { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ============================================================
   Password Rules
   ============================================================ */
.password-rules {
    list-style: none;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.password-rules li {
    font-size: .8rem;
    color: var(--text-muted);
    padding-left: 20px;
    position: relative;
}

.password-rules li::before {
    content: '○';
    position: absolute;
    left: 0;
    color: var(--text-muted);
}

.password-rules li.rule-ok {
    color: #166534;
}
.password-rules li.rule-ok::before {
    content: '✓';
    color: var(--primary);
}

.password-rules li.rule-fail {
    color: #991b1b;
}
.password-rules li.rule-fail::before {
    content: '✗';
    color: #dc2626;
}

.match-msg {
    font-size: .8rem;
    margin-top: 5px;
}
.match-ok   { color: #166534; }
.match-fail { color: #991b1b; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .hamburger { display: flex; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .sidebar.open { transform: translateX(0); }

    body.with-sidebar .main-content {
        margin-left: 0;
        padding: 12px 16px 20px;
    }
    /* Slide the first title row beside the floating hamburger instead of
       below it. We pad only the .page-header / .back-btn (not their
       wrapper divs), so content underneath keeps the full width. */
    body.with-sidebar .page-header { padding-left: 52px; min-height: 36px; }
    body.with-sidebar .back-btn    { margin-left: 52px; }

    .sl-sticky-input {
        top: 56px;
    }

    .ingredient-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .ingredient-row .btn-remove {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .card-grid { grid-template-columns: 1fr; }

    .recipe-detail-actions { flex-direction: column; }
    .recipe-detail-actions .btn { justify-content: center; }

    .auth-card { padding: 24px 20px; }
    .potato-mascot { width: 130px; height: 130px; }

    .cookie-banner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cookie-banner-actions { width: 100%; }

    /* ── Shopping list responsive ── */
    .shopping-item {
        flex-wrap: wrap;
        gap: 6px 8px;
        cursor: pointer;
        /* keep row 1 items vertically centred */
        align-items: center;
    }
    /* Hide desktop-only note chrome on mobile */
    .note-icon-btn,
    .note-editor { display: none !important; }
    /* Note text stays visible on mobile when present — tappable to edit */
    .item-note {
        cursor: pointer;
        padding: 1px 0;
        border-bottom: 1px dashed #d1d5db;
        display: inline-block; /* so dashed underline only spans text width */
    }
    /* Hide the display-only note text once the editable row is open */
    .shopping-item.expanded .item-note {
        display: none !important;
    }
    /* Secondary row: full width, hidden until expanded */
    .item-secondary {
        flex: 0 0 100%;
        display: none;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        gap: 8px;
        align-items: center;
    }
    .shopping-item.expanded .item-secondary { display: flex; }
    /* Inline note input shown in expanded row */
    .note-inline-input {
        display: block;
        flex: 1;
        font-size: .82rem;
        font-family: inherit;
        border: 1.5px solid var(--border);
        border-radius: 6px;
        padding: 5px 8px;
        outline: none;
        color: var(--text);
        background: #fff;
        min-width: 0;
        transition: border-color .15s;
        cursor: text;
    }
    .note-inline-input:focus { border-color: var(--primary); }
    /* Qty controls — push to right on mobile */
    .qty-controls { margin-left: auto; }
    /* Unit hint — small muted label before the + button */
    .qty-unit-hint {
        display: inline-block;
        font-size: .72rem;
        color: var(--text-muted);
        margin-right: 2px;
        user-select: none;
    }

    /* ── Settings page — mobile-friendly rows ── */
    body[data-page="settings"] .settings-page    { max-width: 100%; }
    body[data-page="settings"] .settings-section { padding: 0 16px; }
    /* Stack the label + control rows vertically when they're too wide for phones */
    body[data-page="settings"] .settings-section > div {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    /* …but EXCEPT toggle rows: those must keep the toggle on the right edge,
       not wrap below the label. Uses :has() so we don't need to mark every
       toggle row with a class. */
    body[data-page="settings"] .settings-section > div:has(> .sl-group-toggle) {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
    }
    body[data-page="settings"] .settings-section > div:has(> .sl-group-toggle) > div:first-child {
        flex: 1 1 0%;
        min-width: 0;
    }
    body[data-page="settings"] .settings-section > div:has(> .sl-group-toggle) > .sl-group-toggle {
        flex-shrink: 0;
    }
    /* Override hard-coded 220px label widths and 260px input widths */
    body[data-page="settings"] .settings-section [style*="min-width:220px"],
    body[data-page="settings"] .settings-section [style*="min-width: 220px"] {
        min-width: 0 !important;
        width: 100% !important;
        font-size: .85rem !important;
    }
    body[data-page="settings"] .settings-section input[type="text"],
    body[data-page="settings"] .settings-section input[type="email"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Buttons inside settings rows should also fill width on phones */
    body[data-page="settings"] .settings-section > div .btn,
    body[data-page="settings"] .settings-section > div .sl-share-btn {
        width: 100%;
        justify-content: center;
    }
    /* Long emails on shared members list shouldn't overflow */
    body[data-page="settings"] .settings-section span,
    body[data-page="settings"] .settings-section strong {
        word-break: break-word;
    }

    /* ── Shopping list page — compact mobile chrome ── */
    body[data-page="shopping-list"] .page-header { margin-bottom: 12px; }
    /* Shopping list — fill the viewport vertically so the body-bg slab
       below short lists disappears. Items render at the top of
       .main-content, the rest is the same cream colour as the body
       so it reads as one continuous surface. The previous attempt
       (align-self: flex-start + min-height: 0) shrank .main-content
       to content height, exposing the body bg below it as visible
       empty space — that's exactly the slab the user was seeing. */
    body[data-page="shopping-list"] .main-content {
        min-height: calc(100vh - var(--topbar-height));
    }
    body[data-page="shopping-list"] .sl-members-text,
    body[data-page="shopping-list"] .sl-members-hint { font-size: .72rem; }
    body[data-page="shopping-list"] .sl-share-btn {
        font-size: .76rem;
        padding: 5px 10px;
    }
    body[data-page="shopping-list"] .sl-group-toggle { font-size: .72rem; }
    body[data-page="shopping-list"] .shopping-item-name { font-size: .85rem; }
}

/* ============================================================
   Form hint
   ============================================================ */
.form-hint {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: 5px;
    margin-bottom: 0;
}

/* ============================================================
   My Ingredients page
   ============================================================ */
.my-ing-row {
    display: grid;
    grid-template-columns: 1fr 180px 40px;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.my-ing-row:last-child { border-bottom: none; }
.my-ing-row:hover { background: var(--bg); }

.my-ing-name {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}

.my-ing-cat-select {
    font-size: .82rem;
    font-family: inherit;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 4px 28px 4px 6px; /* right padding reserves space for the arrow */
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--text);
    cursor: pointer;
    width: 100%;
    transition: border-color .15s;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-ing-cat-select:focus { outline: none; border-color: var(--primary); }

@media (max-width: 768px) {
    .my-ing-row {
        grid-template-columns: 1fr 40px;
        grid-template-rows: auto auto;
        gap: 6px 8px;
    }
    .my-ing-cat-select {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
        width: auto;
        max-width: 200px;
    }
    .my-ing-row .cat-action-btn {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: end;
    }
}

/* ============================================================
   Settings Page
   ============================================================ */
.settings-page {
    max-width: 640px;
}
.settings-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px;
}
.settings-top .page-title {
    margin: 0 !important;
}
.settings-section {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0 28px;
    margin-bottom: 24px;
}
.settings-section-title {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 16px 0 12px;
    border-bottom: 1px solid #efefef;
    margin: 0;
}
.settings-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px;
    padding: 13px 0;
    border-bottom: 1px solid #f5f5f5;
}
.settings-row:last-child {
    border-bottom: none;
}
.settings-label {
    width: 220px;
    min-width: 220px;
    font-size: .9rem;
    color: var(--text);
    font-weight: 500;
    margin: 0;
}
.settings-input {
    width: 260px;
    min-width: 0;
    flex-shrink: 0;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-family: var(--font);
    background: #fff;
    color: var(--text);
    transition: border-color .15s;
    box-sizing: border-box;
}
.settings-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
/* ============================================================
   Cookie Banner
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 24px;
    font-size: .875rem;
    color: var(--text);
}
.cookie-banner p { margin: 0; flex: 1; color: var(--text-muted); }
.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cookie-banner-actions .btn { padding: 8px 20px; font-size: .875rem; }

/* ============================================================
   Cookie Policy Page
   ============================================================ */
.cookie-policy-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px;
}
.cookie-policy-card h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.cookie-policy-updated {
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.cookie-policy-card h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 24px 0 8px;
}
.cookie-policy-card p, .cookie-policy-card li {
    font-size: .9rem;
    color: var(--text);
    line-height: 1.7;
}
.cookie-policy-card ul { padding-left: 20px; margin: 8px 0; }
.cookie-policy-card hr { border: none; border-top: 1px solid #e5e7eb; margin: 20px 0; }

/* ============================================================
   Shared shopping list UI (US #60–64)
   ============================================================ */

/* Invitation banner */
.sl-invite-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1.5px solid #fbbf24;
    border-radius: 12px;
    font-size: .88rem;
    color: #78350f;
    line-height: 1.5;
    margin-bottom: 16px;
}
@media (max-width: 540px) {
    .sl-invite-banner { flex-direction: column; }
    .sl-invite-banner > div:last-child { width: 100%; }
    .sl-invite-banner > div:last-child button { flex: 1; }
}

/* Share button — blue */
.sl-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.sl-share-btn:hover { background: #1d4ed8; }

/* "Bendras sąrašas su: ..." text */
.sl-members-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}
/* Friend name(s) get full emphasis even though the surrounding hint is muted. */
.sl-members-text strong { font-weight: 700; color: var(--text); }

/* Shopping-list page-header — left side flexes, group-toggle floats right. */
.sl-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Recipes list-mode (toggle "Rodyti sąrašą" on /my-recipes /public-recipes /all-recipes) */
body.recipes-list-mode .card-grid {
    display: block;
}
body.recipes-list-mode .recipe-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 6px;
    min-height: auto;
}
body.recipes-list-mode .recipe-card-title {
    flex: 1;
    margin: 0;
    font-size: .94rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.recipes-list-mode .recipe-card-desc {
    display: none;
}
body.recipes-list-mode .recipe-card-footer {
    margin: 0;
    padding: 0;
    border: none;
    flex-shrink: 0;
    gap: 10px;
}

/* Floating tooltip injected by JS — sizes to content, never wider than 260px */
.sl-tooltip {
    position: fixed;
    background: #1f2937;
    color: #f9fafb;
    font-size: .78rem;
    line-height: 1.45;
    padding: 7px 11px;
    border-radius: 8px;
    white-space: normal;
    max-width: 260px;
    width: max-content;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity .15s;
}

/* Home page scorecards */
.home-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 20px;
    background: var(--card-bg, #fff);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s, transform .1s;
    cursor: pointer;
    min-height: 140px;
}
.home-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 18px rgba(249,115,22,.18);
    transform: translateY(-2px);
    color: var(--text);
    text-decoration: none;
}
.home-card-icon {
    color: var(--primary);
    display: flex;
}
.home-card-icon svg { stroke: var(--primary); }
.home-card-label {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

/* BETA notice — sits at the very top of the home page during early
   access. Amber so it reads as informational, not alarming. */
.home-beta-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: .88rem;
    line-height: 1.5;
    color: #78350f;
}
.home-beta-badge {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: #92400e;
    background: #fde68a;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 2px;
}
.home-beta-notice strong { color: #92400e; }

/* Tutorial nag banner — visual twin of .home-invite-banner but in green.
   Shows on the first 3 home-page views per user (US #324 rev). Text on
   the left, "Kaip naudotis?" button on the right. */
.home-help-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: #f0fdf4;
    border: 1.5px solid #16a34a;
    border-radius: 12px;
    font-size: .92rem;
    line-height: 1.4;
    color: #14532d;
}
.home-help-banner > span { flex: 1 1 220px; }
.home-help-banner-btn {
    flex: 0 0 auto;
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    background: #16a34a;
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.home-help-banner-btn:hover  { background: #15803d; color: #fff; text-decoration: none; }
.home-help-banner-btn:active { transform: scale(0.97); }

@media (max-width: 420px) {
    .home-help-banner-btn { width: 100%; text-align: center; }
}

/* Home invite-friend banner — text label + email + Pakviesti button
   wrapped in a single blue-bordered structure. Same flow as the
   "Kviesti draugą" modal on the Draugai page. */
.home-invite-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: #eff6ff;
    border: 1.5px solid #2563eb;
    border-radius: 12px;
}
.home-invite-banner-label {
    font-size: .92rem;
    font-weight: 700;
    color: #1e3a8a;
    line-height: 1.3;
}
.home-invite-banner-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.home-invite-banner-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: #fff;
    color: var(--text);
    font-size: .92rem;
    line-height: 1.3;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.home-invite-banner-input::placeholder { color: #94a3b8; }
.home-invite-banner-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.home-invite-banner-btn {
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.home-invite-banner-btn:hover  { background: #1d4ed8; }
.home-invite-banner-btn:active { transform: scale(0.97); }

/* On very narrow screens, stack the input above the button so neither
   is squeezed below a comfortable tap target. */
@media (max-width: 420px) {
    .home-invite-banner-row { flex-direction: column; }
    .home-invite-banner-btn { width: 100%; }
}

/* Flash message under the banner (success / error from the POST). */
.home-invite-flash {
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .88rem;
    line-height: 1.45;
}
.home-invite-flash-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}
.home-invite-flash-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* ============================================================
   Topbar — flush light bar across the top of every authenticated
   page. Shares the page's near-white surface so the layout reads
   as one continuous canvas. Holds the brand on the left and a
   slot for page-specific action buttons on the right.
   ============================================================ */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-height);
    background: var(--topbar-bg);
    color: var(--topbar-text);
    display: flex;
    align-items: center;
    padding: 0 28px;
    z-index: 200;
    border-bottom: 1px solid var(--border);
}
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--topbar-text);
    text-decoration: none;
}
.topbar-brand:hover { text-decoration: none; color: var(--topbar-text); }
/* BETA tag next to the brand name — small, muted, primary-coloured pill. */
.topbar-beta {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--primary);
    background: rgba(249, 115, 22, 0.12);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: sub;
    line-height: 1;
    bottom: 0;
}
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.topbar .btn-primary {
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    border: none;
    font-weight: 600;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
}
.topbar .btn-primary:hover { background: var(--primary-hover); color: #fff; text-decoration: none; }
.topbar .btn-ghost {
    background: transparent;
    color: var(--topbar-text);
    border: none;
    padding: 8px 14px;
    font-weight: 500;
    font-size: .85rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.topbar .btn-ghost:hover { background: rgba(0,0,0,0.05); color: var(--topbar-text); text-decoration: none; }
.topbar .btn-danger {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    padding: 8px 16px;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.topbar .btn-danger:hover { background: #fecaca; color: #b91c1c; text-decoration: none; }

/* Shopping-list page constrains its content to a 676px column. On a wide
   monitor that leaves a lot of empty space to the right of the column, so
   the topbar's right-side action gets pulled in to align with the column's
   right edge instead of floating off in the void. The 976 = 240 sidebar
   + 32 main-content padding-left + 676 column + 28 topbar padding-right.
   Clamped with max() so narrow viewports just keep the natural right-flush. */
@media (min-width: 769px) {
    body[data-page="shopping-list"] .topbar-actions {
        margin-right: max(0px, calc(100vw - var(--sidebar-width) - 32px - 676px - 28px));
    }
    /* Request-recipe page has no inner column wrapper — its cards fill the
       full main-content width, capped by main-content's max-width:1200px.
       Align the topbar button with that right edge. The +4 reconciles the
       4px difference between main-content padding-right (32) and topbar
       padding-right (28). max(4px, ...) keeps narrow viewports stable. */
    body[data-page="request-recipe"] .topbar-actions,
    body[data-page="friends"] .topbar-actions {
        margin-right: max(4px, calc(100vw + 4px - var(--sidebar-width) - 1200px));
    }
    /* Settings page constrains its content to a 640px column. */
    body[data-page="settings"] .topbar-actions {
        margin-right: max(0px, calc(100vw - var(--sidebar-width) - 32px - 640px - 28px));
    }
}

/* Push the existing app layout below the topbar */
body.with-sidebar .app-layout {
    padding-top: var(--topbar-height);
}
body.with-sidebar .sidebar {
    top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
}
body.with-sidebar .sidebar-logo {
    display: none;       /* brand now lives in the global topbar */
}
body.with-sidebar .sidebar-nav { padding-top: 16px; }
body.with-sidebar .main-content { background: var(--bg); }

/* Sidebar items in the new palette */
.nav-item {
    color: #4b5563;
    font-weight: 500;
}
.nav-item:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
}
.nav-item.active svg { stroke: var(--primary); }

/* ─── Visi Receptai: single horizontal filter row ─────────────── */
.recipes-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    position: relative;
}

/* Recipes search — sits between scope chips and filter pill */
.recipes-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 320px;
}
.recipes-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.recipes-search-input {
    width: 100%;
    padding: 8px 32px 8px 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .9rem;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.recipes-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .15);
}
.recipes-search-input::placeholder { color: var(--text-muted); }
.recipes-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: var(--text-muted);
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.recipes-search-clear:hover { background: rgba(0, 0, 0, .12); color: var(--text); }
@media (max-width: 540px) {
    .recipes-search { flex-basis: 100%; max-width: 100%; }
}

/* Scope chips — segmented control (Visi / Mano / Draugų / Vieši / ★)
   Acts as a single grouped slider: chips share a track, only the
   active one fills, the active "thumb" animates between positions
   when JS swaps the `.active` class via AJAX. Middle chips have
   square sides so the thumb visibly slides; end caps are rounded. */
.scope-chips {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 9999px;
    padding: 3px;
}
.scope-chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 14px;
    border-radius: 4px;          /* middle chips — square sides */
    font-size: .86rem; font-weight: 600;
    text-decoration: none;
    background: transparent;
    color: var(--text);
    border: none;
    line-height: 1.2;
    transition: background .25s ease, color .25s ease;
    position: relative;
    z-index: 1;
}
.scope-chip:first-child { border-top-left-radius: 9999px;  border-bottom-left-radius: 9999px;  padding-left: 16px; }
.scope-chip:last-child  { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; padding-right: 16px; }
.scope-chip:hover { background: rgba(0, 0, 0, 0.05); text-decoration: none; }
.scope-chip.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.scope-chip.active:hover { background: var(--primary); color: #fff; }

/* Star chip lives in the same group, but shows only the icon and
   uses an amber theme instead of primary blue when active. The
   icon is 2× the text-chip glyph (32×32) so it reads as a strong
   accent at the end of the slider. */
.scope-chip-star {
    width: 46px;
    padding: 0 7px;
    color: #f59e0b;
}
.scope-chip-star svg { display: block; }
.scope-chip-star:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}
.scope-chip-star.active,
.scope-chip-star.active:hover {
    background: #fef3c7;
    color: #d97706;
    box-shadow: inset 0 0 0 1.5px #f59e0b, 0 1px 3px rgba(245, 158, 11, 0.15);
}

/* Tag filter button */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    margin-left: 8px;
}
.filter-pill:hover { background: rgba(0,0,0,0.02); }
.filter-pill .filter-pill-count {
    background: var(--primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 9999px;
    min-width: 20px;
    text-align: center;
}

/* Segmented grid/list view toggle */
.view-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    margin-left: auto;
}
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.view-toggle-btn:hover { color: var(--text); }
.view-toggle-btn.active {
    background: var(--primary);
    color: #fff;
}

/* Tag filter dropdown anchored under the filter pill */
.tag-filter-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
    padding: 16px 20px;
    max-height: 520px;
    overflow-y: auto;
}
.tag-popup-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.tag-popup-title { font-size: 1.02rem; font-weight: 700; color: var(--text); }
.tag-popup-close {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted);
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; line-height: 1;
}
.tag-popup-close:hover { background: rgba(0,0,0,0.05); color: var(--text); }

.tag-popup-selected {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.tag-chip-selected {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 6px 5px 12px;
    border-radius: 9999px;
    background: var(--primary);
    color: #fff;
    font-size: .82rem; font-weight: 600;
}
.tag-chip-selected .rt-remove-btn {
    background: rgba(255,255,255,0.25);
    border: none;
    color: #fff;
    width: 18px; height: 18px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem;
}
.tag-popup-clear {
    margin-left: auto;
    font-size: .82rem;
    color: #dc2626;
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
}
.tag-popup-clear:hover { text-decoration: underline; }

.tag-popup-group { margin-bottom: 14px; }
.tag-popup-group-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}
.tag-popup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-popup-chip {
    display: inline-flex; align-items: center;
    padding: 7px 14px;
    border-radius: 9999px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.tag-popup-chip:hover { background: rgba(0,0,0,0.04); }
.tag-popup-chip.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.tag-popup-chip.active:hover { background: var(--primary-hover); }

/* Recipe card grid in the new design — clean white cards, no badge */
.recipes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 1100px) { .recipes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .recipes-grid { grid-template-columns: 1fr; } }

/* US #320 — section blocks (Mėgstamiausi / Populiariausi / Naujausi / Visi) */
.rr-section          { margin-top: 24px; }
.rr-section:first-child { margin-top: 0; }
.rr-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.rr-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: .01em;
    flex: 1;
    min-width: 0;
}
.rr-section-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .15s, color .15s;
}
.rr-section-toggle:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.rr-section-toggle svg   { transition: transform .2s ease; display: block; }
/* Collapsed state — hide the body, rotate chevron 180° (points up). */
.rr-section.rr-collapsed .rr-section-body { display: none; }
.rr-section.rr-collapsed .rr-section-toggle svg { transform: rotate(-90deg); }
/* When collapsed the header's border-bottom looks heavier than needed since
   nothing sits below it; soften it a touch for visual harmony. */
.rr-section.rr-collapsed .rr-section-header { border-bottom-color: transparent; }

/* US #322 — infinite scroll sentinel + loading text. The IntersectionObserver
   triggers on this element scrolling into view (or near view). */
.rr-load-more-sentinel {
    text-align: center;
    padding: 22px 0 8px;
    color: var(--text-muted);
    font-size: .82rem;
    min-height: 32px;
}
.rr-load-more-spinner::before {
    content: '↻ ';
    display: inline-block;
    animation: rrSpin 1.2s linear infinite;
    margin-right: 4px;
}
@keyframes rrSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.recipes-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    position: relative; /* anchor for .recipe-fav-star */
}
.recipes-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    text-decoration: none;
    color: var(--text);
}
.recipes-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.3;
    padding-right: 30px; /* room for the favourite star at top-right */
}
.recipes-card-desc {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 16px;
    /* Clamp to 2 lines so cards stay even-height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.recipes-card-meta {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: auto;
}

/* List view — single-column rows with just the title */
body.recipes-list-mode .recipes-grid {
    grid-template-columns: 1fr;
    gap: 6px;
}
body.recipes-list-mode .recipes-card {
    flex-direction: row;
    align-items: center;
    padding: 14px 18px;
}
body.recipes-list-mode .recipes-card-title { margin-bottom: 0; flex: 1; padding-right: 8px; }
body.recipes-list-mode .recipes-card-desc,
body.recipes-list-mode .recipes-card-meta { display: none; }

/* ── Favourite star (US #294-#299) ─────────────────────────────────
   Used on recipe cards (top-right corner, absolute) and inline next
   to the recipe title on the detail page. Inactive = outlined gray;
   active = filled amber. */
.recipe-fav-star {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    transition: color .15s, background-color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}
.recipe-fav-star:hover {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}
.recipe-fav-star:active {
    transform: scale(0.92);
}
.recipe-fav-star.active {
    color: #f59e0b;
}
.recipe-fav-star.active:hover {
    color: #d97706;
    background: rgba(245, 158, 11, 0.12);
}
.recipe-fav-star[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* List-mode placement: keep the star inline on the right of the row
   instead of overlapping the row's right edge. */
body.recipes-list-mode .recipe-fav-star {
    position: static;
    flex: 0 0 32px;
    margin-left: 8px;
}

/* Inline variant (next to recipe title on the detail page).  No
   absolute positioning, slightly larger glyph — the SVG already
   scales up via its width/height attributes. */
.recipe-fav-star-inline {
    position: static;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

/* ============================================================
   "Ką pasigaminti?" — recipe discovery (US #192-#196, #251-#267)
   ============================================================ */

/* Picker — input + suggestions dropdown */
.dr-picker-card .form-control { font-size: .92rem; }

.dr-suggestions {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}
.dr-suggestion {
    padding: 9px 14px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.dr-suggestion:last-child { border-bottom: none; }
.dr-suggestion:hover,
.dr-suggestion-active { background: var(--primary-light); color: var(--primary); }
.dr-suggestion-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Selected-product chips */
.dr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-light);
    color: var(--primary);
    padding: 4px 4px 4px 10px;
    border-radius: 9999px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
}
.dr-chip-x {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(249, 115, 22, .15);
    color: var(--primary);
    border: none;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s;
}
.dr-chip-x:hover { background: var(--primary); color: #fff; }

/* Result cards */
.dr-card {
    padding: 0;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.dr-card-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}
.dr-card-row:hover { background: var(--bg); }
.dr-card-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.dr-card-main { flex: 1; min-width: 0; }
.dr-recipe-link {
    font-weight: 600;
    color: var(--text);
    font-size: .98rem;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color .15s;
}
.dr-recipe-link:hover {
    color: var(--text);
    text-decoration: none;
    border-bottom-color: var(--primary);
}
.dr-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .76rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.dr-owner-mine {
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: .7rem;
}
.dr-vis {
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: .7rem;
}
.dr-vis-public  { background: #dbeafe; color: #1e40af; }
.dr-vis-friends { background: #fef3c7; color: #92400e; }
.dr-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dr-tag {
    background: #ede9fe;
    color: #6d28d9;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 500;
}

.dr-card-counts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.dr-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.dr-count-matched { background: #dcfce7; color: #166534; }
.dr-count-missing { background: #fee2e2; color: #991b1b; }
.dr-chevron { color: var(--text-muted); transition: transform .2s; flex-shrink: 0; }
.dr-chevron.open { transform: rotate(180deg); }

/* Expanded breakdown — matched on the left, missing on the right */
.dr-breakdown {
    padding: 0 16px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.dr-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 12px;
}
.dr-breakdown-col { min-width: 0; }
.dr-breakdown-title {
    font-size: .82rem;
    font-weight: 700;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.dr-breakdown-title-matched { color: #166534; }
.dr-breakdown-title-missing { color: #991b1b; }
.dr-ing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dr-ing-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .86rem;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.dr-ing-matched { color: var(--text); }
.dr-ing-matched svg { color: #16a34a; flex-shrink: 0; }
.dr-ing-missing { color: var(--text); }
.dr-ing-missing .dr-dot { color: #dc2626; font-size: 1.2rem; line-height: .8; flex-shrink: 0; width: 13px; text-align: center; }

.dr-breakdown-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.dr-all-have { display: inline-flex; align-items: center; gap: 4px; }

/* Add-missing modal rows */
.dr-mr-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
}
.dr-mr-row:has(.dr-mr-check:checked) {
    border-color: #fcd34d;
    background: #fffbeb;
}
.dr-mr-check { width: 18px; height: 18px; cursor: pointer; }
.dr-mr-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    min-width: 0;
}
.dr-mr-section { font-size: .7rem; color: var(--text-muted); font-style: italic; }
.dr-mr-note    { font-size: .72rem; color: var(--text-muted); }
.dr-mr-matched-badge {
    background: #dcfce7;
    color: #166534;
    padding: 1px 7px;
    border-radius: 9999px;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.dr-mr-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.dr-mr-qty-input {
    width: 70px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .85rem;
    font-family: inherit;
    text-align: right;
}
.dr-mr-qty-input:focus { outline: none; border-color: var(--primary); }
.dr-mr-unit { font-size: .8rem; color: var(--text-muted); min-width: 32px; }

/* Mobile: stack the chevron / counts under the main column */
@media (max-width: 640px) {
    .dr-card-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .dr-card-main { flex-basis: 100%; }
    .dr-card-counts { width: 100%; justify-content: space-between; }
    .dr-breakdown-grid { grid-template-columns: 1fr; gap: 14px; }
    .dr-mr-row { grid-template-columns: 22px 1fr; }
    .dr-mr-qty { grid-column: 2; justify-content: flex-end; }
}

/* ============================================================
   Sąrašų šablonai — shopping list templates (US #273-#292)
   ============================================================ */

/* Templates list grid on the list-templates page */
.lt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.lt-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    width: 100%;
    display: block;
}
.lt-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}
.lt-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.lt-card-meta {
    font-size: .78rem;
    color: var(--text-muted);
}
.lt-card-author { margin-left: 4px; }

/* Open-template modal: per-item rows with checkbox + qty label */
.lt-mr-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
}
.lt-mr-row:has(.lt-mr-check:checked) {
    border-color: #fcd34d;
    background: #fffbeb;
}
.lt-mr-check { width: 18px; height: 18px; cursor: pointer; }
.lt-mr-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    min-width: 0;
}
.lt-mr-note {
    font-size: .72rem;
    color: var(--text-muted);
    font-style: italic;
}
.lt-mr-qty {
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Template-source icon next to a shopping-list item name */
.template-src-btn { vertical-align: middle; }
.template-src-btn:hover { color: #6d28d9; }

/* Edit-mode row inside the template modal */
.lt-edit-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
}
.lt-edit-del {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(220, 38, 38, .08);
    color: #b91c1c;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lt-edit-del:hover { background: rgba(220, 38, 38, .18); }
.lt-edit-name {
    font-size: .9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lt-edit-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.lt-qty-btn {
    width: 24px; height: 24px;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    color: var(--text);
}
.lt-qty-btn:hover { background: var(--border); }
.lt-qty-input {
    width: 56px;
    text-align: center;
    padding: 4px 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .85rem;
    font-family: inherit;
}
.lt-qty-input:focus { outline: none; border-color: var(--primary); }
.lt-edit-unit {
    font-size: .82rem;
    padding: 4px 6px;
    width: auto;
    min-width: 60px;
}

/* Add-item autocomplete dropdown (mirrors shopping list .ac-dropdown) */
.lt-ac-dropdown {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 4px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
    max-height: 240px;
    overflow-y: auto;
    z-index: 50;
}
.lt-ac-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: .9rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
}
.lt-ac-item:last-child { border-bottom: none; }
.lt-ac-item:hover,
.lt-ac-active { background: var(--primary-light); color: var(--primary); }
.lt-ac-tag {
    background: rgba(124, 58, 237, .12);
    color: #6d28d9;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 9999px;
}

@media (max-width: 540px) {
    .lt-grid { grid-template-columns: 1fr; }
    .lt-mr-row { grid-template-columns: 22px 1fr; }
    .lt-mr-qty { grid-column: 2; justify-self: end; }
    .lt-edit-row {
        grid-template-columns: 24px 1fr auto;
        grid-template-rows: auto auto;
    }
    .lt-edit-name { grid-column: 2; grid-row: 1; }
    .lt-edit-del  { grid-column: 1; grid-row: 1; }
    .lt-edit-qty  { grid-column: 1 / span 2; grid-row: 2; justify-self: start; }
    .lt-edit-unit { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}