@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(222.2 84% 4.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(222.2 84% 4.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(222.2 84% 4.9%);
    --primary: hsl(222.2 47.4% 11.2%);
    --primary-foreground: hsl(210 40% 98%);
    --secondary: hsl(210 40% 96.1%);
    --secondary-foreground: hsl(222.2 47.4% 11.2%);
    --muted: hsl(210 40% 96.1%);
    --muted-foreground: hsl(215.4 16.3% 46.9%);
    --border: hsl(214.3 31.8% 91.4%);
    --input: hsl(214.3 31.8% 91.4%);
    --ring: hsl(222.2 84% 4.9%);
    --radius: 0px;
    --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
    --shadow-md: 0 6px 16px -6px hsl(0 0% 0% / 0.12);
    --shadow-lg: 0 12px 24px -10px hsl(0 0% 0% / 0.18);
    --shadow-xl: 0 20px 40px -18px hsl(0 0% 0% / 0.25);
    --shadow-2xl: 0 24px 56px -24px hsl(0 0% 0% / 0.3);
}

.dark {
    --background: hsl(222.2 84% 4.9%);
    --foreground: hsl(210 40% 98%);
    --card: hsl(222.2 84% 4.9%);
    --card-foreground: hsl(210 40% 98%);
    --popover: hsl(222.2 84% 4.9%);
    --popover-foreground: hsl(210 40% 98%);
    --primary: hsl(210 40% 98%);
    --primary-foreground: hsl(222.2 47.4% 11.2%);
    --secondary: hsl(217.2 32.6% 17.5%);
    --secondary-foreground: hsl(210 40% 98%);
    --muted: hsl(217.2 32.6% 17.5%);
    --muted-foreground: hsl(215 20.2% 65.1%);
    --border: hsl(217.2 32.6% 17.5%);
    --input: hsl(217.2 32.6% 17.5%);
    --ring: hsl(212.7 26.8% 83.9%);
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
    --shadow-md: 0 8px 18px -8px hsl(0 0% 0% / 0.35);
    --shadow-lg: 0 16px 32px -16px hsl(0 0% 0% / 0.4);
    --shadow-xl: 0 24px 48px -24px hsl(0 0% 0% / 0.45);
    --shadow-2xl: 0 28px 64px -28px hsl(0 0% 0% / 0.5);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 100%;
    max-width: none;
    margin: 24px 0 64px;
    padding: 0 24px;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.brand-text .brand-name {
    font-weight: 700;
}

.brand-text .brand-title {
    font-size: 13px;
    color: var(--muted-foreground);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.welcome-text {
    color: var(--muted-foreground);
    font-size: 14px;
}

.tabs {
    display: flex;
    gap: 8px;
    padding: 0 20px 16px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius);
    color: var(--muted-foreground);
    font-weight: 600;
}

.tab svg {
    width: 18px;
    height: 18px;
}

.tab.active {
    background: var(--primary);
    color: var(--primary-foreground);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}

.card-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    margin: 0;
}

.card-title svg {
    width: 20px;
    height: 20px;
}

.card-pad {
    padding: 18px 22px 22px;
}

.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.form-stack {
    display: grid;
    gap: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

label {
    display: grid;
    gap: 8px;
    font-size: 14px;
    color: var(--muted-foreground);
}

input,
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--input);
    font-size: 14px;
    font-family: inherit;
    color: var(--foreground);
    background: var(--background);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
    border-color: var(--ring);
}

textarea {
    resize: vertical;
}

input[readonly] {
    background: var(--muted);
}

.section {
    padding: 0 22px 22px;
}

.section-title {
    font-size: 15px;
    margin: 0 0 12px;
    color: var(--foreground);
}

.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--foreground);
}

.full {
    grid-column: 1 / -1;
}

.actions {
    display: grid;
    align-items: end;
}

.price-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-row {
    flex-wrap: nowrap;
}

.price-control.price-row {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
}

.price-control.price-row > * {
    flex: 0 0 auto;
}

.price-row .price-input {
    width: 120px;
    flex: 0 0 120px;
}

.price-row .cost-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.price-row .cost-count {
    min-width: 44px;
    flex: 0 0 44px;
    height: 32px;
    display: inline-flex;
    align-items: center;
}
.price-row .cost-count {
    justify-content: center;
}

.price-link {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.price-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.price-result {
    font-size: 12px;
    margin-top: 6px;
}

.cost-btn svg {
    width: 18px;
    height: 18px;
}

.cost-badge {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--foreground);
    border-radius: var(--radius);
    padding: 0 6px;
}

.costs-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: color-mix(in srgb, var(--foreground) 45%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    z-index: 60;
}

.costs-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.costs-panel {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius);
    padding: 18px;
    transform: scale(0.98);
    transition: transform 150ms ease;
}

