@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

/**
 * 明德建设 — Mechanical equipment management UI overlay
 * Brand brown: #5D3A1A (primary), #8B6B46 (lighter accent)
 * Typography: Noto Sans SC (Chinese), Futura stack (English / numerals)
 */

:root {
    --v-canvas: #F2F2F2;
    --v-surface: #FFFFFF;
    --v-surface-raised: #FAFAFA;
    --v-ink: #1A1A1A;
    --v-ink-muted: #5C5C5C;
    --v-ink-soft: #8A8A8A;
    --v-border: #5D3A1A;
    --v-border-soft: rgba(93, 58, 26, 0.25);
    --v-border-light: rgba(93, 58, 26, 0.12);
    --v-accent: #5D3A1A;
    --v-accent-hover: #452812;
    --v-accent-light: #8B6B46;
    --v-accent-soft: rgba(93, 58, 26, 0.08);
    --v-error: #C53030;
    --v-success: #276749;
    --v-radius-sm: 4px;
    --v-radius: 6px;
    --v-radius-lg: 8px;
    --v-font-zh: 'Noto Sans SC', 'Source Han Sans SC', 'Source Han Sans CN', sans-serif;
    --v-font-en: Futura, 'Century Gothic', 'Trebuchet MS', sans-serif;
    --v-font-display: var(--v-font-zh);
    --v-font-body: var(--v-font-zh);
    --v-font-size-base: 14px;
    --v-font-size-sm: 13px;
    --v-font-size-xs: 12px;
    --v-tracking: 0.04em;
}

/* ─── Base ───────────────────────────────────────────── */

body {
    font-family: var(--v-font-zh) !important;
    font-size: var(--v-font-size-base);
    font-weight: 400;
    letter-spacing: 0.01em;
    background: var(--v-canvas) !important;
    color: var(--v-ink) !important;
}

:lang(en),
[lang="en"],
.font-en,
.stat-card .info h3,
.stat-card .info h4,
.cost,
.report-cost,
td.cost {
    font-family: var(--v-font-en) !important;
    font-variant-numeric: tabular-nums;
}

/* ─── Site header (index) ────────────────────────────── */

.site-header {
    background: var(--v-surface) !important;
    border-bottom: 2px solid var(--v-border) !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100%;
}

.site-header .header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.site-header--admin .header-inner {
    max-width: min(95%, 1680px);
    padding-left: 20px;
    padding-right: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    color: var(--v-ink) !important;
}

.brand-mark {
    height: 52px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-name {
    font-family: var(--v-font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.brand-tagline,
.hero-eyebrow {
    font-family: var(--v-font-en) !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--v-tracking);
    text-transform: uppercase;
}

.brand-tagline {
    color: var(--v-ink-muted);
}

.site-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.nav-link {
    padding: 10px 18px;
    font-size: var(--v-font-size-base);
    font-weight: 500;
    letter-spacing: var(--v-tracking);
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--v-ink-muted) !important;
    border: 1px solid transparent;
    border-radius: var(--v-radius-sm);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.nav-link:hover {
    color: var(--v-accent) !important;
    border-color: var(--v-border-soft);
    background: var(--v-accent-soft);
}

.nav-link.active {
    color: var(--v-accent) !important;
    border-color: var(--v-border);
    background: var(--v-accent-soft);
}

/* ─── Hero (index) ───────────────────────────────────── */

.hero {
    background: var(--v-surface) !important;
    border-bottom: 1px solid var(--v-border-light);
    padding: 48px 24px 40px !important;
    text-align: center !important;
    box-shadow: none !important;
}

.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.hero-eyebrow {
    color: var(--v-accent) !important;
    margin-top: 12px;
    margin-bottom: 0;
}

.hero-title {
    font-family: var(--v-font-display);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--v-ink) !important;
    margin-bottom: 0;
}

.hero-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--v-ink-muted) !important;
    max-width: 42ch;
    opacity: 1 !important;
    margin: 12px auto 0 !important;
}

.hero-desc:lang(en) {
    font-family: var(--v-font-en) !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: var(--v-tracking);
    text-transform: uppercase;
}

.hero-desc em {
    font-family: var(--v-font-display);
    font-style: italic;
    color: var(--v-ink);
}

/* ─── Admin header actions ───────────────────────────── */

