/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@keyframes highlight-flash {
  0%, 30% { outline: 2px solid var(--ctp-blue); outline-offset: 2px; }
  100% { outline: 2px solid transparent; outline-offset: 2px; }
}

.highlight-flash {
  animation: highlight-flash 2s ease-out forwards;
}

/* HTML email body styling */
.email-html-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.email-html-body table {
  max-width: 100%;
  table-layout: fixed;
}
.email-html-body pre {
  overflow-x: auto;
  max-width: 100%;
}
.email-html-body ol,
.email-html-body ul {
  padding-left: 1.5em !important;
}
.email-html-body li {
  white-space: normal !important;
}
.email-html-body a {
  color: var(--ctp-blue);
  text-decoration: none;
}
.email-html-body a:hover {
  text-decoration: underline;
}
.email-html-body img {
  max-width: 100%;
  height: auto;
}
.email-html-body blockquote {
  border-left: 2px solid var(--ctp-surface0);
  padding-left: 0.75rem;
  color: var(--ctp-overlay0);
}

/* --- Print styles for reports --- */
.print-only { display: none; }

@media print {
  @page {
    size: letter;
    margin: 0;
  }

  /* --- Reset: strip app shell completely --- */
  .print-only { display: block !important; }
  .no-print,
  nav,
  header.navbar,
  aside,
  form,
  [data-controller="sidebar"],
  [data-controller="geolocation"] > [data-geolocation-target="banner"],
  [data-controller="notification-dropdown"],
  turbo-frame[src] .border-dashed { display: none !important; }

  html { font-size: 11pt; }
  body {
    background: white !important;
    color: #1e1e2e !important;
    font-size: 11pt;
    line-height: 1.5;
    /* Bake margins into the body so they work regardless of browser margin setting */
    margin: 0 !important;
    padding: 0.6in 0.65in !important;
  }

  /* Strip all layout wrappers: max-width, padding, margin */
  main,
  main.mx-auto {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Nuke all Tailwind padding/margin on layout containers */
  .px-4, .px-6, .sm\:px-6, .lg\:px-8 { padding-left: 0 !important; padding-right: 0 !important; }
  .py-6 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .max-w-7xl { max-width: 100% !important; }
  .lg\:pl-64, .lg\:pl-16 { padding-left: 0 !important; }

  /* --- Typography --- */
  .text-2xl { font-size: 14pt !important; }
  .text-3xl { font-size: 16pt !important; }
  .text-lg { font-size: 12pt !important; }
  .text-sm { font-size: 9pt !important; }
  .text-xs { font-size: 8pt !important; }
  .text-\[10px\] { font-size: 7pt !important; }
  .text-\[9px\] { font-size: 6.5pt !important; }

  /* --- Borders: visible but light --- */
  .border-2 { border-width: 1px !important; }
  .border-ctp-surface0 { border-color: #d0d0d0 !important; }
  .border-ctp-blue\/30 { border-color: #a0b8e8 !important; }
  .border-ctp-surface1 { border-color: #d0d0d0 !important; }
  .divide-ctp-surface0 > :not([hidden]) ~ :not([hidden]) { border-color: #e0e0e0 !important; }

  /* --- Tables: clean and readable --- */
  table { font-size: 8.5pt; width: 100%; border-collapse: collapse; }
  th { font-size: 7pt !important; }
  th, td { padding: 4px 6px !important; }

  /* Show all responsive columns */
  .hidden.sm\:table-cell,
  .hidden.md\:table-cell,
  .hidden.lg\:table-cell { display: table-cell !important; }

  /* --- Spacing: tighten for print --- */
  .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px !important; }
  .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 6px !important; }
  .mb-6 { margin-bottom: 10px !important; }
  .mb-4 { margin-bottom: 8px !important; }
  .p-4 { padding: 10px !important; }
  .p-3 { padding: 8px !important; }
  .gap-4, .gap-3 { gap: 8px !important; }

  /* --- Grid: always multi-col in print --- */
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* --- Charts --- */
  canvas { max-height: 220px !important; }

  /* --- Page flow --- */
  .print-break-before { page-break-before: always; }
  .print-break-inside-avoid { page-break-inside: avoid; }

  /* --- Colors: force for badges and indicators --- */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* --- Links: readable in print --- */
  a { text-decoration: none !important; }

  /* --- Bar chart fills: visible --- */
  .bg-ctp-blue { background-color: #1e66f5 !important; }
  .bg-ctp-surface0 { background-color: #e8e8e8 !important; }
}