.costs-modal.active .costs-panel {
    transform: scale(1);
}

.costs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.costs-header h3 {
    margin: 0;
    font-size: 18px;
}

.costs-body {
    display: grid;
    gap: 10px;
}

.costs-revenue {
    display: grid;
    gap: 8px;
}

.costs-result {
    font-size: 12px;
}

.costs-list {
    display: grid;
    gap: 10px;
}

.cost-row {
    display: grid;
    grid-template-columns: 120px 1fr 32px;
    gap: 10px;
    align-items: center;
}

.cost-amount {
    text-align: right;
}

.costs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.costs-actions {
    display: flex;
    gap: 10px;
}

.cost-view-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.costs-summary {
    font-size: 13px;
}

.cost-view-amount {
    font-weight: 600;
}

.attachments {
    display: grid;
    gap: 16px;
    padding: 2px 0;
}

.attachment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.attachment-row.file-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: none;
}

.attachment-row:last-child {
    border-bottom: none;
}

.attachment-info {
    display: grid;
    gap: 4px;
}

.attachment-title {
    font-weight: 600;
    color: var(--foreground);
}

.attachment-status {
    font-size: 12px;
}

.attachment-status[data-state="uploaded"] {
    color: var(--foreground);
}

.attachment-meta {
    font-size: 12px;
    color: var(--muted-foreground);
}

.attachment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.attachment-row.file-card .attachment-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.attachments .file-icon .lucide-chart-line-icon {
    transform: scale(1.08);
    transform-origin: center;
}

.attachments .icon-btn svg {
    width: 24px;
    height: 24px;
}

.programmers-list {
    display: grid;
    gap: 10px;
}

.programmer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.programmer-row input[type="text"] {
    min-height: 38px;
}

.programmer-row.programmer-add {
    grid-template-columns: minmax(0, 1fr) auto;
}

.attachment-input {
    max-width: 220px;
}

.upload-status {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.upload-status .status-item[data-state="ok"] {
    color: var(--foreground);
}

.upload-status .status-item[data-state="error"] {
    color: var(--foreground);
}

.upload-modal {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--foreground) 35%, transparent);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 40;
}

.upload-modal.active {
    display: flex;
}

.upload-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 20px;
    max-width: 520px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.upload-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.upload-header h3 {
    margin: 0;
    font-size: 18px;
}

.upload-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    animation: spin 0.9s linear infinite;
}

.upload-body {
    display: grid;
    gap: 10px;
}

.upload-progress {
    font-size: 12px;
    color: var(--muted-foreground);
}

.upload-list {
    display: grid;
    gap: 8px;
}

.upload-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--muted);
    font-size: 12px;
}

.upload-row[data-state="ok"] {
    color: var(--success);
}

.upload-row[data-state="error"] {
    color: var(--danger);
}

.upload-label {
    font-weight: 600;
}

.upload-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius);
    padding: 12px 18px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn.primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.btn.ghost {
    background: transparent;
    color: var(--foreground);
    border-color: var(--border);
}

.btn.block {
    width: 100%;
}

.btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin: 16px 22px;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--foreground);
}

.alert-error {
    background: var(--muted);
    color: var(--foreground);
}

.alert-success {
    background: var(--muted);
    color: var(--foreground);
}

.filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(2, minmax(160px, 1fr)) minmax(180px, 1fr) minmax(140px, 0.7fr);
    gap: 16px;
    align-items: end;
}

.stats-filters {
    grid-template-columns: repeat(2, minmax(160px, 1fr)) minmax(140px, 0.7fr);
}

.filters > * {
    min-width: 0;
}

.with-icon {
    position: relative;
}

.with-icon svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted-foreground);
}

.with-icon input {
    padding-left: 44px;
}

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

.cert-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    min-width: 1240px;
    font-family: var(--font-sans);
}

.cert-table th,
.cert-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
    color: var(--foreground);
}

.cert-table th {
    background: var(--muted);
    color: var(--foreground);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.cert-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--muted) 60%, var(--card));
}

.cert-table tbody tr:hover {
    background: color-mix(in srgb, var(--foreground) 8%, var(--card));
    box-shadow: var(--shadow-sm);
}

.row-edit td {
    vertical-align: top;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.col-date { width: 90px; }
.col-model { width: 180px; }
.col-vin { width: 200px; font-family: var(--font-mono); }
.col-reg { width: 130px; }
.col-phone { width: 140px; }
.col-power { width: 160px; }
.col-services { width: 170px; }
.col-price { width: 110px; }
.col-actions { width: 150px; }

.actions-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 8px;
    justify-content: start;
}

.files-list {
    display: grid;
    gap: 12px;
}

