/* Sarrafi System v3 - Offline Ready */
:root {
    --primary:#1a3a5c; --primary-l:#2563a8;
    --accent:#c8970a;  --accent-l:#f0b429;
    --success:#0d7a4e; --danger:#c0392b;
    --warning:#d68910; --info:#1565a8;
    --bg:#f0f4f8; --surface:#fff;
    --border:#d0dbe8; --text:#1a2535; --muted:#6b7c93;
    --sw:250px; --hh:58px; --r:10px;
    --shadow:0 2px 12px rgba(26,58,92,.09);
    --shadow-lg:0 8px 32px rgba(26,58,92,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Tahoma,'Segoe UI',Arial,sans-serif;font-size:14px;line-height:1.7}
html[dir="rtl"] body{font-family:'B Nazanin','Segoe UI',Tahoma,Arial,sans-serif}
a{text-decoration:none;color:inherit}

/* === LAYOUT === */
.app-layout{display:flex;min-height:100vh;flex-direction:row}
html[dir="rtl"] .app-layout{flex-direction:row-reverse}

/* === SIDEBAR === */
.sidebar{
    width:var(--sw);background:var(--primary);color:#fff;
    display:flex;flex-direction:column;
    position:fixed;top:0;bottom:0;z-index:300;
    overflow-y:auto;overflow-x:hidden;
    transition:width .25s ease;
}
html[dir="rtl"] .sidebar{right:0}
html[dir="ltr"] .sidebar{left:0}

.sidebar-logo{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:40px;height:40px;background:var(--accent);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.logo-text{font-size:13px;font-weight:700;line-height:1.3}
.logo-sub{font-size:10px;opacity:.5}
.sidebar-nav{flex:1;padding:6px 0 12px}
.nav-section{padding:10px 16px 3px;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;opacity:.4;font-family:'Segoe UI',Arial,sans-serif}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 16px;color:rgba(255,255,255,.75);font-size:13px;cursor:pointer;transition:all .15s;border-right:3px solid transparent;white-space:nowrap;overflow:hidden}
html[dir="ltr"] .nav-item{border-right:none;border-left:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:rgba(200,151,10,.18);color:var(--accent-l);border-color:var(--accent)}
.nav-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;flex-shrink:0}

/* === MAIN === */
.main-content{flex:1;min-height:100vh;min-width:0;display:flex;flex-direction:column;transition:margin .25s ease}
/* margins set in responsive section below */

/* === TOPBAR === */
.topbar{height:var(--hh);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:100;box-shadow:0 1px 6px rgba(26,58,92,.07)}
.topbar-title{font-size:15px;font-weight:700;color:var(--primary)}
.topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.toggle-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:4px 7px;border-radius:7px;color:var(--primary);transition:background .15s;line-height:1}
.toggle-btn:hover{background:var(--bg)}

.lang-btn{padding:4px 10px;border:1.5px solid var(--primary-l);border-radius:16px;color:var(--primary-l);font-size:11px;cursor:pointer;background:transparent;transition:all .15s;font-weight:600}
.lang-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.user-badge{display:flex;align-items:center;gap:5px;background:var(--bg);padding:4px 10px;border-radius:16px;font-size:12px;white-space:nowrap}

/* === PAGE === */
.page-content{flex:1;padding:20px;min-width:0;overflow-x:clip}

/* === PAGE GRID - form left, list right === */
.page-grid{display:grid;grid-template-columns:minmax(280px,320px) 1fr;gap:18px;align-items:start;min-width:0}

