/*
 * еСчетоводител — theme layer on top of Bootstrap 5.3 (loaded after it).
 *
 * The palette comes from the subject: the petrol ink of Bulgarian accounting
 * forms, with the red of a company stamp as the single accent. Light is the
 * default; dark is a real second theme, not an inversion.
 *
 * Bootstrap 5.3 exposes per-component CSS variables, so everything below is a
 * variable override rather than a rule fighting the framework.
 */

:root,
[data-bs-theme="light"] {
    --brand: #14505e;
    --brand-strong: #0b2f38;
    --brand-soft: #e6eef0;
    --stamp: #a63428;
    --stamp-soft: #f7e9e7;
    --ok: #1f6f4a;
    --ok-soft: #e5f2ec;
    --warn: #8a6100;
    --warn-soft: #fbf1dc;

    --bs-primary: #14505e;
    --bs-primary-rgb: 20, 80, 94;
    --bs-body-bg: #f5f8f8;
    --bs-body-color: #12262c;
    --bs-secondary-color: rgba(18, 38, 44, 0.65);
    --bs-tertiary-bg: #eef3f4;
    --bs-border-color: #d7e2e4;
    --bs-link-color: #14505e;
    --bs-link-color-rgb: 20, 80, 94;
    --bs-link-hover-color: #0b2f38;
    --bs-emphasis-color: #0b2f38;
    --bs-focus-ring-color: rgba(20, 80, 94, 0.25);

    --surface: #ffffff;
    --surface-sunken: #eef3f4;

    /* For text that only explains: quieter than the secondary ink */
    --hint: rgba(18, 38, 44, 0.5);

    /* Modern and rounded */
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-border-radius-2xl: 1.75rem;
    --bs-border-radius-pill: 50rem;
}

[data-bs-theme="dark"] {
    --brand: #5cb4c6;
    --brand-strong: #8ad3e2;
    --brand-soft: #14343d;
    --stamp: #e8796a;
    --stamp-soft: #3a201d;
    --ok: #6ad39f;
    --ok-soft: #12332a;
    --warn: #e5b95d;
    --warn-soft: #33290f;

    --bs-primary: #5cb4c6;
    --bs-primary-rgb: 92, 180, 198;
    --bs-body-bg: #0d1a1f;
    --bs-body-color: #dfe9eb;
    --bs-secondary-color: rgba(223, 233, 235, 0.65);
    --bs-tertiary-bg: #16272d;
    --bs-border-color: #24393f;
    --bs-link-color: #5cb4c6;
    --bs-link-color-rgb: 92, 180, 198;
    --bs-link-hover-color: #8ad3e2;
    --bs-emphasis-color: #ffffff;
    --bs-focus-ring-color: rgba(92, 180, 198, 0.3);

    --surface: #132329;
    --surface-sunken: #0f1d22;

    --hint: rgba(223, 233, 235, 0.5);
}

/*
 * ⚠️ `hidden` надвива класовете за показване. В Bootstrap и `[hidden]`, и
 * `.d-flex` са с !important и с еднаква тежест, а `.d-flex` стои по-късно —
 * затова лента с `class="d-flex" hidden` си стоеше видима и скриптът не можеше
 * да я скрие. Тук стоим след Bootstrap и печелим ние.
 */
[hidden] {
    display: none !important;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3 {
    letter-spacing: -0.022em;
    font-weight: 650;
}

.display-5,
.display-6 {
    letter-spacing: -0.03em;
    font-weight: 700;
}

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

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-border-radius: var(--bs-border-radius-pill);
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-strong);
    --bs-btn-hover-border-color: var(--brand-strong);
    --bs-btn-active-bg: var(--brand-strong);
    --bs-btn-active-border-color: var(--brand-strong);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #06222a;
    --bs-btn-hover-color: #06222a;
    --bs-btn-active-color: #06222a;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-strong);
    --bs-btn-active-border-color: var(--brand-strong);
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-hover-color: #06222a;
    --bs-btn-active-color: #06222a;
}

.btn-outline-danger {
    --bs-btn-color: var(--stamp);
    --bs-btn-border-color: var(--stamp);
    --bs-btn-hover-bg: var(--stamp);
    --bs-btn-hover-border-color: var(--stamp);
}

