/* ============================================================
 * Company Documents V2 — page-specific styling
 * ------------------------------------------------------------
 * Generic shells (.is-th, .is-pill, .is-sf-pill) live in
 * insync-controls.css and are NOT duplicated here. This file
 * only owns Documents-specific cosmetics: file-icon colors,
 * accounting-status pills, "company document" badge, the
 * filter bar layout, the data-table cell rendering, the mobile
 * card layout, and the pager chrome.
 * ============================================================ */

/* ── Page shell ───────────────────────────────────────────── */
.cd-screen { padding: 22px 28px 60px; max-width: 1600px; }

/* ── Load-duration chip ───────────────────────────────────── */
.cd-loadchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); font: 600 11px var(--is-font-mono); color: var(--is-fg-3); user-select: none; }
.cd-loadchip i { font-size: 9px; color: var(--is-fg-3); }
.cd-loadchip b { color: var(--is-fg-2); font-weight: 600; }
.cd-loadchip__sep { color: #aab1ba; font-weight: 400; padding: 0 1px; }

/* ── Page header ──────────────────────────────────────────── */
.cd-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cd-pagehead__crumb { display: flex; gap: 6px; align-items: center; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); margin-bottom: 4px; }
.cd-pagehead__crumb i { font-size: 9px; }
.cd-pagehead__crumb a { color: var(--is-fg-3); text-decoration: none; }
.cd-pagehead__crumb a:hover { color: var(--is-action-blue); text-decoration: underline; }
.cd-pagehead h1 { font: 700 26px/1.15 var(--is-font-sans); letter-spacing: -.01em; color: var(--is-fg-1); margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cd-pagehead h1 .cd-vchip--new { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 2px 9px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border: 1px solid var(--is-brand-blue-200); font: 700 10px var(--is-font-sans); letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.cd-pagehead h1 .cd-count { font: 600 13px var(--is-font-sans); color: var(--is-fg-2); background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); padding: 2px 10px; border-radius: 999px; }
.cd-pagehead__sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cd-pagehead__sub-text { font: 500 13px var(--is-font-sans); color: var(--is-fg-3); }
.cd-pagehead__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* "Stara verzija" link */
.cd-vlink { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--is-border-2); cursor: pointer; background: transparent; transition: background .15s, color .15s, border-color .15s; }
.cd-vlink i { font-size: 10px; }
.cd-vlink:hover { color: var(--is-brand-blue); border-color: var(--is-brand-blue); background: var(--is-brand-blue-100); border-style: solid; }

/* ── Buttons ──────────────────────────────────────────────── */
.cd-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--is-radius-sm); border: 1px solid transparent; font: 600 13px var(--is-font-sans); cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.cd-btn i { font-size: 12px; }
.cd-btn--primary { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); }
.cd-btn--primary:hover { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); }

/* ── Filter bar ───────────────────────────────────────────── */
.cd-filterbar { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); padding: 12px 14px; margin-bottom: 10px; }
.cd-filterbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cd-search { position: relative; flex: 1 1 320px; min-width: 240px; }
.cd-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--is-fg-3); font-size: 13px; }
.cd-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 400 13.5px var(--is-font-sans); color: var(--is-fg-1); box-sizing: border-box; }
.cd-search input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }

.cd-iconbtn { width: 36px; height: 36px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-3); background: #fff; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: background .15s, color .15s, border-color .15s; }
.cd-iconbtn:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.cd-iconbtn--brand { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.cd-iconbtn--brand:hover { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); color: #fff; }
.cd-spacer { flex: 1; }

/* SfDateRangePicker — match cd-iconbtn / cd-pill height */
.cd-screen .cd-daterange { min-width: 240px; }
.cd-screen .cd-daterange .e-input-group {
    border: 1px solid var(--is-border-3) !important;
    border-radius: var(--is-radius-sm) !important;
    background: #fff !important;
    min-height: 36px !important;
    box-shadow: none !important;
}
.cd-screen .cd-daterange .e-input-group input {
    font: 600 12.5px var(--is-font-sans) !important;
    color: var(--is-fg-2) !important;
}

/* ── Table card ───────────────────────────────────────────── */
/* .cd-tablecard promoted to shared .is-tablecard in insync-controls.css */
.cd-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--is-border-1); gap: 12px; flex-wrap: wrap; }
.cd-toolbar__left { display: flex; align-items: center; gap: 8px; font: 500 12px var(--is-font-sans); color: var(--is-fg-2); }
.cd-toolbar__left b { color: var(--is-fg-1); font-weight: 700; }
.cd-toolbar__right { display: flex; align-items: center; gap: 8px; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); }
.cd-toolbar .is-muted { color: var(--is-fg-3); }

table.cd-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cd-table thead th { position: sticky; top: var(--is-topbar-h); z-index: 3; background: var(--is-bg-surface-3); font: 600 10.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--is-border-1); white-space: nowrap; user-select: none; box-shadow: 0 1px 0 var(--is-border-1), 0 2px 6px rgba(20,28,50,.04); }
.cd-table tbody tr { transition: background .12s; }
.cd-table tbody tr:hover { background: rgba(0,123,255,.04); }
.cd-table tbody tr + tr td { border-top: 1px solid var(--is-border-1); }
.cd-table tbody td { padding: 8px 10px; vertical-align: middle; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); height: 40px; }

