/* =====================================================================
   Impact Education — shtresa e dizajnit
   Metafora: REGJISTRI I LETRËS. Emri majtas, shuma djathtas, të lidhura
   me pika. Borxhi me bojë të kuqe, e shlyera me bojë të zezë.
   Thellësia: VETËM KUFIJ. Asnjë kartë që noton.
   ===================================================================== */

:root {
  /* letra */
  --paper:        #FBF9F5;   /* kanavaca */
  --paper-raised: #FFFDF9;   /* fleta mbi kanavacë — ndryshim i heshtur */
  --paper-inset:  #F4F0E7;   /* fushat ku shkruhet */

  /* vijat e fletores — një regjistër kontabiliteti ka vija që i sheh,
     jo vija që i merr me mend */
  --rule:         rgba(42, 50, 64, 0.18);
  --rule-soft:    rgba(42, 50, 64, 0.10);
  --rule-strong:  rgba(42, 50, 64, 0.34);
  --rule-focus:   rgba(31, 78, 107, 0.45);

  /* boja */
  --ink:          #1A1F2B;
  --ink-2:        #3D4654;
  --ink-3:        #6B7585;
  --ink-4:        #9AA2B0;

  /* boja me ngjyrë */
  --ink-red:      #A02C2C;   /* borxh / vonesë */
  --ink-green:    #4A6B3D;   /* e shlyer */
  --ink-amber:    #8A6A1F;   /* e pjesshme */
  --marine:       #1F4E6B;   /* veprimi */

  --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;

  /* njësia bazë e hapësirës: 4px; ritmi i faqes: 8 */
  --step: 0.5rem;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
}

/* iOS nuk bën zoom nën 16px */
input, select, textarea, button { font-size: 1rem; }

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Emrat dhe titujt me serif.
   KUJDES: Tailwind Play CDN e injekton preflight-in në një <style> PAS
   këtij skedari, dhe preflight-i vendos `font-weight: inherit` te h1-h6.
   Me specifikë të barabartë fiton ai që vjen i fundit — prandaj këtu
   përdoret `body h1` (0,0,2) në vend të `h1` (0,0,1). */
body h1, body h2, body h3, body h4, .u-name {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}
body h1 { letter-spacing: -0.02em; }

/* Shifrat gjithmonë tabulare, që kolonat e parave të rreshtohen */
.num, .u-sum, td, th, input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* =====================================================================
   NËNSHKRIMI — rreshti i regjistrit
   emri ................................. 20.000 L
   ===================================================================== */
.ledger { display: block; }

.ledger-row {
  display: block;                     /* kolonë: rreshti i parë + metadata poshtë */
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: inherit;
}
.ledger-row:last-child { border-bottom: 0; }
@media (hover: hover) {
  a.ledger-row:hover .ledger-name { color: var(--marine); }
}

/* Rreshti kryesor — emri, pikat dhe shuma GJITHMONË në të njëjtën vijë */
.ledger-line {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
}

.ledger-name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-meta {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 0.2rem;
}

