/* Agency home and KPO tabs. Loaded after theme.css, so these rules win over it. */

/* ── Limit gauges ── */
.gauge-ok { --gauge: var(--emerald); --gauge-soft: var(--emerald-soft); --gauge-border: var(--emerald-border); }
.gauge-warn { --gauge: var(--amber); --gauge-soft: var(--amber-soft); --gauge-border: var(--amber-border); }
.gauge-danger { --gauge: var(--rose); --gauge-soft: var(--rose-soft); --gauge-border: var(--rose-border); }

.agency-bars, .kpo-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.agency-bars { margin-bottom: 20px; padding: 0 32px; }
.kpo-gauges { margin: 0 32px 16px; }
.agency-bars .rate-warning, .kpo-gauges .rate-warning { grid-column: 1 / -1; margin: 0; }

.gauge {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gauge);
  border-radius: 14px;
  background: linear-gradient(120deg, var(--gauge-soft), var(--surface) 62%);
  box-shadow: var(--shadow-sm, var(--shadow-xs));
}
.gauge-head { display: flex; align-items: center; gap: 8px; }
.gauge-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: var(--gauge); color: var(--surface); }
.gauge-title { margin: 0; color: var(--fg); font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
.gauge-chip { margin-left: auto; padding: 2px 9px; border: 1px solid var(--gauge-border); border-radius: 999px; background: var(--surface); color: var(--gauge); font-size: 11px; font-weight: 600; white-space: nowrap; }
.gauge-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gauge-percent { color: var(--gauge); font-size: 32px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; }
.gauge-figures { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; text-align: right; }
.gauge-total { color: var(--fg); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.gauge-limit { color: var(--fg-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.gauge-track { height: 12px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--gauge) 16%, var(--surface-3)); }
.gauge-track span { display: block; height: 100%; min-width: 10px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--gauge) 72%, var(--surface)), var(--gauge)); box-shadow: 0 1px 4px color-mix(in srgb, var(--gauge) 45%, transparent); }
.gauge-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.gauge-forecast.is-over, .gauge-forecast.is-over strong { color: var(--rose); font-weight: 650; }
.gauge-foot strong { color: var(--fg); font-weight: 650; }

/* ── Stat cards ── */
.stat-tone-indigo { --tone: var(--indigo); --tone-soft: var(--indigo-soft); }
.stat-tone-emerald { --tone: var(--emerald); --tone-soft: var(--emerald-soft); }
.stat-tone-rose { --tone: var(--rose); --tone-soft: var(--rose-soft); }
.stat-tone-amber { --tone: var(--amber); --tone-soft: var(--amber-soft); }