/* Document name cell — file icon + name */
.cd-doc { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; }
.cd-doc__icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.cd-doc__icon.is-pdf  { background: #fde7e7; color: #c0392b; }
.cd-doc__icon.is-doc  { background: #e6f0fb; color: #1e5fbf; }
.cd-doc__icon.is-xls  { background: #e6f4ec; color: #1f8a4c; }
.cd-doc__icon.is-ppt  { background: #fef0e1; color: #d97706; }
.cd-doc__icon.is-img  { background: #ede4fb; color: #6b35bd; }
.cd-doc__icon.is-txt  { background: #f1f1f1; color: #4a5468; }
.cd-doc__icon.is-file { background: #f1f1f1; color: #4a5468; }
.cd-doc__name { color: var(--is-brand-blue-700); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; cursor: pointer; background: transparent; border: 0; padding: 0; text-align: left; font-family: inherit; font-size: inherit; }
.cd-doc__name:hover { text-decoration: underline; }

.cd-typecell, .cd-empcell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cd-creator { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.cd-creator__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cd-avatar { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); font: 700 9.5px var(--is-font-sans); display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em; }

.cd-datecell { font-variant-numeric: tabular-nums; font-family: var(--is-font-mono); font-size: 12px; color: var(--is-fg-2); }

/* "Dokument kompanije" badge */
.cd-companybadge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border: 1px solid var(--is-brand-blue-200); font: 600 11px var(--is-font-sans); white-space: nowrap; }
.cd-companybadge i { font-size: 10px; }

/* Accounting status pill */
.cd-acct { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 11px var(--is-font-sans); white-space: nowrap; }
.cd-acct i { font-size: 10px; }
.cd-acct.is-booked   { background: rgba(38,176,80,.10);  color: #166c2f; border: 1px solid rgba(38,176,80,.25); }
.cd-acct.is-process  { background: rgba(230,167,0,.12);  color: #8a6300; border: 1px solid rgba(230,167,0,.25); }
.cd-acct.is-rejected { background: rgba(217,44,44,.10);  color: #a01e1e; border: 1px solid rgba(217,44,44,.25); }
.cd-acct.is-skip     { background: var(--is-bg-surface-3); color: var(--is-fg-3); border: 1px solid var(--is-border-1); }

/* Row actions */
.cd-rowact { display: inline-flex; gap: 3px; justify-content: flex-end; width: 100%; }
.cd-rowact button { width: 28px; height: 28px; border-radius: var(--is-radius-sm); border: 1px solid transparent; background: transparent; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: background .12s, color .12s, border-color .12s; }
.cd-rowact button:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-1); }
.cd-rowact button.is-danger:hover { background: rgba(199,59,59,.08); color: var(--is-danger); border-color: rgba(199,59,59,.25); }

/* Empty-state */
.cd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; color: var(--is-fg-3); }
.cd-empty i { font-size: 28px; margin-bottom: 10px; opacity: .5; }
.cd-empty h3 { font: 600 15px var(--is-font-sans); color: var(--is-fg-2); margin: 0 0 4px; }
.cd-empty p { font: 500 13px var(--is-font-sans); margin: 0; }

/* ── Card layout (≤1199px — replaces table on small screens) ── */
.cd-table-wrap { display: block; }
.cd-cards-wrap { display: none; }
@media (max-width: 1199px) {
    .cd-table-wrap { display: none; }
    .cd-cards-wrap { display: block; }
}
.cd-cards { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.cd-card { background: #fff; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s; overflow: hidden; }
.cd-card:hover { border-color: var(--is-border-2); box-shadow: var(--is-shadow-1); }
.cd-card__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.cd-card__title { font: 700 14px var(--is-font-sans); color: var(--is-fg-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.cd-card__title a, .cd-card__title button { color: var(--is-brand-blue-700); text-decoration: none; background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-card__head-status { flex-shrink: 0; }
.cd-card__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; padding: 8px 12px 10px; border-top: 1px dashed var(--is-border-1); }
@media (max-width: 760px) { .cd-card__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cd-card__meta { grid-template-columns: 1fr; } }
.cd-card__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-card__field-label { font: 500 9.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; }
.cd-card__field-value { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-card__foot { display: flex; align-items: center; justify-content: flex-end; padding: 8px 10px; border-top: 1px dashed var(--is-border-1); background: var(--is-bg-surface); }

/* ── Pager ──────────────────────────────────────────────── */
.cd-pager { display: flex; align-items: center; padding: 8px 14px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface); gap: 16px; flex-wrap: wrap; }
.cd-pager__info { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); margin-right: auto; }
.cd-pager__info b { color: var(--is-fg-1); font-weight: 700; }
.cd-pager__pages { display: inline-flex; gap: 3px; align-items: center; }
.cd-pager__pages .cd-pager__ellipsis { color: var(--is-fg-3); padding: 0 4px; font: 500 12px var(--is-font-sans); }
.cd-pager button { height: 28px; min-width: 28px; padding: 0 8px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-2); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cd-pager button:hover:not(:disabled) { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.cd-pager button.is-active { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.cd-pager button:disabled { opacity: .35; cursor: not-allowed; }
.cd-pager__pagesize select { height: 28px; padding: 0 24px 0 8px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-1); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2376767E' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 6px center; }

/* Inline pager (lives in toolbar above grid) — no border, no surface */
.cd-pager.cd-pager--inline { padding: 0; border-top: 0; background: transparent; gap: 8px; }
.cd-pager.cd-pager--inline .cd-pager__pages button { height: 26px; min-width: 26px; }
.cd-pager.cd-pager--inline .cd-pager__pagesize select { height: 26px; }

/* Allowed-companies dropdown wrapper inside the page */
.cd-allowed-companies { margin-bottom: 10px; }
.cd-allowed-companies select { height: 36px; padding: 0 12px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 600 13px var(--is-font-sans); color: var(--is-fg-1); min-width: 280px; cursor: pointer; }