/* ═══════════════════════════════════════════════════════════════
   NSHAMAH — Premium Custom Theme
   Professional project management with distinctive identity
   ═══════════════════════════════════════════════════════════════ */

/* ─── Google Fonts: Inter (clean UI) + Cairo (Arabic support) ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   1. LIGHT THEME — Warm Slate + Emerald Accent
   ═══════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  /* ── Primary: Rich Emerald ── */
  --color-primary-10: 236, 253, 245;
  --color-primary-20: 209, 250, 229;
  --color-primary-30: 167, 243, 208;
  --color-primary-40: 110, 231, 183;
  --color-primary-50: 52, 211, 153;
  --color-primary-60: 16, 185, 129;
  --color-primary-70: 5, 150, 105;
  --color-primary-80: 4, 120, 87;
  --color-primary-90: 6, 95, 70;
  --color-primary-100: 4, 120, 87;
  --color-primary-200: 6, 95, 70;
  --color-primary-300: 5, 150, 105;
  --color-primary-400: 16, 185, 129;
  --color-primary-500: 52, 211, 153;
  --color-primary-600: 110, 231, 183;
  --color-primary-700: 167, 243, 208;
  --color-primary-800: 209, 250, 229;
  --color-primary-900: 236, 253, 245;

  /* ── Backgrounds: Warm off-white ── */
  --color-background-100: 255, 255, 255;
  --color-background-90: 249, 250, 251;
  --color-background-80: 243, 244, 246;

  /* ── Text: Rich warm grays ── */
  --color-text-100: 17, 24, 39;
  --color-text-200: 55, 65, 81;
  --color-text-300: 75, 85, 99;
  --color-text-350: 107, 114, 128;
  --color-text-400: 156, 163, 175;

  /* ── Borders: Subtle warm gray ── */
  --color-border-100: 249, 250, 251;
  --color-border-200: 243, 244, 246;
  --color-border-300: 229, 231, 235;
  --color-border-400: 209, 213, 219;

  /* ── Sidebar ── */
  --color-sidebar-background-100: 255, 255, 255;
  --color-sidebar-background-90: 249, 250, 251;
  --color-sidebar-background-80: 243, 244, 246;
  --color-sidebar-text-100: 17, 24, 39;
  --color-sidebar-text-200: 55, 65, 81;
  --color-sidebar-text-300: 75, 85, 99;
  --color-sidebar-text-400: 156, 163, 175;
  --color-sidebar-border-100: 249, 250, 251;
  --color-sidebar-border-200: 243, 244, 246;
  --color-sidebar-border-300: 229, 231, 235;
  --color-sidebar-border-400: 209, 213, 219;

  /* ── Enhanced Shadows (softer, more layered) ── */
  --color-shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.03), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
  --color-shadow-xs: 0px 1px 3px 0px rgba(0, 0, 0, 0.06), 0px 2px 6px 0px rgba(0, 0, 0, 0.04);
  --color-shadow-sm: 0px 2px 4px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.06);
  --color-shadow-rg: 0px 4px 8px 0px rgba(0, 0, 0, 0.04), 0px 8px 24px 0px rgba(0, 0, 0, 0.06);
  --color-shadow-md: 0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 12px 32px 0px rgba(0, 0, 0, 0.08);
  --color-shadow-lg: 0px 12px 24px 0px rgba(0, 0, 0, 0.08), 0px 24px 48px 0px rgba(0, 0, 0, 0.06);

  /* ── Onboarding: Emerald gradient ── */
  --gradient-onboarding-100: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
  --gradient-onboarding-200: linear-gradient(135deg, rgba(255,255,255,0) -20%, rgba(255,255,255,0.9) 60%);
  --gradient-onboarding-300: linear-gradient(160deg, #ffffff 5%, rgba(255,255,255,0.05) 95%);
  --color-onboarding-background-100: 209, 250, 229;
  --color-onboarding-background-200: 255, 255, 255;
  --color-onboarding-background-300: 236, 253, 245;
  --color-onboarding-background-400: 167, 243, 208;
  --color-onboarding-border-200: 167, 243, 208;

  /* ── Toast: Refined ── */
  --color-toast-success-text: 4, 120, 87;
  --color-toast-success-background: 236, 253, 245;
  --color-toast-success-border: 167, 243, 208;
  --color-toast-error-text: 185, 28, 28;
  --color-toast-error-background: 254, 242, 242;
  --color-toast-error-border: 254, 202, 202;
  --color-toast-info-text: 29, 78, 216;
  --color-toast-info-background: 239, 246, 255;
  --color-toast-info-border: 191, 219, 254;
}