.site-header .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.header-actions a,
.header-actions button {
    padding: 10px 18px !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    border: 1px solid var(--v-border) !important;
    border-radius: var(--v-radius-sm) !important;
    background: var(--v-surface) !important;
    color: var(--v-accent) !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.header-actions a:hover,
.header-actions button:hover {
    background: var(--v-accent-soft) !important;
}

.header-actions .btn-export {
    background: var(--v-accent) !important;
    color: #fff !important;
    border-color: var(--v-accent) !important;
}

.header-actions .btn-export:hover {
    background: var(--v-accent-hover) !important;
    border-color: var(--v-accent-hover) !important;
}

.header-actions .btn-back {
    background: transparent !important;
    color: var(--v-ink-muted) !important;
    border-color: var(--v-border-soft) !important;
}

.header-actions .btn-back:hover {
    color: var(--v-accent) !important;
    border-color: var(--v-border) !important;
    background: var(--v-accent-soft) !important;
}

/* ─── Layout ─────────────────────────────────────────── */

.container {
    max-width: 1100px;
}

body:has(.site-header--admin) .container {
    max-width: min(95%, 1680px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Reserve scrollbar gutter so tab/mode switches don't shift layout when content height toggles the scrollbar. */
html:has(.site-header),
html:has(.site-header--admin) {
    scrollbar-gutter: stable;
}

.card,
.filters,
.table-wrap,
.report-wrap,
.asset-report-wrap,
.tabs,
.stat-card {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-border-light) !important;
    border-radius: var(--v-radius-lg) !important;
    box-shadow: none !important;
}

.card {
    border-top: 2px solid var(--v-border) !important;
}

.card h2,
.modal h2 {
    font-family: var(--v-font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--v-ink) !important;
}

.card h2 i,
.modal h2 i {
    color: var(--v-accent) !important;
}

/* ─── Forms ──────────────────────────────────────────── */

.form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-group label,
.filters label,
.modal label {
    color: var(--v-ink-muted) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.form-control,
.form-group select,
.form-group input:not([type="radio"]),
.form-group textarea,
.filters select,
.filters input,
.modal select,
.modal input,
.modal textarea {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-border-soft) !important;
    border-radius: var(--v-radius-sm) !important;
    color: var(--v-ink) !important;
    font-family: var(--v-font-body) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
    box-shadow: none !important;
}

.form-control::placeholder,
.form-group input:not([type="radio"]):not([type="checkbox"])::placeholder,
.form-group textarea::placeholder,
.filters input::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
    font-family: var(--v-font-body) !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
    color: var(--v-ink-soft) !important;
    opacity: 1;
}

.form-group input[type="date"],
.form-group input[type="number"],
.form-group input[type="datetime-local"],
.filters input[type="date"],
.modal input[type="date"],
.modal input[type="number"],
.modal input[type="datetime-local"] {
    font-family: var(--v-font-body) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 400 !important;
}

.form-group input[type="date"],
.filters input[type="date"],
.modal input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    box-sizing: border-box;
    display: block;
    line-height: 1.2;
}

.form-group input[type="date"]::-webkit-date-and-time-value,
.filters input[type="date"]::-webkit-date-and-time-value,
.modal input[type="date"]::-webkit-date-and-time-value {
    font-family: var(--v-font-body) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
    text-align: left;
    min-width: 0;
}

.form-group input[type="date"]::-webkit-datetime-edit,
.form-group input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.form-group input[type="date"]::-webkit-datetime-edit-text,
.form-group input[type="date"]::-webkit-datetime-edit-month-field,
.form-group input[type="date"]::-webkit-datetime-edit-day-field,
.form-group input[type="date"]::-webkit-datetime-edit-year-field,
.filters input[type="date"]::-webkit-datetime-edit,
.filters input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.filters input[type="date"]::-webkit-datetime-edit-text,
.filters input[type="date"]::-webkit-datetime-edit-month-field,
.filters input[type="date"]::-webkit-datetime-edit-day-field,
.filters input[type="date"]::-webkit-datetime-edit-year-field,
.modal input[type="date"]::-webkit-datetime-edit,
.modal input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.modal input[type="date"]::-webkit-datetime-edit-text,
.modal input[type="date"]::-webkit-datetime-edit-month-field,
.modal input[type="date"]::-webkit-datetime-edit-day-field,
.modal input[type="date"]::-webkit-datetime-edit-year-field {
    font-family: var(--v-font-body) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
}

.form-group select option,
.modal select option,
.filters select option {
    font-family: var(--v-font-body);
    font-size: var(--v-font-size-base);
}

.form-control:focus,
.form-group select:focus,
.form-group input:not([type="radio"]):focus,
.form-group textarea:focus,
.filters select:focus,
.filters input:focus,
.modal select:focus,
.modal input:focus,
.modal textarea:focus {
    border-color: var(--v-border) !important;
    outline: 2px solid var(--v-accent-soft);
    outline-offset: 0;
    background: var(--v-surface) !important;
}

.form-group label .required {
    color: var(--v-error) !important;
}

.readonly-field,
.modal .readonly-field {
    background: var(--v-surface-raised) !important;
    color: var(--v-ink-muted) !important;
    font-family: var(--v-font-body) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
}

/* ─── Registration form: 3 field cols + 2 fixed action cols ── */

.form-row-3,
.select-row,
.dept-row,
.vendor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(72px, max-content) minmax(72px, max-content);
    gap: 10px;
    align-items: stretch;
    width: 100%;
}

.form-row-4,
.form-row-5,
.form-row-7 {
    display: grid;
    width: 100%;
    align-items: start;
}

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

.form-row-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.form-row-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.meter-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.meter-row input[type="number"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
}

