.invoice-page {
    --accent: #635bff;
    --on-accent: #ffffff;
    --accent-text: #635bff;
    background: #F5F6FA;
    color: #1f2330;
    padding: 1.75rem 1rem 3.5rem;
}

[dir="rtl"] .invoice-page {
    direction: rtl;
}

.invoice-page,
.invoice-page *,
.invoice-page *::before,
.invoice-page *::after,
.invoice-sheet,
.invoice-sheet * {
    box-sizing: border-box;
}

.invoice-page [hidden],
.invoice-sheet [hidden],
body.invoice-print-root [hidden] {
    display: none !important;
}

.invoice-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.invoice-wrap {
    width: min(1100px, 100%);
    margin-inline: auto;
}

.invoice-hero {
    text-align: center;
    margin-bottom: 1.25rem;
}

.invoice-hero h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #1f2330;
}

.invoice-hero-sub {
    max-width: 36rem;
    margin: 0.55rem auto 0;
    color: #8b93a7;
    font-size: 1rem;
    line-height: 1.5;
}

.invoice-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.invoice-chips li {
    background: #fff;
    color: #5c6578;
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 13px;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.invoice-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 7.2fr) minmax(250px, 2.8fr);
    gap: 1.25rem;
    align-items: start;
}

.invoice-editor-grid > * {
    min-width: 0;
}

.invoice-sheet {
    --sheet-pad: 40px;
    background: #fff;
    color: #1f2330;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(28, 39, 68, 0.08);
    padding: var(--sheet-pad);
    min-height: 52rem;
    scroll-margin-top: 1rem;
}

.invoice-mast {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 1.25rem;
    row-gap: 0.35rem;
    align-items: start;
}

.invoice-identity {
    display: contents;
}

.invoice-upload {
    grid-column: 1;
    grid-row: 1;
}

.invoice-meta {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: max-content;
    max-width: 100%;
    margin: 0;
}

.invoice-meta-row {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 9.5rem);
    align-items: center;
    column-gap: 0.75rem;
    margin-bottom: 0.1rem;
}

