/* ============================================================
   app.css — Mes Courses — Mobile-first design
   ============================================================ */

/* Garantir que l'attribut HTML hidden fonctionne même si le CSS définit display */
[hidden] { display: none !important; }

/* ---- Variables ---- */
:root {
    --color-bg:        #F8F6F0;
    --color-surface:   #FFFFFF;
    --color-primary:   #2D7D46;
    --color-primary-dark: #1e5c32;
    --color-primary-light: #e8f5ed;
    --color-danger:    #C0392B;
    --color-danger-light: #fdf0ef;
    --color-warning:   #E67E22;
    --color-warning-light: #fef3e8;
    --color-success:   #27AE60;
    --color-info:      #2980B9;
    --color-text:      #2C3E50;
    --color-text-muted: #7F8C8D;
    --color-border:    #E0DDD5;
    --color-shadow:    rgba(0,0,0,0.08);

    --font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-full:  999px;

    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;

    --header-height: 56px;
    --nav-height:    52px;

    --transition: 0.2s ease;
}

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

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

/* ---- Header ---- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-primary);
    box-shadow: 0 2px 8px var(--color-shadow);
    height: var(--header-height);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--space-md);
    gap: var(--space-sm);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
}
.header-logo:hover { text-decoration: none; opacity: 0.9; }
.header-logo-icon { font-size: 1.4rem; }

.header-session-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.header-user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header-user-name {
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-logout {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: background var(--transition);
}
.btn-logout:hover { background: rgba(255,255,255,0.3); }

/* ---- Navigation ---- */
.app-nav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    height: var(--nav-height);
}
.app-nav::-webkit-scrollbar { display: none; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-md);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color var(--transition), border-color var(--transition);
    text-decoration: none;
    flex-shrink: 0;
}
.nav-link:hover { color: var(--color-primary); text-decoration: none; }
.nav-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ---- Main ---- */
.app-main {
    flex: 1;
    padding: var(--space-md);
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

/* ---- Footer ---- */
.app-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ---- Cards ---- */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 4px var(--color-shadow);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.card-subtitle {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
}

/* ---- Page header ---- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    gap: var(--space-sm);
}

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

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), opacity var(--transition), transform var(--transition);
    white-space: nowrap;
    text-decoration: none;
    min-height: 44px; /* Touch target */
    line-height: 1.2;
    font-family: var(--font-base);
}
.btn:hover { opacity: 0.9; text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

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

.btn-secondary {
    background: var(--color-border);
    color: var(--color-text);
}
.btn-secondary:hover { background: #d5d1c7; }

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

.btn-sm { padding: 6px 12px; min-height: 36px; font-size: 0.825rem; }
.btn-lg { padding: 14px 24px; font-size: 1rem; min-height: 52px; }
.btn-full { width: 100%; }

/* Icon buttons */
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 6px;
    border-radius: var(--radius-sm);
    opacity: 0.7;
    transition: opacity var(--transition), background var(--transition);
    min-height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover { opacity: 1; background: var(--color-border); }

/* Copy button */
.btn-copy-code {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    transition: background var(--transition);
}
.btn-copy-code:hover { background: var(--color-border); }

/* Show password */
.btn-show-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-text-muted);
    padding: 4px;
}

/* ---- Forms ---- */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group-grow { flex: 1; }

.form-row {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.form-row .form-group { min-width: 120px; }

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    min-height: 44px;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45,125,70,0.15);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237F8C8D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

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

.form-input-code {
    font-size: 1.2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
}

.form-input-price {
    max-width: 120px;
}

.form-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

.form-actions-main {
    padding: var(--space-md) 0;
}

.input-password-wrapper {
    position: relative;
}

/* ---- Upload Zone ---- */
.upload-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    position: relative;
}
.upload-zone:hover { border-color: var(--color-primary); background: var(--color-primary-light); }

.upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

.upload-icon { font-size: 2rem; }
.upload-hint { font-size: 0.8rem; color: var(--color-text-muted); }

.photo-preview {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    margin-top: var(--space-sm);
}

.receipt-upload-zone { margin-bottom: var(--space-md); position: relative; overflow: hidden; }