/* === STATS === */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:var(--surface);border-radius:var(--r);padding:16px 14px;box-shadow:var(--shadow);border-top:4px solid var(--primary);display:flex;align-items:center;gap:12px;transition:transform .15s}
.stat-card:hover{transform:translateY(-2px)}
.stat-card.accent{border-top-color:var(--accent)}
.stat-card.success{border-top-color:var(--success)}
.stat-card.danger{border-top-color:var(--danger)}
.stat-card.info{border-top-color:var(--info)}
.stat-card.warning{border-top-color:var(--warning)}
.stat-icon{width:44px;height:44px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.stat-value{font-size:20px;font-weight:800;color:var(--primary);line-height:1;font-family:'Courier New',monospace}
.stat-label{font-size:11px;color:var(--muted);margin-top:3px}
.stat-currency{font-size:11px;color:var(--accent);font-weight:600}

/* === CARDS === */
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.card-header{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f8fafc,#eef2f7);flex-wrap:wrap;gap:8px}
.card-title{font-size:14px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card-body{padding:18px}

/* === TABLES === */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;display:block}
/* When table-wrap is directly inside card (no card-body wrapper), give it border-radius */
.card>.table-wrap,.card>div>.table-wrap{border-radius:0 0 var(--r) var(--r)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--primary);color:#fff;padding:10px 12px;font-size:12px;font-weight:600;white-space:nowrap}
html[dir="rtl"] thead th{text-align:right}
html[dir="ltr"] thead th{text-align:left}
tbody td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
tbody tr:hover{background:#f5f8fd}
tbody tr:last-child td{border-bottom:none}

/* === FORMS === */
.form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.form-group label{font-size:12px;font-weight:700;color:var(--text)}
.form-control{padding:8px 11px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;color:var(--text);background:#fff;transition:border-color .15s,box-shadow .15s;font-family:inherit;width:100%}
.form-control:focus{outline:none;border-color:var(--primary-l);box-shadow:0 0 0 3px rgba(37,99,168,.1)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:65px}
input[type="number"].form-control{direction:ltr;text-align:left}

/* === BUTTONS === */
.btn{padding:8px 16px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;font-family:inherit;white-space:nowrap;justify-content:center}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-l)}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:var(--accent-l);color:var(--primary)}
.btn-success{background:var(--success);color:#fff}.btn-success:hover{opacity:.88}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{opacity:.88}
.btn-warning{background:var(--warning);color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text)}.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:#f0f4f8}
.btn-sm{padding:4px 10px;font-size:11px;border-radius:6px}
.btn-lg{padding:12px 24px;font-size:15px}

/* === BADGES === */
.badge{display:inline-block;padding:2px 8px;border-radius:16px;font-size:10px;font-weight:700}
.badge-success{background:#d4edda;color:var(--success)}
.badge-danger{background:#fde8e8;color:var(--danger)}
.badge-warning{background:#fff3cd;color:var(--warning)}
.badge-info{background:#d1ecf1;color:var(--info)}
.badge-primary{background:#d6e4f7;color:var(--primary)}

/* === ALERTS === */
.alert{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:13px;display:flex;align-items:flex-start;gap:8px}
.alert-success{background:#d4edda;color:var(--success);border-right:4px solid var(--success)}
.alert-danger{background:#fde8e8;color:var(--danger);border-right:4px solid var(--danger)}
.alert-warning{background:#fff3cd;color:var(--warning);border-right:4px solid var(--warning)}
html[dir="ltr"] .alert-success{border-right:none;border-left:4px solid var(--success)}
html[dir="ltr"] .alert-danger{border-right:none;border-left:4px solid var(--danger)}

/* === KHATA === */
.amount-cr{color:var(--success);font-weight:700}
.amount-dr{color:var(--danger);font-weight:700}
.bal-pos{color:var(--success);font-weight:800}
.bal-neg{color:var(--danger);font-weight:800}
.bal-zero{color:var(--muted)}
.num{font-family:'Courier New',monospace;direction:ltr;display:inline-block}

/* === RATE BOARD === */
.rate-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}
.rate-card{background:var(--surface);border-radius:10px;padding:13px;text-align:center;border:1px solid var(--border);transition:all .15s}
.rate-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(200,151,10,.15)}
.currency-code{font-size:17px;font-weight:800;color:var(--primary);font-family:'Courier New',monospace}
.rate-buy{color:var(--success);font-size:12px;margin-top:6px}
.rate-sell{color:var(--danger);font-size:12px}
.rate-val{font-weight:700;font-family:'Courier New',monospace}

/* === ROZNAMCHA TABS === */
.roz-tabs{display:flex;margin-bottom:18px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.roz-tab{flex:1;padding:13px 8px;text-align:center;background:var(--surface);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;border:none;text-decoration:none;transition:all .15s;border-bottom:3px solid transparent}
.roz-tab:hover{background:#f0f4f8;color:var(--primary)}
.roz-tab.active{background:var(--primary);color:#fff;border-bottom-color:var(--accent)}
.roz-tab .tab-icon{font-size:18px;display:block;margin-bottom:2px}

/* === MODAL === */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;align-items:center;justify-content:center;padding:14px}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:13px;padding:26px;width:100%;max-width:500px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative}
.modal-close{position:absolute;top:11px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);padding:3px}
html[dir="rtl"] .modal-close{left:11px}
html[dir="ltr"] .modal-close{right:11px}

/* === LOGIN === */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),#0f2644);padding:18px}
.login-box{background:#fff;border-radius:14px;padding:38px 34px;width:100%;max-width:390px;box-shadow:0 20px 60px rgba(0,0,0,.3)}

/* ════════════════════════════════════════════
   RESPONSIVE LAYOUT  — single source of truth
   ════════════════════════════════════════════ */

/* ── Desktop (>768 px): sidebar fixed, main-content offset ── */
@media (min-width: 769px) {
    .sidebar {
        position: fixed; top: 0; bottom: 0; z-index: 300;
        width: var(--sw);
        transition: width .25s ease;
        overflow-x: hidden;
        overflow-y: auto;
    }
    html[dir="rtl"] .sidebar { right: 0; left: auto; }
    html[dir="ltr"] .sidebar { left:  0; right: auto; }

    .main-content {
        transition: margin .25s ease;
    }
    html[dir="rtl"] .main-content { margin-right: var(--sw); margin-left: 0; }
    html[dir="ltr"] .main-content { margin-left:  var(--sw); margin-right: 0; }

    /* Sidebar collapsed → width 0, main-content fills full width */
    .sidebar.sb-hidden { width: 0 !important; }
    html[dir="rtl"] .main-content.sb-expanded { margin-right: 0 !important; }
    html[dir="ltr"] .main-content.sb-expanded { margin-left:  0 !important; }

    /* page-grid: form col + list col */
    .page-grid { grid-template-columns: minmax(260px,320px) 1fr; }
    html[dir="ltr"] .page-grid > div:first-child { position: sticky; top: calc(var(--hh) + 14px); }
    html[dir="rtl"] .page-grid > div:first-child { position: static; }
}

/* ── Mobile (≤768 px): sidebar overlays, NO margin on main-content ── */
@media (max-width: 768px) {
    /* Sidebar off-screen by default */
    html[dir="rtl"] .sidebar {
        position: fixed; top: 0; bottom: 0; z-index: 300;
        width: var(--sw) !important;
        right: 0; left: auto;
        transform: translateX(110%);
        transition: transform .28s ease;
        overflow-y: auto;
    }
    html[dir="ltr"] .sidebar {
        position: fixed; top: 0; bottom: 0; z-index: 300;
        width: var(--sw) !important;
        left: 0; right: auto;
        transform: translateX(-110%);
        transition: transform .28s ease;
        overflow-y: auto;
    }
    /* Sidebar open */
    .sidebar.sb-open {
        transform: translateX(0) !important;
    }
    /* main-content: NO margin, full width */
    .main-content {
        margin-right: 0 !important;
        margin-left:  0 !important;
        width: 100%;
    }
    /* Backdrop */
    .sb-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 299; cursor: pointer;
    }
    .sb-overlay.active { display: block; }

    /* Page layout */
    .page-content  { padding: 12px; }
    .page-grid     { grid-template-columns: 1fr !important; }
    .card-body     { padding: 14px; }
    .topbar        { padding: 0 10px; }
    .user-name-hide{ display: none; }

    /* Stats: 2 columns on mobile */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card  { min-width: 0; overflow: hidden; }
    .stat-value { font-size: 18px; }

    /* Roznamcha tabs */
    .roz-tab { font-size: 12px; padding: 10px 4px; }
    .roz-tab .tab-icon { font-size: 16px; }
}

@media (max-width: 420px) {
    .stats-grid { grid-template-columns: 1fr; }
}

/* ── Detail pages: 1-col mobile, 2-col desktop ── */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 640px) {
    .detail-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile card-table (hawala list) ── */
@media (max-width: 768px) {
    .mobile-card-table thead          { display: none; }
    .mobile-card-table,
    .mobile-card-table tbody          { display: block; }
    .mobile-card-table tr {
        display: block;
        background: var(--surface);
        border-radius: 10px;
        box-shadow: var(--shadow);
        margin-bottom: 12px;
        padding: 10px 14px;
        border-right: 4px solid var(--primary);
    }
    html[dir="ltr"] .mobile-card-table tr {
        border-right: none; border-left: 4px solid var(--primary);
    }
    .mobile-card-table tr.pending-row { border-color: var(--warning) !important; }
    .mobile-card-table td {
        display: flex; justify-content: space-between;
        align-items: center; padding: 5px 0;
        border-bottom: 1px solid var(--border); font-size: 13px;
    }
    .mobile-card-table td:last-child  { border-bottom: none; }
    .mobile-card-table td::before {
        content: attr(data-label);
        font-size: 11px; color: var(--muted); font-weight: 600;
        flex: 0 0 80px; margin-left: 8px;
    }
    html[dir="ltr"] .mobile-card-table td::before { margin-left: 0; margin-right: 8px; }
    .mobile-card-table { min-width: unset !important; }
}

/* ── Misc ── */
.lang-btn      { min-width: 72px; text-align: center; }
.filter-label  { font-size: 11px; color: var(--muted); font-weight: 600; display: block; margin-bottom: 3px; }
.pagination    { display: flex; gap: 6px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }

/* ── Print ── */
@media print {
    /* ══ رنګ تثبیت — د ټولو عناصرو لپاره ══ */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* ══ د پرینټ لپاره نه ښکاریدونکي عناصر ══ */
    .sidebar,.topbar,.no-print,.btn,.roz-tabs,.pagination,
    .card:has(form),.filter-card { display: none !important; }
    .main-content { margin: 0 !important; width: 100% !important; }
    .page-content { padding: 0 !important; }
    .page-grid    { grid-template-columns: 1fr !important; }
    .page-grid > div:first-child { display: none; }
    .detail-grid  { grid-template-columns: 1fr 1fr; }

    /* ══ کارتونه: د غیرضروري blank صفحو مخنیوی ══ */
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 4px !important;
        /* د blank page مخنیوی: کارتونه کولای شي د صفحو ترمنځ وویشل شي */
        break-inside: auto;
        page-break-inside: auto;
    }
    .card + .card {
        break-before: auto;
        page-break-before: auto;
    }

    /* ══ جدول ══ */
    .table-wrap,
    [style*="overflow-x:auto"], [style*="overflow-x: auto"] {
        overflow: visible !important;
    }
    table { width: 100% !important; }

    /* د سرلیک تکرار د هر صفحه پر سر */
    thead { display: table-header-group; }
    /* tfoot یوازې یو ځل — د ټولو ریکارډونو وروسته، نه تکراریږي */
    tfoot { display: table-row-group; }

    /* قطارونه د منځه مه ماتوه */
    tr { break-inside: avoid; page-break-inside: avoid; }

    /* پټ قطارونه ښکاره کوو */
    tr.print-hidden { display: table-row !important; }

    /* ══ د thead رنګونه — #1a3a5c (var(--primary)) ══ */
    thead th {
        background: #1a3a5c !important;
        color: #fff !important;
        border: 1px solid #0d2540 !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    /* ══ د tfoot رنګونه — #1a3a5c ══ */
    tfoot tr {
        background: #1a3a5c !important;
        color: #fff !important;
    }
    tfoot tr td,
    tfoot tr th {
        background: #1a3a5c !important;
        color: #fff !important;
        border: 1px solid #0d2540 !important;
        font-weight: 700 !important;
    }
    /* د tfoot دننه رنګین spans */
    tfoot .num { color: inherit !important; }

    /* ══ د badge رنګونه — د ډیسپلې مطابق ══ */
    .badge-success { background: #d4edda !important; color: #0d7a4e !important; }
    .badge-danger  { background: #fde8e8 !important; color: #c0392b !important; }
    .badge-info    { background: #d1ecf1 !important; color: #1565a8 !important; }
    .badge-warning { background: #fff3cd !important; color: #d68910 !important; }
    .badge { display: inline-block !important; }

    /* ══ د CR/DR مقدار رنګونه ══ */
    .amount-cr { color: #0d7a4e !important; font-weight: 700 !important; }
    .amount-dr { color: #c0392b !important; font-weight: 700 !important; }

    /* ══ د توضیح متن بشپړ ښکاره کول ══ */
    .desc-cell  { max-width: none !important; white-space: normal !important; overflow: visible !important; }
    .desc-short { display: none !important; }
    .desc-full  { display: inline !important; white-space: normal; word-break: break-word; }
}


/* ── Tom Select dropdown fix: non-transparent background + z-index ── */
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #ced4da !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
  z-index: 9999 !important;
  position: absolute !important;
}
.ts-dropdown .option {
  background-color: #ffffff !important;
  color: #212529 !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .active {
  background-color: #e9f0ff !important;
  color: #1a3a5c !important;
}
.ts-wrapper {
  position: relative !important;
  z-index: 1 !important;
}
.ts-wrapper.focus {
  z-index: 9998 !important;
}
.ts-wrapper.form-control:not(.disabled) .ts-control,
.ts-wrapper.form-select:not(.disabled) .ts-control,
.ts-wrapper.form-control:not(.disabled).single.input-active .ts-control,
.ts-wrapper.form-select:not(.disabled).single.input-active .ts-control {
  background: #ffffff !important;
}