.invoice-meta-row dt {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    color: #5c6578;
    font-size: 12px;
    font-weight: 650;
    text-align: start;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.invoice-meta-row dd {
    width: 9.5rem;
    min-width: 0;
    margin: 0;
}

.invoice-meta .invoice-field,
.invoice-meta .invoice-date {
    text-align: end;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-title {
    display: block;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.invoice-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
    margin-top: 1.25rem;
}

.invoice-party h2,
.invoice-note-block h2 {
    margin: 0 0 0.35rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1f2330;
}

.invoice-field {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.2rem 0.35rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #1f2330;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.45;
    min-height: 1.85rem;
}

.invoice-field::placeholder {
    color: #5c6578;
    opacity: 1;
}

.invoice-field:hover {
    background: #f4f5f8;
}

.invoice-field:focus {
    outline: 1px solid #635bff;
    outline-offset: 0;
    background: #fff;
}

textarea.invoice-field {
    resize: none;
    overflow: hidden;
}

.invoice-address {
    min-height: 3.2rem;
}

.invoice-item-detail {
    color: #5c6578;
    font-size: 13px;
    min-height: 1.5rem;
}

.invoice-date {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 1.85rem;
    padding: 0.15rem 0.35rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #1f2330;
    font: inherit;
    font-size: 14.5px;
    cursor: pointer;
}

.invoice-date.is-empty {
    color: #5c6578;
}

.invoice-date:hover {
    background: #f4f5f8;
}

.invoice-date:focus {
    outline: 1px solid #635bff;
    background: #fff;
}

.invoice-upload {
    position: relative;
    width: 132px;
    min-height: 72px;
    flex: 0 0 auto;
}

.invoice-file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.invoice-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 72px;
    padding: 0.35rem;
    border: 1px dashed #c5cad8;
    border-radius: 10px;
    color: #5c6578;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.invoice-upload.is-drag .invoice-drop,
.invoice-file:focus + .invoice-drop {
    outline: 1px solid #635bff;
    border-color: #635bff;
}

.invoice-upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    cursor: pointer;
}

.invoice-upload img {
    display: block;
    width: auto;
    height: auto;
    max-width: 132px;
    max-height: 72px;
    object-fit: contain;
}

.invoice-upload-remove {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #1f2330;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.invoice-body,
.invoice-table-wrap,
.invoice-parties,
.invoice-party {
    min-width: 0;
}

.invoice-table-wrap {
    margin-top: 1.35rem;
    max-width: 100%;
}

.invoice-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.invoice-table th {
    background: var(--accent);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 700;
    text-align: start;
    padding: 0.55rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-table th:first-child {
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
    width: 6%;
    text-align: center;
}

.invoice-table th:last-child {
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
}

.invoice-table td {
    padding: 0.35rem 0.3rem;
    vertical-align: top;
    border-bottom: 1px solid #eef0f5;
    text-align: start;
}

.invoice-line-num,
.invoice-line-sum,
.invoice-col-qty,
.invoice-col-price,
.invoice-col-sum,
.invoice-money-input {
    text-align: end;
}

.invoice-table th.invoice-col-qty,
.invoice-table th.invoice-col-price,
.invoice-table th.invoice-col-sum {
    text-align: end;
}

.invoice-line-num {
    text-align: center;
    color: #5c6578;
    font-size: 13px;
    padding-top: 0.55rem;
}

.invoice-line-sum {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.invoice-table td.invoice-line-sum {
    vertical-align: middle;
}

.invoice-col-qty { width: 4.5rem; }
.invoice-col-unit { width: 5rem; }
.invoice-col-price { width: 6rem; }
.invoice-col-sum { width: 6.5rem; }
.invoice-col-action { width: 2.25rem; }

.invoice-table th.invoice-col-qty,
.invoice-table th.invoice-col-price,
.invoice-table th.invoice-col-sum,
.invoice-table td.invoice-col-qty,
.invoice-table td.invoice-col-price,
.invoice-table td.invoice-col-sum {
    padding-inline: 0.4rem;
}

.invoice-table td.invoice-col-qty .invoice-field,
.invoice-table td.invoice-col-price .invoice-field {
    padding-inline: 0;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.invoice-table td.invoice-col-unit {
    padding-inline: 0.4rem;
}

.invoice-table td.invoice-col-unit .invoice-field {
    padding-inline: 0;
    text-align: start;
}

.invoice-remove-item {
    opacity: 0;
    border: 0;
    background: transparent;
    color: #5c6578;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 6px;
}

.invoice-table tr:hover .invoice-remove-item,
.invoice-table tr:focus-within .invoice-remove-item,
.invoice-remove-item:focus {
    opacity: 1;
}

@media (pointer: coarse) {
    .invoice-remove-item { opacity: 0.55; }
}

.invoice-add-line {
    margin-top: 0.35rem;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 0.35rem 0.15rem;
}

.invoice-totals {
    width: min(100%, 50%);
    margin-inline-start: auto;
    margin-top: 1rem;
}

.invoice-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.18rem 0;
    font-size: 14px;
}

.invoice-total-end {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.invoice-total-end .invoice-field {
    width: 4.5rem;
    text-align: end;
}

.invoice-total-grand {
    margin-top: 0.25rem;
    padding-top: 0.45rem;
    border-top: 1px solid #e4e7f0;
    font-weight: 700;
}

.invoice-due-bar {
    margin-top: 0.35rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    color: var(--accent);
    font-weight: 700;
}

.invoice-words {
    margin: 0.45rem 0 0;
    color: #5c6578;
    font-size: 13px;
    line-height: 1.45;
    text-align: end;
}

.invoice-note-block {
    margin-top: 1rem;
}

.invoice-sign-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1.35rem;
}

.invoice-sign-uploads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.invoice-qr {
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
}

.invoice-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1.5rem;
    color: #5c6578;
    font-size: 12px;
    line-height: 1;
}

.invoice-brand img {
    display: block;
    width: 14px;
    height: 14px;
}

.invoice-sheet[data-template="compact"] {
    --sheet-pad: 22px;
    min-height: 44rem;
    font-size: 13px;
}

.invoice-sheet[data-template="compact"] .invoice-title {
    font-size: 1.35rem;
}

.invoice-sheet[data-template="band"] .invoice-title {
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(100% + (var(--sheet-pad) * 2));
    margin-inline: calc(var(--sheet-pad) * -1);
    margin-top: 0.75rem;
    padding: 0.7rem var(--sheet-pad);
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 0;
}

.invoice-sheet[data-template="band"] .invoice-meta {
    grid-row: 1;
}

.invoice-sheet[data-template="minimal"] .invoice-table th {
    background: transparent;
    color: var(--accent-text);
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: 0;
}

.invoice-sheet[data-template="boxed"] .invoice-party {
    border: 1px solid color-mix(in srgb, var(--accent) 45%, #d9deea);
    border-radius: 10px;
    padding: 0.75rem;
}

.invoice-sheet[data-template="sidebar"] {
    display: grid;
    grid-template-columns: 13.25rem minmax(0, 1fr);
    padding: 0;
    gap: 0;
}

.invoice-sheet[data-template="sidebar"] .invoice-mast {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    background: var(--accent);
    color: var(--on-accent);
    padding: 1.25rem 1rem;
}

.invoice-sheet[data-template="sidebar"] .invoice-body {
    grid-column: 2;
    grid-row: 1;
    padding: 1.25rem;
    min-width: 0;
}

.invoice-sheet[data-template="sidebar"] .invoice-brand {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    padding: 0.75rem;
}

.invoice-sheet[data-template="sidebar"] .invoice-upload,
.invoice-sheet[data-template="sidebar"] .invoice-title,
.invoice-sheet[data-template="sidebar"] .invoice-meta {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
}

.invoice-sheet[data-template="sidebar"] .invoice-meta-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.1rem;
}

.invoice-sheet[data-template="sidebar"] .invoice-meta-row dd {
    width: 100%;
}

.invoice-sheet[data-template="sidebar"] .invoice-meta-row dt,
.invoice-sheet[data-template="sidebar"] .invoice-meta .invoice-field,
.invoice-sheet[data-template="sidebar"] .invoice-meta .invoice-date {
    text-align: start;
    justify-content: flex-start;
}

.invoice-sheet[data-template="sidebar"] .invoice-meta-row dt {
    color: color-mix(in srgb, var(--on-accent) 82%, transparent);
}

.invoice-sheet[data-template="sidebar"] .invoice-mast .invoice-field,
.invoice-sheet[data-template="sidebar"] .invoice-mast .invoice-date,
.invoice-sheet[data-template="sidebar"] .invoice-mast .invoice-title {
    color: var(--on-accent);
}

.invoice-sheet[data-template="sidebar"] .invoice-mast .invoice-field::placeholder,
.invoice-sheet[data-template="sidebar"] .invoice-mast .invoice-date.is-empty {
    color: color-mix(in srgb, var(--on-accent) 72%, transparent);
}

.invoice-sheet[data-template="sidebar"] .invoice-drop {
    border-color: color-mix(in srgb, var(--on-accent) 65%, transparent);
    color: color-mix(in srgb, var(--on-accent) 90%, transparent);
}

.invoice-settings {
    position: sticky;
    top: 1rem;
    align-self: start;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(28, 39, 68, 0.08);
    padding: 1.1rem 1rem 1.15rem;
}

.invoice-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.invoice-settings-head h2,
.invoice-setting legend {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1f2330;
}

.invoice-settings-close {
    display: none;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 8px;
    background: #f4f5f8;
    color: #1f2330;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.invoice-setting {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
    font-size: 13px;
    font-weight: 650;
    color: #3c4456;
}

.invoice-settings select,
.invoice-settings-input {
    width: 100%;
    min-height: 2.4rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid #e4e7f0;
    border-radius: 8px;
    background: #fff;
    color: #1f2330;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
}

.invoice-settings select:focus,
.invoice-settings-input:focus {
    outline: 1px solid #635bff;
    border-color: #635bff;
}

.invoice-accents,
.invoice-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.invoice-accent {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #d5dbe8;
    cursor: pointer;
}

.invoice-template.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
}

.invoice-accent.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
}

.invoice-template {
    width: calc(33.33% - 0.35rem);
    padding: 0.3rem;
    border: 1px solid #e4e7f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.invoice-thumb {
    display: block;
    height: 42px;
    border-radius: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
}

.invoice-thumb-classic {
    background-image:
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(#eef0f6, #eef0f6),
        linear-gradient(#eef0f6, #eef0f6);
    background-size: 42% 5px, 100% 7px, 68% 5px;
    background-position: 6px 8px, 6px 20px, 6px 31px;
}

.invoice-thumb-compact {
    background-image:
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(#eef0f6, #eef0f6),
        linear-gradient(#eef0f6, #eef0f6);
    background-size: 55% 4px, 46% 18px, 46% 18px;
    background-position: 6px 6px, 6px 16px, right 6px top 16px;
}

.invoice-thumb-band {
    background-image:
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(#eef0f6, #eef0f6);
    background-size: 100% 14px, 100% 8px;
    background-position: 0 0, 6px 24px;
}

.invoice-thumb-minimal {
    background-image:
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent));
    background-size: 48% 2px, 100% 1px;
    background-position: 6px 10px, 0 22px;
}

.invoice-thumb-boxed {
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff),
        linear-gradient(var(--accent), var(--accent));
    background-size: 42% 16px, 42% 16px, 100% 6px;
    background-position: 4px 8px, right 4px top 8px, 0 32px;
    box-shadow: inset 0 0 0 1px var(--accent);
}

.invoice-thumb-sidebar {
    background-image:
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(#eef0f6, #eef0f6);
    background-size: 28% 100%, 60% 8px;
    background-position: 0 0, 40% 10px;
}

.invoice-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.45rem;
    font-size: 14px;
    font-weight: 500;
    color: #1f2330;
    cursor: pointer;
}

.invoice-check input {
    width: 1rem;
    height: 1rem;
    accent-color: #635bff;
}

.invoice-vat-controls {
    margin: 0 0 0.65rem;
}

.invoice-btn-primary,
.invoice-btn-secondary,
.invoice-mobile-settings {
    font-family: inherit;
}

.invoice-btn-primary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.85rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}

.invoice-btn-primary:hover {
    background: color-mix(in srgb, var(--accent) 82%, #000);
    color: #fff;
}

.invoice-btn-secondary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #635bff;
    border-radius: 8px;
    background: #fff;
    color: #635bff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

.invoice-btn-secondary:hover {
    background: #f6f5ff;
}

.invoice-blanks-label {
    margin: 0.85rem 0 0.35rem;
    color: #6b7280;
    font-size: 12px;
}

.invoice-blanks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.invoice-blanks a {
    color: #635bff;
    font-size: 13px;
}

.invoice-btn-primary:focus-visible,
.invoice-btn-secondary:focus-visible,
.invoice-accent:focus-visible,
.invoice-template:focus-visible,
.invoice-add-line:focus-visible,
.invoice-mobile-settings:focus-visible {
    outline: 2px solid #635bff;
    outline-offset: 2px;
}

.invoice-calendar {
    position: fixed;
    z-index: 1060;
    width: 16.5rem;
    padding: 0.55rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(16, 24, 40, 0.16);
}

.invoice-calendar-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    font-size: 14px;
    font-weight: 700;
}

.invoice-calendar-bar button,
.invoice-day {
    border: 0;
    background: transparent;
    color: #1f2330;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}

.invoice-calendar-bar button {
    width: 2rem;
    height: 2rem;
}

.invoice-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.invoice-cal-label,
.invoice-day {
    min-height: 2rem;
    font-size: 13px;
}

.invoice-cal-label {
    display: grid;
    place-items: center;
    color: #8b93a7;
}

.invoice-day:hover,
.invoice-day.is-selected,
.invoice-day:focus-visible {
    background: #635bff;
    color: #fff;
}

.invoice-mobile-bar,
.invoice-settings-backdrop {
    display: none;
}

.invoice-mock {
    height: 132px;
    padding: 10px;
    border-radius: 8px;
    background: #f7f8fb;
}

.invoice-mock-top,
.invoice-mock-cols {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.invoice-mock-top i,
.invoice-mock-top b,
.invoice-mock-title,
.invoice-mock-cols i,
.invoice-mock-bar,
.invoice-mock-total {
    display: block;
    border-radius: 3px;
    background: #e4e7f0;
}

.invoice-mock-top i { width: 28px; height: 16px; }
.invoice-mock-top b { width: 42px; height: 8px; margin-top: 4px; }
.invoice-mock-title { width: 46%; height: 8px; margin: 10px 0; background: var(--mock-accent); }
.invoice-mock-cols i { width: 48%; height: 28px; }
.invoice-mock-bar { height: 8px; margin-top: 10px; background: var(--mock-accent); }
.invoice-mock-total { width: 38%; height: 8px; margin-top: 8px; margin-inline-start: auto; background: color-mix(in srgb, var(--mock-accent) 35%, #fff); }

.invoice-mock[data-layout="band"] .invoice-mock-title {
    width: calc(100% + 20px);
    margin-inline: -10px;
    height: 14px;
    border-radius: 0;
}

.invoice-mock[data-layout="minimal"] .invoice-mock-bar {
    height: 2px;
    background: var(--mock-accent);
}

.invoice-mock[data-layout="boxed"] .invoice-mock-cols i {
    box-shadow: inset 0 0 0 1px var(--mock-accent);
    background: #fff;
}

.invoice-print-value {
    display: block;
    white-space: pre-wrap;
    min-height: 0;
    font-size: 14.5px;
    line-height: 1.45;
}

.invoice-meta .invoice-print-value {
    text-align: end;
}

.invoice-title.invoice-print-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--accent);
}

.invoice-sheet.is-print {
    box-shadow: none;
    min-height: 0;
}

body.invoice-print-root {
    --accent: #635bff;
    --on-accent: #ffffff;
    --accent-text: #635bff;
    margin: 0;
    background: #fff;
    color: #1f2330;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body.invoice-print-root .invoice-sheet {
    width: auto;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 767.98px) {
    body:has(.invoice-mobile-bar) {
        padding-bottom: calc(5.4rem + env(safe-area-inset-bottom));
    }

    .invoice-editor-grid,
    .invoice-parties,
    .invoice-sheet[data-template="sidebar"] {
        grid-template-columns: 1fr;
    }

    .invoice-sheet {
        --sheet-pad: 16px;
        min-height: 0;
        padding: var(--sheet-pad);
    }

    .invoice-mast,
    .invoice-sheet[data-template="sidebar"] .invoice-mast {
        grid-template-columns: minmax(0, 1fr);
    }

    .invoice-upload,
    .invoice-title,
    .invoice-sheet[data-template="band"] .invoice-title,
    .invoice-sheet[data-template="sidebar"] .invoice-upload,
    .invoice-sheet[data-template="sidebar"] .invoice-title,
    .invoice-meta,
    .invoice-sheet[data-template="sidebar"] .invoice-meta {
        grid-column: 1;
        grid-row: auto;
    }

    .invoice-upload,
    .invoice-title,
    .invoice-sheet[data-template="sidebar"] .invoice-upload,
    .invoice-sheet[data-template="sidebar"] .invoice-title {
        max-width: 100%;
    }

    .invoice-meta,
    .invoice-sheet[data-template="sidebar"] .invoice-meta {
        width: 100%;
    }

    .invoice-meta-row {
        grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 9.5rem);
    }

    .invoice-meta-row dd {
        width: 100%;
    }

    .invoice-table {
        font-size: 13px;
    }

    .invoice-table th,
    .invoice-table td {
        padding: 0.4rem 0.2rem;
    }

    .invoice-totals {
        width: 100%;
    }

    .invoice-title {
        font-size: 1.45rem;
    }

    .invoice-sheet[data-template="sidebar"] .invoice-mast,
    .invoice-sheet[data-template="sidebar"] .invoice-body,
    .invoice-sheet[data-template="sidebar"] .invoice-brand {
        grid-column: 1;
        grid-row: auto;
    }

    .invoice-settings {
        position: fixed;
        z-index: 1040;
        inset-inline: 0;
        bottom: 0;
        top: auto;
        max-height: min(78vh, 640px);
        overflow: auto;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        transform: translateY(110%);
        transition: transform 0.2s ease;
    }

    .invoice-settings.is-open {
        transform: translateY(0);
    }

    .invoice-settings-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .invoice-settings-backdrop {
        display: block;
        position: fixed;
        z-index: 1035;
        inset: 0;
        background: rgba(15, 18, 32, 0.45);
    }

    .invoice-mobile-bar {
        display: flex;
        position: fixed;
        z-index: 1030;
        inset-inline: 0;
        bottom: 0;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
    }

    .invoice-mobile-settings {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0.45rem 0.8rem;
        border: 1px solid #d5dbe8;
        border-radius: 8px;
        background: #fff;
        color: #1f2330;
        font-weight: 700;
        cursor: pointer;
    }

    .invoice-mobile-bar .invoice-btn-primary {
        flex: 1;
        width: auto;
        margin-top: 0;
    }

}

@media (max-width: 639.98px) {
    .invoice-page .invoice-table-wrap {
        position: relative;
        max-width: 100%;
        overflow-x: clip;
    }

    .invoice-page .invoice-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .invoice-page .invoice-table,
    .invoice-page .invoice-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .invoice-page .invoice-table tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "num . action"
            "item item item"
            "qty unit price"
            "sum sum sum";
        gap: 0.35rem 0.5rem;
        width: auto;
        margin: 0 0 0.75rem;
        padding: 0.65rem 0.7rem 0.7rem;
        border: 1px solid #e4e7f0;
        border-radius: 10px;
    }

    .invoice-page .invoice-table td {
        display: block;
        width: auto;
        min-width: 0;
        border: 0;
        padding: 0;
        text-align: start;
        vertical-align: top;
    }

    .invoice-page .invoice-line-num {
        grid-area: num;
        align-self: center;
        padding-top: 0;
    }

    .invoice-page .invoice-col-item {
        grid-area: item;
    }

    .invoice-page .invoice-col-action {
        grid-area: action;
        justify-self: end;
        width: auto;
    }

    .invoice-page .invoice-col-qty { grid-area: qty; }
    .invoice-page .invoice-col-unit { grid-area: unit; }
    .invoice-page .invoice-col-price { grid-area: price; }

    .invoice-page .invoice-col-sum {
        grid-area: sum;
    }

    .invoice-page .invoice-col-qty,
    .invoice-page .invoice-col-unit,
    .invoice-page .invoice-col-price,
    .invoice-page .invoice-col-sum {
        width: auto;
    }

    .invoice-page .invoice-table td.invoice-col-qty .invoice-field,
    .invoice-page .invoice-table td.invoice-col-unit .invoice-field,
    .invoice-page .invoice-table td.invoice-col-price .invoice-field {
        text-align: start;
    }

    .invoice-page .invoice-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        color: #5c6578;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        text-align: start;
    }

    .invoice-page .invoice-table td.invoice-col-sum {
        text-align: end;
    }

    .invoice-page .invoice-table td.invoice-col-sum::before {
        text-align: end;
    }

    .invoice-page .invoice-remove-item {
        opacity: 1;
    }
}

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

@media print {
    body.invoice-print-root {
        margin: 0;
        background: #fff;
    }

    .invoice-sheet {
        box-shadow: none;
        width: auto;
    }

    .invoice-page .invoice-table-wrap,
    body.invoice-print-root .invoice-table-wrap {
        overflow: visible;
    }

    .invoice-page .invoice-table,
    body.invoice-print-root .invoice-table {
        display: table;
        width: 100%;
    }

    .invoice-page .invoice-table thead,
    body.invoice-print-root .invoice-table thead {
        display: table-header-group;
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .invoice-page .invoice-table tbody,
    body.invoice-print-root .invoice-table tbody {
        display: table-row-group;
    }

    .invoice-page .invoice-table tr,
    body.invoice-print-root .invoice-table tr {
        display: table-row;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .invoice-page .invoice-table td,
    .invoice-page .invoice-table th,
    body.invoice-print-root .invoice-table td,
    body.invoice-print-root .invoice-table th {
        display: table-cell;
    }

    .invoice-page .invoice-col-qty,
    body.invoice-print-root .invoice-col-qty { width: 4.5rem; }
    .invoice-page .invoice-col-unit,
    body.invoice-print-root .invoice-col-unit { width: 5rem; }
    .invoice-page .invoice-col-price,
    body.invoice-print-root .invoice-col-price { width: 6rem; }
    .invoice-page .invoice-col-sum,
    body.invoice-print-root .invoice-col-sum { width: 6.5rem; }

    .invoice-page .invoice-table td[data-label]::before,
    body.invoice-print-root .invoice-table td[data-label]::before {
        content: none;
    }
}

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