/* ══════════════════════════════════════
   Frigal — CSS
   ══════════════════════════════════════ */

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

html {
    --flash-h: 0px;
    --sticky-top: calc(var(--header-h) + var(--breadcrumb-h) + var(--flash-h));
    scroll-padding-top: var(--sticky-top);
}

html:not(:has(.breadcrumb-bar h1)) {
    --breadcrumb-h: 0px;
}

/* ── Design tokens ── */
:root {
    /* Palette */
    --frost-50: #f0f7ff;
    --frost-100: #dceefb;
    --frost-200: #bde0fa;
    --frost-300: #8ccdf5;
    --frost-400: #52b0ed;
    --frost-500: #2b8fd9;
    --frost-600: #1e73ba;
    --frost-700: #1c5d97;
    --frost-800: #1c4f7d;
    --frost-900: #1c4268;

    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;

    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;

    --amber-400: #fbbf24;

    /* Shelf palette (warm wood) */
    --wood-50: #fdf8f0;
    --wood-100: #f5ead6;
    --wood-200: #e8d4b0;
    --wood-300: #d4b88a;
    --wood-400: #c09a64;
    --wood-500: #a67c4a;
    --wood-600: #8b6538;
    --wood-700: #704f2b;
    --wood-800: #5a3f23;
    --wood-900: #4a331d;

    /* Semantic */
    --clr-bg: var(--slate-100);
    --clr-surface: #ffffff;
    --clr-text: var(--slate-800);
    --clr-text-secondary: var(--slate-500);
    --clr-text-muted: var(--slate-400);
    --clr-border: var(--slate-200);
    --clr-accent: var(--frost-500);
    --clr-accent-hover: var(--frost-600);

    /* Geometry */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.06);
    --shadow-frost: 0 8px 32px -4px rgba(43, 143, 217, 0.18);

    /* Layout */
    --header-h: 56px;
    --breadcrumb-h: 44px;

    /* Transitions */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.2s;
}

/* ── Typography ── */
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ── Header ── */
header {
    background: var(--slate-900);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.header-inner {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: var(--header-h);
    display: flex;
    align-items: center;
}

.header-inner > a:first-child {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-user {
    margin-left: auto;
    padding-left: 1.5rem;
    border-left: 1px solid var(--slate-700);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


.header-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-400);
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    transition: all var(--duration) var(--ease);
}

.header-logout:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Pastille des nouveautés non lues, posée sur l'icône utilisateur. Le liseré
   de la couleur du header la détache du trait de l'icône. */
.header-settings {
    position: relative;
}

.header-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--red-500);
    border: 2px solid var(--slate-900);
    box-sizing: content-box;
}

.header-inner > a:first-child::before {
    content: "\2744";
    font-size: 1.8rem;
}

