/* Styles propres à la page petit-déjeuner.
 * Les tokens et composants génériques viennent de style.css/Bootstrap.
 */

body:has(#breakfastApp) {
    margin: 0;
}

#breakfastApp {
    --breakfast-paper: var(--white);
    --breakfast-ink: var(--dark-gray);
    --breakfast-muted: #6c757d;
    --breakfast-line: #e1e5e2;
    --breakfast-accent: #49665b;
    --breakfast-accent-dark: #304f44;
    --breakfast-accent-soft: #e4eee8;
    --breakfast-warm-soft: #fff1e8;
    --breakfast-shadow: 0 16px 40px rgba(52, 58, 64, .09);

    min-height: 100vh;
    color: var(--breakfast-ink);
    background: var(--light-gray);
    font-family: inherit;
    text-shadow: none;
}

#breakfastApp *,
#breakfastApp *::before,
#breakfastApp *::after { box-sizing: border-box; }

#breakfastApp button,
#breakfastApp input { font: inherit; }

#breakfastApp button { cursor: pointer; }
#breakfastApp svg { display: block; }

#breakfastApp h1,
#breakfastApp h2,
#breakfastApp h3,
#breakfastApp p { color: inherit; text-shadow: none; }

#breakfastApp .container {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

#breakfastApp .breakfast-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(225, 229, 226, .9);
    backdrop-filter: blur(12px);
}

#breakfastApp .topbar-inner {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#breakfastApp .brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
#breakfastApp .brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: var(--breakfast-accent-dark);
    background: var(--breakfast-accent-soft);
    border-radius: .75rem;
}
#breakfastApp .brand-copy strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 17px;
    letter-spacing: -.02em;
}
#breakfastApp .brand-copy span { display: block; color: var(--breakfast-muted); font-size: 11px; margin-top: 1px; }
#breakfastApp .date-chip {
    color: var(--breakfast-accent-dark);
    background: var(--breakfast-warm-soft);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 12px;
    white-space: nowrap;
}
#breakfastApp .service-date {
    width: 118px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font-size: 12px;
    outline: none;
}

#breakfastApp .page { padding-top: 28px; padding-bottom: 40px; }
#breakfastApp .hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
#breakfastApp .eyebrow {
    color: var(--breakfast-accent);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 10px;
    font-weight: 800;
    margin: 0 0 7px;
}
#breakfastApp h1 {
    color: var(--breakfast-ink);
    font-family: Georgia, serif;
    font-size: clamp(29px, 5vw, 45px);
    letter-spacing: -.045em;
    line-height: 1;
    margin: 0 0 10px;
    font-weight: 500;
}
#breakfastApp .hero p:not(.eyebrow) { color: var(--breakfast-muted); font-size: 14px; margin-bottom: 0; }
#breakfastApp .service-note {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--breakfast-accent-dark);
    font-size: 12px;
    background: var(--breakfast-accent-soft);
    padding: 10px 12px;
    border-radius: .75rem;
    white-space: nowrap;
}
#breakfastApp .service-note svg { color: var(--breakfast-accent); }

#breakfastApp .section-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
#breakfastApp .section-label h2 { color: var(--breakfast-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .11em; margin: 0; }
#breakfastApp .section-label span { color: var(--breakfast-muted); font-size: 12px; }
#breakfastApp .rooms-scroll { overflow-x: auto; margin: 0 -20px 26px; padding: 0 20px 4px; scrollbar-width: none; }
#breakfastApp .rooms-scroll::-webkit-scrollbar { display: none; }
#breakfastApp .rooms { display: flex; gap: 10px; min-width: max-content; }
#breakfastApp .room {
    min-width: 145px;
    padding: 14px 14px 12px;
    text-align: left;
    color: var(--breakfast-ink);
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--breakfast-line);
    border-radius: 1rem;
    transition: .2s ease;
}
#breakfastApp .room:hover { transform: translateY(-1px); border-color: #b8cec1; }
#breakfastApp .room.active { background: var(--breakfast-paper); border-color: var(--breakfast-accent); box-shadow: 0 8px 22px rgba(73, 102, 91, .12); }
#breakfastApp .room-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#breakfastApp .room-number { font-size: 20px; font-weight: 750; letter-spacing: -.04em; }
#breakfastApp .room-name { display: block; color: var(--breakfast-muted); font-size: 12px; margin-top: 3px; }
#breakfastApp .room-count { display: block; color: var(--breakfast-accent-dark); font-size: 11px; margin-top: 13px; }
#breakfastApp .status-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--warning-color); }
#breakfastApp .status-dot.ready { background: var(--success-color); }
#breakfastApp .status-dot.empty { background: #d6d3cc; }

