/*
  Hasabaty UI v2 (RTL + Sidebar)
  - Desktop: right sidebar, content in the middle
  - Mobile: topbar + bottom nav
*/

:root{
  /* Theme (edit freely) */
  --brand:#0d9488;        /* teal */
  --brand2:#4f46e5;       /* indigo */
  --sidebar1:#0b1220;     /* deep navy */
  --sidebar2:#111b33;

  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f5f7fb;
  --card:#ffffff;
  --border:rgba(2,6,23,.08);

  /* Accents */
  --c-bank:#0ea5e9;
  --c-pending:#f59e0b;
  --c-accounts:#10b981;
  --c-cash:#a855f7;
}

/* ------------------------------
   Scroll / layout hardening
   الهدف: منع "نزول بسيط" بالصفحات القصيرة على الديسكتوب
   وجعل التمرير داخل المحتوى فقط عند الحاجة.
-------------------------------- */

html,body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden !important;
}

body{
  overflow:hidden !important;
  overscroll-behavior: none;
}

body.hasabaty-body{
  background:var(--bg) !important;
  color:var(--ink);
  font-family:'Tajawal', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* keep numbers LTR and aligned */
.num{
  direction:ltr;
  unicode-bidi:bidi-override;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

/* Layout shell */
.app-shell{
  height:100vh;
  min-height:100vh;
  display:flex;
  flex-direction:row; /* RTL: first item appears on the right */
  overflow:hidden;
}

.app-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.content-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
  max-width:1600px;
  margin-inline:auto;
  padding-inline:18px;
}

/* ✅ Per-page width overrides (صحيح خارج بلوك content-wrap) */
.page-accounts .content-wrap,
.page-account_view .content-wrap{
  max-width:none !important;
}
/* Wider layout for operational pages */
.page-dashboard .content-wrap,
.page-upload_bank .content-wrap,
.page-pending .content-wrap,
.page-pending_excluded .content-wrap,
.page-cash .content-wrap,
.page-reports .content-wrap,
.page-imports .content-wrap,
.page-settings .content-wrap,
.page-users .content-wrap,
.page-activity .content-wrap,
.page-backup .content-wrap{
  max-width:none !important;
}



/* Desktop: remove extra bottom padding reserved for mobile bottom nav */
@media (min-width: 992px){
  .content-wrap.pb-5{padding-bottom:1rem !important;}
}

/* Sidebar */
.sidebar{
  display:flex;
  flex-direction:column;
  width:280px;
  height:100vh;
  position:sticky;
  top:0;
  padding:16px 14px;
  background:linear-gradient(180deg,var(--sidebar1),var(--sidebar2));
  border-left:1px solid rgba(255,255,255,.08);
}

/* Small screens: hide sidebar and rely on the topbar */
@media (max-width: 991.98px){
  .sidebar{ display:none; }
}

.sidebar-brand{padding:8px 10px 6px;}
.sidebar-brand-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.brand-avatar{
  width:38px; height:38px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(13,148,136,.25), rgba(79,70,229,.20));
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  flex:0 0 auto;
}
.brand-avatar i{font-size:18px;}
.sidebar-brand-link{
  display:block;
  font-size:20px;
  font-weight:800;
  text-decoration:none;
  color:#fff;
}
.sidebar-sub{margin-top:4px;}

.sidebar-section{
  color:rgba(255,255,255,.55);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  padding:10px 12px 4px;
}

.sidebar-nav .nav-link{
  color:rgba(255,255,255,.88);
  border-radius:14px;
  padding:.55rem .8rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  position:relative;
}