.btn-link {
    --bs-btn-color: var(--brand);
    --bs-btn-hover-color: var(--stamp);
    text-decoration: none;
}

/* ------------------------------------------------------------ surfaces */

.card,
.list-group {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-list-group-bg: var(--surface);
}

.card {
    box-shadow: 0 1px 2px rgba(11, 47, 56, 0.04);
}

[data-bs-theme="dark"] .card {
    box-shadow: none;
}

.card-header {
    border-bottom-color: var(--bs-border-color);
    font-weight: 600;
    padding-block: 0.85rem;
}

.section-sunken {
    background: var(--surface-sunken);
}

/* -------------------------------------------------------------- masthead */

.masthead {
    background: var(--surface);
    border-bottom: 1px solid var(--bs-border-color);
}

.wordmark {
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: 1.15rem;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.wordmark span {
    color: var(--stamp);
}

/* Логото — partials/logo.php. Светлото за светла тема, тъмното за тъмна */
.logo {
    display: inline-block;
    line-height: 0;
}

.logo__img {
    height: 2rem;
    width: auto;
}

.app-mobilebar .logo__img,
.offcanvas-header .logo__img {
    height: 1.75rem;
}

.logo__img--dark {
    display: none;
}

[data-bs-theme="dark"] .logo__img--light {
    display: none;
}

[data-bs-theme="dark"] .logo__img--dark {
    display: inline;
}

.masthead .nav-link {
    color: var(--bs-secondary-color);
    font-weight: 500;
    border-radius: var(--bs-border-radius-pill);
    padding-inline: 0.85rem;
}

.masthead .nav-link:hover,
.masthead .nav-link.active {
    color: var(--bs-emphasis-color);
    background: var(--brand-soft);
}

/* Колона колкото самата отметка: таблицата не бива да ѝ дава четвърт екран */
.table > :not(caption) > * > .form-check-input {
    margin-top: 0;
}

.w-1 {
    width: 1%;
}

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

.app-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

@media (min-width: 62em) {
    .app-shell {
        grid-template-columns: 16rem 1fr;
    }
}

.app-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--bs-border-color);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.app-sidebar--admin {
    border-top: 3px solid var(--stamp);
}

@media (min-width: 62em) {
    .app-sidebar--admin {
        border-top: 0;
        border-right: 3px solid var(--stamp);
    }
}

.app-sidebar .nav-link {
    color: var(--bs-body-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 500;
}

.app-sidebar .nav-link:hover {
    background: var(--bs-tertiary-bg);
}

.app-sidebar .nav-link.active {
    background: var(--brand);
    color: #ffffff;
}

[data-bs-theme="dark"] .app-sidebar .nav-link.active {
    color: #06222a;
}

.app-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem clamp(1rem, 3vw, 2rem);
}

.app-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content {
    padding: clamp(1rem, 3vw, 2rem);
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

/* ---------------------------------------------------------------- pieces */

.stat {
    background: var(--surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1rem 1.15rem;
    height: 100%;
}

.stat__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--bs-emphasis-color);
}