#breakfastApp .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 18px; align-items: start; }
#breakfastApp .breakfast-panel {
    background: var(--breakfast-paper);
    border: 1px solid var(--breakfast-line);
    border-radius: 1.25rem;
    box-shadow: var(--breakfast-shadow);
}
#breakfastApp .card.breakfast-panel:hover { transform: none; }
#breakfastApp .editor-panel { padding: 20px; }
#breakfastApp .selected-room { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--breakfast-line); }
#breakfastApp .room-kicker,
#breakfastApp .occupants,
#breakfastApp .ingredients-head span { color: var(--breakfast-muted); font-size: 12px; }
#breakfastApp .room-kicker { margin-bottom: 4px; }
#breakfastApp .selected-room h2 { color: var(--breakfast-ink); font-family: Georgia, serif; font-size: 28px; font-weight: 500; letter-spacing: -.035em; margin: 0 0 4px; }
#breakfastApp .guest-note { display: inline-flex; align-items: center; gap: 6px; color: #8c624a; background: var(--breakfast-warm-soft); border-radius: 999px; padding: 7px 10px; font-size: 11px; white-space: nowrap; }
#breakfastApp .ingredients-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0 10px; }
#breakfastApp .ingredients-head h3 { margin: 0; font-size: 15px; }
#breakfastApp .ingredient-list { display: grid; min-width: 0; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
#breakfastApp .ingredient-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 58px 32px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 10px;
    background: #fbfaf6;
    border: 1px solid transparent;
    border-radius: .875rem;
    transition: .2s ease;
}
#breakfastApp .ingredient-row:hover { background: var(--breakfast-paper); border-color: var(--breakfast-line); }
#breakfastApp .ingredient-row.inactive { opacity: .52; }
#breakfastApp .ingredient-icon { width: 30px; height: 30px; display: grid; place-items: center; background: var(--breakfast-accent-soft); border-radius: .625rem; font-size: 16px; }
#breakfastApp .ingredient-row > div { min-width: 0; }
#breakfastApp .ingredient-name { display: block; overflow-wrap: anywhere; font-weight: 650; font-size: 13px; }

#breakfastApp .form-control { color: var(--breakfast-ink); background: var(--breakfast-paper); border: 1px solid var(--breakfast-line); border-radius: .375rem; box-shadow: none; }
#breakfastApp .form-control:focus { border-color: var(--breakfast-accent); box-shadow: 0 0 0 .2rem rgba(73, 102, 91, .14); }
#breakfastApp .quantity { width: 58px; padding: 8px 5px; text-align: center; font-weight: 700; font-size: 13px; }
#breakfastApp .unit { width: 42px; color: var(--breakfast-muted); font-size: 12px; }
#breakfastApp .remove { width: 30px; height: 30px; display: grid; place-items: center; color: #ad9d92; background: transparent; border: 0; border-radius: .5rem; }
#breakfastApp .remove:hover { color: #9a6250; background: var(--breakfast-warm-soft); }

#breakfastApp .ingredient-picker { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 10px; }
#breakfastApp .picker-label { color: var(--breakfast-muted); font-size: 12px; }
#breakfastApp .ingredient-select { min-width: 0; height: 38px; font-size: 13px; }
#breakfastApp .ingredient-picker button:disabled { opacity: .55; cursor: not-allowed; }

#breakfastApp .breakfast-primary { border: 1px solid transparent; border-radius: .625rem; padding: .5rem .75rem; font-size: 12px; font-weight: 700; }
#breakfastApp .breakfast-primary,
#breakfastApp .btn-primary.save-button { color: var(--white); background: var(--breakfast-accent); border-color: var(--breakfast-accent); }
#breakfastApp .breakfast-primary:hover,
#breakfastApp .btn-primary.save-button:hover { background: var(--breakfast-accent-dark); border-color: var(--breakfast-accent-dark); }

#breakfastApp .daily-summary-panel { margin-top: 18px; padding: 20px; }
#breakfastApp .daily-summary-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
#breakfastApp .daily-summary-head h2 { color: var(--breakfast-ink); font-family: Georgia, serif; font-size: 22px; font-weight: 500; margin: 0; }
#breakfastApp .daily-summary-count { color: var(--breakfast-accent-dark); background: var(--breakfast-accent-soft); border-radius: 999px; font-size: 11px; padding: 6px 9px; font-weight: 700; white-space: nowrap; }
#breakfastApp .daily-summary-table-wrap { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
#breakfastApp .daily-summary-table { width: 100%; min-width: 330px; table-layout: fixed; border-collapse: collapse; color: var(--breakfast-ink); font-size: 13px; }
#breakfastApp .daily-summary-table th,
#breakfastApp .daily-summary-table td { padding: 11px 12px; border-bottom: 1px solid var(--breakfast-line); text-align: left; overflow-wrap: anywhere; }
#breakfastApp .daily-summary-table thead th { color: var(--breakfast-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
#breakfastApp .daily-summary-table thead th:nth-child(1) { width: 40%; }
#breakfastApp .daily-summary-table thead th:nth-child(2) { width: 30%; }
#breakfastApp .daily-summary-table thead th:nth-child(3) { width: 30%; }
#breakfastApp .daily-summary-table tbody th { font-weight: 650; }
#breakfastApp .daily-summary-table td:nth-child(2),
#breakfastApp .daily-summary-table td:nth-child(3),
#breakfastApp .daily-summary-table thead th:nth-child(2),
#breakfastApp .daily-summary-table thead th:nth-child(3) { text-align: right; }
#breakfastApp .daily-summary-table tbody tr:last-child th,
#breakfastApp .daily-summary-table tbody tr:last-child td { border-bottom: 0; }
#breakfastApp .daily-summary-empty { margin: 0; }