.sidebar-nav .nav-ic{
  width:36px;
  height:36px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.sidebar-nav .nav-ic i{font-size:18px;}

.sidebar-nav .nav-badge{
  margin-inline-start:auto;
  padding:.2rem .55rem;
  border-radius:999px;
  background:rgba(245,158,11,.18);
  border:1px solid rgba(245,158,11,.35);
  color:#ffd28a;
  font-weight:800;
  font-size:12px;
}

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

.sidebar-nav .nav-link.active{
  background:linear-gradient(135deg, rgba(13,148,136,.22), rgba(79,70,229,.22));
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:700;
}

.sidebar-nav .nav-link.active::before{
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:22px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(13,148,136,.95), rgba(79,70,229,.95));
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

.sidebar-nav .nav-link.active .nav-ic{
  background:linear-gradient(135deg, rgba(13,148,136,.35), rgba(79,70,229,.30));
  border-color:rgba(255,255,255,.16);
}

/* Menu item accents */
.sidebar-nav a[href*='page=dashboard'] .nav-ic{background:rgba(79,70,229,.14); border-color:rgba(79,70,229,.28);} 
.sidebar-nav a[href*='page=upload_bank'] .nav-ic{background:rgba(14,165,233,.14); border-color:rgba(14,165,233,.28);} 
.sidebar-nav a[href*='page=pending'] .nav-ic{background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.32);} 
.sidebar-nav a[href*='page=accounts'] .nav-ic{background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.30);} 
.sidebar-nav a[href*='page=cash'] .nav-ic{background:rgba(168,85,247,.16); border-color:rgba(168,85,247,.30);} 
.sidebar-nav a[href*='page=reports'] .nav-ic{background:rgba(236,72,153,.14); border-color:rgba(236,72,153,.28);} 
.sidebar-nav a[href*='page=imports'] .nav-ic{background:rgba(100,116,139,.18); border-color:rgba(148,163,184,.34);} 
.sidebar-nav a[href*='page=settings'] .nav-ic{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18);} 

.sidebar-footer .btn{border-radius:14px;}

/* Mobile topbar */
.topbar{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  box-shadow:0 10px 26px rgba(2,6,23,.14);
}
.topbar-brand{
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.topbar .btn-outline-light{border-radius:12px;}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card.shadow-sm{box-shadow:0 14px 36px rgba(2,6,23,.08) !important;}
.card:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 44px rgba(2,6,23,.10) !important;
  border-color:rgba(2,6,23,.12);
}

/* Hero card (Dashboard top) */
.hero-card{
  border:0;
  background:linear-gradient(135deg, rgba(13,148,136,.10), rgba(79,70,229,.08));
}
.hero-card h4{font-weight:900;}
.hero-card .text-muted{color:rgba(15,23,42,.68) !important;}

/* KPI cards */
.kpi .kpi-ic{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(13,148,136,.16), rgba(79,70,229,.16));
  border:1px solid rgba(2,6,23,.06);
  color:var(--ink);
}
.kpi .kpi-ic i{font-size:22px;}
.kpi .kpi-val{font-size:26px;font-weight:800;line-height:1;}
.kpi .kpi-lab{color:var(--muted);margin-top:4px;}