.receipt-previews {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.receipt-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* ---- Flash Messages ---- */
.flash-container {
    margin-bottom: var(--space-md);
}

.flash {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
    animation: flash-in 0.3s ease;
}

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.flash-success { background: #e8f8ef; color: #1a6b3a; border: 1px solid #a8e0be; }
.flash-error   { background: var(--color-danger-light); color: var(--color-danger); border: 1px solid #f5b7b1; }
.flash-warning { background: var(--color-warning-light); color: #7d4e0a; border: 1px solid #fad7a0; }
.flash-info    { background: #ebf5fb; color: #154360; border: 1px solid #aed6f1; }

.flash-icon { font-weight: 700; flex-shrink: 0; }
.flash-text { flex: 1; }
.flash-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.5;
    padding: 0 4px;
    flex-shrink: 0;
}
.flash-close:hover { opacity: 1; }

/* ---- Badges ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}

.badge-sm { padding: 1px 6px; font-size: 0.7rem; }
.badge-count { background: var(--color-primary); font-size: 0.85rem; }

.badge-status-available { background: var(--color-success); }
.badge-status-in_list   { background: var(--color-info); }
.badge-status-purchased { background: var(--color-text-muted); }

/* ---- Search ---- */
.search-filter-bar {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    box-shadow: 0 1px 4px var(--color-shadow);
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.search-icon {
    position: absolute;
    left: 12px;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.search-input {
    padding-left: 38px !important;
    padding-right: 38px;
}

.search-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.search-hint {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-align: center;
    padding: var(--space-sm) 0;
}

/* ---- Category Filters ---- */
.category-filters {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

.cat-filter-btn {
    padding: 6px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    transition: all var(--transition);
    white-space: nowrap;
}
.cat-filter-btn:hover {
    border-color: var(--cat-color, var(--color-primary));
    color: var(--cat-color, var(--color-primary));
}
.cat-filter-btn.active {
    background: var(--cat-color, var(--color-primary));
    border-color: var(--cat-color, var(--color-primary));
    color: #fff;
}

/* ---- Items Grid ---- */
.items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

.item-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 4px var(--color-shadow);
    display: flex;
    gap: var(--space-sm);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    position: relative;
}
.item-card:hover { box-shadow: 0 3px 12px var(--color-shadow); transform: translateY(-1px); }

.item-photo {
    width: 80px;
    min-width: 80px;
    background: var(--color-bg);
}
.item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-body {
    flex: 1;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    min-width: 0;
}

.item-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-xs);
}

.item-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-description {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.item-footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.item-price {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.item-creator {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.item-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-sm);
    gap: 4px;
    border-left: 1px solid var(--color-border);
}

/* ---- Add Form ---- */
.add-form-wrapper {
    margin-bottom: var(--space-md);
    animation: slide-down 0.25s ease;
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Page d'accueil ---- */
.home-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: .75rem;
}
.home-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.home-empty {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--color-text-muted);
}
.home-empty-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.home-sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.home-session-card {
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(45,125,70,.1);
}
.hsc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hsc-status {
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 99px;
}
.hsc-members { font-size: .8rem; color: var(--color-text-muted); }
.hsc-name { font-size: 1rem; font-weight: 700; margin: 0; }
.hsc-meta {
    display: flex;
    gap: .6rem;
    font-size: .8rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.hsc-progress { display: flex; align-items: center; gap: .5rem; }
.hsc-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--color-border);
    border-radius: 99px;
    overflow: hidden;
}
.hsc-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 99px;
    transition: width .4s ease;
}
.hsc-progress-label { font-size: .78rem; color: var(--color-text-muted); white-space: nowrap; }
.hsc-btn { text-align: center; text-decoration: none; margin-top: .25rem; }

/* Présentation */
.home-about { }
.home-about-intro {
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
    font-size: .95rem;
}
.home-features {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-bottom: 1.25rem;
}
.home-feature {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}
.home-feature-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.home-feature strong { display: block; margin-bottom: .15rem; }
.home-feature p { margin: 0; font-size: .85rem; color: var(--color-text-muted); }
.home-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--color-border);
}
.home-quicklink {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .85rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text);
    transition: background .15s, border-color .15s;
}
.home-quicklink:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* ---- Bandeau sessions actives (backlog) ---- */
.active-sessions-banner {
    background: var(--color-primary-light);
    border: 1px solid #b8dfc4;
    border-radius: var(--radius-md);
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
}
.active-sessions-title {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-primary-dark);
    margin: 0 0 .75rem;
}
.active-sessions-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.session-card {
    background: var(--color-surface);
    border: 1px solid #b8dfc4;
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    transition: box-shadow .15s, transform .15s;
}
.btn-session-go {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-top: .5rem;
}
.session-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
}
.session-card-name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-text);
}
.session-card-status {
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 99px;
    white-space: nowrap;
}
.status-active            { background: #d4edda; color: #155724; }
.status-planning          { background: #fff3cd; color: #856404; }
.status-badge-active      { background: #d4edda; color: #155724; padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.status-badge-planning    { background: #fff3cd; color: #856404; padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.status-badge-closed      { background: #e2e3e5; color: #383d41; padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.session-card-meta {
    display: flex;
    gap: .75rem;
    font-size: .8rem;
    color: var(--color-text-muted);
    margin-bottom: .5rem;
}
.session-card-progress { margin-bottom: .65rem; }
.progress-label {
    font-size: .78rem;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: .25rem;
}

/* ---- Panneau partage session ---- */
.share-panel {
    margin: .5rem 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.share-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem;
    background: var(--color-primary-light);
    border: none;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    cursor: pointer;
    text-align: left;
}
.share-toggle:hover { background: #d4eddb; }
.share-badge {
    margin-left: auto;
    background: var(--color-primary);
    color: #fff;
    font-size: .75rem;
    padding: .1rem .45rem;
    border-radius: 99px;
}
.share-body {
    padding: .75rem 1rem;
    background: var(--color-surface);
}
.share-section-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 .4rem;
    letter-spacing: .04em;
}
.members-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.member-chip {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: .8rem;
    padding: .2rem .6rem;
    border-radius: 99px;
    font-weight: 500;
}
.user-invite-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.user-invite-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--color-border);
}
.user-invite-item:last-child { border-bottom: none; }
.user-invite-name { font-weight: 600; font-size: .9rem; }
.user-invite-email { color: var(--color-text-muted); font-size: .8rem; flex: 1; }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }

