/* Dashboard design system — taken from the approved prototype "1- الداشبورد.html"
   (navy + gold, Tajawal), extended with tables, forms, dialogs and badges in the same style. */
:root{
  --navy:#1E2761; --navy-dark:#12173F; --navy-deep:#0C1030;
  --ice:#CADCFC; --ice-soft:#EEF3FE;
  --gold:#D4AF37; --gold-soft:#F3E7C4; --gold-ink:#8a6d13;
  --bg:#F5F7FC; --card:#FFFFFF;
  --muted:#6B7394; --muted-soft:#9AA1C0; --line:#E6EAF6;
  --success:#1FAA59; --success-soft:#E5F6EC;
  --danger:#E2574C; --danger-soft:#FCE9E7;
  --warn:#E8A33D; --warn-soft:#FCF1DE;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{font-family:'Tajawal',sans-serif; background:var(--bg); color:var(--navy); font-size:14px;}
a{color:inherit;}
[x-cloak]{display:none !important;}

/* ---------- shell ---------- */
.dash{display:flex; min-height:100vh;}
.dash-sidebar{width:236px; background:var(--navy-dark); color:#fff; flex-shrink:0; padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;}
.dash-logo{display:flex; align-items:center; gap:10px; padding:0 6px 22px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:18px;}
.dash-logo .mark{width:34px; height:34px; border-radius:9px; background:var(--gold); display:flex; align-items:center; justify-content:center; color:var(--navy-dark); font-weight:900; font-size:14px; flex-shrink:0;}
.dash-logo span{font-weight:800; font-size:14.5px; line-height:1.35;}
.dash-nav .group{font-size:10.5px; font-weight:800; color:var(--muted-soft); opacity:.7; margin:14px 12px 6px; letter-spacing:.3px;}
.dash-nav a{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:#B9C1E6; text-decoration:none; font-size:13.5px; font-weight:600; margin-bottom:3px; transition:.15s;}
.dash-nav a:hover{background:rgba(255,255,255,.05); color:#fff;}
.dash-nav a i{width:16px; text-align:center; font-size:14px;}
.dash-nav a.active{background:rgba(255,255,255,.09); color:#fff;}
.dash-nav a.active i{color:var(--gold);}
.dash-nav a .count{margin-inline-start:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:800; min-width:19px; height:19px; padding:0 5px; border-radius:99px; display:flex; align-items:center; justify-content:center;}
.dash-nav a .count.gold{background:var(--gold); color:var(--navy-dark);}
.dash-user{margin-top:auto; display:flex; align-items:center; gap:10px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08);}
.dash-user .name{font-size:12.5px; font-weight:700; color:#fff;}
.dash-user .role{font-size:11px; color:var(--muted-soft);}
.dash-user form{margin-inline-start:auto;}
.dash-user button{background:none; border:none; color:var(--muted-soft); cursor:pointer; font-size:14px; padding:6px;}
.dash-user button:hover{color:#fff;}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--ice); color:var(--navy); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0;}

.dash-main{flex:1; padding:22px 26px 40px; min-width:0;}
.dash-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; flex-wrap:wrap;}
.dash-top h2{font-size:20px; font-weight:800;}
.dash-top .sub{font-size:12.5px; color:var(--muted); font-weight:500; margin-top:3px;}
.dash-top-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.menu-btn{display:none;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--card); color:var(--navy); padding:9px 15px; border-radius:10px; font-weight:700; font-size:12.5px; font-family:inherit; cursor:pointer; text-decoration:none; white-space:nowrap; transition:.15s;}
.btn:hover{border-color:var(--navy);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-gold{background:var(--gold); border-color:var(--gold); color:var(--navy-dark); font-weight:800;}
.btn-gold:hover{filter:brightness(.96); border-color:var(--gold);}
.btn-navy{background:var(--navy); border-color:var(--navy); color:#fff;}
.btn-success{background:var(--success); border-color:var(--success); color:#fff;}
.btn-danger{background:var(--danger-soft); border-color:transparent; color:var(--danger);}
.btn-danger:hover{border-color:var(--danger);}
.btn-ghost{background:transparent; border-color:transparent; color:var(--muted);}
.btn-ghost:hover{color:var(--navy); border-color:transparent; background:var(--ice-soft);}
.btn-sm{padding:6px 10px; font-size:11.5px; border-radius:8px;}
.icon-btn{width:36px; height:36px; border-radius:10px; background:var(--card); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--navy); position:relative; font-size:13px; cursor:pointer; text-decoration:none;}
.icon-btn .badge-dot{position:absolute; top:-4px; left:-4px; background:var(--danger); color:#fff; font-size:9px; min-width:16px; height:16px; border-radius:99px; display:flex; align-items:center; justify-content:center; font-weight:800; padding:0 4px;}

/* ---------- KPI ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; text-decoration:none; display:block;}
.kpi .top-row{display:flex; justify-content:space-between; align-items:flex-start;}
.kpi .ic{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px;}
.kpi .delta{font-size:11px; font-weight:800; padding:3px 7px; border-radius:6px; background:var(--ice-soft); color:var(--navy);}
.kpi .delta.up{background:var(--success-soft); color:var(--success);}
.kpi .delta.down{background:var(--danger-soft); color:var(--danger);}
.kpi .val{font-size:24px; font-weight:900; margin-top:12px;}
.kpi .lbl{font-size:12px; color:var(--muted); font-weight:600; margin-top:2px;}
.ic-success{background:var(--success-soft); color:var(--success);}
.ic-ice{background:var(--ice-soft); color:var(--navy);}
.ic-gold{background:var(--gold-soft); color:var(--gold-ink);}
.ic-danger{background:var(--danger-soft); color:var(--danger);}
.ic-warn{background:var(--warn-soft); color:var(--warn);}

/* ---------- cards ---------- */
.dash-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:16px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px;}
.card + .card{margin-top:16px;}
.dash-grid .card + .card, .grid-2 .card + .card{margin-top:0;}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; flex-wrap:wrap;}
.card-head h3{font-size:14.5px; font-weight:800;}
.card-head .link{font-size:12px; color:var(--navy); font-weight:700; opacity:.7; text-decoration:none;}
.card-head .link:hover{opacity:1;}
.span-all{grid-column:1/-1;}

.chart-wrap{height:170px; display:flex; align-items:flex-end; gap:10px; padding-top:10px;}
.chart-wrap .bar{flex:1; background:linear-gradient(180deg, var(--ice) 0%, var(--navy) 130%); border-radius:8px 8px 3px 3px; position:relative; min-height:4px;}
.chart-wrap .bar.today{background:linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 130%);}
.chart-wrap .bar .tip{position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); font-size:10px; font-weight:800; color:var(--muted); white-space:nowrap;}
.chart-labels{display:flex; gap:10px; margin-top:8px;}
.chart-labels span{flex:1; text-align:center; font-size:10.5px; color:var(--muted-soft); font-weight:600;}

.activity-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);}
.activity-row:last-child{border-bottom:none;}
.a-ic{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:12.5px; flex-shrink:0;}
.a-body{flex:1; min-width:0;}
.a-body .t{font-size:12.5px; font-weight:700; line-height:1.5;}
.a-body .s{font-size:11px; color:var(--muted-soft); margin-top:1px;}
.a-time{font-size:10.5px; color:var(--muted-soft); font-weight:600; flex-shrink:0;}

.pulse-dot{width:8px; height:8px; border-radius:50%; background:var(--success); display:inline-block; position:relative;}
.pulse-dot::after{content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--success); animation:pulse 1.8s ease-out infinite;}
@keyframes pulse{0%{opacity:.9; transform:scale(.6);} 100%{opacity:0; transform:scale(1.9);}}

