/* ============================================================
   HRIS Kantor — Design System "Soft Dusty Blue"
   Palet lembut & menenangkan: biru debu, netral terang,
   warna status pastel redup. Tanpa aksen mencolok.
   ============================================================ */

:root {
    /* Netral lembut */
    --bg:               #F6F8FB;
    --card:             #FFFFFF;
    --side-bg:          #FAFBFD;
    --ink:              #2B3A55;
    --ink-2:            #71809B;
    --ink-3:            #A3ADc2;
    --separator:        rgba(43, 58, 85, 0.09);
    --fill:             rgba(43, 58, 85, 0.045);
    --fill-strong:      rgba(43, 58, 85, 0.08);

    /* Brand — dusty blue */
    --brand:            #4E6E97;
    --brand-hover:      #415E84;
    --brand-soft:       #8CA3C2;
    --brand-tint:       rgba(78, 110, 151, 0.10);

    /* Semantik lembut */
    --green:            #3E8E71;
    --green-bg:         rgba(62, 142, 113, 0.11);
    --orange:           #A97B3C;
    --orange-bg:        rgba(169, 123, 60, 0.12);
    --red:              #B65C54;
    --red-bg:           rgba(182, 92, 84, 0.10);
    --info:             #4E86A8;
    --info-bg:          rgba(78, 134, 168, 0.11);

    --radius:           18px;
    --radius-sm:        12px;
    --shadow:           0 1px 2px rgba(43, 58, 85, 0.04), 0 6px 20px rgba(43, 58, 85, 0.045);
    --shadow-lift:      0 12px 32px rgba(43, 58, 85, 0.13);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Font brand ---------- */
@font-face {
    font-family: 'Nasalization';
    src: url('/fonts/Nasalization.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.brand-font {
    font-family: 'Nasalization', var(--font);
    font-weight: 400;
    letter-spacing: .03em;
}

/* ---------- Brand badge frame ---------- */
.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .3em .7em .3em .55em;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    line-height: 1;
    transition: background .15s ease;
}
.brand-badge:hover {
    background: rgba(255, 255, 255, 0.20);
}

.brand-badge .brand-badge-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
}

.brand-badge .brand-badge-text {
    font-size: 15px;
    color: #fff;
    letter-spacing: .04em;
}

/* Navbar brand (light bg) */
.brand-badge-nav {
    background: var(--brand-tint);
    border: 1px solid rgba(78, 110, 151, 0.15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.brand-badge-nav:hover {
    background: rgba(78, 110, 151, 0.17);
}
.brand-badge-nav .brand-badge-icon {
    background: var(--brand);
    color: #fff;
}
.brand-badge-nav .brand-badge-text {
    color: var(--brand);
}

/* ---------- Dasar ---------- */
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
a { color: var(--brand); }
.text-muted { color: var(--ink-2) !important; }
.fw-bold    { font-weight: 700 !important; }
.fw-semibold{ font-weight: 600 !important; }

/* Judul besar halaman */
.large-title {
    font-size: clamp(25px, 3.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-2);
    margin-bottom: .55rem;
}
.section-title::before {
    content: "";
    width: 14px; height: 3px;
    border-radius: 2px;
    background: var(--brand-soft);
    opacity: .8;
}

/* ---------- Kartu ---------- */
.card {
    border: none;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card > .card-header {
    background: transparent;
    border-bottom: 0.5px solid var(--separator);
    font-weight: 600;
    font-size: 15px;
    padding: 1rem 1.25rem;
}
.card > .card-footer {
    background: transparent;
    border-top: 0.5px solid var(--separator);
    padding: .85rem 1.25rem;
}

/* ---------- Maskot kartu "Hari Ini" ---------- */
.stat-card-wrap { position: relative; }
.mascot-back-slot { display: contents; }
.card-mascot {
    position: absolute;
    top: -72px;
    right: 26px;
    left: auto;
    width: 140px;
    height: 124px;
    transform-origin: 50% 100%;
    animation: mascot-bob 3.4s ease-in-out infinite;
    z-index: 0;
    pointer-events: auto;
    cursor: pointer;
}
.mascot-wave {
    transform-box: view-box;
    transform-origin: 46% 64%;  /* titik bahu lengan yang terangkat */
    animation: mascot-wave 1.6s ease-in-out infinite;
}
@keyframes mascot-wave {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(10deg); }
}

/* ---------- Pemilih gaya karakter ---------- */
#mascotMain {
    position: absolute;
    top: -72px;
    right: 26px;
    width: 140px;
    height: 124px;
    cursor: pointer;
    z-index: 5;
}
#mascotMain:focus-visible {
    outline: 2px dashed rgba(255, 255, 255, 0.8);
    outline-offset: 4px;
    border-radius: 24px;
}
.mascot-option {
    background: #fff;
    border: 1.5px solid var(--separator);
    border-radius: 16px;
    padding: .8rem .5rem .7rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mascot-option:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.mascot-option.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.mascot-option .card-mascot {
    position: static !important;
    width: 84px;
    height: 74px;
    z-index: auto;
    animation: none;
}
.card-mascot .mascot-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: mascot-blink 4.5s infinite;
}
@keyframes mascot-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-3px) rotate(2deg); }
}
@keyframes mascot-blink {
    0%, 93%, 100% { transform: scaleY(1); }
    96%           { transform: scaleY(0.12); }
}

