/* هوية كوما COMMA — النيلي #2D3173 · البرتقالي #FF5C36 · الكريمي #F7F5F1 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;900&family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --color-primary:#2D3173;
  --color-primary-dark:#1E2152;
  --color-gold:#FF5C36;
  --color-gold-dark:#e34a25;
  --color-cream:#F7F5F1;
  --color-dark-gray:#4a4b5e;
  --color-light-gray:#E4E1D9;
  --color-muted:#6B6C7E;
  --radius:16px;
  --shadow:0 4px 24px rgba(45,49,115,.10);
  --transition:all .3s ease;
  --font-primary:'Poppins','Cairo','Tahoma',sans-serif;
  --sidebar:246px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-primary);
  background:var(--color-cream);
  color:var(--color-dark-gray);
  font-size:14px;line-height:1.7;
  overflow-x:hidden;
}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-gold-dark)}

/* ------------------------------------------------ الشريط الجانبي */
.sidebar{
  position:fixed;inset-block:0;inset-inline-start:0;width:var(--sidebar);
  background:linear-gradient(160deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);
  color:#fff;display:flex;flex-direction:column;z-index:40;
  padding-top:env(safe-area-inset-top);
}
.brand{display:flex;align-items:center;gap:10px;padding:20px 18px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12)}
.brand img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.logo-fallback{width:42px;height:42px;border-radius:10px;background:var(--color-gold);
  display:grid;place-items:center;font-weight:900;color:#fff;font-size:15px}
.brand b{display:block;font-size:17px;font-weight:800}
.brand span{font-size:11px;opacity:.75}
.sidebar nav{flex:1;overflow-y:auto;padding:10px 0}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 18px;color:#dcdcec;
  font-size:14px;font-weight:500;transition:var(--transition);border-inline-end:3px solid transparent}
.nav-item .i{width:22px;text-align:center;font-size:15px}
.nav-item:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-item.active{background:rgba(255,255,255,.14);color:#fff;
  border-inline-end-color:var(--color-gold);font-weight:700}
.side-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.who b{display:block;font-size:13px}
.who span{font-size:11px;opacity:.72}
.logout{color:#fff;background:rgba(255,255,255,.14);padding:6px 12px;border-radius:9px;font-size:12px}
.logout:hover{background:var(--color-gold);color:#fff}

/* ------------------------------------------------ المحتوى */
main{margin-inline-start:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}
.topbar{background:#fff;padding:18px 26px 14px;box-shadow:var(--shadow);position:sticky;top:0;z-index:30}
.topbar h1{font-size:20px;font-weight:800;color:var(--color-primary)}
.gold-line{width:64px;height:4px;background:var(--color-gold);border-radius:2px;margin-top:10px}
.gold-line.center{margin:14px auto 0}
.burger{display:none;font-size:22px;cursor:pointer;color:var(--color-primary)}
.content{flex:1;padding:20px 26px 40px;max-width:1500px;width:100%}
main.wide .content{max-width:100%}
.foot{padding:14px 26px;color:#9a9a9a;font-size:12px;text-align:center}
.overlay{display:none}

/* ------------------------------------------------ البطاقات */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;
  overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--color-light-gray)}
.card-h h3{font-size:15px;color:var(--color-primary);font-weight:700}
.card-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card-b{padding:16px 18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;
  align-items:start}

/* ------------------------------------------------ الإحصائيات */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:18px}
.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;
  border-top:4px solid var(--color-primary)}