/* ── Main container ── */
main {
    max-width: 750px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ── Breadcrumb bar ── */
.breadcrumb-bar {
    position: sticky;
    top: var(--header-h);
    z-index: 90;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    height: var(--breadcrumb-h);
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.breadcrumb-bar:not(:has(h1)) {
    display: none;
}

.breadcrumb-bar h1 {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--slate-700);
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.breadcrumb-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.breadcrumb-bar h1 .h1-sep {
    flex-shrink: 0;
}

.breadcrumb-bar h1 a {
    color: var(--clr-accent);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.breadcrumb-bar h1 a:hover {
    color: var(--clr-accent-hover);
}

.h1-home {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='12' height='16' rx='2'/%3E%3Cline x1='4' y1='8' x2='16' y2='8'/%3E%3Cline x1='12' y1='4.5' x2='12' y2='6'/%3E%3Cline x1='12' y1='10.5' x2='12' y2='13'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='12' height='16' rx='2'/%3E%3Cline x1='4' y1='8' x2='16' y2='8'/%3E%3Cline x1='12' y1='4.5' x2='12' y2='6'/%3E%3Cline x1='12' y1='10.5' x2='12' y2='13'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.h1-sep {
    color: var(--slate-300);
    font-weight: 400;
    margin: 0 0.1rem;
}

/* ══════════════════════════════════════
   HOME — Freezer grid
   ══════════════════════════════════════ */

.freezers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.freezers-grid-single {
    max-width: 400px;
    margin: 0 auto;
}

/* ── Storage switch (homepage) ── */
.storage-switch-input { display: none; }

.storage-switch {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.switch-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--slate-500);
    background: var(--clr-surface);
    border: 1.5px solid var(--clr-border);
    border-radius: 99px;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    user-select: none;
}

.switch-btn:hover {
    color: var(--slate-700);
    border-color: var(--slate-300);
    background: var(--slate-50);
}

/* Active switch state — freezer (blue) */
#switch-freezer:checked ~ .storage-switch .switch-btn[for="switch-freezer"] {
    color: #fff;
    background: var(--frost-500);
    border-color: var(--frost-500);
    box-shadow: 0 2px 8px rgba(43, 143, 217, 0.3);
}

/* Active switch state — shelf (warm) */
#switch-shelf:checked ~ .storage-switch .switch-btn[for="switch-shelf"] {
    color: #fff;
    background: var(--wood-500);
    border-color: var(--wood-500);
    box-shadow: 0 2px 8px rgba(166, 124, 74, 0.3);
}

/* Grids share layout */
.storage-grid-freezers,
.storage-grid-shelves {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

/* Grid visibility toggle */
.storage-grid-freezers { display: grid; }
.storage-grid-shelves { display: none; }

#switch-shelf:checked ~ .storage-grid-freezers { display: none; }
#switch-shelf:checked ~ .storage-grid-shelves { display: grid; }

.storage-grid-single {
    max-width: 400px;
    margin: 0 auto;
}

/* ── Freezer card ── */
.freezer {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.freezer:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Top cap — brushed metal */
.freezer-top {
    height: 20px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.07) 1px,
            rgba(255, 255, 255, 0.07) 2px
        ),
        linear-gradient(180deg, #b0bec5, #90a4ae, #78909c, #90a4ae, #b0bec5);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Freezer label */
.freezer-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 0.55rem 1rem 0.45rem;
    color: var(--slate-500);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    text-decoration: none;
    background: linear-gradient(180deg, #eceff1, #e0e4e8);
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.freezer-name a,
.freezer-name > .rename-toggle > summary > span {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.freezer-name a:hover {
    color: var(--frost-600);
}

/* ── Inline rename ── */
.rename-toggle {
    flex: 1;
    min-width: 0;
}

.rename-toggle > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: default;
    min-width: 0;
    overflow: hidden;
}

.rename-toggle > summary::-webkit-details-marker {
    display: none;
}

.rename-toggle[open] > summary {
    display: none;
}

.rename-form {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.rename-form .btn-icon {
    flex-shrink: 0;
}

.rename-input {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--slate-700);
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid var(--frost-300);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.5rem;
    text-align: center;
    min-width: 0;
    width: 0;
    flex: 1;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.rename-input:focus {
    outline: none;
    border-color: var(--frost-400);
    box-shadow: 0 0 0 3px rgba(43, 143, 217, 0.12);
}

.btn-icon-edit {
    color: var(--slate-400);
    opacity: 1;
    transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease);
}

@media (hover: hover) {
    .btn-icon-edit {
        opacity: 0;
    }

    .freezer-name:hover .btn-icon-edit {
        opacity: 1;
    }
}

.btn-icon-edit:hover {
    color: var(--frost-600);
    background: rgba(43, 143, 217, 0.08);
}

/* ── Freezer move arrows ── */
.freezer-move-form,
.storage-move-form {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.btn-move {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--slate-400);
    cursor: pointer;
    opacity: 1;
    transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease), background var(--duration) var(--ease);
}

@media (hover: hover) {
    .btn-move {
        opacity: 0;
    }

    .freezer-name:hover .btn-move {
        opacity: 1;
    }
}

.btn-move:hover {
    color: var(--frost-600);
    background: rgba(43, 143, 217, 0.08);
}

.btn-icon-confirm {
    color: var(--green-500);
}

.btn-icon-confirm:hover {
    color: var(--green-600);
    background: rgba(34, 197, 94, 0.1);
}

.btn-icon-cancel {
    color: var(--slate-400);
}

.btn-icon-cancel:hover {
    color: var(--slate-600);
    background: rgba(0, 0, 0, 0.05);
}

/* Drawer area */
.freezer-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 10px;
    background: linear-gradient(180deg, #cfd8dc, #b0bec5);
}

.freezer-body > .drawer-row,
.freezer-body > .ghost-drawer {
    flex: 1;
}

/* Bottom cap — brushed metal */
.freezer-bottom {
    height: 20px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.07) 1px,
            rgba(255, 255, 255, 0.07) 2px
        ),
        linear-gradient(180deg, #b0bec5, #90a4ae, #78909c, #90a4ae, #b0bec5);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ── Shelf card (warm wood variant) ── */
.shelf {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.shelf:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.shelf-top {
    height: 20px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.06) 2px,
            rgba(255, 255, 255, 0.06) 4px
        ),
        linear-gradient(180deg, #c9a87c, #b5936a, #a07d55, #b5936a, #c9a87c);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.shelf-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 0.55rem 1rem 0.45rem;
    color: var(--wood-700);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    text-decoration: none;
    background: linear-gradient(180deg, #f5ead6, #e8d4b0);
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.shelf-name a,
.shelf-name > .rename-toggle > summary > span {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.shelf-name a:hover {
    color: var(--wood-600);
}

@media (hover: hover) {
    .shelf-name:hover .btn-icon-edit {
        opacity: 1;
    }

    .shelf-name:hover .btn-move {
        opacity: 1;
    }
}

.shelf-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 10px;
    background: linear-gradient(180deg, #e8d4b0, #d4b88a);
}

.shelf-body > .drawer-row {
    flex: 1;
}

.shelf-bottom {
    height: 20px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.06) 2px,
            rgba(255, 255, 255, 0.06) 4px
        ),
        linear-gradient(180deg, #c9a87c, #b5936a, #a07d55, #b5936a, #c9a87c);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Shelf level link (replaces .drawer for shelves) */
.shelf-level {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(180deg, #ffffff, #fdf8f0);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    text-decoration: none;
    color: var(--slate-700);
    transition: all var(--duration) var(--ease);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    gap: 0.5rem;
}

/* No handle on shelf levels — use a thin wood line instead */
.shelf-level::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 10%, var(--wood-300) 30%, var(--wood-200) 50%, var(--wood-300) 70%, transparent 90%);
    border-radius: 5px 5px 0 0;
    opacity: 0.6;
    transition: opacity var(--duration) var(--ease);
}

.shelf-level:hover {
    background: linear-gradient(180deg, var(--wood-50), #f5ead6);
    border-color: var(--wood-300);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(166, 124, 74, 0.12);
    transform: translateX(3px);
}

.shelf-level:hover::before {
    opacity: 1;
    background: linear-gradient(90deg, transparent 5%, var(--wood-400) 25%, var(--wood-500) 50%, var(--wood-400) 75%, transparent 95%);
}

.shelf-level-number {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-400);
    transition: color var(--duration) var(--ease);
    flex-shrink: 0;
}

.shelf-level:hover .shelf-level-number {
    color: var(--wood-600);
}

.shelf-level:hover .drawer-cat {
    background: rgba(166, 124, 74, 0.1);
    border-color: var(--wood-300);
}

/* ── Drawer link ── */
.drawer {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(180deg, #ffffff, #f5f7fa);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    text-decoration: none;
    color: var(--slate-700);
    transition: all var(--duration) var(--ease);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    gap: 0.5rem;
}

/* Drawer handle */
.drawer::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 44px;
    height: 6px;
    background: linear-gradient(180deg, #b0bec5, #90a4ae);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: background var(--duration) var(--ease);
}

.drawer:hover {
    background: linear-gradient(180deg, var(--frost-50), #e8f2fc);
    border-color: var(--frost-300);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(43, 143, 217, 0.12);
    transform: translateX(3px);
}

.drawer:hover::before {
    background: linear-gradient(180deg, var(--frost-400), var(--frost-500));
}

.drawer-number {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-400);
    transition: color var(--duration) var(--ease);
    flex-shrink: 0;
}

.drawer:hover .drawer-number {
    color: var(--frost-600);
}

.drawer-badge {
    position: absolute;
    right: 0.75rem;
    background: var(--frost-500);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
    min-width: 26px;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 1px 4px rgba(43, 143, 217, 0.3);
}

/* ── Category badges in drawer ── */
.drawer-categories {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

.drawer-cat {
    font-size: 0.95rem;
    white-space: nowrap;
    line-height: 1;
    background: var(--frost-50);
    border: 1px solid var(--frost-200);
    color: var(--slate-600);
    padding: 0.2rem 0.4rem;
    border-radius: 99px;
}

.drawer:hover .drawer-cat {
    background: rgba(43, 143, 217, 0.1);
    border-color: var(--frost-300);
}

.drawer-row {
    display: flex;
    align-items: stretch;
}

.drawer-row .drawer,
.drawer-row .shelf-level {
    flex: 1;
    min-width: 0;
    border-radius: 5px 0 0 5px;
}

.drawer-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    flex-shrink: 0;
    background: linear-gradient(180deg, #ffffff, #f5f7fa);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: none;
    border-radius: 0 5px 5px 0;
    color: var(--slate-400);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--duration) var(--ease);
}

.drawer-add:hover {
    background: linear-gradient(180deg, var(--frost-50), #e8f2fc);
    color: var(--frost-600);
    border-color: var(--frost-300);
}

/* ── Category section in drawer ── */
.category-section {
    margin-bottom: 1.5rem;
}

.category-heading {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--slate-700);
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--slate-200);
}

.category-emoji {
    font-size: 1.4rem;
    line-height: 1;
}

/* ══════════════════════════════════════
   DRAWER PAGE — Accordions
   ══════════════════════════════════════ */

/* ── Accordion base ── */
.accordion {
    background: var(--clr-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.75rem;
    border: 1px solid var(--clr-border);
    transition: box-shadow var(--duration) var(--ease);
}

.accordion:hover {
    box-shadow: var(--shadow);
}

.accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;
    user-select: none;
    transition: background var(--duration) var(--ease);
    gap: 0.5rem;
}

.accordion > summary::-webkit-details-marker {
    display: none;
}

.accordion > summary::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 5 4 4-4 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--duration) var(--ease);
}

.accordion[open] > summary::before {
    transform: rotate(90deg);
}

.accordion > summary:hover {
    background: var(--slate-50);
}

.accordion-body {
    padding: 0.85rem 1.1rem 1.1rem;
}

/* ── New product accordion ── */
.new-product {
    border: 1.5px solid var(--frost-300);
    background: var(--frost-100);
    position: sticky;
    top: var(--sticky-top);
    z-index: 80;
}

.new-product > .accordion-body {
    max-height: calc(100vh - var(--sticky-top) - 3rem);
    overflow-y: auto;
}

.new-product > summary {
    color: var(--frost-600);
    font-weight: 700;
}

.new-product > summary::before {
    display: none;
}

.new-product > summary::after {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%231e73ba' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 4v10M4 9h10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--duration) var(--ease);
}

.new-product[open] > summary {
    font-size: 0;
}

.new-product[open] > summary::after {
    font-size: 1rem;
    transform: rotate(45deg);
}

.new-product > summary:hover {
    background: rgba(43, 143, 217, 0.06);
}

/* ── New product accordion — shelf variant ── */
.new-product-shelf {
    border-color: var(--wood-300);
    background: var(--wood-100);
}

.new-product-shelf > summary {
    color: var(--wood-700);
}

.new-product-shelf > summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238b6538' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 4v10M4 9h10'/%3E%3C/svg%3E");
}

.new-product-shelf > summary:hover {
    background: rgba(166, 124, 74, 0.08);
}

/* ── Ghost card (create freezer) ── */
.freezer-ghost {
    border: 2px dashed var(--slate-300);
    box-shadow: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.freezer-ghost > form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.freezer-ghost:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--slate-400);
}

.freezer-ghost .freezer-top,
.freezer-ghost .freezer-bottom {
    opacity: 0.4;
}

.freezer-ghost .freezer-name {
    background: linear-gradient(180deg, rgba(236, 239, 241, 0.5), rgba(224, 228, 232, 0.5));
}

.freezer-ghost .freezer-name input {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    padding: 0;
    outline: none;
}

.freezer-ghost .freezer-name input::placeholder {
    color: var(--slate-400);
    opacity: 0.7;
}

.freezer-ghost .freezer-name input:focus {
    background: rgba(255, 255, 255, 0.5);
}

.freezer-ghost .freezer-body {
    background: linear-gradient(180deg, rgba(207, 216, 220, 0.5), rgba(176, 190, 197, 0.5));
    padding: 10px;
    gap: 4px;
}

.ghost-drawer {
    min-height: 2.8rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(245, 247, 250, 0.5));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Ghost drawer handle */
.ghost-drawer::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 44px;
    height: 6px;
    background: linear-gradient(180deg, #b0bec5, #90a4ae);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    opacity: 0.5;
}

.freezer-ghost-controls {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(176, 190, 197, 0.5), rgba(176, 190, 197, 0.3));
}

/* ── Shelf ghost card (create shelf) ── */
.shelf-ghost {
    border: 2px dashed var(--wood-300);
    box-shadow: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.shelf-ghost > form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.shelf-ghost:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--wood-400);
}

.shelf-ghost .shelf-top,
.shelf-ghost .shelf-bottom {
    opacity: 0.4;
}

.shelf-ghost .shelf-name {
    background: linear-gradient(180deg, rgba(245, 234, 214, 0.5), rgba(232, 212, 176, 0.5));
}