/* ---- Modal ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    animation: fade-in 0.2s ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    animation: modal-in 0.25s ease;
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    font-size: 1rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0 4px;
    line-height: 1;
}
.modal-close:hover { color: var(--color-text); }

.modal form {
    padding: var(--space-md);
}

/* ---- Login page ---- */
.login-page {
    background: var(--color-primary);
    min-height: 100vh;
}

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-md);
}

.login-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.login-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.login-logo { font-size: 3rem; margin-bottom: var(--space-sm); }
.login-title { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-xs); }
.login-subtitle { color: var(--color-text-muted); font-size: 0.875rem; }

.login-form { margin-bottom: var(--space-lg); }

.login-footer-note {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.join-form {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    justify-content: center;
}
.join-form .form-input { max-width: 160px; text-align: center; }

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--color-text-muted);
    grid-column: 1 / -1;
}

.empty-state-sm { padding: var(--space-md); }
.empty-icon { font-size: 2rem; display: block; margin-bottom: var(--space-sm); }
.empty-hint { font-size: 0.875rem; color: var(--color-text-muted); margin-top: var(--space-xs); }

/* ---- Planning page ---- */
.plan-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.plan-current-list .card { position: sticky; top: calc(var(--header-height) + var(--nav-height) + var(--space-sm)); }

.plan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-xs);
    background: var(--color-bg);
    gap: var(--space-sm);
}

.plan-item-info {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
    min-width: 0;
}

.plan-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-item-price {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

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

.btn-qty {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.btn-qty:hover { background: var(--color-primary-light); }

.qty-display {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
}

.plan-list-footer {
    display: flex;
    gap: var(--space-sm);
    justify-content: space-between;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

/* Plan tabs */
.plan-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
    overflow-x: auto;
}

.plan-tab {
    padding: 8px 14px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}
.plan-tab:hover { color: var(--color-primary); }
.plan-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.plan-tab-content { display: none; }
.plan-tab-content.active { display: block; }

.plan-search-results {
    max-height: 400px;
    overflow-y: auto;
    margin-top: var(--space-sm);
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-xs);
    gap: var(--space-sm);
    background: var(--color-bg);
}

.sri-info {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
    min-width: 0;
}

.sri-name {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sri-price {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 600;
}

/* Predefined lists */
.predefined-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    gap: var(--space-sm);
}

.predefined-list-info { flex: 1; }
.predefined-list-info strong { display: block; font-size: 0.9rem; }
.predefined-list-info p { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }

/* ---- Shopping view ---- */
.shopping-header {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    box-shadow: 0 1px 4px var(--color-shadow);
}

.shopping-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.shopping-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: var(--space-sm);
}

