/* ====== IMADIT — Chic 2026 (Light/Dark + mobile-first) ====== */

/* Core palette */
:root {
  --primary-50:#e9f2ff; --primary-100:#d6e7ff; --primary-200:#adcfff;
  --primary-300:#7fb1ff; --primary-400:#4e90ff; --primary-500:#2E6AE6;
  --primary-600:#2353b3; --primary-700:#1b3f85;

  --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
  --radius:14px;
  --shadow:0 10px 30px rgba(2,6,23,.06);
}

/* LIGHT */
:root {
  --bg:#fbfcfe;
  --surface:#ffffff;
  --surface-2:#f4f7fb;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e6ebf2;
  --primary:var(--primary-500);
  --primary-100:var(--primary-50);
}

/* DARK (يُفعّل بكلاس .theme-dark على body) */
:root .theme-dark,
.theme-dark {
  --bg:#0b1220;
  --surface:#0e172a;
  --surface-2:#0a1324;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --border:#1f2a3a;
  --primary:#6aa8ff;
  --primary-100:rgba(106,168,255,.18);
  --shadow:0 12px 34px rgba(0,0,0,.35);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:14px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text); background:linear-gradient(180deg,var(--bg),var(--surface-2));
  text-rendering:optimizeLegibility;
}

/* Container + Header */
.container{width:100%;max-width:1120px;margin-inline:auto;padding:16px}
.header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--surface) 80%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;letter-spacing:.2px}
.brand .logo{width:28px;height:28px;border-radius:10px;background:var(--primary)}
.brand span{opacity:.92}
.main{padding-block:18px}

/* Theme switch */
.theme-switch{display:inline-flex;align-items:center;gap:8px}
.switch{
  --h:28px; --w:50px;
  inline-size:var(--w); block-size:var(--h); border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); position:relative; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);
}
.switch i{
  position:absolute; inset:3px auto 3px 3px; width:calc(var(--h) - 6px); aspect-ratio:1;
  background:linear-gradient(180deg,#fff,#e9eef8); border-radius:999px;
  box-shadow:0 2px 6px rgba(2,6,23,.14);
  transition:transform .25s ease;
}
.theme-dark .switch i{ transform:translateX(calc(var(--w) - var(--h))); background:linear-gradient(180deg,#c7d5ff,#b9c9ff) }

/* Card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card > .card-hd{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;font-weight:600}
.card > .card-bd{padding:16px}

/* Grid */
.form-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:880px){.form-grid{grid-template-columns:repeat(2,1fr)}}
.form-row{display:flex;flex-direction:column;gap:6px}

/* Inputs */
label{font-size:12px;color:var(--muted)}
.input,.select{
  width:100%;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);outline:0;transition:.2s border-color,.2s box-shadow;
}
.input:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}
textarea.input{height:auto;padding:10px 12px;min-height:90px;resize:vertical}

/* Select caret */
.select, select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%232E6AE6'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px;padding-right:40px
}
select::-ms-expand{display:none}
.theme-dark .select, .theme-dark select{
  background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%236aa8ff'><path d='M7 10l5 5 5-5z'/></svg>\")
}

/* Buttons */
.btn{
  --btn-bg:#111827; --btn-fg:#fff;
  height:40px;padding:0 14px;border-radius:12px;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;cursor:pointer;transition:.18s;
  color:var(--btn-fg);background:var(--btn-bg);box-shadow:0 1px 0 rgba(2,6,23,.04)
}
.btn:hover{filter:saturate(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{height:34px;padding:0 10px;border-radius:10px}
.btn-primary{--btn-bg:var(--primary)}
.btn-outline{background:var(--surface);color:var(--primary);border-color:var(--primary)}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--border)}
.btn-danger{--btn-bg:var(--danger)}
.btn-success{--btn-bg:var(--success)}
.btn-icon{width:36px;padding:0;justify-content:center}
.btn-group{display:flex;gap:10px;flex-wrap:wrap}

/* Icons (Remix) */
.ri{font-size:16px;line-height:1}
.icon-sm .ri{font-size:14px}

/* Tables */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}
.table{width:100%;border-collapse:separate;border-spacing:0;min-width:780px;background:var(--surface)}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left}
.table th{font-size:12px;color:var(--muted);background:var(--surface-2)}
.table tr:hover td{background:color-mix(in oklab,var(--surface) 80%, var(--primary-100))}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:var(--surface)}
.badge.success{color:var(--success);border-color:#bff3dc;background:#eefcf6}
.badge.warn{color:var(--warning);border-color:#fde68a;background:#fffbea}
.theme-dark .badge.success{border-color:#1e3d30;background:#0f261e}
.theme-dark .badge.warn{border-color:#3b2d12;background:#231a07}

/* Helpers */
.stack{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.section-title{font-weight:700;font-size:18px;margin:4px 0 12px}
.hr{height:1px;background:var(--border);margin:14px 0}
.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}
.hide-mobile{display:none}@media(min-width:720px){.hide-mobile{display:initial}}