.stat__label {
    display: block;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.stat--alert .stat__value {
    color: var(--stamp);
}

/* Втори ред под номер — „Относно“ под номера на офертата. Реже се с „…“ точно до
   ширината на номера: `max-width: 1px` + `min-width: 100%` го изваждат от
   сметката за ширината на колоната, а после го разпъват до нея */
.rowmeta--clip {
    max-width: 1px;
    min-width: 100%;
}

/* Броячът, по който списъкът е филтриран в момента */
.stat--active {
    border-color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

a:hover > .stat {
    border-color: var(--bs-primary);
}

.slip dt {
    font-weight: 500;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.slip dd {
    font-weight: 600;
    word-break: break-word;
}

.slip__big {
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
}

.meter {
    display: flex;
    gap: 3px;
}

.meter span {
    flex: 1;
    height: 0.45rem;
    border-radius: 50rem;
    background: var(--bs-tertiary-bg);
}

.meter span.is-used {
    background: var(--brand);
}

.meter span.is-last {
    background: var(--stamp);
}

.badge {
    --bs-badge-font-weight: 600;
    border-radius: var(--bs-border-radius-pill);
    padding: 0.35em 0.75em;
}

.badge-soft-ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.badge-soft-warn {
    background: var(--warn-soft);
    color: var(--warn);
}

.badge-soft-alert {
    background: var(--stamp-soft);
    color: var(--stamp);
}

.badge-soft-brand {
    background: var(--brand-soft);
    color: var(--brand);
}

.badge-soft-muted {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* Значката на дейност. Цветът е име от палитрата, защото CSP не пуска
   style="" — затова тук стои готов клас за всяко име, вместо хекс в HTML-а. */
.badge-line {
    background: var(--line-soft, var(--bs-tertiary-bg));
    color: var(--line-ink, var(--bs-secondary-color));
}

.badge-line--teal { --line-ink: #0f766e; --line-soft: rgba(15, 118, 110, 0.12); }
.badge-line--red { --line-ink: #b91c1c; --line-soft: rgba(185, 28, 28, 0.12); }
.badge-line--blue { --line-ink: #1d4ed8; --line-soft: rgba(29, 78, 216, 0.12); }
.badge-line--amber { --line-ink: #92400e; --line-soft: rgba(180, 121, 20, 0.16); }
.badge-line--violet { --line-ink: #6d28d9; --line-soft: rgba(109, 40, 217, 0.12); }
.badge-line--green { --line-ink: #166534; --line-soft: rgba(22, 101, 52, 0.12); }
.badge-line--pink { --line-ink: #be185d; --line-soft: rgba(190, 24, 93, 0.12); }
.badge-line--slate { --line-ink: #334155; --line-soft: rgba(51, 65, 85, 0.12); }

[data-bs-theme="dark"] .badge-line--teal { --line-ink: #5eead4; --line-soft: rgba(94, 234, 212, 0.14); }
[data-bs-theme="dark"] .badge-line--red { --line-ink: #fca5a5; --line-soft: rgba(252, 165, 165, 0.14); }
[data-bs-theme="dark"] .badge-line--blue { --line-ink: #93c5fd; --line-soft: rgba(147, 197, 253, 0.14); }
[data-bs-theme="dark"] .badge-line--amber { --line-ink: #fcd34d; --line-soft: rgba(252, 211, 77, 0.14); }
[data-bs-theme="dark"] .badge-line--violet { --line-ink: #c4b5fd; --line-soft: rgba(196, 181, 253, 0.14); }
[data-bs-theme="dark"] .badge-line--green { --line-ink: #86efac; --line-soft: rgba(134, 239, 172, 0.14); }
[data-bs-theme="dark"] .badge-line--pink { --line-ink: #f9a8d4; --line-soft: rgba(249, 168, 212, 0.14); }
[data-bs-theme="dark"] .badge-line--slate { --line-ink: #cbd5e1; --line-soft: rgba(203, 213, 225, 0.14); }

/* Тънка чертичка пред реда в списък — колкото да се групира с окото */
.line-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--line-ink, var(--bs-secondary-color));
    vertical-align: middle;
}

.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

.table thead th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--surface-sunken);
    white-space: nowrap;
}

.table td,
.table th {
    vertical-align: middle;
    border-color: var(--bs-border-color);
}

/* A stripe on the left of invoice rows: green when a payment went through a
   bank account, pale yellow otherwise (red and green were too close to tell). Bootstrap paints the cell
   background (hover, striping) with an inset box-shadow, so the stripe is added
   to that shadow instead of replacing it; a border would widen the column. */
.table > tbody > tr.row-paid > :first-child,
.table > tbody > tr.row-unpaid > :first-child {
    box-shadow: inset 3px 0 0 var(--row-stripe),
        inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.table > tbody > tr.row-paid { --row-stripe: var(--ok); }
.table > tbody > tr.row-unpaid { --row-stripe: #f3dc7a; }

.rowmeta {
    display: block;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

/* A row name that reads as text, not as a link: the whole list is links anyway. */
.link-plain {
    color: var(--bs-body-color);
    text-decoration: none;
}

.link-plain:hover {
    text-decoration: underline;
}

/* A finished task or project stays in the list, but steps back: struck through and dimmed. */
.is-done a,
.is-done a:hover,
.is-done .rowmeta {
    text-decoration: line-through;
    opacity: 0.6;
}

.form-text,
.choice-hint {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--hint);
}

.form-control,
.form-select {
    background-color: var(--surface);
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.55rem 0.8rem;
}

/* Inside an input group the field and the button are one control, so the corner
 * between them stays square. Bootstrap says the same, but our radius above is
 * written after it and wins on equal specificity — hence these two rules, which
 * follow Bootstrap's own: with a validation message the feedback element is the
 * last child, so the field is then third from the end. */
.input-group:not(.has-validation) > .form-control:not(:last-child),
.input-group:not(.has-validation) > .form-select:not(:last-child),
.input-group.has-validation > .form-control:nth-last-child(n + 3),
.input-group.has-validation > .form-select:nth-last-child(n + 3) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.alert {
    border-radius: var(--bs-border-radius-lg);
    border-width: 0 0 0 4px;
}

.alert-success {
    --bs-alert-bg: var(--ok-soft);
    --bs-alert-color: var(--ok);
    --bs-alert-border-color: var(--ok);
}

.alert-danger,
.alert-error {
    --bs-alert-bg: var(--stamp-soft);
    --bs-alert-color: var(--stamp);
    --bs-alert-border-color: var(--stamp);
}

.alert-info {
    --bs-alert-bg: var(--brand-soft);
    --bs-alert-color: var(--brand);
    --bs-alert-border-color: var(--brand);
}

/* ------------------------------------------------------------------ hero */

.hero {
    background: var(--surface);
    border-bottom: 1px solid var(--bs-border-color);
}

.ledger-preview {
    background: var(--surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-xl);
    overflow: hidden;
}

.ledger-preview__head {
    background: var(--surface-sunken);
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.ledger-preview__row {
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.ledger-preview__row:last-child {
    border-bottom: 0;
}

/* ----------------------------------------------------------- plan pricing */

.plan-price {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--bs-emphasis-color);
}

.plan-card {
    height: 100%;
}

.plan-card--featured {
    border-color: var(--brand);
    border-width: 2px;
}

/* ------------------------------------------------------------ theme switch */

.theme-toggle {
    --bs-btn-border-radius: var(--bs-border-radius-pill);
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-hover-bg: transparent;
    line-height: 1;
}

/* Полето за коментар се удължава от човека, но само надолу: вширяването
   изкарва формата извън колоната си */
.note-area {
    resize: vertical;
}

/* Вървящият таймер в лентата: същата форма като бутона за темата, но в цвета
   на марката — иначе не се забелязва, а тъкмо затова стои там */
.timer-badge {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand);
    display: inline-flex;
    align-items: center;
}

.theme-toggle__dark {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle__light {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle__dark {
    display: inline;
}

/* Inline styles are blocked by the CSP, so measures are classes */
.measure {
    max-width: 34rem;
}

.measure-wide {
    max-width: 46rem;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
    background: var(--brand-strong);
    color: #cfe0e3;
}

[data-bs-theme="dark"] .site-footer {
    background: #0a161a;
}

.site-footer a {
    color: #cfe0e3;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.skip-link {
    position: absolute;
    left: -999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 1080;
    background: var(--surface);
    padding: 0.6rem 1rem;
    border-radius: var(--bs-border-radius);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Current company — the one the client is working on, always in the top bar */
.company-switch {
    min-width: 0;
}

.company-switch__name {
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32rem;
}

.company-switch__menu {
    max-height: 22rem;
    overflow-y: auto;
    min-width: 18rem;
}

.company-logo {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    object-fit: contain;
    border-radius: var(--bs-border-radius);
    background: #ffffff;
    border: 1px solid var(--bs-border-color);
    padding: 0.2rem;
}

.company-logo--sm {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.1rem;
}

.company-logo--lg {
    width: 7.5rem;
    height: 7.5rem;
    padding: 0.4rem;
}

/* Pages of a long list: boxes big enough to hit with a thumb, in the theme's own blue */
.pager {
    --bs-pagination-color: var(--brand);
    --bs-pagination-hover-color: var(--brand-strong);
    --bs-pagination-focus-color: var(--brand-strong);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
}

.pager .page-link {
    min-width: 2.75rem;
    padding: 0.55rem 0.75rem;
    text-align: center;
    font-weight: 500;
}

.pager .page-item:first-child .page-link,
.pager .page-item:last-child .page-link {
    min-width: 0;
}

.company-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--brand);
    border-color: transparent;
    font-weight: 700;
    font-size: 1.1rem;
}

[data-bs-theme="dark"] .company-mark {
    color: #06222a;
}

.company-mark.company-logo--sm {
    font-size: 0.8rem;
}

.min-w-0 {
    min-width: 0;
}

/* ------------------------------------------------ mobile menu (off-canvas) */

/* Below lg the menus open as a full-screen panel sliding in from the left */
@media (max-width: 61.99em) {
    .offcanvas-full {
        --bs-offcanvas-width: 100vw;
        --bs-offcanvas-bg: var(--surface);
        border-right: 0 !important;
    }

    .offcanvas-full .offcanvas-header {
        border-bottom: 1px solid var(--bs-border-color);
        padding: 1rem clamp(1rem, 4vw, 1.5rem);
    }

    .offcanvas-full .offcanvas-body {
        padding: 1.25rem clamp(1rem, 4vw, 1.5rem);
    }

    .offcanvas-full .nav-link {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
    }

    .masthead .offcanvas-body .btn:not(.theme-toggle) {
        flex: 1 1 auto;
    }

    .app-sidebar .app-sidebar__body {
        display: flex;
    }

    .app-sidebar__footer {
        border-top: 1px solid var(--bs-border-color);
        padding-top: 1.25rem;
        font-size: 1rem !important;
        gap: 0.9rem !important;
    }
}

.app-mobilebar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem clamp(0.5rem, 3vw, 1rem);
    background: var(--surface);
    border-bottom: 1px solid var(--bs-border-color);
}

.app-mobilebar--admin {
    border-bottom: 3px solid var(--stamp);
}

.app-mobilebar__toggle {
    color: var(--bs-body-color);
    padding: 0.5rem;
    line-height: 1;
}

.app-sidebar {
    padding: 0;
}

.app-sidebar__body {
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 62em) {
    /* In the desktop navbar the panel's body must fill the row so the buttons sit right */
    .masthead .navbar-expand-lg .offcanvas .offcanvas-body {
        flex-grow: 1;
        align-items: center;
    }

    /* Bootstrap makes an lg off-canvas transparent once it sits in the page */
    .app-sidebar.offcanvas-lg {
        background-color: var(--surface) !important;
    }

    .app-sidebar .app-sidebar__body {
        display: flex;
        flex-grow: 1;
        padding: 1.25rem 1rem;
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* Sidebar groups: a heading that folds its pages in and out */
.nav-group__toggle {
    background: transparent;
    border: 0;
    text-align: left;
}

.nav-group__chevron {
    flex: none;
    transition: transform 0.2s ease;
}

.nav-group__toggle.collapsed .nav-group__chevron {
    transform: rotate(-90deg);
}

/* An open group shows the counts on its pages instead */
.nav-group__toggle:not(.collapsed) .nav-group__count {
    display: none;
}

.nav-sub {
    margin-left: 0.9rem;
    padding: 0.25rem 0 0 0.6rem;
    border-left: 1px solid var(--bs-border-color);
}

@media (prefers-reduced-motion: reduce) {
    .nav-group__chevron {
        transition: none;
    }
}

/* Stock movement kind: three equal buttons that wrap instead of overflowing */
.move-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.move-types .btn {
    white-space: nowrap;
}

/* A wide table must scroll inside its card, not stretch the page past the screen */
.app-content {
    grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------- stock */

.stock-action {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 100%;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    text-decoration: none;
    color: var(--bs-body-color);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.stock-action:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
}

.stock-action__sign {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--bs-border-radius);
    font-size: 1.4rem;
    font-weight: 700;
    background: var(--brand-soft);
    color: var(--brand);
}

.stock-action--alert .stock-action__sign {
    background: var(--stamp-soft);
    color: var(--stamp);
}

.stock-action__title {
    display: block;
    font-weight: 600;
}

.stock-action__hint {
    display: block;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.item-results {
    position: absolute;
    z-index: 1030;
    inset-inline: 0;
    top: calc(100% + 0.25rem);
    max-height: 22rem;
    overflow-y: auto;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12);
}

/* A quick find on a narrow box still needs room for a whole line */
.item-results--roomy {
    min-width: min(26rem, 90vw);
}

/* Inside a table that scrolls sideways the list hangs off the page instead,
   so it is not cut off; the script sets where. */
.item-results--floating {
    position: fixed;
    inset-inline: auto;
    top: auto;
    max-height: 16rem;
}

.doc-lines__qty,
.doc-lines__price {
    width: 9rem;
}

.doc-lines__row--flash {
    animation: doc-line-flash 0.7s ease;
}

@keyframes doc-line-flash {
    from {
        background: var(--brand-soft);
    }
    to {
        background: transparent;
    }
}

.doc-types .nav-link {
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Bootstrap's pills keep their own blue; the tabs follow the theme instead */
.doc-types .nav-link.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

[data-bs-theme="dark"] .doc-types .nav-link.active {
    color: #06222a;
}

.signature-line {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 0.35rem;
    color: var(--bs-secondary-color);
}

/* Choice buttons in a row stay the same height, however long the hint is */
.choice-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* The hint under a choice button explains, it does not stretch the button. It
 * sits on a coloured button, so it borrows that ink instead of the pale one. */
.choice-hint {
    color: inherit;
    opacity: 0.8;
    font-weight: 400;
    text-wrap: balance;
}

/* Offer and invoice lines: narrow inputs for the numbers, room for the name */
.sale-lines__unit {
    width: 6rem;
}

.sale-lines__qty,
.sale-lines__price {
    width: 8rem;
}

/* Числото и изборът „%“ или „€“ стоят един до друг в една клетка */
.sale-lines__discount {
    width: 11rem;
}

.sale-lines__discount-kind {
    flex: 0 0 4.25rem;
}

/* Бутонът, който отваря описанието — до полето за наименование, в обща група.
   Попълненото описание се казва с цвят: иконката е една и съща, а редът не бива
   да крие, че под него има написано */
.sale-lines__desc {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.sale-lines__desc--filled {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.sale-lines__vat {
    width: 7rem;
}

/* A long address in the footer wraps instead of widening the page */
.site-footer li,
.site-footer a {
    overflow-wrap: anywhere;
}

/* The totals under a document: one per line, right aligned, the sum standing out */
.doc-totals {
    margin-left: auto;
    max-width: 24rem;
}

.doc-totals__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
}

.doc-totals__row dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.doc-totals__row dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.doc-totals__row--sum {
    border-top: 1px solid var(--bs-border-color);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    font-size: 1.15rem;
}

.doc-totals__row--sum dt {
    color: inherit;
    font-weight: 600;
}

.doc-totals__row--sum dd {
    font-weight: 700;
}

/* ---------------------------------------------------------------- documents
 *
 * An offer or an invoice is a sheet of paper, not a screen: the same letterhead,
 * the same rule under it, the same table and the same totals on screen, out of
 * the printer and in the PDF. The PDF twin of these rules lives in
 * app/views/pdf/layout.php, written in millimetres because mPDF reads only a
 * part of CSS — change one, change the other.
 */
.doc {
    background: var(--surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: clamp(1.25rem, 1rem + 2vw, 2.75rem);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.doc p {
    margin: 0;
}

/* The letterhead: who sends it on the left, what it is on the right */
.doc__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem 2rem;
}

.doc__logo {
    display: block;
    max-width: 12rem;
    max-height: 3.5rem;
    object-fit: contain;
    margin-bottom: 0.85rem;
}

.doc__issuer-name {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}

.doc__line {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--bs-secondary-color);
}

.doc__ident {
    margin-left: auto;
    text-align: right;
}

.doc__kind {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand);
}

.doc__number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--brand-strong);
    margin-top: 0.1rem;
}

.doc__meta {
    margin: 0.7rem 0 0;
}

.doc__meta-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.doc__meta-row dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.doc__meta-row dd {
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
}

.doc__stamp-wrap {
    margin-top: 0.75rem;
}

/* What a stamp says about the document: cancelled, paid, accepted */
.doc__stamp {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border: 2px solid var(--stamp);
    border-radius: var(--bs-border-radius-sm);
    background: var(--stamp-soft);
    color: var(--stamp);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.doc__stamp--ok {
    border-color: var(--ok);
    background: var(--ok-soft);
    color: var(--ok);
}

.doc__rule {
    border: 0;
    border-top: 2px solid var(--brand);
    opacity: 1;
    margin: 1.4rem 0 1.5rem;
}

/* To whom, from whom, about what */
.doc__parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.doc__party {
    background: var(--surface-sunken);
    border-radius: var(--bs-border-radius);
    padding: 0.9rem 1.1rem;
}

.doc__party-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 0.4rem;
}

.doc__party-name {
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.doc__party-link {
    color: inherit;
    text-decoration: none;
}

.doc__party-link:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* The lines: thin rules, the head in the brand colour, the numbers to the right.
 * Seven columns do not fit a phone, so on screen the table scrolls on its own
 * instead of widening the sheet. */
.doc__lines-wrap {
    overflow-x: auto;
}

.doc__lines {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.75rem;
}

.doc__lines th {
    padding: 0.5rem 0.6rem;
    border-bottom: 2px solid var(--brand);
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.doc__lines td {
    padding: 0.65rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: top;
    font-size: 0.9375rem;
}

.doc__lines .doc__num {
    text-align: right;
    white-space: nowrap;
}

.doc__lines .doc__col-no {
    width: 1%;
    color: var(--bs-secondary-color);
    text-align: left;
}

.doc__unit {
    color: var(--bs-secondary-color);
}

/* Описанието стои под наименованието: по-дребно, но не сиво до нечетливост —
   то казва какво точно е продадено и се чете наравно с реда */
.doc__item-note {
    display: block;
    margin-top: .15rem;
    font-size: .875em;
    color: var(--bs-secondary-color);
}

.doc__amount {
    font-weight: 600;
}

/* Terms on the left, the money on the right */
.doc__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    margin-top: 1.5rem;
}

.doc__notes {
    flex: 1 1 16rem;
    min-width: 0;
}

.doc__pay-row {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.7;
}

.doc__pay-row dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.doc__pay-row dt::after {
    content: ":";
}

.doc__pay-row dd {
    margin: 0;
    font-weight: 500;
}

/* Най-малко 30 px и от двете страни: кутиите горе и таблицата долу са
   с фон и черти, а текстът помежду им иска въздух, за да се чете като отделен блок.
   В PDF-а разстоянието е в милиметри и си е на място — там не се пипа. */
.doc__terms {
    margin: 2.75rem 0 2.25rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--bs-body-color);
    white-space: normal;
}

.doc__note {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--bs-secondary-color);
    margin-top: 0.6rem;
}

.doc__totals {
    flex: 0 0 auto;
    min-width: 17rem;
    margin: 0 0 0 auto;
}

/* Двете колони са подравнени вдясно — и етикетът, и сумата до него. Стойностите
   имат своя ширина, за да стоят една под друга, както се четат числа */
.doc__totals-row {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 0.3rem 0.9rem;
    font-size: 0.875rem;
}

.doc__totals-row dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
    text-align: right;
}

.doc__totals-row dd {
    margin: 0;
    min-width: 6.5rem;
    text-align: right;
    white-space: nowrap;
}

.doc__totals-row--sum {
    margin-top: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--bs-border-radius-sm);
    background: var(--brand-soft);
    font-size: 1.0625rem;
}

.doc__totals-row--sum dt {
    color: var(--brand-strong);
    font-weight: 600;
}

.doc__totals-row--sum dd {
    color: var(--brand-strong);
    font-weight: 700;
}

.doc__signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2.75rem;
}

/* „Словом“: един ред под сметките, през цялата ширина на листа.
   ⚠️ Пише се с `.doc p.`, защото `.doc p { margin: 0 }` по-горе е по-силно от
   самотен клас и би изяло разстоянието */
.doc p.doc__words {
    margin: 1rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: .9375rem;
}

/* Текстът „извън обхвата“: най-отдолу на листа, над основанието по ЗДДС.
   ⚠️ Без заглавие над него — чертата отгоре стига, за да личи, че е друг блок:
   написаното казва само за себе си какво е, а „ИЗВЪН ОБХВАТА НА ОФЕРТАТА“ с
   главни букви и разредка се четеше буква по буква */
.doc__outside {
    margin: 2.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.doc p.doc__outside-text {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--bs-body-color);
}

/* Основанието по ЗДДС: най-долу на листа, на една ръка разстояние от подписите */
.doc p.doc__basis {
    margin: 3rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

/* A warehouse paper is signed by three: who handed over, who took, who answers */
.doc__signatures--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.doc__sign-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-bottom: 2.5rem;
}

.doc__sign-line {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .doc__parties,
    .doc__signatures {
        grid-template-columns: minmax(0, 1fr);
    }

    .doc__ident {
        text-align: left;
        margin-left: 0;
    }

    .doc__meta-row {
        justify-content: flex-start;
    }
}

/* A document should print as a document: just the paper, no interface. The
 * colours are pinned to the light palette, because a page printed while the
 * screen is dark still lands on white paper. */
@media print {
    :root,
    [data-bs-theme="light"],
    [data-bs-theme="dark"] {
        --brand: #14505e;
        --brand-strong: #0b2f38;
        --brand-soft: #e6eef0;
        --stamp: #a63428;
        --stamp-soft: #f7e9e7;
        --ok: #1f6f4a;
        --ok-soft: #e5f2ec;
        --bs-body-bg: #ffffff;
        --bs-body-color: #12262c;
        --bs-secondary-color: rgba(18, 38, 44, 0.7);
        --bs-border-color: #d7e2e4;
        --surface: #ffffff;
        --surface-sunken: #f2f6f7;
    }

    @page {
        size: A4;
        margin: 12mm;
    }

    body {
        background: #ffffff;
    }

    .app-sidebar,
    .app-mobilebar,
    .app-topbar,
    .masthead,
    .site-footer,
    .d-print-none,
    .alert {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .app-content {
        padding: 0;
        gap: 0;
    }

    .card {
        border: 0;
        box-shadow: none;
    }

    .doc {
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    .doc__lines-wrap {
        overflow: visible;
    }

    .doc__lines thead {
        display: table-header-group;
    }

    .doc__lines tr,
    .doc__foot,
    .doc__signatures {
        break-inside: avoid;
    }

    a[href]::after {
        content: "";
    }
}

/* Дългият коментар в списъка с отчетено време: два реда, останалото се разгъва
   от бутона под него (`note-expand.js`). Класът се слага от скрипта, затова
   без него текстът си стои цял */
.note-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-more {
    font-size: .8125rem;
    text-decoration: none;
}

/* На хартия няма бутон, който да се натисне — коментарът се печата цял */
@media print {
    .note-clamp {
        display: block;
        overflow: visible;
    }

    .note-more {
        display: none;
    }
}

/* Екран само за преглед: действията ги няма, а не стоят сиви.
   ⚠️ Полетата остават заключени от `<fieldset disabled>` в layout-а — данните се
   четат. Махат се бутоните, които съществуват само за да се промени нещо:
   „Запиши“, „Откажи“, „Архивирай“, „Изтрий“, „Добави лице“, „Попълни“. Сив бутон
   обещава нещо, което няма да стане, и се натиска по два пъти.
   ⚠️ Правилото е **обратно**: крие се всеки бутон, освен този, който само
   разгъва или отпечатва. Изброяването на бутоните за писане е списък, който
   следващият екран ще подмине; изброяването на безобидните е късо и се вижда.
   ⚠️ „Откажи“ стои до „Запиши“ и е негова двойка — затова се хваща по съседство.
   ⚠️ Това е за очите. Истинската защита е `PermissionMiddleware`: бутон, върнат
   с инспектора, пак отказва на сървъра. */
.is-readonly button:not([data-bs-toggle]):not([data-print]):not([data-description-toggle]):not(.note-more),
.is-readonly input[type="submit"],
.is-readonly button[type="submit"] + a.btn,
.is-readonly a.btn-danger,
.is-readonly a.btn-outline-danger {
    display: none;
}
/* Датите по нашему — date-field.js. Истинското поле за дата стои невидимо под
   бутона с календара: така календарът на браузъра се отваря точно там, а
   стойността към сървъра остава 2026-09-25. */
.date-field {
    position: relative;
    flex-wrap: nowrap;
}

.input-group > .date-field__native {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2.75rem;
    height: 100%;
    flex: none;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Тесните колони на филтрите не бива да режат годината: бутонът и
   отстъпите са сбити, колкото да се побере 01.08.2026 */
.date-field > .form-control {
    min-width: 6.5rem;
    padding-inline: .6rem;
}

.date-field__button {
    display: inline-flex;
    align-items: center;
    padding-inline: .5rem;
}