:root {
    --xp-primary: #2563eb;
    --xp-primary-hover: #1d4ed8;
    --xp-dark: #1e293b;
    --xp-dark-2: #334155;
    --xp-bg: #f8fafc;
    --xp-surface: #ffffff;
    --xp-border: #e2e8f0;
    --xp-text-main: #0f172a;
    --xp-text-muted: #64748b;
    --xp-shadow-sm: 0 1px 3px rgba(0,0,0,.05);
    --xp-shadow-md: 0 8px 20px rgba(15,23,42,.08);
    --xp-transition: all .2s cubic-bezier(.4,0,.2,1);
}

body { margin: 0; min-height: 100vh; background: var(--xp-bg); color: var(--xp-text-main); font-family: system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing: antialiased; }
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at top right,#e0e7ff 0%,#f8fafc 50%,#f1f5f9 100%); }
.login-card { width: 100%; max-width: 420px; border-radius: 1.25rem; background: var(--xp-surface); border: 1px solid var(--xp-border); box-shadow: 0 20px 25px -5px rgba(0,0,0,.08); padding: 2.25rem; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 270px; min-width: 270px; min-height: 100vh; padding: 1.5rem 1rem; display: flex; flex-direction: column; background: var(--xp-dark); color: #f8fafc; box-shadow: 2px 0 10px rgba(0,0,0,.05); }
.brand { display: flex; align-items: center; gap: .75rem; font-size: 1.25rem; font-weight: 700; padding: 0 .5rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.current-user { margin: 1.25rem 0; padding: .85rem 1rem; border-radius: .75rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: .875rem; display: flex; align-items: center; gap: .75rem; }
.sidebar .nav-link { border: 0; width: 100%; text-align: left; padding: .8rem 1rem; margin-bottom: .25rem; border-radius: .6rem; color: #94a3b8; background: transparent; font-size: .95rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: .5rem; transition: var(--xp-transition); border-left: 3px solid transparent; }
.sidebar .nav-link:hover { color: #fff; background: var(--xp-dark-2); }
.sidebar .nav-link.active { color: #fff; background: var(--xp-dark-2); border-left-color: var(--xp-primary); font-weight: 600; }
.sidebar .nav-link:disabled { opacity: .45; cursor: not-allowed; }
.sidebar .nav-link i { width: 1.5rem; font-size: 1.1rem; text-align: center; }
.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 68px; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; background: var(--xp-surface); border-bottom: 1px solid var(--xp-border); box-shadow: var(--xp-shadow-sm); }
.content-area { padding: 2rem; flex: 1; }
.metric-card,.policy-card { background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: 1rem; box-shadow: var(--xp-shadow-sm); transition: var(--xp-transition); }
.metric-card:hover,.policy-card:hover { box-shadow: var(--xp-shadow-md); transform: translateY(-2px); }
.policy-card { height: 100%; }
.form-control,.form-select { border-color: var(--xp-border); }
.form-control:focus,.form-select:focus { border-color: #93c5fd; box-shadow: 0 0 0 .2rem rgba(37,99,235,.12); }
.btn-primary { background: var(--xp-primary); border-color: var(--xp-primary); }
.btn-primary:hover { background: var(--xp-primary-hover); border-color: var(--xp-primary-hover); }
.table > :not(caption) > * > * { padding: .85rem; }
.alert { border-radius: .8rem; }

@media (max-width: 800px) {
    .app-shell { display: block; }
    .sidebar { width: 100%; min-width: 100%; min-height: auto; padding: 1rem; }
    .topbar { padding: 0 1rem; }
    .content-area { padding: 1rem; }
}