:root {
    --umt-primary: #0A3D91;
    --umt-primary-dark: #072C6B;
    --umt-primary-light: #1E56C0;
    --umt-accent: #F4C300;
    --umt-accent-text: #5A4A00;
    --umt-support: #1E9E3E;
    --umt-bg: #F4F6FA;
    --umt-surface: #FFFFFF;
    --umt-text: #1F2937;
    --umt-muted: #6B7280;
    --umt-border: #E2E6EF;
}

body {
    background: var(--umt-bg);
    color: var(--umt-text);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ===== Sidebar ===== */
.umt-sidebar {
    background: var(--umt-primary);
    width: 248px;
    min-height: 100vh;
    position: fixed;
    top: 0; left: 0;
    color: #DCE7F7;
    display: flex;
    flex-direction: column;
}
.umt-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.umt-brand .umt-logo {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; color: var(--umt-primary);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--umt-accent); flex-shrink: 0;
}
.umt-brand b { color: #fff; font-weight: 500; line-height: 1.1; }
.umt-brand small { color: #AFC3E8; font-size: .72rem; }
.umt-nav { padding: 10px 0; flex: 1; }
.umt-nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 18px; color: #C8D6EF; text-decoration: none;
    font-size: .9rem;
}
.umt-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.umt-nav a.active { background: var(--umt-accent); color: var(--umt-accent-text); font-weight: 500; }
.umt-nav a i { font-size: 1.1rem; }

/* ===== Topbar & content ===== */
.umt-main { margin-left: 248px; }
.umt-topbar {
    background: #fff; border-bottom: 1px solid var(--umt-border);
    padding: 12px 22px; display: flex; align-items: center;
}
.umt-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--umt-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 500;
}
.umt-content { padding: 22px; }

/* ===== Components ===== */
.umt-card { background: #fff; border: 1px solid var(--umt-border); border-radius: 12px; }
.umt-stat .label { font-size: .78rem; color: var(--umt-muted); }
.umt-stat .value { font-size: 1.5rem; font-weight: 500; color: var(--umt-primary); }

.btn-umt { background: var(--umt-primary); border-color: var(--umt-primary); color: #fff; }
.btn-umt:hover { background: var(--umt-primary-dark); border-color: var(--umt-primary-dark); color: #fff; }
.btn-accent { background: var(--umt-accent); border-color: var(--umt-accent); color: var(--umt-accent-text); font-weight: 500; }
.btn-accent:hover { background: #d9ad00; border-color: #d9ad00; color: var(--umt-accent-text); }
.text-umt { color: var(--umt-primary) !important; }
.req { color: #D92D20; }

/* ===== Login ===== */
.umt-login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--umt-primary-dark); padding: 20px;
}
.umt-login-card { background: #fff; border-radius: 14px; width: 100%; max-width: 400px; padding: 30px; }
.umt-login-logo {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
    background: var(--umt-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--umt-accent); font-size: 1.6rem;
}