.ios-list .list-group-item {
    border-left: none; border-right: none; border-top: none;
    border-bottom: 0.5px solid var(--separator);
    padding: .95rem 1.25rem;
}
.ios-list .list-group-item:last-child { border-bottom: none; }

/* ---------- Tombol ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 15px;
    padding: .55rem 1.15rem;
    transition: transform .08s ease, filter .15s ease, background-color .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-sm { font-size: 13px; padding: .38rem .8rem; border-radius: 10px; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-hover);
    --bs-btn-disabled-bg: rgba(78, 110, 151, .45);
    box-shadow: 0 3px 10px rgba(78, 110, 151, 0.20);
}
.btn-success {
    --bs-btn-bg: #47977C;
    --bs-btn-border-color: #47977C;
    --bs-btn-hover-bg: #3A8168;
    box-shadow: 0 3px 10px rgba(62, 142, 113, 0.20);
}
.btn-danger  { --bs-btn-bg: #B66A62; --bs-btn-border-color: #B66A62; --bs-btn-hover-bg: #A25A52; }
.btn-warning { --bs-btn-bg: #B08853; --bs-btn-border-color: #B08853; --bs-btn-hover-bg: #9A7544; color:#fff; }

/* Tombol tinted */
.btn-ios {
    background: var(--brand-tint);
    color: var(--brand);
    border: none;
}
.btn-ios:hover { background: rgba(78, 110, 151, 0.17); color: var(--brand-hover); }

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: rgba(78, 110, 151, .45);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
}
.btn-outline-secondary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: rgba(43,58,85,.22); }
.btn-light {
    --bs-btn-bg: var(--fill);
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--fill-strong);
    --bs-btn-hover-color: var(--ink);
}

/* ---------- Form ---------- */
.form-control, .form-select {
    background-color: var(--fill);
    border: none;
    border-radius: var(--radius-sm);
    padding: .62rem .95rem;
    font-size: 15px;
    color: var(--ink);
    transition: box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border: none;
    box-shadow: 0 0 0 3px rgba(78, 110, 151, 0.16);
    color: var(--ink);
}
.form-control::placeholder { color: var(--ink-3); }
.input-group-text {
    background: var(--fill);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
}
.form-label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2371809B' stroke-width='2' stroke-linecap='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

/* ---------- Tabel ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; color: var(--ink); }
.table > :not(caption) > * > * { padding: .95rem .95rem; }
.table thead th {
    font-size: 11.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-2);
    background: transparent;
    border-bottom: 0.5px solid var(--separator);
    white-space: nowrap;
}
.table tbody td { border-bottom: 0.5px solid rgba(43, 58, 85, 0.06); }
.table tbody tr:last-child td { border-bottom: none; }
.table tfoot td { border-top: 0.5px solid var(--separator); }
.table-light { --bs-table-bg: transparent; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(78,110,151,.04); background: rgba(78,110,151,.04); }

/* ---------- Badge ---------- */
.badge {
    border-radius: 100px;
    font-weight: 600;
    font-size: 12px;
    padding: .38em .85em;
    letter-spacing: 0;
}
.bg-success { background: var(--green-bg) !important;  color: var(--green) !important; }
.bg-warning { background: var(--orange-bg) !important; color: var(--orange) !important; }
.bg-info    { background: var(--info-bg) !important;   color: var(--info) !important; }
.bg-danger  { background: var(--red-bg) !important;    color: var(--red) !important; }
.bg-secondary { background: var(--fill-strong) !important; color: var(--ink-2) !important; }
.bg-primary   { background: var(--brand-tint) !important; color: var(--brand) !important; }
.bg-light   { background: var(--fill) !important; color: var(--ink-2) !important; border: none; }