.member-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--color-primary);
}

.shopping-invite {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-primary-light);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.invite-label { font-size: 0.8rem; color: var(--color-text-muted); }

.invite-code {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--color-primary);
    font-family: monospace;
}

.shopping-progress { margin-bottom: var(--space-sm); }

.progress-text {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.progress-bar {
    height: 6px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.shopping-actions { margin-top: var(--space-md); }

/* Session items */
.session-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.session-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    box-shadow: 0 1px 4px var(--color-shadow);
    transition: opacity var(--transition), background var(--transition);
    min-height: 64px;
}

.session-item-checked {
    opacity: 0.45;
    background: var(--color-bg);
    order: 999;
}

.session-item-checked .session-item-name {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

/* Large check button */
.check-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 2.5px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    color: var(--color-primary);
    flex-shrink: 0;
}

.check-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    transform: scale(1.05);
}

.check-btn:active { transform: scale(0.95); }

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

.session-item-body { flex: 1; min-width: 0; }

.session-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 2px;
}

.session-item-name {
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
}

.session-item-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.actual-price {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.875rem;
    margin-left: auto;
}

.checked-by-badge {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 2px;
}

.session-item-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.session-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Close session ---- */
.close-layout { display: grid; gap: var(--space-md); }

.price-items-list { display: flex; flex-direction: column; gap: var(--space-sm); }

.price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.price-item-info {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
    min-width: 0;
}

.price-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price-estimate {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* OCR section */
.ocr-section {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
}

.ocr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.ocr-results {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
}

.ocr-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}
.ocr-item:last-child { border-bottom: none; }

.ocr-item-name { flex: 1; }
.ocr-item-price { font-weight: 700; color: var(--color-primary); }

/* Summary */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.summary-item {
    text-align: center;
    padding: var(--space-sm);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

.summary-label { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.summary-value { display: block; font-size: 1.1rem; font-weight: 700; margin-top: 2px; }
.summary-success { color: var(--color-success); }

.skipped-items { margin-top: var(--space-sm); font-size: 0.875rem; color: var(--color-text-muted); }
.skipped-items h4 { margin-bottom: var(--space-xs); }
.skipped-items li { padding: 2px 0; }
.skipped-items li::before { content: "• "; }

/* Session summary */
.session-summary {
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    font-size: 0.9rem;
    color: var(--color-primary);
}

/* ---- Stats page ---- */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.stat-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
    box-shadow: 0 1px 4px var(--color-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-icon { font-size: 1.5rem; }
.stat-value { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); word-break: break-word; }
.stat-label { font-size: 0.75rem; color: var(--color-text-muted); }

.chart-wrapper {
    position: relative;
    padding: var(--space-sm) 0;
}

/* ---- Tables ---- */
.table-responsive { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th {
    text-align: left;
    padding: 10px var(--space-sm);
    border-bottom: 2px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.data-table td {
    padding: 10px var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-bg); }

.text-right { text-align: right !important; }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }

/* ---- Toast notifications ---- */
#toast-container {
    position: fixed;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: calc(100% - var(--space-xl));
    max-width: 360px;
    pointer-events: none;
}

.toast {
    background: var(--color-text);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    animation: toast-in 0.3s ease;
    pointer-events: auto;
    max-width: 100%;
    text-align: center;
}

.toast-success { background: var(--color-success); }
.toast-error   { background: var(--color-danger); }
.toast-info    { background: var(--color-info); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateY(0)   scale(1); }
    to   { opacity: 0; transform: translateY(20px) scale(0.9); }
}

/* ---- Loading spinner ---- */
.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: var(--space-md) auto;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.hidden { display: none !important; }

/* ---- Responsive ---- */
@media (min-width: 640px) {
    .items-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .plan-layout {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .app-main { padding: var(--space-lg); }
    .items-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .session-items {
        max-width: 680px;
        margin: 0 auto;
    }
    .close-layout {
        grid-template-columns: 1fr 1fr;
    }
    .close-layout > .card:last-child,
    .close-layout > .form-actions-main {
        grid-column: 1 / -1;
    }
}

@media (min-width: 960px) {
    .items-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 380px) {
    .stats-overview {
        grid-template-columns: 1fr;
    }
    .summary-grid {
        grid-template-columns: 1fr;
    }
}