/* =========================================================
   AL AMAANAH PROJECT — PORTAL / ADMIN THEME
   Palette:
   #c8b7a7  Beige
   #3b102b  Primary Maroon
   #fffcf0  Ivory
   #421432  Dark Maroon
========================================================= */

/* =========================================================
   AL AMAANAH PROJECT — PORTAL / ADMIN THEME
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
    --beige:#c8b7a7;
    --maroon:#3b102b;
    --ivory:#fffcf0;
    --dark-maroon:#421432;

    --green:#3b102b;
    --green2:#421432;
    --gold:#c8b7a7;
    --ink:#421432;
    --muted:#3b102b;
    --bg:#fffcf0;
    --card:#fffcf0;
    --border:#c8b7a7;
}

/* =========================================================
   POPPINS — GLOBAL
========================================================= */

html,
body,
button,
input,
select,
textarea,
table,
th,
td,
a,
label,
.nav-link,
.dropdown-menu,
.dropdown-item,
.btn,
.form-control,
.form-select {
    font-family:'Poppins', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.stat-value,
.portal-card h1,
.portal-card h2,
.portal-card h3,
.portal-card h4,
.portal-card h5,
.portal-card h6{
    font-family:'Poppins', sans-serif !important;
}

.portal-body{
    margin:0;
    background:#fff;
    font-family:'Poppins', sans-serif !important;
    color:var(--dark-maroon);
}

.portal-layout{
    min-height:100vh;
}

.portal-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:260px;
    background:var(--dark-maroon);
    color:var(--ivory);
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    z-index:1050;
    overflow:auto;
}

.portal-brand{
    display:block;
    background:var(--ivory);
    border-radius:14px;
    padding:8px 12px;
    margin-bottom:12px;
}

.portal-brand img{
    display:block;
    width:100%;
    max-height:62px;
    object-fit:contain;
}

.role-pill{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--beige);
    margin:8px 10px 18px;
}

.portal-nav{
    display:grid;
    gap:6px;
}

.portal-nav a,
.portal-side-bottom a{
    color:var(--ivory);
    text-decoration:none;
    padding:11px 13px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:11px;
}

.portal-nav a:hover,
.portal-side-bottom a:hover{
    background:rgba(200,183,167,.18);
    color:var(--ivory);
}

.portal-nav a.active,
.portal-side-bottom a.active{
    background:var(--maroon);
    color:var(--ivory);
}

.portal-nav i,
.portal-side-bottom i{
    width:20px;
    text-align:center;
}

.portal-side-bottom{
    margin-top:auto;
    border-top:1px solid rgba(200,183,167,.25);
    padding-top:12px;
}

.portal-main{
    margin-left:260px;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.portal-topbar{
    height:76px;
    background:var(--ivory);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    padding:0 28px;
    position:sticky;
    top:0;
    z-index:1000;
}

.portal-content{
    padding:28px;
    flex:1;
}

.page-title{
    font-size:28px;
    margin:0;
    font-weight:800;
    color:var(--dark-maroon);
}

.sidebar-toggle{
    display:none;
    border:0;
    background:transparent;
    color:var(--maroon);
    font-size:22px;
    margin-right:12px;
}

.status-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--maroon);
    margin-right:6px;
}

.portal-footer{
    padding:16px 28px;
    background:var(--ivory);
    border-top:1px solid var(--border);
    font-size:13px;
    color:var(--muted);
}

.stat-card,
.portal-card{
    background: #f9f9f9;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 6px 22px rgba(59,16,43,.06);
}

.stat-card{
    padding:20px;
    height:100%;
}

.stat-icon{
    width:48px;
    height:48px;
    border-radius:13px;
    background:var(--beige);
    color:var(--dark-maroon);
    display:grid;
    place-items:center;
    font-size:20px;
}

.stat-value{
    font-size:28px;
    font-weight:800;
    color:var(--dark-maroon);
}

.portal-card{
    padding:22px;
}

.portal-card h1,
.portal-card h2,
.portal-card h3,
.portal-card h4,
.portal-card h5,
.portal-card h6{
    color:var(--dark-maroon);
}

.portal-card p{
    color:var(--maroon);
}

.table{
    color:var(--dark-maroon);
    --bs-table-bg:var(--ivory);
    --bs-table-color:var(--dark-maroon);
    --bs-table-border-color:var(--border);
}

.table thead th{
    font-size:12px;
    text-transform:uppercase;
    color:var(--muted);
    border-bottom-color:var(--border);
}

.table td{
    vertical-align:middle;
    color:var(--dark-maroon);
}

.table tbody tr:hover{
    background:rgba(200,183,167,.16);
}

.badge-soft{
    background:var(--beige);
    color:var(--dark-maroon);
    border:1px solid var(--beige);
}

.btn-brand{
    background:var(--maroon);
    border-color:var(--maroon);
    color:var(--ivory);
}

.btn-brand:hover,
.btn-brand:focus{
    background:var(--dark-maroon);
    border-color:var(--dark-maroon);
    color:var(--ivory);
}

.login-shell{
    min-height:100vh;
    background:linear-gradient(135deg,var(--dark-maroon),var(--maroon));
    display:grid;
    place-items:center;
    padding:24px;
}

.auth-card{
    width:min(100%,980px);
    background:var(--ivory);
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(66,20,50,.25);
}