/* ═══════════════════════════════════════════════════════════════
   2. DARK THEME — Deep Charcoal + Emerald Glow
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* ── Primary: Luminous Emerald ── */
  --color-primary-10: 6, 30, 22;
  --color-primary-20: 8, 38, 28;
  --color-primary-30: 10, 50, 38;
  --color-primary-40: 14, 68, 52;
  --color-primary-50: 18, 85, 65;
  --color-primary-60: 24, 110, 84;
  --color-primary-70: 32, 140, 108;
  --color-primary-80: 40, 165, 128;
  --color-primary-90: 6, 95, 70;
  --color-primary-100: 52, 211, 153;
  --color-primary-200: 16, 185, 129;
  --color-primary-300: 110, 231, 183;
  --color-primary-400: 167, 243, 208;
  --color-primary-500: 209, 250, 229;
  --color-primary-600: 209, 250, 229;
  --color-primary-700: 236, 253, 245;
  --color-primary-800: 236, 253, 245;
  --color-primary-900: 236, 253, 245;

  /* ── Backgrounds: Rich Charcoal ── */
  --color-background-100: 15, 15, 18;
  --color-background-90: 22, 22, 26;
  --color-background-80: 32, 33, 38;

  /* ── Text: Crisp light tones ── */
  --color-text-100: 243, 244, 246;
  --color-text-200: 209, 213, 219;
  --color-text-300: 156, 163, 175;
  --color-text-350: 107, 114, 128;
  --color-text-400: 75, 85, 99;

  /* ── Borders: Subtle charcoal ── */
  --color-border-100: 30, 31, 36;
  --color-border-200: 38, 39, 46;
  --color-border-300: 50, 52, 60;
  --color-border-400: 63, 66, 76;

  /* ── Sidebar: Deeper shade ── */
  --color-sidebar-background-100: 12, 12, 15;
  --color-sidebar-background-90: 18, 18, 22;
  --color-sidebar-background-80: 28, 29, 34;
  --color-sidebar-text-100: 243, 244, 246;
  --color-sidebar-text-200: 209, 213, 219;
  --color-sidebar-text-300: 156, 163, 175;
  --color-sidebar-text-400: 75, 85, 99;
  --color-sidebar-border-100: 30, 31, 36;
  --color-sidebar-border-200: 38, 39, 46;
  --color-sidebar-border-300: 50, 52, 60;
  --color-sidebar-border-400: 63, 66, 76;

  /* ── Enhanced Shadows (deep) ── */
  --color-shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  --color-shadow-xs: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
  --color-shadow-sm: 0px 2px 6px 0px rgba(0, 0, 0, 0.25), 0px 6px 16px 0px rgba(0, 0, 0, 0.3);
  --color-shadow-rg: 0px 4px 8px 0px rgba(0, 0, 0, 0.3), 0px 12px 24px 0px rgba(0, 0, 0, 0.3);
  --color-shadow-md: 0px 6px 12px 0px rgba(0, 0, 0, 0.35), 0px 16px 32px 0px rgba(0, 0, 0, 0.35);

  /* ── Onboarding: Deep emerald gradient ── */
  --gradient-onboarding-100: linear-gradient(135deg, #0f0f12 0%, #0a1e16 50%, #0e3424 100%);
  --gradient-onboarding-200: linear-gradient(135deg, rgba(22,22,26,0.8) -20%, rgba(15,15,18,0.9) 60%);
  --gradient-onboarding-300: linear-gradient(160deg, rgba(32,33,38,0.5) 20%, #0f0f12 98%);
  --color-onboarding-text-100: 243, 244, 246;
  --color-onboarding-text-200: 209, 213, 219;
  --color-onboarding-text-300: 156, 163, 175;
  --color-onboarding-text-400: 107, 114, 128;
  --color-onboarding-background-100: 38, 39, 46;
  --color-onboarding-background-200: 22, 22, 26;
  --color-onboarding-background-300: 22, 22, 26;
  --color-onboarding-background-400: 50, 52, 60;
  --color-onboarding-border-100: 38, 39, 46;
  --color-onboarding-border-200: 38, 39, 46;

  /* ── Toast: Dark refined ── */
  --color-toast-success-text: 110, 231, 183;
  --color-toast-success-background: 22, 22, 26;
  --color-toast-success-border: 6, 95, 70;
  --color-toast-error-text: 252, 165, 165;
  --color-toast-error-background: 22, 22, 26;
  --color-toast-error-border: 127, 29, 29;
  --color-toast-info-text: 147, 197, 253;
  --color-toast-info-background: 22, 22, 26;
  --color-toast-info-border: 30, 64, 175;
}


/* ═══════════════════════════════════════════════════════════════
   3. GLOBAL TYPOGRAPHY & BASE
   ═══════════════════════════════════════════════════════════════ */

/* Apply premium font stack globally */
html, body {
  font-family: 'Inter', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  letter-spacing: -0.011em;
}


/* ═══════════════════════════════════════════════════════════════
   4. REFINED UI COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Buttons: Smoother, more tactile ── */
/* Only transition color/shadow, NOT all (which breaks Headless UI dropdowns) */
button, [role="button"], a[class*="btn"] {
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Primary action buttons - emerald glow on hover */
.bg-custom-primary-100:hover,
[class*="bg-custom-primary"]:hover {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-100), 0.15),
              0 4px 12px rgba(var(--color-primary-100), 0.2);
}


