:root {
    --portal-primary: #7b1f24;
    --portal-accent: #a32c33;
    --portal-bg: #f9ecec;
    --portal-text: #3c1317;
}
* { box-sizing: border-box; }
body.portal-body.staff-portal-body{margin:0;font-family:'Roboto',sans-serif;background:linear-gradient(170deg,#fdf0f0 0%,#f7e0e0 55%,#ffffff 100%);color:var(--portal-text);overflow-x:hidden;max-width:100vw}
.portal-shell { width: min(1080px, 92%); margin: 0 auto; }
.portal-topbar.staff-topbar {
    background: linear-gradient(120deg, var(--portal-primary), #61181b);
    border-bottom: 4px solid var(--portal-accent);
    padding: .75rem 0;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .15);
}
.portal-brand {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.portal-card {
    background: #fff;
    border: 1px solid rgba(123, 31, 36, .18);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(123, 31, 36, .08);
}
.portal-title {
    font-size: clamp(1.45rem, 2vw, 2rem);
    color: #5a1217;
    font-weight: 800;
}
.portal-subtitle { color: #6c2b31; font-size: .95rem; }
.portal-body .btn-primary {
    background: var(--portal-primary);
    border-color: var(--portal-primary);
}
.portal-body .btn-primary:hover {
    background: #63181c;
    border-color: #63181c;
}
.portal-body .btn-outline-primary {
    border-color: var(--portal-primary);
    color: var(--portal-primary);
}
.portal-body .btn-outline-primary:hover {
    background: var(--portal-primary);
    color: #fff;
}
.portal-badge {
    background: rgba(163, 44, 51, .18);
    color: #60131a;
    border: 1px solid rgba(163, 44, 51, .45);
    border-radius: 999px;
    padding: .25rem .65rem;
    font-size: .78rem;
    font-weight: 700;
}
.portal-body .form-control, .portal-body .form-select {
    border-radius: 10px;
    border: 1px solid rgba(60, 19, 23, .2);
}
.portal-body .form-control:focus, .portal-body .form-select:focus {
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 .2rem rgba(123, 31, 36, .16);
}

/* Mobile Responsive Styles for Staff Portal */
@media (max-width: 768px) {
    .portal-shell{width:100%;margin:0;padding:0 1rem}
    .portal-topbar.staff-topbar{padding:.5rem 1rem}
    .portal-brand{font-size:1rem}
    .portal-card{border-radius:10px;padding:1rem!important}
    .portal-title{font-size:1.3rem}
    .portal-subtitle{font-size:.85rem}
    .portal-badge{font-size:.7rem;padding:.2rem .5rem}
    .portal-body .form-control,.portal-body .form-select{font-size:1rem;padding:.75rem;border-radius:8px}
    .portal-body .btn{padding:.75rem 1rem;font-size:.9rem}
    .portal-body .btn-sm{padding:.5rem .75rem;font-size:.85rem}
    .portal-body .row>div{margin-bottom:1rem}
    .portal-body .table-responsive{margin:0 -1rem;padding:0 1rem}
    .portal-body table{font-size:.85rem}
    .portal-body table th,.portal-body table td{padding:.5rem .25rem}
    .portal-body .d-flex.flex-wrap{flex-direction:column;gap:1rem}
    .portal-body .modal-dialog{margin:.5rem;max-width:calc(100% - 1rem)}
    .portal-body .modal-body{padding:1rem}
}

@media (max-width: 575px) {
    .portal-shell{padding:0 .75rem}
    .portal-topbar.staff-topbar{padding:.5rem .75rem}
    .portal-brand{font-size:.9rem}
    .portal-card{border-radius:8px;padding:.75rem!important}
    .portal-title{font-size:1.1rem}
    .portal-body .form-control,.portal-body .form-select{font-size:.9rem;padding:.6rem;border-radius:6px}
    .portal-body .btn{padding:.6rem .75rem;font-size:.85rem}
    .portal-body table{font-size:.75rem}
    .portal-body table th,.portal-body table td{padding:.4rem .2rem}
}