/* ============================================================
   خدمتي — Black & Gold theme
   ============================================================ */
:root { --gold:#D4AF37; --ink:#0A0A0A; }
* { font-feature-settings: "tnum"; }
body { background:#0A0A0A; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#333; border-radius:4px; }
::-webkit-scrollbar-track { background:#111; }

.font-mono, .font-mono * { font-family:'JetBrains Mono', monospace; }

/* Cards / containers */
.card-dark {
  background:#141414; border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
}

/* Buttons */
.btn-gold {
  background:var(--gold); color:#0A0A0A; font-weight:700;
  padding:10px 18px; border-radius:12px; transition:.15s; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-gold:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-ghost {
  background:transparent; color:#e5e7eb; border:1px solid rgba(255,255,255,.15);
  padding:9px 16px; border-radius:12px; transition:.15s; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

.icon-btn {
  display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:9px; background:rgba(255,255,255,.05); color:#cbd5e1;
  transition:.15s; cursor:pointer; margin-inline-start:2px;
}
.icon-btn:hover { background:rgba(212,175,55,.18); color:var(--gold); }

/* Inputs */
.inp {
  width:100%; background:#0d0d0d; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:10px 12px; color:#f3f4f6; transition:.15s;
  margin-bottom:4px; outline:none;
}
.inp:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,175,55,.2); }
.lbl { display:block; font-size:13px; color:#9ca3af; margin:8px 0 2px; }

/* Nav */
.nav-link {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; color:#cbd5e1; font-size:14px; transition:.15s;
}
.nav-link:hover { background:rgba(255,255,255,.05); color:#fff; }
.nav-active { background:rgba(212,175,55,.15); color:var(--gold); font-weight:700; }

/* Badges */
.badge-ok, .badge-bad, .badge-warn, .badge-gold {
  display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
}
.badge-ok   { background:rgba(22,163,74,.18); color:#4ade80; }
.badge-bad  { background:rgba(220,38,38,.18); color:#f87171; }
.badge-warn { background:rgba(217,119,6,.18); color:#fbbf24; }
.badge-gold { background:rgba(212,175,55,.2); color:var(--gold); }

/* Scan / mode toggles */
.mode-btn {
  padding:10px 18px; border-radius:12px; font-weight:700; cursor:pointer;
  border:1px solid rgba(255,255,255,.15); color:#cbd5e1; transition:.15s;
}
.mode-btn.active { background:var(--gold); color:#0A0A0A; border-color:var(--gold); }

/* Designer side toggle */
.side-btn {
  padding:8px 16px; border-radius:10px; cursor:pointer; font-weight:700;
  border:1px solid rgba(255,255,255,.15); color:#cbd5e1;
}
.side-btn.active { background:var(--gold); color:#0A0A0A; border-color:var(--gold); }

/* Parent portal tabs */
.ptab {
  padding:10px 18px; cursor:pointer; font-weight:700; color:#9ca3af;
  border-bottom:2px solid transparent;
}
.ptab.active { color:var(--gold); border-color:var(--gold); }

/* ============================================================
   Mobile responsiveness (layout-only — preserves the desktop look)
   ============================================================ */
/* Tables: never overflow the viewport — wrap them so they scroll inside cards */
.card-dark > table,
.card-dark > .overflow-x-auto > table { min-width:100%; }
@media (max-width: 640px) {
  /* Tighter table cells on phones so columns fit */
  table th, table td { padding:8px 6px !important; font-size:12.5px; }
  /* Headers stack their action buttons under the title */
  .page-head { flex-wrap:wrap; gap:10px; }
  /* Make stat grids breathe on small screens */
  .stat-grid { gap:8px !important; }
  /* Modals fill more of the screen */
  .modal-card { max-width:100% !important; }
}
/* Any horizontally-wide block (tables/charts) becomes swipeable */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Tap targets a touch larger on coarse pointers */
@media (pointer: coarse) {
  .btn-gold, .btn-ghost { padding-top:12px; padding-bottom:12px; }
  .nav-link { padding:12px; }
}

/* ============================================================
   A4 print layout — N cards per page (dynamic grid)
   ============================================================
   Card physical size is set per template via CSS variables:
     --card-w : card width in mm
     --card-h : card height in mm
     --cards-cols : how many cards fit horizontally
     --cards-rows : how many cards fit vertically
   These are computed at runtime in print.js based on the active
   template's card_width_cm / card_height_cm.
*/
.a4-page {
  width:210mm; min-height:297mm; background:#fff; margin:0 auto 10mm;
  padding:8mm 12mm; display:grid;
  grid-template-columns: repeat(var(--cards-cols, 2), var(--card-w, 86mm));
  grid-template-rows:    repeat(var(--cards-rows, 5), var(--card-h, 54.2mm));
  gap:5mm 6mm; justify-content:center; align-content:start; box-sizing:border-box;
}
.a4-cell {
  border:1px dashed #bbb; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; position:relative;
}
/* card-face fills its cell exactly so print == designer */
.card-face {
  position:relative; background:#fff; overflow:hidden;
  width: var(--card-w, 86mm);
  height: var(--card-h, 54.2mm);
}
/* default image fit is "cover" — actual fit/position is applied inline by JS */
.card-face img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-face .bg-custom { position:absolute; inset:0; background-repeat:no-repeat; }
.card-el { position:absolute; box-sizing:border-box; }
.card-el.text { color:#000; font-weight:700; display:flex; align-items:center; line-height:1; white-space:nowrap; }

@media print {
  body { background:#fff !important; }
  .no-print { display:none !important; }
  /* Hide any transient UI overlays (toast notifications, etc.) so they
     never show up on the printed page on top of the cards. */
  #ia-toast, .ia-toast, .toast { display:none !important; }
  .a4-page { margin:0; box-shadow:none; page-break-after:always; }
  .a4-cell { border:none !important; }
  @page { size:A4; margin:0; }
}

/* When a financial report is on screen, print ONLY that report */
@media print {
  body.printing-report * { visibility:hidden !important; }
  body.printing-report .report-print,
  body.printing-report .report-print * { visibility:visible !important; }
  body.printing-report .report-print {
    position:absolute; inset:0; margin:0; width:100%;
    box-shadow:none; border-radius:0;
  }
}