/* SDN CIMARA — CoreUI-inspired Modern UI 2026 */
:root {
    --primary: #2E5BFF;
    --primary-dark: #1E3A8A;
    --primary-light: #EFF4FF;
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #06B6D4;
    --body-bg: #F5F7FB;
    --card-bg: #FFFFFF;
    --border: #E5E9F2;
    --text: #1D2939;
    --text-muted: #667085;
    --sidebar-bg: #10162F;
    --sidebar-active: rgba(46,91,255,.15);
    --shadow-sm: 0 1px 2px rgba(16,24,40,.04);
    --shadow: 0 4px 12px rgba(16,24,40,.06);
    --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Inter','Segoe UI',-apple-system,sans-serif;
    background: var(--body-bg);
    color: var(--text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.005em;
}
a { text-decoration: none; color: var(--primary); }

/* Layout */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left .3s; }
.app-footer { padding: 14px 24px; background:#fff; border-top: 1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-muted); }

/* Sidebar */
.sidebar { position: fixed; top:0; left:0; width:260px; height:100vh; background: var(--sidebar-bg); color:#E4E7EC; z-index:1000; overflow-y:auto; transition: transform .3s ease; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius:3px; }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:20px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
.brand-logo { width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg,#2E5BFF,#1E3A8A); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 4px 12px rgba(46,91,255,.35); font-size:18px; overflow:hidden; }
.brand-logo img { width:100%; height:100%; object-fit:cover; }
.brand-title { margin:0; font-weight:600; font-size:14px; color:#fff; line-height:1.2; letter-spacing:-.01em; }
.brand-sub { margin:0; font-size:11px; color:#98A2B3; letter-spacing:.02em; }

.sidebar-nav { padding: 12px 12px 40px; }
.nav-title { padding: 16px 12px 6px; margin:0; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#98A2B3; font-weight:600; }
.sidebar .nav-link { display:flex; align-items:center; gap:12px; padding: 9px 12px; color: #D0D5DD; border-radius: 8px; font-size:13.5px; font-weight:500; margin: 2px 0; transition:all .18s ease; position:relative; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color:#fff; }
.sidebar .nav-link.active { background: linear-gradient(135deg,#2E5BFF,#1E40AF); color:#fff; box-shadow: 0 6px 18px -6px rgba(46,91,255,.5); }
.sidebar .nav-icon { width:18px; font-size:14px; text-align:center; }
.nav-arrow { margin-left:auto; font-size:10px; transition:transform .18s; }
.nav-group.show .nav-arrow { transform: rotate(90deg); }
.nav-group-items { list-style:none; padding:0 0 0 34px; margin:2px 0 6px; max-height:0; overflow:hidden; transition:max-height .25s ease; }
.nav-group.show .nav-group-items { max-height: 300px; }
.nav-group-items .nav-link { padding: 7px 10px; font-size:13px; color:#98A2B3; }
.nav-group-items .nav-link:hover { background:transparent; color:#fff; }
.nav-dot { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999; }

/* Header */
.app-header { height:64px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; padding: 0 24px; position: sticky; top:0; z-index:900; box-shadow: var(--shadow-sm); gap:16px; }
.header-toggler { background:none; border:none; font-size:16px; color:var(--text-muted); padding:8px; border-radius:8px; cursor:pointer; }
.header-toggler:hover { background: var(--body-bg); }
.header-info { display:flex; gap:8px; margin-left:8px; }
.header-info-item { display:flex; align-items:center; }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }

.badge-soft { display:inline-flex; align-items:center; gap:6px; padding: 5px 10px; border-radius: 999px; font-size:12px; font-weight:500; }
.badge-soft.badge-primary { background: var(--primary-light); color: var(--primary-dark); }
.badge-soft.badge-success { background:#DEF7EC; color:#046C4E; }

.header-user-btn { display:flex; align-items:center; gap:10px; background:transparent; border:1px solid transparent; border-radius:10px; padding:6px 12px 6px 6px; cursor:pointer; color:var(--text); }
.header-user-btn:hover { background: var(--body-bg); }
.header-user-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#2E5BFF,#8B5CF6); color:#fff; font-weight:600; display:flex; align-items:center; justify-content:center; }
.header-user-name { margin:0; font-size:13px; font-weight:600; line-height:1.2; text-align:left; }
.header-user-role { margin:0; font-size:11px; color:var(--text-muted); text-align:left; }

/* Page container */
.page-wrapper { padding: 24px; flex: 1; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; flex-wrap:wrap; gap:12px; }
.page-title { margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.page-subtitle { margin:2px 0 0; font-size:13px; color:var(--text-muted); }
.breadcrumb-modern { display:flex; gap:8px; font-size:12.5px; color:var(--text-muted); }
.breadcrumb-modern a { color:var(--text-muted); }

/* Cards */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 20px; overflow: hidden; }
.card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 16px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.card-title { margin:0; font-size:15px; font-weight:600; color:var(--text); }
.card-body { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--border); background: #FAFBFC; display:flex; justify-content:flex-end; gap:8px; }

/* Stat cards */
.stat-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 20px; position:relative; overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:12px; }
.stat-card-icon.primary { background: var(--primary-light); color: var(--primary); }
.stat-card-icon.success { background: #DEF7EC; color: var(--success); }
.stat-card-icon.danger  { background: #FEE2E2; color: var(--danger); }
.stat-card-icon.warning { background: #FEF3C7; color: var(--warning); }
.stat-card-value { font-size:24px; font-weight:700; margin:0; letter-spacing:-.02em; }
.stat-card-label { color: var(--text-muted); margin:2px 0 0; font-size:13px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:8px; padding: 7px 14px; font-weight:500; font-size:13.5px; border: 1px solid transparent; cursor:pointer; transition: all .15s ease; text-decoration:none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 5px 10px; font-size:12.5px; }
.btn-primary { background: var(--primary); color:#fff; }
.btn-primary:hover { background: var(--primary-dark); color:#fff; }
.btn-success { background: var(--success); color:#fff; }
.btn-danger  { background: var(--danger);  color:#fff; }
.btn-warning { background: var(--warning); color:#fff; }
.btn-info    { background: var(--info); color:#fff; }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); background:#fff; }
.btn-outline-primary:hover { background: var(--primary); color:#fff; }
.btn-outline-success { border-color: var(--success); color: var(--success); background:#fff; }
.btn-outline-success:hover { background: var(--success); color:#fff; }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); background:#fff; }
.btn-outline-danger:hover { background: var(--danger); color:#fff; }
.btn-outline-secondary { border-color: var(--border); color: var(--text); background:#fff; }
.btn-outline-secondary:hover { background: var(--body-bg); }
.btn-light { background:#F1F5F9; color:var(--text); }

/* Forms */
.form-control, .form-select, select.form-control, textarea.form-control {
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 8px 12px;
    font-size: 14px;
    background:#fff;
    transition: border-color .15s, box-shadow .15s;
    width:100%;
}
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,91,255,.15); outline:none; }
label, .form-label { display:block; font-weight:500; font-size:13px; color: var(--text); margin-bottom:6px; }

/* Tables */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 14px; text-align:left; border-bottom:1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.table thead th { background:#FAFBFC; color:var(--text-muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; border-bottom: 2px solid var(--border); }
.table tbody tr:hover { background: var(--primary-light); }

/* Modals */
.modal-content { border-radius: 12px; border:none; box-shadow: 0 24px 60px -20px rgba(16,24,40,.3); }
.modal-header { border-bottom:1px solid var(--border); padding: 16px 20px; }
.modal-title { font-weight:600; margin:0; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top:1px solid var(--border); gap:8px; }

/* Badges (state indicators) */
.status-pill { display:inline-flex; align-items:center; gap:6px; padding: 3px 10px; border-radius: 999px; font-size:12px; font-weight:600; }
.status-H { background:#DEF7EC; color:#03543F; }
.status-I { background:#DBEAFE; color:#1E3A8A; }
.status-S { background:#FEF3C7; color:#78350F; }
.status-A { background:#FEE2E2; color:#7F1D1D; }

/* Attendance select — colored dropdown */
.status-select { width:100%; padding: 6px 10px; border-radius:8px; border:1px solid var(--border); font-weight:600; text-align:center; cursor:pointer; }
.status-select[data-val="H"] { background: #DEF7EC; color:#03543F; border-color:#A7F3D0; }
.status-select[data-val="I"] { background: #DBEAFE; color:#1E3A8A; border-color:#BFDBFE; }
.status-select[data-val="S"] { background: #FEF3C7; color:#78350F; border-color:#FDE68A; }
.status-select[data-val="A"] { background: #FEE2E2; color:#7F1D1D; border-color:#FECACA; }
.status-select option { background:#fff; color:var(--text); font-weight:600; }

/* Login */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 15% 20%, #2E5BFF22, transparent 40%), radial-gradient(circle at 85% 70%, #8B5CF622, transparent 40%), linear-gradient(135deg,#10162F,#1E1B4B 60%,#0F172A); padding: 20px; }
.login-card { width:100%; max-width:420px; background:#fff; border-radius: 20px; padding: 36px 32px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); }
.login-brand { text-align:center; margin-bottom:24px; }
.login-brand .brand-logo { margin:0 auto 14px; width:64px; height:64px; font-size:26px; }
.login-brand h4 { margin:0; font-size:20px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
.login-brand small { color:var(--text-muted); font-size:13px; }
.login-input-group { position:relative; margin-bottom:14px; }
.login-input-group i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; }
.login-input-group .form-control { padding-left:40px; height:44px; }
.login-input-group .toggle-eye { left:auto; right:14px; cursor:pointer; }

/* Responsive */
@media (max-width: 991px) {
    .app-main { margin-left: 0; }
    .sidebar { transform: translateX(-100%); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display:block; }
}

/* Datatables integration */
.dataTables_wrapper { padding: 0 !important; }
.dataTables_filter input { border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:13px; }
.dataTables_length select { border:1px solid var(--border); border-radius:8px; padding:5px 10px; }
.paginate_button { border-radius:8px !important; margin:0 2px !important; }

/* Utilities */
.text-muted { color:var(--text-muted) !important; }
.gap-2 { gap:8px; }
.g-2 { gap:8px; }
.d-flex { display:flex !important; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items:center; }
.justify-content-between { justify-content: space-between; }
.mb-0 { margin-bottom:0 !important; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:16px; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:16px; }
.text-center { text-align:center; }
.text-end, .text-right { text-align: right; }
.w-100 { width:100%; }

/* Ikon SVG lokal (pengganti Font Awesome untuk elemen chrome: sidebar & navbar).
   Class "app-icon" dipakai (bukan "icon") + color/fill di-set eksplisit,
   supaya tidak ketiban style ".icon" bawaan CoreUI Icons (CDN) yang membuat
   ikon sidebar/navbar tampil hitam walau parent-nya sudah punya warna sendiri. */
.app-icon { display:inline-block; vertical-align:middle; width:1em; height:1em; flex-shrink:0; fill:none; stroke:currentColor; color:inherit; }
.nav-icon.app-icon { width:18px; height:18px; color:inherit; }
.nav-arrow.app-icon { width:10px; height:10px; color:inherit; }
.brand-logo .app-icon { width:22px; height:22px; color:inherit; }
.header-toggler .app-icon { width:16px; height:16px; color:inherit; }
.sidebar .nav-link .app-icon { color:inherit; }
.sidebar .nav-link:hover .app-icon,
.sidebar .nav-link.active .app-icon { color:inherit; }

/* Dropdown (fallback lokal — tidak bergantung pada CoreUI/Bootstrap JS+CSS) */
.dropdown { position: relative; }
.dropdown-menu { display:none; position:absolute; top:100%; right:0; margin-top:8px; min-width:200px; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow: 0 12px 32px -8px rgba(16,24,40,.18); padding:6px; z-index:1050; list-style:none; }
.dropdown-menu.show { display:block; }
.dropdown-menu.dropdown-menu-end { right:0; left:auto; }
.dropdown-item { display:flex; align-items:center; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--text); cursor:pointer; }
.dropdown-item:hover { background: var(--body-bg); }
.dropdown-item.text-danger { color: var(--danger); }
.dropdown-divider { margin:6px 0; border:none; border-top:1px solid var(--border); }
.me-2 { margin-right:8px; }
.ms-2 { margin-left:8px; }
.fa-fw { width:1.25em; text-align:center; display:inline-block; }
.d-none { display:none; }
@media (min-width: 768px) { .d-md-block { display:block; } }

/* Modal konfirmasi hapus — pengganti lokal untuk SweetAlert2 */
.app-confirm-backdrop { display:none; position:fixed; inset:0; background:rgba(16,24,40,.5); z-index:2000; align-items:center; justify-content:center; padding:20px; }
.app-confirm-backdrop.show { display:flex; }
.app-confirm-box { background:#fff; border-radius:14px; padding:28px 24px; max-width:360px; width:100%; text-align:center; box-shadow: 0 24px 60px -20px rgba(16,24,40,.35); }
.app-confirm-icon { width:52px; height:52px; margin:0 auto 14px; border-radius:50%; background:#FEF3C7; color:#B45309; display:flex; align-items:center; justify-content:center; font-size:22px; }
.app-confirm-title { margin:0 0 6px; font-size:16px; font-weight:700; color:var(--text); }
.app-confirm-text { margin:0 0 18px; font-size:13px; color:var(--text-muted); }
.app-confirm-actions { display:flex; gap:10px; justify-content:center; }
.app-confirm-actions .btn { flex:1; }

/* Toast notifikasi lokal (pengganti Swal.fire toast) */
.app-toast-host { position:fixed; top:16px; right:16px; z-index:2100; display:flex; flex-direction:column; gap:8px; }
.app-toast { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 16px; font-size:13.5px; font-weight:500; box-shadow: 0 12px 32px -8px rgba(16,24,40,.18); opacity:0; transform:translateX(20px); transition:opacity .2s, transform .2s; max-width:320px; }
.app-toast.show { opacity:1; transform:translateX(0); }
.app-toast-success { color:#03543F; } .app-toast-success i { color:var(--success); }
.app-toast-error { color:#7F1D1D; } .app-toast-error i { color:var(--danger); }
.app-toast-warning { color:#78350F; } .app-toast-warning i { color:var(--warning); }
.app-toast-info { color:#1E3A8A; } .app-toast-info i { color:var(--info); }

/* Fallback pencarian tabel sederhana (dipakai jika DataTables/jQuery tidak tersedia) */
.simple-table-search { padding:12px 20px; border-bottom:1px solid var(--border); }
.simple-table-search input { max-width:260px; }

/* Print */
@media print {
    .sidebar, .app-header, .app-footer, .sidebar-backdrop, .no-print { display:none !important; }
    .app-main { margin-left: 0; }
    .card { box-shadow:none; border:none; }
    body { background:#fff; }
}