.meter-row select {
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

.form-group .meter-row input[type="number"],
.form-group .meter-row select {
    height: 42px;
}

.form-group .meter-row input[type="number"] {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.form-group .meter-row select {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex: 0 0 72px !important;
}

.form-row-3 {
    align-items: start;
}

.form-row-3 > .form-group:nth-child(1) { grid-column: 1; }
.form-row-3 > .form-group:nth-child(2) { grid-column: 2; }
.form-row-3 > .form-group:nth-child(3) { grid-column: 3 / 6; }

.select-row > select,
.select-row > .form-control {
    grid-column: 1 / 4;
    min-width: 0;
}

.select-row > .btn-add-row {
    grid-column: 4 / 6;
    width: 100%;
}

.dept-row > select,
.dept-row > .form-control {
    grid-column: 1 / 4;
    min-width: 0;
}

.dept-row > .btn-add-row { grid-column: 4; width: 100%; }
.dept-row > .btn-remove-row { grid-column: 5; width: 100%; }

.vendor-row > select {
    grid-column: 1;
    min-width: 0;
}

.vendor-row > input:not([type="radio"]) {
    grid-column: 2 / 4;
    min-width: 0;
}

.vendor-row > .btn-add-row {
    grid-column: 4 / 6;
    width: 100%;
}

@media (max-width: 768px) {
    .form-row-3,
    .form-row-4,
    .form-row-5,
    .form-row-7,
    .select-row,
    .dept-row,
    .vendor-row {
        grid-template-columns: 1fr;
    }

    .form-row-3 > .form-group,
    .form-row-4 > .form-group,
    .form-row-5 > .form-group,
    .form-row-7 > .form-group,
    .select-row > *,
    .dept-row > *,
    .vendor-row > * {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* ─── Equipment form: unified 20-column alignment ─────── */

.equipment-form-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal .form-grid.equipment-form-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.equipment-form-grid .form-row-2,
.equipment-form-grid .form-row-3,
.equipment-form-grid .form-row-4,
.equipment-form-grid .form-row-5,
.equipment-form-grid .upload-split-row.form-row-2 {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    width: 100%;
}

.modal .equipment-form-grid .form-row-2,
.modal .equipment-form-grid .form-row-3,
.modal .equipment-form-grid .form-row-4,
.modal .equipment-form-grid .form-row-5 {
    gap: 14px;
    margin-bottom: 0;
}

.equipment-form-grid .form-row-2 > *,
.equipment-form-grid .upload-split-row.form-row-2 > * {
    grid-column: span 10;
    min-width: 0;
}

.equipment-form-grid .form-row-5 > * {
    grid-column: span 4;
    min-width: 0;
}

.equipment-form-grid .form-row-3 > .form-group:nth-child(1) {
    grid-column: 1 / span 4;
    min-width: 0;
}

.equipment-form-grid .form-row-3 > .form-group:nth-child(2) {
    grid-column: 5 / span 4;
    min-width: 0;
}

.equipment-form-grid .form-row-3 > .form-group:nth-child(3) {
    grid-column: 9 / span 4;
    min-width: 0;
}

.equipment-form-grid .form-row-3 > .form-group.eq-dept-group {
    grid-column: 13 / -1;
    min-width: 0;
}

.equipment-form-grid .form-row-3 > .form-group.eq-dept-group .dept-row {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

.equipment-form-grid .form-row-3 > .form-group.eq-dept-group .dept-row > select,
.equipment-form-grid .form-row-3 > .form-group.eq-dept-group .dept-row > .form-control {
    grid-column: span 4;
}

.equipment-form-grid .form-row-3 > .form-group.eq-dept-group .dept-row > .btn-add-row {
    grid-column: 5 / span 2;
}

.equipment-form-grid .form-row-3 > .form-group.eq-dept-group .dept-row > .btn-remove-row {
    grid-column: 7 / span 2;
}

.equipment-form-grid .form-row-4 > .form-group:not(.eq-meter-group) {
    grid-column: span 4;
    min-width: 0;
}

.equipment-form-grid .form-row-4.form-row-4-meter > .form-group:nth-child(1) {
    grid-column: 1 / span 4;
}

.equipment-form-grid .form-row-4.form-row-4-meter > .form-group:nth-child(2) {
    grid-column: 5 / span 4;
}

.equipment-form-grid .form-row-4.form-row-4-meter > .form-group:nth-child(3) {
    grid-column: 9 / span 4;
}

.equipment-form-grid .form-row-4.form-row-4-meter > .form-group.eq-meter-group {
    grid-column: 13 / -1;
    min-width: 0;
}

.equipment-form-grid .form-row-4.form-row-4-meter > .form-group.eq-meter-group .meter-row {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

.equipment-form-grid .form-row-4.form-row-4-meter > .form-group.eq-meter-group .meter-row > input[type="number"] {
    grid-column: 1 / span 6;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: unset !important;
}

.equipment-form-grid .form-row-4.form-row-4-meter > .form-group.eq-meter-group .meter-row > select {
    grid-column: 7 / span 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: unset !important;
}

.equipment-form-grid .form-row-5 > .form-group.eq-plate-group .plate-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

.equipment-form-grid .form-row-5 > .form-group.eq-plate-group .plate-row > select {
    grid-column: 1 / span 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: unset !important;
}

.equipment-form-grid .form-row-5 > .form-group.eq-plate-group .plate-row > input {
    grid-column: 3 / span 2;
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
}

.equipment-form-grid .form-row-3 .meter-row,
.equipment-form-grid .form-row-4 .meter-row {
    display: flex;
    width: 100%;
    min-width: 0;
}

.equipment-form-grid .form-row-3 .meter-row > input,
.equipment-form-grid .form-row-3 .meter-row > select,
.equipment-form-grid .form-row-4 .meter-row > input,
.equipment-form-grid .form-row-4 .meter-row > select {
    grid-column: auto;
}

.equipment-form-grid .form-row-2 .form-group,
.equipment-form-grid .form-row-3 .form-group,
.equipment-form-grid .form-row-4 .form-group,
.equipment-form-grid .form-row-5 .form-group {
    margin-bottom: 0;
}

.equipment-form-grid .full {
    width: 100%;
}

.equipment-form-grid .full .upload-split-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.modal .equipment-form-grid .full .upload-split-row {
    gap: 14px;
}

.modal.modal-equipment {
    max-width: min(1200px, 96vw) !important;
    width: 96% !important;
}

@media (max-width: 768px) {
    .equipment-form-grid .form-row-2,
    .equipment-form-grid .form-row-3,
    .equipment-form-grid .form-row-4,
    .equipment-form-grid .form-row-5,
    .equipment-form-grid .upload-split-row.form-row-2 {
        grid-template-columns: 1fr;
    }

    .equipment-form-grid .form-row-2 > *,
    .equipment-form-grid .form-row-3 > *,
    .equipment-form-grid .form-row-4 > .form-group,
    .equipment-form-grid .form-row-5 > *,
    .equipment-form-grid .upload-split-row.form-row-2 > * {
        grid-column: 1 / -1 !important;
    }

    .equipment-form-grid .full .upload-split-row {
        grid-template-columns: 1fr;
    }
}

/* ─── Tabs ───────────────────────────────────────────── */

.mode-tabs {
    background: var(--v-surface-raised) !important;
    border: 1px solid var(--v-border-light) !important;
    border-radius: var(--v-radius) !important;
    padding: 4px !important;
}

.mode-tab {
    color: var(--v-ink-muted) !important;
    border-radius: var(--v-radius-sm) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.mode-tab-label-split {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.mode-tab-label-split .line-1,
.mode-tab-label-split .line-2 {
    display: inline;
}

.tab {
    color: var(--v-ink-muted) !important;
    border-radius: var(--v-radius-sm) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.mode-tab:hover {
    color: var(--v-accent) !important;
    background: var(--v-accent-soft) !important;
}

.tab:hover {
    color: var(--v-accent) !important;
    background: var(--v-accent-soft) !important;
}

.mode-tab.active {
    background: var(--v-surface) !important;
    color: var(--v-accent) !important;
    border-color: var(--v-border) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.tab.active {
    background: var(--v-accent-soft) !important;
    color: var(--v-accent) !important;
    border-bottom-color: var(--v-accent) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.tabs {
    border: 1px solid var(--v-border-light) !important;
    border-top: 2px solid var(--v-border) !important;
}

/* ─── Buttons ────────────────────────────────────────── */

.btn-submit,
.btn-save,
.modal-btns .btn-save,
.camera-actions .btn-capture {
    background: var(--v-accent) !important;
    color: #fff !important;
    border: 1px solid var(--v-accent) !important;
    border-radius: var(--v-radius-sm) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: none !important;
    transform: none !important;
}

.btn-submit:hover,
.btn-save:hover,
.modal-btns .btn-save:hover,
.camera-actions .btn-capture:hover {
    background: var(--v-accent-hover) !important;
    border-color: var(--v-accent-hover) !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-add-row {
    background: var(--v-accent-soft) !important;
    color: var(--v-accent) !important;
    border: 1px dashed var(--v-border) !important;
    border-radius: var(--v-radius-sm) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.btn-add-row:hover {
    background: rgba(93, 58, 26, 0.14) !important;
}

.btn-remove-row {
    background: transparent !important;
    color: var(--v-error) !important;
    border: 1px dashed rgba(197, 48, 48, 0.45) !important;
    border-radius: var(--v-radius-sm) !important;
    font-size: var(--v-font-size-base) !important;
    text-transform: none;
    letter-spacing: 0.01em;
}

.btn-remove-row:hover {
    background: rgba(197, 48, 48, 0.06) !important;
}

.btn-cancel,
.modal-btns .btn-cancel,
.camera-actions .btn-cancel,
.filters .btn-clear {
    background: transparent !important;
    color: var(--v-ink-muted) !important;
    border: 1px solid var(--v-border-soft) !important;
    border-radius: var(--v-radius-sm) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.btn-cancel:hover,
.modal-btns .btn-cancel:hover,
.camera-actions .btn-cancel:hover,
.filters .btn-clear:hover {
    color: var(--v-accent) !important;
    border-color: var(--v-border) !important;
    background: var(--v-accent-soft) !important;
}

.btn-photo {
    background: transparent !important;
    color: var(--v-accent) !important;
    border: 1px solid var(--v-border-soft) !important;
    border-radius: var(--v-radius-sm) !important;
    font-size: var(--v-font-size-base) !important;
    text-transform: none;
    letter-spacing: 0.01em;
}

.btn-photo:hover {
    background: var(--v-accent-soft) !important;
    border-color: var(--v-border) !important;
}

.btn-photo.primary {
    background: var(--v-accent) !important;
    color: #fff !important;
    border-color: var(--v-accent) !important;
}

.btn-photo.primary:hover {
    background: var(--v-accent-hover) !important;
}

.btn-continue {
    background: var(--v-accent-soft) !important;
    color: var(--v-accent) !important;
    border: 1px solid var(--v-border) !important;
}

.btn-undo {
    background: transparent !important;
    color: var(--v-error) !important;
    border: 1px solid rgba(197, 48, 48, 0.35) !important;
}

.btn-to-admin {
    background: var(--v-accent) !important;
    color: #fff !important;
    border: 1px solid var(--v-accent) !important;
}

.btn-to-admin:hover {
    background: var(--v-accent-hover) !important;
}

/* ─── Type radio chips ───────────────────────────────── */

.type-radio-group label {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-border-soft) !important;
    border-radius: var(--v-radius-sm) !important;
    color: var(--v-ink-muted) !important;
    font-size: var(--v-font-size-base) !important;
    text-transform: none;
    letter-spacing: 0.01em;
}

.type-radio-group label:hover {
    border-color: var(--v-border) !important;
    color: var(--v-accent) !important;
}

.type-radio-group label:has(input[value="维修"]:checked) {
    border-color: var(--v-error) !important;
    background: rgba(197, 48, 48, 0.06) !important;
    color: var(--v-error) !important;
}

.type-radio-group label:has(input[value="保养"]:checked) {
    border-color: var(--v-success) !important;
    background: rgba(39, 103, 73, 0.06) !important;
    color: var(--v-success) !important;
}

.type-radio-group label:has(input[value="保险"]:checked) {
    border-color: #6B46C1 !important;
    background: rgba(107, 70, 193, 0.06) !important;
    color: #6B46C1 !important;
}

.type-radio-group label:has(input[value="年检"]:checked) {
    border-color: #C05621 !important;
    background: rgba(192, 86, 33, 0.06) !important;
    color: #C05621 !important;
}

/* ─── Photo upload ───────────────────────────────────── */

.photo-area {
    background: var(--v-surface-raised) !important;
    border: 1px dashed var(--v-border-soft) !important;
    border-radius: var(--v-radius) !important;
}

.photo-area.dragover {
    border-color: var(--v-border) !important;
    background: var(--v-accent-soft) !important;
}

.photo-area .icon {
    color: var(--v-accent) !important;
}

.photo-area .tip {
    color: var(--v-ink-muted) !important;
    font-size: var(--v-font-size-sm) !important;
}

.photo-area .tip strong {
    color: var(--v-accent) !important;
}

.upload-split-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.upload-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.upload-col > label {
    flex-shrink: 0;
    margin-bottom: 6px;
    line-height: 1.35;
}

.upload-split-row .form-group {
    height: 100%;
}

.upload-split-row .form-group > label {
    flex-shrink: 0;
    margin-bottom: 6px;
    line-height: 1.35;
}

.upload-split-row .photo-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 160px;
    box-sizing: border-box;
}

.photo-preview .thumb {
    border: 1px solid var(--v-border-soft) !important;
    border-radius: var(--v-radius-sm) !important;
}

/* ─── Tables ─────────────────────────────────────────── */

thead,
.table-wrap thead th,
.report-wrap thead th,
.asset-report-wrap thead th {
    background: var(--v-surface-raised) !important;
    box-shadow: inset 0 -2px 0 var(--v-border-light) !important;
}

.asset-report-wrap .col-fixed-text {
    overflow: visible;
    text-overflow: clip;
}

.asset-report-wrap tbody td.col-fixed-text {
    white-space: nowrap;
}

.asset-report-wrap.asset-view-summary thead th[data-col-key$="-total"],
.asset-report-wrap.asset-view-summary tbody td[data-col-key$="-total"],
.asset-report-wrap.asset-view-summary thead th[data-col-key="summary-lifetime"],
.asset-report-wrap.asset-view-summary tbody td[data-col-key="summary-lifetime"],
.asset-report-wrap.asset-view-summary thead th[data-col-key="summary-avg"],
.asset-report-wrap.asset-view-summary tbody td[data-col-key="summary-avg"] {
    min-width: 132px;
}

th {
    color: var(--v-ink-muted) !important;
    font-size: var(--v-font-size-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    border-bottom-color: var(--v-border-light) !important;
}

td {
    font-size: var(--v-font-size-base) !important;
    border-bottom-color: var(--v-border-light) !important;
    color: var(--v-ink) !important;
}

tr:hover td {
    background: var(--v-accent-soft) !important;
}

.cost,
.report-cost {
    color: var(--v-ink) !important;
    font-weight: 600;
}

.empty-row td {
    color: var(--v-ink-soft) !important;
}

.total-row td,
tr[style*="background:#f7fafc"] td {
    background: var(--v-surface-raised) !important;
    border-top: 2px solid var(--v-border-light) !important;
}

/* ─── Badges ─────────────────────────────────────────── */

.badge {
    border-radius: var(--v-radius-sm) !important;
    font-size: var(--v-font-size-xs) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    border: 1px solid;
}

.badge.repair {
    background: rgba(197, 48, 48, 0.08) !important;
    color: var(--v-error) !important;
    border-color: rgba(197, 48, 48, 0.25);
}

.badge.maintain {
    background: rgba(39, 103, 73, 0.08) !important;
    color: var(--v-success) !important;
    border-color: rgba(39, 103, 73, 0.25);
}

.badge.insurance {
    background: rgba(107, 70, 193, 0.08) !important;
    color: #6B46C1 !important;
    border-color: rgba(107, 70, 193, 0.25);
}

.badge.inspection {
    background: rgba(192, 86, 33, 0.08) !important;
    color: #C05621 !important;
    border-color: rgba(192, 86, 33, 0.25);
}

/* ─── Stats ──────────────────────────────────────────── */

.stat-card .info p {
    color: var(--v-ink-muted) !important;
    font-size: var(--v-font-size-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.stat-card .info h3,
.stat-card .info h4 {
    font-family: var(--v-font-display);
    color: var(--v-ink) !important;
}

.stat-card .icon {
    border-radius: var(--v-radius-sm) !important;
    background: var(--v-accent-soft) !important;
    color: var(--v-accent) !important;
    border: 1px solid var(--v-border-soft);
}

.stat-card .icon.blue,
.stat-card .icon.green,
.stat-card .icon.orange,
.stat-card .icon.red,
.stat-card .icon.purple {
    background: var(--v-accent-soft) !important;
    color: var(--v-accent) !important;
}

.stat-equipment-stack .stat-card.stat-equipment-total > .icon,
.stat-card.stats-row-main > .icon,
.stats-column > .stat-card > .icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    border-radius: 10px !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.stat-equipment-stack .stat-card.stat-equipment-mini > .icon,
.stat-card.stat-equipment-mini > .icon,
.stats-breakdown .stat-card > .icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.stat-equipment-stack .stat-card.stat-equipment-total,
.stat-card.stats-row-main {
    padding: 12px 16px !important;
    gap: 12px !important;
    overflow: visible !important;
}

.stat-card.stat-equipment-mini {
    padding: 10px 12px !important;
    gap: 10px !important;
    overflow: visible !important;
    min-height: 72px !important;
}

.stat-card.stat-equipment-mini .info,
.stats-column .stat-card .info,
.stats-breakdown .stat-card .info {
    overflow: visible !important;
    flex: 1 1 auto;
}

.stat-card.stat-equipment-mini .info p,
.stats-column .stat-card .info h3,
.stats-column .stat-card .info h4,
.stats-breakdown .stat-card .info h4 {
    overflow: visible !important;
    text-overflow: clip !important;
}

.stats-breakdown .stat-card {
    overflow: visible !important;
}

/* ─── Asset ledger ───────────────────────────────────── */

.asset-view-btn,
.asset-toolbar .btn-eq-action,
.btn-report-sort {
    background: transparent !important;
    color: var(--v-ink-muted) !important;
    border: 1px dashed var(--v-border-soft) !important;
    border-radius: var(--v-radius-sm) !important;
    font-size: var(--v-font-size-base) !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.asset-view-btn.active,
.asset-view-btn:hover,
.asset-toolbar .btn-eq-action:hover,
.btn-report-sort:hover {
    color: var(--v-accent) !important;
    border-color: var(--v-border) !important;
    background: var(--v-accent-soft) !important;
}

.eq-name-link {
    color: var(--v-accent) !important;
    cursor: pointer;
}

.eq-name-link:hover {
    color: var(--v-accent-hover) !important;
}

/* ─── Equipment gallery (设备全览) ───────────────────── */

.asset-toolbar-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.equipment-gallery-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: min(100%, 240px);
    max-width: 420px;
}

.equipment-gallery-search-icon {
    position: absolute;
    left: 12px;
    color: var(--v-ink-soft);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.equipment-gallery-search {
    width: 100%;
    height: 38px;
    padding: 8px 36px 8px 36px;
    border: 1px solid var(--v-border-soft) !important;
    border-radius: var(--v-radius-sm) !important;
    background: var(--v-surface) !important;
    color: var(--v-ink) !important;
    font-size: var(--v-font-size-base) !important;
    font-family: var(--v-font-zh) !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.equipment-gallery-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.equipment-gallery-search:focus {
    border-color: var(--v-border) !important;
    outline: 2px solid var(--v-accent-soft);
    outline-offset: 0;
    background: var(--v-surface) !important;
}

.equipment-gallery-search-clear {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--v-radius-sm);
    background: transparent;
    color: var(--v-ink-soft);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.equipment-gallery-search-clear:hover {
    color: var(--v-accent);
    background: var(--v-accent-soft);
}

.equipment-gallery {
    margin-top: 16px;
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(93, 58, 26, 0.06);
}

.equipment-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.equipment-gallery-empty {
    grid-column: 1 / -1;
    padding: 48px 24px;
    text-align: center;
    color: var(--v-ink-soft);
    font-size: var(--v-font-size-base);
}

.equipment-card {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 16px;
    border-right: 1px solid var(--v-border-light);
    border-bottom: 1px solid var(--v-border-light);
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 100%;
}

.equipment-card:nth-child(4n) {
    border-right: none;
}

.equipment-card:hover {
    background: var(--v-accent-soft);
}

.equipment-card-sold {
    opacity: 0.72;
}

.equipment-card-sold .equipment-card-photo-wrap img {
    filter: grayscale(0.85);
}

.equipment-card-header {
    margin-bottom: 6px;
    min-width: 0;
}

.equipment-card-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.equipment-card-title {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--v-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--v-ink);
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.equipment-card-meta {
    margin: 0 0 14px;
    font-size: var(--v-font-size-xs);
    color: var(--v-ink-muted);
    letter-spacing: 0.02em;
}

.equipment-card-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--v-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--v-surface-raised);
    margin-bottom: 14px;
}

.equipment-card-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.equipment-card-doc-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--v-accent) !important;
    background: var(--v-accent-soft);
    cursor: pointer;
}

.equipment-card-doc-btn:hover {
    background: #bee3f8;
}

.equipment-card-title-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    --equipment-tag-height: 28px;
}

.equipment-card-title-actions .equipment-card-status {
    height: var(--equipment-tag-height);
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
}

.equipment-card-title-actions .equipment-card-doc-btn {
    height: var(--equipment-tag-height);
    min-width: var(--equipment-tag-height);
}

.equipment-card-photo-wrap.photo-missing .equipment-card-photo-placeholder {
    display: flex;
}

.equipment-card-photo-wrap.photo-missing img {
    display: none;
}

.equipment-card-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--v-accent-light);
    gap: 8px;
    font-size: var(--v-font-size-xs);
}

.equipment-card-photo-placeholder i {
    font-size: 28px;
    opacity: 0.55;
}

.equipment-card-status {
    display: inline-block;
    flex-shrink: 0;
    padding: 4px 10px;
    font-family: var(--v-font-zh);
    font-size: var(--v-font-size-xs);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    color: var(--v-surface);
    background: var(--v-accent);
    border: 1px solid var(--v-accent);
    border-radius: var(--v-radius-sm);
}

.equipment-card-status.status-warning {
    background: var(--v-error);
    border-color: var(--v-error);
}

.equipment-card-status.status-standby {
    background: var(--v-accent-light);
    border-color: var(--v-accent-light);
}

.equipment-card-status.status-idle {
    background: #718096;
    border-color: #718096;
}

.equipment-card-status.status-sold {
    background: var(--v-ink-soft);
    border-color: var(--v-ink-soft);
}

.equipment-card-warning-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #fed7d7;
    color: #c53030;
    border: 1px solid #fc8181;
    white-space: nowrap;
}

.equipment-card-high-maint {
    box-shadow: inset 0 0 0 2px #fbd38d;
}

.equipment-card-high-maint:hover {
    background: #fffaf0;
}

.equipment-card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding-top: 12px;
    border-top: 1px solid var(--v-border-light);
}

.equipment-card-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.equipment-card-metric-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v-ink-soft);
}

.equipment-card-metric-value {
    font-size: var(--v-font-size-sm);
    color: var(--v-ink);
    line-height: 1.4;
    word-break: break-all;
}

.equipment-card-metric-value.metric-overdue,
.equipment-card-metric-value.metric-urgent {
    color: #e53e3e !important;
    font-weight: 600;
}

.equipment-doc-item.active {
    border-color: var(--v-border) !important;
    box-shadow: inset 0 0 0 1px rgba(93, 58, 26, 0.25);
}

.equipment-doc-item-head {
    color: var(--v-ink) !important;
}

.equipment-doc-action-btn {
    border: 1px solid var(--v-border-soft) !important;
    border-radius: var(--v-radius-sm) !important;
    background: var(--v-surface) !important;
    color: var(--v-accent) !important;
    text-decoration: none !important;
}

.equipment-doc-action-btn:hover {
    border-color: var(--v-border) !important;
    background: var(--v-accent-soft) !important;
}

.equipment-doc-preview,
.equipment-doc-list {
    border-color: var(--v-border-light) !important;
}

.equipment-doc-preview-main {
    background: var(--v-surface-raised) !important;
}

.equipment-doc-preview-toolbar {
    border-top-color: var(--v-border-light) !important;
}

.asset-report-wrap tbody td.inspection-overdue,
.asset-report-wrap tbody td.inspection-urgent {
    color: #e53e3e !important;
    font-weight: 700;
}

.equipment-gallery-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--v-border);
    background: var(--v-surface-raised);
}

.equipment-gallery-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-right: 1px solid var(--v-border-light);
    font-size: var(--v-font-size-sm);
}

.equipment-gallery-stat:last-child {
    border-right: none;
}

.equipment-gallery-stat .stat-label {
    color: var(--v-ink-muted);
}

.equipment-gallery-stat .stat-value {
    font-family: var(--v-font-en);
    font-weight: 600;
    font-size: 16px;
    color: var(--v-accent);
}

@media (max-width: 1100px) {
    .equipment-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .equipment-card:nth-child(4n) {
        border-right: 1px solid var(--v-border-light);
    }

    .equipment-card:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 640px) {
    .equipment-gallery-grid {
        grid-template-columns: 1fr;
    }

    .equipment-card {
        border-right: none !important;
    }

    .equipment-gallery-footer {
        grid-template-columns: 1fr;
    }

    .equipment-gallery-stat {
        border-right: none;
        border-bottom: 1px solid var(--v-border-light);
    }

    .equipment-gallery-stat:last-child {
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    .mode-tab-label-split {
        flex-direction: column;
        line-height: 1.1;
    }

    .mode-tab-label-split .line-1,
    .mode-tab-label-split .line-2 {
        display: block;
        white-space: nowrap;
    }
}

.btn-edit {
    background: var(--v-accent-soft) !important;
    color: var(--v-accent) !important;
    border: 1px solid var(--v-border-soft) !important;
}

.btn-edit:hover {
    border-color: var(--v-border) !important;
}

.btn-del {
    background: transparent !important;
    color: var(--v-error) !important;
    border: 1px solid rgba(197, 48, 48, 0.35) !important;
}

.btn-del:hover {
    background: rgba(197, 48, 48, 0.06) !important;
}

/* ─── Modals ─────────────────────────────────────────── */

.modal-overlay {
    background: rgba(26, 26, 26, 0.55) !important;
}

.modal,
.camera-panel {
    background: var(--v-surface) !important;
    border: 2px solid var(--v-border) !important;
    border-radius: var(--v-radius-lg) !important;
    box-shadow: 0 24px 48px rgba(93, 58, 26, 0.12) !important;
}

.modal.diff-modal {
    width: min(96vw, 920px) !important;
    max-width: min(96vw, 920px) !important;
}

.diff-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--v-surface-raised);
    border: 1px solid var(--v-border-light);
    border-radius: var(--v-radius);
    font-size: var(--v-font-size-sm);
    color: var(--v-ink-muted);
}

.diff-meta span strong {
    color: var(--v-ink);
}

.diff-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.diff-panel {
    --diff-scrollbar-width: 0px;
    border: 1px solid var(--v-border-light);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    background: var(--v-surface);
    box-shadow: 0 1px 4px rgba(93, 58, 26, 0.06);
}

.diff-columns-headers {
    gap: 0;
    align-items: stretch;
    margin-right: var(--diff-scrollbar-width);
}

.diff-columns-headers .diff-col-header {
    border-bottom: 1px solid var(--v-border-light);
    border-radius: 0;
}

.diff-columns-headers .diff-col-header.before {
    border-right: 1px solid var(--v-border-light);
}

.diff-scroll-area {
    max-height: min(52vh, 480px);
    overflow-y: auto;
    overflow-x: hidden;
}

.diff-body-rows {
    display: flex;
    flex-direction: column;
}

.diff-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    border-bottom: 1px solid var(--v-border-light);
}

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

.diff-field-row .diff-field {
    border-bottom: none;
}

.diff-field-row .diff-field-before {
    border-right: 1px solid var(--v-border-light);
}

.diff-col {
    border: 1px solid var(--v-border-light);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    background: var(--v-surface);
    box-shadow: 0 1px 4px rgba(93, 58, 26, 0.06);
}

.diff-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: var(--v-font-size-sm);
    border-bottom: 1px solid var(--v-border-light);
}

