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

:root {
  --radius: 0.75rem;
  /* More rounded corners */

  /* MEDKLINIX Identity Colors */
  /* Primary: Sky Blue #2DAAE1 -> oklch(0.69 0.16 235) */
  /* Secondary: Golden Yellow #F1BE3E -> oklch(0.81 0.16 85) */
  /* Dark Navy Text: #1e293b (approx) */

  --background: oklch(0.99 0.01 240);
  /* Very tint blue-white */
  --foreground: oklch(0.20 0.04 260);
  /* Deep Navy */

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.20 0.04 260);

  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.508 0.182 200.589);
  --primary-foreground: oklch(0.98 0.01 200);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.508 0.182 200.589);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.508 0.182 200.589);
  --accent-foreground: oklch(0.98 0.01 200);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.508 0.182 200.589);
  --chart-1: oklch(0.508 0.182 200.589);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.508 0.182 200.589);
  --sidebar-primary-foreground: oklch(0.98 0.01 200);
  --sidebar-accent: oklch(0.508 0.182 200.589);
  --sidebar-accent-foreground: oklch(0.98 0.01 200);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.508 0.182 200.589);
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.551 0.238 198.866);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.551 0.238 198.866);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.238 198.866);
  --chart-1: oklch(0.551 0.238 198.866);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.551 0.238 198.866);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.551 0.238 198.866);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.238 198.866);
}

@layer base {
  * {
    @apply border-border outline-ring;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
    min-height: 100vh;
  }

  ::selection {
    background: color-mix(in oklch, var(--primary) 28%, white);
    color: var(--foreground);
  }
}

@layer utilities {
  /* Keep existing Tailwind 4 gradient names working on Tailwind 3. */
  .bg-linear-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }

  .bg-linear-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  }

  .bg-linear-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }
}

@media print {
  body * {
    visibility: hidden;
  }

  .printable-area,
  .printable-area * {
    visibility: visible;
  }

  .printable-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px !important;
    background: white;
    border: none;
    box-shadow: none;
    max-width: none !important;
  }

  .printable-area button,
  .no-print {
    display: none !important;
  }
}
