@font-face {
    font-family: 'Jameel Noori Nastaleeq';
    src: url('fonts/jameel-noori-nastaleeq.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}

/* Noto Nastaliq Urdu is the fallback if the Jameel Noori Nastaleeq file above ever fails to load. */
@font-face {
    font-family: 'Noto Nastaliq Urdu';
    src: url('fonts/noto-nastaliq-urdu.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}

html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #f8f6f2;
}

/* Urdu mode: Nastaleeq font + right-to-left layout, toggled by wwwroot/js/language.js */
body.rtl-mode {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Segoe UI', system-ui, sans-serif;
}

body.rtl-mode .page-title,
body.rtl-mode h1, body.rtl-mode h2, body.rtl-mode h3,
body.rtl-mode h4, body.rtl-mode h5, body.rtl-mode h6 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Segoe UI', system-ui, sans-serif;
    line-height: 2;
}

a, .btn-link { color: #2d5016; }

.btn-primary {
    background-color: #2d5016;
    border-color: #2d5016;
}
.btn-primary:hover {
    background-color: #3e6b22;
    border-color: #3e6b22;
}

.btn-warning {
    background-color: #c4841d;
    border-color: #c4841d;
    color: #fff;
}
.btn-warning:hover {
    background-color: #a97018;
    border-color: #a97018;
    color: #fff;
}

.card {
    border: 1px solid #ddd6ca;
    border-radius: 6px;
}

.card-header {
    background-color: #f0ebe2;
    border-bottom: 1px solid #ddd6ca;
    font-weight: 600;
}

.table { font-variant-numeric: tabular-nums; }

.stat-card {
    background: #fff;
    border: 1px solid #ddd6ca;
    border-radius: 8px;
    padding: 1.2rem;
}
.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2d5016;
}
.stat-card .stat-label {
    font-size: 0.8rem;
    color: #8b8579;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c2a25;
    margin-bottom: 1.5rem;
}

.sidebar-nav .nav-link.active {
    background-color: rgba(196, 132, 29, 0.2) !important;
    color: #c4841d !important;
}

.sidebar-nav .nav-link:hover {
    background-color: rgba(255,255,255,0.08);
}

/* Responsive app shell: fixed sidebar on desktop, off-canvas drawer on mobile/tablet */
.app-main {
    margin-left: 240px;
    flex-grow: 1;
    background-color: #f8f6f2;
    min-height: 100vh;
    overflow-y: auto;
}

.mobile-topbar {
    background: #fff;
    border-bottom: 1px solid #ddd6ca;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1035;
}

@media (max-width: 991.98px) {
    .sidebar-nav {
        transform: translateX(-100%);
        transition: transform 0.2s ease-in-out;
        z-index: 1040;
    }
    .sidebar-nav.sidebar-open {
        transform: translateX(0);
    }
    .app-main {
        margin-left: 0;
    }
}

/* RTL (Urdu): sidebar lives on the visual right (Bootstrap's start-0 already flips there via
   dir=rtl), so app-main's margin and the mobile off-canvas slide direction need mirroring too -
   these are plain physical CSS, not Bootstrap logical utilities, so they don't flip on their own. */
body.rtl-mode .app-main {
    margin-left: 0;
    margin-right: 240px;
}
@media (max-width: 991.98px) {
    body.rtl-mode .app-main {
        margin-right: 0;
    }
    body.rtl-mode .sidebar-nav {
        transform: translateX(100%);
    }
    body.rtl-mode .sidebar-nav.sidebar-open {
        transform: translateX(0);
    }
}

.badge-arrived { background-color: #5b9bd5; }
.badge-processing { background-color: #c4841d; }
.badge-ready { background-color: #2d5016; }
.badge-sold { background-color: #6c757d; }

.form-control:focus, .form-select:focus {
    border-color: #2d5016;
    box-shadow: 0 0 0 0.15rem rgba(45,80,22,0.25);
}

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* Printable receipts/invoices (Payment Entry, etc.) */
.receipt-print {
    max-width: 480px;
    margin: 0 auto;
    border: 1px solid #ddd6ca;
}
.receipt-logo {
    width: 220px;
    max-width: 100%;
    object-fit: contain;
}
.receipt-table td {
    padding: 0.4rem 0.25rem;
    border-bottom: 1px dashed #e5e0d6;
}
.receipt-signature-line {
    border-top: 1px solid #8b8579;
    margin: 0 1.5rem 0.4rem;
}

/* Dashboard charts */
.chart-card {
    background: #fff;
    border: 1px solid #ddd6ca;
    border-radius: 8px;
    padding: 1.2rem;
    height: 100%;
}
.chart-legend, .chart-legend-item {
    font-size: 0.8rem;
    color: #55524a;
}
.chart-legend .legend-item + .legend-item { margin-inline-start: 0.75rem; }
.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-inline-end: 4px;
}

@media print {
    .sidebar-nav, #blazor-error-ui, .mobile-topbar { display: none !important; }
    main { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
    .receipt-print { border: none; max-width: 100%; }
}

/* A4 report layout (Farmer/Supplier Advance Details "Print Complete Record", and similar full-page
   printable records). Unlike .receipt-print (narrow slip receipts), this fills the page width. */
@page {
    size: A4;
    margin: 12mm;
}
.a4-print-header {
    text-align: center;
    margin-bottom: 1rem;
}
@media print {
    .a4-print-table th, .a4-print-table td { padding: 0.3rem 0.4rem; font-size: 12px; }
    .a4-print-table { border-collapse: collapse; }
    .a4-print-table th, .a4-print-table td { border: 1px solid #ccc; }
}

/* Blank space for handwriting into a printed A4 table cell (e.g. Village Recovery Sheet's
   "Received Amount" column) - unlike .receipt-signature-line, no horizontal margin, so it fills
   the cell instead of being squeezed by margins meant for a full-width receipt footer. */
.print-blank-cell {
    border-bottom: 1px solid #333;
    min-height: 1.4em;
}

/* Slim top progress bar for route navigation (RouteProgressBar.razor). Logical inset so it starts
   from the reading-direction edge correctly in both LTR and RTL. */
.route-progress {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 3px;
    width: 0;
    background: #2d5016;
    opacity: 0;
    z-index: 2000;
    transition: width 0.3s ease, opacity 0.2s ease;
    pointer-events: none;
}
.route-progress-active { width: 75%; opacity: 1; }
.route-progress-done { width: 100%; opacity: 1; transition: width 0.15s ease, opacity 0.3s ease 0.1s; }

/* Toast notifications (ToastContainer.razor). inset-inline-end keeps them in the top-right corner
   in LTR and top-left in RTL, matching where a reader's eye naturally lands first in each mode. */
.toast-stack {
    position: fixed;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(360px, calc(100vw - 2rem));
}
.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: #fff;
    animation: app-toast-in 0.2s ease-out;
}
.app-toast-success { background: #2d5016; }
.app-toast-error { background: #b32121; }
.app-toast-icon { margin-top: 0.15rem; flex-shrink: 0; }
.app-toast-text { flex-grow: 1; font-size: 0.9rem; line-height: 1.4; }
.app-toast-close {
    background: none;
    border: none;
    color: #fff;
    opacity: 0.8;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.app-toast-close:hover { opacity: 1; }
@keyframes app-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Lightweight "refreshing already-visible data" overlay for paged/filtered tables - covers only
   the table area (not the filter controls above it) and doesn't reflow the existing layout, unlike
   swapping rows for TableStatusRow's skeleton (which is reserved for the true first load). */
.table-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(248, 246, 242, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}