/**
 * السوق الخليلي — Admin Dashboard Styles
 * مبني على الهوية البصرية التراثية الرقمية للسوق الخليلي
 */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* الألوان الأساسية */
  --coal:#222222;
  --olive:#6F7250;
  --copper:#8C5A3C;
  --sand:#A78663;
  --beige:#D6C1A3;
  --ivory:#E9DDC7;

  /* الخلفيات */
  --bg:#F4F2EE;
  --surface:#FFFFFF;
  --surface2:#F9F7F4;
  --surface3:#F0EDE8;

  /* الحدود */
  --border:#E2DAD0;
  --border2:#D4C8BA;

  /* النصوص */
  --txt1:#1A1814;
  --txt2:#4A4238;
  --txt3:#8A7E72;
  --txt4:#B8AC9E;

  /* دلالات */
  --success:#3D6B35;--success-bg:#EEF5EC;
  --warn:#7A5A1E;--warn-bg:#FBF3E0;
  --danger:#7A2020;--danger-bg:#FBEAEA;
  --info:#1E4A6B;--info-bg:#E8F2FB;

  /* قياسات */
  --sidebar-w:224px;
  --topbar-h:63px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:13px;
}

html,body{
  font-family:'Noto Kufi Arabic',system-ui,-apple-system,sans-serif;
  direction:rtl;
  background:var(--bg);
  color:var(--txt1);
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ============================================
   TOPBAR (العلوي)
   ============================================ */
.topbar{
  background:var(--coal);
  padding:14px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  height:var(--topbar-h);
}
.topbar-tri{
  position:absolute;
  bottom:0;left:0;right:0;
  height:5px;
  overflow:hidden;
}
.tb-logo{display:flex;align-items:center;gap:12px}
.tb-logo-box{
  width:38px;height:38px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(233,221,199,0.2);
  display:flex;align-items:center;justify-content:center;
  color:var(--copper);
}
.tb-title{font-size:15px;font-weight:700;color:var(--ivory)}
.tb-badge{
  font-size:9px;
  background:rgba(140,90,60,0.3);
  color:var(--beige);
  border:1px solid rgba(140,90,60,0.4);
  border-radius:20px;
  padding:2px 9px;
  font-weight:500;
}
.tb-right{display:flex;align-items:center;gap:14px}
.tb-notif{
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;color:var(--beige);
}
.tb-notif:hover{background:rgba(255,255,255,0.14)}
.tb-ndot{
  position:absolute;top:6px;right:6px;
  width:8px;height:8px;border-radius:50%;
  background:var(--copper);border:2px solid var(--coal);
}
.tb-user{display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:all 0.15s}
.tb-user:hover{background:rgba(255,255,255,0.05)}
.tb-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--copper);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--ivory);
}
.tb-uinfo{display:flex;flex-direction:column}
.tb-uname{font-size:12px;color:var(--beige);font-weight:500}
.tb-role{font-size:10px;color:var(--sand)}

/* ============================================
   LAYOUT
   ============================================ */
