/*
 * Hand-written, always-rendered styles for custom admin UI.
 *
 * This project's panel CSS (public/css/filament/filament/app.css) is a
 * static Tailwind build with no build step available on this host (no
 * node/npm). Any Tailwind utility class used in a blade file that wasn't
 * already present in the codebase at the time that CSS was built has no
 * effect at all — it silently renders as an unstyled/unlaid-out element.
 * Rules here are plain CSS, so they always apply regardless of that build.
 */

.shortage-row--unfulfilled {
    background: #fef2f2;
}
:root[data-theme="dark"] .shortage-row--unfulfilled, .dark .shortage-row--unfulfilled {
    background: rgba(220, 38, 38, .12);
}

.app-stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.app-stat-card {
    flex: 1 1 150px;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .06);
}
.app-stat-card-value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}
.app-stat-card-label {
    font-size: 0.75rem;
    color: #6b7280;
}
.app-stat-card--success { background: #f0fdf4; border-color: rgba(22, 163, 74, .15); }
.app-stat-card--success .app-stat-card-value { color: #15803d; }
.app-stat-card--success .app-stat-card-label { color: #16a34a; }
.app-stat-card--info { background: #eff6ff; border-color: rgba(37, 99, 235, .15); }
.app-stat-card--info .app-stat-card-value { color: #1d4ed8; }
.app-stat-card--info .app-stat-card-label { color: #2563eb; }
.app-stat-card--danger { background: #fef2f2; border-color: rgba(220, 38, 38, .15); }
.app-stat-card--danger .app-stat-card-value { color: #b91c1c; }
.app-stat-card--danger .app-stat-card-label { color: #dc2626; }
.app-stat-card--warning { background: #fffbeb; border-color: rgba(217, 119, 6, .15); }
.app-stat-card--warning .app-stat-card-value { color: #b45309; }
.app-stat-card--warning .app-stat-card-label { color: #d97706; }

.app-warning-banner {
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: 0.875rem;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, .15);
    margin-bottom: 1rem;
}

:root[data-theme="dark"] .app-stat-card, .dark .app-stat-card { background: #1f2937; border-color: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .app-stat-card--info, .dark .app-stat-card--info { background: rgba(37, 99, 235, .1); }
:root[data-theme="dark"] .app-stat-card--danger, .dark .app-stat-card--danger { background: rgba(220, 38, 38, .1); }
:root[data-theme="dark"] .app-stat-card--success, .dark .app-stat-card--success { background: rgba(22, 163, 74, .1); }
:root[data-theme="dark"] .app-stat-card--warning, .dark .app-stat-card--warning { background: rgba(217, 119, 6, .1); }
:root[data-theme="dark"] .app-warning-banner, .dark .app-warning-banner { background: rgba(217, 119, 6, .1); color: #fbbf24; }

.app-simple-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.app-simple-table th, .app-simple-table td { padding: 0.5rem 0.75rem; text-align: start; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.app-simple-table th { font-weight: 600; color: #6b7280; }
.app-simple-table-wrap { overflow-x: auto; }
:root[data-theme="dark"] .app-simple-table th, .dark .app-simple-table th { color: #9ca3af; }
:root[data-theme="dark"] .app-simple-table th, :root[data-theme="dark"] .app-simple-table td,
.dark .app-simple-table th, .dark .app-simple-table td { border-bottom-color: rgba(255, 255, 255, .08); }

.app-hero-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    background: #f0fdf4;
    border: 1px solid rgba(22, 163, 74, .15);
    margin-bottom: 0.75rem;
}
.app-hero-card--danger { background: #fef2f2; border-color: rgba(220, 38, 38, .15); }
.app-hero-card-label { font-size: 0.875rem; color: #6b7280; margin-bottom: 0.25rem; }
.app-hero-card-value { font-size: 2.25rem; font-weight: 700; line-height: 1.2; color: #15803d; }
.app-hero-card--danger .app-hero-card-value { color: #b91c1c; }
.app-hero-card-sub { font-size: 0.875rem; color: #16a34a; margin-top: 0.25rem; }
.app-hero-card--danger .app-hero-card-sub { color: #dc2626; }

:root[data-theme="dark"] .app-hero-card, .dark .app-hero-card { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .2); }
:root[data-theme="dark"] .app-hero-card--danger, .dark .app-hero-card--danger { background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .2); }
:root[data-theme="dark"] .app-hero-card-label, .dark .app-hero-card-label { color: #9ca3af; }

.app-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #6b7280;
    background: #f9fafb;
    border: 1px dashed rgba(0, 0, 0, .12);
    border-radius: 0.75rem;
}
.app-empty-state svg { width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; color: #9ca3af; }
:root[data-theme="dark"] .app-empty-state, .dark .app-empty-state { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); color: #9ca3af; }

.app-split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .app-split-layout { grid-template-columns: minmax(280px, 380px) 1fr; }
    /* Desktop: form and result sit side by side, so the result panel can
       follow the page as a long multi-product form is filled in — bounded
       to the viewport height (and independently scrollable past that) so
       it can never overflow the screen or fight with the page's own
       scroll at the top/bottom edges. */
    .app-split-layout > *:last-child {
        position: sticky;
        top: 1rem;
        align-self: start;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}
.app-split-layout > * { min-width: 0; }

/* Mobile/narrow screens: the split layout stacks into a single column
   (form above, result below), so a sticky result panel would sit unseen
   below a long form instead of actually following the page. A compact bar
   fixed to the bottom of the screen stays visible the whole time instead —
   tapping it jumps straight down to the full breakdown. */
.app-mobile-summary-bar { display: none; }
@media (max-width: 1023px) {
    .app-split-layout { padding-bottom: 4.5rem; }
    .app-mobile-summary-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        z-index: 30;
        padding: 0.75rem 1.125rem;
        border-radius: 0.75rem;
        background: #15803d;
        color: #fff;
        font-weight: 600;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
        cursor: pointer;
        border: none;
        width: 100%;
        font-family: inherit;
        text-align: start;
    }
    .app-mobile-summary-bar--empty { background: #4b5563; }
    .app-mobile-summary-bar--danger { background: #b91c1c; }
    .app-mobile-summary-bar-label { font-size: 0.75rem; font-weight: 400; opacity: 0.85; }
    .app-mobile-summary-bar-value { font-size: 1.0625rem; }
}

.app-inline-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid rgba(22, 163, 74, .15);
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
    margin-top: 0.25rem;
}
:root[data-theme="dark"] .app-inline-hint, .dark .app-inline-hint {
    color: #4ade80;
    background: rgba(22, 163, 74, .1);
    border-color: rgba(22, 163, 74, .2);
}

.app-compact-toggle {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.app-compact-toggle label { white-space: nowrap; }

.app-details {
    font-size: 0.875rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}
.app-details summary { cursor: pointer; font-weight: 600; color: #6b7280; }
.app-details[open] summary { margin-bottom: 0.5rem; }
:root[data-theme="dark"] .app-details, .dark .app-details { border-color: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .app-details summary, .dark .app-details summary { color: #9ca3af; }

/*
 * "اي مربع رقم ابعد الاسهم الي فيه لان سالم لما يكتب رقم وينزل بعجلة
 * الماوس بغير قصد تتغير الكمية وما ينتبه... في النظام كامل" (2026-09-26)
 * — every number input, everywhere: hides the native up/down spinner
 * arrows (the scroll-wheel-changes-the-value behavior itself is stopped
 * separately in js/app-custom.js, since that's not something CSS alone
 * can prevent).
 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/*
 * "سوي شيء اوضح واسهل من كذا" (2026-09-30) — the monthly نون sales report
 * (NoonInvoiceBuilderPage) started as one dense 8-column table, which the
 * owner said showed "كثر أرقام/أعمدة بنظرة واحدة" (too many numbers/
 * columns at a glance). Replaced with one card per month showing only the
 * two numbers that matter at a glance (sales, net due) — everything else
 * lives behind "التفاصيل".
 */
.app-month-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.app-month-card {
    flex: 1 1 220px;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .06);
    cursor: pointer;
}
.app-month-card--active {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}
.app-month-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.625rem;
}
.app-month-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
.app-month-card-label {
    font-size: 0.75rem;
    color: #6b7280;
}
.app-month-card-value {
    font-size: 1.0625rem;
    font-weight: 700;
}
.app-month-card-value--accent {
    color: #1d4ed8;
}
.app-month-card-footer {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px dashed rgba(0, 0, 0, .1);
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
:root[data-theme="dark"] .app-month-card, .dark .app-month-card { background: #1f2937; border-color: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .app-month-card--active, .dark .app-month-card--active { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, .2); }
:root[data-theme="dark"] .app-month-card-label, .dark .app-month-card-label { color: #9ca3af; }
:root[data-theme="dark"] .app-month-card-value--accent, .dark .app-month-card-value--accent { color: #60a5fa; }
:root[data-theme="dark"] .app-month-card-footer, .dark .app-month-card-footer { color: #9ca3af; border-top-color: rgba(255, 255, 255, .1); }