/* Factura-mi-aș design tokens -- the Android theme uses the same values (ui/theme/Color.kt) */

:root {
	--fac-primary: #2563eb;
	--fac-primary-hover: #1d4ed8;
	--fac-accent: #0ea5e9;
	--fac-page-bg: #f4f6fa;
	--fac-card-bg: #ffffff;
	--fac-text: #1e293b;
	--fac-text-muted: #64748b;
	--fac-border: #dfe4ec;
	--fac-navbar-bg: #ffffff;
	--fac-radius: 12px;
	--fac-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);

	--bs-primary: var(--fac-primary);
	--bs-primary-rgb: 37, 99, 235;
	--bs-link-color: var(--fac-primary);
	--bs-link-color-rgb: 37, 99, 235;
	--bs-link-hover-color: var(--fac-primary-hover);
	--bs-body-bg: var(--fac-page-bg);
	--bs-body-color: var(--fac-text);
	--bs-border-color: var(--fac-border);
	--bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-bs-theme="dark"] {
	--fac-page-bg: #0f172a;
	--fac-card-bg: #1e293b;
	--fac-text: #e2e8f0;
	--fac-text-muted: #94a3b8;
	--fac-border: #334155;
	--fac-navbar-bg: #111a2e;
	--fac-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);

	--bs-body-bg: var(--fac-page-bg);
	--bs-body-color: var(--fac-text);
	--bs-border-color: var(--fac-border);
	--bs-link-color: #60a5fa;
	--bs-link-hover-color: #93c5fd;
}

html, body { height: 100%; }
body { padding-top: 4.5rem; background-color: var(--fac-page-bg); color: var(--fac-text); }
main > .container, main > .container-fluid { padding: 20px 16px 40px; }

.navbar { background-color: var(--fac-navbar-bg); border-bottom: 1px solid var(--fac-border); box-shadow: var(--fac-shadow); padding: 0.6rem 1rem; }
.navbar-brand { font-weight: 800; display: flex; align-items: center; gap: 8px; color: var(--fac-text) !important; }
.navbar-brand i { color: var(--fac-primary); }
.navbar .nav-link { color: var(--fac-text-muted); border-radius: 8px; padding: 0.45rem 0.75rem; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--fac-primary); background-color: rgba(37, 99, 235, 0.08); }

.card { background-color: var(--fac-card-bg); border: 1px solid var(--fac-border); border-radius: var(--fac-radius); box-shadow: var(--fac-shadow); }
.card-header { background-color: transparent; border-bottom: 1px solid var(--fac-border); font-weight: 700; }
.modal-content { background-color: var(--fac-card-bg); border-radius: var(--fac-radius); }

.btn-primary { --bs-btn-bg: var(--fac-primary); --bs-btn-border-color: var(--fac-primary); --bs-btn-hover-bg: var(--fac-primary-hover); --bs-btn-hover-border-color: var(--fac-primary-hover); --bs-btn-active-bg: var(--fac-primary-hover); }
.btn, .form-control, .form-select { border-radius: 10px; }
.form-control, .form-select { background-color: var(--fac-card-bg); color: var(--fac-text); border-color: var(--fac-border); }
.form-control:focus, .form-select:focus { border-color: var(--fac-primary); box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15); }
.form-floating > label { color: var(--fac-text-muted); max-width: 100%; }
.form-text { color: var(--fac-text-muted); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--fac-text); }
.table > thead { --bs-table-bg: rgba(37, 99, 235, 0.08); --bs-table-color: var(--fac-text); }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: rgba(37, 99, 235, 0.06); }

.fac-table-header { padding: 0.5rem 0 1rem; font-size: 1.25rem; font-weight: 700; }
.fac-row-edit { cursor: pointer; color: var(--fac-primary); font-weight: 600; }
.fac-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 0.35rem 0.75rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; }
.fac-status-ok { background-color: rgba(22, 163, 74, 0.12); color: #15803d; }
.fac-status-off { background-color: rgba(100, 116, 139, 0.14); color: var(--fac-text-muted); }
.fac-status-warn { background-color: rgba(234, 179, 8, 0.15); color: #a16207; }
.fac-status-danger { background-color: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.fac-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.6rem; letter-spacing: 0.35em; font-weight: 700; }
.fac-recovery-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fac-qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
.is-invalid ~ .invalid-feedback { display: block; }
.toast { background-color: var(--fac-card-bg); color: var(--fac-text); }