.agency-stat-grid { gap: 16px; margin-bottom: 20px; }
.agency-stat-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 18px; }
.agency-stat-card .stat-top { display: flex; align-items: center; gap: 10px; }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--tone-soft); color: var(--tone); }
.agency-stat-card .stat-label { margin: 0; color: var(--fg-3); font-size: 13px; font-weight: 500; }
.agency-stat-card .stat-value { color: var(--fg); font-family: var(--font-sans); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: break-word; }
.agency-stat-card.stat-tone-emerald .stat-value { color: var(--emerald); }
.agency-stat-card.stat-tone-rose .stat-value { color: var(--rose); }
.agency-stat-card .stat-value-text { font-size: 14.5px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.agency-stat-card .stat-sub { margin: 0; color: var(--fg-3); font-size: 12.5px; }

/* ── Quick actions ── */
.agency-quick-actions .quick-action-btn { height: 40px; padding: 0 18px; font-weight: 600; }

/* ── Panels ── */
.agency-panel-grid { gap: 20px; }
.agency-panel-grid .card-panel { border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow-xs); }
.agency-panel-grid .panel-head { align-items: center; margin-bottom: 8px; }
.agency-panel-grid .panel-title-block { display: flex; align-items: center; gap: 10px; }
.panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--tone-soft); color: var(--tone); }
.agency-panel-grid .panel-title-block .panel-cap { color: var(--fg); font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.agency-panel-sub { color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }

.agency-list-item { gap: 12px; padding: 12px 0; font-size: 13.5px; }
.agency-list-item .agency-list-main { flex: 1 1 auto; }
.agency-list-item .agency-list-title { color: var(--fg); }
.agency-list-item .agency-list-meta { margin-top: 2px; color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.agency-list-item .agency-list-meta.is-soon { color: var(--amber); font-weight: 600; }
.agency-list-item .agency-list-indent { padding-left: 42px; }
.agency-list-item .agency-list-value { color: var(--fg); font-family: var(--font-sans); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.agency-list-item .agency-list-value.inv-money-left { color: var(--inv); }
.agency-list-side { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 5px; }
.agency-list-item.is-clickable { margin: 0 -10px; padding-left: 10px; padding-right: 10px; cursor: pointer; transition: background 0.12s; }
.agency-list-item.is-clickable:hover, .agency-list-item.is-clickable:focus-visible { background: var(--surface-2); }
.agency-list-item .inv-client { align-items: center; }
.agency-list-item .inv-client-name { font-weight: 550; }

.date-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 46px; flex-shrink: 0; border-radius: 11px; background: var(--indigo-soft); color: var(--indigo); line-height: 1.1; }
.date-chip strong { font-size: 17px; font-weight: 700; }
.date-chip span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.date-chip.is-soon { background: var(--amber-soft); color: var(--amber); }

.task-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--border-strong); }
.task-dot-in_progress { background: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }

/* Exchange rates sit directly in the panel, not in a box inside a box. */
#agencyRatesTableWrap .hours-table { border: 0; border-radius: 0; background: none; box-shadow: none; }
#agencyRatesTableWrap .hours-table th { padding: 8px 10px; background: none; }
#agencyRatesTableWrap .hours-table td { padding: 11px 10px; font-variant-numeric: tabular-nums; }
#agencyRatesTableWrap .hours-table td:first-child { font-weight: 650; }
#agencyRatesTableWrap .hours-table tbody tr:last-child td { border-bottom: 0; }
#agencyRatesTableWrap .num { text-align: right; }
#agencyRatesTableWrap td.num strong { color: var(--indigo); font-weight: 700; }

/* ── KPO tab ── */
#agencyLimitPanel .wp-year-nav { justify-content: flex-start; margin: 0; padding: 16px 32px 14px; }
#agencyLimitPanel .wp-year-label { min-width: 56px; font-size: 18px; font-weight: 700; text-align: center; }
.kpo-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.kpo-tile-foreign { --tile: var(--violet); }
.kpo-tile-foreign .inv-tile-value { color: var(--violet); }
#agencyLimitPanel .hours-table-wrap { padding-top: 16px; }
#agencyLimitTable td { vertical-align: middle; }
#agencyLimitTable .inv-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
#agencyLimitTable .kpo-foreign { color: var(--violet); font-weight: 600; }
.kpo-rate { margin-top: 2px; color: var(--fg-3); font-size: 11.5px; font-weight: 400; }
#agencyLimitTable tfoot td { padding-top: 15px; padding-bottom: 15px; border-top: 2px solid var(--border-strong); border-bottom: 0; background: var(--surface-2); font-size: 14.5px; font-weight: 650; }
#agencyLimitTable tfoot strong { color: var(--indigo); font-size: 16px; font-weight: 750; }

/* ── Porezi tab ── */
#agencyTaxesPanel .wp-year-nav { justify-content: flex-start; margin: 0; padding: 16px 32px 14px; }
#agencyTaxesPanel .wp-year-label { min-width: 56px; font-size: 18px; font-weight: 700; text-align: center; }
.tax-summary { margin-bottom: 0; }
#agencyTaxesPanel .hours-table-wrap { padding-top: 16px; }
.tax-tile-overdue { --tile: var(--rose); }
.tax-tile-overdue.has-overdue { background: var(--rose-soft); }
.tax-tile-overdue.has-overdue .inv-tile-value { color: var(--rose); }

