/* ==========================================================================
   MIRAN SYSTEM — نظام التصميم الموحّد (v2)
   ألوان الهوية: كحلي الشعار + أحمر ميران كلون مميّز
   ========================================================================== */

:root{
  --font: "IBM Plex Sans Arabic", Tahoma, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --bg:        #f2f4f9;
  --surface:   #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eef1f8;
  --line:      #e2e6f0;
  --line-2:    #d3d9e7;
  --text:      #141a33;
  --text-2:    #3b4466;
  --muted:     #6b7493;

  --navy:      #16204a;
  --navy-2:    #1e2b5e;
  --brand:     #d7192a;          /* أحمر ميران */
  --brand-soft:#fde8ea;

  --primary:   #24388a;
  --primary-h: #1c2d73;
  --primary-soft:#e8ecfb;

  --success:   #12804a; --success-soft:#e3f5ea;
  --warning:   #b45309; --warning-soft:#fdf1e1;
  --danger:    #c81e1e; --danger-soft:#fde7e7;
  --info:      #1d63c9; --info-soft:#e5effc;

  --usd: #12804a; --usd-soft:#e3f5ea;
  --iqd: #1d4ed8; --iqd-soft:#e6ecfd;
  --eur: #a65d00; --eur-soft:#fdf0dc;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(20,26,51,.06);
  --shadow:    0 1px 2px rgba(20,26,51,.05), 0 6px 20px -8px rgba(20,26,51,.12);
  --shadow-lg: 0 20px 50px -12px rgba(20,26,51,.28);

  --sidebar-w: 256px;
  --topbar-h: 64px;
  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg:        #0a0f1f;
  --surface:   #111830;
  --surface-2: #161f3a;
  --surface-3: #1c2647;
  --line:      #243055;
  --line-2:    #2e3b66;
  --text:      #e9edf7;
  --text-2:    #c2c9de;
  --muted:     #8b95b6;

  --navy:      #0c1228;
  --navy-2:    #141c3a;
  --brand:     #f0384a;
  --brand-soft:#3a1520;

  --primary:   #6e8cff;
  --primary-h: #8aa2ff;
  --primary-soft:#1e2a55;

  --success:#34c47c; --success-soft:#0f2e22;
  --warning:#f0a43a; --warning-soft:#33240e;
  --danger: #ff6464; --danger-soft:#3a1518;
  --info:   #5ea2ff; --info-soft:#14284a;

  --usd:#3ccf86; --usd-soft:#0f2e22;
  --iqd:#7aa2ff; --iqd-soft:#16234a;
  --eur:#f3b04a; --eur-soft:#33260f;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- أساسيات ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); font-size:14.5px; line-height:1.6;
  background:var(--bg); color:var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-h); }
