/* =========================================================
   درزی شاپ — مینجمنٹ سسٹم  |  Premium UI theme (v5)
   RTL (Urdu). Solid colors only. Deep-teal + warm-amber.
   ========================================================= */

/* Urdu font: Jameel Noori Nastaleeq Kasheeda (used across the whole app). */
@font-face {
    font-family: 'Jameel Noori Nastaleeq Kasheeda';
    src: url('fonts/JameelNooriNastaleeqKasheeda.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand palette */
    --teal-900: #0b3b39;
    --teal-800: #0d504b;
    --teal-700: #0f766e;
    --teal-600: #12857c;
    --teal-500: #17a398;
    --teal-050: #e6f4f2;

    --amber-600: #d97706;
    --amber-500: #f59e0b;
    --amber-050: #fff7e6;

    /* Neutrals */
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-400: #94a3b8;
    --line: #e2e8f0;
    --line-2: #eef2f6;
    --bg: #f4f6f8;
    --card: #ffffff;

    /* Status */
    --green-600: #059669;
    --green-050: #e7f6ef;
    --blue-600: #2563eb;
    --blue-050: #e8f0fe;
    --red-600: #dc2626;
    --red-050: #fdeaea;

    --radius: 16px;
    --radius-sm: 11px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
    --shadow: 0 6px 18px rgba(15, 23, 42, .08);
    --shadow-lg: 0 20px 45px rgba(15, 23, 42, .18);
    --nav-h: 78px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink-900);
    font-family: 'Jameel Noori Nastaleeq Kasheeda', 'Noto Naskh Arabic', 'Noto Nastaliq Urdu', 'Segoe UI', Tahoma, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* ============ Header ============ */
.app-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--teal-700);
    color: #fff;
    box-shadow: 0 2px 14px rgba(11, 59, 57, .28);
}
/* Header row: brand on the start (right in RTL), settings gear on the end (left). */
.header-bar {
    max-width: 1080px;
    margin: 0 auto;
    padding: 15px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Settings (gear) icon button in the header. */
.header-settings {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-radius: 12px;
    text-decoration: none;
    transition: background .15s ease;
    flex: 0 0 auto;
}
.header-settings:hover { background: rgba(255, 255, 255, .28); }
.brand-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16);
    border-radius: 12px;
    font-size: 22px;
}
.brand-text { font-size: 20px; font-weight: 700; letter-spacing: .2px; }

/* ============ Main ============ */
.app-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 22px calc(var(--nav-h) + 34px);
}

.page-title {
    font-size: 27px;
    font-weight: 700;
    margin: 6px 0 4px;
    color: var(--teal-900);
}
.page-title::after {
    content: "";
    display: block;
    width: 54px; height: 4px;
    margin-top: 8px;
    background: var(--amber-500);
    border-radius: 4px;
}
.page-sub { color: var(--ink-500); margin: 0 0 20px; font-size: 15px; }

.section-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--teal-800);
    margin: 0 0 6px;
}

/* ============ Cards ============ */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px;
    margin-bottom: 20px;
}

