/* BIMS Global Styles */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', sans-serif; background: #f3f5f6; }
#root { display: block; height: 100vh; overflow: hidden; }

/* Spin animation for the TopBar refresh icon while a reload is in flight */
@keyframes bims-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Motion tokens — functional feedback only (calm/official brand: no bounce, no scale).
   Keep timings consistent so future motion stays on-brand. */
:root {
  --bims-dur-fast: 120ms;   /* hover / colour feedback */
  --bims-dur-base: 200ms;   /* state changes (sidebar already ~.2s) */
  --bims-ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart, no bounce */
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9e9e9e; }

/* Print styles */
@media print {
  @page { margin: 0; }
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { background: white; }
  /* keep the sample's colors (green/red header, watermark) on paper */
  .cert-container { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Certificate styles — fonts/sizes/colors follow the barangay's sample certificate:
   Times New Roman header (16pt green barangay line), 20pt red title, Calibri 12pt body,
   8pt signature/issued region, 6pt bullets. */
.cert-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  font-family: Calibri, 'Segoe UI', sans-serif;
  background: white;
  border: 1px solid #ddd;
}
.cert-container > *:not(.cert-watermark) { position: relative; z-index: 1; }
.cert-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  max-width: 90%; opacity: .12; z-index: 0; pointer-events: none;
}
.cert-watermark img { object-fit: contain; }
.cert-watermark-city { width: 360px; }  /* 3× the header logo */
.cert-watermark-brgy { width: 120px; }  /* same as the header logo */
.cert-header { border-bottom: 1px solid #000; padding-bottom: 12px; margin-bottom: 16px; }
.cert-header-inner { display: flex; align-items: center; }
.cert-header-logo { width: 120px; flex-shrink: 0; text-align: center; }
.cert-header-logo img { max-width: 120px; max-height: 120px; object-fit: contain; }
.cert-header-text { flex: 1; text-align: center; font-family: 'Times New Roman', serif; }
.cert-header-text p { margin: 0; line-height: 1.15; }
.cert-republic { font-size: 16px; color: #000; }
.cert-barangay { font-size: 21px; font-weight: bold; color: #00B050; }
.cert-address { font-size: 16px; color: #000; }
.cert-title { text-align: center; font-family: 'Times New Roman', serif; font-size: 27px; font-weight: bold; color: #FF0000; margin: 16px 0; }
.cert-body { font-size: 16px; line-height: 1.5; text-align: justify; }
.cert-body p { margin: 0 0 10px; text-indent: 48px; }
.cert-body p:first-child { text-indent: 0; }
.cert-sign-section { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 32px; }
.cert-sign-box { text-align: center; min-width: 220px; }
.cert-sign-name { font-weight: bold; font-size: 12px; border-bottom: 1px solid #333; padding-bottom: 2px; }
.cert-applicant-box { text-align: center; margin-top: 48px; }
.cert-applicant-line { border-top: 1px solid #333; padding-top: 4px; font-size: 11px; font-weight: bold; width: 220px; margin: 90px auto 56px; }
.cert-photo-row { display: flex; gap: 12px; justify-content: center; }
.cert-photo-box { width: 105px; height: 105px; border: 1px solid #333; overflow: hidden; }
.cert-photo-box img { width: 100%; height: 100%; object-fit: cover; }
.cert-photo-label { font-size: 9px; font-weight: normal; margin-top: 4px; text-align: center; color: #000; }
.cert-issued-block { margin-top: 16px; font-size: 11px; line-height: 1.6; }
.cert-bottom-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 16px; }
.cert-bullets { font-size: 8px; color: #000; max-width: 30%; line-height: 1.5; }
.cert-prepared-by { font-size: 11px; text-align: center; margin-top: 28px; }
.cert-footer { font-size: 8px; max-width: 30%; }
.cert-footer p { margin: 0 0 6px; }

/* Ordinance print — multi-page, unlike the always-single-page certificates above.
   Body content is auto-paginated by measured height (see paginateOrdinanceBody
   in ordinances.js) into one .ord-page per physical sheet. Each .ord-page also
   renders as a real <table> with the header/title chrome in a <thead>: browsers
   natively repeat <thead> content on every physical page a table spans when
   printing, so if the height estimate ever drifts slightly, the header still
   shows on the overflow page instead of going missing. */
.ord-container { max-width: 800px; margin: 0 auto; font-family: Calibri, 'Segoe UI', sans-serif; background: #fff; }
.ord-page {
  position: relative;
  min-height: 9.5in;
  width: 100%;
  border-collapse: collapse;
  padding: 40px 40px 56px;
  page-break-after: always;
  break-after: page;
}
.ord-page:last-child { page-break-after: auto; break-after: auto; }
.ord-page td { padding: 0 40px; }
.ord-page thead td { padding-top: 40px; padding-bottom: 12px; } /* small gap between the header rule and the title block (ORDINANCE NO.) */
.ord-page tbody td { padding-bottom: 56px; vertical-align: top; } /* top-align so short page-1 content isn't middle-centered down the sheet */
.ord-header { text-align: center; font-family: 'Times New Roman', serif; }
.ord-header p { margin: 0; line-height: 1.3; }
.ord-header-inner { display: flex; align-items: center; }
.ord-header-logo { width: 90px; flex-shrink: 0; text-align: center; }
.ord-header-logo img { max-width: 90px; max-height: 90px; object-fit: contain; }
.ord-header-text { flex: 1; }
.ord-body { font-size: 13px; line-height: 1.6; text-align: justify; }
.ord-body p { margin: 0 0 10px; }
.ord-footer { margin-top: 24px; font-size: 13px; line-height: 1.6; }
.ord-footer p { margin: 0 0 6px; }
/* Quill's align/size format classes are normally scoped to .ql-editor (its own
   snow.css), so they're inert once dangerouslySetInnerHTML renders saved content
   outside the editor. Re-declare them here for anything still authored via Quill
   (header, optional footer note) so alignment actually survives into print. */
.ord-header .ql-align-center, .ord-body .ql-align-center, .ord-footer .ql-align-center { text-align: center; }
.ord-header .ql-align-right, .ord-body .ql-align-right, .ord-footer .ql-align-right { text-align: right; }
.ord-header .ql-align-justify, .ord-body .ql-align-justify, .ord-footer .ql-align-justify { text-align: justify; }
/* Quill font-family classes are likewise scoped to .ql-editor in snow.css, so a
   chosen font is inert once saved content prints via dangerouslySetInnerHTML.
   Re-declare them globally so Serif/Mono picks survive into the printed document. */
.ql-font-serif { font-family: Georgia, 'Times New Roman', Times, serif; }
.ql-font-monospace { font-family: 'Courier New', Courier, monospace; }
/* Font & size pickers use custom (named font / numeric px) whitelists. Label each
   custom item by its own value — "Times New Roman", "14px" — via attr(); the default
   (no data-value) keeps snow.css's built-in "Sans Serif" / "Normal" label. */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before { content: attr(data-value); }
/* Toolbar "insert horizontal line" button — Material icon glyph. */
.ql-snow .ql-toolbar button.ql-hr::before,
.ql-snow.ql-toolbar button.ql-hr::before { content: 'horizontal_rule'; font-family: 'Material Icons'; font-size: 18px; line-height: 1; }
/* Kagawad signature block: two centered columns, a blank signature line above
   each printed name (no colon after the name). */
.ord-kagawad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 12px 0 28px; font-family: Calibri, 'Segoe UI', sans-serif; font-size: 13px; }
.ord-sig-block { text-align: center; }
.ord-sig-line { border-top: 1px solid #333; width: 75%; height: 0; margin: 28px auto 0; }
.ord-page-number { position: absolute; bottom: 20px; right: 40px; font-size: 10px; color: #999; }
@media screen { .ord-page { border: 1px solid #ddd; margin-bottom: 24px; } }

/* Stat card animation */
@keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.stat-card { animation: countUp var(--bims-dur-base) var(--bims-ease-out) both;
             animation-delay: calc(var(--i, 0) * 40ms); }

/* Sidebar transition */
.sidebar-nav-item { transition: background 0.15s, color 0.15s; cursor: pointer; }
.sidebar-nav-item:hover { background: rgba(255,255,255,0.12) !important; }
.sidebar-nav-item.active { background: rgba(255,255,255,0.2) !important; }

/* Table — neutral header so colour is reserved for status/attention */
.bims-table th {
  background: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5d6770 !important;
  white-space: nowrap;
  border-bottom: 1px solid #e6e8ef !important;
}
.bims-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.bims-table td { font-size: 13.5px; transition: background var(--bims-dur-fast) var(--bims-ease-out); }
.bims-table tr:hover td { background: #f6f7fb !important; }

/* Frozen first column (e.g. Role in Settings > Users > Roles & Permissions) —
   stays visible while the rest of a wide table scrolls horizontally. */
.bims-table .sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #ffffff;
  border-right: 1px solid #e6e8ef;
}
.bims-table thead th.sticky-col { z-index: 3; } /* above both the sticky header row (z:2) and sticky column (z:1) */

/* Excel-style compact grid — used only by the Projects & Services beneficiaries/updates tables */
.excel-table th,
.excel-table td {
  padding: 3px 8px !important;
  border: 1px solid #e9ebf0 !important;
}
.excel-table th {
  background: #f3f4f6 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  color: #5f6570 !important;
}
.excel-table td { font-size: 13px; transition: background var(--bims-dur-fast) var(--bims-ease-out); }
.excel-table tr:hover td { background: #f6f7fb !important; }

/* Make the table's horizontal scrollbar a bit more prominent.
   overflow-y is forced back to visible because setting only overflow-x otherwise
   makes the browser compute overflow-y:auto too, turning the container into its
   own (never-scrolling) scroll box and breaking thead's sticky positioning against
   the real scrolling ancestor (the page's main content area). */
.MuiTableContainer-root { overflow-x: auto !important; overflow-y: visible !important; }
.MuiTableContainer-root::-webkit-scrollbar { height: 10px; }
.MuiTableContainer-root::-webkit-scrollbar-thumb { background: #9e9e9e; border-radius: 5px; }

/* Sticky proxy scrollbar — a horizontal scrollbar pinned to the bottom of the viewport,
   synced (via stickyTableScroll in app.js) to a table whose own scrollbar is below the fold.
   Lets users scroll a wide+tall table horizontally without scrolling down to its bottom edge. */
.sticky-hscroll {
  position: fixed; bottom: 0; z-index: 1200;
  overflow-x: scroll; overflow-y: hidden; height: 14px;
  background: rgba(255,255,255,.92); box-shadow: 0 -1px 4px rgba(0,0,0,.08);
}
.sticky-hscroll-inner { height: 1px; }
.sticky-hscroll::-webkit-scrollbar { height: 12px; }
.sticky-hscroll::-webkit-scrollbar-thumb { background: #8a90a0; border-radius: 6px; }
.sticky-hscroll::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* Status chips */
.status-active    { background: #e8f5e9 !important; color: #2e7d32 !important; }
.status-inactive  { background: #f5f5f5 !important; color: #757575 !important; }
.status-deceased  { background: #fce4ec !important; color: #c62828 !important; }
.status-transferred { background: #e3f2fd !important; color: #1565c0 !important; }
.status-open      { background: #fff3e0 !important; color: #e65100 !important; }
.status-ongoing   { background: #e8eaf6 !important; color: #283593 !important; }
.status-resolved  { background: #e8f5e9 !important; color: #2e7d32 !important; }
.status-referred  { background: #f3e5f5 !important; color: #6a1b9a !important; }
.status-closed    { background: #f5f5f5 !important; color: #616161 !important; }
.status-issued    { background: #e8f5e9 !important; color: #2e7d32 !important; }
.status-cancelled { background: #fce4ec !important; color: #c62828 !important; }
.status-draft     { background: #fff8e1 !important; color: #9a6400 !important; }
.status-expired   { background: #efebe9 !important; color: #4e342e !important; }

/* Accessibility: honour the OS "reduce motion" setting. Neutralises countUp,
   bims-spin, the sidebar/row-hover transitions, and anything added later. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}