:root {
    --brand: #2f6f4f;
    --brand-dark: #234f38;
    --bg-soft: #f5f7f6;
}

body {
    background: var(--bg-soft);
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- LOGIN ---------- */
.login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}
.login-card { width: 100%; max-width: 380px; border-radius: 16px; }
.login-logo { font-size: 2.5rem; }

/* ---------- LAYOUT ---------- */
.app-wrapper { display: flex; min-height: 100vh; }

/* NOTE: Styling .sidebar (termasuk versi mobile/off-canvas-nya)
   sekarang full di-handle oleh <style> inline di sidebar.php,
   supaya gak ada 2 definisi .sidebar yang beda logika (transform
   vs left-offset) saling tabrakan. Jangan tambahin rule .sidebar
   di sini lagi. */

.app-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    background: #fff;
    padding: .7rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;
}
.app-main { padding: 1.5rem; flex: 1; }
.app-footer { background: #fff; border-top: 1px solid #e5e7eb; }

.avatar-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
}

/* ---------- CARDS / STATS ---------- */
.stat-card {
    border-radius: 14px;
    border: 0;
    color: #fff;
    padding: 1.2rem;
}
.stat-card .stat-icon { font-size: 1.8rem; opacity: .85; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; }
.bg-grad-1 { background: linear-gradient(135deg,#2f6f4f,#59a37a); }
.bg-grad-2 { background: linear-gradient(135deg,#1d5fa1,#4c9be0); }
.bg-grad-3 { background: linear-gradient(135deg,#c0392b,#e6684f); }
.bg-grad-4 { background: linear-gradient(135deg,#a4720f,#e2ac3c); }

.card { border-radius: 12px; border: 1px solid #eef0ef; }
.table thead th { font-size: .78rem; text-transform: uppercase; color: #6b7280; border-bottom-width: 1px; }
.badge-stock-low { background: #fdecea; color: #c0392b; }
.badge-stock-ok { background: #eaf7ef; color: #1e7e46; }

.menu-card-img {
    height: 110px;
    background: #eef2f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    border-radius: 10px 10px 0 0;
}