:root {
  --navy:   #0B1F3A;
  --navy2:  #112845;
  --blue:   #1565C0;
  --blue2:  #1E88E5;
  --accent: #00BCD4;
  --gold:   #FFB300;
  --green:  #2E7D32;
  --green2: #43A047;
  --orange: #E65100;
  --red:    #C62828;
  --purple: #6A1B9A;
  --gray1:  #F4F7FB;
  --gray2:  #E8EEF6;
  --gray3:  #B0BEC5;
  --text:   #1A2A3A;
  --text2:  #4A6080;
  --white:  #FFFFFF;
  --card-sh:0 4px 24px rgba(21,101,192,0.10);
  --radius: 14px;
  --sb:     270px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--gray1);color:var(--text);min-height:100vh;display:flex;overflow-x:hidden}

/* ─── SIDEBAR ─── */
.sidebar{
  width:var(--sb);background:var(--navy);min-height:100vh;
  display:flex;flex-direction:column;position:fixed;top:0;right:0;
  z-index:200;box-shadow:-4px 0 30px rgba(0,0,0,0.2);
  transition:transform .3s;
}
.sb-logo{padding:24px 18px 18px;border-bottom:1px solid rgba(255,255,255,0.07);text-align:center}
.sb-icon{width:54px;height:54px;background:linear-gradient(135deg,var(--blue2),var(--accent));
  border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:28px;margin:0 auto 10px;box-shadow:0 4px 18px rgba(0,188,212,0.35)}
