@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

@layer base {
  :root {
    /* Design tokens from Figma */
    --color-week2: #155DFC;
    --color-week2-light: #E8F0FE;
    --color-week3: #16A34A;
    --color-week3-light: #E8F5E9;
    --color-border: #D1D5DC;
    --color-text: #111827;
    --color-muted: #6B7280;
    --color-bg: #FFFFFF;

    /* A3 Canvas dimensions (landscape at 96 DPI) */
    --a3-width: 1587px;
    --a3-height: 1123px;
    /* Legacy aliases */
    --canvas-width: var(--a3-width);
    --canvas-height: var(--a3-height);
    --canvas-margin: 32px;
  }

  html {
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-gray-50 text-canvas-text;
  }
}

@layer components {

  /* Canvas container with A3 aspect ratio */
  .canvas-container {
    aspect-ratio: 1.414;
    max-width: var(--canvas-width);
    @apply bg-white shadow-xl mx-auto;
  }

  /* Editable text areas */
  .editable-field {
    @apply w-full min-h-[80px] p-3 border border-canvas-border rounded-md;
    @apply focus:outline-none focus:ring-2 focus:ring-week2/30 focus:border-week2;
    @apply transition-all duration-200;
  }

  .editable-field:hover {
    @apply border-gray-400;
  }

  /* Week badge styles */
  .week-badge {
    @apply inline-flex items-center justify-center px-4 py-1.5 rounded-full text-sm font-semibold uppercase tracking-wide;
  }

  .week-badge-2 {
    @apply bg-week2 text-white;
  }

  .week-badge-3 {
    @apply bg-week3 text-white;
  }

  /* Number badge for exercise numbering */
  .number-badge {
    @apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white;
  }

  /* Section headers */
  .section-header {
    @apply text-xs font-bold uppercase tracking-wider text-canvas-muted;
  }

  /* Canvas card hover effect */
  .canvas-card {
    @apply bg-white border border-canvas-border rounded-xl p-5 cursor-pointer;
    @apply transition-all duration-300 ease-out;
    @apply hover:shadow-lg hover:border-gray-300 hover:-translate-y-1;
  }

  /* Tab button styles */
  .tab-button {
    @apply px-6 py-3 text-sm font-semibold rounded-lg transition-all duration-200;
  }

  .tab-button-active {
    @apply bg-week2 text-white shadow-md;
  }

  .tab-button-inactive {
    @apply bg-gray-100 text-gray-600 hover:bg-gray-200;
  }

  /* Mobile-responsive canvas utilities */
  .canvas-responsive {
    @apply w-full;
  }

  /* On mobile, allow canvas to be full-width and scrollable */
  @media (max-width: 767px) {
    .canvas-responsive {
      max-width: 100%;
      overflow-x: auto;
    }

    /* Increase touch targets on mobile */
    .editable-field {
      @apply min-h-[100px] p-4 text-base;
    }

    /* Stack columns on mobile */
    .mobile-stack {
      @apply flex-col !important;
    }

    .mobile-full-width {
      @apply w-full !important;
    }

    /* Hide on mobile */
    .mobile-hidden {
      @apply hidden !important;
    }
  }

  /* Desktop-only canvas layout */
  @media (min-width: 768px) {
    .canvas-responsive {
      max-width: var(--canvas-width);
    }

    .desktop-only-visible {
      @apply block;
    }
  }

  /* ═══════════════════════════════════════════════════════════════════════════
   * A3 FIXED CANVAS SYSTEM
   * Canvas renders at fixed A3 dimensions (1587 × 1123px)
   * Transform scaling makes it responsive while maintaining exact layout
   * ═══════════════════════════════════════════════════════════════════════════ */

  /* Outer wrapper - handles responsive scaling */
  .canvas-a3-viewport {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
  }

  /* The actual A3 canvas - fixed dimensions */
  .canvas-a3-fixed {
    width: var(--a3-width);
    height: var(--a3-height);
    min-width: var(--a3-width);
    min-height: var(--a3-height);
    background: white;
    border: 2px solid black;
    overflow: hidden;
    transform-origin: top center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }

  /* Scale down on smaller screens */
  @media (max-width: 1650px) {
    .canvas-a3-viewport {
      padding: 0.5rem;
    }

    .canvas-a3-fixed {
      /* Scale to fit viewport width with some padding */
      transform: scale(calc((100vw - 2rem) / var(--a3-width)));
      margin-bottom: calc((var(--a3-height) * (1 - (100vw - 2rem) / 1587)) * -1);
    }
  }

  @media (min-width: 1651px) {
    .canvas-a3-fixed {
      transform: scale(1);
    }
  }
}

@layer utilities {

  /* Print styles for A3 */
  @media print {
    @page {
      size: A3 landscape;
      margin: 0;
    }

    /* Ensure colors print correctly */
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }

    html,
    body {
      margin: 0 !important;
      padding: 0 !important;
      background: white !important;
    }

    .canvas-container {
      width: 420mm;
      height: 297mm;
      box-shadow: none;
      page-break-after: always;
    }

    /* Hide non-printable elements */
    .no-print,
    button:not([data-print-visible]),
    nav,
    header,
    footer,
    .week-tabs,
    [data-no-print] {
      display: none !important;
    }

    /* A3 Fixed Canvas - Print at native size */
    .canvas-a3-viewport {
      display: block;
      overflow: visible;
      padding: 0;
      width: auto;
    }

    .canvas-a3-fixed {
      transform: none !important;
      width: 420mm !important;
      height: 297mm !important;
      min-width: 420mm !important;
      min-height: 297mm !important;
      page-break-after: always;
      page-break-inside: avoid;
      box-shadow: none;
      margin: 0;
    }

    .canvas-a3-fixed:last-child {
      page-break-after: auto;
    }

    /* Ensure borders and backgrounds print */
    .border-black,
    .border-2,
    .bg-black,
    .bg-white,
    .bg-gray-50,
    .bg-gray-100,
    .bg-gray-200 {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    /* Remove shadows for print */
    .shadow-lg,
    .shadow-xl,
    .shadow-md {
      box-shadow: none !important;
    }

    /* Ensure text is visible */
    .text-white {
      color: white !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    /* Page breaks */
    .page-break-before {
      page-break-before: always;
    }

    .page-break-after {
      page-break-after: always;
    }

    .avoid-page-break {
      page-break-inside: avoid;
    }
  }

  /* Scrollbar styling */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full hover:bg-gray-400;
  }
}