/* pikat udhëheqëse — pika të vërteta, jo një vijë e zbehtë */
.ledger-leader {
  flex: 1 1 auto;
  min-width: 1.25rem;
  height: 0.4rem;
  transform: translateY(-0.15rem);
  background-image: radial-gradient(circle at center, rgba(42,50,64,.42) 1.1px, transparent 1.3px);
  background-size: 7px 7px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

/* Shuma është ajo që lexon financierja e para — le të jetë e trashë. */
.ledger-sum {
  flex: 0 0 auto;
  font-size: 1.1875rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.sum-owed    { color: var(--ink-red); }
.sum-settled { color: var(--ink-2); }
.sum-in      { color: var(--ink-green); }
.ledger-sub  { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); text-align: right; margin-top: 0.1rem; }

/* =====================================================================
   Sipërfaqet
   ===================================================================== */
.sheet {
  background: var(--paper-raised);
  border: 1.5px solid var(--rule);
  border-radius: 0.875rem;
}
.sheet-pad { padding: 1.25rem; }

/* Fletë vetëm në desktop — për tabelat që në celular bëhen karta vetë
   (.tc), ku një kornizë e jashtme do të jepte kuti brenda kutie. */
@media (min-width: 768px) {
  .sheet-md {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 0.875rem;
    overflow: hidden;
  }
}

/* Titull seksioni — i vogël, i qetë, mbi një vijë */
.sheet-title {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: 0.35rem;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Rreshti i totalit — fundi i një kolone, duhet të duket i tillë */
.total-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-top: 2px solid var(--ink);
  padding-top: 0.85rem; margin-top: 0.35rem;
}
.total-row .total-label {
  font-size: 0.875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
}
.total-row .total-sum { font-size: 1.6875rem; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Shifra kryesore — numri që drejton veprimin
   ===================================================================== */
.figure {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-weight: 800;
  line-height: 1.02;
}
.figure-hero { font-size: 3.25rem; }
.figure-lg   { font-size: 1.6875rem; }

/* =====================================================================
   Kontrollet — të mëdha, të prekshme me gishtin, pa zhurmë
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.35rem;
  border-radius: 0.625rem;
  font-size: 1.0625rem; font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--rule-focus); outline-offset: 2px; }

.btn-primary { background: var(--marine); color: #fff; border-color: var(--marine); }
.btn-primary:hover { background: #143548; border-color: #143548; }

/* Dytësori është SHTYPUR, jo i tejdukshëm — që të lexohet si buton edhe
   me një shikim të shpejtë. */
.btn-ghost { background: var(--paper-inset); color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: #EBE5D8; border-color: var(--ink-3); }

.btn-danger { background: #FBF0EE; color: var(--ink-red); border-color: rgba(160,44,44,.45); }
.btn-danger:hover { background: #F5DDD9; border-color: var(--ink-red); }

.btn-wa { background: #E1EEDE; color: #35502B; border-color: rgba(74,107,61,.45); }
.btn-wa:hover { background: #D2E4CD; border-color: var(--ink-green); }

/* Veprim dytësor brenda rreshtave: buton kompakt, por gjithsesi BUTON —
   me kornizë dhe sfond, jo lidhje teksti. */
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 44px; padding: 0 .9rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem; font-weight: 700;
  color: var(--ink-2);
  background: var(--paper-inset);
  border: 1.5px solid var(--rule-strong);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.act:hover { background: #EBE5D8; border-color: var(--ink-3); color: var(--ink); }
.act:focus-visible { outline: 3px solid var(--rule-focus); outline-offset: 2px; }

.act-primary { background: var(--marine); color: #fff; border-color: var(--marine); }
.act-primary:hover { background: #143548; color: #fff; border-color: #143548; }

.act-danger { color: var(--ink-red); border-color: rgba(160,44,44,.40); background: #FBF0EE; }
.act-danger:hover { background: #F5DDD9; border-color: var(--ink-red); color: var(--ink-red); }

.act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Fushat — "të futura", më të errëta se rrethina */
.field {
  width: 100%; min-height: 52px; padding: .7rem .9rem;
  background: var(--paper-raised);
  border: 1.5px solid var(--rule-strong);
  border-radius: 0.625rem;
  color: var(--ink); font-size: 1.0625rem; font-weight: 500;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field:hover { border-color: var(--ink-4); }
.field:focus {
  border-color: var(--marine);
  box-shadow: 0 0 0 3px rgba(31,78,107,.18);
}
.field::placeholder { color: var(--ink-4); font-weight: 400; }
textarea.field { min-height: 110px; resize: vertical; line-height: 1.55; }

.field-label {
  display: block; font-size: 0.875rem; font-weight: 700;
  color: var(--ink); margin-bottom: .45rem;
}

/* =====================================================================
   Badge — të rralla tani; boja e bën punën në lista
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center;
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; white-space: nowrap;
  border: 1.5px solid transparent;
}
.badge-ok   { background:#E4EEDF; color:#2E4426; border-color:rgba(74,107,61,.45); }
.badge-warn { background:#F7EDD4; color:#5A4514; border-color:rgba(138,106,31,.45); }
.badge-bad  { background:#F7E2DE; color:#6B1D1D; border-color:rgba(160,44,44,.45); }
.badge-info { background:#E3EDF3; color:#0F2C3E; border-color:rgba(31,78,107,.45); }
.badge-mute { background:var(--paper-inset); color:var(--ink-2); border-color:var(--rule-strong); }

/* =====================================================================
   Tabelat — vija fletoreje në desktop, karta në celular
   ===================================================================== */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  text-align: left;
  font-size: .8125rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
  padding: .7rem .85rem;
  border-bottom: 2px solid var(--rule-strong);
  white-space: nowrap;
}
.tbl tbody td {
  padding: .95rem .85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  font-size: 1.0625rem;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
@media (min-width: 768px) { .tbl tbody tr:hover { background: rgba(31,78,107,.028); } }

@media (max-width: 767px) {
  .tc, .tc tbody, .tc tr, .tc td { display: block; width: 100%; }
  .tc thead { display: none; }
  .tc tr {
    background: var(--paper-raised);
    border: 1.5px solid var(--rule);
    border-radius: .875rem;
    padding: .9rem 1rem;
    margin-bottom: .7rem;
  }
  .tc td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .45rem 0; border: 0; text-align: right;
    font-weight: 600;
  }
  .tc td::before {
    content: attr(data-label);
    font-size: .8125rem; font-weight: 700; color: var(--ink-3);
    text-align: left; flex-shrink: 0;
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  }
  .tc td[data-label=""]::before, .tc td:not([data-label])::before { content: none; }
  .tc td.tc-full { justify-content: flex-start; padding-top: .6rem; border-top: 1px solid var(--rule-soft); margin-top: .3rem; }
}

/* =====================================================================
   Flash
   ===================================================================== */
.flash { animation: flashIn .2s ease-out; border-left-width: 3px; }
@keyframes flashIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   PRINT — mbyllja mujore mbi letër
   ===================================================================== */
.print-only { display: none; }
@media print {
  .no-print, nav, aside { display: none !important; }
  .print-only { display: block; }
  body { background: #fff !important; color: #000; font-size: 11pt; }
  main { padding: 0 !important; max-width: none !important; }
  .lg\:ml-64 { margin-left: 0 !important; }
  a { text-decoration: none; color: #000; }
  .sheet, .rounded-2xl, .rounded-xl { border-radius: 0 !important; border-color: #000 !important; }
  .ledger-leader { background-image: radial-gradient(circle at center, #666 1px, transparent 1.2px); }
  /* Mbylljet shpesh printohen për kontabilitetin — totalet mbeten të theksuara */
  .total-row { border-top: 2px solid #000 !important; }
  .total-row .total-sum { font-size: 14pt; font-weight: 800; }
  .ledger-sum, .figure { font-weight: 800 !important; }
  h1, h2, h3 { font-weight: 700 !important; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 4px 6px; font-size: 9pt; }
}