@import "../src/styles/tokens.css";
@import "tailwindcss";

/* ── Base resets ────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 14px;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-surface-sunken);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════════════════
   SIDEBAR VISIBILITY
   ⚠️  مفيش display في أي inline style على الـ sidebar elements
   ⚠️  !important عشان يغلب أي حاجة تانية
   ════════════════════════════════════════════════════ */

/* default: كل العناصر مخفية */
#sb-full,
#sb-compact,
#sb-drawer,
#topbar-menu-btn {
  display: none !important;
}

/* lg+ (≥1024px): full sidebar */
@media (min-width: 1024px) {
  #sb-full    { display: flex !important; }
  #sb-compact { display: none !important; }
  #sb-drawer  { display: none !important; }
  #topbar-menu-btn { display: none !important; }
}

/* md (768px–1023px): compact rail */
@media (min-width: 768px) and (max-width: 1023px) {
  #sb-full    { display: none !important; }
  #sb-compact { display: flex !important; }
  #sb-drawer  { display: none !important; }
  #topbar-menu-btn { display: none !important; }
}

/* sm (<768px): drawer + topbar button */
@media (max-width: 767px) {
  #sb-full    { display: none !important; }
  #sb-compact { display: none !important; }
  #sb-drawer  { display: flex !important; }
  #topbar-menu-btn { display: flex !important; }
}

/* ════════════════════════════════════════════════════
   DASH CONTENT PADDING
   class selector بيغلب على inline style في CSS
   بيحجز مكان الـ compact rail الـ fixed على md
   ════════════════════════════════════════════════════ */

/* sm + lg: مفيش padding إضافي */
.dash-content-wrapper {
  padding-inline-end: 0;
}

/* md فقط: حجز 72px لمكان الـ compact rail */
@media (min-width: 768px) and (max-width: 1023px) {
  .dash-content-wrapper {
    padding-inline-end: var(--sidebar-width-compact);
  }
}

/* ── Tailwind theme bridge ──────────────────────────── */
@theme inline {
  --color-primary-*: initial;
  --color-sand-*:    initial;
  --color-gold-*:    initial;
  --color-slate-*:   initial;

  --color-primary-50:  var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  --color-primary-200: var(--color-primary-200);
  --color-primary-300: var(--color-primary-300);
  --color-primary-400: var(--color-primary-400);
  --color-primary-500: var(--color-primary-500);
  --color-primary-600: var(--color-primary-600);
  --color-primary-700: var(--color-primary-700);
  --color-primary-800: var(--color-primary-800);
  --color-primary-900: var(--color-primary-900);

  --color-sand-50:  var(--color-sand-50);
  --color-sand-100: var(--color-sand-100);
  --color-sand-200: var(--color-sand-200);
  --color-sand-300: var(--color-sand-300);
  --color-sand-400: var(--color-sand-400);
  --color-sand-500: var(--color-sand-500);
  --color-sand-600: var(--color-sand-600);
  --color-sand-700: var(--color-sand-700);
  --color-sand-800: var(--color-sand-800);
  --color-sand-900: var(--color-sand-900);

  --color-gold-50:  var(--color-gold-50);
  --color-gold-100: var(--color-gold-100);
  --color-gold-200: var(--color-gold-200);
  --color-gold-300: var(--color-gold-300);
  --color-gold-400: var(--color-gold-400);
  --color-gold-500: var(--color-gold-500);
  --color-gold-600: var(--color-gold-600);
  --color-gold-700: var(--color-gold-700);
  --color-gold-800: var(--color-gold-800);
  --color-gold-900: var(--color-gold-900);

  --color-slate-50:  var(--color-slate-50);
  --color-slate-100: var(--color-slate-100);
  --color-slate-200: var(--color-slate-200);
  --color-slate-300: var(--color-slate-300);
  --color-slate-400: var(--color-slate-400);
  --color-slate-500: var(--color-slate-500);
  --color-slate-600: var(--color-slate-600);
  --color-slate-700: var(--color-slate-700);
  --color-slate-800: var(--color-slate-800);
  --color-slate-900: var(--color-slate-900);

  --color-background: var(--color-sand-50);
  --color-foreground: var(--color-slate-900);
  --color-brand:      var(--color-primary-500);
  --font-sans:        var(--font-sans);
  --font-mono:        var(--font-mono);
}

/* ── Focus ring ─────────────────────────────────────── */
.focus-ring {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-brand-600);
}

/* ── RTL icon mirroring ─────────────────────────────── */
[dir="rtl"] .icon-flip-rtl {
  transform: scaleX(-1);
}

/* ── LTR embed for codes/paths ──────────────────────── */
.ltr-embed {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}