/* KPI accents */
.kpi.kpi-bank .kpi-ic{background:linear-gradient(135deg, rgba(14,165,233,.22), rgba(79,70,229,.10)); border-color:rgba(14,165,233,.24); color:var(--c-bank);}
.kpi.kpi-pending .kpi-ic{background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(13,148,136,.10)); border-color:rgba(245,158,11,.24); color:var(--c-pending);}
.kpi.kpi-accounts .kpi-ic{background:linear-gradient(135deg, rgba(16,185,129,.22), rgba(79,70,229,.08)); border-color:rgba(16,185,129,.22); color:var(--c-accounts);}
.kpi.kpi-cash .kpi-ic{background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(14,165,233,.08)); border-color:rgba(168,85,247,.22); color:var(--c-cash);}
.kpi.kpi-pending .kpi-val{color:#b45309;}

/* Extra KPI accent: Merchants */
.kpi.kpi-merchant .kpi-ic{background:linear-gradient(135deg, rgba(236,72,153,.18), rgba(14,165,233,.08)); border-color:rgba(236,72,153,.22); color:#db2777;}
.kpi.kpi-merchant .kpi-val{color:#9d174d;}

/* Pending cards */
.pending-card{border-left:1px solid var(--border);}
.pending-head{padding-bottom:4px;}
.pending-ic{
  width:38px; height:38px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(2,6,23,.08);
  background:#fff;
}
.pending-ic.is-in{background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.28); color:var(--c-accounts);}
.pending-ic.is-out{background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.28); color:#ef4444;}
.pending-amt{font-size:20px; font-weight:900;}
.pending-card .alert{border-radius:14px;}

/* Buttons / forms */
.btn{border-radius:14px;}
.form-control,.form-select{border-radius:14px;}

/* Tables */
.table thead th{background:#f1f5f9; color:#334155; font-weight:800;}
.table td, .table th{vertical-align:middle;}
.table-sticky thead th{position:sticky;top:0;background:#fff;z-index:2;}

/* Statement memo column */
.stmt-memo{min-width:220px;max-width:520px;white-space:normal;word-break:break-word;}

/* Softer badges */
.badge-soft{background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff;}
.badge-soft-success{background:rgba(16,185,129,.12); color:#065f46; border:1px solid rgba(16,185,129,.22);}
.badge-soft-danger{background:rgba(239,68,68,.10); color:#991b1b; border:1px solid rgba(239,68,68,.22);}
.badge-soft-warning{background:rgba(245,158,11,.12); color:#92400e; border:1px solid rgba(245,158,11,.26);}
.badge-soft-neutral{background:rgba(100,116,139,.10); color:#334155; border:1px solid rgba(100,116,139,.20);}

/* Consistent page header inside content */
.page-header{
  background:linear-gradient(135deg, rgba(13,148,136,.12), rgba(79,70,229,.10));
  border:1px solid rgba(2,6,23,.06);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 14px 36px rgba(2,6,23,.06);
}
.page-header h4,.page-header h5{margin:0;font-weight:900;}
.page-header .sub{color:rgba(15,23,42,.68); font-size:13px; margin-top:4px;}
.page-header .actions .btn{border-radius:14px;}

/* Clickable KPI cards */
.kpi-link{display:block; text-decoration:none; color:inherit;}
.kpi-link:focus{outline:0;}
.kpi-link:focus-visible .card{box-shadow:0 0 0 4px rgba(79,70,229,.18), 0 18px 44px rgba(2,6,23,.12) !important;}
.kpi-link .card{height:100%;}
.kpi-link:hover .card{transform:translateY(-2px);}

/* Empty state */
.empty-state{
  border:1px dashed rgba(2,6,23,.18);
  background:linear-gradient(135deg, rgba(100,116,139,.06), rgba(79,70,229,.06));
}
.empty-state .empty-ic{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(2,6,23,.08);
}
.empty-state .empty-ic i{font-size:26px;}
.empty-state .muted{color:rgba(15,23,42,.62);}

/* =========================
   ✅ Dashboard: show cards without scrolling (desktop)
   - تقليل الفراغات وتكثيف البطاقات
   ========================= */
.page-dashboard .content-wrap{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* tighten common margins (Bootstrap rows) */
.page-dashboard .row{ --bs-gutter-y: .6rem; }
.page-dashboard .card{ margin-bottom:10px; }
.page-dashboard .card .card-body{ padding:12px 14px; }

/* make KPI values slightly smaller so everything fits */
.page-dashboard .kpi .kpi-val{ font-size:22px; }
.page-dashboard .kpi .kpi-ic{ width:40px; height:40px; }

/* hero / explain boxes compact */
.page-dashboard .hero-card .card-body{ padding:12px 14px; }
.page-dashboard .page-header{ padding:12px 14px; }

/* On very wide screens: allow 4 cards in a row visually by tightening columns */
@media (min-width: 1200px){
  .page-dashboard .container,
  .page-dashboard .content-wrap{ max-width:1400px; }
}

/* Mobile bottom nav */
.mobile-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff; border-top:1px solid var(--border);
  display:flex; justify-content:space-around; gap:6px;
  padding:8px 8px 10px;
  z-index:1000;
}
.mobile-nav-item{
  text-decoration:none; color:#334155;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:12px;
  padding:6px 10px;
  border-radius:14px;
}
.mobile-nav-item i{font-size:18px;}
.mobile-nav-item.active{background:rgba(79,70,229,.10); color:#3730a3;}
.nav-badge-mini{
  position:absolute;
  margin-top:-20px;
  margin-inline-start:14px;
  padding:.05rem .35rem;
  border-radius:999px;
  background:rgba(245,158,11,.95);
  color:#111827;
  font-weight:900;
  font-size:11px;
  border:1px solid rgba(255,255,255,.75);
}

/* Print helpers */
.print-header{display:none;}
.print-only{display:none !important;}

/* Statement / account view tweaks (screen) */
.stmt-table td{ vertical-align: top; }
.stmt-memo{ white-space: normal; word-break: break-word; line-height: 1.45; }
.stmt-note{ white-space: normal; word-break: break-word; color:#4a5568; line-height: 1.55; }

@media (min-width: 1200px){
  /* Give notes more room on desktop */
  .stmt-table{ table-layout: fixed; }
  .stmt-table th:nth-child(1), .stmt-table td:nth-child(1){ width:10%; }
  .stmt-table th:nth-child(2), .stmt-table td:nth-child(2){ width:10%; }
  .stmt-table th:nth-child(3), .stmt-table td:nth-child(3){ width:19%; }
  .stmt-table th:nth-child(4), .stmt-table td:nth-child(4){ width:10%; }
  .stmt-table th:nth-child(5), .stmt-table td:nth-child(5){ width:10%; }
  .stmt-table th:nth-child(6), .stmt-table td:nth-child(6){ width:12%; }
  .stmt-table th:nth-child(7), .stmt-table td:nth-child(7){ width:32%; }
}

@media print{
  /* ✅ A4 Landscape + clean, readable print */
  @page{ size: 297mm 210mm; margin: 8mm; }

  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .sidebar, .topbar, .mobile-nav, .btn, form, .alert, .no-print{ display:none !important; }

  html,body{ overflow: visible !important; height:auto !important; }
  body{ background:#fff !important; color:#000 !important; font-size:12px !important; }
  .app-shell, .app-main, .content-wrap{ height:auto !important; min-height:auto !important; overflow: visible !important; }
  .content-wrap{ padding:0 !important; margin:0 !important; max-width:none !important; }
  .card{ border:0 !important; box-shadow:none !important; }

  .table-responsive{ overflow: visible !important; }
  .table-sticky thead th{ position: static !important; }
  thead{ display: table-header-group; }
  tfoot{ display: table-footer-group; }
  tr{ page-break-inside: avoid; }

  table{ width:100% !important; table-layout: auto !important; border-collapse: collapse !important; }
  .table td, .table th{ padding:5px 8px !important; font-size:12px !important; vertical-align:top !important; line-height:1.35 !important; }
  .table thead th{ background:#f1f5f9 !important; color:#111827 !important; }

  .num{ direction:ltr !important; unicode-bidi:bidi-override !important; }

  .stmt-memo{ white-space:normal !important; word-break:break-word !important; }
  .stmt-note{ white-space:normal !important; word-break:break-word !important; }

  /* Wider notes, slightly smaller bank memo in print */
  .stmt-table th:nth-child(1), .stmt-table td:nth-child(1){ width:10%; }
  .stmt-table th:nth-child(2), .stmt-table td:nth-child(2){ width:10%; }
  .stmt-table th:nth-child(3), .stmt-table td:nth-child(3){ width:20%; }
  .stmt-table th:nth-child(4), .stmt-table td:nth-child(4){ width:9%; }
  .stmt-table th:nth-child(5), .stmt-table td:nth-child(5){ width:9%; }
  .stmt-table th:nth-child(6), .stmt-table td:nth-child(6){ width:11%; }
  .stmt-table th:nth-child(7), .stmt-table td:nth-child(7){ width:35%; }

  /* اخفاء أعمدة غير مناسبة للطباعة (المصدر + أزرار) */
  .stmt-table th:nth-child(8), .stmt-table td:nth-child(8),
  .stmt-table th:nth-child(9), .stmt-table td:nth-child(9){ display:none !important; }

  .badge-soft, .badge-soft-success, .badge-soft-danger, .badge-soft-warning, .badge-soft-neutral{
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    color:#000 !important;
  }
  a[href]:after{ content:"" !important; }

  .print-header{ display:block !important; }
}

/* Sidebar collapse (Desktop) */
.sidebar.is-collapsed{width:86px;}
.sidebar.is-collapsed .sidebar-brand-link,
.sidebar.is-collapsed .sidebar-sub,
.sidebar.is-collapsed .sidebar-nav .nav-label,
.sidebar.is-collapsed .sidebar-footer .btn span{display:none !important;}

.sidebar-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.sidebar-toggle:hover{background:rgba(255,255,255,.10);}

.sidebar-nav a:hover{
  background:rgba(255,255,255,.08);
  transform:translateX(-1px);
  color:#fff;
}

.sidebar-nav a.active{
  background:linear-gradient(135deg, rgba(13,148,136,.35), rgba(79,70,229,.30));
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  color:#fff;
}

/* =========================
   Flash Toasts (Enterprise UX)
   ========================= */
.toast-area{
  position: fixed;
  top: 16px;
  left: 16px;
  right: 316px; /* leave space for the right sidebar */
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast-area--full{right: 16px;}
.toast-area .alert{
  pointer-events: auto;
  margin: 0;
  border-radius: 14px;
  box-shadow: 0 18px 35px rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.06);
  transition: opacity .22s ease, transform .22s ease;
}
.toast-area .alert.is-hiding{
  opacity: 0;
  transform: translateY(-6px);
}
.toast-area .alert .btn-close{filter: none; opacity: .8;}
.toast-area .alert .btn-close:hover{opacity: 1;}
@media (max-width: 991.98px){
  .toast-area{right: 16px;}
}


/* More consistent spacing across breakpoints */
@media (max-width: 991.98px){
  .content-wrap{ padding-inline:12px; }
}
@media (max-width: 575.98px){
  .content-wrap{ padding-inline:10px; }
}

/* Sticky headers for long tables */
.table-sticky thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}

/* Subtle card hover */
.card.hoverable{ transition: transform .12s ease, box-shadow .12s ease; }
.card.hoverable:hover{ transform: translateY(-1px); box-shadow:0 10px 25px rgba(0,0,0,.08); }

/* Token box */
.token-box{ background: rgba(13,110,253,.08); border:1px dashed rgba(13,110,253,.25); border-radius:14px; padding:12px; }
.token-box code{ word-break:break-all; }


/* Make internal cards stretch full width in wide mode */
.page-dashboard .content-wrap .container,
.page-upload_bank .content-wrap .container,
.page-pending .content-wrap .container,
.page-pending_excluded .content-wrap .container,
.page-cash .content-wrap .container,
.page-reports .content-wrap .container,
.page-imports .content-wrap .container,
.page-settings .content-wrap .container,
.page-users .content-wrap .container,
.page-activity .content-wrap .container,
.page-backup .content-wrap .container{ max-width:none !important; }




/* =========================================================
   Hasabaty UI Refresh (v1.6.0) — تحديث شامل + طباعة احترافية
   الهدف: استغلال المساحة + توحيد الهوية + تحسين الجوال/الطباعة
   ========================================================= */

:root{
  --hs-radius-xl: 18px;
  --hs-radius-lg: 14px;
  --hs-radius-md: 12px;
  --hs-gap: 14px;
  --hs-surface: rgba(255,255,255,.88);
  --hs-surface-2: rgba(255,255,255,.72);
  --hs-border: rgba(15,23,42,.10);
  --hs-shadow: 0 16px 40px rgba(2,6,23,.10);
  --hs-shadow-soft: 0 10px 26px rgba(2,6,23,.08);
  --hs-text: #0f172a;
  --hs-muted: rgba(15,23,42,.68);
}

/* 1) استغلال المساحة (إلغاء التمركز الزائد) */
.content-wrap{
  max-width:none !important;
  margin:0 !important;
  padding-inline: 22px; /* بدل فراغ كبير */
}
@media (min-width: 1400px){
  .content-wrap{ padding-inline: 28px; }
}

/* 2) بطاقات موحّدة */
.card, .panel, .sheet, .stat-card{
  border-radius: var(--hs-radius-lg) !important;
}
.card, .panel, .sheet{
  background: var(--hs-surface);
  border:1px solid var(--hs-border);
  box-shadow: var(--hs-shadow-soft);
}

/* 3) عناوين الصفحات وأشرطة الأدوات */
.page-title, h1, h2{
  letter-spacing: .2px;
}
.page-subtitle{ color: var(--hs-muted); }

/* 4) جداول: وضوح + تباعد + قراءة */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  font-weight:700;
  color: rgba(15,23,42,.78);
  border-bottom: 1px solid rgba(15,23,42,.12) !important;
}
.table tbody td{
  vertical-align: middle;
  border-top: 1px solid rgba(15,23,42,.08) !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-accent-bg: rgba(2,6,23,.02);
}

/* 5) حقول الإدخال: ارتفاع/حدود أفضل */
.form-control, .form-select{
  border-radius: 12px;
  border-color: rgba(15,23,42,.14);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 .18rem rgba(59,130,246,.18);
}

/* 6) أزرار: اتساق */
.btn{ border-radius: 12px; font-weight:700; }
.btn-outline-secondary{ border-color: rgba(15,23,42,.18); }

/* 7) لوحة التحكم — شبكة البطاقات (تستغل العرض) */
.page-dashboard .stats-grid{
  display:grid;
  gap: var(--hs-gap);
  grid-template-columns: repeat(12, 1fr);
}
.page-dashboard .stats-grid > .col{
  grid-column: span 4;
}
@media (max-width: 1199.98px){
  .page-dashboard .stats-grid > .col{ grid-column: span 6; }
}
@media (max-width: 767.98px){
  .page-dashboard .stats-grid > .col{ grid-column: span 12; }
}

.page-dashboard .account-cards{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hs-gap);
}
.page-dashboard .account-cards > [class*="col-"]{ width:auto !important; max-width:none !important; }

/* 8) صفحات الإعدادات — عمودين مرنين بدل انضغاط */
.page-settings .row.g-4{
  align-items: start;
}
.page-settings .row.g-4 > .col-lg-8,
.page-settings .row.g-4 > .col-lg-4{
  min-width: 320px;
}
@media (min-width: 1200px){
  .page-settings .row.g-4 > .col-lg-8{ flex: 0 0 68%; max-width: 68%; }
  .page-settings .row.g-4 > .col-lg-4{ flex: 0 0 32%; max-width: 32%; }
}

/* 9) صفحة الحسابات — جدول أعرض + أزرار كشف/تقارير أوضح */
.page-accounts .table{
  font-size: .98rem;
}
.page-accounts .btn.btn-primary{
  box-shadow: 0 10px 22px rgba(37,99,235,.18);
}

/* 10) صفحة رفع كشف البنك — تركيز على صندوق الرفع */
.page-upload_bank .card{
  border-radius: var(--hs-radius-xl) !important;
}

/* 11) المعلّقات — صندوق التقسيم أوضح */
.page-pending .split-box{
  background: rgba(255,255,255,.78);
  border:1px dashed rgba(15,23,42,.18);
  border-radius: var(--hs-radius-xl);
  padding: 14px;
}

/* 12) الطباعة — تركيز على الملاحظات + ترقيم صفحات */
.print-footer{ display:none; }
@media print{
  .print-footer{
    display:block;
    position: fixed;
    bottom: 6mm;
    left: 0;
    right: 0;
    text-align:center;
    font-size: 10px;
    color: #555;
  }
  /* محاولة ترقيم: تعمل جزئياً حسب المتصفح */
  .print-footer::after{
    content: "صفحة " counter(page);
  }
  /* تكبير الملاحظات وتقليل البيان عند الطباعة */
  .note, .notes, .tx-notes{ font-size: 12px !important; font-weight: 700 !important; }
  .desc, .description, .bank-desc{ font-size: 10px !important; opacity: .9; }
}

.page-dashboard .account-cards{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hs-gap);
}
.page-dashboard .account-cards .col,
.page-dashboard .account-cards > [class*='col-']{ width:auto !important; flex:initial !important; }
.page-dashboard .account-cards .card{ height:100%; }
.page-dashboard .stat-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--hs-gap);
}

/* 8) صفحات (رفع/معلقات/تقارير/استيراد) — تخفيف الفراغ العلوي */
.page-upload_bank .sheet,
.page-pending .sheet,
.page-reports .sheet,
.page-imports .sheet,
.page-settings .sheet,
.page-users .sheet,
.page-activity .sheet,
.page-backup .sheet{
  margin-top: 10px;
}

/* 9) الإعدادات — توزيع ذكي (جدول + لوحة جانبية) */
.page-settings .settings-grid{
  display:grid;
  grid-template-columns: minmax(520px, 1fr) minmax(340px, 420px);
  gap: var(--hs-gap);
  align-items:start;
}
@media (max-width: 1199.98px){
  .page-settings .settings-grid{ grid-template-columns: 1fr; }
}

/* 10) التقارير — بطاقات بارتفاع موحّد */
.page-reports .report-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--hs-gap);
}
.page-reports .report-card{ height:100%; }

/* 11) المعلقات — منطقة التقسيم (Split) واضحة */
.split-box{
  border:1px solid rgba(15,23,42,.12);
  border-radius: var(--hs-radius-xl);
  background: rgba(255,255,255,.62);
  padding: 14px;
}
.split-box .row{ row-gap: 10px; }

/* 12) سكرول للجداول الكبيرة */
.table-responsive{ border-radius: var(--hs-radius-xl); border:1px solid rgba(15,23,42,.08); }

/* 13) الطباعة — ملاحظات أكبر + ترقيم صفحات (قدر الإمكان) */
.print-footer{ display:none; }
@media print{
  .print-footer{
    display:block;
    position: fixed;
    bottom: 6mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    color: rgba(0,0,0,.6);
  }
  /* محاولة ترقيم الصفحات (Chrome يدعم counter(page) غالباً) */
  .print-footer::after{ content: "صفحة " counter(page); }

  /* صفحات طباعة مُقسّمة (page=account_print) */
  .print-pack{ padding:0 !important; }
  .print-section{ page-break-after: always; break-after: page; }
  .print-section:last-child{ page-break-after: auto; break-after: auto; }
  .print-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; margin-bottom: 8px; }
  .print-head .title{ font-size: 16px; font-weight: 900; }
  .print-head .meta{ font-size: 10px; color: rgba(0,0,0,.65); }
  .print-foot{ display:flex; justify-content:space-between; align-items:center; margin-top: 8px; font-size: 10px; color: rgba(0,0,0,.65); }

  /* أعطِ الملاحظات مساحة أكبر في كشف الحساب/الطباعة */
  .print-notes, .notes, .tx-notes{ font-size: 11px !important; line-height: 1.55 !important; white-space: normal !important; }
  .print-desc, .desc, .tx-desc{ font-size: 10px !important; color:#000 !important; white-space: normal !important; }

  /* إذا كانت الصفحة تطبع الجدول نفسه (account_view) */
  .stmt-table{ table-layout: fixed; }
  .stmt-table th, .stmt-table td{ padding: 6px 8px !important; vertical-align: top; }
  .stmt-table td:nth-child(3), .stmt-table th:nth-child(3){ width: 26% !important; }
  .stmt-table td:nth-child(7), .stmt-table th:nth-child(7){ width: 40% !important; }
}

/* 14) تحسين الجوال — منع الانحشار */
@media (max-width: 991.98px){
  .content-wrap{ padding-inline: 12px !important; }
  .page-dashboard .stat-row,
  .page-dashboard .account-cards,
  .page-reports .report-cards{ grid-template-columns: 1fr !important; }
  .table-responsive{ overflow-x:auto; }
}