/* HRIS — tema aplikasi karyawan (Mobilekit) mengikuti standar desain CCMS:
   header navy + aksen cyan, kartu putih bersudut 14px dengan garis aksen tipis, tipografi system-ui.
   Dimuat setelah style.css & sw-custom.css; tidak mengubah markup modul. */

:root {
  --bg: #eef2f7; --panel: #ffffff; --panel-2: #f6f8fb; --line: #e3e8f0; --line-2: #d2dae6;
  --tx1: #0f1b2d; --tx2: #44546a; --tx3: #6b7a90;
  --accent: #0891b2; --accent-rgb: 8,145,178; --accent-dim: rgba(8,145,178,.10); --accent-hover: #0e7490;
  --primary: #1f6fd0; --grad-a: #1596b4; --grad-b: #1f6fd0;
  --good: #0f9a8b; --warn: #e0a000; --crit: #e04848; --vol: #2f7fdc; --violet: #6d5bd0;
  --navy-a: #0b1322; --navy-b: #12305a;
  --card-shadow: 0 1px 2px rgba(15,40,80,.05), 0 8px 24px rgba(15,40,80,.06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dasar */
body {
  font-family: var(--font); color: var(--tx2); letter-spacing: 0;
  background:
    linear-gradient(rgba(15,40,80,.035) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, rgba(15,40,80,.035) 1px, transparent 1px) 0 0/32px 32px,
    var(--bg);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, strong, b { color: var(--tx1); font-family: var(--font); }
a, a:hover, a:active, a:focus { color: var(--accent); }
.text-primary, a.text-primary { color: var(--accent) !important; }
.text-muted { color: var(--tx3) !important; }

/* Warna latar komponen (Mobilekit memakai .bg-danger sebagai warna utama aplikasi) */
.bg-danger, .bg-primary { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)) !important; color: #fff; }
.bg-success { background: var(--good) !important; }
.bg-warning { background: var(--warn) !important; }
.bg-info { background: var(--violet) !important; }
.bg-secondary { background: #7a879a !important; }
.bg-dark { background: var(--navy-a) !important; }

/* Header aplikasi */
.appHeader, .appHeader.bg-danger, .appHeader.bg-primary {
  background: linear-gradient(120deg, var(--navy-a), var(--navy-b)) !important; color: #e7eef8; border-bottom: 0;
  box-shadow: 0 1px 0 rgba(34,211,238,.25), 0 8px 24px rgba(15,40,80,.18);
}
.appHeader .pageTitle, .appHeader .pageTitle h3, .appHeader h3 { color: #fff !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; }
.appHeader .headerButton, .appHeader .headerButton ion-icon { color: #e7eef8 !important; }
.appHeader .headerButton .imaged { border-radius: 50%; box-shadow: 0 0 0 2px rgba(34,211,238,.55); }
.wallet-card-section:before { background: linear-gradient(120deg, var(--navy-a), var(--navy-b)) !important; }

/* Kartu */
.card, .wallet-card, .stat-box, .listview.inset, .profileBox + .listview {
  border-radius: 14px; border: 1px solid var(--line-2); box-shadow: var(--card-shadow);
}
.card, .wallet-card { position: relative; background: var(--panel); }
.card::before, .wallet-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent); }
.card .card-header { background: transparent; border-bottom-color: var(--line); color: var(--tx2); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.wallet-card .balance .title { color: var(--tx3); font-size: 13px; }
.wallet-card .balance .total { color: var(--tx1); font-weight: 700; letter-spacing: .01em; }
.wallet-card .wallet-footer { border-top-color: var(--line); }
.wallet-card .wallet-footer .item .icon-wrapper { border-radius: 12px; box-shadow: 0 6px 14px rgba(15,40,80,.12); }
.wallet-card .wallet-footer .item strong { color: var(--tx2); font-weight: 500; }
.wallet-card .balance .right .button { color: var(--accent); background: var(--accent-dim); }
.wallet-card .balance .right .button:hover { background: var(--accent); color: #fff; }

/* Kotak statistik absen masuk/pulang */
.stat-box { background: var(--panel); }
.stat-box .title { color: var(--tx3); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.stat-box .value { color: var(--tx1); }
.stat-box.bg-danger, .stat-box.bg-primary { border-color: transparent; box-shadow: 0 10px 26px rgba(31,111,208,.25); }
.stat-box.bg-danger .title, .stat-box.bg-primary .title, .stat-box.bg-secondary .title, .stat-box.bg-success .title { color: rgba(255,255,255,.8); }
.stat-box.bg-danger .value, .stat-box.bg-primary .value, .stat-box.bg-secondary .value, .stat-box.bg-success .value { color: #fff; }

/* Judul seksi */
.section-title { color: var(--tx1); font-weight: 600; }
.listview-title { color: var(--tx3); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* Tombol */
.btn { border-radius: 10px; font-weight: 500; letter-spacing: .01em; }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active {
  color: #fff !important; border-color: transparent !important; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)) !important; box-shadow: 0 8px 20px rgba(31,111,208,.28) !important;
}
.btn-danger, .btn-danger:hover, .btn-danger:focus { background: var(--crit) !important; border-color: var(--crit) !important; color: #fff !important; }
.btn-success, .btn-success:hover, .btn-success:focus { background: var(--good) !important; border-color: var(--good) !important; color: #fff !important; }
.btn-warning, .btn-warning:hover, .btn-warning:focus { background: var(--warn) !important; border-color: var(--warn) !important; color: #3a2a00 !important; }
.btn-outline-primary { color: var(--accent) !important; border-color: rgba(var(--accent-rgb), .5) !important; background: transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary:active { background: var(--accent-dim) !important; }

/* Form */
.form-control, .form-group.boxed .form-control, .custom-select { border-color: var(--line-2); color: var(--tx1); border-radius: 10px; }
.form-control:focus, .custom-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.form-group.basic .form-control, .form-group.basic .custom-select { border-radius: 0; border-bottom-color: var(--line-2); box-shadow: none; }
.form-group.basic .form-control:focus, .form-group.basic .custom-select:focus { border-bottom-color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.form-group .label, .form-group.basic .label { color: var(--tx3); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.form-control::placeholder { color: #9aa6b8; }

/* Tabel */
.table { color: var(--tx1); }
.table thead th, .table.bg-danger th, .table-dark.bg-danger th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.table.table-dark.bg-danger, .table-dark.bg-danger { background: linear-gradient(120deg, var(--navy-a), var(--navy-b)) !important; border-radius: 12px; overflow: hidden; }
.table.table-dark.bg-danger td, .table.table-dark.bg-danger th { border-color: rgba(255,255,255,.08); }

/* Badge & alert */
.badge { border-radius: 6px; font-weight: 600; letter-spacing: .03em; }
.badge-primary, .badge-danger.badge-primary { background: var(--primary); }
.badge-success { background: var(--good); }
.badge-warning { background: var(--warn); color: #3a2a00; }
.badge-danger { background: var(--crit); }
.alert { border-radius: 10px; }
.alert-primary, .alert-info { background: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .35); color: var(--accent-hover); }
.alert-success { background: rgba(15,154,139,.08); border-color: rgba(15,154,139,.45); color: #0b7a6d; }
.alert-warning { background: rgba(224,160,0,.10); border-color: rgba(224,160,0,.45); color: #8a5d00; }
.alert-danger { background: rgba(224,72,72,.08); border-color: rgba(224,72,72,.45); color: #a92424; }

/* Menu bawah */
.appBottomMenu { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(15,40,80,.06); }
.appBottomMenu .item strong { color: var(--tx3); font-family: var(--font); }
.appBottomMenu .item .icon, .appBottomMenu .item ion-icon { color: var(--tx2); }
.appBottomMenu .item.active:before { background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); }
.appBottomMenu .item.active .icon, .appBottomMenu .item.active ion-icon, .appBottomMenu .item.active strong { color: var(--accent) !important; }
.appBottomMenu .item:hover .icon, .appBottomMenu .item:hover ion-icon, .appBottomMenu .item:hover strong { color: var(--tx1); }
.appBottomMenu .item .action-button { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)) !important; box-shadow: 0 8px 20px rgba(31,111,208,.35); }

/* Sidebar panel */
.panelbox .modal-content { background: var(--panel); }
.profileBox { background: linear-gradient(120deg, var(--navy-a), var(--navy-b)) !important; color: #e7eef8; }
.profileBox .in strong, .profileBox .sidebar-close ion-icon { color: #fff !important; }
.profileBox .in .text-muted { color: #8ea3c0 !important; }
.profileBox .image-wrapper .imaged { box-shadow: 0 0 0 2px rgba(34,211,238,.55); }
.listview .icon-box.bg-danger, .image-listview .icon-box.bg-danger { background: var(--accent-dim) !important; color: var(--accent) !important; border-radius: 10px; }
.listview > li .item:active, .listview > li a.item:hover { background: var(--accent-dim); }

/* Dropdown & modal */
.dropdown-menu { border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 18px 44px rgba(15,40,80,.18); }
.dropdown-item { border-radius: 8px; color: var(--tx1); }
.dropdown-item:hover, .dropdown-item:active { background: var(--accent-dim); color: var(--tx1); }
.modal-content { border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), .3); }
.modal-header { border-bottom-color: var(--line); }
.modal-footer { border-top-color: var(--line); }
.modal-title { color: var(--tx1); font-weight: 600; }
.dialogbox .modal-dialog .modal-content { border-radius: 16px; }
.dialogbox .modal-dialog .modal-content .btn-list .btn { color: var(--accent); }

/* Paginasi (sw-custom) */
.pagination > li > a:hover, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span { background: var(--primary); border-color: var(--primary); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* Loader */
#loader { background: linear-gradient(120deg, var(--navy-a), var(--navy-b)); }
.spinner-border.text-primary { color: var(--accent) !important; }
.progress-bar.bg-success { background: linear-gradient(90deg, var(--grad-a), var(--grad-b)) !important; }