#breakfastApp .summary-panel { position: sticky; top: 90px; padding: 20px; }
#breakfastApp .summary-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
#breakfastApp .summary-title h2 { color: var(--breakfast-ink); font-family: Georgia, serif; font-size: 22px; font-weight: 500; margin: 0; }
#breakfastApp .summary-badge { color: var(--breakfast-accent-dark); background: var(--breakfast-accent-soft); border-radius: 999px; font-size: 11px; padding: 6px 9px; font-weight: 700; }
#breakfastApp .summary-top { padding: 13px; background: var(--breakfast-warm-soft); border-radius: .875rem; margin-bottom: 16px; }
#breakfastApp .summary-top .label { color: #9a775e; font-size: 11px; }
#breakfastApp .summary-top strong { display: block; font-size: 21px; margin-top: 3px; letter-spacing: -.03em; }
#breakfastApp .summary-list { display: grid; gap: 11px; margin-bottom: 18px; }
#breakfastApp .summary-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; }
#breakfastApp .summary-line span:first-child { color: var(--breakfast-muted); }
#breakfastApp .summary-line strong { font-size: 13px; }
#breakfastApp .summary-divider { height: 1px; background: var(--breakfast-line); margin: 5px 0 15px; }
#breakfastApp .save-button { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 13px; border-radius: .75rem; font-weight: 750; font-size: 13px; }
#breakfastApp .saved-message { display: none; color: var(--breakfast-accent); text-align: center; font-size: 11px; margin: 10px 0 0; }
#breakfastApp .saved-message.show { display: block; }
#breakfastApp .empty-state,
#breakfastApp .empty-summary { color: var(--breakfast-muted); font-size: 13px; line-height: 1.45; text-align: center; background: #fbfaf6; border-radius: .875rem; }
#breakfastApp .empty-state { padding: 26px 12px; }
#breakfastApp .empty-summary { padding: 8px 0; text-align: left; background: transparent; font-size: 12px; }
#breakfastApp .summary-mobile { display: none; }

@media (max-width: 740px) {
    #breakfastApp .container { padding-left: 16px; padding-right: 16px; }
    #breakfastApp .topbar-inner { min-height: 62px; }
    #breakfastApp .brand-copy span { display: none; }
    #breakfastApp .date-chip { padding: 7px 9px; font-size: 11px; }
    #breakfastApp .page { padding-top: 22px; padding-bottom: 106px; }
    #breakfastApp .hero { display: block; margin-bottom: 21px; }
    #breakfastApp .hero p:not(.eyebrow) { max-width: 300px; line-height: 1.45; }
    #breakfastApp .service-note { display: inline-flex; margin-top: 14px; }
    #breakfastApp .rooms-scroll { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; margin-bottom: 20px; }
    #breakfastApp .room { min-width: 130px; padding: 12px; }
    #breakfastApp .workspace { display: block; }
    #breakfastApp .summary-panel { display: none; }
    #breakfastApp .editor-panel { padding: 16px; border-radius: 1.125rem; }
    #breakfastApp .selected-room h2 { font-size: 25px; }
    #breakfastApp .guest-note { max-width: 130px; white-space: normal; font-size: 10px; padding: 6px 8px; }
    #breakfastApp .ingredient-row { grid-template-columns: minmax(0, 1fr) 52px 30px; gap: 8px; padding: 10px 6px; }
    #breakfastApp .ingredient-row .quantity { grid-column: 2; grid-row: 1; justify-self: end; width: 52px; padding: 6px 3px; }
    #breakfastApp .ingredient-row .ingredient-icon { display: none; }
    #breakfastApp .ingredient-row > div { grid-column: 1; grid-row: 1; }
    #breakfastApp .ingredient-row .remove { grid-column: 3; grid-row: 1; }
    #breakfastApp .ingredient-picker { grid-template-columns: minmax(0, 1fr) auto; }
    #breakfastApp .picker-label { grid-column: 1 / -1; }
    #breakfastApp .daily-summary-panel { margin-top: 16px; padding: 16px; }
    #breakfastApp .daily-summary-head { align-items: flex-start; }
    #breakfastApp .summary-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; align-items: center; gap: 13px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .95); border-top: 1px solid var(--breakfast-line); box-shadow: 0 -10px 30px rgba(52, 58, 64, .08); }
    #breakfastApp .summary-mobile-copy { flex: 1; min-width: 0; }
    #breakfastApp .summary-mobile-copy span { display: block; color: var(--breakfast-muted); font-size: 10px; }
    #breakfastApp .summary-mobile-copy strong { font-size: 15px; }
    #breakfastApp .summary-mobile .save-button { width: auto; padding: 11px 14px; white-space: nowrap; }
}

@media (max-width: 380px) {
    #breakfastApp h1 { font-size: 30px; }
    #breakfastApp .date-chip { display: none; }
    #breakfastApp .selected-room { gap: 8px; }
}