.file-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.file-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--muted);
    color: var(--foreground);
}

.file-icon svg {
    width: 22px;
    height: 22px;
}

.files-modal .file-icon svg {
    width: 32px;
    height: 32px;
}

.files-modal .file-action .icon-btn {
    padding: 8px;
}

.files-modal .file-action .icon-btn svg {
    width: 24px;
    height: 24px;
}

.files-modal .icon-btn svg {
    width: 24px;
    height: 24px;
}

.file-meta {
    flex: 1;
    min-width: 0;
}

.file-type {
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.file-name {
    display: block;
    font-weight: 600;
    color: var(--foreground);
    text-decoration: none;
    word-break: break-word;
}

.file-name:hover {
    color: var(--accent);
}

.file-size {
    font-size: 12px;
}

.file-action {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.file-action .icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
}

.upper {
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .file-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .file-action {
        width: 100%;
    }

    .file-button {
        width: 100%;
        text-align: center;
    }
}

.cell-nowrap {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-wrap {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mono {
    font-family: var(--font-mono);
}

.row-input {
    width: 100%;
    min-height: 40px;
    min-width: 120px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--input);
    font-size: 14px;
    background: var(--background);
    color: var(--foreground);
}

.row-input.mono {
    font-family: var(--font-mono);
}

.row-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
}

.row-textarea {
    min-height: 160px;
    min-width: 180px;
    width: 100%;
    font-size: 14px;
    line-height: 1.5;
}

.row-num {
    min-width: 90px;
    text-align: center;
}

.row-arrow {
    display: inline-block;
    margin: 0 6px;
    color: var(--muted-foreground);
}

.power-grid {
    display: grid;
    gap: 10px;
}

.power-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 8px;
}

.power-label {
    font-size: 12px;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
}

.power-inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--foreground) 45%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
    z-index: 40;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-overlay:target {
    opacity: 1;
    pointer-events: auto;
}

.modal-panel {
    width: min(880px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-2xl);
    border-radius: var(--radius);
    padding: 24px;
    container-type: inline-size;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--foreground);
}

.modal-vin {
    font-family: var(--font-mono);
    color: var(--muted-foreground);
    font-weight: 500;
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--radius);
    color: var(--foreground);
}

.modal-body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    align-items: start;
}

/* Keep all fields in one grid to align NM with VIN/registration rows. */
.edit-form-grid {
    display: contents;
}

.field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.field-4 { grid-column: span 4; }
.field-6 { grid-column: span 6; }
.field-12 { grid-column: span 12; }

.programator-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.field-label {
    font-size: 12px;
    color: var(--muted-foreground);
}

.field-control {
    display: grid;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.phone-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.phone-prefix {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.phone-flag {
    width: 20px;
    height: 14px;
    border-radius: 3px;
    object-fit: cover;
}

.phone-plus {
    font-weight: 600;
    color: var(--muted-foreground);
}

.phone-prefix-input {
    width: 70px;
    max-width: 70px;
    text-align: center;
}

.phone-number-input {
    flex: 1;
    min-width: 0;
}

.field-control.price-row,
.price-control.price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.row-input {
    min-height: 40px;
    padding: 10px 12px;
}

/* Reduce default notes height while keeping resize available. */
.row-textarea {
    min-height: 80px;
    resize: vertical;
}

.power-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.row-arrow {
    color: var(--muted-foreground);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--foreground);
}

.checkbox-item input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    width: 100%;
    margin-top: 8px;
    grid-column: 1 / -1;
    justify-self: stretch;
}

.modal-footer-left {
    margin-right: auto;
}

.btn.primary:hover {
    filter: brightness(0.95);
}

.btn.ghost:hover {
    background: var(--muted);
}

@container (max-width: 900px) {
    .modal-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .field-4 {
        grid-column: span 1;
    }
    .field-6,
    .field-12 {
        grid-column: span 2;
    }
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 640px) {
    .modal-body {
        grid-template-columns: 1fr;
    }
    .field-4,
    .field-6,
    .field-12 {
        grid-column: span 1;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .programator-row {
        grid-template-columns: 1fr;
    }
    .power-pair {
        grid-template-columns: 1fr;
    }
    .row-arrow {
        display: none;
    }
    .modal-footer {
        flex-direction: column;
    }
}

.table-header,
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.table-footer {
    border-top: 1px solid var(--border);
    border-bottom: none;
}

.table-title {
    font-weight: 700;
}

.table-meta {
    color: var(--muted-foreground);
    font-size: 13px;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    background: var(--muted);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-size: 12px;
    color: var(--foreground);
}

.muted {
    color: var(--muted-foreground);
}

.center {
    text-align: center;
}

.icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius);
    color: var(--foreground);
}