.map{height:320px; border-radius:12px; overflow:hidden; border:1px solid var(--line); z-index:0; position:relative;}
.map.tall{height:calc(100vh - 170px); min-height:420px;}

/* ---------- tables ---------- */
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px;}
.toolbar .grow{flex:1;}
.tabs{display:flex; gap:8px; flex-wrap:wrap;}
.tabs button,.tabs a{display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer; text-decoration:none;}
.tabs .active{background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 8px 20px -8px rgba(30,39,97,.5);}
.tabs .n{background:rgba(0,0,0,.08); border-radius:99px; padding:0 7px; font-size:11px;}
.tabs .active .n{background:rgba(255,255,255,.18);}

.table-wrap{overflow-x:auto; margin:0 -20px; padding:0 20px;}
table.t{width:100%; border-collapse:collapse; font-size:13px;}
table.t th{text-align:start; font-size:11.5px; color:var(--muted); font-weight:700; padding:10px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--card);}
table.t td{padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.t tr:last-child td{border-bottom:none;}
table.t tbody tr:hover td{background:#FAFBFE;}
table.t .sub{display:block; font-size:11px; color:var(--muted-soft); margin-top:2px; font-weight:500;}
table.t .num{font-weight:800; white-space:nowrap;}
table.t .actions{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap;}
table.t tfoot td{font-weight:900; border-top:2px solid var(--line);}
.neg{color:var(--success);}
.danger-text{color:var(--danger) !important;}
.muted{color:var(--muted-soft);}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:4px 9px; border-radius:7px; white-space:nowrap; background:var(--ice-soft); color:var(--navy);}
.badge.success{background:var(--success-soft); color:var(--success);}
.badge.danger{background:var(--danger-soft); color:var(--danger);}
.badge.warn{background:var(--warn-soft); color:#a86b12;}
.badge.gold{background:var(--gold-soft); color:var(--gold-ink);}
.badge.gray{background:#EEF0F6; color:var(--muted);}

.progress{height:7px; border-radius:99px; background:var(--ice-soft); overflow:hidden; min-width:70px;}
.progress > span{display:block; height:100%; border-radius:99px; background:var(--navy);}
.progress.ok > span{background:var(--success);} .progress.mid > span{background:var(--warn);} .progress.bad > span{background:var(--danger);}

.empty{text-align:center; padding:40px 10px; color:var(--muted-soft); font-weight:600;}
.empty i{font-size:28px; display:block; margin-bottom:10px; color:var(--ice);}

/* pagination (Livewire simple view) */
.pager{display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:12px; color:var(--muted);}
.pager .btns{display:flex; gap:6px;}

/* ---------- forms ---------- */
.input,.select,textarea.input{width:100%; border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:9px 12px; font-family:inherit; font-size:13px; color:var(--navy); outline:none; transition:.15s;}
.input:focus,.select:focus{border-color:var(--navy); box-shadow:0 0 0 3px var(--ice-soft);}
.search{position:relative; min-width:220px;}
.search i{position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:12px; color:var(--muted-soft); font-size:12px;}
.search .input{padding-inline-start:34px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.field label{display:block; font-size:12px; font-weight:800; color:var(--muted); margin-bottom:6px;}
.field .hint{font-size:11px; color:var(--muted-soft); margin-top:4px;}
.field .err{font-size:11.5px; color:var(--danger); margin-top:4px; font-weight:700;}
.field.full{grid-column:1/-1;}
.check{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; cursor:pointer;}
.check input{width:17px; height:17px; accent-color:var(--navy);}
.section-title{font-size:13px; font-weight:900; margin:4px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line);}

/* ---------- modal ---------- */
.modal-back{position:fixed; inset:0; background:rgba(12,16,48,.45); z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:60px 16px; overflow-y:auto;}
.modal{background:var(--card); border-radius:16px; width:100%; max-width:560px; box-shadow:0 30px 60px -20px rgba(12,16,48,.5); animation:pop .18s ease;}
.modal.wide{max-width:820px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line);}
.modal-head h3{font-size:15.5px; font-weight:900;}
.modal-body{padding:18px 20px;}
.modal-body p.desc{font-size:13px; color:var(--muted); margin-bottom:14px; line-height:1.8;}
.modal-foot{display:flex; gap:8px; justify-content:flex-start; padding:14px 20px; border-top:1px solid var(--line); background:#FAFBFE; border-radius:0 0 16px 16px;}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}

/* ---------- alerts & toasts ---------- */
.alert{padding:12px 16px; border-radius:12px; font-weight:700; font-size:13px; margin-bottom:16px; display:flex; gap:10px; align-items:center;}
.alert.warn{background:var(--warn-soft); color:#92400E;}
.alert.danger{background:var(--danger-soft); color:#991B1B;}
.alert.info{background:var(--ice-soft); color:var(--navy);}
.toasts{position:fixed; bottom:20px; left:20px; z-index:60; display:flex; flex-direction:column; gap:8px;}
.toast{background:var(--navy-dark); color:#fff; padding:12px 16px; border-radius:12px; font-weight:700; font-size:13px; box-shadow:0 14px 30px -12px rgba(12,16,48,.6); display:flex; gap:10px; align-items:center; max-width:380px; animation:pop .2s ease;}
.toast.success i{color:#4ADE80;} .toast.danger i{color:#FCA5A5;} .toast.warn i{color:var(--gold);}

.kv{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px;}
.kv:last-child{border-bottom:none;}
.kv span:first-child{color:var(--muted); font-weight:600;}
.kv span:last-child{font-weight:800;}

/* ---------- login ---------- */
.auth{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(circle at 20% 20%, var(--ice-soft), transparent 50%), var(--bg);}
.auth-card{width:100%; max-width:410px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px 28px; box-shadow:0 30px 60px -30px rgba(18,23,63,.35);}
.auth-card .mark{width:52px; height:52px; border-radius:14px; background:var(--gold); color:var(--navy-dark); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; margin:0 auto 14px;}
.auth-card h1{text-align:center; font-size:21px; font-weight:900;}
.auth-card p.sub{text-align:center; color:var(--muted); font-size:13px; margin:6px 0 22px;}

/* ---------- responsive ---------- */
@media (max-width:1100px){ .kpi-grid{grid-template-columns:1fr 1fr;} .dash-grid,.grid-2{grid-template-columns:1fr;} }
@media (max-width:820px){
  .dash-sidebar{position:fixed; inset-block:0; inset-inline-start:0; z-index:40; transform:translateX(100%); transition:transform .2s;}
  .dash-sidebar.open{transform:none; box-shadow:0 0 0 100vmax rgba(12,16,48,.4);}
  .menu-btn{display:inline-flex;}
  .dash-main{padding:16px 16px 40px;}
  .form-grid,.form-grid.cols-3{grid-template-columns:1fr;}
  .kpi .val{font-size:20px;}
}
@media (max-width:480px){ .kpi-grid{grid-template-columns:1fr;} }

/* .icon-btn sets display; keep the mobile menu button hidden on desktop. */
.icon-btn.menu-btn{display:none;}
@media (max-width:820px){ .icon-btn.menu-btn{display:inline-flex;} }