/* ============ Buttons ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn span { font-size: 17px; line-height: 1; }

.btn-primary { background: var(--teal-700); color: #fff; }
.btn-primary:hover { background: var(--teal-800); }

.btn-success { background: var(--green-600); color: #fff; }
.btn-success:hover { background: #047857; }

.btn-secondary { background: #fff; color: var(--teal-800); border-color: var(--line); }
.btn-secondary:hover { background: var(--teal-050); border-color: var(--teal-500); }
/* v11: Danger button (Delete Receipt) */
.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-accent { background: var(--amber-500); color: #fff; }
.btn-accent:hover { background: var(--amber-600); }

.btn-sm { padding: 7px 13px; font-size: 13.5px; border-radius: 9px; }

/* ============ Forms ============ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-label { font-size: 14px; font-weight: 700; color: var(--ink-700); }
.form-input {
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 15.5px;
    color: var(--ink-900);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus {
    outline: none;
    border-color: var(--teal-500);
    box-shadow: 0 0 0 4px var(--teal-050);
}
.form-input[readonly] { background: #f8fafc; color: var(--ink-500); }
.form-actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }

.total-row .total-box {
    padding: 11px 14px;
    font-size: 20px;
    font-weight: 800;
    color: var(--teal-800);
    background: var(--teal-050);
    border: 1.5px dashed var(--teal-500);
    border-radius: var(--radius-sm);
}

/* ============ Search box ============ */
.search-box { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.mobile-input {
    flex: 1 1 240px;
    min-width: 200px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 17px;
    letter-spacing: .5px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}
.mobile-input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px var(--teal-050); }
.search-msg, .save-msg { margin-top: 12px; font-size: 14.5px; min-height: 20px; font-weight: 600; }
.save-msg.ok, .search-msg.ok { color: var(--green-600); }
.save-msg.error, .search-msg.error { color: var(--red-600); }

/* ============ Dashboard stats ============ */
.stats-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .12s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; top: 0; bottom: 0;
    width: 6px;
    background: var(--teal-500);
}
.stat-icon {
    width: 52px; height: 52px;
    flex: 0 0 52px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 25px;
    border-radius: 14px;
    background: var(--teal-050);
    color: var(--teal-700);
}
.stat-body { display: flex; flex-direction: column; }
.stat-value { font-size: 27px; font-weight: 800; color: var(--ink-900); line-height: 1.2; }
.stat-label { font-size: 14px; color: var(--ink-500); font-weight: 600; }

.stat-primary::before { background: var(--teal-600); }
.stat-primary .stat-icon { background: var(--teal-050); color: var(--teal-700); }
.stat-info::before { background: var(--blue-600); }
.stat-info .stat-icon { background: var(--blue-050); color: var(--blue-600); }
.stat-ready::before { background: var(--green-600); }
.stat-ready .stat-icon { background: var(--green-050); color: var(--green-600); }
.stat-accent::before { background: var(--amber-500); }
.stat-accent .stat-icon { background: #fdf1dc; color: var(--amber-600); }
.stat-accent2::before { background: var(--amber-600); }
.stat-accent2 .stat-icon { background: #fdf1dc; color: var(--amber-600); }
.stat-dark::before { background: var(--teal-900); }
.stat-dark .stat-icon { background: #e6efee; color: var(--teal-900); }

/* ============ Reporting ============ */
.report-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px;
}
.report-head { margin-bottom: 16px; }
.report-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    align-items: end;
    padding: 18px;
    background: var(--line-2);
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
}
.filter-row { display: flex; flex-direction: column; gap: 7px; }
.filter-actions { flex-direction: row; gap: 10px; flex-wrap: wrap; align-items: end; }

.report-area { margin-top: 6px; }
.report-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--ink-400);
    font-size: 15px;
    background: var(--line-2);
    border-radius: var(--radius-sm);
}
.report-empty.error { color: var(--red-600); background: var(--red-050); }
.report-summary {
    display: flex; flex-wrap: wrap; gap: 10px 24px;
    padding: 14px 16px;
    background: var(--teal-050);
    border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 600; color: var(--teal-900);
    margin-bottom: 14px;
}
.report-summary b { color: var(--teal-700); }

/* ============ Tables ============ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data-table thead th {
    background: var(--teal-700);
    color: #fff;
    padding: 12px 10px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.data-table tbody td {
    padding: 10px;
    text-align: center;
    border-top: 1px solid var(--line);
    color: var(--ink-700);
}
.data-table tbody tr:nth-child(even) { background: #f9fbfc; }
.data-table tbody tr:hover { background: var(--teal-050); }

/* ============ Badges / statuses ============ */
.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}
.st-progress { background: var(--blue-050); color: var(--blue-600); }
.st-ready { background: var(--green-050); color: var(--green-600); }
.st-received { background: #eef2f6; color: var(--ink-500); }

/* ============ Capture choice (Registration) ============ */
.capture-choice { padding-top: 22px; }
.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 26px 16px;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.choice-btn:hover {
    border-color: var(--teal-500);
    background: var(--teal-050);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.choice-icon {
    width: 66px; height: 66px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--teal-050);
    color: var(--teal-700);
    border-radius: 18px;
}
.choice-label { font-size: 16px; font-weight: 700; color: var(--ink-900); }
.choice-hint { font-size: 12.5px; color: var(--ink-400); font-weight: 600; margin-top: -4px; }

.reg-stage { margin-top: 20px; }
.capture-stage {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: #0b1220;
    border-radius: var(--radius);
    padding: 14px;
}
.cam-video, .cap-preview {
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius-sm);
    background: #000;
}
.cap-preview { border: 3px solid var(--teal-500); }
.capture-actions {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-top: 14px;
}
.file-pick { cursor: pointer; }

