/*
  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;}

/* Lock outer scrolling; allow inner scrolling only when content is long */
body{overflow:hidden !important; overscroll-behavior: none;}

.app-shell{
  height:100vh;
  min-height:100vh;
  overflow:hidden;
}

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

.content-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
}

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

html,body{height:100%;}

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{
  min-height:100vh;
  display:flex;
  flex-direction:row; /* RTL: first item appears on the right */
}

.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; 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;}

.app-main{min-width:0;}

/* 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;}

/* Content */
.content-wrap{
  max-width:1320px;
  margin-inline:auto;
  padding-inline:16px;
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
}
.card.shadow-sm{box-shadow:0 14px 36px rgba(2,6,23,.08) !important;}

.card{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.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{
  background:linear-gradient(135deg, rgba(13,148,136,.16), rgba(79,70,229,.14)), var(--card);
  border:1px solid rgba(79,70,229,.12);
}
.hero-card h4{font-weight:900;}

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

.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;}

/* 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;}

/* Semantic soft badges (financial) */
.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);}

/* 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;}

/* 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);}


/* 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;}

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

  /* Keep colors where useful (Chrome) */
  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }

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

  /* allow normal print flow */
  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; }

  /* tables */
  .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; }

  /* ✅ Use auto layout so long Arabic text can breathe */
  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; }

  /* make numbers always LTR */
  .num{ direction:ltr !important; unicode-bidi:bidi-override !important; }

  /* Account statement specific */
  .stmt-memo{ white-space:normal !important; word-break:break-word !important; }
  .stmt-table th:nth-child(1), .stmt-table td:nth-child(1){ width:11%; } /* تاريخ البنك */
  .stmt-table th:nth-child(2), .stmt-table td:nth-child(2){ width:11%; } /* تاريخ المتاجر */
  .stmt-table th:nth-child(3), .stmt-table td:nth-child(3){ width:44%; } /* البيان */
  .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:14%; } /* الرصيد */

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

  /* badges simplified */
  .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.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.is-collapsed .sidebar-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  transition:background .15s ease, transform .15s ease, color .15s ease;
  position:relative;
}
  .sidebar.is-collapsed .sidebar-nav a i{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
  .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;
}

.sidebar-brand-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* Sidebar collapse (Desktop) */
@media (min-width: 992px){
  .sidebar{transition:width .2s ease;}
  .sidebar.is-collapsed{width:86px;}
  .sidebar.is-collapsed .sidebar-brand-link,
  .sidebar.is-collapsed .sidebar-sub,
  .sidebar.is-collapsed .sidebar-nav .nav-label{
    display:none !important;
  }
  .sidebar.is-collapsed .sidebar-nav a{
    justify-content:center;
  }
  .sidebar.is-collapsed .sidebar-nav a i{
    margin:0 !important;
  }
}

/* =========================
   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; /* clicks pass through except the alert itself */
}
.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;}
}