/* ================================================================
   app.css — Shared styles extracted from inline style attributes
   ================================================================ */

/* ── Brand button classes (migrated from base.html <style>) ──── */
.btn-primary {
    display: inline-block;
    background-color: var(--color-primary, #4c2c92);
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn-primary:hover {
    background-color: color-mix(in srgb, var(--color-primary, #4c2c92), black 20%);
}
.btn-secondary {
    display: inline-block;
    background-color: var(--color-secondary, #002855);
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--color-secondary, #002855), black 20%);
}
.btn-accent {
    display: inline-block;
    background-color: var(--color-accent, #ffb81c);
    color: var(--color-secondary, #002855);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn-accent:hover {
    background-color: color-mix(in srgb, var(--color-accent, #ffb81c), black 10%);
}

/* ── Order choice badge colors (functional, not themed) ──────── */
.badge-full-meal { background-color: #4c2c92; color: white; }
.badge-milk-only { background-color: #ffb81c; color: #002855; }
.badge-no-order  { background-color: #e5e7eb; color: #6b7280; }

/* ── Card class (neutral border, not themed) ─────────────────── */
.card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 1.5rem;
    border: 1px solid #d4d0c8;
}

/* ── Accent border with transparency (replaces border-accent/30) */
.border-accent-subtle {
    border-color: color-mix(in srgb, var(--color-accent, #ffb81c), transparent 70%);
}

/* ── Order toggle buttons (order_month.html) ──────────────────── */
.active-btn {
    background-color: var(--color-primary, #4c2c92);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-weight: 500;
    border: 1px solid var(--color-primary, #4c2c92);
    cursor: pointer;
    transition: background-color 0.15s;
}
.inactive-btn {
    background-color: #f3f4f6;
    color: #374151;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-primary, #4c2c92);
    cursor: pointer;
    transition: background-color 0.15s;
}
.inactive-btn:hover {
    background-color: color-mix(in srgb, var(--color-primary, #4c2c92), white 80%);
    border-color: var(--color-primary, #4c2c92);
}
.inactive-btn-milk {
    background-color: #f3f4f6;
    color: #374151;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-accent, #ffb81c);
    cursor: pointer;
    transition: background-color 0.15s;
}
.inactive-btn-milk:hover {
    background-color: color-mix(in srgb, var(--color-accent, #ffb81c), white 70%);
    border-color: var(--color-accent, #ffb81c);
}
.active-btn-milk {
    background-color: var(--color-accent, #ffb81c);
    color: var(--color-secondary, #002855);
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-weight: 500;
    border: 1px solid var(--color-accent, #ffb81c);
    cursor: pointer;
    transition: background-color 0.15s;
}

/* ── Sticky summary bar (order_month.html) ────────────────────── */
.order-summary-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #d4d0c8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ── Wallet badge ─────────────────────────────────────────────── */
.wallet-badge {
    background-color: var(--color-primary, #4c2c92);
}

/* ── Warning / info banners ───────────────────────────────────── */
.banner-warning {
    background-color: #fffbeb;
    border-color: #fbbf24;
}
.banner-warning-text {
    color: #92400e;
}
.banner-admin-bypass {
    background-color: #fef3c7;
    border-color: #fbbf24;
    color: #92400e;
}
.banner-draft-restored {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

/* ── Borders using theme colors ───────────────────────────────── */
.border-khaki-dark {
    border-color: #d4d0c8;
}
.border-gray-light {
    border-color: #e5e7eb;
}
.border-gray-lightest {
    border-color: #f3f4f6;
}

/* ── Compound border shorthand ────────────────────────────────── */
.border-card {
    border: 1px solid #d4d0c8;
}

/* ── Text colors ──────────────────────────────────────────────── */
.text-heading {
    color: var(--color-secondary, #002855);
}
.text-darkgold {
    color: #b8860b;
}

/* ── Background colors ────────────────────────────────────────── */
.bg-khaki-subtle {
    background-color: #f9f8f5;
}
.bg-cell-empty {
    background-color: #faf8f3;
}
.bg-cell-nolunch {
    background-color: #f3f4f6;
}
.bg-cal-gap {
    background-color: #e5e7eb;
}

/* ── Button: success (green) ──────────────────────────────────── */
.btn-success {
    display: inline-block;
    background-color: #059669;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn-success:hover {
    background-color: #047857;
}

/* ── Button disabled state ────────────────────────────────────── */
.btn-disabled {
    background-color: var(--color-primary, #4c2c92);
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Top-up amount option (selected state) ────────────────────── */
.topup-option-selected {
    border-color: var(--color-primary, #4c2c92);
    color: var(--color-primary, #4c2c92);
}
.topup-option-unselected {
    border-color: #d1d5db;
}

/* ── Wallet page: low-balance badge ───────────────────────────── */
.wallet-low-badge {
    background-color: #f59e0b;
    color: #1a1a1a;
}

/* ── Quick-select outline buttons (order_month.html) ──────────── */
.outline-btn-primary {
    border-color: var(--color-primary, #4c2c92);
    color: var(--color-primary, #4c2c92);
}
.outline-btn-secondary {
    border-color: var(--color-secondary, #002855);
    color: var(--color-secondary, #002855);
}

/* ── Week separator text color ────────────────────────────────── */
.text-week-sep {
    color: #9ca3af;
}

/* ── CV bottom panel ──────────────────────────────────────────── */
.cv-bottom-panel {
    background-color: #f9fafb;
    border-color: #d4d0c8;
}

/* ── Demo controls section ────────────────────────────────────── */
.demo-header {
    background-color: #ffedd5;
    border-bottom: 1px solid #fed7aa;
}

/* ── Schedule builder_index / meal_library header row ─────────── */
.table-header-row {
    background-color: #f9f8f5;
    border-bottom: 1px solid #e5e7eb;
}

/* ── Meal library: expand row ─────────────────────────────────── */
.meal-expand-row {
    background-color: #faf8f3;
}

/* ── Alpine.js: hide elements before init ─────────────────────── */
[x-cloak] { display: none !important; }