.layout{display:flex;min-height:calc(100vh - var(--topbar-h))}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar{
  width:var(--sidebar-w);
  background:var(--coal);
  flex-shrink:0;
  display:flex;flex-direction:column;
  padding:16px 0;
  position:sticky;top:0;
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto;
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{display:none}
.sb-section{padding:0 12px;margin-bottom:4px}
.sb-label{
  font-size:9px;
  color:rgba(233,221,199,0.3);
  letter-spacing:2px;
  text-transform:uppercase;
  padding:10px 12px 6px;
  font-family:monospace;
}
.sb-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;
  border-radius:10px;
  cursor:pointer;
  color:rgba(233,221,199,0.55);
  font-size:12px;font-weight:500;
  margin-bottom:2px;
  transition:all 0.15s;
}
.sb-item:hover{background:rgba(255,255,255,0.05);color:rgba(233,221,199,0.85)}
.sb-item.act{
  background:rgba(140,90,60,0.22);
  color:var(--ivory);
  border:1px solid rgba(140,90,60,0.35);
}
.sb-item svg{flex-shrink:0}
.sb-badge{
  margin-right:auto;
  background:var(--copper);
  color:var(--ivory);
  font-size:9px;
  padding:2px 7px;
  border-radius:10px;
  font-weight:700;
}
.sb-badge-warn{background:rgba(220,100,30,0.3);color:#E8A060}
.sb-badge-danger{background:rgba(220,50,50,0.3);color:#F08080}
.sb-divider{height:1px;background:rgba(255,255,255,0.06);margin:8px 16px}
.sb-status{
  margin:auto 12px 12px;
  background:rgba(140,90,60,0.12);
  border:1px solid rgba(140,90,60,0.2);
  border-radius:10px;
  padding:10px 12px;
}
.sb-status-lbl{font-size:10px;color:var(--sand);margin-bottom:4px}
.sb-status-val{display:flex;align-items:center;gap:6px}
.sb-status-dot{width:7px;height:7px;border-radius:50%;background:#4CAF50}
.sb-status-txt{font-size:11px;color:var(--ivory);font-weight:500}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main{
  flex:1;
  padding:22px 26px;
  overflow-x:hidden;
  min-width:0;
}
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:20px;
  flex-wrap:wrap;gap:14px;
}
.page-title{font-size:20px;font-weight:700;color:var(--txt1);margin-bottom:3px}
.page-sub{font-size:12px;color:var(--txt3)}
.page-actions{display:flex;gap:8px;align-items:center}

/* ============================================
   CARDS
   ============================================ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px 18px;
}
.card + .card{margin-top:14px}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.card-title{font-size:13px;font-weight:700;color:var(--txt1)}
.card-sub{font-size:11px;color:var(--txt3);margin-top:2px}

/* ============================================
   BUTTONS
   ============================================ */
.btn{
  border:none;
  border-radius:9px;
  padding:9px 18px;
  font-size:12px;
  font-family:inherit;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all 0.15s;
  white-space:nowrap;
}
.btn-sm{padding:6px 12px;font-size:11px}
.btn-lg{padding:12px 22px;font-size:13px}
.btn-dark{background:var(--coal);color:var(--ivory)}
.btn-dark:hover{background:#333}
.btn-copper{background:var(--copper);color:var(--ivory)}
.btn-copper:hover{background:#7A4E33}
.btn-olive{background:var(--olive);color:var(--ivory)}
.btn-olive:hover{background:#5E6143}
.btn-out{background:transparent;border:1.5px solid var(--border);color:var(--txt2)}
.btn-out:hover{border-color:var(--txt2);background:var(--surface2)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(122,32,32,0.2)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-success{background:var(--success-bg);color:var(--success);border:1px solid rgba(61,107,53,0.2)}
.btn-warn{background:var(--warn-bg);color:var(--warn);border:1px solid rgba(122,90,30,0.2)}

/* ============================================
   FORMS
   ============================================ */
.fg{margin-bottom:14px}
.fl{
  font-size:11px;
  color:var(--txt2);
  margin-bottom:5px;
  font-weight:500;
  display:block;
}
.fl .req{color:var(--danger);margin-right:2px}
.fi{
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:9px 12px;
  font-size:12px;
  font-family:inherit;
  color:var(--txt1);
  width:100%;
  direction:rtl;
  outline:none;
  transition:border-color 0.15s;
}
.fi:focus{border-color:var(--copper);background:var(--surface)}
.fi:disabled{background:var(--surface3);color:var(--txt3);cursor:not-allowed}
.fsel{
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:9px 12px;
  font-size:12px;
  font-family:inherit;
  color:var(--txt1);
  width:100%;
  direction:rtl;
  outline:none;
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238A7E72' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 12px center;
  padding-left:30px;
}
.ftxt{
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:9px 12px;
  font-size:12px;
  font-family:inherit;
  color:var(--txt1);
  width:100%;
  direction:rtl;
  outline:none;
  min-height:90px;
  resize:vertical;
}
.ftxt:focus{border-color:var(--copper)}
.fhelp{font-size:10px;color:var(--txt3);margin-top:4px}
.ferr{font-size:10px;color:var(--danger);margin-top:4px}

/* Toggle Switch */
.toggle{
  width:42px;height:22px;
  background:var(--surface3);
  border-radius:20px;
  position:relative;
  cursor:pointer;
  transition:background 0.2s;
  flex-shrink:0;
}
.toggle::after{
  content:'';
  position:absolute;
  top:2px;right:2px;
  width:18px;height:18px;
  background:var(--surface);
  border-radius:50%;
  transition:all 0.2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.toggle.on{background:var(--olive)}
.toggle.on::after{right:22px}

/* ============================================
   TABLES
   ============================================ */
.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.tbl th{
  text-align:right;
  padding:9px 12px;
  color:var(--txt3);
  font-weight:600;
  font-size:10px;
  letter-spacing:0.5px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
}
.tbl td{
  padding:11px 12px;
  color:var(--txt2);
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--surface2)}
.tbl .tnm{font-weight:600;color:var(--txt1)}
.tbl .tid{font-family:monospace;font-size:11px;color:var(--txt3)}

/* ============================================
   KPIs
   ============================================ */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-bottom:18px;
}
.kpi{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  position:relative;
  overflow:hidden;
}
.kpi-accent{
  position:absolute;top:0;right:0;
  width:4px;height:100%;
}
.kpi-label{font-size:11px;color:var(--txt3);margin-bottom:6px}
.kpi-val{font-size:22px;font-weight:700;color:var(--txt1)}
.kpi-trend{font-size:10px;margin-top:4px;display:flex;align-items:center;gap:4px}
.kpi-trend.up{color:var(--success)}
.kpi-trend.down{color:var(--danger)}

/* ============================================
   BADGES
   ============================================ */
.badge{
  display:inline-block;
  padding:3px 9px;
  border-radius:20px;
  font-size:10px;
  font-weight:600;
  line-height:1.4;
}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-neutral{background:var(--surface3);color:var(--txt3)}
.badge-copper{background:#F5EDE8;color:var(--copper)}
.badge-olive{background:#EEF0E8;color:var(--olive)}

/* ============================================
   GRIDS
   ============================================ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:768px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ============================================
   ALERTS
   ============================================ */
.alert{
  padding:10px 14px;
  border-radius:10px;
  font-size:12px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid rgba(61,107,53,0.15)}
.alert-warn{background:var(--warn-bg);color:var(--warn);border:1px solid rgba(122,90,30,0.15)}
.alert-danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(122,32,32,0.15)}
.alert-info{background:var(--info-bg);color:var(--info);border:1px solid rgba(30,74,107,0.15)}

/* ============================================
   PAGINATION
   ============================================ */
.pagination{
  display:flex;
  gap:4px;
  justify-content:center;
  margin-top:16px;
  flex-wrap:wrap;
}
.pagination a, .pagination span{
  padding:6px 12px;
  border-radius:8px;
  font-size:11px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--txt2);
}
.pagination a:hover{background:var(--surface2);border-color:var(--txt3)}
.pagination .active{background:var(--copper);color:var(--ivory);border-color:var(--copper)}
.pagination .disabled{opacity:0.4;cursor:not-allowed}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal{
  background:var(--surface);
  border-radius:16px;
  max-width:640px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.modal-head{
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-title{font-size:15px;font-weight:700;color:var(--txt1)}
.modal-body{padding:18px 22px}
.modal-foot{
  padding:14px 22px;
  border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;
}
.modal-close{
  width:28px;height:28px;border-radius:8px;
  background:transparent;border:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--txt3);cursor:pointer;
}
.modal-close:hover{background:var(--surface2);color:var(--txt1)}

/* ============================================
   AUTH PAGE (صفحة تسجيل الدخول)
   ============================================ */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--coal);
  padding:20px;
  position:relative;
  overflow:hidden;
}
.auth-card{
  background:var(--surface);
  border-radius:20px;
  padding:36px 40px;
  width:100%;
  max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  position:relative;
  z-index:1;
}
.auth-logo{
  width:72px;height:72px;
  border-radius:16px;
  background:var(--coal);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
  color:var(--ivory);
}
.auth-title{
  font-size:20px;font-weight:700;
  text-align:center;color:var(--txt1);
  margin-bottom:4px;
}
.auth-sub{
  font-size:12px;
  text-align:center;color:var(--txt3);
  margin-bottom:26px;
}

/* ============================================
   UTILITIES
   ============================================ */
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.text-center{text-align:center}
.text-right{text-align:right}
.hidden{display:none}
.w-full{width:100%}
.font-mono{font-family:monospace}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Empty State */
.empty{
  text-align:center;
  padding:40px 20px;
  color:var(--txt3);
}
.empty-icon{
  width:56px;height:56px;
  margin:0 auto 14px;
  background:var(--surface3);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--txt4);
}
.empty-title{font-size:14px;font-weight:600;color:var(--txt2);margin-bottom:6px}
.empty-sub{font-size:12px;color:var(--txt3)}

/* Loading Spinner */
.spinner{
  display:inline-block;
  width:16px;height:16px;
  border:2px solid var(--border);
  border-top-color:var(--copper);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Flash Messages */
.flash{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:2000;
  padding:12px 20px;
  border-radius:10px;
  font-size:13px;
  font-weight:500;
  box-shadow:0 8px 30px rgba(0,0,0,0.15);
  animation:slideDown 0.3s ease-out;
}
@keyframes slideDown{from{transform:translate(-50%,-20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.flash-success{background:var(--success);color:#fff}
.flash-error{background:var(--danger);color:#fff}
.flash-info{background:var(--info);color:#fff}