:root {
    --fd-primary: #4f46e5;
    --fd-primary-rgb: 79, 70, 229;
    --fd-sidebar: #111827;
    --fd-sidebar-hover: #1f2937;
    --fd-bg: #f4f6fb;
    --fd-card-border: #e7eaf3;
    --bs-primary: var(--fd-primary);
    --bs-primary-rgb: var(--fd-primary-rgb);
    --bs-link-color: var(--fd-primary);
    --bs-link-color-rgb: var(--fd-primary-rgb);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: .925rem;
    --sidebar-w: 248px;
}

body { background: var(--fd-bg); color: #1f2937; }

.btn-primary { --bs-btn-bg: var(--fd-primary); --bs-btn-border-color: var(--fd-primary); --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-bg: #3730a3; }
.btn-outline-primary { --bs-btn-color: var(--fd-primary); --bs-btn-border-color: var(--fd-primary); --bs-btn-hover-bg: var(--fd-primary); --bs-btn-hover-border-color: var(--fd-primary); }
.text-bg-primary { background-color: var(--fd-primary) !important; }
.pagination { --bs-pagination-active-bg: var(--fd-primary); --bs-pagination-active-border-color: var(--fd-primary); --bs-pagination-color: var(--fd-primary); }
.form-control:focus, .form-select:focus { border-color: #a5b4fc; box-shadow: 0 0 0 .2rem rgba(var(--fd-primary-rgb), .15); }

/* Sidebar */
.sidebar { background: var(--fd-sidebar) !important; color: #cbd5e1; display: flex !important; flex-direction: column; }
@media (min-width: 992px) {
    .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1030; }
    .main { margin-left: var(--sidebar-w); }
}
@media (max-width: 991.98px) { .sidebar { --bs-offcanvas-width: 270px; --bs-offcanvas-bg: var(--fd-sidebar); } }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem 1rem; color: #fff; }
.sidebar-brand small { color: #94a3b8; }
.brand-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #6366f1, #8b5cf6); font-size: 1.15rem; }
.sidebar-nav { padding: .5rem .75rem; flex: 1; overflow-y: auto; }
.sidebar-nav a { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; margin-bottom: 2px; border-radius: 8px; color: #cbd5e1; text-decoration: none; font-weight: 500; }
.sidebar-nav a i { font-size: 1.05rem; opacity: .85; }
.sidebar-nav a:hover { background: var(--fd-sidebar-hover); color: #fff; }
.sidebar-nav a.active { background: rgba(99, 102, 241, .18); color: #fff; box-shadow: inset 3px 0 0 #818cf8; }
.sidebar-user { display: flex; align-items: center; padding: 1rem 1.25rem; border-top: 1px solid #1f2937; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #374151; color: #fff; display: grid; place-items: center; font-weight: 600; }

/* Topbar / content */
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: .9rem 1.75rem; background: rgba(244, 246, 251, .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--fd-card-border); }
.page-title { font-size: 1.25rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content { padding: 1.5rem 1.75rem 3rem; }
@media (max-width: 575.98px) { .content, .topbar { padding-left: 1rem; padding-right: 1rem; } }

/* Cards */
.card { border: 1px solid var(--fd-card-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: transparent; border-bottom: 1px solid var(--fd-card-border); padding: 1rem 1.25rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.card-body { padding: 1.25rem; }
.stat-card { padding: 1.1rem 1.25rem; display: flex; flex-direction: row; gap: 1rem; align-items: center; height: 100%; }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: #6b7280; font-size: .82rem; }
.bg-soft-primary { background: #eef2ff; color: #4f46e5; }
.bg-soft-success { background: #ecfdf5; color: #059669; }
.bg-soft-warning { background: #fffbeb; color: #d97706; }
.bg-soft-danger { background: #fef2f2; color: #dc2626; }
.bg-soft-info { background: #ecfeff; color: #0891b2; }

/* Tables */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; font-weight: 600; border-bottom-width: 1px; white-space: nowrap; background: #f9fafb; }
.table > :not(caption) > * > * { padding: .7rem .9rem; border-color: #eef0f5; }
.row-reverted td { opacity: .5; }
.row-reverted td:nth-child(n+3) { text-decoration: line-through; }
.plate { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; padding: .1rem .45rem; color: #111827; text-decoration: none; white-space: nowrap; }
a.plate:hover { border-color: #a5b4fc; color: var(--fd-primary); }

/* Category tree */
.tree-node { border-bottom: 1px solid #eef0f5; }
.tree-row { display: flex; align-items: center; gap: .6rem; padding: .65rem 1.25rem; }
.tree-row:hover { background: #fafbff; }
.tree-children { display: none; }
.tree-node.open > .tree-children { display: block; }
.tree-toggle { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 6px; color: #6b7280; display: grid; place-items: center; flex-shrink: 0; transition: transform .15s; }
.tree-toggle:hover { background: #eef2ff; }
.tree-node.open > .tree-row .tree-toggle { transform: rotate(90deg); }
.tree-spacer { width: 26px; flex-shrink: 0; display: grid; place-items: center; color: #d1d5db; }
.tree-name { font-weight: 500; color: #111827; text-decoration: none; }
.tree-name:hover { color: var(--fd-primary); }
.tree-node[data-depth="0"] > .tree-row .tree-name { font-weight: 600; }
.qty-pill { display: inline-flex; align-items: baseline; gap: .25rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: #f3f4f6; min-width: 3rem; justify-content: center; }
.qty-pill.low { background: #fef2f2; color: #b91c1c; }
.qty-pill.zero { background: #f9fafb; color: #9ca3af; }
.qty-total { font-size: .8rem; color: #6b7280; white-space: nowrap; }
.tree-actions { opacity: .55; transition: opacity .15s; }
.tree-row:hover .tree-actions { opacity: 1; }
@media (max-width: 767.98px) { .tree-actions { opacity: 1; } .tree-row { padding: .6rem .75rem; flex-wrap: wrap; } }

/* Misc */
.empty-state { text-align: center; padding: 3rem 1rem; color: #9ca3af; }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.filter-bar { background: #fff; border: 1px solid var(--fd-card-border); border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.filter-bar .form-label { font-size: .75rem; color: #6b7280; margin-bottom: .25rem; font-weight: 500; }
.preset-btns .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8rem; }
.change-row + .change-row { margin-top: .5rem; }
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0 !important; }
.ts-control { border-radius: var(--bs-border-radius); min-height: 38px; }
.chart-box { position: relative; height: 300px; }
.bar-inline { height: 6px; border-radius: 3px; background: #e0e7ff; overflow: hidden; min-width: 60px; }
.bar-inline > span { display: block; height: 100%; background: var(--fd-primary); }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(1200px 600px at 10% -10%, #e0e7ff 0, transparent 60%), radial-gradient(900px 500px at 110% 110%, #ede9fe 0, transparent 60%), var(--fd-bg); }
.login-card { width: 100%; max-width: 400px; }