/* SLAF CLMS — Coursera/SaaS Inspired Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700&display=swap');

:root {
    --font: 'Inter', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --primary: #2D6CDF;
    --primary-dark: #1A4FB5;
    --primary-light: #EBF1FD;
    --primary-grad: linear-gradient(135deg, #2D6CDF 0%, #4F46E5 100%);
    --bg-page: #F5F7FA;
    --bg-card: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #E5E7EB;
    --sidebar-hover: #F3F7FF;
    --sidebar-active-bg: #EBF1FD;
    --sidebar-active-text: #2D6CDF;
    --sidebar-text: #374151;
    --sidebar-muted: #9CA3AF;
    --navbar-bg: #FFFFFF;
    --text-h: #1F2937;
    --text-body: #374151;
    --text-muted: #6B7280;
    --border: #E5E7EB;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
    --success: #059669;
    --warning: #D97706;
    --danger: #DC2626;
    --info: #2D6CDF;
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --transition: 0.22s ease;
}

[data-theme="dark"] {
    --bg-page: #0F1117;
    --bg-card: #1A1D27;
    --sidebar-bg: #13151F;
    --sidebar-border: #252836;
    --sidebar-hover: #1E2235;
    --sidebar-active-bg: rgba(45,108,223,0.18);
    --sidebar-active-text: #6B9EFF;
    --sidebar-text: #C5CAD5;
    --sidebar-muted: #6B7694;
    --navbar-bg: #13151F;
    --text-h: #F1F3F9;
    --text-body: #D1D5DB;
    --text-muted: #9CA3AF;
    --border: #252836;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
    --primary-light: rgba(45,108,223,0.15);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

body {
    font-family: var(--font);
    background: var(--bg-page);
    color: var(--text-body);
    font-size: 14.5px;
    line-height: 1.65;
    overflow-x: hidden;
    transition: background var(--transition), color var(--transition);
}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:#9CA3AF;}

a{text-decoration:none;color:var(--primary);transition:color var(--transition);}
a:hover{color:var(--primary-dark);}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;color:var(--text-h);line-height:1.3;}

/* ── LAYOUT ── */
.app-wrapper{display:flex;min-height:100vh;}

/* ── SIDEBAR ── */
.sidebar {
    width:252px;
    background:var(--sidebar-bg);
    border-right:1px solid var(--sidebar-border);
    display:flex;flex-direction:column;
    position:fixed;height:100vh;left:0;top:0;
    z-index:1000;
    transition:all var(--transition);
    box-shadow:2px 0 12px rgba(0,0,0,0.04);
}

.sidebar-brand {
    padding:16px 20px;
    display:flex;align-items:center;gap:10px;
    background:var(--primary-grad);
    min-height:64px;
}
.sidebar-brand .bi{color:#fff!important;font-size:1.7rem;}
.sidebar-brand-text span,.sidebar-brand-text .d-block{color:#fff!important;}
.sidebar-brand-text .text-muted{color:rgba(255,255,255,0.72)!important;}

.sidebar-menu{flex:1;overflow-y:auto;padding:10px 10px;list-style:none;}

.sidebar-menu-header {
    font-size:0.68rem;text-transform:uppercase;letter-spacing:1.4px;
    color:var(--sidebar-muted);padding:14px 10px 5px;font-weight:700;
}

.sidebar-item{margin-bottom:2px;}

.sidebar-link {
    display:flex;align-items:center;gap:9px;
    padding:9px 12px;
    color:var(--sidebar-text);
    border-radius:var(--radius-sm);
    font-weight:500;font-size:0.9rem;
    transition:all 0.18s ease;
    position:relative;
}
.sidebar-link i{font-size:1.05rem;width:20px;text-align:center;color:var(--text-muted);flex-shrink:0;transition:color 0.18s;}
.sidebar-link:hover{background:var(--sidebar-hover);color:var(--primary);}
.sidebar-link:hover i{color:var(--primary);}
.sidebar-link:hover{color:var(--primary);}

.sidebar-item.active .sidebar-link{
    background:var(--sidebar-active-bg);
    color:var(--sidebar-active-text);font-weight:600;
}
.sidebar-item.active .sidebar-link i{color:var(--sidebar-active-text);}
.sidebar-item.active .sidebar-link::before{
    content:'';position:absolute;left:0;top:5px;bottom:5px;
    width:3px;background:var(--primary);border-radius:0 3px 3px 0;
}

.sidebar-footer{
    padding:14px 18px;border-top:1px solid var(--sidebar-border);
    background:var(--bg-page);
}

/* ── MAIN CONTENT ── */
.main-content{
    margin-left:252px;flex:1;
    display:flex;flex-direction:column;min-height:100vh;
    width:calc(100% - 252px);
    transition:all var(--transition);
}

/* ── TOP NAVBAR ── */
.top-navbar {
    height:64px;
    background:var(--navbar-bg);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 28px;
    position:sticky;top:0;z-index:900;
    transition:background var(--transition);
}
.navbar-left{display:flex;align-items:center;gap:12px;}
.navbar-right{display:flex;align-items:center;gap:10px;}

.sidebar-toggle-btn{
    background:none;border:none;color:var(--text-h);
    font-size:1.3rem;cursor:pointer;padding:6px 8px;
    border-radius:var(--radius-sm);display:none;line-height:1;
}
.sidebar-toggle-btn:hover{background:var(--primary-light);color:var(--primary);}

.top-navbar h5{font-family:var(--font-heading);font-size:0.95rem;color:var(--text-h);}
.top-navbar span.text-muted{font-size:0.78rem;}

/* ── CONTENT BODY ── */
.content-body{padding:28px;flex:1;}

/* ── CARDS ── */
.card-clms {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:24px;
    margin-bottom:22px;
    transition:box-shadow var(--transition),background var(--transition);
}
.card-clms:hover{box-shadow:var(--shadow-md);}

.card-clms-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:18px;padding-bottom:14px;
    border-bottom:1px solid var(--border);
}
.card-clms-header h5,.card-clms-header h6{font-size:0.95rem;font-weight:700;color:var(--text-h);margin:0;}
.card-clms-header .bi{color:var(--primary)!important;}

/* ── STAT CARDS ── */
.stats-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px 20px;
    box-shadow:var(--shadow-sm);
    display:flex;justify-content:space-between;align-items:center;
    transition:transform 0.2s,box-shadow 0.2s,background var(--transition);
}
.stats-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}