#taxObligationsTable td { vertical-align: middle; }
.tax-row { cursor: pointer; }
.tax-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
#taxObligationsTable tbody td:first-child { box-shadow: inset 3px 0 0 var(--inv, transparent); }
#taxObligationsTable tbody tr.inv-is-overdue td { background: color-mix(in srgb, var(--rose) 4%, transparent); }
#taxObligationsTable tbody tr.inv-is-overdue:hover td { background: color-mix(in srgb, var(--rose) 8%, transparent); }
.tax-month { font-size: 14px; font-weight: 650; }
.tax-empty { color: var(--fg-4); }
.tax-cell { display: flex; flex-direction: column; gap: 4px; }
.tax-amount { display: flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax-slip { display: inline-flex; color: var(--fg-3); }
.tax-status { display: inline-flex; align-items: center; gap: 5px; color: var(--inv); font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; background: var(--inv); color: var(--surface); }
.tax-pay-btn { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; padding: 3px 9px; border: 1px solid var(--emerald-border); border-radius: 999px; background: var(--emerald-soft); color: var(--emerald); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: filter 0.12s; }
.tax-pay-btn:hover, .tax-pay-btn:focus-visible { filter: brightness(0.96); }
.tax-total { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax-due { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax-due-note { margin-top: 2px; color: var(--fg-3); font-size: 12px; white-space: nowrap; }
.tax-due.is-overdue, .tax-due-note.is-overdue { color: var(--rose); font-weight: 600; }
.tax-due.is-soon, .tax-due-note.is-soon { color: var(--amber); font-weight: 600; }
#taxObligationsTable tfoot td { padding-top: 15px; padding-bottom: 15px; border-top: 2px solid var(--border-strong); border-bottom: 0; background: var(--surface-2); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
#taxObligationsTable tfoot strong { color: var(--indigo); font-size: 15.5px; font-weight: 750; }

@media (min-width: 861px) {
  #taxObligationsTable .inv-money, #taxObligationsTable th.tax-total-col { text-align: right; }
}
/* Too narrow for the monthly total: the footer still sums each column. */
@media (min-width: 861px) and (max-width: 1100px) {
  #taxObligationsTable .tax-total-col { display: none; }
  #taxObligationsTable th, #taxObligationsTable td { padding-left: 8px; padding-right: 8px; }
  #taxObligationsTable .inv-action { width: 32px; }
}

@media (min-width: 861px) {
  #agencyLimitTable .inv-money, #agencyLimitTable th:nth-child(n+4) { text-align: right; }
}

@media (max-width: 860px) {
  .agency-bars { padding: 0 16px; }
  .kpo-gauges { margin: 0 16px 12px; }
  .agency-bars, .kpo-gauges { grid-template-columns: minmax(0, 1fr); }
  .gauge { padding: 12px 14px; }
  .gauge-percent { font-size: 28px; }
  .gauge-total { font-size: 14px; }
  .agency-panel-grid .card-panel { padding: 16px; }
  #agencyLimitPanel .wp-year-nav, #agencyTaxesPanel .wp-year-nav { padding: 12px 16px; }
  #agencyTaxesPanel .hours-table-wrap { padding-top: 12px; }
  #taxObligationsTable tbody td:first-child { box-shadow: none; }
  #taxObligationsTable tbody tr { box-shadow: inset 3px 0 0 var(--inv, transparent); }
  #taxObligationsTable .tax-cell { align-items: flex-end; }
  #taxObligationsTable .tax-pay-btn { align-self: flex-end; }
  #taxObligationsTable tfoot td:empty { display: none; }
  #agencyLimitPanel .hours-table-wrap { padding-top: 12px; }
  .kpo-summary { grid-template-columns: minmax(0, 1fr); }
  .kpo-summary .inv-tile { border-left: 0; }
  .kpo-summary .inv-tile + .inv-tile { border-top: 1px solid var(--border); }
}

@media (max-width: 520px) {
  .agency-list-item .agency-list-indent { padding-left: 0; }
  .agency-stat-card .stat-value { font-size: 21px; }
}

/* With four or five obligations the columns get narrow: the monthly total is
   left to the footer, cells tighten and the pay button keeps only its icon. */
@media (min-width: 861px) and (max-width: 1360px) {
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) .tax-total-col { display: none; }
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) :is(th, td) { padding-left: 6px; padding-right: 6px; }
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) th { white-space: normal; letter-spacing: 0.02em; }
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) .tax-status { white-space: normal; font-size: 11.5px; }
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) .tax-pay-label { display: none; }
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) .tax-pay-btn { padding: 4px 8px; }
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) .inv-action { width: 30px; }
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) :is(.tax-amount, .tax-month, .tax-due, tfoot td) { font-size: 13px; }
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) :is(.tax-due-note, tfoot td:first-child) { white-space: normal; }
  #taxObligationsTable:is([data-kinds="4"], [data-kinds="5"]) .inv-actions { gap: 0; }
}

