*{font-family:'Cairo',sans-serif!important}
body{background:#f0f4f8;color:#2c3e50;min-height:100vh;display:flex;flex-direction:column}
.card{border:none;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.07);transition:box-shadow .2s}
.card:hover{box-shadow:0 4px 20px rgba(0,0,0,.12)}
.card-header{border-radius:12px 12px 0 0!important;font-weight:600;border-bottom:2px solid rgba(0,0,0,.08)}
.stat-card{border-radius:14px;padding:1.4rem;color:#fff;position:relative;overflow:hidden}
.stat-card .stat-icon{font-size:3rem;opacity:.22;position:absolute;left:-8px;bottom:-8px}
.stat-card .stat-num{font-size:1.9rem;font-weight:700}
.stat-card .stat-label{font-size:.88rem;opacity:.9}
.table th{background:#f8fafc;font-weight:600;font-size:.88rem;white-space:nowrap}
.table td{vertical-align:middle;font-size:.87rem}
.table-hover tbody tr:hover{background:#eef3f9}
.badge{font-weight:500;font-size:.77rem;padding:.35em .7em}
.btn{border-radius:8px;font-weight:500}
.btn-sm{font-size:.8rem}
.form-control,.form-select{border-radius:8px;border-color:#d0d7de;font-size:.9rem}
.form-control:focus,.form-select:focus{border-color:#2e86c1;box-shadow:0 0 0 3px rgba(46,134,193,.15)}
.form-label{font-weight:600;color:#34495e;margin-bottom:3px}
.page-title{font-size:1.35rem;font-weight:700;color:#1a5276;border-right:4px solid #2e86c1;padding-right:12px;margin-bottom:1.25rem}
.alert{border-radius:10px;border:none}
.timeline{position:relative;padding-right:2rem}
.timeline::before{content:'';position:absolute;right:12px;top:0;bottom:0;width:2px;background:#dee2e6}
.timeline-item{position:relative;margin-bottom:1.5rem}
.timeline-dot{position:absolute;right:-2rem;top:4px;width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #2e86c1;background:#2e86c1}
.timeline-dot.done{background:#28a745;box-shadow:0 0 0 2px #28a745}
.timeline-dot.wait{background:#ffc107;box-shadow:0 0 0 2px #ffc107}
@media print{.jas-sidebar,.jas-topbar,.top-header,.btn,.no-print{display:none!important}.card{box-shadow:none!important;border:1px solid #ddd!important}body{background:#fff!important}.jas-main{padding:0!important}.jas-layout{display:block!important}}

/* ===== Nav Tabs (RTL-safe) ===== */
.nav-tabs{border-bottom:2px solid #dee2e6;gap:4px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tabs .nav-link{color:#495057;font-size:.87rem;font-weight:600;padding:.45rem 1.1rem;border:1px solid transparent;border-radius:8px 8px 0 0;white-space:nowrap;transition:background .15s,color .15s}
.nav-tabs .nav-link:hover{color:#0f3460;background:#f0f4f8;border-color:#dee2e6 #dee2e6 transparent}
.nav-tabs .nav-link.active{color:#0f3460;background:#fff;border-color:#dee2e6 #dee2e6 #fff;border-bottom-color:transparent;margin-bottom:-2px}
.nav-pills .nav-link{font-size:.87rem;font-weight:600;padding:.4rem 1rem;border-radius:20px}
.nav-pills .nav-link.active{background:#0f3460}

/* ===== Sidebar Layout ===== */
.jas-topbar{background:#0e3a75;padding:5px 14px;display:flex;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid rgba(255,255,255,.08)}

/* Grid layout — RTL: first column = right side, second = left side */
/* grid-template-columns: sidebar(240px) | main(1fr) — in RTL col-1 is on the RIGHT */
.jas-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  min-height:calc(100vh - 128px);
  flex:1;
}
.jas-sidebar{
  grid-column:1;          /* right side in RTL */
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  background:linear-gradient(180deg,#061e3f 0%,#0a2d5e 100%);
  display:flex;
  flex-direction:column;
  border-left:2px solid rgba(255,255,255,.06);
}
.jas-main{
  grid-column:2;          /* left side in RTL */
  min-width:0;
  padding:22px 20px;
  background:#f0f4f8;
  overflow-x:hidden;
}

/* Sidebar internals */
.sidebar-user{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}
.sidebar-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0;border:2px solid rgba(255,255,255,.3)}
.sidebar-uname{font-size:.83rem;font-weight:700;color:#fff;line-height:1.3;word-break:break-word}
.sidebar-urole{font-size:.7rem;color:rgba(255,255,255,.5)}
.snav-section-lbl{font-size:.64rem;letter-spacing:.6px;color:rgba(255,255,255,.38);padding:10px 16px 3px;text-transform:uppercase;font-weight:600;display:block}
.jas-sidebar .snav-link{color:rgba(255,255,255,.78);padding:9px 16px;display:flex;align-items:center;gap:10px;font-size:.87rem;transition:background .15s,color .15s;border-right:3px solid transparent;text-decoration:none}
.jas-sidebar .snav-link:hover{background:rgba(255,255,255,.09);color:#fff}
.jas-sidebar .snav-link.active{background:rgba(255,255,255,.14);color:#fff;border-right-color:#5dade2}
.jas-sidebar .snav-link i{font-size:.95rem;width:20px;text-align:center;flex-shrink:0}
.snav-divider{border-color:rgba(255,255,255,.12);margin:5px 14px}

/* Mobile overlay */
.jas-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1049}
.jas-overlay.show{display:block}

/* Tablet (992–1199px) */
@media(max-width:1199px){
  .jas-layout{grid-template-columns:210px 1fr}
}

/* Mobile (≤991px): collapse to single column */
@media(max-width:991px){
  .jas-layout{display:block;min-height:auto}
  .jas-sidebar{
    position:fixed;
    top:0;right:0;
    height:100%;
    width:270px;
    z-index:1050;
    transform:translateX(110%);
    transition:transform .28s ease;
    grid-column:unset;
  }
  .jas-sidebar.open{transform:translateX(0)}
  .jas-main{grid-column:unset;padding:14px 12px}
}
@media(max-width:575px){
  .page-title{font-size:1rem}
  .stat-card .stat-num{font-size:1.4rem}
  .stat-card{padding:1rem}
}