.shelf-ghost .shelf-name input {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    padding: 0;
    outline: none;
}

.shelf-ghost .shelf-name input::placeholder {
    color: var(--wood-400);
    opacity: 0.7;
}

.shelf-ghost .shelf-name input:focus {
    background: rgba(255, 255, 255, 0.5);
}

.shelf-ghost .shelf-body {
    background: linear-gradient(180deg, rgba(232, 212, 176, 0.5), rgba(212, 184, 138, 0.5));
    padding: 10px;
    gap: 4px;
}

.ghost-shelf-level {
    min-height: 2.8rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(253, 248, 240, 0.5));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ghost-shelf-level::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 10%, var(--wood-300) 30%, var(--wood-200) 50%, var(--wood-300) 70%, transparent 90%);
    border-radius: 5px 5px 0 0;
    opacity: 0.3;
}

.shelf-ghost-controls {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(212, 184, 138, 0.5), rgba(212, 184, 138, 0.3));
}

.drawer-stepper {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.drawer-stepper .qty-btn {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0;
    flex-shrink: 0;
    aspect-ratio: 1;
    width: auto;
    border: 1.5px solid var(--slate-300);
}

.drawer-stepper .qty-minus {
    border-radius: var(--radius) 0 0 var(--radius);
    border-right: none;
}

.drawer-stepper .qty-plus {
    border-radius: 0 var(--radius) var(--radius) 0;
    border-left: none;
}

.drawer-stepper .qty-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--slate-300);
    color: var(--slate-700);
}

.drawer-stepper-display {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid var(--slate-300);
    border-left: none;
    border-right: none;
}

.drawer-stepper-display input {
    width: 1.2rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--slate-500);
    text-align: right;
    -moz-appearance: textfield;
}

.drawer-stepper-display input::-webkit-inner-spin-button,
.drawer-stepper-display input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.drawer-stepper-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate-500);
}

.btn-ghost-submit {
    width: auto;
    white-space: nowrap;
    background: var(--slate-500);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-ghost-submit:hover {
    background: var(--slate-600);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Product accordion ── */
.product > summary {
    color: var(--slate-800);
}

.product[open] > summary {
    position: sticky;
    top: var(--sticky-top);
    z-index: 10;
    background: var(--clr-surface);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.product-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-summary-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.btn-chip-add {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--frost-600);
    background: var(--frost-50);
    border: 1px solid var(--frost-200);
    border-radius: 99px;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
}

.btn-chip-add:hover {
    background: var(--frost-500);
    color: #fff;
    border-color: var(--frost-500);
    box-shadow: 0 2px 6px rgba(43, 143, 217, 0.3);
}

.product-qty {
    color: var(--slate-400);
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 1.2rem;
    text-align: center;
    line-height: 1.4;
}

/* ── Category change (inline) ── */
.category-change {
    display: inline;
    position: relative;
}

.category-change-toggle {
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--slate-200);
    border-radius: 99px;
    background: transparent;
    list-style: none;
    transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.category-change-toggle::-webkit-details-marker {
    display: none;
}

.category-change-toggle:hover {
    border-color: var(--frost-300);
    background: var(--frost-50);
}

.category-change-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 90;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.6rem;
    margin-top: 0.25rem;
}

.category-radios-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    position: relative;
    padding-bottom: 1.6rem;
}

.cat-radio-inline .cat-name {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate-500);
    pointer-events: none;
}

.cat-radio-inline:has(input:checked) .cat-name {
    display: block;
}

.cat-radio-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    font-size: 1.6rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 1;
    background: transparent;
    transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    user-select: none;
}

.cat-radio-inline:hover {
    background: var(--frost-50);
    border-color: var(--frost-300);
}

.cat-radio-inline input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.cat-radio-inline:has(input:checked) {
    border-color: var(--frost-500);
    background: var(--frost-50);
    box-shadow: 0 0 0 2.5px rgba(43, 143, 217, 0.45);
}

.category-change-actions {
    display: flex;
    gap: 0.4rem;
}

.category-change-actions .btn {
    flex: 1;
}

.btn-change-cat {
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
}


/* ══════════════════════════════════════
   FORMS
   ══════════════════════════════════════ */

.form-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 0.85rem;
}

.form-row > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 130px;
}

.form-row label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-row input,
.form-row select {
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--frost-300);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    background: #f7fbff;
    color: var(--clr-text);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.form-row select:disabled {
    background: var(--slate-100);
    color: var(--clr-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
    border-style: dashed;
}

.form-row input:focus,
.form-row select:focus {
    outline: none;
    border-color: var(--frost-400);
    box-shadow: 0 0 0 3px rgba(43, 143, 217, 0.12);
}

.form-row input::placeholder {
    color: var(--clr-text-muted);
}

/* Quantity stepper */
.qty-stepper-group {
    flex: 0 0 auto;
}

.form-row-inline > div input {
    width: 100%;
}

.qty-stepper {
    display: flex;
    align-items: stretch;
}

.qty-stepper input {
    width: 3rem;
    text-align: center;
    border-radius: 0;
    border-left: none;
    border-right: none;
    -moz-appearance: textfield;
}

.qty-stepper input::-webkit-inner-spin-button,
.qty-stepper input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    border: 1.5px solid var(--slate-300);
    background: var(--slate-50);
    color: var(--clr-text);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.qty-minus {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.qty-plus {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.qty-btn:hover {
    background: var(--frost-50);
    border-color: var(--frost-400);
    color: var(--frost-600);
}

.qty-btn:active {
    background: var(--frost-100);
}

/* Form errors */
.category-radios > ul {
    list-style: none;
    margin: 0.35rem 0 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--red-500);
    font-weight: 500;
}

/* Category radio chips */
.category-radios {
    margin-bottom: 0.85rem;
}

.category-radios > label {
    display: none;
}

.category-radios > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.category-radios > div > div {
    display: contents;
}

.category-radios input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.category-radios input[type="radio"] + label {
    text-align: center;
    padding: 0.35rem 0.7rem;
    border: 1.5px solid var(--frost-300);
    border-radius: 999px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    background: #f7fbff;
    color: var(--clr-text);
    transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    user-select: none;
}

.category-radios input[type="radio"] + label:hover {
    border-color: var(--frost-400);
    background: var(--frost-50);
}

.category-radios input[type="radio"]:checked + label {
    border-color: var(--frost-500);
    background: var(--frost-50);
    color: var(--frost-700);
    box-shadow: 0 0 0 2.5px rgba(43, 143, 217, 0.45);
}

/* ── Selected category label (CSS-only) ── */
.category-radios > div {
    position: relative;
    padding-bottom: 1.6rem;
}

.cat-name {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate-500);
    pointer-events: none;
}

.category-radios input[type="radio"]:checked + label .cat-name {
    display: block;
}

/* ── Similar names suggestion panel ── */
.similar-names-panel {
    background: rgba(239, 68, 68, 0.12);
    border: 1.5px solid rgba(239, 68, 68, 0.45);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.85rem;
}

.similar-names-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--slate-800);
    margin-bottom: 0.25rem;
}

.similar-names-text {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--slate-600);
    margin-bottom: 0.5rem;
}

.similar-names-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.similar-names-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--frost-700);
    background: var(--clr-surface);
    border: 1.5px solid var(--frost-300);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.similar-names-chip:hover {
    background: var(--frost-50);
    border-color: var(--frost-500);
    box-shadow: 0 2px 6px rgba(43, 143, 217, 0.2);
}

/* Diff highlights inside suggestion chips */
.diff-removed {
    text-decoration: line-through;
    color: var(--red-400);
    opacity: 0.6;
}

.diff-changed,
.diff-added {
    color: var(--frost-600);
    background: rgba(43, 143, 217, 0.12);
    border-radius: 2px;
    padding: 0 2px;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--frost-400);
    text-underline-offset: 2px;
}

.similar-names-force {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--slate-600);
    background: var(--clr-surface);
    border: 1.5px solid var(--slate-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    list-style: none;
    transition: all var(--duration) var(--ease);
}

.similar-names-force::-webkit-details-marker {
    display: none;
}

.similar-names-force:hover {
    color: var(--red-600);
    border-color: var(--red-400);
    background: rgba(239, 68, 68, 0.04);
}

.similar-names-confirm[open] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.similar-names-confirm[open] .similar-names-force {
    color: transparent;
    background: transparent;
    border: 1.5px solid var(--slate-300);
    position: relative;
    transition: none;
}

.similar-names-confirm[open] .similar-names-force::after {
    content: "Annuler";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.similar-names-confirm-body .btn {
    font-size: 0.82rem;
    padding: 0.42rem 0.85rem;
    line-height: 1.6;
    white-space: normal;
    text-align: left;
}

.similar-names-confirm[open] .similar-names-force:hover {
    color: transparent;
    background: var(--slate-50);
    border-color: var(--slate-400);
}

.similar-names-confirm[open] .similar-names-force:hover::after {
    color: var(--clr-text);
}

/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
    line-height: 1.2;
}