h1,h2,h3,h4{ margin:0; line-height:1.3; font-weight:700; }
img{ max-width:100%; }
kbd{
  font-family:var(--mono); font-size:11px; padding:1px 6px; border-radius:6px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--muted);
}
.mono, .code{ font-family:var(--mono); letter-spacing:.2px; }
.muted{ color:var(--muted); }
.nowrap{ white-space:nowrap; }
.hidden, [hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---------- الهيكل ---------- */
.app{ display:flex; min-height:100vh; }

.sidebar{
  position:fixed; inset-block:0; inset-inline-start:0; width:var(--sidebar-w);
  background:var(--navy); color:#c9d0ea;
  display:flex; flex-direction:column; z-index:40;
  border-inline-end:1px solid rgba(255,255,255,.04);
}
.brand{
  display:flex; align-items:center; gap:12px; padding:18px 18px 16px;
  color:#fff; border-bottom:1px solid rgba(255,255,255,.07);
}
.brand:hover{ color:#fff; }
.brand-logo{
  width:42px; height:42px; border-radius:12px; background:#fff; display:grid; place-items:center;
  overflow:hidden; flex:none; box-shadow:0 0 0 3px rgba(215,25,42,.35);
}
.brand-logo img{ width:100%; height:100%; object-fit:cover; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text b{ font-size:18px; letter-spacing:.3px; }
.brand-text small{ font-size:12px; color:#9aa4c7; }

.nav{ flex:1; overflow-y:auto; padding:10px 10px 16px; }
.nav-label{
  font-size:11.5px; font-weight:600; color:#7380ad; padding:16px 12px 6px; letter-spacing:.2px;
}
.nav-link{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:9px 12px; margin:2px 0; border-radius:10px;
  color:#c9d0ea; font-weight:500; transition:background .15s, color .15s;
}
.nav-link i{ width:20px; text-align:center; font-size:15px; color:#8792bd; transition:color .15s; }
.nav-link span{ flex:1; }
.nav-link kbd{ background:transparent; border-color:rgba(255,255,255,.12); color:#7380ad; font-size:10px; }
.nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-link:hover i{ color:#fff; }
.nav-link.active{ background:rgba(255,255,255,.1); color:#fff; }
.nav-link.active i{ color:#ff5b69; }
.nav-link.active::before{
  content:""; position:absolute; inset-inline-start:-10px; top:8px; bottom:8px; width:4px;
  border-radius:0 4px 4px 0; background:var(--brand);
}
[dir="rtl"] .nav-link.active::before{ border-radius:4px 0 0 4px; }

.sidebar-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px; border-top:1px solid rgba(255,255,255,.07);
}
.me{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#d7192a,#8f1020); color:#fff; font-weight:700;
}
.me-text{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.me-text b{ color:#fff; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-text small{ color:#8d97bd; font-size:11.5px; }
.sidebar .icon-btn{ color:#c9d0ea; border-color:rgba(255,255,255,.12); background:transparent; }
.sidebar .icon-btn:hover{ background:rgba(215,25,42,.2); color:#fff; border-color:transparent; }

.main{ flex:1; min-width:0; margin-inline-start:var(--sidebar-w); display:flex; flex-direction:column; }

.topbar{
  position:sticky; top:0; z-index:30; height:var(--topbar-h);
  display:flex; align-items:center; gap:14px; padding:0 28px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.global-search{
  position:relative; flex:1; max-width:520px; display:flex; align-items:center;
}
.global-search > i{ position:absolute; inset-inline-start:14px; color:var(--muted); font-size:14px; pointer-events:none; }
.global-search input{
  width:100%; height:42px; padding:0 42px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font:inherit; transition:border-color .15s, box-shadow .15s;
}
.global-search input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.global-search kbd{ position:absolute; inset-inline-end:12px; }
.topbar-tools{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; }
.clock{ font-family:var(--mono); font-size:13px; color:var(--muted); padding:6px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--line); }

.content{ padding:26px 28px 60px; width:100%; max-width:1440px; }

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:22px;
}
.page-head h1{ font-size:24px; letter-spacing:-.2px; }
.page-sub{ margin:4px 0 0; color:var(--muted); font-size:14px; }
.page-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- أزرار ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:10px; border:1px solid transparent;
  font:inherit; font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, transform .05s, box-shadow .15s;
  text-decoration:none;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-h); color:#fff; }
:root[data-theme="dark"] .btn-primary{ color:#0a0f1f; }
.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ filter:brightness(.93); color:#fff; }
.btn-success{ background:var(--success); color:#fff; }
.btn-success:hover{ filter:brightness(.95); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ filter:brightness(.93); color:#fff; }
.btn-wa{ background:#1fa855; color:#fff; }
.btn-wa:hover{ background:#178c46; color:#fff; }
.btn-ghost{ background:var(--surface); color:var(--text-2); border-color:var(--line); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--text); border-color:var(--line-2); }
.btn-soft{ background:var(--primary-soft); color:var(--primary); }
.btn-soft:hover{ filter:brightness(.97); color:var(--primary); }
.btn-lg{ height:50px; padding:0 22px; font-size:15.5px; border-radius:12px; }
.btn-sm{ height:32px; padding:0 12px; font-size:13px; border-radius:8px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.icon-btn, .btn-icon{
  width:38px; height:38px; display:inline-grid; place-items:center; border-radius:10px;
  background:var(--surface); color:var(--text-2); border:1px solid var(--line); cursor:pointer;
  transition:background .15s, color .15s; font-size:14px; flex:none;
}
.btn-icon{ width:32px; height:32px; border-radius:8px; font-size:13px; }
.icon-btn:hover, .btn-icon:hover{ background:var(--surface-2); color:var(--text); }
.btn-icon.danger:hover{ background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.btn-icon.primary:hover{ background:var(--primary-soft); color:var(--primary); border-color:transparent; }
.btn-icon.success:hover{ background:var(--success-soft); color:var(--success); border-color:transparent; }
.inline-form{ display:inline; margin:0; }
.actions-cell{ display:flex; gap:6px; justify-content:flex-start; align-items:center; }

/* ---------- البطاقات ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-pad{ padding:20px; }
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.card-head h2, .card-head h3{ font-size:15.5px; display:flex; align-items:center; gap:10px; }
.card-head h2 i, .card-head h3 i{ color:var(--muted); font-size:14px; }
.card-body{ padding:20px; }
.card-foot{ padding:14px 20px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--radius) var(--radius); }

.step{
  width:26px; height:26px; border-radius:8px; display:inline-grid; place-items:center; flex:none;
  background:var(--primary-soft); color:var(--primary); font-size:13px; font-weight:700;
}

.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.split{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
.split-wide{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:20px; align-items:start; }
.stack{ display:flex; flex-direction:column; gap:18px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer{ flex:1; }

/* ---------- مؤشرات KPI ---------- */
.kpi{
  position:relative; padding:18px 20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
}
.kpi-label{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; font-weight:500; }
.kpi-value{ font-size:26px; font-weight:700; margin-top:6px; letter-spacing:-.3px; line-height:1.2; direction:ltr; text-align:right; }
.kpi-value small{ font-size:13px; font-weight:600; color:var(--muted); margin-inline-start:4px; }
.kpi-foot{ margin-top:8px; font-size:12.5px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; }
.kpi .kpi-icon{
  position:absolute; inset-inline-end:16px; top:16px; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center; font-size:15px;
}
.kpi.usd .kpi-icon{ background:var(--usd-soft); color:var(--usd); }
.kpi.iqd .kpi-icon{ background:var(--iqd-soft); color:var(--iqd); }
.kpi.eur .kpi-icon{ background:var(--eur-soft); color:var(--eur); }
.kpi.neutral .kpi-icon{ background:var(--primary-soft); color:var(--primary); }
.kpi.warn .kpi-icon{ background:var(--warning-soft); color:var(--warning); }
.kpi.danger .kpi-icon{ background:var(--danger-soft); color:var(--danger); }
.neg{ color:var(--danger) !important; }
.pos{ color:var(--success) !important; }

/* ---------- إجراءات سريعة ---------- */
.quick{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.quick a{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  box-shadow:var(--shadow-sm); transition:border-color .15s, transform .15s, box-shadow .15s;
}
.quick a:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow); color:var(--text); }
.quick .q-icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:18px; flex:none; }
.quick b{ display:block; font-size:15px; }
.quick small{ color:var(--muted); font-size:12.5px; }
.quick kbd{ margin-inline-start:auto; }
.q-send  .q-icon{ background:var(--brand-soft); color:var(--brand); }
.q-recv  .q-icon{ background:var(--success-soft); color:var(--success); }
.q-ext   .q-icon{ background:var(--info-soft); color:var(--info); }
.q-list  .q-icon{ background:var(--primary-soft); color:var(--primary); }
.q-debt  .q-icon{ background:var(--warning-soft); color:var(--warning); }

/* ---------- النماذج ---------- */
.form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 18px; }
.form-grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.form-grid .full{ grid-column:1 / -1; }
.field{ position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > label{ font-size:13px; font-weight:600; color:var(--text-2); }
.field > label .req{ color:var(--brand); }
.field .hint{ font-size:12px; color:var(--muted); }
.control{ position:relative; }
.control > i.fi{
  position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:13.5px; pointer-events:none;
}
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .field select, .field textarea,
.filters input, .filters select, select.input{
  width:100%; height:44px; padding:0 14px; border-radius:10px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--text);
  font:inherit; font-size:14.5px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.field textarea{ height:auto; min-height:84px; padding:10px 14px; resize:vertical; }
.control > i.fi ~ input, .control > i.fi ~ select{ padding-inline-start:38px !important; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus,
.filters input:focus, .filters select:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft);
}
.field input::placeholder, .filters input::placeholder{ color:color-mix(in srgb, var(--muted) 75%, transparent); }
.field select, .filters select, select.input{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7493' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center; padding-inline-end:36px;
}
.input-amount{ font-family:var(--mono) !important; font-size:18px !important; font-weight:600; direction:ltr; text-align:right; }
.input-amount.cur-usd{ color:var(--usd); } .input-amount.cur-iqd{ color:var(--iqd); } .input-amount.cur-eur{ color:var(--eur); }
input[type=number]::-webkit-inner-spin-button{ opacity:.4; }

/* أزرار اختيار (عملة / نوع دفع) */
.seg{ display:flex; gap:6px; padding:4px; border-radius:12px; background:var(--surface-3); border:1px solid var(--line); }
.seg label{ flex:1; position:relative; margin:0; }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg span{
  display:flex; align-items:center; justify-content:center; gap:6px; height:36px; border-radius:9px;
  font-weight:600; font-size:13.5px; color:var(--muted); cursor:pointer; transition:all .15s;
}
.seg input:checked + span{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.seg input:focus-visible + span{ outline:2px solid var(--primary); }
.seg .s-usd input:checked + span{ color:var(--usd); }
.seg .s-iqd input:checked + span{ color:var(--iqd); }
.seg .s-eur input:checked + span{ color:var(--eur); }
.seg .s-debt input:checked + span{ color:var(--warning); }

/* أزرار القيم الأكثر استعمالاً */
.chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px; }
.chips-label{ color:var(--muted); font-size:11px; }
.chip{
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-2);
  font:inherit; font-size:12.5px; padding:3px 10px; border-radius:999px; cursor:pointer;
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all .12s;
}
.chip:hover{ border-color:var(--primary); color:var(--primary); }
.chip.on{ background:var(--primary-soft); border-color:var(--primary); color:var(--primary); font-weight:600; }

/* شريط الفلاتر */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); }
.filters input, .filters select{ height:38px; width:auto; min-width:140px; font-size:13.5px; }
.filters .grow{ flex:1; min-width:200px; }
.filters .btn{ height:38px; }
.filter-search{ position:relative; flex:1; min-width:220px; }
.filter-search i{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; }
.filter-search input{ width:100%; padding-inline-start:34px; }

/* ---------- الجداول ---------- */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.table th{
  position:sticky; top:0; z-index:1;
  text-align:start; font-weight:600; font-size:12.5px; color:var(--muted);
  padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tbody tr{ transition:background .1s; }
.table tbody tr:hover{ background:var(--surface-2); }
.table tbody tr:last-child td{ border-bottom:0; }
.table .num{ font-family:var(--mono); font-weight:600; direction:ltr; text-align:right; white-space:nowrap; }
.table td.code{ font-family:var(--mono); font-size:12.5px; white-space:nowrap; color:var(--text-2); }
.table .who{ display:flex; flex-direction:column; line-height:1.35; min-width:150px; }
.table .who small{ color:var(--muted); font-size:12px; }
.table-compact td{ padding:9px 14px; }
.table-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--line); flex-wrap:wrap; font-size:13px; color:var(--muted); }

/* ---------- شارات ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--surface-3); color:var(--text-2); white-space:nowrap;
}
.badge-success{ background:var(--success-soft); color:var(--success); }
.badge-warning{ background:var(--warning-soft); color:var(--warning); }
.badge-danger { background:var(--danger-soft);  color:var(--danger); }
.badge-info   { background:var(--info-soft);    color:var(--info); }
.badge-primary{ background:var(--primary-soft); color:var(--primary); }
.cur{
  display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:600;
  padding:2px 7px; border-radius:6px; letter-spacing:.3px;
}
.cur-usd{ background:var(--usd-soft); color:var(--usd); }
.cur-iqd{ background:var(--iqd-soft); color:var(--iqd); }
.cur-eur{ background:var(--eur-soft); color:var(--eur); }
.t-usd{ color:var(--usd); } .t-iqd{ color:var(--iqd); } .t-eur{ color:var(--eur); }

/* ---------- تنبيهات ---------- */
.alert{
  display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:12px;
  margin-bottom:18px; font-weight:500; border:1px solid transparent;
}
.alert i{ margin-top:4px; }
.alert-success{ background:var(--success-soft); color:var(--success); }
.alert-danger { background:var(--danger-soft);  color:var(--danger); }
.alert-warning{ background:var(--warning-soft); color:var(--warning); }
.alert-info   { background:var(--info-soft);    color:var(--info); }

.empty-state{ text-align:center; padding:40px 20px; color:var(--muted); }
.empty-state i{ font-size:30px; opacity:.5; margin-bottom:10px; display:block; }
.empty-state.big{ padding:80px 20px; }
.empty-state.big h2{ color:var(--text); margin-bottom:6px; }
.empty-state.big .btn{ margin-top:18px; }

/* ---------- نافذة منبثقة ---------- */
.modal{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:rgba(10,15,31,.55); backdrop-filter:blur(3px); animation:fade .15s;
}
.modal[hidden]{ display:none; }
.modal-card{
  width:100%; max-width:440px; background:var(--surface); border-radius:18px; padding:26px;
  box-shadow:var(--shadow-lg); text-align:center; animation:pop .18s ease-out;
  border:1px solid var(--line);
}
.modal-card.wide{ max-width:560px; text-align:start; }
.modal-icon{
  width:56px; height:56px; border-radius:16px; margin:0 auto 14px; display:grid; place-items:center;
  background:var(--warning-soft); color:var(--warning); font-size:22px;
}
.modal-icon.danger{ background:var(--danger-soft); color:var(--danger); }
.modal-card h3{ font-size:18px; margin-bottom:8px; }
.modal-card p{ color:var(--text-2); margin:0 0 6px; }
.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn{ flex:1; }
@keyframes fade{ from{opacity:0} }
@keyframes pop{ from{ transform:scale(.96); opacity:0 } }

/* ---------- اقتراحات البحث ---------- */
.suggestions{
  position:absolute; top:calc(100% + 6px); inset-inline:0; z-index:20;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  max-height:290px; overflow-y:auto; display:none; padding:6px;
}
.suggestions.open{ display:block; }
.sug-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer; }
.sug-item:hover, .sug-item.active{ background:var(--surface-2); }
.sug-avatar{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--primary-soft); color:var(--primary); font-weight:700; font-size:13px;
}
.sug-text{ min-width:0; }
.sug-name{ font-weight:600; font-size:14px; }
.sug-name .match{ color:var(--brand); }
.sug-phone{ font-family:var(--mono); font-size:12px; color:var(--muted); direction:ltr; text-align:right; }
.sug-empty, .sug-loading{ padding:12px; text-align:center; color:var(--muted); font-size:13px; }
.spinner{
  position:absolute; inset-inline-end:12px; top:50%; width:16px; height:16px; margin-top:-8px;
  border:2px solid var(--line-2); border-top-color:var(--primary); border-radius:50%;
  animation:spin .7s linear infinite; display:none;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- صندوق "آخر حوالة" ---------- */
.lastbox{
  display:none; margin-bottom:18px; border-radius:var(--radius); border:1px solid color-mix(in srgb, var(--info) 30%, transparent);
  background:var(--info-soft); padding:14px 16px;
}
.lastbox.show{ display:block; animation:fade .2s; }
.lastbox-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; color:var(--info); font-weight:600; }
.kv-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:8px; }
.kv{ background:var(--surface); border-radius:10px; padding:8px 12px; border:1px solid var(--line); min-width:0; }
.kv span{ display:block; font-size:11.5px; color:var(--muted); }
.kv b{ display:block; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lastbox-actions{ display:flex; gap:8px; margin-top:12px; }

.dup-warning{
  display:none; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; margin:14px 0 0;
  background:var(--warning-soft); color:var(--warning); font-weight:600; border:1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
.dup-warning.show{ display:flex; animation:shake .35s; }
@keyframes shake{ 25%{ transform:translateX(-4px) } 75%{ transform:translateX(4px) } }

/* ---------- الإيصال (معاينة حيّة) ---------- */
.receipt{
  position:sticky; top:calc(var(--topbar-h) + 20px);
  background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
}
.receipt-top{
  background:var(--navy); color:#fff; padding:18px 20px; position:relative;
}
.receipt-top::after{
  content:""; position:absolute; inset-inline:0; bottom:-8px; height:16px;
  background:radial-gradient(circle at 8px -2px, transparent 9px, var(--surface) 9.5px) repeat-x;
  background-size:16px 16px;
}
.receipt-top .r-brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.receipt-top .r-brand img{ width:30px; height:30px; border-radius:8px; background:#fff; }
.receipt-top small{ color:#a8b1d6; font-family:var(--mono); font-size:12px; }
.receipt-body{ padding:22px 20px 18px; }
.r-row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:13.5px; border-bottom:1px dashed var(--line); }
.r-row:last-child{ border-bottom:0; }
.r-row .k{ color:var(--muted); }
.r-row .v{ font-weight:600; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:62%; }
.r-row .v.empty{ color:var(--line-2); font-weight:400; }
.r-amount{
  text-align:center; margin:12px 0; padding:16px; border-radius:14px; background:var(--surface-2);
  border:1px solid var(--line);
}
.r-amount .num{ display:block; font-family:var(--mono); font-size:32px; font-weight:600; direction:ltr; line-height:1.2; }
.r-amount .num.cur-usd{ color:var(--usd); background:none; } .r-amount .num.cur-iqd{ color:var(--iqd); background:none; } .r-amount .num.cur-eur{ color:var(--eur); background:none; }
.r-amount .lbl{ font-size:12px; color:var(--muted); }
.r-code{ text-align:center; font-family:var(--mono); color:var(--muted); font-size:12.5px; margin-top:10px; letter-spacing:1px; }

/* ---------- شاشة النجاح ---------- */
.success{
  max-width:560px; margin:30px auto; text-align:center; padding:36px 28px;
  background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
}
.success .stamp{
  width:76px; height:76px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center;
  background:var(--success-soft); color:var(--success); font-size:32px; animation:pop .3s;
}
.success h2{ font-size:22px; margin-bottom:6px; }
.success .code-tag{
  display:inline-flex; align-items:center; gap:8px; margin:14px 0 20px; padding:10px 18px; border-radius:12px;
  font-family:var(--mono); font-size:18px; font-weight:600; background:var(--surface-2); border:1px dashed var(--line-2);
  cursor:pointer;
}
.success .code-tag:hover{ border-color:var(--primary); }
.success-actions{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.success-summary{ text-align:start; margin:0 0 18px; }

/* ---------- تبويبات ---------- */
.tabs{ display:inline-flex; gap:4px; padding:4px; border-radius:12px; background:var(--surface-3); border:1px solid var(--line); }
.tabs a, .tabs button{
  border:0; background:transparent; font:inherit; font-weight:600; font-size:13.5px; color:var(--muted);
  height:34px; padding:0 14px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
}
.tabs a.active, .tabs button.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }

/* ---------- ترقيم الصفحات ---------- */
.pager{ display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.pager a, .pager span{
  min-width:34px; height:34px; display:grid; place-items:center; padding:0 8px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--text-2); border:1px solid var(--line); background:var(--surface);
}
.pager a:hover{ border-color:var(--primary); color:var(--primary); }
.pager .current{ background:var(--primary); color:#fff; border-color:var(--primary); }
:root[data-theme="dark"] .pager .current{ color:#0a0f1f; }
.pager .disabled{ opacity:.4; }
.pager .gap{ border:0; background:none; }

/* ---------- قوائم وتنبيهات صغيرة ---------- */
.list{ list-style:none; margin:0; padding:0; }
.list li{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--line); }
.list li:last-child{ border-bottom:0; }
.list .li-main{ flex:1; min-width:0; }
.list .li-main b{ display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list .li-main small{ color:var(--muted); font-size:12.5px; }
.list .li-end{ text-align:left; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none; }
.dot-danger{ background:var(--danger); } .dot-warning{ background:var(--warning); } .dot-success{ background:var(--success); }

.progress{ height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.progress > span{ display:block; height:100%; border-radius:99px; background:var(--success); }

/* ---------- مخطط صغير ---------- */
.chart{ display:flex; align-items:flex-end; gap:6px; height:150px; padding:10px 4px 0; }
.chart .bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; min-width:0; }
.chart .bar i{
  display:block; width:100%; max-width:26px; border-radius:4px 4px 0 0; background:var(--primary);
  opacity:.85; min-height:3px; transition:opacity .15s; font-style:normal;
}
.chart .bar.today i{ background:var(--brand); opacity:1; }
.chart .bar:hover i{ opacity:1; }
.chart .bar small{ font-size:10.5px; color:var(--muted); font-family:var(--mono); }
.chart .bar[data-tip]{ position:relative; }
.chart .bar[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; bottom:100%; margin-bottom:4px; white-space:nowrap;
  background:var(--text); color:var(--surface); font-size:11.5px; padding:4px 8px; border-radius:6px; z-index:2;
}

/* ---------- شريط الجوال السفلي ---------- */
.tabbar{ display:none; }
.only-mobile{ display:none !important; }
.sidebar-backdrop{ display:none; }

/* ---------- التجاوب ---------- */
@media (max-width: 1200px){
  .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .quick{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .split{ grid-template-columns:minmax(0,1fr) 320px; }
}
@media (max-width: 980px){
  .split, .split-wide{ grid-template-columns:1fr; }
  .receipt{ position:static; }
  .grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .sidebar{ transform:translateX(100%); transition:transform .25s ease; box-shadow:var(--shadow-lg); }
  [dir="ltr"] .sidebar{ transform:translateX(-100%); }
  body.nav-open .sidebar{ transform:none; }
  body.nav-open .sidebar-backdrop{ display:block; position:fixed; inset:0; background:rgba(10,15,31,.5); z-index:35; }
  .main{ margin-inline-start:0; }
  .only-mobile{ display:inline-grid !important; }
  .hide-mobile{ display:none !important; }
  .topbar{ padding:0 14px; gap:10px; }
  .content{ padding:18px 16px 96px; }
  .page-head h1{ font-size:20px; }
  .tabbar{
    display:flex; position:fixed; bottom:0; inset-inline:0; z-index:45;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px -10px rgba(20,26,51,.2);
  }
  .tabbar a, .tabbar button{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px;
    color:var(--muted); font:inherit; font-size:11px; font-weight:600; background:none; border:0; border-radius:10px;
  }
  .tabbar i{ font-size:17px; }
  .tabbar a.active{ color:var(--brand); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .form-grid, .form-grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; gap:12px; }
  .quick{ grid-template-columns:1fr 1fr; gap:10px; }
  .quick a{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px; }
  .quick kbd{ display:none; }
  .kpi{ padding:14px; }
  .kpi-value{ font-size:20px; }
  .kpi .kpi-icon{ width:30px; height:30px; font-size:12px; top:12px; inset-inline-end:12px; }
  .filters input, .filters select{ flex:1 1 140px; min-width:0; }
  .success-actions{ grid-template-columns:1fr 1fr; }
  .card-head, .card-body{ padding:14px 16px; }
  .table th, .table td{ padding:10px 12px; }
  /* الجداول تتحول لبطاقات على الجوال */
  .table.stack-mobile thead{ display:none; }
  .table.stack-mobile, .table.stack-mobile tbody, .table.stack-mobile tr, .table.stack-mobile td{ display:block; width:100%; }
  .table.stack-mobile tr{ padding:10px 14px; border-bottom:1px solid var(--line); }
  .table.stack-mobile td{ border:0; padding:3px 0; display:flex; justify-content:space-between; gap:12px; }
  .table.stack-mobile td::before{ content:attr(data-label); color:var(--muted); font-size:12px; font-weight:500; }
  .table.stack-mobile td.actions-cell{ justify-content:flex-end; padding-top:8px; }
  .table.stack-mobile td.actions-cell::before{ content:none; }
}

/* ---------- الطباعة ---------- */
@media print{
  .sidebar, .topbar, .tabbar, .page-actions, .no-print, .filters, .pager, .btn, .icon-btn{ display:none !important; }
  .main{ margin:0 !important; }
  .content{ padding:0 !important; max-width:none; }
  body{ background:#fff; color:#000; font-size:12px; }
  .card{ border:0; box-shadow:none; }
  .table th{ background:#eee !important; color:#000; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .table td, .table th{ border:1px solid #999 !important; padding:5px 6px; }
}