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

@layer base {
  :root {
    /* Palette — "Ledger & Seal"
       Primary   Ledger Navy   #1F3A5F  (215 51% 25%)  — trust, authority
       Accent    Stamp Gold    #C99A3E  (40  56% 51%)  — filing seal / official mark
       Surface   Vault White   #F2F4F6  (210 19% 96%)  — cool paper background
       Border    Ledger Rule   #B8C4CC  (204 16% 76%)  — dividers
       Text      Ink Navy      #1B2430  (214 28% 15%)  — high-contrast text
    */
    --background: 210 19% 96%;
    --foreground: 214 28% 15%;
    --card: 0 0% 100%;
    --card-foreground: 214 28% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 214 28% 15%;

    --primary: 215 51% 25%;
    --primary-foreground: 0 0% 100%;

    --secondary: 40 45% 94%;
    --secondary-foreground: 215 51% 25%;

    --muted: 204 16% 92%;
    --muted-foreground: 214 15% 42%;

    --accent: 42 52% 46%; /* #B68A2E */
    --accent-foreground: 214 28% 15%;

    --destructive: 355 68% 48%;
    --destructive-foreground: 0 0% 100%;

    /* Filing-status semantics — this app lives and dies by status states */
    --success: 152 45% 32%;
    --success-foreground: 0 0% 100%;
    --warning: 38 82% 47%;
    --warning-foreground: 0 0% 100%;
    --info: 205 55% 40%;
    --info-foreground: 0 0% 100%;

    --border: 204 16% 90%;
    --input: 204 16% 80%;
    --ring: 40 56% 51%;

    --chart-1: 40 56% 51%;
    --chart-2: 215 51% 25%;
    --chart-3: 152 45% 32%;
    --chart-4: 205 55% 40%;
    --chart-5: 355 55% 55%;

    --radius: 0.5rem;

    --sidebar-background: 215 51% 16%;
    --sidebar-foreground: 210 19% 92%;
    --sidebar-primary: 40 56% 51%;
    --sidebar-primary-foreground: 214 28% 15%;
    --sidebar-accent: 215 40% 24%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 215 35% 24%;
    --sidebar-ring: 40 56% 51%;
  }

  .dark {
    --background: 214 30% 10%;
    --foreground: 210 20% 92%;
    --card: 214 26% 14%;
    --card-foreground: 210 20% 92%;
    --popover: 214 26% 14%;
    --popover-foreground: 210 20% 92%;

    --primary: 40 56% 51%;
    --primary-foreground: 214 28% 12%;

    --secondary: 214 22% 20%;
    --secondary-foreground: 210 20% 92%;

    --muted: 214 22% 20%;
    --muted-foreground: 204 12% 68%;

    --accent: 42 52% 46%;
    --accent-foreground: 214 28% 12%;

    --destructive: 355 60% 42%;
    --destructive-foreground: 0 0% 98%;

    --success: 152 40% 38%;
    --success-foreground: 0 0% 100%;
    --warning: 38 75% 50%;
    --warning-foreground: 214 28% 12%;
    --info: 205 55% 55%;
    --info-foreground: 214 28% 12%;

    --border: 214 22% 24%;
    --input: 214 22% 24%;
    --ring: 40 56% 51%;

    --sidebar-background: 214 32% 9%;
    --sidebar-foreground: 210 20% 90%;
    --sidebar-primary: 40 56% 51%;
    --sidebar-primary-foreground: 214 28% 12%;
    --sidebar-accent: 214 24% 18%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 214 24% 20%;
    --sidebar-ring: 40 56% 51%;
  }

  /* 1) Button height ko Input field ke barabar karo (globally) */
  button {
    min-height: 2.25rem; /* 36px — Input jitni height */
  }
  button[class*="text-xs"] {
    min-height: 2rem; /* sm size buttons chhote hi rahenge */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased font-sans;
  }
  h1,
  h2,
  h3,
  .font-display {
    font-family: var(--font-display);
  }
  .font-mono-data {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .flex.justify-end.gap-3 {
    margin-top: 2.5rem !important; /* 40px gap */
    padding-top: 1rem !important;
    border-top: 1px solid hsl(var(--border));
  }

  /* Signature element: filing-stamp status badge */
  .stamp-badge {
    @apply inline-flex items-center gap-1.5 rounded-full border-2 border-dashed px-3 py-1 text-[10px] font-bold uppercase tracking-widest;
    transform: rotate(-1.5deg);
  }
  .stamp-badge--filed {
    @apply border-[hsl(var(--success))] text-[hsl(var(--success))] bg-[hsl(var(--success)/0.08)];
  }
  .stamp-badge--pending {
    @apply border-[hsl(var(--warning))] text-[hsl(var(--warning))] bg-[hsl(var(--warning)/0.08)];
  }
  .stamp-badge--overdue {
    @apply border-[hsl(var(--destructive))] text-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.08)];
  }
  .stamp-badge--progress {
    @apply border-[hsl(var(--info))] text-[hsl(var(--info))] bg-[hsl(var(--info)/0.08)];
  }
}

@layer components {
  /* Pagination page numbers */
  button.pagination-number {
    color: hsl(var(--foreground)) !important;
  }

  button.pagination-number:hover {
    color: hsl(var(--accent-foreground)) !important;
  }

  /* Pagination arrows */
  button.pagination-arrow,
  button.pagination-arrow svg {
    color: hsl(var(--foreground)) !important;
  }

  button.pagination-arrow:hover,
  button.pagination-arrow:hover svg {
    color: hsl(var(--accent-foreground)) !important;
  }
}

@layer components {
  /* Outline button — primary border, hover fills */
  .btn-outline {
    @apply border border-[hsl(var(--primary))] bg-background text-foreground shadow-sm 
           hover:bg-[hsl(var(--primary))] hover:text-primary-foreground transition-all duration-200;
  }
}
@layer base {
  input,
  textarea,
  select {
    background: white !important;
  }
}

@layer base {
  [data-slot="select-trigger"] {
    background-color: hsl(var(--background)) !important;
  }

  [data-slot="select-trigger"]:hover {
    background-color: hsl(var(--muted) / 0.3) !important;
  }
}

/* hide the scrollbaar in sidebaar  */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
@layer components {
  /* Fix: accent color is gold/yellow — override hover/selected states in dropdowns */
  .hover\:bg-accent:hover {
    background-color: hsl(var(--muted) / 0.6) !important;
  }
  .bg-accent\/70 {
    background-color: hsl(var(--muted)) !important;
  }
  [data-slot="select-item"]:hover,
  [data-slot="select-item"][data-highlighted] {
    background-color: hsl(var(--muted) / 0.6) !important;
  }
  [data-slot="select-item"][data-state="checked"] {
    background-color: hsl(var(--muted)) !important;
  }
}