.btn:active {
    transform: scale(0.97);
}

.btn-add {
    background: var(--frost-500);
    color: #fff;
    box-shadow: 0 1px 3px rgba(43, 143, 217, 0.25);
}

.btn-add:hover {
    background: var(--frost-600);
    box-shadow: 0 2px 8px rgba(43, 143, 217, 0.3);
}

.btn-full {
    width: 100%;
}


.btn-consume {
    background: var(--green-500);
    color: #fff;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.25);
}

.btn-consume:hover {
    background: var(--green-600);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.btn-delete {
    background: transparent;
    color: var(--red-500);
    border: 1.5px solid var(--red-400);
    padding: 0.42rem 0.85rem;
    text-decoration: none;
}

.btn-delete:hover {
    background: var(--red-500);
    color: #fff;
    border-color: var(--red-500);
}

/* ══════════════════════════════════════
   ITEM LIST
   ══════════════════════════════════════ */

.item-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Item row (compact) ── */
.item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.02);
    transition: background var(--duration) var(--ease);
}

.item-row:hover {
    background: var(--slate-50);
}

.item-row.item-old {
    background: rgba(251, 191, 36, 0.08);
}

.item-row.item-old .item-row-date {
    color: var(--amber-400);
    font-weight: 700;
}

.item-row.item-old:hover {
    background: rgba(251, 191, 36, 0.14);
}

.item-row.item-too-old {
    background: rgba(239, 68, 68, 0.06);
}

.item-row.item-too-old .item-row-date {
    color: var(--red-500);
    font-weight: 700;
}

.item-row.item-too-old:hover {
    background: rgba(239, 68, 68, 0.1);
}

.item-row-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    min-width: 0;
}

.item-row-date {
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 5.5rem;
}

.item-row-fulldate {
    font-size: 0.72rem;
    color: var(--clr-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}


.item-row-details {
    width: 100%;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--clr-text-muted);
    padding-left: 6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-row-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.item-row-actions form {
    display: inline;
}

/* ── Icon buttons ── */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    transition: all var(--duration) var(--ease);
}

.btn-icon:active {
    transform: scale(0.92);
}

.btn-icon svg {
    flex-shrink: 0;
}

.btn-icon-consume {
    color: #6a9a6e;
}

.btn-icon-consume:hover {
    color: #527a55;
    background: rgba(106, 154, 110, 0.1);
}

.btn-icon-move {
    color: #5b8cb8;
}

.btn-icon-move:hover {
    color: #456f95;
    background: rgba(91, 140, 184, 0.1);
}

/* ── Delete button + confirmation ── */
.btn-icon-delete {
    color: #b07070;
    list-style: none;
}

.btn-icon-delete::-webkit-details-marker {
    display: none;
}

.btn-icon-delete:hover {
    color: #8c5555;
    background: rgba(176, 112, 112, 0.1);
}

.delete-confirm {
    position: relative;
}

.delete-confirm-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    min-width: 180px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.55rem 0.65rem;
    margin-top: 0.25rem;
}

.delete-confirm-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--slate-700);
    margin-bottom: 0.4rem;
}

.delete-confirm-actions {
    display: flex;
    gap: 0.35rem;
}

.delete-confirm-actions form {
    display: contents;
}

/* ── Edit item dropdown ── */
.btn-icon-edit-item {
    color: #7a8fb5;
    list-style: none;
}

.btn-icon-edit-item::-webkit-details-marker {
    display: none;
}

.btn-icon-edit-item:hover {
    color: #5a6f8f;
    background: rgba(122, 143, 181, 0.1);
}

.edit-item {
    position: relative;
}

.edit-item-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    min-width: 260px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.55rem 0.65rem;
    margin-top: 0.25rem;
}

.edit-item-field {
    margin-bottom: 0.45rem;
}

.edit-item-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.edit-item-field input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    border: 1.5px solid var(--frost-300);
    border-radius: var(--radius-sm);
    background: var(--clr-surface);
    color: var(--clr-text);
    box-sizing: border-box;
}

.edit-item-field input:focus {
    outline: none;
    border-color: var(--frost-500);
    box-shadow: 0 0 0 2px rgba(100, 150, 200, 0.15);
}

.edit-item-field input::placeholder {
    color: var(--clr-text-muted);
}

.edit-item-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.btn-cancel {
    background: transparent;
    color: var(--clr-text-secondary);
    border: 1.5px solid var(--slate-300);
    padding: 0.38rem 0.85rem;
    text-decoration: none;
    text-align: center;
}

.btn-cancel:hover {
    background: var(--slate-50);
    border-color: var(--slate-400);
    color: var(--clr-text);
}

/* ══════════════════════════════════════
   DELETE FREEZER CONFIRM
   ══════════════════════════════════════ */

.delete-freezer-confirm,
.delete-storage-confirm {
    max-width: 420px;
    margin: 1.5rem auto 0;
    text-align: center;
}

.delete-freezer-confirm > summary,
.delete-storage-confirm > summary {
    list-style: none;
    cursor: pointer;
}

.delete-freezer-confirm > summary::-webkit-details-marker,
.delete-storage-confirm > summary::-webkit-details-marker {
    display: none;
}

.btn-delete-freezer,
.btn-delete-storage {
    background: transparent;
    color: var(--red-500);
    border: 1.5px solid var(--red-400);
    padding: 0.42rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-delete-freezer:hover,
.btn-delete-storage:hover {
    background: rgba(239, 68, 68, 0.06);
    border-color: var(--red-500);
}

.delete-freezer-confirm[open] > .btn-delete-freezer,
.delete-storage-confirm[open] > .btn-delete-storage {
    display: none;
}

.delete-freezer-body,
.delete-storage-body {
    background: var(--clr-surface);
    border: 1px solid var(--red-300);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

.delete-freezer-body p,
.delete-storage-body p {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate-700);
    margin: 0 0 0.75rem;
}

.delete-freezer-body .delete-confirm-actions,
.delete-storage-body .delete-confirm-actions {
    justify-content: center;
}

/* ══════════════════════════════════════
   SECTION HEADINGS (inside accordion)
   ══════════════════════════════════════ */

.section {
    margin-bottom: 1.25rem;
}

.section:last-child {
    margin-bottom: 0;
}

.section h3 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--clr-text-secondary);
    margin-bottom: 0.65rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--slate-100);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ══════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════ */

.empty {
    text-align: center;
    color: var(--clr-text-muted);
    padding: 3.5rem 1rem;
    font-size: 1rem;
}

.empty::before {
    content: "\2744";
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

/* ══════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════ */

.login-container {
    display: flex;
    justify-content: center;
    padding-top: 4rem;
}

.login-card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--clr-border);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
}

.login-title {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-username {
    text-align: center;
    color: var(--clr-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
    margin-top: -1rem;
}

.login-error {
    background: rgba(239, 68, 68, 0.08);
    color: var(--red-600);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.login-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.login-field input {
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-family: inherit;
    background: #fff;
    color: var(--clr-text);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.login-field input:focus {
    outline: none;
    border-color: var(--frost-400);
    box-shadow: 0 0 0 3px rgba(43, 143, 217, 0.12);
}

.login-btn {
    width: 100%;
    padding: 0.65rem;
    font-size: 0.92rem;
    margin-top: 0.5rem;
}

.password-wrapper {
    position: relative;
}

.password-wrapper > input {
    width: 100%;
    padding-right: 2.5rem;
    box-sizing: border-box;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--clr-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.password-toggle:hover {
    color: var(--clr-text);
    background: var(--slate-100);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--frost-400);
    outline-offset: 1px;
}

.password-toggle > .password-icon-hide {
    display: none;
}

.password-toggle[aria-pressed="true"] > .password-icon-show {
    display: none;
}

.password-toggle[aria-pressed="true"] > .password-icon-hide {
    display: block;
}


/* ══════════════════════════════════════
   SETTINGS PAGE
   ══════════════════════════════════════ */

/* Plus marqué que les libellés de champ, qui partagent la même casse et la même
   couleur : sans ça, « Mot de passe » et « Mot de passe actuel » se lisent au
   même niveau. */
.settings-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 0.5rem;
}

.settings-note {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    line-height: 1.5;
    margin-bottom: 0.9rem;
}

.settings-link {
    width: 100%;
    gap: 0.5rem;
    padding: 0.65rem;
    font-size: 0.92rem;
    text-decoration: none;
    color: var(--clr-text);
    background: var(--slate-100);
    border: 1px solid var(--clr-border);
}

.settings-link:hover {
    background: var(--slate-200);
}

/* Même pastille que dans l'en-tête, mais posée sur un fond clair : le liseré
   suit la couleur du bouton. */
.settings-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red-500);
    flex-shrink: 0;
}

.settings-separator {
    border: none;
    border-top: 1px solid var(--clr-border);
    margin: 1.75rem 0;
}


/* ══════════════════════════════════════
   CHANGELOG PAGE
   ══════════════════════════════════════ */

.changelog-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.changelog-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--clr-text);
}

