/* Shared composite components — used by more than one page (or by the shared
   topbar). Loaded globally after app.css. Page-exclusive styles live in
   assets/styles/pages/<page>.css. */

/* ===== Sąrašo juosta (paieška + filtrai) — visi sąrašų ekranai ===== */
/* Kairėje paieška, dešinėje būsenos ženkliukai ir „Filtrai" mygtukas; lentelė lieka
   savo baltoje kortelėje žemiau (kliento pastaba 2026-08-20). */
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.list-toolbar__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ===== Legend (dashboard PA card, reconciliation, receipts, expected-doc) ===== */
.legend { display: flex; gap: 22px; margin-bottom: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--blue { background: var(--navy); }
.dot--green { background: var(--green); }
.dot--yellow { background: var(--yellow); }

/* ===== Proving-doc list rows (dashboard + PA poreikis) ===== */
/* PA poreikio kortelė — permodeliuota 2026-09-01: viena įvykdymo juosta + LYGIUOTI skaičių
   stulpeliai (fiksuoto pločio, dešinėje), o paspaudus eilutę išsiskleidžia detalus grafikas. */
.req { border-bottom: 1px solid #e8efec; }
.req:last-of-type { border-bottom: 0; }
.req > summary { list-style: none; }
.req > summary::-webkit-details-marker { display: none; }
.req-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr) 336px; align-items: center; padding: 9px 0; gap: 14px; color: inherit; text-decoration: none; cursor: pointer; }
.req-row__name { font-size: 13px; }
.req-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr) 336px; gap: 14px; padding: 2px 0 6px; border-bottom: 1px solid #e8efec; font-size: 11px; letter-spacing: .3px; color: var(--text-muted); }
.req-cols { display: grid; grid-template-columns: repeat(3, 104px); gap: 8px; justify-items: end; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.req-track { position: relative; display: block; height: 16px; border-radius: 999px; background: #e8efec; overflow: hidden; }
.req-track i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--yellow); }
.req-track--short i { background: var(--red); opacity: .75; }
.req-track em { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 10.5px; line-height: 1; color: var(--text); }
.req-detail { padding: 4px 0 14px; }
.req-detail__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 110px; align-items: center; gap: 12px; padding: 3px 0; font-size: 12px; }
.req-detail__bar { position: relative; display: block; height: 10px; border-radius: 999px; background: #f2f6f4; }
.req-detail__bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; display: block; }
.req-detail__value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.req-detail__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; font-size: 12px; }
.req-detail__foot a { color: var(--green-700); }

