/* =====================================================================
   iBiz – stilovi (prema dizajnu "Ponude i računi – UI")
   ===================================================================== */

:root {
    --accent: #1D5FD1;
    --accent-hover: #164AA6;
    --accent-soft: #E3ECFB;

    --ink: #0F1B2D;
    --ink-2: #36475C;
    --muted: #5B6B80;
    --line: #E3E8EF;
    --line-strong: #CBD3DE;
    --line-soft: #EEF1F5;
    --ground: #F5F7FA;
    --surface: #FFFFFF;

    --nav-bg: #0F1B2D;
    --nav-text: #C9D3E0;
    --nav-heading: #8A9AB0;
    --nav-active: #1E3354;
    --nav-line: #22344F;

    --ok-bg: #DCF3E5;   --ok-fg: #14613A;
    --err-bg: #FDE7D7;  --err-fg: #8F3600;
    --draft-bg: #EEF1F5; --draft-fg: #36475C;
    --storno-bg: #E9E4FB; --storno-fg: #4B3FB8;
    --info-bg: #E3ECFB; --info-fg: #164AA6;
    --warn-fg: #9A3B00;

    --radius: 8px;
    --radius-lg: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1:focus { outline: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.muted { color: var(--muted); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.warn-text { color: var(--warn-fg); font-size: 13px; }

/* ---------------------------------------------------------------- shell */

.shell {
    display: flex;
    min-height: 100vh;
}

.main-area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------------------------------------------------------------- sidebar */

.sidebar {
    width: 248px;
    flex: none;
    background: var(--nav-bg);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 8px;
    color: #FFFFFF;
}
.brand:hover { color: #FFFFFF; }

.brand-mark {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--accent);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex: none;
}
.brand-mark-lg { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }

.brand-text { display: flex; flex-direction: column; }
.brand-name { font-weight: 700; font-size: 16px; color: #FFFFFF; }
.brand-sub { font-size: 12px; color: #9FB0C6; }

.nav-section { display: flex; flex-direction: column; gap: 2px; }

.nav-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nav-heading);
    padding: 0 12px 6px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--radius);
    color: var(--nav-text);
    font-size: 14px;
    font-family: inherit;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.nav-link:hover { background: #172741; color: #FFFFFF; }
.nav-link.active { background: var(--nav-active); color: #FFFFFF; font-weight: 600; }
.nav-link .icon { flex: none; }

.nav-foot {
    margin-top: auto;
    border-top: 1px solid var(--nav-line);
    padding-top: 14px;
}
.nav-foot form { margin: 0; }

/* ---------------------------------------------------------------- topbar */

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 12px 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    justify-content: space-between;
}

.search {
    flex: 1 1 280px;
    max-width: 460px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #F8FAFC;
    color: var(--muted);
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 14px; color: var(--ink);
}

.topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    width: 44px; height: 44px;
    border-radius: var(--radius);
    border: 0;
    background: transparent;
    color: var(--ink-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.icon-btn:hover { background: var(--line-soft); }

.user-chip { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-hover);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.user-text { display: flex; flex-direction: column; line-height: 1.25; }
.user-name { font-size: 14px; font-weight: 600; }
.user-role { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--radius);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}
.btn-primary { background: var(--accent); color: #FFFFFF; font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); color: #FFFFFF; }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--ground); color: var(--ink); }
.btn-block { display: flex; width: 100%; height: 46px; font-size: 15px; }

.btn:focus-visible, .nav-link:focus-visible, .icon-btn:focus-visible, .quick:focus-visible {
    outline: 3px solid var(--accent-soft);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- page */

.page-head { display: flex; flex-direction: column; gap: 4px; }
.page-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.page-head p { margin: 0; font-size: 14px; }

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.kpi-value.warn { color: var(--warn-fg); }
.kpi-sub { font-size: 13px; color: var(--muted); }
.kpi-link { font-size: 13px; font-weight: 600; }

.split {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}
.card-wide { flex: 2 1 560px; min-width: 0; }
.card-pad { padding: 18px 20px; gap: 12px; }
.card-pad h2, .card-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.card-note { margin: 0; padding: 16px 20px; font-size: 14px; }

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}
.card-head a { font-size: 14px; font-weight: 500; }

.side {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 14px;
}
.table th {
    text-align: left;
    padding: 12px 20px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.table th.num { text-align: right; }
.table td { padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.table tbody tr:hover { background: #FAFBFD; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge-error { background: var(--err-bg); color: var(--err-fg); }
.badge-draft { background: var(--draft-bg); color: var(--draft-fg); }
.badge-storno { background: var(--storno-bg); color: var(--storno-fg); }

.list-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--line-soft);
}
.card-head + .list-row { border-top: 0; }
.list-main, .list-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.list-main .muted { font-size: 13px; }
.list-side { align-items: flex-end; white-space: nowrap; }

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.quick {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
}
.quick:hover { background: var(--ground); color: var(--ink); }

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
}
.empty p { margin: 0; }

.alert {
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.45;
}
.alert-error { background: var(--err-bg); color: var(--err-fg); }
.alert-info { background: var(--info-bg); color: var(--info-fg); }

/* ---------------------------------------------------------------- auth */

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
}

.auth-brand {
    flex: 1 1 420px;
    background: var(--nav-bg);
    color: #E6ECF3;
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 56px;
}
.auth-brand .brand { padding: 0; gap: 12px; }
.auth-brand .brand-name { font-size: 18px; }
.auth-brand .brand-sub { font-size: 13px; }

.auth-pitch { display: flex; flex-direction: column; gap: 28px; max-width: 460px; }
.auth-pitch h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.02em;
}
.auth-pitch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.auth-pitch li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--nav-text); }
.auth-pitch li .icon { color: #7FB0FF; flex: none; margin-top: 2px; }

.auth-copy { font-size: 13px; color: var(--nav-heading); }

.auth-main {
    flex: 1 1 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.auth-head { display: flex; flex-direction: column; gap: 8px; }
.auth-head h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.auth-head p { margin: 0; font-size: 15px; color: var(--muted); }

.auth-foot { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.auth-foot a { font-weight: 600; }

.form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.small-link { font-size: 13px; font-weight: 500; }

.input {
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0 12px;
    font: inherit;
    font-size: 15px;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.invalid { border-color: var(--err-fg); }

.validation-message { color: var(--err-fg); font-size: 13px; }

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-2);
    min-height: 24px;
}
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

.divider { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------------- blazor */

#blazor-error-ui {
    background: #FFF7E0;
    color: var(--ink);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ---------------------------------------------------------------- mobitel */

@media (max-width: 900px) {
    .shell { flex-direction: column; }
    .sidebar {
        width: auto;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 8px;
        padding: 12px;
    }
    .sidebar .brand { width: 100%; }
    .nav-section { flex-direction: row; flex-wrap: wrap; }
    .nav-heading { display: none; }
    .nav-link { width: auto; min-height: 44px; }
    .nav-foot { margin-top: 0; border-top: 0; padding-top: 0; }
    .content { padding: 20px 16px; }
    .topbar { padding: 12px 16px; }
    .auth-brand { padding: 32px 24px; gap: 32px; }
    .auth-pitch h1 { font-size: 30px; }
}

/* =====================================================================
   Syncfusion – usklađivanje s izgledom aplikacije
   ===================================================================== */

.e-control, .e-css, .e-grid, .e-grid .e-headercell, .e-grid .e-rowcell,
.e-dialog, .e-toast-container .e-toast, .e-input-group, .e-input, .e-btn {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Grid u kartici */
.grid-card { overflow: hidden; }
.grid-card > .card-head { border-bottom: 1px solid var(--line); }
.grid-card .e-grid { border: 0; border-radius: 0; }
.grid-card .e-grid .e-toolbar { border-bottom: 1px solid var(--line); }
.grid-card .e-grid .e-gridheader { border-top: 0; }
.grid-card .e-grid .e-headercell { background: #FAFBFD; }
.grid-card .e-grid .e-headercelldiv,
.grid-card .e-grid .e-headertext { font-weight: 600; color: var(--ink-2); }
.grid-card .card-note { border-top: 1px solid var(--line-soft); }

.card-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Dijalozi s obrascima */
.form-dialog .e-dlg-content,
.wide-dialog .e-dlg-content { padding-top: 8px; }

.form-section {
    margin: 20px 0 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.form-section:first-of-type { margin-top: 4px; }

.form-hint { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}
.form-grid-1 { grid-template-columns: minmax(0, 1fr); }
.field-span-2 { grid-column: span 2; }
.form-grid-1 .field-span-2 { grid-column: auto; }
.field-check { justify-content: flex-end; padding-bottom: 8px; }

.check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 16px;
}

.dialog-actions, .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.form-actions { justify-content: flex-start; }

.field .validation-message { margin-top: 2px; }

@media (max-width: 700px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .field-span-2 { grid-column: auto; }
}

/* =====================================================================
   Dokumenti (ponude, računi) – ekran za uređivanje
   ===================================================================== */

.badge-info { background: var(--info-bg); color: var(--info-fg); }
.badge-warn { background: #FFF1D6; color: #7A4A00; }

.doc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.doc-title { display: flex; flex-direction: column; gap: 6px; }
.doc-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-title h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.back-link { font-size: 14px; font-weight: 500; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-span-3 { grid-column: span 3; }
.field-note { font-size: 13px; color: var(--muted); }

/* Unos stavke */
.line-entry {
    padding: 16px 20px;
    background: #FAFBFD;
    border-bottom: 1px solid var(--line);
}
.line-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 12px 14px;
    align-items: end;
}
.line-desc { grid-column: span 4; }
.line-buttons {
    grid-column: span 3;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.line-preview { font-size: 14px; color: var(--muted); margin-right: auto; }
.line-preview strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.line-errors { margin: 10px 0 0; padding-left: 18px; color: var(--err-fg); font-size: 13px; }
.line-errors:empty { display: none; }

.line-text { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.line-text .muted { font-size: 12.5px; }

.row-actions { display: inline-flex; gap: 2px; }
.icon-btn-sm { width: 32px; height: 32px; font-size: 15px; font-family: inherit; }
.icon-btn-sm:disabled { opacity: 0.35; cursor: default; }
.icon-btn-danger { color: var(--err-fg); }
.icon-btn-danger:hover { background: var(--err-bg); }

/* Zbrojevi */
.totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    padding: 20px;
    border-top: 1px solid var(--line);
}
.vat-recap { border-collapse: collapse; font-size: 14px; min-width: 320px; align-self: flex-start; }
.vat-recap th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding: 0 16px 8px 0;
}
.vat-recap th.num { text-align: right; }
.vat-recap td { padding: 6px 16px 6px 0; border-top: 1px solid var(--line-soft); }

.totals-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 32px;
    margin: 0;
    min-width: 300px;
    font-size: 14px;
}
.totals-list dt { color: var(--muted); }
.totals-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totals-list .grand {
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

@media (max-width: 1200px) {
    .line-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .line-item, .line-name { grid-column: span 2; }
    .line-desc { grid-column: span 4; }
    .line-buttons { grid-column: span 4; }
}

@media (max-width: 900px) {
    .form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-span-3 { grid-column: span 2; }
}

@media (max-width: 700px) {
    .form-grid-4, .line-grid { grid-template-columns: minmax(0, 1fr); }
    .field-span-3, .line-item, .line-name, .line-desc, .line-buttons { grid-column: auto; }
}

/* =====================================================================
   BOJE – živahnija paleta (ovaj blok pregazuje ranija pravila)
   ===================================================================== */

:root {
    --ground: #F2F5FB;
    --line: #E1E7F0;

    --blue: #1D5FD1;   --blue-soft: #E4EDFD;   --blue-ink: #154AA8;
    --teal: #0E8A7A;   --teal-soft: #DDF4EF;   --teal-ink: #0A6B5F;
    --amber: #C77700;  --amber-soft: #FFF0D6;  --amber-ink: #8A5300;
    --violet: #6B4FD8; --violet-soft: #ECE7FD; --violet-ink: #4F37B0;
    --rose: #D2344F;   --rose-soft: #FDE4E8;   --rose-ink: #A3233A;
    --green: #1E9157;  --green-soft: #DDF3E6;  --green-ink: #146C3F;
}

body { background: var(--ground); }

/* ---------------------------------------------------------------- izbornik */

.sidebar { background: linear-gradient(180deg, #0F1B2D 0%, #13233D 100%); }

.brand-mark {
    background: linear-gradient(135deg, #2F7BF0 0%, #1D5FD1 55%, #6B4FD8 100%);
    box-shadow: 0 4px 12px rgba(29, 95, 209, 0.35);
}

.nav-heading::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    background: var(--nav-heading);
}
.nav-docs .nav-heading::before { background: #5B9BFF; }
.nav-codes .nav-heading::before { background: #3CCFB8; }
.nav-settings .nav-heading::before { background: #A58BFF; }

.nav-docs .nav-link .icon { color: #7FB0FF; }
.nav-codes .nav-link .icon { color: #5FD9C5; }
.nav-settings .nav-link .icon { color: #B9A5FF; }

.nav-link:hover { background: rgba(255, 255, 255, 0.07); }
.nav-link.active {
    background: var(--blue);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(29, 95, 209, 0.35);
}
.nav-link.active .icon { color: #FFFFFF; }
.nav-codes .nav-link.active { background: var(--teal); box-shadow: 0 4px 14px rgba(14, 138, 122, 0.35); }
.nav-settings .nav-link.active { background: var(--violet); box-shadow: 0 4px 14px rgba(107, 79, 216, 0.35); }

/* ---------------------------------------------------------------- gornja traka i naslovi */

.topbar { box-shadow: 0 1px 0 var(--line), 0 2px 10px rgba(15, 27, 45, 0.04); border-bottom: 0; }

.avatar { background: linear-gradient(135deg, #2F7BF0, #6B4FD8); color: #FFFFFF; }

.page-head h1,
.doc-title h1 {
    display: flex;
    align-items: center;
    gap: 12px;
}
.page-head h1::before,
.doc-title h1::before {
    content: "";
    width: 6px;
    height: 26px;
    border-radius: 3px;
    background: linear-gradient(180deg, #2F7BF0, #6B4FD8);
    flex: none;
}

/* ---------------------------------------------------------------- gumbi */

.btn-primary,
.e-btn.e-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(29, 95, 209, 0.28);
}
.btn-primary:hover,
.e-btn.e-primary:hover,
.e-btn.e-primary:focus {
    background: var(--blue-ink);
    border-color: var(--blue-ink);
    color: #FFFFFF;
}
.e-btn.e-outline.e-danger { color: var(--rose); border-color: var(--rose); }
.e-btn.e-outline.e-danger:hover { background: var(--rose); color: #FFFFFF; }

/* ---------------------------------------------------------------- KPI kartice */

.kpi {
    position: relative;
    overflow: hidden;
    border: 0;
    box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 4px 16px rgba(15, 27, 45, 0.05);
    --kpi: var(--blue); --kpi-soft: var(--blue-soft); --kpi-ink: var(--blue-ink);
}
.kpi::after {
    content: "";
    position: absolute;
    right: -30px; top: -30px;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: var(--kpi-soft);
    opacity: 0.7;
}
.kpi > * { position: relative; z-index: 1; }
.kpi-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--kpi);
    color: #FFFFFF;
    margin-bottom: 4px;
}
.kpi-value { color: var(--kpi-ink); }

.kpi-blue   { --kpi: var(--blue);   --kpi-soft: var(--blue-soft);   --kpi-ink: var(--ink); }
.kpi-teal   { --kpi: var(--teal);   --kpi-soft: var(--teal-soft);   --kpi-ink: var(--ink); }
.kpi-amber  { --kpi: var(--amber);  --kpi-soft: var(--amber-soft);  --kpi-ink: var(--ink); }
.kpi-green  { --kpi: var(--green);  --kpi-soft: var(--green-soft);  --kpi-ink: var(--green-ink); }
.kpi-rose   { --kpi: var(--rose);   --kpi-soft: var(--rose-soft);   --kpi-ink: var(--rose-ink); }
.kpi-rose .kpi-value.warn { color: var(--rose-ink); }

/* ---------------------------------------------------------------- kartice */

.card {
    border: 0;
    box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 4px 16px rgba(15, 27, 45, 0.05);
}
.card-head { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%); }
.card-head h2 { display: flex; align-items: center; gap: 10px; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.dot-blue { background: var(--blue); }
.dot-teal { background: var(--teal); }
.dot-amber { background: var(--amber); }
.dot-violet { background: var(--violet); }

.quick { gap: 10px; border-color: transparent; background: var(--ground); }
.quick:hover { background: #E8EEF8; }
.quick-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; flex: none;
}
.quick-blue .quick-icon { background: var(--blue); }
.quick-teal .quick-icon { background: var(--teal); }
.quick-amber .quick-icon { background: var(--amber); }
.quick-violet .quick-icon { background: var(--violet); }

/* ---------------------------------------------------------------- statusi */

.badge { display: inline-flex; align-items: center; gap: 6px; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok     { background: var(--green-soft);  color: var(--green-ink); }
.badge-error  { background: var(--rose-soft);   color: var(--rose-ink); }
.badge-info   { background: var(--blue-soft);   color: var(--blue-ink); }
.badge-warn   { background: var(--amber-soft);  color: var(--amber-ink); }
.badge-storno { background: var(--violet-soft); color: var(--violet-ink); }

/* ---------------------------------------------------------------- Syncfusion grid */

.grid-card .e-grid .e-headercell,
.grid-card .e-grid .e-gridheader { background: #EEF3FC; }
.grid-card .e-grid .e-headercelldiv,
.grid-card .e-grid .e-headertext { color: #2B3D5A; }
.e-grid .e-row:hover .e-rowcell { background: #F5F8FE !important; }
.e-grid td.e-active,
.e-grid .e-row .e-rowcell.e-active { background: var(--blue-soft) !important; color: var(--ink) !important; }
.e-grid .e-altrow { background: #FBFCFE; }
.e-grid .e-toolbar,
.e-grid .e-toolbar .e-toolbar-items { background: #FFFFFF; }
.e-grid .e-toolbar .e-tbar-btn .e-icons { color: var(--blue); }
.e-grid .e-toolbar .e-tbar-btn:hover { background: var(--blue-soft); }

.e-checkbox-wrapper .e-frame.e-check { background-color: var(--blue); border-color: var(--blue); }

/* ---------------------------------------------------------------- dokumenti */

.line-entry { background: linear-gradient(180deg, #F3F7FF 0%, #F8FAFE 100%); }
.line-preview strong { color: var(--blue-ink); }

.totals { background: #FAFBFE; }
.totals-list .grand {
    color: var(--blue-ink);
}
dd.grand {
    background: var(--blue-soft);
    border-radius: 8px;
    padding: 8px 12px !important;
    border-top: 0 !important;
}
dt.grand { align-self: center; border-top: 0 !important; padding-top: 0 !important; }

.form-section { color: var(--blue-ink); }
.form-section::before {
    content: "";
    display: inline-block;
    width: 14px; height: 3px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
    background: var(--blue);
}

/* ---------------------------------------------------------------- prijava */

.auth-brand {
    background:
        radial-gradient(circle at 85% 15%, rgba(107, 79, 216, 0.35) 0, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(14, 138, 122, 0.30) 0, transparent 40%),
        #0F1B2D;
}
.auth-pitch li .icon { color: #5FD9C5; }

.doc-actions-sep { width: 1px; height: 28px; background: var(--line); margin: 0 4px; }

/* Računi */
.badge-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.doc-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06);
    font-size: 14px;
}

/* =====================================================================
   UREĐIVANJE PONUDA I RAČUNA – v2 (pregazuje ranija pravila za dokumente)
   ===================================================================== */

/* ---------------------------------------------------------------- pojas na vrhu */

.doc-hero {
    position: relative;
    overflow: hidden;
    align-items: center;
    gap: 20px 32px;
    padding: 22px 28px;
    border-radius: 16px;
    color: #FFFFFF;
    background: linear-gradient(120deg, #1B4FB8 0%, #2F6FE0 55%, #5B4FD8 100%);
    box-shadow: 0 10px 30px rgba(29, 95, 209, 0.25);
}
.doc-hero::after {
    content: "";
    position: absolute;
    right: -60px; top: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.doc-hero > * { position: relative; z-index: 1; }

.doc-hero-invoice { background: linear-gradient(120deg, #0F1B2D 0%, #163A6B 55%, #0E8A7A 100%); box-shadow: 0 10px 30px rgba(15, 27, 45, 0.30); }
.doc-hero-draft   { background: linear-gradient(120deg, #2B3D5A 0%, #46597A 100%); box-shadow: 0 10px 30px rgba(43, 61, 90, 0.25); }
.doc-hero-storno  { background: linear-gradient(120deg, #6B1E2E 0%, #A3233A 60%, #D2344F 100%); box-shadow: 0 10px 30px rgba(163, 35, 58, 0.25); }

.doc-hero .doc-title { flex: 1 1 360px; min-width: 0; }
.doc-hero .back-link { color: rgba(255, 255, 255, 0.75); }
.doc-hero .back-link:hover { color: #FFFFFF; }
.doc-hero .doc-title h1 { color: #FFFFFF; font-size: 28px; }
.doc-hero .doc-title h1::before { display: none; }

.doc-hero .badge { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.doc-hero .badge::before { background: #FFFFFF; }
.doc-hero .badge-ok::before { background: #5BE3A0; }
.doc-hero .badge-info::before { background: #8FC0FF; }
.doc-hero .badge-warn::before { background: #FFC766; }
.doc-hero .badge-error { background: rgba(255, 255, 255, 0.92); color: var(--rose-ink); }
.doc-hero .badge-error::before { background: var(--rose); }

.doc-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}
.doc-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.doc-hero-meta .icon { opacity: 0.8; }

.doc-hero-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.doc-hero-total span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); }
.doc-hero-total strong { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.doc-hero-total small { font-size: 14px; font-weight: 600; opacity: 0.8; }

.doc-hero .doc-actions { flex-basis: 100%; justify-content: flex-start; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.doc-hero .doc-actions-sep { background: rgba(255, 255, 255, 0.25); }

/* gumbi na tamnoj podlozi */
.doc-hero .btn-outline,
.doc-hero .e-btn.e-outline,
.doc-hero .e-btn.e-flat {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    box-shadow: none;
}
.doc-hero .btn-outline:hover,
.doc-hero .e-btn.e-outline:hover,
.doc-hero .e-btn.e-flat:hover { background: rgba(255, 255, 255, 0.24) !important; color: #FFFFFF !important; }
.doc-hero .e-btn.e-primary,
.doc-hero .btn-primary {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--blue-ink) !important;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.doc-hero .e-btn.e-primary:hover,
.doc-hero .btn-primary:hover { background: #EAF1FF !important; }
.doc-hero .e-btn.e-outline.e-danger {
    background: rgba(210, 52, 79, 0.25) !important;
    border-color: rgba(255, 180, 190, 0.6) !important;
}
.doc-hero .e-btn.e-outline.e-danger:hover { background: var(--rose) !important; }
.doc-hero .btn, .doc-hero .e-btn { height: 40px; border-radius: 9px; }

/* traka s podacima ispod pojasa */
.doc-info {
    background: #FFFFFF;
    border-left: 0;
    box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 4px 16px rgba(15, 27, 45, 0.05);
}

/* ---------------------------------------------------------------- kartice obrazaca */

.card-icon {
    width: 30px; height: 30px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF;
    flex: none;
}
.ci-blue { background: linear-gradient(135deg, #2F7BF0, #1D5FD1); }
.ci-teal { background: linear-gradient(135deg, #17A893, #0E8A7A); }
.ci-violet { background: linear-gradient(135deg, #8B6FF0, #6B4FD8); }
.ci-amber { background: linear-gradient(135deg, #E59A1A, #C77700); }

.form-card > .card-head { border-bottom: 1px solid var(--line); }
.form-card > .card-head h2 { font-size: 17px; }
.card-body { padding: 8px 24px 24px; }

.form-span-all { grid-column: 1 / -1; }
.form-grid > .form-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 -2px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--line);
    color: var(--blue-ink);
    font-size: 12.5px;
}
.form-grid > .form-section::before { display: none; }
.form-grid > .form-section:first-child { margin-top: 10px; }
.form-grid > .form-section .icon { color: var(--blue); }

.field label { font-size: 13px; font-weight: 600; color: #36475C; }
.field-note { font-size: 12.5px; }

/* jasnija polja za unos */
.card .e-input-group:not(.e-float-icon-left):not(.e-float-input),
.card .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input) {
    border: 1px solid #C9D2DF !important;
    border-radius: 8px !important;
    background: #FFFFFF;
    min-height: 38px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.card .e-input-group:hover:not(.e-disabled) { border-color: #9DB0CC !important; }
.card .e-input-group.e-input-focus,
.card .e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(29, 95, 209, 0.15) !important;
}
.card .e-input-group::before,
.card .e-input-group::after { display: none !important; }   /* fluent2 donja crta */
.card .e-input-group.e-disabled { background: #F4F6FA !important; border-color: #E1E7F0 !important; }
.card .e-input-group textarea.e-input { min-height: 64px; }

/* ---------------------------------------------------------------- unos stavke */

.line-entry {
    margin: 16px 20px 0;
    padding: 14px 18px 16px;
    border: 1px solid #CFE0FB;
    border-radius: 12px;
    background: linear-gradient(180deg, #F2F7FF 0%, #FAFCFF 100%);
}
.line-entry-editing {
    border-color: #F2C774;
    background: linear-gradient(180deg, #FFF8EA 0%, #FFFDF8 100%);
}
.line-entry-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blue-ink);
}
.line-entry-editing .line-entry-title { color: var(--amber-ink); }
.line-preview {
    padding: 6px 12px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid var(--line);
}

/* ---------------------------------------------------------------- grid stavki */

.grid-card > .e-grid,
.grid-card .line-entry + .e-grid { margin-top: 16px; }

.form-card ~ .grid-card .e-grid .e-headercell,
.form-card ~ .grid-card .e-grid .e-gridheader {
    background: #1E2B45 !important;
}
.form-card ~ .grid-card .e-grid .e-headercelldiv,
.form-card ~ .grid-card .e-grid .e-headertext { color: #FFFFFF !important; }
.form-card ~ .grid-card .e-grid .e-rowcell { padding-top: 10px; padding-bottom: 10px; }
.form-card ~ .grid-card .e-grid .e-row .e-rowcell:nth-child(2) { color: var(--muted); font-weight: 600; }

.row-actions .icon-btn-sm { border: 1px solid transparent; }
.row-actions .icon-btn-sm:hover:not(:disabled) { border-color: var(--line); background: #FFFFFF; }

/* ---------------------------------------------------------------- zbrojevi */

.totals {
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(180deg, #F7F9FE 0%, #FFFFFF 100%);
}
.vat-recap {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.vat-recap th { padding: 10px 14px; background: #EEF3FC; color: #2B3D5A; }
.vat-recap td { padding: 9px 14px; }

.totals-list {
    min-width: 320px;
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 27, 45, 0.06);
}
dt.grand, dd.grand { margin-top: 6px; }
dd.grand {
    background: linear-gradient(120deg, #1B4FB8, #2F6FE0) !important;
    color: #FFFFFF !important;
    font-size: 20px !important;
    padding: 10px 14px !important;
    border-radius: 10px;
}
dt.grand { color: var(--ink) !important; font-size: 15px !important; }

@media (max-width: 700px) {
    .doc-hero { padding: 18px; }
    .doc-hero-total { align-items: flex-start; }
    .card-body { padding: 8px 16px 18px; }
    .line-entry { margin: 12px 12px 0; }
}

/* =====================================================================
   DIJALOZI – profesionalniji izgled (vrijedi za sve Syncfusion dijaloge)
   ===================================================================== */

.e-dlg-overlay { background-color: rgba(15, 27, 45, 0.55) !important; backdrop-filter: blur(2px); }

.e-dialog {
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 27, 45, 0.35), 0 4px 12px rgba(15, 27, 45, 0.12) !important;
}

.e-dialog .e-dlg-header-content {
    padding: 18px 24px !important;
    border-bottom: 1px solid var(--line) !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FE 100%) !important;
}
.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header * { font-size: 17px; font-weight: 700; color: var(--ink); }

.e-dialog .e-dlg-closeicon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    top: 4px;
}
.e-dialog .e-dlg-closeicon-btn:hover { background: var(--line-soft) !important; }

.e-dialog .e-dlg-content { padding: 8px 24px 0 !important; }
.e-dialog .e-footer-content {
    padding: 14px 24px !important;
    border-top: 1px solid var(--line) !important;
    background: #F7F9FD !important;
}

/* zaglavlje vlastitih dijaloga */
.dlg-head { display: flex; align-items: center; gap: 14px; }
.dlg-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF;
    flex: none;
    box-shadow: 0 6px 16px rgba(15, 27, 45, 0.18);
}
.dlg-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.e-dialog .dlg-title { font-size: 18px !important; font-weight: 700; color: var(--ink); line-height: 1.2; }
.e-dialog .dlg-sub {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* obrasci u dijalozima */
.form-dialog .e-dlg-content { padding: 4px 28px 0 !important; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-dialog .form-grid { gap: 14px 18px; }
.form-dialog .form-grid > .form-section:first-child { margin-top: 14px; }

.e-dialog .e-input-group:not(.e-float-icon-left):not(.e-float-input),
.e-dialog .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input) {
    border: 1px solid #C9D2DF !important;
    border-radius: 8px !important;
    background: #FFFFFF;
    min-height: 38px;
}
.e-dialog .e-input-group::before,
.e-dialog .e-input-group::after { display: none !important; }
.e-dialog .e-input-group.e-input-focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(29, 95, 209, 0.15) !important;
}
.e-dialog .e-input-group.e-disabled { background: #F4F6FA !important; }
.e-dialog .e-input-group textarea.e-input { min-height: 72px; }

/* odabiri kao pločice */
.check-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.check-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #FAFBFE;
    transition: border-color 0.15s, background 0.15s;
}
.check-tile:hover { border-color: #B8CAE6; background: #F3F7FE; }
.check-tile:has(.e-check) { border-color: #9DBDF5; background: var(--blue-soft); }
.check-tile .e-label { font-weight: 600; color: var(--ink); }
.check-tile small { padding-left: 26px; font-size: 12px; color: var(--muted); }

/* dno dijaloga s akcijama */
.form-dialog .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 22px -28px 0;
    padding: 14px 28px;
    border-top: 1px solid var(--line);
    background: #F7F9FD;
    align-items: center;
}
.dialog-hint { margin-right: auto; font-size: 12.5px; color: var(--muted); }
.form-dialog .dialog-actions .e-btn { min-width: 110px; height: 40px; border-radius: 9px; }

/* cijene u dijalogu */
.wide-dialog .e-dlg-content { padding: 16px 24px 24px !important; }
.wide-dialog .e-grid { border-radius: 10px; overflow: hidden; }

/* Syncfusionov automatski dijalog grida (ostali šifrarnici) */
.e-grid-dialog .e-dlg-content,
.e-edit-dialog .e-dlg-content { padding-top: 18px !important; }
.e-edit-dialog .e-footer-content .e-btn { min-width: 100px; height: 38px; border-radius: 9px; }

@media (max-width: 760px) {
    .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .form-dialog .e-dlg-content { padding: 4px 18px 0 !important; }
    .form-dialog .dialog-actions { margin: 18px -18px 0; padding: 12px 18px; }
}

.ci-rose { background: linear-gradient(135deg, #E5566E, #D2344F); }
.ci-green { background: linear-gradient(135deg, #2DB36F, #1E9157); }
.form-dialog .form-grid > .check-tile { align-self: end; }

/* =====================================================================
   POSTAVKE – PODACI O TVRTKI
   ===================================================================== */
.doc-hero-company { background: linear-gradient(120deg, #1B1446 0%, #3B2A8C 50%, #2F6FDB 100%); box-shadow: 0 10px 30px rgba(59, 42, 140, 0.28); }

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
.settings-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.settings-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 16px; }
.settings-main .card, .settings-side .card { margin: 0; }
.settings-main .card-head { flex-wrap: wrap; gap: 4px 12px; }
.settings-main .card-head .muted { font-size: 0.82rem; }

/* logo */
.logo-drop {
    display: flex; align-items: center; justify-content: center;
    height: 150px; padding: 16px;
    border: 1.5px dashed var(--rose, #D2344F);
    border-radius: 12px;
    background:
        linear-gradient(45deg, #F4F6FA 25%, transparent 25%, transparent 75%, #F4F6FA 75%) 0 0 / 16px 16px,
        linear-gradient(45deg, #F4F6FA 25%, #FFFFFF 25%, #FFFFFF 75%, #F4F6FA 75%) 8px 8px / 16px 16px;
}
.logo-preview { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #8A94A6; font-size: 0.88rem; }
.logo-actions { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; flex-wrap: wrap; }
.logo-upload { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.logo-upload:focus-within { outline: 2px solid var(--blue, #2F6FDB); outline-offset: 2px; }
.logo-pending {
    margin: 10px 0 0; padding: 8px 10px; border-radius: 8px;
    background: var(--amber-soft, #FFF4DC); color: var(--amber-ink, #8A5A00); font-size: 0.82rem;
}

/* pregled izdavatelja */
.issuer-preview {
    display: flex; flex-direction: column; gap: 3px;
    padding: 16px; border-radius: 10px;
    background: #FFFFFF; border: 1px solid #E3E8F0;
    border-top: 4px solid var(--teal, #0E8A7A);
    font-size: 0.84rem; color: #3D4A5C;
    box-shadow: 0 2px 8px rgba(15, 27, 45, 0.06);
}
.issuer-preview strong { font-size: 0.98rem; color: #0F1B2D; margin-bottom: 2px; }
.issuer-logo { max-height: 42px; max-width: 180px; object-fit: contain; align-self: flex-start; margin-bottom: 8px; }

/* donja traka spremanja */
.save-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 20px; padding: 14px 18px;
    border-radius: 12px; background: #FFFFFF; border: 1px solid #E3E8F0;
    position: sticky; bottom: 12px; z-index: 5;
    box-shadow: 0 6px 20px rgba(15, 27, 45, 0.08);
}
.save-bar .muted { font-size: 0.84rem; }

@media (max-width: 1100px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); }
    .settings-side { position: static; order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 640px) {
    .save-bar { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   E-POŠTA – postavke i dijalog slanja
   ===================================================================== */
.doc-hero-mail { background: linear-gradient(120deg, #0B2E3A 0%, #0E6E74 50%, #19A7A0 100%); box-shadow: 0 10px 30px rgba(14, 110, 116, 0.28); }

.alert-warn { background: var(--amber-soft); color: var(--amber-ink); }
.alert-warn a { margin-left: 6px; font-weight: 600; color: inherit; text-decoration: underline; }

.link-btn {
    border: 0; background: none; padding: 0;
    color: var(--blue); font: inherit; font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.card-head .link-btn { margin-left: auto; }

.tpl-body textarea, textarea.tpl-body { min-height: 190px; resize: vertical; line-height: 1.5; }

/* brzo podešavanje */
.preset-list { display: flex; flex-direction: column; gap: 8px; }
.preset {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
    border: 1px solid #E3E8F0; border-radius: 10px; background: #FFFFFF;
    font: inherit; transition: border-color .15s, background .15s;
}
.preset strong { font-size: 0.9rem; color: #0F1B2D; }
.preset span { font-size: 0.78rem; color: #6B778A; }
.preset:hover { border-color: var(--green); background: var(--green-soft); }

/* testno slanje */
.test-btn { width: 100%; margin-top: 10px; }
.test-result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 0.84rem; line-height: 1.45; }
.test-ok { background: var(--green-soft); color: var(--green-ink); }
.test-error { background: var(--err-bg); color: var(--err-fg); }

/* polja u tekstu */
.placeholder-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 0.84rem; }
.placeholder-list dt { margin: 0; }
.placeholder-list dd { margin: 0; color: #5B677A; }
.placeholder-list code {
    padding: 1px 6px; border-radius: 6px;
    background: var(--violet-soft); color: var(--violet-ink); font-size: 0.8rem;
}

/* dijalog slanja */
.send-loading { padding: 24px 0; text-align: center; }
.send-dialog .alert { margin-bottom: 14px; }
.address-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.address-chip {
    border: 1px dashed var(--teal); border-radius: 999px; background: var(--teal-soft);
    color: var(--teal-ink); padding: 3px 10px; font: inherit; font-size: 0.8rem; cursor: pointer;
}
.address-chip:hover { border-style: solid; }

.attachment {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 10px;
    background: #F6F8FB; border: 1px solid #E3E8F0;
}
.attachment-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--rose-soft); color: var(--rose-ink); flex: none;
}
.attachment strong { display: block; font-size: 0.9rem; color: #0F1B2D; }
.attachment .muted { font-size: 0.78rem; }

.send-history { border-top: 1px solid #E3E8F0; padding-top: 10px; }
.send-history-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6B778A; margin-bottom: 6px; }
.send-history-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 4px 0; font-size: 0.84rem; }
.send-history-date { font-variant-numeric: tabular-nums; color: #3D4A5C; }
.send-history-to { color: #0F1B2D; overflow-wrap: anywhere; }