.changelog-subtitle {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    margin: 0.25rem 0 1.5rem;
}

.changelog-release {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
}

.changelog-date {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clr-text-secondary);
    margin-bottom: 0.6rem;
}

.changelog-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.changelog-items > li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--clr-text);
}

.changelog-items > li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--frost-400);
}


/* ══════════════════════════════════════
   FLASH MESSAGES
   ══════════════════════════════════════ */

.flash-container:has(.flash[open]) {
    position: sticky;
    top: calc(var(--header-h) + var(--breadcrumb-h));
    z-index: 100;
}

.flash {
    position: relative;
    max-width: calc(750px - 3rem);
    margin: 0 auto;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 0 0 var(--radius) var(--radius);
}

.flash:not([open]) {
    display: none;
}

/* ── Body row: icon + text ── */
.flash-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Icon ── */
.flash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Text ── */
.flash-text {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

/* ── Close button (top-right) ── */
.flash-close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    opacity: 0.4;
    transition: all var(--duration) var(--ease);
}

.flash-close::-webkit-details-marker {
    display: none;
}

.flash-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

/* ── Actions row (bottom-right) ── */
.flash-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.6rem;
}

.flash-actions form {
    display: inline;
}

/* ── Error variant ── */
.flash-error {
    background-color: #fef2f2;
    color: var(--red-600);
    border-left-color: var(--red-500);
    border-bottom-color: #fecaca;
}

.flash-error .flash-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--red-500);
}

/* ── Undo variant ── */
.flash-undo {
    background-color: #f0fdf4;
    color: var(--green-600);
    border-left-color: var(--green-500);
    border-bottom-color: #bbf7d0;
}

.flash-undo .flash-icon {
    background: rgba(34, 197, 94, 0.1);
    color: var(--green-500);
}

.btn-undo {
    background: transparent;
    color: var(--green-600);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.38rem 0.85rem;
    border: 1.5px solid var(--green-400);
    border-radius: var(--radius-sm);
}

.btn-undo:hover {
    background: var(--green-500);
    color: #fff;
    border-color: var(--green-500);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* ── Success variant ── */
.flash-success {
    background-color: #f0fdf4;
    color: var(--green-600);
    border-left-color: var(--green-500);
    border-bottom-color: #bbf7d0;
}

.flash-success .flash-icon {
    background: rgba(34, 197, 94, 0.1);
    color: var(--green-500);
}

/* ══════════════════════════════════════
   MOVE PAGE
   ══════════════════════════════════════ */

.move-page-header {
    position: sticky;
    top: var(--sticky-top);
    z-index: 20;
    background: var(--clr-bg);
    padding: 0 0 1rem;
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 1.25rem;
}

.move-page-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--slate-800);
}

.move-page-origin {
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
    margin-top: 0.15rem;
}

.move-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

/* ── Move freezer cards (same style as homepage) ── */
.move-freezer {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.move-freezer:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.move-freezer-top {
    height: 20px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.07) 1px,
            rgba(255, 255, 255, 0.07) 2px
        ),
        linear-gradient(180deg, #b0bec5, #90a4ae, #78909c, #90a4ae, #b0bec5);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.move-freezer-name {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 0.55rem 1rem 0.45rem;
    color: var(--slate-500);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    background: linear-gradient(180deg, #eceff1, #e0e4e8);
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.move-freezer-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.move-freezer-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 10px;
    background: linear-gradient(180deg, #cfd8dc, #b0bec5);
}

.move-freezer-body > form,
.move-freezer-body > .move-drawer-current {
    flex: 1;
    display: flex;
}

.move-freezer-bottom {
    height: 20px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.07) 1px,
            rgba(255, 255, 255, 0.07) 2px
        ),
        linear-gradient(180deg, #b0bec5, #90a4ae, #78909c, #90a4ae, #b0bec5);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ── Move page — shelf variant ── */
.move-shelf {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--duration) var(--ease);
}

.move-shelf:hover {
    box-shadow: var(--shadow);
}

.move-shelf-top {
    height: 14px;
    background:
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px),
        linear-gradient(180deg, #c9a87c, #b5936a, #a07d55, #b5936a, #c9a87c);
    border-radius: var(--radius) var(--radius) 0 0;
}

.move-shelf-name {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--wood-700);
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    background: linear-gradient(180deg, #f5ead6, #e8d4b0);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.move-shelf-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-shelf-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    background: linear-gradient(180deg, #e8d4b0, #d4b88a);
    flex: 1;
}

.move-shelf-body > form,
.move-shelf-body > .move-drawer-current {
    flex: 1;
}

.move-shelf-bottom {
    height: 14px;
    background:
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px),
        linear-gradient(180deg, #c9a87c, #b5936a, #a07d55, #b5936a, #c9a87c);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Move drawer buttons ── */
.move-drawer {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(180deg, #ffffff, #f5f7fa);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    cursor: pointer;
    color: var(--slate-700);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--duration) var(--ease);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    width: 100%;
    gap: 0.5rem;
}

/* Drawer handle */
.move-drawer::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 44px;
    height: 6px;
    background: linear-gradient(180deg, #b0bec5, #90a4ae);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: background var(--duration) var(--ease);
}

.move-drawer:not(.move-drawer-current):hover {
    background: linear-gradient(180deg, var(--frost-50), #e8f2fc);
    border-color: var(--frost-300);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(43, 143, 217, 0.12);
}

.move-drawer:not(.move-drawer-current):hover::before {
    background: linear-gradient(180deg, var(--frost-400), var(--frost-500));
}

.move-drawer-number {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-400);
    flex-shrink: 0;
    transition: color var(--duration) var(--ease);
}

.move-drawer:not(.move-drawer-current):hover .move-drawer-number {
    color: var(--frost-600);
}

/* ── Current drawer (non-clickable) ── */
.move-drawer-current {
    cursor: not-allowed;
    opacity: 0.55;
    background: linear-gradient(180deg, var(--frost-50), var(--frost-100));
    border-color: var(--frost-400);
}

.move-drawer-current .move-drawer-number {
    color: var(--frost-600);
}

.move-drawer-label {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--frost-500);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.move-drawer:hover .move-drawer-label {
    opacity: 1;
}

.move-drawer-current .move-drawer-label {
    opacity: 0.8;
    font-style: italic;
    color: var(--slate-400);
}

/* ══════════════════════════════════════
   AUTOCOMPLETE
   ══════════════════════════════════════ */

.autocomplete-wrap {
    position: relative;
    width: 100%;
    background: #f7fbff;
    border-radius: var(--radius-sm);
}

.autocomplete-wrap input {
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 1;
}

.autocomplete-ghost {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid transparent;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: normal;
    color: var(--clr-text-muted);
    opacity: 0.5;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    text-transform: none;
    right: 0;
    z-index: 60;
    background: var(--clr-surface);
    border: 1.5px solid var(--frost-300);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}

.autocomplete-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--frost-50);
    color: var(--frost-700);
}


/* ══════════════════════════════════════
   HEADER NAV
   ══════════════════════════════════════ */

.header-nav {
    position: relative;
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--slate-700);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-nav-link + .header-nav-link,
.header-nav-link + .header-nav-item,
.header-nav-item + .header-nav-item {
    padding-left: 1.5rem;
    border-left: 1px solid var(--slate-700);
}

.header-nav-item {
    position: relative;
}

.header-nav-item .tip-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    height: auto;
    width: 0;
    z-index: 70;
}

.header-nav-item .tip-bubble {
    left: 0;
    transform: none;
    max-width: min(420px, calc(100vw - 2rem));
}

.header-nav-item .tip-arrow-up::before,
.header-nav-item .tip-arrow-up::after {
    left: 1.5rem;
    transform: none;
}

.header-nav-link {
    color: var(--slate-400);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color var(--duration) var(--ease);
}

.header-nav-link:hover {
    color: #fff;
}

/* ══════════════════════════════════════
   PRODUCTS PAGE — Column headers
   ══════════════════════════════════════ */

.col-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.col-icon {
    color: var(--slate-400);
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    vertical-align: middle;
    display: block;
}

/* ── Sort link ── */
.col-sort {
    display: inline-flex;
    align-items: center;
    color: var(--slate-400);
    text-decoration: none;
    line-height: 1;
    transition: color var(--duration) var(--ease);
    position: relative;
}

.col-sort svg {
    flex-shrink: 0;
}

.col-sort:hover {
    color: var(--slate-600);
}

/* ── Filter dropdown (details/summary) ── */
.col-filter {
    position: static;
}

.col-filter-label {
    cursor: pointer;
    list-style: none;
    user-select: none;
    position: relative;
    -webkit-transform: translateZ(0);
    touch-action: manipulation;
}

.col-filter-label::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
}

.col-filter-label::-webkit-details-marker {
    display: none;
}

.col-filter-active .col-filter-label {
    color: var(--clr-accent);
}