.icon-btn.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.icon-btn:hover {
    background: var(--muted);
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-indicator {
    font-size: 13px;
    color: var(--muted-foreground);
}

.pdf-pane {
    min-height: 420px;
}

.pdf-frame {
    width: 100%;
    height: 520px;
    border: none;
}

@media (max-width: 768px) {
    .pdf-pane {
        display: none;
    }
    
    .two-col {
        grid-template-columns: 1fr;
    }
    
    .filters {
        grid-template-columns: 1fr;
    }
    
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .app-header {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    
    .header-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .tabs {
        overflow-x: auto;
        padding: 0 12px 12px;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab {
        white-space: nowrap;
        padding: 8px 12px;
    }
    
    .shortcut-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .chart-card canvas {
        height: 300px;
    }

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

    .row-edit {
        display: block;
    }

    .row-edit td {
        display: block;
        width: 100%;
        padding: 12px 12px;
    }

    .power-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .power-inputs {
        grid-template-columns: 1fr;
    }

    .row-arrow {
        display: none;
    }
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.kpi-label {
    color: var(--muted-foreground);
    font-size: 13px;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 6px;
}

.kpi-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
}

.kpi-services span {
    display: block;
    font-size: 13px;
    color: #000;
}

.stats-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%;
}

.chart-card {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: calc(var(--spacing, 4px) * 6);
    overflow: hidden;
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing, 4px) * 3);
}

.chart-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--foreground);
}

.chart-subtitle {
    margin: 6px 0 0;
    color: var(--muted-foreground);
    font-size: 13px;
}

.chart-wrap {
    position: relative;
    width: 100%;
}

.chart-card canvas {
    display: block;
    width: 100%;
    height: 380px;
}

.chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    font-size: 14px;
    background: color-mix(in srgb, var(--background) 70%, transparent);
}

.chart-legend {
    margin-top: calc(var(--spacing, 4px) * 3);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.chart-tooltip {
    position: absolute;
    min-width: 120px;
    background: var(--popover);
    color: var(--foreground);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 8px 10px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 150ms ease, transform 150ms ease;
    box-shadow: var(--shadow-xl);
    z-index: 2;
}

.chart-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.chart-tooltip .tooltip-label {
    font-size: 11px;
    color: var(--muted-foreground);
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius);
    display: inline-block;
    border: 1px solid var(--card);
}

.yearly-table {
    width: 100%;
    border-collapse: collapse;
}

.yearly-table th,
.yearly-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.yearly-table th {
    background: var(--muted);
    color: var(--foreground);
}

.yearly-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--muted) 60%, var(--card));
}

.yearly-table .is-current {
    background: var(--card);
}

.yearly-table tbody tr:hover {
    background: color-mix(in srgb, var(--foreground) 8%, var(--card));
    box-shadow: var(--shadow-sm);
}

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

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.chart-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.chart-filters > * {
    min-width: 0;
}

.chart-filters label {
    flex: 1 1 180px;
}

.chart-filters .actions {
    flex: 0 0 180px;
}

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

.insight-card.insight-strong {
    border-color: var(--border);
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
}

.insight-card.insight-medium {
    border-color: var(--border);
    background: color-mix(in srgb, var(--muted) 60%, var(--card));
}

.insight-card.insight-weak {
    border-color: var(--border);
    background: color-mix(in srgb, var(--muted) 80%, var(--card));
}

.insight-summary,
.insight-item {
    background: var(--card);
    border-radius: var(--radius);
    padding: 14px 16px;
    border: 1px solid var(--border);
}

.insight-label {
    font-size: 12px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.insight-value {
    font-size: 20px;
    font-weight: 700;
    margin-top: 6px;
}

.insight-note {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    background: var(--card);
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    width: min(380px, 100%);
    display: grid;
    gap: 16px;
    text-align: center;
}

.login-card .logo {
    max-width: 180px;
    margin: 0 auto;
}

.note-modal {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--foreground) 35%, transparent);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 30;
}

.note-modal.active {
    display: flex;
}

.note-modal .note-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 20px;
    max-width: 620px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.files-modal .note-card {
    max-width: 720px;
}

.note-modal .note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.note-modal .note-card h3 {
    margin: 0;
    font-size: 18px;
}

.note-vin {
    color: var(--muted-foreground);
    font-weight: 500;
}

.note-modal .note-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.note-list {
    display: grid;
    gap: 12px;
}

.note-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface);
}

.note-item-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.note-item-value {
    margin-top: 6px;
    font-weight: 600;
    color: var(--text);
}

.note-link {
    color: var(--primary);
    text-decoration: underline;
}

.costs-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.costs-header h3 {
    margin: 0;
    font-size: 18px;
}

@media (max-width: 1100px) {
    .table-wrap {
        overflow-x: auto;
    }
}