.diff-col-header.before {
    background: rgba(197, 48, 48, 0.06);
    color: var(--v-error);
}

.diff-col-header.after {
    background: rgba(39, 103, 73, 0.06);
    color: var(--v-success);
}

.diff-fields {
    max-height: none;
    overflow: visible;
}

.diff-field {
    display: grid;
    grid-template-columns: minmax(88px, 38%) 1fr;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--v-border-light);
    font-size: var(--v-font-size-sm);
    align-items: start;
}

.diff-field:last-child {
    border-bottom: none;
}

.diff-field.diff-changed {
    background: var(--v-accent-soft);
}

.diff-label {
    color: var(--v-ink-muted);
    font-weight: 500;
}

.diff-value {
    color: var(--v-ink);
    word-break: break-word;
}

.diff-field.diff-changed .diff-value {
    font-weight: 600;
    color: var(--v-accent);
}

@media (max-width: 768px) {
    .diff-columns,
    .diff-columns-headers {
        grid-template-columns: 1fr;
    }

    .diff-columns-headers .diff-col-header.before {
        border-right: none;
    }

    .diff-field-row {
        grid-template-columns: 1fr;
    }

    .diff-field-row .diff-field-before {
        border-right: none;
        border-bottom: 1px solid var(--v-border-light);
    }
}

.camera-modal {
    background: rgba(26, 26, 26, 0.55) !important;
}

/* ─── Success / hints ────────────────────────────────── */

.success-msg {
    background: rgba(39, 103, 73, 0.06) !important;
    border: 1px dashed rgba(39, 103, 73, 0.35) !important;
    color: var(--v-success) !important;
    border-radius: var(--v-radius) !important;
}

.dept-only-hint {
    background: var(--v-surface-raised) !important;
    border: 1px dashed var(--v-border-soft) !important;
    border-left: 3px solid var(--v-border) !important;
    color: var(--v-ink-muted) !important;
}

.current-dept-display {
    background: var(--v-surface-raised) !important;
    border: 1px solid var(--v-border-soft) !important;
    color: var(--v-ink) !important;
}

.current-dept-display.empty {
    color: var(--v-ink-soft) !important;
}

.admin-link a {
    color: var(--v-accent) !important;
    font-size: var(--v-font-size-base) !important;
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: none !important;
    border-bottom: 1px dashed var(--v-border-soft);
}

.admin-link a:hover {
    border-bottom-color: var(--v-border);
}

/* ─── Sell panel ─────────────────────────────────────── */

.sell-item {
    background: var(--v-surface-raised) !important;
    border: 1px dashed var(--v-border-soft) !important;
    border-radius: var(--v-radius-sm) !important;
}