.reg-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ============ Modal ============ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px;
}
.modal-window {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 1000px;
    max-height: 96vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalIn .18s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-narrow { max-width: 460px; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    background: var(--teal-700);
    color: #fff;
}
.modal-title { font-size: 18px; font-weight: 700; }
.modal-close {
    background: rgba(255, 255, 255, .15);
    border: none; color: #fff;
    width: 34px; height: 34px;
    border-radius: 10px;
    font-size: 22px; line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.modal-close:hover { background: rgba(255, 255, 255, .3); }
.modal-body {
    padding: 22px;
    overflow-y: auto;
    /* v23: allow the body to shrink below its content inside the flex
       modal-window so overflow-y actually kicks in and the scrollbar shows. */
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 22px;
}
.modal-body-center { display: block; text-align: center; }

/* v22 (#3): single-column modal body (overrides the 2-col editor grid) so the
   dashboard OUTSTANDING list — with a وصولی box on every customer — is shown in
   full, never squeezed into a narrow column or clipped. */
.modal-body-block { display: block; }
.outstanding-list { display: flex; flex-direction: column; gap: 10px; }
.out-hint { font-size: 13px; color: var(--ink-500); margin: 2px 0 10px; }
.out-empty { text-align: center; padding: 20px; color: var(--ink-500); }
.out-empty.error { color: #dc2626; }
.out-card {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; background: #fff;
}
.out-card-info { min-width: 0; flex: 1 1 240px; }
.out-name { font-size: 16px; font-weight: 700; color: var(--ink-900); }
.out-mobile { font-size: 14px; color: var(--ink-500); direction: ltr; text-align: right; }
.out-amts { font-size: 14px; color: var(--ink-700, #334155); margin-top: 4px; }
.out-pending { color: #dc2626; font-weight: 800; }
.out-card-recv { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.out-card-recv .recv-inp { max-width: 150px; }

/* ============ v23: VISIBLE scrollbars inside modals/popups ============
   Modals scroll when their content is taller than the viewport, and the
   scrollbar is now VISIBLE (and cleanly styled) so users can see and use it
   to reach the full modal content. Applies to the modal body and every
   scrollable region inside a modal. */
.modal-body,
.modal-window,
.modal-body *,
.canvas-wrap,
.table-wrap,
.outstanding-list {
    scrollbar-width: thin;                 /* Firefox: show a slim scrollbar */
    scrollbar-color: var(--teal-500, #14b8a6) transparent; /* Firefox thumb/track */
    -ms-overflow-style: auto;              /* old Edge/IE: show scrollbar */
}
.modal-body::-webkit-scrollbar,
.modal-window::-webkit-scrollbar,
.modal-body *::-webkit-scrollbar,
.canvas-wrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.outstanding-list::-webkit-scrollbar {
    width: 10px;                           /* Chrome/Safari/Edge: visible */
    height: 10px;
}
.modal-body::-webkit-scrollbar-track,
.modal-window::-webkit-scrollbar-track,
.modal-body *::-webkit-scrollbar-track,
.canvas-wrap::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.outstanding-list::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, .06);
    border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb,
.modal-window::-webkit-scrollbar-thumb,
.modal-body *::-webkit-scrollbar-thumb,
.canvas-wrap::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.outstanding-list::-webkit-scrollbar-thumb {
    background: var(--teal-500, #14b8a6);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.modal-body::-webkit-scrollbar-thumb:hover,
.modal-window::-webkit-scrollbar-thumb:hover,
.modal-body *::-webkit-scrollbar-thumb:hover,
.canvas-wrap::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.outstanding-list::-webkit-scrollbar-thumb:hover {
    background: var(--teal-700, #0f766e);
    background-clip: content-box;
}

/* Editor toolbar */
.toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 12px;
    background: var(--line-2);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.tool-btn {
    padding: 8px 12px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
}
.tool-btn:hover { border-color: var(--teal-500); }
.tool-btn.active { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.tool-sep { width: 1px; height: 24px; background: var(--line); margin: 0 3px; }
.tool-label { font-size: 13.5px; font-weight: 700; color: var(--ink-500); }
.color-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px var(--line);
    cursor: pointer;
    padding: 0;
}
.color-btn:hover { transform: scale(1.12); }
#brushSize { accent-color: var(--teal-700); }
/* v11: Eraser size slider — red accent to distinguish from pen size */
#eraserSize { accent-color: #dc2626; width: 90px; cursor: pointer; }

.canvas-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: auto;
    max-height: 52vh;
    background: #f1f5f9;
    display: flex; justify-content: center;
    padding: 8px;
}
#receiptCanvas { max-width: 100%; touch-action: none; cursor: crosshair; background: #fff; border-radius: 6px; }
.editor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Barcode + customer detail cards (modal side) */
.qr-col { display: flex; flex-direction: column; gap: 16px; }
.barcode-card, .cust-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px;
    background: #fff;
}
.barcode-card { text-align: center; background: var(--teal-050); border-color: var(--teal-500); }
.barcode-title { font-size: 15px; font-weight: 700; color: var(--teal-800); margin-bottom: 10px; }
.barcode-box {
    display: flex; justify-content: center; align-items: center;
    background: #fff; border-radius: 10px; padding: 12px; min-height: 96px;
}
.barcode-box canvas { max-width: 100%; }
.barcode-sub { margin-top: 8px; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--ink-700); }
.barcode-note { margin-top: 8px; font-size: 12.5px; color: var(--ink-400); }

.cust-name-label { font-size: 15px; font-weight: 700; color: var(--teal-800); margin-bottom: 12px; }
.cust-card .form-row { margin-bottom: 10px; }
.cust-card .btn { margin-top: 6px; }

/* Scanner reader box */
.qr-reader {
    width: 100%;
    max-width: 360px;
    margin: 12px auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 3px solid var(--teal-500);
    background: #000;
}
.scan-actions { margin-top: 14px; }

/* ============ Orders page ============ */
.cust-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.cust-bar-info { display: flex; flex-direction: column; }
.cust-bar-name { font-size: 18px; font-weight: 700; color: var(--teal-900); }
.cust-bar-mobile { font-size: 14px; color: var(--ink-500); letter-spacing: .5px; }

.orders-area { margin-top: 4px; }
.orders-total {
    padding: 14px 18px;
    background: var(--teal-700);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 15.5px; font-weight: 600;
    margin-bottom: 16px;
}
.orders-total b { color: var(--amber-500); }
.no-orders {
    text-align: center;
    padding: 40px 16px;
    font-size: 18px; font-weight: 700;
    color: var(--ink-400);
    background: var(--card);
    border: 2px dashed var(--line);
    border-radius: var(--radius);
}
.order-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    margin-bottom: 16px;
    border-inline-start: 5px solid var(--teal-500);
}
.order-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.order-no { font-size: 17px; font-weight: 800; color: var(--teal-900); }
.order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
}
.order-grid > div { display: flex; flex-direction: column; }
.order-grid .lbl { font-size: 12.5px; color: var(--ink-400); font-weight: 600; }
.order-grid .vl { font-size: 15.5px; font-weight: 700; color: var(--ink-900); }
.pair-ids { margin: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pair-ids .lbl { font-size: 13px; color: var(--ink-500); font-weight: 700; margin-inline-end: 4px; }
.pair-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    background: var(--line-2); color: var(--ink-700);
}
.pair-chip.st-ready { background: var(--green-050); color: var(--green-600); }
.pair-chip.st-received { background: #eef2f6; color: var(--ink-500); }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ============ Bottom navigation (floating) ============ */
.bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 14px;
    z-index: 60;
    margin: 0 auto;
    width: calc(100% - 28px);
    max-width: 540px;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 8px 6px;
}
.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--ink-400);
    border-radius: 14px;
    transition: color .15s ease, background .15s ease;
}
.nav-item:hover { color: var(--teal-700); background: var(--teal-050); }
.nav-icon { display: inline-flex; }
.nav-label { font-size: 12px; font-weight: 700; }
.nav-item.active { color: #fff; background: var(--teal-700); }
.nav-item.active:hover { background: var(--teal-800); }

/* ============ Print helper ============ */
.print-area { display: none; }

/* ============ Responsive ============ */
@media (max-width: 860px) {
    .modal-body { grid-template-columns: 1fr; }
    .stats-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .brand-text { font-size: 17px; }
    .page-title { font-size: 23px; }
    .form-grid { grid-template-columns: 1fr; }
    /* v23: order-form grids collapse to a single column on phones too. */
    .form-grid.no-grid, .form-grid.price-grid { grid-template-columns: 1fr; }
    .choice-grid { grid-template-columns: 1fr; }
    .stats-panel { grid-template-columns: 1fr; }
    .search-box .btn { flex: 1; }
    .app-main { padding-inline: 16px; }
}

/* ============ Footer (all pages incl. login) ============ */
/* Uses the same design tokens so the theme is unchanged. The footer is pinned
   just ABOVE the floating bottom-nav so that when the page is fully scrolled
   down it stays visible and is never hidden behind / overlapped by the nav
   bar. --nav-h (78px) already accounts for the nav height + its 14px bottom
   offset, so placing the footer at that height clears the nav completely. */
.app-footer {
    position: fixed;
    inset-inline: 0;
    bottom: calc(var(--nav-h) + 6px);   /* sits just above the bottom-nav */
    z-index: 55;                          /* above content, below the nav (60) */
    text-align: center;
    padding: 8px 16px;
    color: var(--ink-500);
    font-size: 14px;
    background: transparent;
    pointer-events: none;                 /* let taps pass through empty area */
}
.app-footer a {
    color: var(--teal-700);
    text-decoration: none;
    font-weight: 600;
    pointer-events: auto;                 /* keep the link itself clickable */
}
.app-footer a:hover { text-decoration: underline; }

/* Reserve room at the bottom of scrollable content so the last items are never
   hidden behind the fixed footer + nav after a full scroll. */
.app-main { padding-bottom: calc(var(--nav-h) + 64px); }

/* Login page (standalone, no bottom-nav): the footer sits just above the very
   bottom edge instead of above a nav bar. */
.login-wrap { padding-bottom: 74px; }
.login-page .app-footer,
.login-wrap ~ .app-footer {
    bottom: 14px;
}

/* ============ Login screen (reuses existing card/form styles) ============ */
.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
}
.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 24px;
}

/* ============ Fabric.js editor canvas (object-based annotation) ============ */
/* Fabric wraps #receiptCanvas in a .canvas-container with absolutely-positioned
   inner canvases. Let the container drive layout; do NOT CSS-scale the inner
   canvas (that would desync pointer coordinates). Horizontal overflow is
   handled by .canvas-wrap { overflow:auto }. */
.canvas-wrap .canvas-container { margin: 0 auto; }
.canvas-wrap .canvas-container canvas { border-radius: 6px; }
/* Neutralise the legacy max-width scaling for the Fabric-managed canvas. */
.canvas-wrap .canvas-container #receiptCanvas,
.canvas-wrap .canvas-container .upper-canvas,
.canvas-wrap .canvas-container .lower-canvas { max-width: none; }

/* ============ v16: outstanding tile + price grid + preview modal ============ */
/* Outstanding (بقایا) dashboard tile — clickable. */
.stat-pending { cursor: pointer; }
.stat-pending::before { background: #e11d48; }
.stat-pending .stat-icon { background: #ffe4e6; color: #e11d48; }
.stat-pending:focus { outline: 2px solid #e11d48; outline-offset: 2px; }

/* Price-detail + payment grids on the order form. */
.price-title { margin-top: 18px; }
.price-grid { margin-top: 6px; }
.price-input { text-align: left; }
.pay-grid { margin-top: 10px; }
.pending-box { color: #be123c; }

/* ============ v23: Place-Order layout ============ */
/* New Order section — 3 boxes per row. */
.form-grid.no-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Detailed Prices section — 4 boxes per row. */
.form-grid.price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* تفصیل (tailor details) — a full-width, taller box than the others. */
.details-grid { margin-top: 16px; grid-template-columns: 1fr; }
.details-row { grid-column: 1 / -1; }
.details-input {
    min-height: 84px;
    resize: vertical;
    line-height: 1.7;
    padding: 12px 14px;
}

/* Tablet: relax to 2 per row so boxes never get too narrow. */
@media (max-width: 860px) {
    .form-grid.no-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid.price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ v20: RECEIVING (وصولی) UI ============ */
.recv-panel {
    margin: 12px 0;
    padding: 12px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
}
.recv-panel.prev-out {
    background: #fff7ed;
    border-color: #fed7aa;
}
.recv-summary { font-size: 15px; margin-bottom: 8px; }
.recv-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.recv-inp { max-width: 180px; text-align: left; }
.recv-cell { white-space: nowrap; }
.recv-cell .recv-inp { max-width: 110px; display: inline-block; margin-inline-end: 6px; }
.pending-amt { color: #be123c; }


/* v16: preview modal (registration edit gate). */
.preview-pic-wrap { text-align: center; margin-bottom: 12px; }
.preview-pic { max-width: 100%; max-height: 320px; border: 1px solid var(--line); border-radius: 10px; }
.preview-details { margin: 0 auto 12px; max-width: 420px; }
.preview-details .row { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 15px; }
.preview-details .row span { color: var(--ink-500); }
.preview-details .row b { color: var(--ink-900); }
.preview-actions { text-align: center; margin: 6px 0; }
.preview-hint { text-align: center; font-size: 13px; color: var(--ink-500); }

/* v16: crop tool cursor hint on the editor canvas. */
.canvas-wrap { position: relative; }

/* ============ v21: order-search per-order receiving + RED bakaya ============ */
/* Each order card gets its own وصولی (receive) box so a single order's balance
   can be collected independently; when it hits 0 the order auto-removes from
   the outstanding-only search. Delivered-but-owing orders show their بقایا in
   RED so it's obvious the order is only listed because of a pending balance. */
.order-recv {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--line);
}
.order-recv .recv-inp { max-width: 150px; }
.order-recv-label { font-size: 13.5px; font-weight: 700; color: var(--ink-500); }

/* بقایا in red — the plain amount and, more strongly, delivered orders. */
.pending-amt { color: #be123c; }
.pending-amt.owing { color: #dc2626; font-weight: 800; }
.order-card.delivered-owing { border-color: #fca5a5; }
.order-card.delivered-owing .pending-amt { color: #dc2626; font-weight: 800; }
.delivered-owing-note {
    display: inline-block; margin-top: 6px;
    font-size: 12.5px; font-weight: 700; color: #dc2626;
}

/* ============ v21: brand logo (header / footer / login / favicon) ============ */
.brand-logo {
    height: 40px; width: auto; display: block;
    object-fit: contain;
    -webkit-user-select: none; user-select: none;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-names { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name-ur { font-size: 17px; font-weight: 800; color: var(--ink-900); }
.brand-name-en { font-size: 12px; font-weight: 600; color: var(--ink-500); letter-spacing: .3px; }
.app-header .brand-name-ur, .app-header .brand-name-en { color: #fff; }
.app-header .brand-name-en { color: rgba(255,255,255,.82); }
.footer-logo { height: 22px; width: auto; vertical-align: middle; margin-inline-end: 6px; }
.login-logo { height: 64px; width: auto; display: block; margin: 0 auto 10px; object-fit: contain; }

/* ============ v24: ORDER EDIT + settlement UI ============
   Edit modal, live settlement banner (owes / refund / settled), per-card
   settlement chip, the «تمام آرڈرز» toggle and the edit-history list. Uses the
   existing design tokens only — solid colors, no gradients. */

/* «تمام آرڈرز دکھائیں» toggle under the search box */
.show-all-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 12px; font-size: 14px; color: var(--ink-700);
    cursor: pointer; user-select: none;
}
.show-all-toggle input { width: 17px; height: 17px; accent-color: var(--teal-700); cursor: pointer; }

/* Per-card settlement chip (owes / refund / settled) */
.settle-chip {
    display: inline-block; margin: 2px 0 12px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; border: 1px solid transparent;
}
.chip-owes    { background: var(--red-050);   color: var(--red-600);   border-color: #fca5a5; }
.chip-refund  { background: var(--amber-050); color: var(--amber-600); border-color: #fcd34d; }
.chip-settled { background: var(--green-050); color: var(--green-600); border-color: #86efac; }

/* Edit button already uses .btn-accent (amber) from the base theme */
.order-actions .btn-accent { order: -1; }   /* keep ترمیم first in the row */

/* ---- Edit modal ---- */
.ed-order-no { font-size: 15px; opacity: .85; font-weight: 600; }
.ed-intro { margin: 0 0 14px; }
.ed-grid, .ed-price-grid, .ed-pay-grid { margin-bottom: 6px; }

/* Live settlement banner inside the modal */
.settle-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    border: 1px solid transparent; margin: 4px 0 18px;
    font-size: 15.5px; font-weight: 700;
}
.settle-banner .settle-icon { font-size: 22px; line-height: 1; }
.settle-owes    { background: var(--red-050);   color: var(--red-600);   border-color: #fca5a5; }
.settle-refund  { background: var(--amber-050); color: var(--amber-600); border-color: #fcd34d; }
.settle-settled { background: var(--green-050); color: var(--green-600); border-color: #86efac; }
.settle-text { flex: 1; }

/* Modal action row */
.ed-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

/* Edit-history (audit) list */
.ed-log-wrap { margin-top: 18px; }
.ed-log { display: flex; flex-direction: column; gap: 8px; }
.ed-log-row {
    border: 1px solid var(--line); border-inline-start-width: 4px;
    border-radius: 10px; padding: 10px 12px; background: #fff;
}
.ed-log-row.log-owes    { border-inline-start-color: var(--red-600); }
.ed-log-row.log-refund  { border-inline-start-color: var(--amber-500); }
.ed-log-row.log-settled { border-inline-start-color: var(--green-600); }
.ed-log-at  { font-size: 12.5px; color: var(--ink-500); margin-bottom: 3px; direction: ltr; }
.ed-log-sum { font-size: 14px; color: var(--ink-900); line-height: 1.5; }

/* Keep the edit modal comfortable on phones */
@media (max-width: 640px) {
    .ed-actions { justify-content: stretch; }
    .ed-actions .btn { flex: 1; }
}

/* ============ v26 (#4): Place-order customer bar (under search box) ============
   Shows the found customer's registration receipt picture + name/mobile plus
   Print / Edit options, so the tailor can reprint or edit registration and keep
   working on the same order without re-searching the number. */
.cust-bar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 12px 0 4px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    flex-wrap: wrap;
}
/* v4 (#4): show the customer's registration receipt picture FULL / actual size
   (not a tiny thumbnail) so the tailor can read it right here. It takes the full
   width of the bar and shows at natural size, capped so the page stays usable. */
.cust-bar-pic {
    flex: 1 1 100%;
    width: 100%;
    max-height: 70vh;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6px;
}
.cust-bar-pic img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.cust-bar-info { flex: 1 1 auto; min-width: 120px; }
.cust-bar-name { font-size: 16px; font-weight: bold; color: #0f172a; }
.cust-bar-mobile { font-size: 14px; color: #475569; direction: ltr; text-align: right; }
.cust-bar-actions { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .cust-bar-actions { width: 100%; }
    .cust-bar-actions .btn { flex: 1; }
}

/* =========================================================
   v9 MULTI-REGISTRATION: receipt selection grid + cards.
   Shown when one customer (same first-11-digit mobile / Reg-ID / name)
   has multiple receipts; the tailor picks the exact one to edit/print.
   ========================================================= */
/* =========================================================
   multiModal overrides — ensure the receipt-list modal never
   uses the editor's 2-column grid layout, and that it scrolls
   correctly at any zoom level.
   ========================================================= */
#multiModal .modal-window {
    max-width: 700px;
    min-width: 320px;
    overflow: visible; /* let modal-body handle its own scroll */
}
#multiModal .modal-body {
    display: block;          /* override the 2-col editor grid */
    overflow-y: auto;
    max-height: calc(90vh - 80px); /* 80px ≈ modal-head height */
    padding: 16px 18px;
}

/* =========================================================
   Multi-Receipt Selection Grid — ROW layout (v10)
   Each receipt is a horizontal row:
     [thumbnail] | [info: name / mobile / ID / file] | [buttons]
   Zoom-safe: thumbnail and buttons have fixed min-widths so
   nothing gets cut off at any browser zoom level.
   ========================================================= */
.receipt-grid{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
    max-height:65vh;
    overflow-y:auto;
    overflow-x:hidden;
    padding:4px 2px;
    box-sizing:border-box;
}
/* One row per receipt */
.receipt-card{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
    border:1px solid #d9cfba;
    border-radius:8px;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
    padding:8px 10px;
    box-sizing:border-box;
    min-width:0;
    width:100%;
}
/* Thumbnail — fixed size, never shrinks */
.receipt-card .rc-img{
    flex:0 0 72px;
    width:72px;
    height:72px;
    object-fit:contain;
    background:#f2ede3;
    border:1px solid #e5dcc7;
    border-radius:6px;
}
/* Info block — takes remaining space, truncates gracefully */
.receipt-card .rc-body{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    overflow:hidden;
}
.receipt-card .rc-name{
    font-weight:700;
    color:#1f2937;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.receipt-card .rc-mobile{
    color:#334155;
    font-size:13px;
    direction:ltr;
    text-align:right;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.receipt-card .rc-reg{
    color:#0f766e;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}
.receipt-card .rc-file{
    color:#94a3b8;
    font-size:11px;
    direction:ltr;
    text-align:right;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* Action buttons — fixed column, never shrinks or wraps */
.receipt-card .rc-actions{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:90px;
}
.receipt-card .rc-actions .btn{
    width:100%;
    white-space:nowrap;
    text-align:center;
}
.btn.btn-sm{padding:5px 10px;font-size:13px;}
/* Modal window: ensure it never clips content at high zoom */
.modal-window{
    max-height:90vh;
    overflow-y:auto;
    box-sizing:border-box;
}

/* ===== v12: Eraser DOM overlay cursor (Windows Paint style square) ===== */
/* Positioned absolutely inside .canvas-wrap so it floats over the canvas. */
/* v13: Eraser square cursor — reparented into .canvas-container by JS so
   position:absolute is relative to the same box as upperCanvasEl.
   pointer-events:none ensures it never blocks canvas mouse events. */
#eraserCursor {
    display: none;
    position: absolute;
    pointer-events: none;       /* never blocks canvas mouse events */
    box-sizing: border-box;
    border: 1.5px solid #222;   /* dark outline — clearly visible on any bg */
    background: #ffffff;        /* white filled square — exactly like Windows Paint */
    z-index: 9999;
    border-radius: 0;           /* strictly square, no rounding */
    will-change: left, top;     /* GPU-composited: smooth movement */
    opacity: 0.85;              /* slight transparency so user can see erase position */
}

/* ===== v12: Separator between receipt-management and save/print buttons ===== */
.editor-actions-sep {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: #ccc;
    margin: 0 6px;
    vertical-align: middle;
}