:root {
--primary: #0f172a;
--sidebar: #1e293b;
--active: #38bdf8;
--page-bg: #f1f5f9;
--card-bg: #ffffff;
--green: #22c55e;
--teal: #14b8a6;
--line: #dbe3ef;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
background: var(--page-bg);
color: var(--primary);
}

#app {
display: flex;
min-height: 100vh;
}

.sidebar {
width: 240px;
background: var(--sidebar);
color: #d7e2ef;
padding: 18px 14px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
}

.brand {
font-weight: 700;
font-size: 22px;
}

.brand-sub {
font-size: 12px;
color: #9eb3c9;
margin-top: 4px;
}

.sidebar-nav {
margin-top: 18px;
overflow: auto;
padding-right: 4px;
}

.sidebar-link,
.sidebar-sublink {
display: block;
text-decoration: none;
color: #d7e2ef;
padding: 9px 10px;
border-radius: 8px;
font-size: 14px;
margin-bottom: 4px;
}

.sidebar-link.active,
.sidebar-sublink:hover,
.sidebar-link:hover {
background: rgba(56, 189, 248, 0.2);
color: #e8f7ff;
}

.sidebar-group {
margin-bottom: 8px;
}

.sidebar-group-title {
font-size: 12px;
color: #95aac0;
padding: 8px 10px 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
}

.sidebar-profile {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid #334155;
}

.profile-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--active);
color: #0b1726;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}

.profile-meta {
margin: 10px 0;
font-size: 13px;
}

.role-badge {
display: inline-block;
margin-top: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}

.role-admin {
background: #ede9fe;
color: #5b21b6;
}

.role-staff {
background: #e1f5ee;
color: #085041;
}

.profile-link {
display: block;
color: #9ddaf9;
text-decoration: none;
font-size: 13px;
margin-bottom: 8px;
}

.danger-btn {
background: #ef4444;
color: #fff;
border: 0;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
}

.page-wrap {
margin-left: 240px;
width: calc(100% - 240px);
padding: 18px;
}

.page-topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

.page-topbar h1 {
margin: 0;
font-size: 28px;
}

.muted {
color: #64748b;
font-size: 13px;
}

.top-actions {
display: flex;
gap: 8px;
align-items: center;
}

.top-user {
font-size: 14px;
font-weight: 600;
}

.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
border: 1px solid var(--line);
padding: 16px;
margin-bottom: 14px;
}

.kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

.kpi-card {
padding: 14px;
border-radius: 12px;
color: #fff;
cursor: pointer;
}

.kpi-blue {
background: #2563eb;
}

.kpi-amber {
background: #d97706;
}

.kpi-green {
background: #16a34a;
}

.kpi-teal {
background: #0d9488;
}

.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.summary-card {
border-left: 6px solid #16a34a;
}

.summary-card.teal {
border-left-color: #0d9488;
}

.summary-card.blue {
border-left-color: #2563eb;
}

form.inline {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

input,
select,
button,
textarea {
font: inherit;
}

input,
select,
textarea {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #fff;
}

button {
background: var(--teal);
border: 0;
padding: 9px 12px;
border-radius: 8px;
color: #fff;
cursor: pointer;
}

.secondary {
background: #e2e8f0;
color: #334155;
}

table {
width: 100%;
border-collapse: collapse;
}

th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #eef2f7;
font-size: 14px;
}

th {
color: #475569;
}

.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}

.status-DRAFT { background: #e2e8f0; color: #475569; }
.status-WAITING { background: #fef3c7; color: #92400e; }
.status-READY { background: #dbeafe; color: #1e40af; }
.status-DONE { background: #dcfce7; color: #166534; }
.status-CANCELLED { background: #fee2e2; color: #991b1b; }
.status-IN { background: #dcfce7; color: #166534; }
.status-OUT { background: #fee2e2; color: #991b1b; }
.status-TRANSFER { background: #dbeafe; color: #1e40af; }
.status-ADJUSTMENT { background: #fef3c7; color: #92400e; }
.stock-ok { background: #dcfce7; color: #166534; }
.stock-low { background: #fef3c7; color: #92400e; }
.stock-out { background: #fee2e2; color: #991b1b; }

#loading {
text-align: center;
padding: 20px;
color: #64748b;
}

#error {
display: none;
color: #dc2626;
padding: 16px;
background: #fee2e2;
border-radius: 8px;
margin: 16px 0;
}

.profile-modal::backdrop {
background: rgba(2, 6, 23, 0.45);
}

.inline-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}

.login-page {
min-height: 100vh;
display: grid;
place-items: center;
background: linear-gradient(140deg, #dcfce7 0%, #f1f5f9 60%);
}

.login-card {
width: 100%;
max-width: 460px;
background: #fff;
padding: 24px;
border-radius: 14px;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.login-brand {
font-size: 32px;
font-weight: 700;
margin: 0 0 8px;
}

.text-danger {
color: #dc2626;
}

.text-success {
color: #166534;
}

@media (max-width: 980px) {
.sidebar {
position: static;
width: 100%;
height: auto;
}

.page-wrap {
margin-left: 0;
width: 100%;
}

#app {
flex-direction: column;
}

.kpi-grid {
grid-template-columns: 1fr 1fr;
}

.grid-2,
.grid-3 {
grid-template-columns: 1fr;
}
}