.stat .v{font-size:17px;font-weight:800;color:var(--color-primary);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.stat .l{font-size:12px;color:#8a8a8a;margin-top:4px}
.stat.gold{border-top-color:var(--color-gold)}.stat.gold .v{color:var(--color-gold-dark)}
.stat.ok{border-top-color:#2e9e5b}.stat.ok .v{color:#2e9e5b}
.stat.warn{border-top-color:#d98a12}.stat.warn .v{color:#d98a12}
.stat.bad{border-top-color:#c0392b}.stat.bad .v{color:#c0392b}
.stat.mute{border-top-color:var(--color-light-gray)}.stat.mute .v{color:#8a8a8a}

/* ------------------------------------------------ الجداول */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
th,td{padding:10px 12px;text-align:right;border-bottom:1px solid #eee;white-space:nowrap}
th{background:var(--color-cream);color:var(--color-primary);font-weight:700;font-size:12px;
  position:sticky;top:0}
tbody tr:hover{background:#faf9f6}
td:nth-child(2){white-space:normal;min-width:150px}
.empty{padding:26px;text-align:center;color:#a0a0a0;font-size:13px}
.empty.sm{padding:12px;font-size:12px}

/* ------------------------------------------------ الشارات */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.badge.ok{background:#e6f6ec;color:#1e7a44}
.badge.info{background:#e9eaf5;color:var(--color-primary)}
.badge.gold{background:#ffe9e2;color:var(--color-gold-dark)}
.badge.warn{background:#fff4e0;color:#b5760c}
.badge.bad{background:#fdeceb;color:#c0392b}
.badge.mute{background:#f0f0f0;color:#888}
.chip{display:inline-block;padding:2px 8px;border-radius:8px;background:#e9eaf5;
  color:var(--color-primary);font-size:11px}
.chip.gold{background:#ffe9e2;color:var(--color-gold-dark)}
.chip.mute{background:#f2f2f2;color:#aaa}

/* ------------------------------------------------ الأزرار */
.btn{display:inline-block;padding:9px 16px;border-radius:11px;border:none;cursor:pointer;
  font-family:var(--font-primary);font-size:13px;font-weight:600;background:#e9eaf5;
  color:var(--color-primary);transition:var(--transition)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(45,49,115,.16)}
.btn.primary{background:var(--color-primary);color:#fff}
.btn.primary:hover{background:var(--color-primary-dark);color:#fff}
.btn.gold{background:var(--color-gold);color:#fff}
.btn.gold:hover{background:var(--color-gold-dark);color:#fff}
.btn.ok{background:#2e9e5b;color:#fff}
.btn.warn{background:#d98a12;color:#fff}
.btn.bad{background:#c0392b;color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--color-light-gray);color:#777}
.btn.excel{background:#e6f6ec;color:#1e7a44;border:1px solid #bde5cc}
.btn.ai{background:linear-gradient(135deg,var(--color-primary),#5a5fb0);color:#fff}
.btn.ai:hover{background:var(--color-primary-dark);color:#fff}
.btn.excel:hover{background:#1e7a44;color:#fff;border-color:#1e7a44}
.btn.sm{padding:6px 11px;font-size:12px}
.btn.big{padding:16px 20px;font-size:16px;border-radius:14px}
.btn.block{display:block;width:100%;margin-top:8px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.link-btn{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:12px;
  font-family:var(--font-primary);padding:0}
.link-btn.bad{color:#c0392b}
.inline{display:inline}
.inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inline-form input[type=file]{font-size:11px;max-width:190px}
.quick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tab{padding:8px 16px;border-radius:11px;background:#fff;font-size:13px;box-shadow:var(--shadow)}
.tab.on{background:var(--color-primary);color:#fff;font-weight:700}

/* ------------------------------------------------ النماذج */
.form{display:flex;flex-direction:column;gap:12px}
.form.compact{gap:8px;margin-top:10px;border-top:1px dashed var(--color-light-gray);padding-top:10px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.f{flex:1;min-width:170px}
.f label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:#5c5c5c}
.f input,.f select,.f textarea{
  width:100%;padding:10px 12px;border:1px solid var(--color-light-gray);border-radius:11px;
  font-family:var(--font-primary);font-size:13px;background:#fff;color:var(--color-dark-gray);
  transition:var(--transition)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(45,49,115,.12)}
.f input[type=file]{padding:7px;font-size:12px}
.f input[type=color]{padding:3px;height:40px}
.f small{display:block;font-size:11px;color:#9a9a9a;margin-top:4px}
.req{color:#c0392b;font-weight:900}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:#fff;
  padding:14px 16px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px}
.filters .f{flex:1;min-width:150px;margin:0}
.filters .btn{height:39px}
.flash{padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:13px;font-weight:600}
.flash.ok{background:#e8f6ee;color:#1e7a44;border-inline-start:4px solid #2e9e5b}
.flash.bad{background:#fdeceb;color:#c0392b;border-inline-start:4px solid #c0392b}

/* ------------------------------------------------ المرفقات */
.attach{list-style:none;display:flex;flex-direction:column;gap:8px}
.attach li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--color-cream);
  padding:8px 12px;border-radius:11px;font-size:12px}
.attach .meta{color:#9a9a9a;font-size:11px;margin-inline-start:auto}

/* ------------------------------------------------ أشرطة التقدم والمسار */
.bar{background:#eee;border-radius:20px;height:7px;overflow:hidden;min-width:70px;display:inline-block;
  width:100%;vertical-align:middle}
.bar.big{height:11px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-gold))}
.steps{display:flex;gap:3px}
.steps i{width:13px;height:6px;border-radius:3px;background:#e3e3e3}
.steps i.on{background:var(--color-gold)}
.stage-meta{font-size:12px;color:#8a8a8a;margin-top:8px}

.flow{list-style:none;display:flex;gap:6px;flex-wrap:wrap;background:#fff;padding:14px;
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px}
.flow li{flex:1 1 118px;max-width:200px;text-align:center;font-size:12px;color:#a5a5a5;
  padding:10px 6px;border-radius:12px;background:var(--color-cream)}
.flow li span{display:block;width:26px;height:26px;line-height:26px;border-radius:50%;
  background:#e0e0e0;color:#fff;margin:0 auto 6px;font-weight:700}
.flow li.done{color:var(--color-primary);font-weight:700;background:#e9eaf5}
.flow li.done span{background:linear-gradient(135deg,var(--color-primary),var(--color-gold))}

.timeline{list-style:none;position:relative;padding-inline-start:18px}
.timeline:before{content:'';position:absolute;inset-block:6px;inset-inline-start:5px;width:2px;
  background:linear-gradient(to bottom,var(--color-primary),var(--color-gold))}
.timeline li{position:relative;margin-bottom:16px}
.timeline li:before{content:'';position:absolute;inset-inline-start:-17px;top:6px;width:10px;
  height:10px;border-radius:50%;background:var(--color-gold);border:2px solid #fff}
.t-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px}
.t-when{color:#a5a5a5;font-size:11px;margin-inline-start:auto}
.t-body{font-size:13px;margin-top:5px;color:#5c5c5c}

/* ------------------------------------------------ التبصيم */
.punch{text-align:center}
.punch-state{display:flex;gap:10px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.punch-state>div{background:var(--color-cream);border-radius:12px;padding:10px 18px;min-width:100px}
.punch-state span{display:block;font-size:11px;color:#9a9a9a}
.punch-state b{font-size:15px;color:var(--color-primary)}
.punch-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.punch-actions .btn{flex:1;min-width:150px}
.punch-msg{font-size:13px;font-weight:600;min-height:22px;padding:6px}
.punch-msg.ok{color:#1e7a44}.punch-msg.bad{color:#c0392b}.punch-msg.wait{color:var(--color-gold-dark)}
.punch-hint{font-size:12px;color:#9a9a9a;margin-top:10px;line-height:1.9}
.logo-preview{max-width:150px;max-height:80px;background:var(--color-cream);padding:8px;
  border-radius:12px}

/* ------------------------------------------------ الفواتير والمسرحيات */
code.hash{font-family:ui-monospace,Menlo,monospace;font-size:10px;background:var(--color-cream);
  padding:2px 6px;border-radius:6px;color:var(--color-muted);direction:ltr;display:inline-block}
pre.hash-block{font-family:ui-monospace,Menlo,monospace;font-size:10px;
  background:var(--color-cream);padding:12px;border-radius:12px;overflow-x:auto;
  direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-all;line-height:1.6;
  max-height:260px}
h4.sec{font-size:13px;color:var(--color-primary);margin:6px 0 -4px;padding-bottom:6px;
  border-bottom:1px dashed var(--color-light-gray)}
input.mini{width:100%;padding:5px 8px;border:1px solid var(--color-light-gray);
  border-radius:8px;font-family:var(--font-primary);font-size:12px}
td input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-gold)}

/* ------------------------------------------------ الدخول */
.login-body{display:grid;place-items:center;min-height:100vh;
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);padding:20px}
.login{background:#fff;border-radius:22px;padding:32px 28px;width:100%;max-width:380px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:14px}
.login-head{text-align:center;margin-bottom:6px}
.login-head img{max-width:110px;max-height:80px;margin-bottom:10px}
.login-head h2{font-size:19px;color:var(--color-primary)}
.login-head p{font-size:12px;color:#9a9a9a;margin-top:4px}

/* ------------------------------------------------ الجوال */
#navtoggle{display:none}
@media(max-width:900px){
  .sidebar{transform:translateX(100%);transition:transform .3s ease}
  #navtoggle:checked~.sidebar{transform:translateX(0)}
  #navtoggle:checked~.overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
  main{margin-inline-start:0}
  .burger{display:block}
  .topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px}
  .topbar h1{font-size:17px;flex:1}
  .gold-line{width:100%;flex-basis:100%;height:3px}
  .content{padding:16px 14px 30px}
  .grid2{grid-template-columns:1fr}
  .card-b{padding:14px}
  table{font-size:12px}
  th,td{padding:8px}
}
@media print{
  .sidebar,.topbar,.quick,.filters,.foot,.btn,form{display:none!important}
  main{margin:0}
  .card{box-shadow:none;border:1px solid #ddd}
}

/* ------------------------------------------------ مساعد كوما */
#aitoggle{display:none}
.ai-fab{position:fixed;inset-inline-end:20px;bottom:20px;width:54px;height:54px;
  border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-gold));
  color:#fff;display:grid;place-items:center;font-size:22px;cursor:pointer;z-index:50;
  box-shadow:0 6px 20px rgba(45,49,115,.35);transition:var(--transition)}
.ai-fab:hover{transform:scale(1.07)}
.ai-panel{position:fixed;inset-inline-end:20px;bottom:86px;width:min(420px,calc(100vw - 40px));
  max-height:min(560px,calc(100vh - 130px));background:#fff;border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(45,49,115,.28);display:none;flex-direction:column;z-index:50;
  overflow:hidden}
#aitoggle:checked~.ai-panel{display:flex}
.ai-panel header{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.ai-close{cursor:pointer;font-size:16px;opacity:.85}
.ai-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
  background:var(--color-cream)}
.ai-msg{padding:10px 13px;border-radius:12px;font-size:13px;line-height:1.85;
  white-space:pre-wrap;max-width:92%}
.ai-msg.bot{background:#fff;box-shadow:var(--shadow);align-self:flex-start}
.ai-msg.me{background:var(--color-primary);color:#fff;align-self:flex-end}
.ai-msg.err{background:#fdeceb;color:#c0392b;align-self:flex-start}
.ai-msg .sql{display:block;font-family:ui-monospace,Menlo,monospace;font-size:10px;
  direction:ltr;text-align:left;color:var(--color-muted);background:var(--color-cream);
  padding:6px 8px;border-radius:8px;margin-top:8px;white-space:pre-wrap}
.ai-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--color-light-gray)}
.ai-form input{flex:1;padding:10px 12px;border:1px solid var(--color-light-gray);
  border-radius:11px;font-family:var(--font-primary);font-size:13px}
.ai-form input:focus{outline:none;border-color:var(--color-primary)}
.ai-answer{font-size:14px;line-height:2}
.ai-answer h3,.ai-answer h4{color:var(--color-primary);margin:14px 0 6px}
.ai-answer ul{margin:6px 22px}
.ai-answer li{margin-bottom:6px}
.ai-answer p{margin-bottom:8px}
@media(max-width:900px){
  .ai-fab{bottom:14px;inset-inline-end:14px;width:48px;height:48px}
  .ai-panel{inset-inline:14px;bottom:72px;width:auto;max-height:70vh}
}