.auth-visual{
    background:
        linear-gradient(
            rgba(66,20,50,.78),
            rgba(59,16,43,.88)
        ),
        url('../img/bg/log-reg.jpg') center/cover;
    min-height:620px;
    color:var(--ivory);
    padding:46px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.auth-form{
    padding:46px;
    background:var(--ivory);
    color:var(--dark-maroon);
}

.auth-form h1,
.auth-form h2,
.auth-form h3,
.auth-form h4{
    color:var(--dark-maroon);
}

.form-control,
.form-select{
    min-height:46px;
    border-radius:10px;
    background:var(--ivory);
    border:1px solid var(--beige);
    color:var(--dark-maroon);
}

.form-control:focus,
.form-select:focus{
    border-color:var(--maroon);
    box-shadow:0 0 0 .2rem rgba(59,16,43,.15);
    background:var(--ivory);
    color:var(--dark-maroon);
}

.form-control::placeholder{
    color:rgba(59,16,43,.55);
}

.course-chip{
    font-size:12px;
    border-radius:999px;
    padding:5px 9px;
    background:var(--beige);
    color:var(--dark-maroon);
}

.empty-state{
    padding:40px;
    text-align:center;
    color:var(--muted);
}

/* =========================================================
   COMMON BOOTSTRAP OVERRIDES
========================================================= */

.btn-primary,
.btn-success,
.btn-danger{
    background:var(--maroon);
    border-color:var(--maroon);
    color:var(--ivory);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-danger:hover,
.btn-danger:focus{
    background:var(--dark-maroon);
    border-color:var(--dark-maroon);
    color:var(--ivory);
}

.btn-secondary,
.btn-warning,
.btn-info{
    background:var(--beige);
    border-color:var(--beige);
    color:var(--dark-maroon);
}

.btn-secondary:hover,
.btn-warning:hover,
.btn-info:hover{
    background:var(--maroon);
    border-color:var(--maroon);
    color:var(--ivory);
}

.btn-light{
    background:var(--ivory);
    border-color:var(--beige);
    color:var(--dark-maroon);
}

.btn-dark{
    background:var(--dark-maroon);
    border-color:var(--dark-maroon);
    color:var(--ivory);
}

.bg-primary,
.bg-success,
.bg-danger{
    background-color:var(--maroon)!important;
}

.bg-secondary,
.bg-warning,
.bg-info{
    background-color:var(--beige)!important;
}

.bg-light{
    background-color:var(--ivory)!important;
}

.bg-dark{
    background-color:var(--dark-maroon)!important;
}

.text-primary,
.text-success,
.text-danger{
    color:var(--maroon)!important;
}

.text-secondary,
.text-warning,
.text-info{
    color:var(--beige)!important;
}

.text-dark{
    color:var(--dark-maroon)!important;
}

.text-light{
    color:var(--ivory)!important;
}

.border-primary,
.border-success,
.border-danger{
    border-color:var(--maroon)!important;
}

.border-secondary,
.border-warning,
.border-info{
    border-color:var(--beige)!important;
}

.border-dark{
    border-color:var(--dark-maroon)!important;
}

.dropdown-menu{
    background:var(--ivory);
    border:1px solid var(--beige);
}

.dropdown-item{
    color:var(--dark-maroon);
}

.dropdown-item:hover,
.dropdown-item:focus{
    background:var(--beige);
    color:var(--dark-maroon);
}

.nav-link{
    color:var(--dark-maroon);
}

.nav-link:hover,
.nav-link:focus{
    color:var(--maroon);
}

.form-check-input:checked{
    background-color:var(--maroon);
    border-color:var(--maroon);
}

.pagination{
    --bs-pagination-color:var(--maroon);
    --bs-pagination-bg:var(--ivory);
    --bs-pagination-border-color:var(--beige);
    --bs-pagination-hover-color:var(--ivory);
    --bs-pagination-hover-bg:var(--maroon);
    --bs-pagination-hover-border-color:var(--maroon);
    --bs-pagination-active-color:var(--ivory);
    --bs-pagination-active-bg:var(--maroon);
    --bs-pagination-active-border-color:var(--maroon);
}

.progress{
    background:var(--beige);
}

.progress-bar{
    background:var(--maroon);
}

.alert{
    background:var(--ivory);
    color:var(--dark-maroon);
    border-color:var(--beige);
}

.list-group{
    --bs-list-group-color:var(--dark-maroon);
    --bs-list-group-bg:var(--ivory);
    --bs-list-group-border-color:var(--beige);
    --bs-list-group-active-color:var(--ivory);
    --bs-list-group-active-bg:var(--maroon);
    --bs-list-group-active-border-color:var(--maroon);
}

.accordion{
    --bs-accordion-color:var(--dark-maroon);
    --bs-accordion-bg:var(--ivory);
    --bs-accordion-border-color:var(--beige);
    --bs-accordion-btn-color:var(--dark-maroon);
    --bs-accordion-active-color:var(--dark-maroon);
    --bs-accordion-active-bg:var(--beige);
}

::selection{
    background:var(--maroon);
    color:var(--ivory);
}

@media(max-width:991px){
    .portal-sidebar{
        transform:translateX(-100%);
        transition:.25s;
    }

    .portal-main{
        margin-left:0;
    }

    .sidebar-open .portal-sidebar{
        transform:none;
    }

    .sidebar-toggle{
        display:inline-block;
    }

    .portal-content{
        padding:20px;
    }

    .auth-visual{
        display:none;
    }

    .auth-form{
        padding:28px;
    }
}