/* ---------- Alert ---------- */
.alert {
    border: none;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow);
}
.alert-success { background: var(--green-bg);  color: var(--green); }
.alert-danger  { background: var(--red-bg);    color: var(--red); }
.alert-warning { background: var(--orange-bg); color: var(--orange); }
.alert-info    { background: var(--info-bg);   color: var(--info); }

/* ---------- Dropdown & Modal ---------- */
.dropdown-menu {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(43, 58, 85, .14);
    padding: .4rem;
    font-size: 14.5px;
}
.dropdown-item { border-radius: 10px; padding: .55rem .75rem; font-weight: 500; }
.dropdown-item:hover { background: var(--fill); }

.modal-content { border: none; border-radius: 22px; box-shadow: 0 24px 80px rgba(43, 58, 85, .25); }
.modal-header { border-bottom: 0.5px solid var(--separator); }
.modal-footer { border-top: 0.5px solid var(--separator); }
.modal-backdrop.show { opacity: .32; }

/* ---------- Paginasi ---------- */
.pagination { gap: 4px; }
.page-link {
    border: none;
    border-radius: 10px !important;
    color: var(--brand);
    font-weight: 600;
    min-width: 34px;
    text-align: center;
    background: transparent;
}
.page-item.active .page-link { background: var(--brand); color: #fff; }
.page-link:hover, .page-link:focus { background: var(--fill); box-shadow: none; color: var(--brand-hover); }

/* ---------- Navbar atas ---------- */
.ios-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(250, 251, 253, 0.88);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    backdrop-filter: saturate(160%) blur(20px);
    border-bottom: 0.5px solid var(--separator);
}

/* ---------- Sidebar biru senada kartu (desktop) ---------- */
.ios-sidebar {
    width: 264px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    padding: 1.1rem calc(26px + .85rem) 6rem .85rem;
    background: transparent;
    border-right: none;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: .4rem .85rem 1.15rem;
}

.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: .68rem .9rem;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.84);
    text-decoration: none;
    font-weight: 500;
    font-size: 14.5px;
    transition: background .15s ease, color .15s ease;
    margin-bottom: 2px;
}
.sidebar-item i { width: 22px; text-align: center; font-size: 17px; color: rgba(255, 255, 255, 0.62); transition: color .15s ease; }
.sidebar-item:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
.sidebar-item:hover i { color: #fff; }

.sidebar-item.active {
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.85);
}
.sidebar-item.active i { color: #fff; }

.sidebar-section {
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, 0.52);
    padding: 1.1rem .9rem .45rem;
}

.ios-sidebar nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: .75rem;
}

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 34px 22px 4px;   /* sisi kanan aman dari panel utama */
    padding: .8rem .9rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(30, 50, 80, 0.28);
}
.sidebar-profile .avatar-circle {
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.92);
    flex-shrink: 0;
}
.profile-name { font-size: 13.5px; font-weight: 600; color: #fff; }
.profile-role { font-size: 11.5px; color: rgba(255, 255, 255, 0.65); }
.profile-logout {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background .15s ease, transform .08s ease;
}
.profile-logout:hover { background: #E5484D; color: #fff; }
.profile-logout:active { transform: scale(0.94); }

/* ---------- Efek cekung: isi utama menimpa sidebar secara penuh ---------- */
@media (min-width: 992px) {
    /* Header atas dihilangkan agar clean (logout ada di kartu profil sidebar) */
    .ios-navbar { display: none !important; }

    /* Halaman utama = kartu melayang DI ATAS sidebar */
    body:has(.ios-sidebar) .d-flex > main {
        position: relative;
        margin: 24px 20px 24px -26px;
        min-height: calc(100vh - 48px);
        border-radius: 30px;
        background: var(--bg);
        box-shadow:
            -14px 0 30px rgba(58, 86, 128, 0.22),
            0 12px 30px rgba(43, 58, 85, 0.08);
    }

    /* Seluruh latar di belakang kartu utama = gradasi biru penuh
       (attachment fixed agar gradasi selalu mengikuti viewport,
       menyatu mulus dengan area sidebar) */
    body:has(.ios-sidebar) {
        background-color: #4A6891;
        background-image: linear-gradient(168deg, #5B7BA4 0%, #4A6891 52%, #3A5680 100%);
        background-attachment: fixed;
    }
}

/* ---------- Tab bar bawah mobile ---------- */
.ios-tabbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1040;
    background: rgba(250, 251, 253, 0.92);
    -webkit-backdrop-filter: saturate(170%) blur(20px);
    backdrop-filter: saturate(170%) blur(20px);
    border-top: 0.5px solid var(--separator);
    display: flex;
    justify-content: space-around;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
}
.tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--ink-2);
    font-size: 10px;
    font-weight: 600;
    padding: 4px 0;
    border-radius: 12px;
}
.tabbar-item i { font-size: 21px; }
.tabbar-item.active { color: var(--brand); }

/* ---------- Statistik tergabung dalam satu kartu ---------- */
.stat-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 1.45rem 1rem;
    transition: background .15s ease;
}
.stat-segment:hover { background: rgba(78, 110, 151, 0.03); }
.stat-segment .stat-icon { width: 42px; height: 42px; font-size: 19px; }
.stat-segment .stat-value { font-size: clamp(21px, 2.6vw, 27px); }

@media (min-width: 768px) {
    .stat-segment:not(:last-child) { border-right: 0.5px solid var(--separator); }
}
@media (max-width: 767.98px) {
    .stat-segment { padding: 1rem .65rem; }
    .stat-cols-3 .stat-segment { border-bottom: 0.5px solid var(--separator); }
    .stat-cols-3 .stat-segment:last-child { border-bottom: none; }
    .stat-cols-4 .stat-segment { border-bottom: 0.5px solid var(--separator); }
    .stat-cols-4 .stat-segment:nth-last-child(-n+2) { border-bottom: none; }
    .stat-cols-4 .stat-segment:nth-child(odd) { border-right: 0.5px solid var(--separator); }
    .stat-cols-4 .stat-segment:nth-child(even) { border-right: none; }
}

.stat-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.stat-value { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }

/* Tint lembut selaras */
.tint-blue   { background: var(--brand-tint);  color: var(--brand); }
.tint-green  { background: var(--green-bg);    color: var(--green); }
.tint-orange { background: var(--orange-bg);   color: var(--orange); }
.tint-red    { background: var(--red-bg);      color: var(--red); }
.tint-teal   { background: var(--info-bg);     color: var(--info); }
.tint-purple { background: rgba(126, 106, 158, 0.11); color: #77629C; }
.tint-indigo { background: rgba(94, 116, 165, 0.11);  color: #5E74A5; }

/* ---------- Kartu presensi (hero lembut) ---------- */
.clock-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 22px;
    color: #EFF3FA;
    background: linear-gradient(130deg, #5B7BA4 0%, #4A6891 55%, #40608C 100%);
    box-shadow: 0 14px 34px rgba(74, 104, 145, 0.28);
}
.clock-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -110px; right: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    border: 38px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.clock-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -100px; left: -55px;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 65%);
    pointer-events: none;
}
.clock-btn {
    width: 92px; height: 92px;
    border-radius: 50%;
    border: none;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    transition: transform .1s ease;
    box-shadow: 0 8px 22px rgba(43, 58, 85, .22);
}
.clock-btn i { font-size: 22px; }
.clock-btn:active { transform: scale(.94); }
.clock-in  { background: #fff; color: var(--brand-hover); }
.clock-in:hover { background: #F2F6FC; }
.clock-out { background: rgba(255,255,255,.16); color: rgba(255,255,255,.92); backdrop-filter: blur(6px); }
.clock-btn:disabled { opacity: .38; }

/* ---------- Login (full-screen) ---------- */
.login-body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    min-height: 100vh;
}

.login-container {
    display: flex;
    min-height: 100vh;
}

/* Brand panel (kiri) */
.login-brand-panel {
    position: relative;
    flex: 1 1 50%;
    background: linear-gradient(160deg, #5B7BA4 0%, #4A6891 50%, #3E5C82 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3rem;
}
.login-brand-inner {
    position: relative;
    z-index: 2;
    max-width: 420px;
    color: #fff;
}
.login-brand-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 2rem;
    backdrop-filter: blur(8px);
}
.login-brand-title {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    margin-bottom: .6rem;
    letter-spacing: .02em;
    line-height: 1.1;
}
.login-brand-tagline {
    font-size: 16px;
    opacity: .82;
    line-height: 1.65;
    margin-bottom: 2.5rem;
}

/* Feature list */
.login-brand-features {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.login-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 500;
    opacity: .92;
}
.login-feature-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* Decorative */
.login-decor {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.login-decor-1 {
    top: -80px; right: -60px;
    width: 280px; height: 280px;
    border: 32px solid rgba(255, 255, 255, 0.06);
}
.login-decor-2 {
    bottom: -70px; left: -50px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 70%);
}
.login-decor-3 {
    top: 35%; right: 8%;
    width: 100px; height: 100px;
    border: 14px solid rgba(255, 255, 255, 0.05);
}
.login-decor-4 {
    top: 20%; left: 15%;
    width: 60px; height: 60px;
    background: rgba(255, 255, 255, 0.04);
}

/* Form panel (kanan) */
.login-form-panel {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: var(--bg);
    overflow-y: auto;
}
.login-form-inner {
    width: 100%;
    max-width: 400px;
}

/* Mobile brand */
.login-mobile-brand {
    text-align: center;
    margin-bottom: 2rem;
}
.login-mobile-brand-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(150deg, #6484AC 10%, #456592 90%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin-bottom: 1rem;
    box-shadow: 0 8px 22px rgba(69, 101, 146, 0.30);
}

/* Login card */
.login-form-card {
    background: var(--card);
    border-radius: 24px;
    padding: 2.25rem;
    box-shadow: var(--shadow);
    border: 0.5px solid var(--separator);
}

/* Alert */
.login-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .7rem 1rem;
    border-radius: 12px;
    background: var(--red-bg);
    color: var(--red);
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

/* Input group */
.login-input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-group .form-control {
    padding-left: 2.7rem;
    height: 48px;
    border-radius: 14px;
    font-size: 14.5px;
}
.login-input-icon {
    position: absolute;
    left: 15px;
    color: var(--ink-3);
    font-size: 16px;
    pointer-events: none;
    z-index: 2;
}
.login-pw-toggle {
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    z-index: 2;
}
.login-pw-toggle:hover {
    background: var(--fill);
    color: var(--ink-2);
}

/* Submit button */
.login-btn {
    height: 50px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .1s ease, box-shadow .15s ease;
}
.login-btn:active { transform: scale(.98); }
.login-btn i { transition: transform .2s ease; }
.login-btn:hover i { transform: translateX(3px); }

/* Responsive */
@media (max-width: 991.98px) {
    .login-container {
        flex-direction: column;
    }
    .login-brand-panel {
        flex: 0 0 auto;
        min-height: 0;
        padding: 2.5rem 2rem;
    }
    .login-brand-inner {
        text-align: center;
        max-width: 100%;
    }
    .login-brand-features {
        display: none;
    }
    .login-form-panel {
        flex: 1 1 auto;
        padding: 1.5rem;
    }
}
.app-icon {
    width: 72px; height: 72px;
    border-radius: 19px;
    background: linear-gradient(150deg, #6484AC 10%, #456592 90%);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 34px;
    box-shadow: 0 12px 28px rgba(69, 101, 146, 0.30);
}
.app-icon-flat {
    background: transparent;
    box-shadow: none;
    color: var(--brand);
}

/* ---------- Slip gaji ---------- */
.slip-sheet {
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.slip-hero {
    color: #EFF3FA;
    background: linear-gradient(130deg, #5B7BA4 0%, #456592 100%);
}
.net-pay-pill {
    border-radius: 16px;
    background: var(--green-bg);
    border: 0.5px solid rgba(62, 142, 113, 0.18);
}
.signature-line { border-top: 1.5px solid var(--ink); display: inline-block; }

/* ---------- Utilitas ---------- */
.hairline { height: 0.5px; background: var(--separator); border: none; opacity: 1; }
.rounded-ios { border-radius: var(--radius); }
.avatar-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
}

code {
    background: var(--fill);
    color: var(--brand);
    border-radius: 6px;
    padding: .1em .4em;
}

/* ---------- Dashboard card helpers ---------- */
.stat-card-wrap { overflow: visible; }
.stat-card-wrap > .card { overflow: visible; }

@media (max-width: 767.98px) {
    .stat-card-wrap .stat-segment { flex-direction: row; text-align: left; }
    .stat-card-wrap .stat-segment > div { min-width: 0; }
    .stat-card-wrap .stat-value { font-size: clamp(18px, 5vw, 24px); }
}

/* Bottom section cards: equalise height */
.dashboard-bottom .card { min-height: 0; }

/* Announcement cards: ensure consistent card height */
.announcement-card { transition: transform .12s ease, box-shadow .15s ease; }
.announcement-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* Payslip hero card */
.payslip-hero-card .stat-value { font-size: clamp(20px, 4vw, 28px); }

/* List card flex grow */
.list-card-equal { display: flex; flex-direction: column; }
.list-card-equal > .list-group { flex: 1 1 auto; }
.list-card-equal > .card-footer { flex-shrink: 0; }

/* ---------- Diagram Jabatan (Org Chart) ---------- */
.org-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 .5rem;
}

.org-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.org-nodes-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 .5rem;
}

.org-node {
    background: var(--card);
    border-radius: 14px;
    padding: .85rem 1.1rem;
    text-align: center;
    box-shadow: var(--shadow);
    min-width: 160px;
    max-width: 220px;
    transition: transform .12s ease, box-shadow .15s ease;
    position: relative;
}
.org-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.org-node-company {
    border-top: 3px solid var(--brand);
}

.org-node-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand);
    background: var(--brand-tint);
    padding: .2em .65em;
    border-radius: 6px;
    margin-bottom: .4rem;
}

.org-node-title {
    font-weight: 650;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.25;
}

.org-node-sub {
    font-size: 12px;
    color: var(--ink-2);
    margin-top: 2px;
}

/* Connector lines */
.org-connector-down {
    width: 2px;
    height: 22px;
    background: var(--brand-soft);
    opacity: .55;
    flex-shrink: 0;
}

.org-connector-to-depts {
    height: 28px;
}

.org-level-company + .org-level-company .org-connector-down {
    height: 0;
}

/* Department cards */
.org-dept-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    height: 100%;
}

.org-dept-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, var(--brand-tint), rgba(78,110,151,.04));
    border-bottom: 0.5px solid var(--separator);
}

.org-dept-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.org-dept-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

.org-dept-body {
    padding: .75rem 1.15rem;
}

.org-dept-level {
    margin-bottom: .85rem;
}
.org-dept-level:last-child { margin-bottom: 0; }

.org-dept-level-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-2);
    margin-bottom: .45rem;
    padding-left: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.org-dept-level-label::after {
    content: "";
    flex: 1;
    height: 0.5px;
    background: var(--separator);
}

.org-dept-node {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .5rem .6rem;
    border-radius: 10px;
    transition: background .12s ease;
}
.org-dept-node:hover { background: var(--fill); }

.org-dept-node-empty {
    opacity: .5;
    border: 1px dashed var(--separator);
    margin-bottom: .35rem;
}
.org-dept-node-empty:hover { background: transparent; }

.org-dept-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.org-dept-node-info { min-width: 0; }

.org-dept-node-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legend */
.org-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: .75rem 1rem;
    background: var(--card);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.org-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ink-2);
}

.org-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-soft);
    opacity: calc(0.35 + var(--dot-level, 4) * 0.09);
}

/* Responsive */
@media (max-width: 767.98px) {
    .org-nodes-row { flex-direction: column; align-items: center; }
    .org-node { min-width: 140px; max-width: 100%; width: 100%; }
}

/* Responsif mobile */
@media (max-width: 991.98px) {
    body { padding-bottom: 74px; } /* ruang tab bar */
    .ios-sidebar { display: none; }
}
@media (min-width: 992px) {
    .ios-tabbar, .mobile-only { display: none !important; }
}