/* ── Inputs: Refined focus states ── */
input:focus, textarea:focus, select:focus,
input:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-primary-100), 0.2),
              0 0 0 4px rgba(var(--color-primary-100), 0.08);
  border-color: rgba(var(--color-primary-100), 0.5);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}


/* ── Cards & Panels: Subtle lift on hover ── */
[class*="rounded"][class*="border"][class*="bg-custom-background"] {
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease;
}


/* ── Sidebar: Premium feel ── */
/* Sidebar navigation items */
aside a, aside button,
[class*="sidebar"] a, [class*="sidebar"] button {
  transition: color 0.15s ease, background-color 0.15s ease;
  border-radius: 6px;
}


/* ── Dropdown Menus: Elegant entrance ── */
/* Note: No transform animations - they break Headless UI positioning */


/* ── Modal / Dialog: Smooth entrance ── */
/* Note: No transform animations on dialogs - they can interfere with Headless UI */


/* ── Scrollbars: Refined ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--color-scrollbar), 0.3);
  border-radius: 10px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-scrollbar), 0.55);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-scrollbar), 0.3) transparent;
}


/* ── Tooltips: Polished ── */
[role="tooltip"] {
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  animation: nshamah-tooltip 0.12s ease-out;
}

@keyframes nshamah-tooltip {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════
   5. TABLE & LIST REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Spreadsheet/table rows: subtle hover */
tr:hover > td,
[class*="issue-row"]:hover,
[class*="list-item"]:hover {
  transition: background-color 0.15s ease;
}


/* ═══════════════════════════════════════════════════════════════
   6. LOADING / PROGRESS INDICATORS
   ═══════════════════════════════════════════════════════════════ */

/* Top progress bar - emerald */
:root {
  --bprogress-color: rgba(var(--color-primary-100)) !important;
}


/* ═══════════════════════════════════════════════════════════════
   7. STATUS & PRIORITY BADGES (Enhanced)
   ═══════════════════════════════════════════════════════════════ */

/* Smoother badge pills */
[class*="rounded-full"][class*="text-xs"],
[class*="rounded-full"][class*="text-sm"] {
  font-weight: 500;
  letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════════
   8. SELECTION & FOCUS INDICATORS
   ═══════════════════════════════════════════════════════════════ */

::selection {
  background: rgba(var(--color-primary-100), 0.2);
  color: inherit;
}

::-moz-selection {
  background: rgba(var(--color-primary-100), 0.2);
  color: inherit;
}

/* Focus-visible ring for accessibility (not on buttons to avoid dropdown interference) */
input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid rgba(var(--color-primary-100), 0.5);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   9. SIDEBAR LOGO AREA REFINEMENT
   ═══════════════════════════════════════════════════════════════ */

/* Make the logo area more prominent */
aside > div:first-child,
[class*="sidebar"] > div:first-child {
  padding-bottom: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   10. SUBTLE BACKGROUND TEXTURE (Light mode only)
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] body {
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(4, 120, 87, 0.015) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(4, 120, 87, 0.01) 0%, transparent 40%);
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(52, 211, 153, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(16, 185, 129, 0.015) 0%, transparent 40%);
  background-attachment: fixed;
}


/* ═══════════════════════════════════════════════════════════════
   11. AVATAR & PROFILE IMAGES
   ═══════════════════════════════════════════════════════════════ */

/* Refined avatar rings */
img[class*="rounded-full"],
[class*="avatar"] img {
  border: 1.5px solid rgba(var(--color-border-200));
  transition: border-color 0.2s ease;
}

img[class*="rounded-full"]:hover,
[class*="avatar"] img:hover {
  border-color: rgba(var(--color-primary-100), 0.4);
}


/* ═══════════════════════════════════════════════════════════════
   12. KANBAN BOARD REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Kanban column headers */
[class*="kanban"] [class*="header"],
[data-board-column] {
  border-radius: 8px 8px 0 0;
}

/* Kanban cards: subtle lift */
[class*="kanban"] [class*="card"],
[data-board-item] {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[class*="kanban"] [class*="card"]:hover,
[data-board-item]:hover {
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════
   13. PAGE TRANSITIONS
   ═══════════════════════════════════════════════════════════════ */

/* Page transitions removed - can interfere with dynamic UI components */


/* ═══════════════════════════════════════════════════════════════
   14. TABS REFINEMENT
   ═══════════════════════════════════════════════════════════════ */

[role="tab"] {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  position: relative;
}

[role="tab"][aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 2px;
  background: rgba(var(--color-primary-100));
  border-radius: 2px 2px 0 0;
}