.col-filter-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--clr-accent);
    line-height: 1;
}

.items-col-date .col-filter-value {
    font-size: 1rem;
    font-weight: 700;
}

.col-filter-value-text {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: none;
    font-size: 0.78rem;
    height: 36px;
    padding: 0 0.45rem;
    border: 1px solid var(--frost-300);
    border-radius: var(--radius-sm);
    background: var(--frost-50);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.col-filter-value-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}



.col-filter-value-text::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='m12 12-3-3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='m12 12-3-3'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    vertical-align: middle;
}

.items-col-date .col-filter-value-text::before {
    display: none;
}

.items-col-name .col-header {
    min-width: 0;
}

.items-col-name .col-filter {
    min-width: 0;
}

.items-col-name .col-filter-label {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
}

.col-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.65rem 0.75rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.col-filter-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--slate-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
}

.col-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 0.35rem;
}

.col-filter-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    font-size: 1.6rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    transition: all var(--duration) var(--ease);
    color: var(--slate-500);
}

.col-filter-option:hover {
    background: var(--frost-50);
    border-color: var(--frost-300);
}

.col-filter-option-active {
    background: var(--frost-100);
    border-color: var(--frost-400);
    box-shadow: 0 1px 3px rgba(43, 143, 217, 0.2);
}

.col-filter-option-label {
    width: auto;
    padding: 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    justify-content: flex-start;
    gap: 0.3rem;
    border-color: var(--slate-200);
}

.col-filter-option-icon {
    flex-shrink: 0;
    opacity: 0.5;
}

.col-filter-group-label {
    width: 100%;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: -1.2rem;
}

@media (min-width: 769px) {
    .items-col-category .col-filter-options {
        display: grid;
        grid-template-columns: repeat(auto-fill, 43px);
        gap: 0.5rem 0.35rem;
    }

    .items-col-category .col-filter-option-label,
    .items-col-category .col-filter-group-label {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .items-col-category .col-filter-group-label {
        margin-bottom: 0;
    }
}

.items-col-date .col-filter-options {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.col-filter-dropdown form {
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
}

.col-filter-dropdown .autocomplete-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

.col-filter-dropdown .autocomplete-ghost {
    padding: 0.45rem 0.6rem;
    border: 1.5px solid transparent;
    font-size: 0.85rem;
}

.col-filter-dropdown .col-filter-actions {
    margin-top: 0;
    flex-shrink: 0;
}

.col-filter-dropdown .btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    border: 1.5px solid transparent;
}

.col-filter-dropdown .btn-cancel {
    border-color: var(--slate-300);
}

.col-filter-dropdown .btn-delete {
    border-color: var(--red-400);
}

.col-filter-dropdown input,
.col-filter-dropdown select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1.5px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    background: transparent;
    color: var(--clr-text);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.col-filter-dropdown input:focus,
.col-filter-dropdown select:focus {
    outline: none;
    border-color: var(--frost-400);
    box-shadow: 0 0 0 3px rgba(43, 143, 217, 0.12);
}

.col-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Small button ── */
.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
}

/* ══════════════════════════════════════
   PRODUCTS PAGE — Items table
   ══════════════════════════════════════ */

.items-table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.items-table thead {
    position: sticky;
    top: var(--sticky-top);
    z-index: 20;
}

.items-table-header th {
    padding: 0.6rem;
    background: var(--slate-50);
    border-bottom: 2px solid var(--slate-200);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    vertical-align: middle;
}

.items-table-header th:first-child {
    border-top-left-radius: calc(var(--radius) - 1px);
}

.items-table-header th:last-child {
    border-top-right-radius: calc(var(--radius) - 1px);
}

.clear-filters-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.clear-filters-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    color: var(--red-500);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    height: 36px;
    padding: 0 0.5rem;
    border: 1px solid var(--red-200);
    border-radius: var(--radius-sm);
    background: white;
    white-space: nowrap;
}

.clear-filters-link:hover {
    background: var(--red-50, #fef2f2);
    border-color: var(--red-300);
}

@media (max-width: 600px) {
    .items-table-header {
        position: relative;
    }

    .items-table-header .items-col-name {
        position: static;
    }

    .clear-filters-link {
        position: absolute;
        right: 0.6rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        flex-direction: row-reverse;
        height: auto;
        padding: 0.15rem 0.35rem;
        border-color: transparent;
        background: transparent;
    }

    .clear-filters-text {
        display: none;
    }

    .clear-filters-link:hover,
    .clear-filters-link:active {
        left: 0;
        right: 0;
        top: 0;
        bottom: -2px;
        transform: none;
        padding: 0 0.6rem 0 0;
        border: none;
        border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
        background: var(--red-50, #fef2f2);
        align-items: center;
    }

    .clear-filters-link:hover .clear-filters-text,
    .clear-filters-link:active .clear-filters-text {
        display: inline;
    }
}

.items-table-row {
    font-size: 0.88rem;
    transition: background var(--duration) var(--ease);
}

.items-table-row td {
    padding: 0;
    border-bottom: 1px solid var(--slate-100);
    vertical-align: middle;
}

.items-table-row td a {
    padding: 0.55rem 0.6rem;
}

.items-table-row:last-child td {
    border-bottom: none;
}

.items-table-row:hover {
    background: var(--slate-50);
    cursor: pointer;
}

.items-table-row.item-old {
    background: rgba(251, 191, 36, 0.06);
}

.items-table-row.item-old:hover {
    background: rgba(251, 191, 36, 0.12);
}

.items-table-row.item-old .items-col-date {
    color: #b45309;
    font-weight: 700;
}

.items-table-row.item-too-old {
    background: rgba(239, 68, 68, 0.05);
}

.items-table-row.item-too-old:hover {
    background: rgba(239, 68, 68, 0.09);
}

.items-table-row.item-too-old .items-col-date {
    color: var(--red-500);
    font-weight: 700;
}

.items-empty-row {
    text-align: center;
    padding: 2rem 1rem !important;
    color: var(--clr-text-muted);
}

.items-empty-text {
    display: block;
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}

.items-empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--clr-text-muted);
}

.items-empty-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--clr-accent);
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border: 1.5px solid var(--frost-300);
    border-radius: var(--radius-sm);
    transition: all var(--duration) var(--ease);
}

.items-empty-link:hover {
    background: var(--frost-50);
    border-color: var(--frost-400);
}

.items-empty-link-name {
    max-width: 10rem;
}

.items-empty-link-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.items-col-category {
    text-align: left;
    font-size: 1.35rem;
    line-height: 1;
    width: 3rem;
}

.items-col-name {
    width: 100%;
    font-weight: 600;
    color: var(--slate-800);
}

