/* Velana – design system on top of Bootstrap 5.3.
   Brand: flame of the logo (yellow → orange → red). Primary #C2410C (white text 5.2:1, WCAG AA). */
:root {
	--vl-primary: #c2410c;
	--vl-primary-hover: #9a3412;
	--vl-primary-soft: #fff1e8;
	--vl-flame: linear-gradient(135deg, #fbbf24 0%, #f97316 55%, #dc2626 100%);
	--vl-ink: #1f1d1b;
	--vl-bg: #f6f4f1;
	--vl-border: #e7e2dc;
	--vl-muted: #6b6560;
	--vl-radius: .75rem;
	--vl-shadow: 0 1px 2px rgba(31, 29, 27, .06), 0 1px 3px rgba(31, 29, 27, .08);
	--vl-shadow-lg: 0 10px 30px rgba(31, 29, 27, .12);

	--bs-primary: var(--vl-primary);
	--bs-primary-rgb: 194, 65, 12;
	--bs-primary-text-emphasis: var(--vl-primary-hover);
	--bs-primary-bg-subtle: var(--vl-primary-soft);
	--bs-primary-border-subtle: #fed7aa;
	--bs-link-color: var(--vl-primary);
	--bs-link-color-rgb: 194, 65, 12;
	--bs-link-hover-color: var(--vl-primary-hover);
	--bs-link-hover-color-rgb: 154, 52, 18;
	--bs-body-color: var(--vl-ink);
	--bs-body-bg: #ffffff; /* cards, inputs, dialogs; the page itself is --vl-bg (body below) */
	--bs-tertiary-bg: #fbfaf8;
	--bs-secondary-color: var(--vl-muted);
	--bs-border-color: var(--vl-border);
	--bs-border-radius: .5rem;
	--bs-border-radius-lg: var(--vl-radius);
	--bs-focus-ring-color: rgba(194, 65, 12, .3);
	--bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { background: var(--vl-bg); -webkit-font-smoothing: antialiased; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-weight: 650; letter-spacing: -.01em; }
a { text-underline-offset: .15em; }

/* buttons */
.btn { --bs-btn-font-weight: 550; border-radius: .55rem; }
.btn-primary {
	--bs-btn-bg: var(--vl-primary); --bs-btn-border-color: var(--vl-primary);
	--bs-btn-hover-bg: var(--vl-primary-hover); --bs-btn-hover-border-color: var(--vl-primary-hover);
	--bs-btn-active-bg: #7c2d12; --bs-btn-active-border-color: #7c2d12;
	--bs-btn-disabled-bg: var(--vl-primary); --bs-btn-disabled-border-color: var(--vl-primary);
	--bs-btn-focus-shadow-rgb: 194, 65, 12;
}
.btn-outline-primary {
	--bs-btn-color: var(--vl-primary); --bs-btn-border-color: #f4b38f;
	--bs-btn-hover-bg: var(--vl-primary-soft); --bs-btn-hover-color: var(--vl-primary-hover); --bs-btn-hover-border-color: var(--vl-primary);
	--bs-btn-active-bg: #ffe2cf; --bs-btn-active-color: var(--vl-primary-hover); --bs-btn-active-border-color: var(--vl-primary);
	--bs-btn-focus-shadow-rgb: 194, 65, 12;
}
.btn-outline-secondary { --bs-btn-color: #4a4541; --bs-btn-border-color: #d6cfc7; --bs-btn-hover-bg: #efebe6; --bs-btn-hover-color: var(--vl-ink); --bs-btn-hover-border-color: #c9c1b8; --bs-btn-active-bg: #e7e2dc; --bs-btn-active-color: var(--vl-ink); }
.btn-success { --bs-btn-bg: #15803d; --bs-btn-border-color: #15803d; --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; }

/* forms */
.form-control, .form-select { border-color: #d6cfc7; }
.form-control:focus, .form-select:focus { border-color: #f08a5d; box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .18); }
.form-check-input:checked { background-color: var(--vl-primary); border-color: var(--vl-primary); }
.form-label { font-weight: 550; font-size: .925rem; }

/* cards & tables */
.card { --bs-card-border-color: var(--vl-border); --bs-card-border-radius: var(--vl-radius); --bs-card-cap-bg: #fbfaf8; box-shadow: var(--vl-shadow); }
.card-header { font-weight: 600; }
.table { --bs-table-hover-bg: #faf6f2; }
.table > thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vl-muted); font-weight: 600; background: #fbfaf8; border-bottom-color: var(--vl-border); white-space: nowrap; }
.table > :not(caption) > * > * { padding-top: .7rem; padding-bottom: .7rem; }
.card > .table-responsive > .table > :not(caption) > tr > :first-child,
.card > .table > :not(caption) > tr > :first-child { padding-left: 1rem; }
.list-group { --bs-list-group-border-color: var(--vl-border); }
.badge { font-weight: 600; letter-spacing: .01em; }
.alert { border-radius: var(--vl-radius); border-width: 1px; }

/* ---------- top navigation ---------- */
.vl-nav { background: #1c1a19; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.vl-nav .navbar-brand { font-weight: 700; letter-spacing: -.01em; }
.vl-nav .navbar-brand img { filter: drop-shadow(0 0 6px rgba(249, 115, 22, .35)); }
.vl-nav .nav-link { white-space: nowrap; --bs-nav-link-color: #d6d0ca; --bs-nav-link-hover-color: #fff; font-weight: 550; border-radius: .5rem; padding: .55rem .8rem !important; display: flex; align-items: center; gap: .45rem; }
.vl-nav .nav-link .bi { font-size: 1.05rem; opacity: .85; }
.vl-nav .nav-link:hover { background: rgba(255, 255, 255, .06); }
.vl-nav .nav-link.active { color: #fff; background: rgba(249, 115, 22, .16); box-shadow: inset 0 -2px 0 #f97316; }
.vl-nav .navbar-toggler { border-color: rgba(255, 255, 255, .2); padding: .45rem .6rem; }
.vl-nav .vl-user { color: #d6d0ca; }
.vl-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--vl-flame); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
@media (max-width: 1199.98px) {
	.vl-nav .vl-user-box { border-top: 1px solid rgba(255, 255, 255, .12); }
	.vl-nav .navbar-collapse { padding: .5rem 0 .75rem; }
	.vl-nav .nav-link { padding: .8rem .9rem !important; font-size: 1.05rem; }
	.vl-nav .nav-link.active { box-shadow: inset 3px 0 0 #f97316; }
}
.vl-nav .dropdown-menu { --bs-dropdown-bg: #262321; --bs-dropdown-link-active-bg: rgba(249, 115, 22, .25); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .08); --bs-dropdown-item-padding-y: .6rem; border-color: rgba(255, 255, 255, .1); }
@media (max-width: 1199.98px) { .vl-nav .dropdown-menu { border: 0; box-shadow: none !important; background: transparent; padding-left: 1.5rem; } }
.vl-env { background: repeating-linear-gradient(-45deg, #b91c1c, #b91c1c 12px, #991b1b 12px, #991b1b 24px); }

/* ---------- page header ---------- */
.vl-page-header { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin-bottom: 1.25rem; }
.vl-page-header h1 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); }
.vl-page-header .vl-subtitle { color: var(--vl-muted); margin: .15rem 0 0; }
.vl-page-header .vl-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.vl-breadcrumb { font-size: .85rem; margin-bottom: .25rem; }
.vl-breadcrumb a { color: var(--vl-muted); text-decoration: none; }
.vl-breadcrumb a:hover { color: var(--vl-primary); }

/* ---------- dashboard ---------- */
.vl-hero { background: #1c1a19; color: #fff; border-radius: var(--vl-radius); padding: 1.5rem; position: relative; overflow: hidden; box-shadow: var(--vl-shadow-lg); }
.vl-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--vl-flame); opacity: .22; filter: blur(4px); }
.vl-hero .btn-primary, .vl-hero .vl-hero-secondary { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.3rem; --bs-btn-font-size: 1.1rem; }
.vl-stat { padding: 1rem 1.15rem; }
.vl-stat .vl-stat-label { color: var(--vl-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.vl-stat .vl-stat-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.vl-stat .bi { font-size: 1.35rem; color: var(--vl-primary); }

/* ---------- empty state ---------- */
.vl-empty { text-align: center; padding: 2.5rem 1rem; color: var(--vl-muted); }
.vl-empty .bi { font-size: 2.4rem; color: #d6cfc7; display: block; margin-bottom: .5rem; }

/* status pills */
.vl-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.vl-pill-warning { background: #fef3c7; color: #92400e; }
.vl-pill-muted { background: #efebe6; color: #57534e; }
.vl-pill-success { background: #dcfce7; color: #166534; }

/* sticky action bar (delivery note form on phones / tablets) */
@media (min-width: 576px) { .w-sm-auto { width: auto !important; } }
.vl-sticky-actions { position: sticky; bottom: 0; z-index: 1020; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-top: 1px solid var(--vl-border); box-shadow: 0 -6px 20px rgba(31, 29, 27, .08); margin: 0 calc(-.5 * var(--bs-gutter-x, 1.5rem)); padding: .75rem calc(.5 * var(--bs-gutter-x, 1.5rem)); }

/* sign in */
.vl-auth { min-height: 100vh; background: radial-gradient(circle at 15% 10%, rgba(249, 115, 22, .18), transparent 40%), radial-gradient(circle at 85% 90%, rgba(220, 38, 38, .12), transparent 45%), #1c1a19; }
.vl-auth .card { border: 0; box-shadow: var(--vl-shadow-lg); }

/* touch devices: bigger tap targets */
@media (pointer: coarse) {
	.btn-sm { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .75rem; }
	.form-control-sm, .form-select-sm { min-height: 2.6rem; }
}