.sb-title{color:#fff;font-size:12.5px;font-weight:700;line-height:1.6}
.sb-sub{color:var(--accent);font-size:10.5px;font-weight:400}

.nav-sec{padding:14px 10px 4px}
.nav-sec-lbl{color:rgba(255,255,255,0.28);font-size:9.5px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;padding:0 8px;margin-bottom:5px}
/* text-decoration:none because the port turned these nav items from <div>s
   (as the original design had them — hence cursor:pointer) into <a>s, which
   the UA underlines. Only noticeable now that the sidebar is reachable on a
   phone, where every link showed underlined. */
.ni{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;
  color:rgba(255,255,255,0.6);cursor:pointer;transition:all .2s;font-size:13.5px;
  font-weight:500;margin-bottom:2px;position:relative;text-decoration:none}
.ni:hover{background:rgba(255,255,255,0.06);color:#fff}
.ni.active{background:linear-gradient(90deg,var(--blue2),var(--blue));color:#fff;
  box-shadow:0 4px 14px rgba(30,136,229,0.4)}
.ni .ni-icon{font-size:18px;flex-shrink:0}
.badge{margin-right:auto;background:var(--red);color:#fff;font-size:9.5px;
  font-weight:700;padding:2px 7px;border-radius:20px}
.badge.b-gold{background:var(--gold);color:var(--navy)}

.sb-user{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;gap:10px}
.sb-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--accent));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0}
.sb-uname{font-size:12px;color:rgba(255,255,255,0.8);font-weight:600;line-height:1.4}
.sb-urole{font-size:10px;color:rgba(255,255,255,0.4)}
.sb-logout{margin-right:auto;background:rgba(255,255,255,0.08);border:none;color:rgba(255,255,255,0.5);
  width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.sb-logout:hover{background:rgba(198,40,40,0.4);color:#fff}

/* ─── MAIN ─── */
.main{margin-right:var(--sb);flex:1;display:flex;flex-direction:column;min-height:100vh}

.topbar{background:#fff;padding:0 26px;height:64px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--gray2);position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.topbar-left{display:flex;align-items:center;gap:14px}
.topbar-title{font-size:16px;font-weight:700;color:var(--navy)}
.topbar-title span{color:var(--blue2)}
.breadcrumb{font-size:11px;color:var(--gray3)}
.topbar-right{display:flex;gap:8px;align-items:center}
.top-icon-btn{width:38px;height:38px;border-radius:9px;background:var(--gray1);border:1px solid var(--gray2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;
  color:var(--text2);transition:all .18s;position:relative}
.top-icon-btn:hover{background:var(--blue2);color:#fff;border-color:var(--blue2)}
.notif-dot{position:absolute;top:7px;left:7px;width:8px;height:8px;border-radius:50%;
  background:var(--red);border:2px solid #fff}

.content{padding:26px;flex:1}

/* ─── PAGES ─── */
.page{display:none}
.page.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .18s}
.btn-primary{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;
  box-shadow:0 3px 12px rgba(30,136,229,0.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(30,136,229,0.42)}
.btn-success{background:linear-gradient(135deg,var(--green2),var(--green));color:#fff;
  box-shadow:0 3px 10px rgba(67,160,71,0.3)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#b71c1c}
.btn-ghost{background:var(--gray2);color:var(--text2)}
.btn-ghost:hover{background:var(--gray3);color:var(--text)}
.btn-outline{background:transparent;color:var(--blue2);border:1.5px solid var(--blue2)}
.btn-outline:hover{background:var(--blue2);color:#fff}
.btn-sm{padding:6px 13px;font-size:12px;border-radius:7px}
.btn-ai{background:linear-gradient(135deg,#6A1B9A,#1565C0);color:#fff;
  box-shadow:0 3px 12px rgba(106,27,154,0.35)}
.btn-ai:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(106,27,154,0.5)}

/* ─── KPI ─── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:#fff;border-radius:var(--radius);padding:20px 18px;box-shadow:var(--card-sh);
  border-top:4px solid transparent;transition:transform .18s,box-shadow .18s;cursor:default}
.kpi:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(21,101,192,0.14)}
.kpi.c-blue{border-top-color:var(--blue2)}.kpi.c-green{border-top-color:var(--green2)}
.kpi.c-gold{border-top-color:var(--gold)}.kpi.c-red{border-top-color:var(--red)}
.kpi.c-teal{border-top-color:var(--accent)}.kpi.c-purple{border-top-color:var(--purple)}
.kpi-icon{font-size:26px;margin-bottom:8px}
.kpi-val{font-size:34px;font-weight:900;font-family:'Tajawal',sans-serif;line-height:1}
.kpi.c-blue .kpi-val{color:var(--blue2)}.kpi.c-green .kpi-val{color:var(--green2)}
.kpi.c-gold .kpi-val{color:var(--gold)}.kpi.c-red .kpi-val{color:var(--red)}
.kpi.c-teal .kpi-val{color:var(--accent)}.kpi.c-purple .kpi-val{color:var(--purple)}
.kpi-lbl{font-size:12px;font-weight:600;color:var(--text2);margin-top:4px}
.kpi-sub{font-size:10.5px;color:var(--gray3);margin-top:2px}

/* ─── CARD ─── */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--card-sh);overflow:hidden;margin-bottom:22px}
.card-hdr{padding:16px 20px;border-bottom:1px solid var(--gray2);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-title{font-size:14.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.card-body{padding:20px}
.card-body.p0{padding:0}

/* ─── TABLE ─── */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead tr{background:var(--gray1)}
thead th{padding:11px 13px;text-align:right;font-weight:700;color:var(--text2);
  font-size:11.5px;border-bottom:2px solid var(--gray2);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--gray2);transition:background .15s;cursor:pointer}
tbody tr:hover{background:#EEF4FF}
tbody td{padding:11px 13px;vertical-align:middle}
.th-sort{cursor:pointer;user-select:none;transition:color .15s}
.th-sort:hover{color:var(--blue2)}
.sort-ind{font-size:10px;color:var(--blue2)}

/* ─── TAG ─── */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:700;white-space:nowrap}
.tg{background:#E3F2FD;color:var(--blue)}
.tg-green{background:#E8F5E9;color:var(--green)}
.tg-orange{background:#FFF8E1;color:#E65100}
.tg-red{background:#FFEBEE;color:var(--red)}
.tg-teal{background:#E0F7FA;color:#00838F}
.tg-gray{background:var(--gray2);color:var(--text2)}
.tg-purple{background:#F3E5F5;color:var(--purple)}

/* ─── PROGRESS ─── */
.pbar{height:6px;background:var(--gray2);border-radius:10px;overflow:hidden;width:80px}
.pfill{height:100%;border-radius:10px;transition:width .4s}

/* ─── AVATAR ─── */
.av{width:32px;height:32px;background:linear-gradient(135deg,var(--blue2),var(--accent));
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;font-weight:700;flex-shrink:0}

/* ─── SEARCH ─── */
.search-box{display:flex;align-items:center;gap:8px;background:var(--gray1);
  border:1.5px solid var(--gray2);border-radius:9px;padding:8px 13px}
.search-box input{border:none;background:transparent;font-family:'Cairo',sans-serif;
  font-size:13px;color:var(--text);outline:none;width:200px}

/* ─── FILTER CHIPS ─── */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;
  border:1.5px solid var(--gray2);color:var(--text2);background:#fff;transition:all .18s}
.chip:hover{border-color:var(--blue2);color:var(--blue2)}
.chip.active{background:var(--blue2);color:#fff;border-color:var(--blue2)}

/* ─── MODAL ─── */
.ov{display:none;position:fixed;inset:0;background:rgba(11,31,58,0.55);z-index:1000;
  align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.ov.open{display:flex}
.modal{background:#fff;border-radius:18px;width:760px;max-width:97vw;
  max-height:92vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,0.22);animation:slideUp .25s ease}
.modal.w-sm{width:480px}
.modal.w-lg{width:920px}
@keyframes slideUp{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.modal-hdr{padding:20px 24px;border-bottom:1px solid var(--gray2);display:flex;
  align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:2;border-radius:18px 18px 0 0}
.modal-title{font-size:15px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.modal-close{width:32px;height:32px;border-radius:8px;background:var(--gray2);border:none;
  cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--text2)}
.modal-close:hover{background:#FFCDD2;color:var(--red)}
.modal-body{padding:22px 24px}
.modal-footer{padding:14px 24px;border-top:1px solid var(--gray2);display:flex;gap:9px}

/* ─── FORM ─── */
.fg{display:flex;flex-direction:column;gap:6px}
.fg.full{grid-column:1/-1}
.fg.span2{grid-column:span 2}
.flbl{font-size:11.5px;font-weight:600;color:var(--text2)}
.fc{padding:10px 13px;border:1.5px solid var(--gray2);border-radius:9px;
  font-family:'Cairo',sans-serif;font-size:13px;color:var(--text);outline:none;
  background:var(--gray1);transition:border-color .18s,box-shadow .18s;width:100%}
.fc:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(30,136,229,0.1);background:#fff}
select.fc{cursor:pointer}
textarea.fc{resize:vertical;min-height:68px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.fsec{font-size:11.5px;font-weight:700;color:var(--blue2);letter-spacing:.5px;
  text-transform:uppercase;padding-bottom:7px;border-bottom:2px solid var(--gray2);
  margin:18px 0 12px;grid-column:1/-1}

/* ─── TIMELINE ─── */
.tl{position:relative;padding:6px 0}
.tl-item{display:flex;gap:14px;padding:10px 0;position:relative}
.tl-item::before{content:'';position:absolute;right:17px;top:36px;bottom:-10px;
  width:2px;background:var(--gray2)}
.tl-item:last-child::before{display:none}
.tl-dot{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:15px;border:3px solid #fff;
  box-shadow:0 0 0 2px var(--gray2)}
.tl-dot.done{background:var(--green2);color:#fff;box-shadow:0 0 0 2px var(--green2)}
.tl-dot.active{background:var(--blue2);color:#fff;box-shadow:0 0 0 3px rgba(30,136,229,0.3)}
.tl-dot.wait{background:var(--gold);color:#fff}
.tl-dot.late{background:var(--red);color:#fff;box-shadow:0 0 0 3px rgba(198,40,40,0.3)}
.tl-dot.pen{background:var(--gray2);color:var(--gray3)}
.tl-name{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:3px}
.tl-meta{font-size:11px;color:var(--text2);display:flex;flex-wrap:wrap;gap:8px}

/* ─── CHARTS ─── */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:22px;padding:18px}
.leg-item{display:flex;align-items:center;gap:7px;font-size:12px}
.leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bar-lbl{width:60px;font-size:12px;color:var(--text2);text-align:right;flex-shrink:0}
.bar-track{flex:1;height:10px;background:var(--gray2);border-radius:10px;overflow:hidden}
.bar-fill{height:100%;border-radius:10px;transition:width .6s}
.bar-num{width:24px;font-size:12px;font-weight:700;color:var(--text)}

/* ─── TOAST ─── */
.toast-wrap{position:fixed;bottom:22px;left:22px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:11px;
  font-size:13px;font-weight:600;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,0.18);
  animation:toastIn .3s ease;min-width:220px}
@keyframes toastIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.toast.ts{background:var(--green2)}.toast.te{background:var(--red)}.toast.ti{background:var(--blue2)}
.toast.tw{background:var(--gold);color:var(--navy)}

/* ─── USERS PAGE ─── */
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.user-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--card-sh);
  transition:transform .18s,box-shadow .18s}
.user-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(21,101,192,0.14)}
.uc-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.uc-av{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.uc-name{font-size:14.5px;font-weight:700;color:var(--navy)}
.uc-role{font-size:11px;color:var(--text2);margin-top:2px}
.uc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;
  padding-top:12px;border-top:1px solid var(--gray2)}
.uc-stat-v{font-size:18px;font-weight:900;font-family:'Tajawal',sans-serif;color:var(--blue2)}
.uc-stat-l{font-size:10px;color:var(--text2)}
.uc-actions{display:flex;gap:7px;margin-top:12px}

/* ─── AI ASSISTANT ─── */
.ai-panel{background:linear-gradient(135deg,#0B1F3A 0%,#1565C0 100%);border-radius:var(--radius);
  padding:20px;color:#fff;margin-bottom:22px;position:relative;overflow:hidden}
.ai-panel::before{content:'';position:absolute;top:-30px;left:-30px;width:150px;height:150px;
  background:rgba(0,188,212,0.1);border-radius:50%}
.ai-panel::after{content:'';position:absolute;bottom:-20px;right:40px;width:100px;height:100px;
  background:rgba(106,27,154,0.15);border-radius:50%}
.ai-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px;position:relative}
.ai-title{font-size:15px;font-weight:700}
.ai-sub{font-size:11px;opacity:.7}
.ai-chat{background:rgba(255,255,255,0.08);border-radius:11px;padding:14px;
  min-height:100px;max-height:280px;overflow-y:auto;margin-bottom:12px;position:relative}
.ai-msg{margin-bottom:10px}
.ai-msg-lbl{font-size:10.5px;opacity:.6;margin-bottom:3px}
.ai-msg-text{font-size:13px;line-height:1.6;background:rgba(255,255,255,0.1);
  padding:10px 13px;border-radius:10px;display:inline-block;max-width:88%}
.ai-msg-text.usr{background:rgba(0,188,212,0.25);text-align:right}
.ai-input-row{display:flex;gap:9px;position:relative}
.ai-inp{flex:1;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);
  border-radius:9px;padding:10px 14px;color:#fff;font-family:'Cairo',sans-serif;
  font-size:13px;outline:none}
.ai-inp::placeholder{color:rgba(255,255,255,0.45)}
.ai-inp:focus{border-color:var(--accent);background:rgba(255,255,255,0.18)}
.ai-send{background:var(--accent);border:none;color:var(--navy);width:40px;height:40px;
  border-radius:9px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;
  font-weight:700;transition:all .18s}
.ai-send:hover{background:#00E5FF;transform:scale(1.05)}
.ai-typing{display:none;font-size:12px;opacity:.6;margin-bottom:6px}
.ai-typing.show{display:block}

/* ─── REPORTS ─── */
.rep-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.rep-stat{background:#fff;border-radius:12px;padding:16px;box-shadow:var(--card-sh);text-align:center}
.rep-stat-v{font-size:28px;font-weight:900;font-family:'Tajawal',sans-serif}
.rep-stat-l{font-size:11.5px;color:var(--text2);margin-top:4px}

/* ─── DETAIL VIEW ─── */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.detail-field{display:flex;flex-direction:column;gap:4px}
.df-lbl{font-size:11px;font-weight:600;color:var(--text2)}
.df-val{font-size:13.5px;font-weight:600;color:var(--navy)}
.detail-full{grid-column:1/-1}

/* ─── STAGE STEPPER ─── */
.stepper{display:flex;align-items:flex-start;gap:0;margin-bottom:18px;overflow-x:auto;padding-bottom:6px}
.step{display:flex;flex-direction:column;align-items:center;flex:1;min-width:80px;position:relative}
.step::before{content:'';position:absolute;top:16px;left:-50%;right:50%;height:2px;background:var(--gray2);z-index:0}
.step:first-child::before{display:none}
.step-dot{width:34px;height:34px;border-radius:50%;border:3px solid var(--gray2);background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  color:var(--gray3);z-index:1;position:relative;transition:all .3s}
.step.done .step-dot{background:var(--green2);border-color:var(--green2);color:#fff}
.step.done::before{background:var(--green2)}
.step.active .step-dot{background:var(--blue2);border-color:var(--blue2);color:#fff;
  box-shadow:0 0 0 4px rgba(30,136,229,0.2)}
.step-lbl{font-size:10px;color:var(--text2);margin-top:6px;text-align:center;line-height:1.4}
.step.done .step-lbl{color:var(--green2);font-weight:600}
.step.active .step-lbl{color:var(--blue2);font-weight:700}

/* ─── EMPTY STATE ─── */
.empty{text-align:center;padding:50px 20px;color:var(--text2)}
.empty-icon{font-size:48px;margin-bottom:14px;opacity:.5}
.empty-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px}
.empty-sub{font-size:13px}

/* ─── LANDING ─── */
#landing{position:fixed;inset:0;overflow-y:auto;
  background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 60%,var(--accent) 100%);
  display:flex;align-items:center;justify-content:center;padding:24px}
.landing-inner{width:100%;max-width:1180px;text-align:center}
/* Never cropped: the headline and phone number are baked into the pixels, so
   a cover-crop would cut the page's only content in half on a narrow screen.
   The gradient shows through as letterbox bars instead. */
.landing-banner{width:100%;height:auto;border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,0.45)}
.landing-cta{margin-top:28px;font-size:15px;padding:13px 42px}

/* ─── LOGIN ─── */
#login-screen{position:fixed;inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,0.62) 0%,rgba(0,0,0,0.45) 55%,rgba(0,0,0,0.66) 100%),
             url('/images/login-bg.jpg') center/cover no-repeat,
             linear-gradient(135deg,var(--navy) 0%,var(--blue) 60%,var(--accent) 100%);
  display:flex;align-items:center;justify-content:center;z-index:9999}
.login-box{background:#fff;border-radius:22px;padding:40px 36px;width:400px;max-width:95vw;
  box-shadow:0 30px 80px rgba(0,0,0,0.35);text-align:center}
.login-icon{font-size:48px;margin-bottom:6px}
.login-title{font-size:22px;font-weight:900;color:var(--navy);margin-bottom:4px}
.login-sub{font-size:12.5px;color:var(--text2);margin-bottom:28px}
.login-fg{text-align:right;margin-bottom:14px}
.login-lbl{font-size:12px;font-weight:600;color:var(--text2);display:block;margin-bottom:5px}
.login-users{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.login-user-btn{padding:9px 12px;border-radius:10px;border:1.5px solid var(--gray2);
  background:#fff;cursor:pointer;text-align:right;transition:all .18s}
.login-user-btn:hover{border-color:var(--blue2);background:var(--gray1)}
.lun{font-size:12.5px;font-weight:700;color:var(--navy)}
.lur{font-size:10.5px;color:var(--text2)}
.login-divider{text-align:center;font-size:11px;color:var(--gray3);margin:10px 0}

/* ─── NOTIFICATION PANEL ─── */
.notif-panel{position:absolute;top:48px;left:0;width:340px;background:#fff;border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,0.15);z-index:300;border:1px solid var(--gray2);display:none}
.notif-panel.open{display:block;animation:slideUp .2s ease}
.notif-hdr{padding:14px 16px;border-bottom:1px solid var(--gray2);font-size:13.5px;font-weight:700;color:var(--navy)}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--gray2);display:flex;gap:10px;cursor:pointer;transition:background .15s}
.notif-item:hover{background:var(--gray1)}
.notif-item:last-child{border-bottom:none}
.ni-icon2{font-size:20px;flex-shrink:0}
.ni-text{font-size:12.5px;color:var(--text);line-height:1.5}
.ni-time{font-size:10.5px;color:var(--gray3);margin-top:2px}
.ni-unread{background:#EEF4FF}

/* Responsive rules live in one block at the END of this file. They used to sit
   here, ahead of the phase-1 components below, where later rules of equal
   specificity silently beat them. */
.icon{width:18px;height:18px;display:inline-block;vertical-align:middle;fill:currentColor;margin-inline-start:8px}
.ni-icon{font-size:18px;display:inline-flex;align-items:center;justify-content:center}

/* ══════════════════════════════════════════════════════════════════
   PHASE-1 COMPONENTS
   Markup introduced by the Laravel port (tables, forms, notes,
   history, attachments, chat). Uses the tokens defined above so the
   new screens read as part of the original design.
   ══════════════════════════════════════════════════════════════════ */

/* Bare .btn in the Blade markup defaults to the primary fill. */
.btn{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;
  box-shadow:0 3px 12px rgba(30,136,229,.3);text-decoration:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(30,136,229,.42)}
.btn.b-gold{background:linear-gradient(135deg,var(--gold),#FF8F00);
  box-shadow:0 3px 12px rgba(255,179,0,.35)}

/* ─── DATA TABLE ─── */
.deals-table{width:100%;border-collapse:collapse;font-size:13.5px}
.deals-table thead th{background:var(--gray1);color:var(--navy);font-weight:700;
  text-align:right;padding:13px 16px;border-bottom:2px solid var(--gray2);
  white-space:nowrap;cursor:pointer;user-select:none;transition:background .15s}
.deals-table thead th:hover{background:var(--gray2)}
.deals-table tbody td{padding:12px 16px;border-bottom:1px solid var(--gray2);color:var(--text)}
.deals-table tbody tr:hover{background:var(--gray1)}
.deals-table tbody tr:last-child td{border-bottom:none}
.deals-table a{color:var(--blue);font-weight:600;text-decoration:none}
.deals-table a:hover{text-decoration:underline}

/* ─── SEARCH ─── */
.search{flex:1;min-width:220px;padding:10px 14px;border:1.5px solid var(--gray2);
  border-radius:9px;font-family:'Tajawal',sans-serif;font-size:13.5px;
  color:var(--text);background:#fff;transition:border-color .18s,box-shadow .18s}
.search:focus{outline:none;border-color:var(--blue2);box-shadow:0 0 0 3px rgba(30,136,229,.14)}

/* ─── FORMS ─── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;padding:20px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;
  font-weight:600;color:var(--text2)}
.form-grid label.full{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{padding:10px 13px;
  border:1.5px solid var(--gray2);border-radius:9px;font-family:'Tajawal',sans-serif;
  font-size:13.5px;color:var(--text);background:#fff;transition:border-color .18s,box-shadow .18s}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:none;border-color:var(--blue2);box-shadow:0 0 0 3px rgba(30,136,229,.14)}
.form-grid input:disabled{background:var(--gray1);color:var(--text2)}
.form-grid textarea{min-height:88px;resize:vertical}
.form-grid button{grid-column:1/-1;justify-self:start}

/* ─── KEY / VALUE DETAIL LIST ─── */
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;padding:20px;margin:0}
.kv dt{font-size:12.5px;font-weight:700;color:var(--text2);white-space:nowrap}
.kv dd{margin:0;font-size:13.5px;color:var(--text);font-weight:600}

/* ─── NOTES / HISTORY / ATTACHMENTS ─── */
.note,.hist,.att{padding:13px 20px;border-bottom:1px solid var(--gray2);font-size:13px;
  color:var(--text);line-height:1.7}
.note:last-child,.hist:last-child,.att:last-child{border-bottom:none}
.note b,.hist b,.att b{color:var(--navy);font-weight:700}
.hist s{color:var(--red);opacity:.75}
.att a{color:var(--blue);font-weight:600;text-decoration:none}
.att a:hover{text-decoration:underline}
.att span{color:var(--text2);font-size:12px;margin-right:6px}
.note textarea,.att input[type=file]{width:100%;margin-bottom:9px;padding:10px 13px;
  border:1.5px solid var(--gray2);border-radius:9px;font-family:'Tajawal',sans-serif;font-size:13.5px}

/* Forms sitting directly inside a card (notes, attachments, deliver). */
.card>form{padding:16px 20px;border-bottom:1px solid var(--gray2)}
.card>form textarea{width:100%;min-height:74px;margin-bottom:9px;padding:10px 13px;
  border:1.5px solid var(--gray2);border-radius:9px;font-family:'Tajawal',sans-serif;
  font-size:13.5px;resize:vertical}
.card>form textarea:focus{outline:none;border-color:var(--blue2);box-shadow:0 0 0 3px rgba(30,136,229,.14)}
/* The AI composer is a bare <input> with no class, so it rendered at the
   browser default width — a stub next to its button. Match the textarea
   above; the mobile block gives it its own line. */
.card>form input[type=text],.card>form input:not([type]){padding:10px 13px;
  border:1.5px solid var(--gray2);border-radius:9px;
  font-family:'Tajawal',sans-serif;font-size:13.5px;min-width:0}
.card>form input[type=text]:focus,.card>form input:not([type]):focus{
  outline:none;border-color:var(--blue2);box-shadow:0 0 0 3px rgba(30,136,229,.14)}

/* ─── STAGE ROWS ─── */
.stage-row{display:block;padding:11px 20px;border-bottom:1px solid var(--gray2);
  font-size:13.5px;color:var(--text);text-decoration:none;transition:background .15s}
.stage-row:hover{background:var(--gray1);color:var(--blue)}
.stage-row:last-child{border-bottom:none}

/* ─── AI CHAT ─── */
.chat-log{padding:20px;max-height:460px;overflow-y:auto;display:flex;
  flex-direction:column;gap:11px}
.chat-msg{padding:11px 15px;border-radius:12px;background:var(--gray1);
  font-size:13.5px;line-height:1.8;color:var(--text)}
.chat-msg b{color:var(--blue);font-weight:700}
.chat-log .chat-msg:nth-child(odd){background:rgba(21,101,192,.07)}

/* ─── ALERTS ─── */
.err{margin:0 20px 16px;padding:12px 16px;border-radius:9px;background:#FFEBEE;
  color:var(--red);border-right:4px solid var(--red);font-size:13px;font-weight:600}

/* Flash messages render inline in the content flow (not in .toast-wrap),
   so the bare .toast needs its own fill — the base rule sets white text
   on no background, which would be invisible. */
.content>.toast{background:var(--green2);margin-bottom:18px;display:inline-flex}

/* ─── PRINT ───
   Shared across every page: only the data itself (tables, key/value lists)
   is meant to reach paper — chrome (sidebar, topbar, buttons, forms, nav
   links) is all app navigation/actions with no place on a printed page. */
@media print {
  .sidebar, .topbar, .btn, form, nav,
  .sb-toggle, .sb-backdrop { display: none !important; }
  /* A drawer left open at print time would otherwise lock the body to the
     viewport and print a single clipped page. */
  body.sb-locked { position: static !important; overflow: visible !important; top: auto !important; }
  .main { margin-right: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff !important; }
  table, .deals-table, .kv { width: 100% !important; color: #000 !important; background: #fff !important; }
  .card { box-shadow: none !important; border: 1px solid #000; margin-bottom: 12px; }
  thead th, tbody td { color: #000 !important; border-color: #000 !important; }
}

/* ─── SIDEBAR SCROLLING ───
   The sidebar is position:fixed, so anything taller than the viewport is
   simply unreachable — there is no page scroll to bring it into view. Cap
   it to the viewport and let the nav region scroll on its own, keeping the
   logo pinned to the top and the user/logout block to the bottom. */
/* overflow-y:auto, NOT hidden. If the .sb-nav wrapper below is present the
   nav scrolls on its own and this never triggers; if it is missing (an older
   cached Blade, say) the whole sidebar scrolls instead. `hidden` here would
   clip the overflow with no way to reach it. */
.sidebar{height:100vh;overflow-y:auto;overscroll-behavior:contain}
.sb-logo,.sb-user{flex:0 0 auto}
.sb-nav{
  flex:1 1 auto;
  min-height:0;              /* without this a flex child refuses to shrink */
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.20) transparent;
}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-track{background:transparent}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:3px}
.sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34)}

/* ─── EXTRA KPI ACCENTS ───
   The ported stylesheet defines six .kpi colour variants; the rebuilt
   dashboard shows seven tiles. Adding orange and navy so no two adjacent
   tiles have to share an accent. */
.kpi.c-orange{border-top-color:var(--orange)}
.kpi.c-orange .kpi-val{color:var(--orange)}
.kpi.c-navy{border-top-color:var(--navy)}
.kpi.c-navy .kpi-val{color:var(--navy)}

/* ─── INLINE FIELD ERRORS ───
   `.err` is a page-level banner (wide margins, own row). Validation messages
   sitting under a single input need something tighter, so forms don't jump
   apart when one field fails. */
.field-err{
  color:var(--red);
  font-size:11.5px;
  font-weight:600;
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:5px;
}
.fc.is-invalid{border-color:var(--red)}
.fc.is-invalid:focus{box-shadow:0 0 0 3px rgba(198,40,40,.14)}

/* Sidebar scrollbar, shown only when the whole sidebar has to scroll
   (i.e. the .sb-nav wrapper is absent). Matches the .sb-nav styling. */
.sidebar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:3px}

/* Below ~820px tall the sidebar simply cannot fit its sections; drop the
   vertical rhythm so more fits before scrolling is needed at all. */
@media (max-height:820px){
  .sb-logo{padding:14px 18px 12px}
  .sb-icon{width:40px;height:40px;font-size:20px;margin-bottom:6px}
  .nav-sec{padding:9px 10px 2px}
  .ni{padding:8px 13px;font-size:13px}
}

/* ─── FIELD HINTS ───
   Short guidance under an input — e.g. telling the user a datalist-backed
   field accepts values that are not in the suggestion list. Quieter than a
   label, and must not be confused with .field-err. */
.fhint{
  font-size:11px;
  color:var(--text2);
  margin-top:4px;
  opacity:.85;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   Everything viewport-dependent lives here, at the end of the file, so
   it beats the component rules above at equal specificity instead of
   racing them. Three breakpoints:

     1024px — tablet: narrow the sidebar, relax two-column grids
      900px — the sidebar becomes a drawer (matches BREAKPOINT in app.js)
      600px — phone: single column, full-bleed modals, 16px inputs

   Keep the 900px value in sync with public/js/app.js if it ever moves.
   ══════════════════════════════════════════════════════════════════ */

/* ─── DRAWER CHROME ───
   Present at every width but only shown below 900px, so the desktop
   layout is untouched. */
.sb-toggle{
  display:none;                /* flipped to inline-flex in the 900px block */
  align-items:center;justify-content:center;
  width:42px;height:42px;flex-shrink:0;
  border:1px solid var(--gray2);border-radius:9px;
  background:var(--gray1);color:var(--text2);
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.sb-toggle:hover{background:var(--blue2);color:#fff;border-color:var(--blue2)}
.sb-toggle .icon{width:22px;height:22px;margin:0}

.sb-backdrop{
  display:none;                /* flipped to block in the 900px block */
  position:fixed;inset:0;
  background:rgba(11,31,58,.5);
  backdrop-filter:blur(2px);
  z-index:190;                 /* under .sidebar (200), over everything else */
}
.sb-backdrop[hidden]{display:none}

/* Set on <body> while the drawer is open. position:fixed rather than
   overflow:hidden because iOS Safari ignores the latter on body. Taking
   body out of flow makes the viewport show the top of the document, so
   app.js pins `top` to the negative scroll offset to hold the view still
   and restores the offset on close. */
body.sb-locked{position:fixed;width:100%;overflow:hidden}

/* Long Arabic page titles must not shove the topbar buttons off-screen. */
.topbar-heading{min-width:0}
.topbar-title,.breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* body is display:flex and .main is its flex item, whose default
   min-width:auto refuses to shrink below its content. A table wider than
   the screen therefore stretched .main — and with it the whole page —
   instead of scrolling inside its own .tbl-wrap, so every screen scrolled
   sideways and the RTL content ran off the right edge. min-width:0 lets
   the item shrink so the overflow stays where it belongs. */
.main{min-width:0;max-width:100%}

/* Any table can outgrow a phone; the wrapper is what makes it swipeable.
   .card sets overflow:hidden, so an unwrapped table is clipped outright
   rather than merely overflowing. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* ─── ≤1024px: TABLET ─── */
@media (max-width:1024px){
  :root{--sb:230px}
  .content{padding:20px}
  .charts-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px}
}

/* ─── ≤900px: SIDEBAR BECOMES A DRAWER ─── */
@media (max-width:900px){
  .sidebar{
    transform:translateX(100%);   /* RTL: parks off the right edge */
    width:min(300px,86vw);
    will-change:transform;
  }
  .sidebar.open{transform:none}
  .sb-backdrop{display:block}
  .sb-backdrop[hidden]{display:none}
  .sb-toggle{display:inline-flex}

  .main{margin-right:0}
  .topbar{padding:0 14px;gap:10px}
  .topbar-left{gap:10px;min-width:0;flex:1}
  .content{padding:16px 14px}

  .charts-grid,.fgrid,.fgrid3,.detail-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr;padding:16px}
  .fg.span2{grid-column:auto}

  /* auto 1fr collapses the value column to nothing once an Arabic label
     runs long; stack the pairs instead. */
  .kv{grid-template-columns:1fr;gap:2px 0;padding:16px}
  .kv dt{margin-top:10px}
  .kv dt:first-child{margin-top:0}

  /* 340px of fixed panel hangs off a 360px screen once the topbar's own
     padding is counted. */
  .notif-panel{width:min(340px,calc(100vw - 28px))}

  .toast-wrap{left:12px;right:12px;bottom:12px}
  .toast{min-width:0}
}

/* ─── ≤600px: PHONE ─── */
@media (max-width:600px){
  .content{padding:13px 11px}
  .topbar{height:58px;padding:0 11px}
  .topbar-title{font-size:14.5px}
  .breadcrumb{font-size:10px}
  .top-icon-btn{width:40px;height:40px}

  /* Two tiles per row beats one enormous one — the whole KPI strip stays
     glanceable without scrolling past it. */
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:10px;margin-bottom:16px}
  .kpi{padding:14px 12px}
  .kpi-val{font-size:26px}
  .kpi-icon{font-size:21px;margin-bottom:5px}
  .kpi-lbl{font-size:11.5px}
  .rep-stat-grid{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:10px}
  .rep-stat-v{font-size:22px}

  .card{margin-bottom:14px}
  .card-hdr{padding:13px 14px;gap:9px}
  .card-body{padding:14px}
  .card-title{font-size:13.5px}

  /* The search input and the action buttons share .card-hdr's flex row and
     each shrink to unusable stubs; give them a row apiece. */
  .card-hdr>.search,.card-hdr>#search-input{flex:1 1 100%;min-width:0;width:100%}
  .card-hdr>.btn,.card-hdr>form,.card-hdr>.search-box{flex:1 1 auto;justify-content:center}
  .search-box input{width:100%}

  /* Denser cells so fewer columns fall off the right edge before you swipe. */
  .deals-table{font-size:12.5px}
  .deals-table thead th,.deals-table tbody td{padding:10px 11px}
  table{font-size:12.5px}
  thead th,tbody td{padding:9px 10px}

  /* A centred 760px dialog on a phone is a sliver with margins; take the
     screen. dvh so the iOS URL bar cannot crop the footer. */
  .ov{align-items:flex-end}
  .modal,.modal.w-sm,.modal.w-lg{
    width:100%;max-width:100%;
    max-height:92dvh;
    border-radius:18px 18px 0 0;
  }
  .modal-hdr{padding:16px;border-radius:18px 18px 0 0}
  .modal-body{padding:16px}
  .modal-footer{padding:12px 16px;flex-wrap:wrap}
  .modal-footer .btn{flex:1 1 auto;justify-content:center}

  .users-grid{grid-template-columns:1fr}
  .login-users{grid-template-columns:1fr}
  .uc-actions{flex-wrap:wrap}
  .uc-actions .btn{flex:1 1 auto;justify-content:center}

  .stepper{gap:0}
  .step{min-width:66px}
  .step-lbl{font-size:9px}

  .donut-wrap{flex-direction:column;gap:14px}
  .bar-lbl{width:48px;font-size:11px}

  .note,.hist,.att{padding:12px 14px}
  .stage-row{padding:11px 14px}
  .err{margin:0 14px 13px}
  .card>form{padding:14px}
  /* Input and submit button stop fighting over one narrow row. */
  .card>form input[type=text],.card>form input:not([type]){width:100%;margin-bottom:9px}
  .card>form>.btn,.card>form>button{width:100%;justify-content:center}
  .chat-log{padding:14px;max-height:60dvh}

  .empty{padding:34px 16px}
  .empty-icon{font-size:38px}
}

/* ─── TOUCH INPUT ───
   Keyed off the pointer, not the width: a 1280px touchscreen needs the
   same target sizes a 380px one does, and a narrow desktop window does
   not. iOS zooms the viewport when a focused input's text is under 16px
   and never zooms back out, which is what makes the app feel broken
   after the first tap into a search box. */
@media (pointer:coarse){
  .fc,.search,.ai-inp,
  .form-grid input,.form-grid select,.form-grid textarea,
  .note textarea,.card>form textarea,
  input,select,textarea{font-size:16px}

  .btn{padding:11px 18px;min-height:42px}
  .btn-sm{padding:8px 14px;min-height:36px}
  .chip{padding:9px 15px;min-height:38px;display:inline-flex;align-items:center}
  .ni{padding:12px 13px}
  .sb-logout{width:36px;height:36px}
  .modal-close{width:38px;height:38px}
  .deals-table thead th{cursor:default}
}

/* ─── FULL-HEIGHT SCREENS ───
   #landing and #login-screen are position:fixed and vertically centred, so
   content taller than the viewport — the registration form on a short
   phone — has no scroll to reach it. inset:0 with overflow-y:auto plus
   auto margins keeps the centring while letting it scroll when it must. */
#landing,#login-screen{overflow-y:auto;-webkit-overflow-scrolling:touch;
  align-items:flex-start;justify-content:center;padding:24px 16px}
.landing-inner,.login-box{margin:auto}

@media (max-width:600px){
  #landing,#login-screen{padding:18px 13px}
  .login-box{padding:28px 20px;width:100%;max-width:100%}
  .login-title{font-size:19px}
  .landing-cta{margin-top:20px;padding:13px 32px;width:100%;justify-content:center}
}

/* ─── SHORT VIEWPORTS ───
   100vh on iOS is the URL-bar-hidden height, so a 100vh sidebar is taller
   than what you can actually see. dvh tracks the visible area. Guarded by
   @supports so browsers without dvh keep the vh value rather than none. */
@supports (height:100dvh){
  body{min-height:100dvh}
  .sidebar{height:100dvh;min-height:100dvh}
  .main{min-height:100dvh}
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}