:root {
  --burgundy: #7B2030;
  --accent: #1D4D66;
  --gold: #C4A35A;
  --gold-hover: #B08D3E;
  --brand: #7B2030;
  --brand-dark: #5C1825;
  --brand-light: #F9E8EB;
}

body { background: #f0f2f5; font-family: 'Open Sans', sans-serif; }

/* ---- Navbar ---- */
.navbar { box-shadow: 0 2px 4px rgba(0,0,0,0.1); background: linear-gradient(135deg, #4A1520 0%, #7B2030 40%, #5C1825 100%) !important; }
.navbar-brand { font-weight: 700; letter-spacing: 0.5px; }

/* ---- Cards ---- */
.card { border: none; border-radius: 12px; }
.card-header { background: white; border-bottom: 1px solid #eee; padding: 16px 20px; }

/* ---- Tables ---- */
.table th { font-size: 13px; text-transform: uppercase; color: #666; font-weight: 600; letter-spacing: 0.5px; }
.table-hover tbody tr:hover { background: var(--brand-light); }

/* ---- Forms ---- */
.form-label { font-weight: 500; color: #555; }
.form-control:focus { border-color: var(--burgundy); box-shadow: 0 0 0 0.2rem rgba(123,32,48,0.25); }

/* ---- Badges & Progress ---- */
.badge { font-weight: 500; padding: 6px 10px; }
.progress { border-radius: 10px; }
.progress-bar { border-radius: 10px; }
.alert { border-radius: 10px; }

/* ---- Buttons ---- */
.btn-primary { background: var(--burgundy) !important; border-color: var(--burgundy) !important; }
.btn-primary:hover { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }
.btn-outline-primary { color: var(--burgundy) !important; border-color: var(--burgundy) !important; }
.btn-outline-primary:hover { background: var(--burgundy) !important; color: white !important; }
.btn-success { background: #198754 !important; }

/* ---- Login Page (ID Velora) ---- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4A1520 0%, #7B2030 40%, #5C1825 100%);
}

.login-card {
    width: 100%;
    max-width: 440px;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

.login-card .card-body {
    padding: 2.5rem;
}

.login-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.login-brand p {
    color: #6c757d;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}