/* ── "Novi mesec" popup: one block per obligation ── */
.tax-kinds-hint { margin: 2px 0 12px; color: var(--fg-3); font-size: 12.5px; }
.tax-blocks { display: flex; flex-direction: column; gap: 10px; }
.tax-blocks .tax-block { margin: 0; padding: 0; overflow: hidden; transition: background 0.15s, border-color 0.15s; }
.tax-blocks .tax-block.is-off { border-style: dashed; background: var(--surface-2); }
.tax-block-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; }
.tax-block-toggle input { width: 17px; height: 17px; margin: 0; flex-shrink: 0; accent-color: var(--indigo); cursor: pointer; }
.tax-block-title { flex: 1; font-size: 13.5px; font-weight: 650; }
.tax-block.is-off .tax-block-title { color: var(--fg-3); font-weight: 550; }
.tax-block-off { display: none; color: var(--fg-4); font-size: 11.5px; }
.tax-block.is-off .tax-block-off { display: inline; }
.tax-block-toggle:focus-within { outline: 2px solid var(--indigo); outline-offset: -2px; border-radius: var(--r-md); }
.tax-block-fields { padding: 2px 16px 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.tax-paid-group { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.tax-paid-group .check-row { min-height: 40px; }
.tax-paid-date[hidden] { display: none; }

/* A styled picker over the real file input, which still takes clicks, keys and drops. */
.file-pick { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--fg-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.file-pick:hover, .file-pick.is-over { border-color: var(--indigo); background: var(--indigo-soft); }
.file-pick:focus-within { outline: 2px solid var(--indigo); outline-offset: 2px; }
.file-pick-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-pick-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--indigo-soft); color: var(--indigo); }
.file-pick-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.file-pick-text strong { color: var(--fg); font-size: 13px; font-weight: 600; }
.file-pick-text small { color: var(--fg-3); font-size: 11.5px; }
.tax-slip-preview:empty { display: none; }

.tax-view-empty { margin: 8px 0 0; color: var(--fg-4); font-size: 12px; }
.tax-view-status.is-paid { color: var(--emerald); }
.tax-view-status.is-unpaid { color: var(--amber); }
.tax-view-slip { display: block; max-width: 100%; margin-top: 10px; border-radius: var(--r-md); cursor: zoom-in; }
.tax-view-due { margin-top: 12px; color: var(--fg-4); font-size: 11.5px; }

@media (prefers-reduced-motion: reduce) {
  .tax-blocks .tax-block, .file-pick { transition: none; }
}
.logo-pick { flex: 1; min-width: 220px; }

/* Each agency tab is the scroll area under the header, like the other views'
   bodies; without it the content below the screen could not be reached. */
#view-agency > [id^="agency"][id$="Panel"] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }