/**
 * Compact Theme - Reduces spacing and font sizes by ~30%
 * Apply this stylesheet to make the UI more dense and reduce scrolling
 */

:root {
    /* Compact Spacing (30% smaller) */
    --space-xs: 0.18rem;   /* was 0.25rem */
    --space-sm: 0.35rem;   /* was 0.5rem */
    --space-md: 0.7rem;    /* was 1rem */
    --space-lg: 1rem;      /* was 1.5rem */
    --space-xl: 1.4rem;    /* was 2rem */
    --space-2xl: 2rem;     /* was 3rem */

    /* Compact Typography (30% smaller) */
    --font-size-sm: 0.75rem;   /* was 0.875rem */
    --font-size-base: 0.875rem; /* was 1rem */
    --font-size-lg: 0.95rem;   /* was 1.125rem */
    --font-size-xl: 1rem;      /* was 1.25rem */
    --font-size-2xl: 1.2rem;   /* was 1.5rem */
    --font-size-3xl: 1.5rem;   /* was 2rem */
}

/* Compact Heading Hierarchy (maintain Option A proportions at 30% smaller) */
h1 {
    font-size: 1.4rem; /* was 2rem (30% smaller) */
}

h2 {
    font-size: 0.875rem; /* was 1.25rem (30% smaller) */
}

h3 {
    font-size: 0.7rem; /* was 1rem (30% smaller) */
}

/* Reduce line height for denser text */
body {
    line-height: 1.4; /* was 1.6 */
}

/* Compact navigation */
.top-nav {
    padding: var(--space-sm) var(--space-lg);
}

.nav-brand {
    font-size: var(--font-size-base);
}

.nav-logo {
    font-size: var(--font-size-lg);
}

.nav-link {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

/* Compact month navigator */
.month-navigator {
    padding: var(--space-md) var(--space-lg);
}

.month-display {
    font-size: var(--font-size-xl);
}

.month-nav-btn {
    width: 30px;
    height: 30px;
    font-size: var(--font-size-lg);
}

/* Compact dashboard grid */
.dashboard-container {
    grid-template-columns: 250px 1fr; /* was 300px 1fr */
    gap: var(--space-lg);
    padding: var(--space-lg);
}

/* Compact checklist */
.checklist-section,
.upload-area {
    padding: var(--space-md);
}

/* Heading typography is unified in css/header.css */

.checklist-item label {
    font-size: var(--font-size-sm);
}

.checklist-checkbox {
    width: 16px;
    height: 16px;
}

/* Compact dropzone */
.dropzone-label {
    padding: var(--space-lg);
}

.dropzone-icon {
    font-size: var(--font-size-2xl);
}

.dropzone-text {
    font-size: var(--font-size-sm);
}

.dropzone-subtext {
    font-size: 0.7rem;
}

/* Compact filter bar */
.filter-select {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.75rem;
    min-width: 100px;
}

.search-input {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

/* Compact invoice table */
.invoice-table-container {
    padding: var(--space-md);
}

.invoice-table th {
    padding: var(--space-sm);
    font-size: 0.7rem;
}

.invoice-table td {
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
}

.invoice-table .status-badge {
    padding: 2px var(--space-xs);
    font-size: 0.7rem;
}

/* Compact invoice cards (for mobile/old views) */
.invoice-card {
    padding: var(--space-md);
}

.invoice-title {
    font-size: var(--font-size-base);
}

.invoice-status {
    padding: 2px var(--space-xs);
    font-size: 0.7rem;
}

.invoice-field-label {
    font-size: 0.7rem;
}

.invoice-field-value {
    font-size: var(--font-size-sm);
}

/* Compact correction view */
.correction-container {
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-label {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-xs);
}

.form-control {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

/* Compact buttons */
.btn,
.upload-btn,
.nav-icon-btn {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
}

/* Compact output tables */
.output-table th {
    padding: var(--space-sm);
    font-size: 0.7rem;
}

.output-table td {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

/* Compact vendor table */
.vendors-table th {
    padding: var(--space-sm);
    font-size: 0.7rem;
}

.vendors-table td {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

/* Compact modals */
.modal-content {
    padding: var(--space-lg);
}

/* Heading typography is unified in css/header.css */

/* Compact notifications */
.notification {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
}

/* Compact sections */
.upload-section,
.data-section {
    padding: var(--space-lg);
}

/* Heading typography is unified in css/header.css */

/* Reduce container max-width for less horizontal space */
.container {
    max-width: 1100px; /* was 1200px */
    padding: var(--space-md);
}

/* Compact avatar */
.nav-avatar {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-base);
}