:root {
    color-scheme: light;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #172033;
    --muted: #64748b;
    --border: #dce2ea;
    --primary: #2855d9;
    --primary-dark: #1e40af;
    --danger: #b42318;
    --success: #067647;
    --sidebar: #121a2b;
    --sidebar-muted: #9da9bc;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    width: 238px;
    flex-direction: column;
    padding: 28px 18px 20px;
    background: var(--sidebar);
    color: white;
}
/* K-Utilități logo: dark-blue artwork on white, shown on a white plate over the dark sidebar. */
.brand { display: block; margin: 0 4px 24px; padding: 8px 10px; border-radius: 10px; background: white; line-height: 0; }
.brand:hover { text-decoration: none; }
.brand img { display: block; width: 100%; height: auto; }
.brand-logo { margin: 0; line-height: 0; }
.brand-logo img { display: block; width: min(260px, 100%); height: auto; }
.sidebar nav { display: grid; gap: 5px; }
.nav-link { border-radius: 8px; color: var(--sidebar-muted); padding: 10px 12px; font-weight: 600; }
.nav-link:hover, .nav-link.active { background: #26324b; color: white; text-decoration: none; }
.sidebar-footer { margin-top: auto; border-top: 1px solid #2c374c; padding: 18px 12px 0; color: var(--sidebar-muted); }
.sidebar-footer form { margin-top: 5px; }
.logout-button { min-height: 0; border: 0; background: transparent; color: #ccd6e8; padding: 0; font-weight: 500; }
.logout-button:hover { background: transparent; color: white; text-decoration: underline; }

.main-content { width: calc(100% - 238px); margin-left: 238px; padding: 34px clamp(22px, 4vw, 58px); }
.page-header { margin-bottom: 24px; }
.page-header h1 { margin: 0 0 6px; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.025em; }
.page-header p { margin: 0; color: var(--muted); }
.page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.button-row, .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 0 0 24px; }
.card, .panel { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgb(15 23 42 / 4%); }
.card { display: grid; gap: 10px; padding: 20px; }
.card span { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .035em; }
.card strong { font-size: 23px; }
.panel { margin-bottom: 20px; padding: 22px; overflow-x: auto; }
.nested-panel { background: var(--surface-soft); box-shadow: none; }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-items: end; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.form-grid-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.form-section { display: grid; align-content: start; gap: 14px; }
.form-section h2, .panel h2 { margin: 0 0 4px; font-size: 18px; }
.form-section-full, .form-actions { grid-column: 1 / -1; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label { display: grid; gap: 6px; color: #344054; font-size: 13px; font-weight: 650; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    color: var(--text);
    padding: 9px 11px;
}
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgb(40 85 217 / 14%); border-color: var(--primary); }
.checkbox-label { display: flex; align-items: center; gap: 9px; }
.checkbox-label input { width: auto; }

button, .btn, .btn-secondary {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 700;
}
button, .btn { background: var(--primary); color: white; }
button:hover, .btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn-secondary { border-color: #cbd5e1; background: white; color: #344054; }
.btn-secondary:hover { background: #f1f5f9; text-decoration: none; }

.table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.table th, .table td { border-bottom: 1px solid var(--border); padding: 12px 10px; text-align: left; vertical-align: top; }
.table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .035em; }
.table tr:last-child td { border-bottom: 0; }
.table .actions { text-align: right; }
.table td.actions a { margin-left: 10px; }
.badge { display: inline-flex; border-radius: 99px; background: #e8efff; color: #2949a5; padding: 4px 9px; font-size: 12px; font-weight: 700; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px 30px; }
.details dl, .details p { margin: 0; }

.alert { margin: 0 0 18px; border: 1px solid #b9cffd; border-radius: 9px; background: #eef4ff; padding: 12px 14px; }
.alert-error { border-color: #f7b9b5; background: #fff1f0; color: var(--danger); }
.alert-success { border-color: #a6e3c8; background: #ecfdf3; color: var(--success); }
.muted, .muted-small { color: var(--muted); }
.muted-small { font-size: 12px; }
.invoice-lines { display: grid; gap: 16px; }
.invoice-line-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 16px; }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; background: radial-gradient(circle at top left, #e8efff, var(--bg) 45%); }
.login-card { width: min(410px, 100%); border: 1px solid var(--border); border-radius: 16px; background: white; padding: 32px; box-shadow: 0 22px 60px rgb(15 23 42 / 12%); }
.login-card h1 { margin: 0; }
.login-card form { display: grid; gap: 16px; margin-top: 24px; }
.empty-state { margin: 10vh auto 0; max-width: 560px; text-align: center; }
.status-code { color: var(--primary); font-size: 64px; font-weight: 800; letter-spacing: -.05em; }
.empty-state h1 { margin: 5px 0; }
.empty-state p { margin: 0 0 24px; color: var(--muted); }

@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: static; width: 100%; padding: 16px; }
    .sidebar nav { grid-template-columns: repeat(5, minmax(max-content, 1fr)); overflow-x: auto; }
    .brand { max-width: 220px; margin-bottom: 12px; }
    .sidebar-footer { display: none; }
    .main-content { width: 100%; margin-left: 0; padding: 24px 16px; }
    .form-grid, .two-columns { grid-template-columns: 1fr; }
    .page-header-row { flex-direction: column; }
}