* { font-family: 'Cairo', sans-serif; }
body { -webkit-tap-highlight-color: transparent; }

/* ===== Visual identity (كنيسة الأنبا شنودة بالصاوي) ===== */
:root {
  --brand: #7a1f1f;        /* العنابي الداكن — الإطار */
  --brand-orange: #e8792b; /* البرتقالي — الخلفية */
  --brand-gold: #f0a91e;   /* الذهبي — القباب */
  --brand-soft: #fbeeee;
}

/* Arabic numerals toggle helper */
.num-latin { font-feature-settings: "lnum"; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* sidebar link */
.nav-link { transition: all .15s; }
.nav-link.active { background: var(--brand); color: #fff; }
.nav-link:not(.active):hover { background: var(--brand-soft); color: var(--brand); }

/* card hover */
.stat-card { transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,.1); }

/* modal */
.modal-backdrop { background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }

/* table */
table.data-table th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }
table.data-table tbody tr:hover { background: #faf5ff; }

/* toast */
#toast-container { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 9999; }
.toast { animation: slidein .3s ease; }
@keyframes slidein { from { opacity:0; transform: translateY(-20px);} to {opacity:1; transform: translateY(0);} }

/* signature pad */
.sig-pad { touch-action: none; background: #fff; border: 2px dashed #cbd5e1; border-radius: .5rem; }

/* qr card print */
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; inset: 0; width: 100%; }
  .no-print { display: none !important; }
  .qr-card { page-break-inside: avoid; }
}
.qr-card { border: 1px solid #ddd; border-radius: 8px; padding: 10px; }

/* fade */
.fade-in { animation: fade .25s ease; }
@keyframes fade { from {opacity:0;} to {opacity:1;} }

/* disabled print button */
.print-locked { opacity:.45; cursor:not-allowed !important; position:relative; }

/* hide names when "طباعة بدون أسماء" is active */
#print-area.names-hidden .name-cell { color: transparent; position: relative; }
#print-area.names-hidden .name-cell::after {
  content: '—'; color: #94a3b8; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* modal bottom-sheet slide-up on mobile */
.modal-panel { animation: fade .2s ease; }
@media (max-width: 639px) {
  .modal-panel { animation: sheetup .28s cubic-bezier(.2,.8,.2,1); }
}
@keyframes sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* bottom nav (mobile) */
#bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
.bottom-nav-link { transition: color .15s; -webkit-tap-highlight-color: transparent; }
.bottom-nav-link.active { color: var(--brand); }
.bottom-nav-link.active i { transform: translateY(-1px); }

/* =========================================================
   MOBILE-FIRST RESPONSIVE ENHANCEMENTS
   ========================================================= */

/* Prevent iOS auto-zoom on input focus: inputs must be >=16px */
@media (max-width: 640px) {
  input, select, textarea, button { font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"] { font-size: inherit !important; }
}

/* Comfortable touch targets on mobile */
@media (max-width: 1023px) {
  button, .nav-link, a[href^="#"] { -webkit-tap-highlight-color: transparent; }
  .nav-link { padding-top: .8rem; padding-bottom: .8rem; }
  /* action icon buttons in tables get bigger hit area */
  td button, td a { min-width: 2rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
}

/* Card-style tables on small screens.
   Add class "cards-on-mobile" to a <table> and data-label on each <td>. */
@media (max-width: 640px) {
  table.cards-on-mobile thead { display: none; }
  table.cards-on-mobile, table.cards-on-mobile tbody { display: block; width: 100%; }
  table.cards-on-mobile tr {
    display: block; border: 1px solid #e2e8f0; border-radius: .9rem;
    padding: .5rem .25rem; margin-bottom: .6rem; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  table.cards-on-mobile td {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .45rem .85rem !important; border: none !important; text-align: left;
  }
  table.cards-on-mobile td::before {
    content: attr(data-label); font-weight: 700; color: #64748b;
    font-size: .8rem; text-align: right; flex-shrink: 0;
  }
  /* row that has no label (e.g. actions) spans nicely */
  table.cards-on-mobile td[data-label=""]::before { content: ""; }
  table.cards-on-mobile td.card-actions { justify-content: flex-end; padding-top: .6rem !important; border-top: 1px solid #f1f5f9 !important; margin-top: .2rem; }
  /* the "name" cell becomes the card title */
  table.cards-on-mobile td.card-title { font-size: 1rem; font-weight: 700; }
  table.cards-on-mobile td.card-title::before { display: none; }
}

/* Horizontal scroll hint for wide tables that stay tabular */
.table-scroll { -webkit-overflow-scrolling: touch; }

/* Make report tables at least readable & scrollable on phones.
   Wrap each report table in its own horizontal scroll area so wide
   tables never break the layout. */
@media (max-width: 640px) {
  #print-area table, #report-output table { font-size: .78rem; }
  #print-area table:not(.cards-on-mobile),
  #report-output table:not(.cards-on-mobile) {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; width: 100%;
  }
  #print-area table th, #print-area table td,
  #report-output table th, #report-output table td { white-space: nowrap; }
}

/* Larger, easier pager buttons on mobile */
@media (max-width: 640px) {
  #ben-pager button { min-width: 2.4rem; min-height: 2.4rem; }
}

/* stat cards tighter on phones */
@media (max-width: 640px) {
  .stat-card { padding: 0.9rem !important; }
}