/* 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. */

/* ===== 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) ===== */
.req-row { display: grid; grid-template-columns: 1.5fr 110px 230px; align-items: center; padding: 9px 0; gap: 14px; color: inherit; text-decoration: none; }
.req-row__name { font-size: 13px; }

/* ===== 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; }
.recon-tile { background: #f4f6f5; 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; }
.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); }

/* ===== Filter bar + chips (collection, reconciliation, planning, work_act, receipts) ===== */
.collection-filter { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; flex-wrap: wrap; }
.collection-filter__head { display: flex; align-items: center; gap: 10px; }
.collection-filter__chips { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.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; }
/* Select rendered as a filter chip (collection report filter bar) */
.chip-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px; max-width: 200px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23898b94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
.chip--active.chip-select { max-width: 250px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23201f23' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.chip-clear { color: var(--orange); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* ===== Segmented quarter-tabs (collection, reconciliation, planning, work_act, receipts) ===== */
.quarter-tabs { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.quarter-tabs .qtab { display: inline-flex; align-items: center; height: var(--field-h); padding: 0 18px; font-size: 13px; color: var(--text-muted); border-right: 1px solid var(--border); }
.quarter-tabs .qtab:last-child { border-right: 0; }
.quarter-tabs .qtab.is-active { background: var(--navy); color: #fff; }
.quarter-tabs .qtab:hover:not(.is-active) { background: #f4f6f5; color: var(--navy); }
.morph-tabs { margin-bottom: 18px; }

/* ===== 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 bars+values so 360px fits. */
  .req-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .req-row__name { font-size: 13px; }

  /* 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; }

  /* Surinkimo ataskaita filter chip row + quarter tabs: wrap. */
  .collection-filter { padding: 12px; gap: 12px; }
  .collection-filter__chips { flex-wrap: wrap; gap: 6px; margin-left: 0; }
  .quarter-tabs { flex-wrap: wrap; }
}

/* ===== 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); } }