.items-table-row .items-col-name {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.items-col-details {
    display: block;
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.items-table-row td a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.items-table-row td a:visited {
    color: inherit;
}

.items-table-row .items-col-name a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.items-col-date {
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.items-table-row .items-col-date a {
    padding-right: 0.2rem;
}

/* ══════════════════════════════════════
   TIP BUBBLES
   ══════════════════════════════════════ */

.tip-wrap {
    position: relative;
    height: 0;
    z-index: 70;
}

.col-tip-anchor {
    position: relative;
}

.col-tip-anchor:has(.col-filter[open]) {
    position: static;
}

.col-tip-anchor .col-tip-wrap {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 70;
}

.col-tip-anchor .col-tip-wrap .tip-bubble {
    left: -1rem;
    transform: none;
}

.col-tip-anchor .col-tip-wrap .tip-arrow-up::before,
.col-tip-anchor .col-tip-wrap .tip-arrow-up::after {
    left: 1rem;
    transform: translateX(-50%);
}

.tip-inline {
    position: relative;
    height: 0;
    z-index: 1;
}

.tip-inline .tip-bubble {
    top: 0.25rem;
    width: max-content;
    max-width: calc(100% - 1.5rem);
}

.tip-bubble {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(420px, calc(100vw - 2rem));
    padding: 1rem 1.15rem;
    background: var(--frost-50);
    border: 1.5px solid var(--frost-300);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    text-align: center;
    /* Reset inherited styles from parent contexts (e.g. table headers) */
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
}

.tip-align-start .tip-bubble {
    left: 0;
    transform: none;
}

.tip-align-start .tip-arrow-up::before,
.tip-align-start .tip-arrow-up::after,
.tip-align-start .tip-arrow-down::before,
.tip-align-start .tip-arrow-down::after {
    left: 2rem;
    transform: none;
}

.tip-bubble.tip-arrow-up {
    top: 0.75rem;
}

.tip-bubble.tip-arrow-down {
    bottom: 0.75rem;
}

.tip-text {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--slate-700);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.tip-flow {
    position: static;
    height: auto;
    z-index: auto;
    margin-bottom: 0.5rem;
}

.tip-flow .tip-bubble {
    position: relative;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    top: auto;
    bottom: auto;
}

.tip-text p {
    margin: 0 0 0.5rem;
}

.tip-text p:last-child {
    margin-bottom: 0;
}

.btn-tip-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--frost-600);
    background: var(--clr-surface);
    border: 1.5px solid var(--frost-300);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.btn-tip-dismiss:hover {
    background: var(--frost-500);
    color: #fff;
    border-color: var(--frost-500);
    box-shadow: 0 2px 6px rgba(43, 143, 217, 0.3);
}

/* Arrow pointing down (bubble above target) */
.tip-arrow-down::after,
.tip-arrow-down::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

.tip-arrow-down::before {
    bottom: -10px;
    border-top: 10px solid var(--frost-300);
}

.tip-arrow-down::after {
    bottom: -8px;
    border-top: 10px solid var(--frost-50);
}

/* Arrow pointing up (bubble below target) */
.tip-arrow-up::after,
.tip-arrow-up::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

.tip-arrow-up::before {
    top: -10px;
    border-bottom: 10px solid var(--frost-300);
}

.tip-arrow-up::after {
    top: -8px;
    border-bottom: 10px solid var(--frost-50);
}

.item-action-tip-wrap {
    position: relative;
}

.item-action-tip-wrap .tip-wrap {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    z-index: 90;
}

.item-action-tip-wrap .tip-bubble {
    left: 50%;
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 2rem));
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 600px) {
    .header-nav {
        position: static;
        margin-left: 0.5rem;
        padding-left: 0.5rem;
        gap: 0.35rem;
    }

    .header-nav-link {
        font-size: 0.85rem;
        font-weight: 600;
    }

    .header-nav-link + .header-nav-link,
    .header-nav-link + .header-nav-item,
    .header-nav-item + .header-nav-item {
        padding-left: 0.5rem;
    }

    .header-user {
        margin-left: auto;
        padding-left: 0.5rem;
        gap: 0.35rem;
    }

    .header-logout {
        width: 34px;
        height: 34px;
    }

    .header-logout svg {
        width: 18px;
        height: 18px;
    }

    .header-nav-item {
        position: static;
    }

    .header-nav-item .tip-wrap {
        left: 1rem;
        right: 1rem;
        width: auto;
    }

    .header-nav-item .tip-bubble {
        max-width: none;
        width: 100%;
    }

    .header-nav-item .tip-arrow-up::before,
    .header-nav-item .tip-arrow-up::after {
        display: none;
    }

    .header-nav-item .tip-wrap::before,
    .header-nav-item .tip-wrap::after {
        content: "";
        position: absolute;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
    }

    .header-nav-item .tip-wrap::before {
        top: calc(0.75rem - 10px);
        border-bottom: 10px solid var(--frost-300);
    }

    .header-nav-item .tip-wrap::after {
        top: calc(0.75rem - 8px);
        border-bottom: 10px solid var(--frost-50);
    }

    .header-nav-item .tip-wrap::before,
    .header-nav-item .tip-wrap::after {
        left: 13rem;
        transform: translateX(-50%);
    }

    main {
        padding: 1.25rem 1rem 3rem;
    }

    .freezers-grid,
    .move-page-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.25rem;
    }

    .storage-grid-freezers,
    .storage-grid-shelves {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 1.3rem;
    }

    .form-row:not(.form-row-inline) {
        flex-direction: column;
    }

    .form-row:not(.form-row-inline) > div {
        min-width: 100%;
    }

    .form-row-inline {
        flex-wrap: nowrap;
    }

    .form-row-inline > div {
        min-width: 0;
    }


    .item-row {
        position: relative;
        padding: 0.35rem 0.25rem;
    }

    .item-action-tip-wrap {
        position: static;
    }

    .items-col-category .col-filter-option:not(.col-filter-option-label) {
        width: calc((100% - 4 * 0.35rem) / 5);
    }

    .items-table-header th {
        position: static;
    }

    .items-table-header .col-filter {
        position: static;
    }

    .col-tip-anchor {
        position: static;
    }

    .col-tip-anchor .col-tip-wrap {
        left: 0;
        right: 0;
        width: auto;
        transform: none;
    }

    .col-tip-anchor .col-tip-wrap .tip-bubble {
        left: 50%;
        transform: translateX(-50%);
        max-width: min(420px, calc(100% - 2rem));
    }

    .items-col-category .col-tip-wrap .tip-bubble {
        left: calc(50% - 0.5rem);
    }

    .col-tip-anchor .col-tip-wrap .tip-arrow-up::before,
    .col-tip-anchor .col-tip-wrap .tip-arrow-up::after {
        display: none;
    }

    .col-tip-anchor .col-tip-wrap::before,
    .col-tip-anchor .col-tip-wrap::after {
        content: "";
        position: absolute;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
    }

    .col-tip-anchor .col-tip-wrap::before {
        top: calc(0.75rem - 10px);
        border-bottom: 10px solid var(--frost-300);
    }

    .col-tip-anchor .col-tip-wrap::after {
        top: calc(0.75rem - 8px);
        border-bottom: 10px solid var(--frost-50);
    }

    .items-col-category .col-tip-wrap::before,
    .items-col-category .col-tip-wrap::after {
        left: 1.4rem;
        transform: translateX(-50%);
    }

    .items-col-date .col-tip-anchor:first-child .col-tip-wrap::before,
    .items-col-date .col-tip-anchor:first-child .col-tip-wrap::after {
        left: 4.4rem;
        transform: translateX(-50%);
    }

    .items-col-date .col-tip-anchor:nth-child(2) .col-tip-wrap::before,
    .items-col-date .col-tip-anchor:nth-child(2) .col-tip-wrap::after {
        left: 6.3rem;
        transform: translateX(-50%);
    }

    .items-col-name .col-tip-anchor:first-child .col-tip-wrap::before,
    .items-col-name .col-tip-anchor:first-child .col-tip-wrap::after {
        left: 9.1rem;
        transform: translateX(-50%);
    }

    .items-col-name .col-tip-anchor:nth-child(2) .col-tip-wrap::before,
    .items-col-name .col-tip-anchor:nth-child(2) .col-tip-wrap::after {
        left: 11rem;
        transform: translateX(-50%);
    }

    /* ── Dropdown pleine largeur du tableau ── */

    .category-radios input[type="radio"] + label {
        width: calc((100% - 4 * 0.4rem) / 5);
    }

    .header-brand-label {
        display: none;
    }

    .item-action-tip-wrap .tip-wrap {
        left: 0;
        right: 0;
        bottom: 100%;
        transform: none;
        width: auto;
    }

    .item-action-tip-wrap .tip-bubble {
        left: auto;
        right: 0;
        transform: none;
    }

    /* Hide bubble's own arrow, use tip-wrap pseudo-elements instead */
    .item-action-tip-wrap .tip-arrow-down::after,
    .item-action-tip-wrap .tip-arrow-down::before {
        display: none;
    }

    .item-action-tip-wrap .tip-wrap::before,
    .item-action-tip-wrap .tip-wrap::after {
        content: "";
        position: absolute;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        transform: translateX(50%);
    }

    .item-action-tip-wrap .tip-wrap::before {
        bottom: calc(0.75rem - 10px);
        border-top: 10px solid var(--frost-300);
    }

    .item-action-tip-wrap .tip-wrap::after {
        bottom: calc(0.75rem - 8px);
        border-top: 10px solid var(--frost-50);
    }

    .item-action-tip-wrap:nth-child(1) .tip-wrap::before,
    .item-action-tip-wrap:nth-child(1) .tip-wrap::after {
        right: calc(1rem + 105px);
    }

    .item-action-tip-wrap:nth-child(2) .tip-wrap::before,
    .item-action-tip-wrap:nth-child(2) .tip-wrap::after {
        right: calc(0.75rem + 75px);
    }

    .item-action-tip-wrap:nth-child(3) .tip-wrap::before,
    .item-action-tip-wrap:nth-child(3) .tip-wrap::after {
        right: calc(0.5rem + 45px);
    }

    .item-action-tip-wrap:nth-child(4) .tip-wrap::before,
    .item-action-tip-wrap:nth-child(4) .tip-wrap::after {
        right: calc(0.25rem + 15px);
    }
}

/* ══════════════════════════════════════
   History Timeline
   ══════════════════════════════════════ */

.history-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.history-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 1.5rem;
}

.history-empty {
    text-align: center;
    color: var(--clr-text-secondary);
    padding: 3rem 1rem;
    font-size: 0.95rem;
}

.history-search-reset {
    color: var(--frost-600);
    font-weight: 600;
    text-decoration: none;
}

.history-search-reset:hover {
    text-decoration: underline;
}

/* ── Search bar ── */
.history-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.history-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.history-search-icon {
    position: absolute;
    left: 0.7rem;
    color: var(--clr-text-muted);
    pointer-events: none;
}

.history-search-input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 2.3rem 0.55rem 2.3rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--clr-text);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.history-search-input::placeholder {
    color: var(--clr-text-muted);
}