/* ===== Status dots (PA suderinimas + Tikimi dokumentai) ===== */
.req-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 7px; }
.req-dot--short { background: #e5574e; }
.req-dot--warn  { background: #e9b143; }
.req-dot--ok    { background: var(--green); }

/* ===== Reconciliation summary tiles (reconciliation + expected-doc + show pages) ===== */
.recon-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
/* Bazinis fonas #f4f6f5 ant pilko puslapio fono buvo vos matomas (kliento pastaba
   2026-08-20) — „Bendras poreikis" gauna savo (navy) atspalvį kaip kitos dvi plytelės. */
.recon-tile { background: rgba(23, 58, 94, .10); border-radius: 12px; padding: 14px 16px; }
.recon-tile__label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.recon-tile__value { font-size: 22px; font-weight: 600; color: var(--navy); }
.recon-tile__value span { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.recon-tile--received { background: rgba(130, 191, 158, .14); }
.recon-tile--received .recon-tile__value { color: var(--green-700); }
.recon-tile--missing { background: rgba(232, 99, 58, .10); }
.recon-tile--missing .recon-tile__value { color: var(--orange); }

/* ===== Reconciliation status pills (also rendered in the shared topbar notif panel) ===== */
.recon-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.6; white-space: nowrap; }
.recon-pill--short { background: rgba(229, 87, 78, .15); color: #c84a44; }
.recon-pill--warn  { background: rgba(233, 177, 67, .18); color: #a87a14; }
.recon-pill--ok    { background: rgba(130, 191, 158, .22); color: var(--green-700); }
.recon-pill--unset { background: #eef0ee; color: var(--text-muted); }
/* Ant tamsinto fono (recon-tile) permatomi pilkšvi fonai susilieja — čia pilkos virsta
   pilnaverčėmis (baltos pagrindo) spalvomis, kad būsenų ženkliukai išliktų ryškūs. */
.recon-tile .recon-pill--short { background: #fbdedc; }
.recon-tile .recon-pill--warn  { background: #fcecd4; }
.recon-tile .recon-pill--ok    { background: #e3f1e9; }
.recon-tile .recon-pill--unset { background: #f6f7f6; }

/* ===== Filter bar + chips (collection, reconciliation, planning, work_act, receipts) ===== */
.chip { display: inline-flex; align-items: center; height: var(--field-h); padding: 0 20px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 13px; color: var(--text); }
.chip--active { background: var(--yellow); border-color: var(--yellow); font-weight: 600; color: #201f23; }


/* ===== Inline search width (receipts + import history) ===== */
.search--inline { width: 240px; max-width: 100%; }

/* ===== Mobile (360px) =====
   These live here, not in app.css: this file loads AFTER app.css, so a mobile
   override written there loses to the base rules above at equal specificity. */
@media (max-width: 720px) {
  /* PA poreikis: stack name above the track+values so 360px fits. */
  .req-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .req-row__name { font-size: 13px; }
  .req-head { display: none; }
  .req-cols { justify-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Reconciliation summary tiles: 4-up -> 2x2. */
  .recon-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
  .recon-tile { padding: 12px 14px; }
  .recon-tile__value { font-size: 18px; }

}

/* ===== Inline data-quality flag (GPAIS carrier mismatch etc.) =====
   Replaces a bare "⚠" that said something was wrong without saying what. */
.flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  vertical-align: middle;
  /* Rendered as a <button>: click opens the explanation (hover tooltips are
     invisible on touch and unreachable by keyboard). Reset the UA button look. */
  font-family: inherit; cursor: pointer;
}
.flag:hover { filter: brightness(.97); }
.flag:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.flag[aria-expanded="true"] { filter: brightness(.94); }
.flag--warn { background: #fff4e5; color: #9a5b00; border: 1px solid #f0c089; }
.flag__text { font-weight: 500; }
@media (max-width: 720px) { .flag__text { display: none; } }

/* ===== Explanation panel — tells the user WHY a filtered view looks alarming ===== */
.explain {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 16px; margin-bottom: 16px;
  border-radius: 12px; border: 1px solid var(--border-soft); background: #fff;
}
.explain--warn { background: #fffaf3; border-color: #f0c089; }
.explain__body { flex: 1; min-width: 0; }
.explain__body strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
.explain__body p { margin: 0 0 4px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.explain__hint { font-size: 12px !important; }
.explain .btn--sm { flex: none; height: 34px; padding: 0 14px; font-size: 13px; }
@media (max-width: 720px) {
  .explain { flex-direction: column; gap: 10px; }
  .explain .btn--sm { width: 100%; justify-content: center; }
}

/* ===== Click-opened explanation panel for a .flag =====
   position: fixed on purpose — flags sit inside .table-scroll (overflow-x: scroll),
   which would clip an absolutely positioned child. Placed by the controller. */
.flag-pop {
  position: fixed; z-index: 60; width: 340px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid var(--border-soft); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(32, 31, 35, .16); padding: 12px 14px;
  font-size: 13px; color: var(--text);
}
.flag-pop__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.flag-pop__head strong { flex: 1; font-size: 14px; color: var(--navy); }
.flag-pop__close {
  flex: none; border: 0; background: transparent; cursor: pointer; padding: 2px;
  color: var(--text-muted); border-radius: 6px; line-height: 0;
}
.flag-pop__close:hover { color: var(--text); background: #f4f6f5; }
.flag-pop__body { margin: 0; display: grid; gap: 8px; }
.flag-pop__row dt { font-size: 11px; color: var(--text-muted); margin-bottom: 1px; }
.flag-pop__row dd { margin: 0; font-size: 13px; color: var(--text); line-height: 1.45; }
@media (max-width: 720px) { .flag-pop { width: calc(100vw - 24px); } }

/* ---- Puslapio (i) „Kaip veikia šis puslapis" modalas ---- */
.page-info { display: inline-flex; align-items: center; }
.info-modal {
    border: none; border-radius: 14px; padding: 0;
    width: min(560px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    box-shadow: 0 18px 48px rgba(15, 58, 42, 0.22);
    color: var(--text);
}
.info-modal::backdrop { background: rgba(15, 42, 58, 0.45); }
.info-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px; border-bottom: 1px solid var(--line, #e3e9e6);
    position: sticky; top: 0; background: #fff;
}
.info-modal__head h2 { margin: 0; font-size: 17px; color: var(--green-700, #0f3a2a); }
.info-modal__body { padding: 14px 20px 20px; overflow-y: auto; font-size: 13.5px; line-height: 1.55; }
.info-modal__body h3 { margin: 14px 0 4px; font-size: 13px; color: var(--green-700, #0f3a2a); text-transform: uppercase; letter-spacing: 0.4px; }
.info-modal__body h3:first-child { margin-top: 0; }
.info-modal__body p { margin: 0 0 8px; }
.info-modal__body ul { margin: 0 0 8px; padding-left: 18px; }
.info-modal__body li { margin-bottom: 4px; }
.info-modal__body a { color: var(--green-700, #0f3a2a); }

/* Export pill + dropdown panel (Figma 347:1132) — shared by collection + pa-reconciliation. */
.export-menu { position: relative; }
.export-menu summary { list-style: none; cursor: pointer; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: var(--shadow-card); padding: 8px; z-index: 30; min-width: 180px; }
.export-menu__panel a { display: block; padding: 8px 12px; border-radius: 8px; }
.export-menu__panel a:hover { background: #f4f6f5; }

/* ISO datepicker (date_picker_controller.js): matomas tekstinis YYYY-MM-DD laukas; paslėptas
   native <input type=date> tik kalendoriui — turi likti atvaizduojamas (showPicker() atsisako
   veikti ant display:none), todėl slepiamas nuline geometrija po lauku. */
.date-picker { position: relative; display: block; }
.date-picker input[type="date"] { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }