@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

@layer base {
  :root {
    --primary: 22 89% 48%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 22 100% 96%;
    --accent: 231 40% 14%;
    --background: 210 20% 97%;
    --surface: 0 0% 100%;
    --surface-elevated: 0 0% 100%;
    --border: 220 13% 91%;
    --border-strong: 220 13% 84%;
    --muted: 220 9% 96%;
    --muted-foreground: 220 9% 46%;
    --foreground: 220 20% 10%;
    --foreground-secondary: 220 12% 35%;
    --success: 142 72% 29%;
    --success-bg: 142 72% 96%;
    --success-border: 142 72% 85%;
    --warning: 38 92% 40%;
    --warning-bg: 38 100% 96%;
    --warning-border: 38 92% 80%;
    --danger: 0 84% 44%;
    --danger-bg: 0 84% 97%;
    --danger-border: 0 84% 85%;
    --info: 210 100% 40%;
    --info-bg: 210 100% 96%;
    --info-border: 210 100% 82%;
    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;
    --topbar-height: 64px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 24px -4px rgb(0 0 0 / 0.10), 0 4px 10px -4px rgb(0 0 0 / 0.06);
    --shadow-xl: 0 20px 48px -8px rgb(0 0 0 / 0.14), 0 8px 20px -6px rgb(0 0 0 / 0.08);
  }

  .dark {
    --background: 220 20% 6%;
    --surface: 220 18% 9%;
    --surface-elevated: 220 16% 12%;
    --border: 220 13% 18%;
    --border-strong: 220 13% 24%;
    --muted: 220 12% 14%;
    --muted-foreground: 220 9% 55%;
    --foreground: 220 15% 92%;
    --foreground-secondary: 220 10% 65%;
  }

  * {
    box-sizing: border-box;
  }

  html {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 14px;
    line-height: 1.5;
  }

  .font-mono {
    font-family: 'IBM Plex Mono', monospace;
  }

  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }
}

@layer components {
  .sidebar-nav-item {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-150 cursor-pointer select-none;
    color: hsl(var(--foreground-secondary));
  }

  .sidebar-nav-item:hover {
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
  }

  .sidebar-nav-item.active {
    background-color: hsl(var(--primary-light));
    color: hsl(var(--primary));
  }

  .sidebar-nav-item.active svg {
    color: hsl(var(--primary));
  }

  .metric-card {
    background-color: hsl(var(--surface));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    transition: box-shadow 0.15s ease;
  }

  .metric-card:hover {
    box-shadow: var(--shadow-md);
  }

  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-150 active:scale-95;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .btn-primary:hover {
    background-color: hsl(22 89% 42%);
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-150 active:scale-95;
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
  }

  .btn-secondary:hover {
    background-color: hsl(var(--border));
  }

  .btn-ghost {
    @apply inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150 active:scale-95;
    color: hsl(var(--foreground-secondary));
  }

  .btn-ghost:hover {
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
  }

  .badge {
    @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold;
  }

  .badge-success {
    background-color: hsl(var(--success-bg));
    color: hsl(var(--success));
    border: 1px solid hsl(var(--success-border));
  }

  .badge-warning {
    background-color: hsl(var(--warning-bg));
    color: hsl(var(--warning));
    border: 1px solid hsl(var(--warning-border));
  }

  .badge-danger {
    background-color: hsl(var(--danger-bg));
    color: hsl(var(--danger));
    border: 1px solid hsl(var(--danger-border));
  }

  .badge-info {
    background-color: hsl(var(--info-bg));
    color: hsl(var(--info));
    border: 1px solid hsl(var(--info-border));
  }

  .badge-neutral {
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground-secondary));
    border: 1px solid hsl(var(--border));
  }

  .badge-primary {
    background-color: hsl(var(--primary-light));
    color: hsl(var(--primary));
    border: 1px solid hsl(22 89% 85%);
  }

  .table-row-hover {
    @apply transition-colors duration-100;
  }

  .table-row-hover:hover {
    background-color: hsl(var(--muted) / 0.6);
  }

  .input-base {
    @apply w-full px-3 py-2 rounded-lg text-sm transition-all duration-150 outline-none;
    background-color: hsl(var(--surface));
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
  }

  .input-base:focus {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
  }

  .input-base::placeholder {
    color: hsl(var(--muted-foreground));
  }

  .card {
    background-color: hsl(var(--surface));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .section-label {
    @apply text-xs font-semibold uppercase tracking-widest;
    color: hsl(var(--muted-foreground));
    letter-spacing: 0.08em;
  }

  .status-dot {
    @apply inline-block w-2 h-2 rounded-full;
  }

  .skeleton {
    @apply animate-pulse rounded-md;
    background-color: hsl(var(--muted));
  }
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

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

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border));
    border-radius: 2px;
  }

  .text-primary {
    color: hsl(var(--primary));
  }

  .bg-primary {
    background-color: hsl(var(--primary));
  }

  .border-primary {
    border-color: hsl(var(--primary));
  }

  .ring-primary {
    --tw-ring-color: hsl(var(--primary) / 0.3);
  }

  .fade-in {
    animation: fadeIn 0.2s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .slide-up {
    animation: slideUp 0.2s ease-out;
  }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .slide-in-right {
    animation: slideInRight 0.25s ease-out;
  }

  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .pulse-highlight {
    animation: pulseHighlight 0.6s ease-out;
  }

  @keyframes pulseHighlight {
    0% { background-color: hsl(38 100% 92%); }
    100% { background-color: transparent; }
  }
}

/* ── Utility components ─────────────────────────────────── */
@layer components {
  .input-field {
    @apply w-full px-3 py-2 rounded-lg border border-[hsl(var(--border))] text-sm bg-white text-[hsl(var(--foreground))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary)/0.3)] transition-shadow;
  }
}

/* ── RTL support ────────────────────────────────────────── */
.rtl-mode {
  direction: rtl;
}
.rtl-mode [dir="ltr"] {
  direction: ltr;
}

/* Sidebar anchoring: RTL flips sidebar wrapper to right side */
.rtl-mode .sidebar-left {
  order: 1;
}

/* Text-align flips */
.rtl-mode .text-left  { text-align: right; }
.rtl-mode .text-right { text-align: left; }

/* Margin/padding directional flips */
.rtl-mode .ml-auto { margin-left: 0; margin-right: auto; }
.rtl-mode .mr-auto { margin-right: 0; margin-left: auto; }

/* Icon mirroring for directional icons (arrows, chevrons) */
.rtl-mode .rtl-mirror {
  transform: scaleX(-1);
}

/* Flex row direction fix */
.rtl-mode .flex-row-rtl {
  flex-direction: row-reverse;
}

@media print {
  body.invoice-printing * { visibility: hidden; }
  body.invoice-printing #invoice-print-area,
  body.invoice-printing #invoice-print-area * { visibility: visible; }
  body.invoice-printing #invoice-print-area { position: absolute; inset: 0; width: 100%; box-shadow: none !important; border: none !important; }
  body.invoice-printing .no-print { display: none !important; }
}