.history-search-input:focus {
    outline: none;
    border-color: var(--frost-400);
    box-shadow: 0 0 0 3px var(--frost-100);
}

.history-search-clear {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--clr-text-muted);
    background: var(--clr-border);
    border-radius: 50%;
    text-decoration: none;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.history-search-clear:hover {
    background: var(--red-500);
    color: #fff;
}

/* ── Timeline ── */
.timeline {
    position: relative;
    padding-left: 28px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--clr-border);
}

/* ── Day headers ── */
.timeline-day-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clr-text-secondary);
    margin: 1.5rem 0 0.75rem;
    position: relative;
}

.timeline-day:first-child .timeline-day-label {
    margin-top: 0;
}

/* ── Entries ── */
.timeline-entry {
    position: relative;
    margin-bottom: 0.5rem;
}

.timeline-dot {
    position: absolute;
    left: -24px;
    top: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--clr-border);
    border: 2px solid var(--clr-bg);
    z-index: 1;
}

/* Dot colors by type */
.timeline-entry--item_added .timeline-dot { background: var(--green-500); }
.timeline-entry--item_consumed .timeline-dot { background: var(--amber-400); }
.timeline-entry--item_deleted .timeline-dot { background: var(--red-500); }
.timeline-entry--item_moved .timeline-dot { background: var(--frost-500); }
.timeline-entry--freezer_created .timeline-dot { background: var(--frost-500); }
.timeline-entry--freezer_deleted .timeline-dot { background: var(--red-500); }
.timeline-entry--freezer_renamed .timeline-dot { background: var(--slate-400); }

/* ── Cards ── */
.timeline-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: var(--shadow-xs);
}

.timeline-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--clr-text-secondary);
}

/* Icon colors by type */
.timeline-entry--item_added .timeline-icon { color: var(--green-600); }
.timeline-entry--item_consumed .timeline-icon { color: #d97706; }
.timeline-entry--item_deleted .timeline-icon { color: var(--red-500); }
.timeline-entry--item_moved .timeline-icon { color: var(--frost-600); }
.timeline-entry--freezer_created .timeline-icon { color: var(--frost-600); }
.timeline-entry--freezer_deleted .timeline-icon { color: var(--red-500); }
.timeline-entry--freezer_renamed .timeline-icon { color: var(--slate-500); }

.timeline-text {
    flex: 1;
    font-size: 0.88rem;
    color: var(--clr-text);
    line-height: 1.4;
}

.timeline-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── "Voir plus" button ── */
.timeline-more {
    text-align: center;
    margin-top: 1.5rem;
}

.btn-more {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: var(--clr-surface);
    color: var(--frost-600);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.btn-more:hover {
    background: var(--frost-50);
    border-color: var(--frost-200);
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .history-page {
        padding: 1rem 0.75rem;
    }

    .timeline {
        padding-left: 24px;
    }

    .timeline::before {
        left: 6px;
    }

    .timeline-dot {
        left: -21px;
        width: 10px;
        height: 10px;
        top: 13px;
    }

    .timeline-card {
        padding: 0.5rem 0.6rem;
        gap: 0.4rem;
    }

    .timeline-text {
        font-size: 0.82rem;
    }
}

/* ══════════════════════════════════════
   BARRE DE PROGRESSION TURBO
   ══════════════════════════════════════ */

/* Turbo injecte sa feuille de style en tête du <head>, ces règles la surchargent. */
.turbo-progress-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--frost-400), var(--frost-600));
    box-shadow: 0 0 8px rgba(43, 143, 217, 0.5);
}

/* ═══════════════════════════════════════════════════════
   1er Avril
   ═══════════════════════════════════════════════════════ */

body.april-fools .freezer:not(.freezer-ghost) {
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

body.april-fools .freezer:not(.freezer-ghost):hover {
    transform: none;
    box-shadow: none;
}

/* ── Gland ── */

body.april-fools .freezer:not(.freezer-ghost) > .freezer-top {
    height: auto;
    aspect-ratio: 2 / 1;
    background: radial-gradient(ellipse at 50% 65%, #e09888, #c47868);
    border-radius: 48% 48% 6% 6% / 70% 70% 6% 6%;
    border-bottom: 3.5px solid #a86050;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
}

body.april-fools .freezer:not(.freezer-ghost) > .freezer-top::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 28%;
    background: #a86858;
    border-radius: 50%;
    opacity: 0.5;
}

/* ── Shaft ── */

body.april-fools .freezer:not(.freezer-ghost) > .freezer-name {
    background: linear-gradient(180deg, #deb898, #d8b090);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.april-fools .freezer:not(.freezer-ghost) > .freezer-body {
    background:
        repeating-linear-gradient(
            155deg,
            transparent,
            transparent 28px,
            rgba(170, 130, 110, 0.07) 28px,
            rgba(170, 130, 110, 0.07) 30px
        ),
        linear-gradient(180deg, #d8b090, #d0a880);
    overflow: visible;
}


body.april-fools .freezer:not(.freezer-ghost) .drawer {
    background: linear-gradient(180deg, #f0dcc8, #e8d0b8);
    border-color: rgba(160, 120, 90, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.april-fools .freezer:not(.freezer-ghost) .drawer::before {
    background: linear-gradient(180deg, #c8a888, #b89878);
}

body.april-fools .freezer:not(.freezer-ghost) .drawer:hover {
    background: linear-gradient(180deg, #f4e0cc, #ecdac8);
    border-color: rgba(160, 120, 90, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(160, 120, 90, 0.15);
}

body.april-fools .freezer:not(.freezer-ghost) .drawer:hover::before {
    background: linear-gradient(180deg, #c09078, #a87868);
}

/* ── Testicules ── */

.ball {
    display: none;
}

body.april-fools .freezer:not(.freezer-ghost) > .freezer-body {
    position: relative;
    z-index: 1;
}

body.april-fools .freezer:not(.freezer-ghost) > .freezer-bottom {
    height: auto;
    background: transparent;
    border-radius: 0;
    border: none;
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0 -8%;
    margin-top: -15%;
}

body.april-fools .freezer:not(.freezer-ghost) > .freezer-bottom > .ball {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    width: 55%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 55%, #4a3228 0%, #4a3228 1px, transparent 1px),
        radial-gradient(circle at 65% 48%, #4a3228 0%, #4a3228 1px, transparent 1px),
        radial-gradient(circle at 45% 70%, #3e2a20 0%, #3e2a20 1px, transparent 1px),
        radial-gradient(circle at 55% 60%, #4a3228 0%, #4a3228 1px, transparent 1px),
        radial-gradient(circle at 25% 42%, #3e2a20 0%, #3e2a20 1px, transparent 1px),
        radial-gradient(circle at 70% 65%, #4a3228 0%, #4a3228 1px, transparent 1px),
        radial-gradient(circle at 38% 45%, #3e2a20 0%, #3e2a20 1px, transparent 1px),
        radial-gradient(circle at 60% 75%, #4a3228 0%, #4a3228 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, #3e2a20 0%, #3e2a20 1px, transparent 1px),
        radial-gradient(circle at 35% 62%, #4a3228 0%, #4a3228 1px, transparent 1px),
        radial-gradient(circle at 72% 52%, #3e2a20 0%, #3e2a20 1px, transparent 1px),
        radial-gradient(circle at 42% 38%, #4a3228 0%, #4a3228 1px, transparent 1px),
        radial-gradient(ellipse at 45% 35%, #e0b898, #c8a080);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 -3px 6px rgba(0, 0, 0, 0.06);
    border: none;
    outline: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

body.april-fools .freezer:not(.freezer-ghost) > .freezer-bottom > .ball-right {
    margin-left: -10%;
}

/* ── Animation boules de Newton ── */

@keyframes ball-swing-left {
    0% { transform: translateX(0); }
    40% { transform: translateX(-30%); }
    100% { transform: translateX(0); }
}

@keyframes ball-swing-right {
    0% { transform: translateX(0); }
    40% { transform: translateX(30%); }
    100% { transform: translateX(0); }
}

@keyframes ball-react-left {
    0% { transform: translateX(0); }
    40% { transform: translateX(-30%); }
    100% { transform: translateX(0); }
}

@keyframes ball-react-right {
    0% { transform: translateX(0); }
    40% { transform: translateX(30%); }
    100% { transform: translateX(0); }
}

/* Clic boule gauche → gauche part puis droite réagit */
body.april-fools .ball-left:checked {
    animation: ball-swing-left 0.5s ease-in-out 1;
}

body.april-fools .ball-left:checked ~ .ball-right {
    animation: ball-swing-right 0.5s ease-in-out 0.45s 1;
}

/* Clic boule droite → droite part puis gauche réagit */
body.april-fools .ball-right:checked {
    animation: ball-react-right 0.5s ease-in-out 1;
}

body.april-fools .freezer-bottom:has(.ball-right:checked) > .ball-left {
    animation: ball-react-left 0.5s ease-in-out 0.45s 1;
}