.stats-icon-wrapper{
    width:50px;height:50px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;
    flex-shrink:0;
}
.stats-count{font-size:1.8rem;font-weight:700;margin:4px 0 0;color:var(--text-h);}
.stats-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.7px;color:var(--text-muted);}

.accent-blue{border-top:3px solid var(--primary);}
.accent-green{border-top:3px solid var(--success);}
.accent-yellow{border-top:3px solid var(--warning);}
.accent-red{border-top:3px solid var(--danger);}

.icon-blue{background:#EBF1FD;color:var(--primary);}
.icon-green{background:#D1FAE5;color:var(--success);}
.icon-yellow{background:#FEF3C7;color:var(--warning);}
.icon-red{background:#FEE2E2;color:var(--danger);}

[data-theme="dark"] .icon-blue{background:rgba(45,108,223,0.2);}
[data-theme="dark"] .icon-green{background:rgba(5,150,105,0.2);}
[data-theme="dark"] .icon-yellow{background:rgba(217,119,6,0.2);}
[data-theme="dark"] .icon-red{background:rgba(220,38,38,0.2);}

/* ── STATUS BADGES ── */
.badge-active{background:#D1FAE5;color:#065F46;font-weight:600;border-radius:99px;padding:3px 10px;font-size:0.75rem;}
.badge-inactive,.badge-removed{background:#F3F4F6;color:#6B7280;font-weight:600;border-radius:99px;padding:3px 10px;font-size:0.75rem;}
.badge-archived{background:#FEF3C7;color:#D97706;font-weight:600;border-radius:99px;padding:3px 10px;font-size:0.75rem;}
.badge-faulty{background:#FEE2E2;color:#991B1B;font-weight:600;border-radius:99px;padding:3px 10px;font-size:0.75rem;}
.badge-maintenance{background:#FEF3C7;color:#92400E;font-weight:600;border-radius:99px;padding:3px 10px;font-size:0.75rem;}
.badge-pending{background:#FEF3C7;color:#92400E;font-weight:600;border-radius:99px;padding:3px 10px;font-size:0.75rem;}
.badge-approved{background:#D1FAE5;color:#065F46;font-weight:600;border-radius:99px;padding:3px 10px;font-size:0.75rem;}
.badge-rejected{background:#FEE2E2;color:#991B1B;font-weight:600;border-radius:99px;padding:3px 10px;font-size:0.75rem;}

/* ── BUTTONS ── */
.btn{border-radius:var(--radius-sm)!important;font-weight:600!important;font-size:0.875rem!important;transition:all 0.18s!important;}
.btn-primary{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;}
.btn-primary:hover{background:var(--primary-dark)!important;border-color:var(--primary-dark)!important;box-shadow:0 4px 12px rgba(45,108,223,0.35)!important;}
.btn-outline-primary{border-color:var(--primary)!important;color:var(--primary)!important;}
.btn-outline-primary:hover{background:var(--primary)!important;color:#fff!important;}
.btn-success{background:var(--success)!important;border-color:var(--success)!important;}
.btn-danger{background:var(--danger)!important;border-color:var(--danger)!important;}
.btn-sm{padding:5px 12px!important;font-size:0.82rem!important;}

/* ── TABLES ── */
.table-clms{color:var(--text-body);border-color:var(--border);font-size:0.9rem;}
.table-clms thead th{
    background:var(--primary-light);color:var(--primary-dark);
    font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.7px;
    border-bottom:2px solid #BFDBFE;padding:12px 14px;
}
.table-clms td{vertical-align:middle;padding:11px 14px;border-color:var(--border);}
.table-clms tbody tr{transition:background 0.15s;}
.table-clms tbody tr:hover{background:var(--primary-light);}

[data-theme="dark"] .table-clms thead th{background:rgba(45,108,223,0.15);color:#7BAEFF;border-bottom-color:rgba(45,108,223,0.3);}
[data-theme="dark"] .table-clms tbody tr:hover{background:rgba(45,108,223,0.08);}
[data-theme="dark"] .table-clms td{border-color:var(--border);}

/* ── FORMS ── */
.form-control,.form-select{
    border:1.5px solid var(--border)!important;
    border-radius:var(--radius-sm)!important;
    padding:9px 13px!important;
    font-size:0.9rem!important;
    color:var(--text-body)!important;
    background:var(--bg-card)!important;
    transition:border-color 0.2s,box-shadow 0.2s!important;
}
.form-control:focus,.form-select:focus{
    border-color:var(--primary)!important;
    box-shadow:0 0 0 3px rgba(45,108,223,0.15)!important;
    outline:none!important;
}
.form-label{font-weight:600;font-size:0.875rem;color:var(--text-h);margin-bottom:5px;}
.form-control-clms{background:var(--bg-card);border:1.5px solid var(--border);color:var(--text-body);border-radius:var(--radius-sm);padding:9px 13px;}
.form-control-clms:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(45,108,223,0.15);outline:none;background:var(--bg-card);color:var(--text-body);}

/* ── THEME SWITCH ── */
.theme-switch{
    width:38px;height:38px;border-radius:50%;background:none;
    border:1.5px solid var(--border);color:var(--text-muted);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    font-size:1rem;transition:all 0.2s;
}
.theme-switch:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary);}

/* ── DROPDOWNS ── */
.dropdown-menu{
    border:1px solid var(--border)!important;border-radius:var(--radius)!important;
    box-shadow:var(--shadow-lg)!important;background:var(--bg-card)!important;
    padding:6px!important;
}
.dropdown-item{color:var(--text-body)!important;font-size:0.9rem;padding:8px 14px;border-radius:var(--radius-sm);transition:background 0.15s;}
.dropdown-item:hover{background:var(--primary-light)!important;color:var(--primary)!important;}
.dropdown-header{font-size:0.7rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:1px!important;color:var(--text-muted)!important;}

/* ── MODALS ── */
.modal-content{border:none!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-lg)!important;background:var(--bg-card)!important;}
.modal-header{
    background:var(--primary-grad)!important;color:#fff!important;
    border-bottom:none!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0!important;
    padding:18px 24px!important;
}
.modal-title{color:#fff!important;font-weight:700;font-size:1rem;}
.modal-header .btn-close{filter:brightness(0) invert(1);opacity:0.85;}
.modal-body{padding:24px;color:var(--text-body);}
.modal-footer{border-top:1px solid var(--border)!important;padding:14px 24px!important;background:var(--bg-card)!important;border-radius:0 0 var(--radius-lg) var(--radius-lg)!important;}

/* ── NOTICES ── */
.notice-item{
    border-left:3px solid var(--primary);padding:12px 16px;
    background:var(--primary-light);border-radius:0 8px 8px 0;margin-bottom:10px;
}
.notice-meta{font-size:0.75rem;color:var(--text-muted);}

/* ── ALERTS ── */
.alert{border-radius:var(--radius-sm)!important;border:none!important;font-weight:500;font-size:0.9rem;}
.alert-success{background:#D1FAE5!important;color:#065F46!important;}
.alert-danger{background:#FEE2E2!important;color:#991B1B!important;}
.alert-warning{background:#FEF3C7!important;color:#92400E!important;}
.alert-info{background:var(--primary-light)!important;color:var(--primary-dark)!important;}

/* ── CALENDAR ── */
.fc{
    --fc-border-color:var(--border);
    --fc-page-bg-color:var(--bg-card);
    --fc-neutral-bg-color:var(--bg-page);
    --fc-text-color:var(--text-body);
    --fc-button-bg-color:var(--primary);
    --fc-button-border-color:var(--primary);
    --fc-button-hover-bg-color:var(--primary-dark);
    --fc-button-active-bg-color:var(--primary-dark);
    font-family:var(--font);background:var(--bg-card);border-radius:var(--radius);padding:12px;
}
.fc-theme-standard td,.fc-theme-standard th{border-color:var(--border);}
.fc-daygrid-day:hover{background:var(--primary-light)!important;}
.fc-event{border-radius:5px!important;font-size:0.78rem!important;font-weight:500;border:none!important;padding:2px 6px!important;}
.fc-toolbar-title{font-family:var(--font-heading)!important;font-size:1.1rem!important;color:var(--text-h)!important;}

/* ── LOGIN PAGE ── */
.login-page {
    position: relative;
    min-height: 100vh;
}

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.login-left {
    flex: 1;
    background: linear-gradient(135deg, rgba(26, 82, 196, 0.52) 0%, rgba(15, 23, 42, 0.62) 100%), url('../images/login-bg.png?v=1.0.4');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    color: #ffffff !important;
}
.login-left h1 { font-size: 2.6rem; color: #ffffff !important; margin-bottom: 12px; line-height: 1.2; text-align: center; font-weight: 700; }
.login-left p { color: rgba(255, 255, 255, 0.9) !important; font-size: 1.25rem; max-width: 420px; text-align: center; }

.login-right {
    width: 560px;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    color: #374151 !important;
}
.login-card {
    width: 100%;
    max-width: 380px;
}
.login-header { text-align: center; margin-bottom: 28px; }
.login-header h4 { font-size: 1.5rem; color: #1A4FB5 !important; margin-bottom: 6px; font-weight: 700; }
.login-header p { font-size: 0.9rem; color: #6B7280 !important; }

/* Force light theme elements on the login form card */
.login-right .form-label {
    color: #1F2937 !important;
}
.login-right .form-control {
    background: #ffffff !important;
    color: #1F2937 !important;
    border: 1.5px solid #D1D5DB !important;
}
.login-right .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.15) !important;
}
.login-right .input-group-text {
    background: #F3F4F6 !important;
    border: 1.5px solid #D1D5DB !important;
    color: #4B5563 !important;
}
.login-right .input-group-text i {
    color: #4B5563 !important;
}
.login-right .text-muted {
    color: #6B7280 !important;
}

@media(max-width: 900px) {
    .login-left { display: none; }
    .login-right {
        width: 100%;
        min-height: 100vh;
    }
}

/* ── AUDIT LOGS ── */
.log-row-info{border-left:3px solid var(--info);}
.log-row-warning{border-left:3px solid var(--warning);}
.log-row-danger{border-left:3px solid var(--danger);}

/* ── PROGRESS ── */
.progress{background:var(--border);border-radius:99px;height:8px;}
.progress-bar{background:var(--primary);border-radius:99px;}

/* ── PAGINATION ── */
.page-link{color:var(--primary);border-color:var(--border);}
.page-item.active .page-link{background:var(--primary);border-color:var(--primary);}
.page-link:hover{background:var(--primary-light);color:var(--primary-dark);}

/* ── BREADCRUMB ── */
.breadcrumb{font-size:0.82rem;}
.breadcrumb-item a{color:var(--primary);}
.breadcrumb-item.active{color:var(--text-muted);}

/* ── RESPONSIVE ── */
@media(max-width:991.98px){
    .sidebar{left:-252px;}
    .sidebar.active{left:0;box-shadow:4px 0 24px rgba(0,0,0,0.15);}
    .main-content{margin-left:0;width:100%;}
    .sidebar-toggle-btn{display:block;}
    .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:999;}
    .sidebar-overlay.active{display:block;}
}
@media(max-width:575.98px){
    .content-body{padding:14px;}
    .top-navbar{padding:0 14px;}
    .card-clms{padding:16px;}
    .login-right{padding:28px 10px;}
}

/* ── PRINT ── */
@media print{
    .sidebar,.top-navbar,.theme-switch,.btn,.no-print,.dropdown{display:none!important;}
    .main-content{margin-left:0!important;width:100%!important;}
    .card-clms{box-shadow:none!important;border:1px solid #ccc!important;}
    body{background:#fff!important;color:#000!important;}
}

/* Align search/filter labels of varying heights */
@media (min-width: 768px) {
    .filter-label-align {
        min-height: 56px;
        display: block;
    }
}