.sell-item.selected {
    border-color: var(--v-border) !important;
    background: var(--v-accent-soft) !important;
}

.sell-toolbar button {
    background: transparent !important;
    border: 1px solid var(--v-border-soft) !important;
    color: var(--v-ink-muted) !important;
    font-size: var(--v-font-size-base) !important;
    text-transform: none;
    letter-spacing: 0.01em;
}

.sell-toolbar button:hover {
    border-color: var(--v-border) !important;
    color: var(--v-accent) !important;
    background: var(--v-accent-soft) !important;
}

.sell-item-fields .form-row-sell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 10px;
    margin-top: 10px;
    align-items: start;
    width: 100%;
}

.sell-item-fields .form-group {
    margin-bottom: 0;
}

.sell-item-fields .form-group input {
    height: 42px;
}

@media (max-width: 768px) {
    .sell-item-fields .form-row-sell {
        grid-template-columns: 1fr;
    }

    .sell-item-fields .form-row-sell > .form-group {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* ─── Cost bars ──────────────────────────────────────── */

.cost-bar-fill {
    background: var(--v-accent-soft) !important;
}

.cost-bar-rank-1 .cost-bar-fill { background: rgba(93, 58, 26, 0.22) !important; }
.cost-bar-rank-2 .cost-bar-fill { background: rgba(93, 58, 26, 0.16) !important; }
.cost-bar-rank-3 .cost-bar-fill { background: rgba(93, 58, 26, 0.10) !important; }

.photo-thumb {
    border-color: var(--v-border-soft) !important;
}

.report-selector label {
    color: var(--v-ink-muted) !important;
    font-size: var(--v-font-size-base) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.actions button {
    font-size: var(--v-font-size-sm) !important;
}

.filters select,
.filters input,
.report-selector select {
    font-size: var(--v-font-size-base) !important;
}

/* ─── Admin login page ───────────────────────────────── */

body.login-page {
    min-height: 100vh;
    background: var(--v-canvas) !important;
}

body.login-page .site-header {
    position: relative;
    z-index: 1;
}

body.login-page .login-main {
    min-height: calc(100vh - 73px);
    align-items: center;
}