index.css

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

@layer base {
  :root {
    /* Color Tokens */
    --color-primary: 79 70 229;
    /* indigo-600 */
    --color-primary-hover: 67 56 202;
    /* indigo-700 */

    /* Spacing Tokens */
    --spacing-section: 1rem;
    /* 16px */

    /* Responsive Font Scale Tokens */
    --font-size-xl: 1.125rem;
    /* 18px */
    --font-size-2xl: 1.25rem;
    /* 20px */
    --font-size-3xl: 1.5rem;
    /* 24px */
    --font-size-4xl: 1.875rem;
    /* 30px */
  }

  @media (min-width: 768px) {
    :root {
      --spacing-section: 2.5rem;
      /* 40px */

      --font-size-xl: 1.25rem;
      /* 20px */
      --font-size-2xl: 1.5rem;
      /* 24px */
      --font-size-3xl: 1.875rem;
      /* 30px */
      --font-size-4xl: 2.25rem;
      /* 36px */
    }
  }
}

@layer components {
  /* Centralized Typography System */

  /* Large page titles (e.g., Login, About, Page Headers) */
  .display-title {
    @apply text-3xl font-bold text-gray-900 leading-tight;
  }

  /* Statistics and Large Numbers */
  .stat-value {
    @apply text-3xl font-bold tracking-tight;
  }

  /* Section headers / Page Headers */
  .section-title {
    @apply text-xl font-bold text-gray-900;
  }

  /* Global Page Layout */
  .page-container {
    @apply max-w-7xl mx-auto p-section;
  }
}

/* Custom Scrollbar for "no-scrollbar" utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* RTL Support for Input Fields */
[dir="rtl"] input,
[dir="rtl"] textarea {
  text-align: right;
  direction: rtl;
  /* Ensure the caret and text flow start from the right */
}

/* 
   Ideally, we want mixed content (English in Arabic layout) to still be aligned right.
   'text-align: right' handles the visual alignment.
   'direction: rtl' forces the base direction, but might mess up Strong LTR characters (like phone numbers) slightly if not careful.
   However, for standard text inputs, user usually expects typing to start from right.
   
   If we want the text *content* to flow naturally but align right:
   [dir="rtl"] input {
     text-align: right;
   }
*/

@media print {

  /* Reset Layout - Careful not to destroy Grid/Flex unless necessary */
  @page {
    margin: 10mm;
    size: auto;
  }

  /* Universal Reset for Print */
  body {
    background-color: white !important;
    color: black !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11pt !important;
    line-height: 1.3;
  }

  /* Hide Non-Print Elements */
  .no-print,
  aside,
  nav,
  header,
  footer,
  /* Don't hide all buttons, we might want to print some 'static' looking ones, but usually buttons are actions */
  button,
  .fixed,
  [role="dialog"],
  .toast-container {
    display: none !important;
  }

  /* Layout Adjustments */
  .page-container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Grid Handling: Try to keep grid if it fits, else block */
  /* Forcing block often helps with page breaks, but can break side-by-side stats */
  .grid {
    display: grid !important;
    /* If older browser issues arise, fallback to block might be needed, but modern browsers handle grid print okay usually */
  }

  /* Fallback for complex grids if they look bad: 
  .grid { display: block !important; } 
  .grid > * { margin-bottom: 20px; }
  */

  /* Page Breaks */
  h1,
  h2,
  h3,
  h4,
  .section-title,
  .stat-card {
    page-break-after: avoid;
    break-after: avoid;
  }

  img,
  tr,
  .card,
  .break-inside-avoid {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Tables */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  th,
  td {
    border: 1px solid #ddd !important;
    padding: 6px 8px !important;
    font-size: 10pt !important;
  }

  /* Color accuracy */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Shadow removal for cleaner print */
  .shadow-sm,
  .shadow-md,
  .shadow-lg,
  .shadow-xl,
  .shadow-2xl {
    box-shadow: none !important;
    border: 1px solid #eee !important;
    /* Replace shadow with light border for definition */
  }

  /* Inputs look like text */
  input,
  textarea,
  select {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    appearance: none !important;
  }

  /* Scrollbar override */
  ::-webkit-scrollbar {
    display: none;
  }
}