/* Our Daily Bread — shared look & feel */
:root {
    --bakery: #d4a373;
    --bakery-dark: #8b5e3c;
}

/* ---- Toasts ---- */
#toast-wrap {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(92vw, 24rem);
}
.toast {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background: #1f2937;
    color: #f9fafb;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast-success { background: #15803d; }
.toast-error { background: #b91c1c; }
.toast-info { background: #1f2937; }

/* ---- Skeleton loading ---- */
.skel {
    height: 0.9rem;
    border-radius: 0.375rem;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: skel 1.2s infinite;
}
.dark .skel {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}
@keyframes skel {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---- Wide tables: sticky first column ---- */
table.sticky-first thead th:first-child,
table.sticky-first tbody td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.06);
}
table.sticky-first thead th:first-child { z-index: 2; }

/* ---- Touch-friendly numeric inputs on entry pages ---- */
.entry-grid input[type="number"],
input.qty-input,
input.entry-num,
table input[type="number"] {
    min-height: 2.5rem;
    font-size: 1rem;
    padding: 0.5rem 0.6rem;
}

/* ---- Login polish ---- */
.login-card {
    animation: rise 0.35s ease;
}
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ---- Print: daily sheets print cleanly ---- */
@media print {
    nav, #theme-toggle, #mobile-menu-btn, button, .no-print { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    main { max-width: 100% !important; padding: 0 !important; }
    .dark { color-scheme: light; }
    table { font-size: 11px; }
}

/* ---- Nav dropdowns (hover on desktop, click everywhere) ---- */
@media (hover: hover) {
    [data-navdrop]:hover [data-navpanel] { display: block; }
}
[data-navpanel] a { white-space: nowrap; }

/* ---- Professional tables ---- */
table thead th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}
.dark table thead th { color: #9ca3af; }
table tbody tr { transition: background-color 0.15s ease; }
table tbody tr:hover { background-color: rgba(212, 163, 115, 0.08); }
.dark table tbody tr:hover { background-color: rgba(212, 163, 115, 0.12); }

/* ---- Consistent buttons ---- */
button.bg-amber-600, a.bg-amber-600,
button.bg-green-600, a.bg-green-600,
button.bg-blue-600, a.bg-blue-600,
button.bg-red-600, a.bg-red-600 {
    border-radius: 0.75rem;
    font-weight: 600;
    transition: transform 0.1s ease, filter 0.15s ease;
}
button.bg-amber-600:hover, a.bg-amber-600:hover { filter: brightness(1.05); }
button:active, a.button:active { transform: scale(0.98); }

/* ---- Filter bars & cards ---- */
.filter-bar {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.dark .filter-bar {
    background: #1f2937;
    border-color: rgba(55, 65, 81, 0.6);
}

/* ---- Focus states ---- */
input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(212, 163, 115, 0.5);
    outline-offset: 0;
    border-color: #d4a373;
}