* {

  box-sizing:border-box;

}

/* =========================================================
   PROFILE & SECURITY
   ========================================================= */

.profile-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 20px;
    padding: 18px 0 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.profile-modern-card,
.password-modern-card {
    position: relative;
    overflow: hidden;

    padding: 24px;

    border: 1px solid #e3e7ef;
    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .045);
}

.profile-modern-card::before,
.password-modern-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    top: -100px;
    right: -80px;

    background:
        radial-gradient(
            circle,
            rgba(37, 52, 218, .09),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.profile-card-top {
    position: relative;
    z-index: 1;

    margin-bottom: 24px;
}

.profile-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.profile-heading-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #eef2ff,
        #e0e7ff
    );

    color: #1119b9;

    font-size: 16px;
}

.profile-heading-icon.security-icon {
    background: linear-gradient(
        135deg,
        #eff6ff,
        #dbeafe
    );

    color: #2563eb;
}

.section-eyebrow {
    display: block;

    margin-bottom: 4px;

    color: #1119b9;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.1px;
}

.profile-heading h3 {
    margin: 0;

    color: #172033;

    font-size: 17px;
    font-weight: 800;
}

.profile-heading p {
    margin: 6px 0 0;

    color: #7a8496;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   PROFILE SUMMARY
   ========================================================= */

.profile-modern-summary {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 20px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f7f9ff,
            #f3f5fb
        );

    border: 1px solid #e8ebf3;
}

.profile-avatar-modern {
    position: relative;

    width: 82px;
    height: 82px;

    flex: 0 0 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #4355f2,
            #080d9f
        );

    color: #fff;

    font-size: 31px;
    font-weight: 800;

    box-shadow:
        0 12px 24px rgba(17,25,185,.22);
}

.profile-online-dot {
    position: absolute;

    width: 14px;
    height: 14px;

    right: 3px;
    bottom: 3px;

    border: 3px solid #fff;

    border-radius: 50%;

    background: #22c55e;
}

.profile-modern-info {
    min-width: 0;
}

.profile-modern-info h2 {
    margin: 0 0 7px;

    color: #172033;

    font-size: 20px;
    font-weight: 800;
}

.profile-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;

    border-radius: 20px;

    background: #eef2ff;
    color: #1119b9;

    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   PROFILE DETAILS
   ========================================================= */

.profile-detail-modern {
    display: flex;

    gap: 24px;

    margin-top: 18px;
}

.profile-detail-item {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;
}

.profile-detail-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #fff;

    color: #4355f2;

    border: 1px solid #e4e8f1;

    font-size: 11px;
}

.profile-detail-item small {
    display: block;

    margin-bottom: 2px;

    color: #8992a3;

    font-size: 9px;
}

.profile-detail-item strong {
    display: block;

    max-width: 220px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #263246;

    font-size: 11px;
}


/* =========================================================
   ACCOUNT STATUS
   ========================================================= */

.profile-account-status {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 18px;

    padding: 12px 14px;

    border-radius: 11px;

    background: #f0fdf4;

    border: 1px solid #dcfce7;
}

.profile-account-status > i {
    color: #16a34a;
    font-size: 16px;
}

.profile-account-status strong {
    display: block;

    color: #166534;

    font-size: 10px;
}

.profile-account-status span {
    display: block;

    margin-top: 2px;

    color: #4b7a59;

    font-size: 9px;
}


/* =========================================================
   PASSWORD FORM
   ========================================================= */

.password-modern-form {
    position: relative;
    z-index: 1;
}

.password-modern-field {
    margin-bottom: 17px;
}

.password-modern-field label {
    display: block;

    margin-bottom: 7px;

    color: #263246;

    font-size: 11px;
    font-weight: 700;
}

.password-modern-input {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 48px;

    border: 1px solid #d9deea;

    border-radius: 11px;

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.password-modern-input:focus-within {
    border-color: #4355f2;

    box-shadow:
        0 0 0 3px rgba(67,85,242,.10);
}

.password-field-icon {
    width: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #536078;

    font-size: 12px;
}

.password-modern-input input {
    min-width: 0;
    flex: 1;

    height: 46px;

    padding: 0 5px;

    border: 0;
    outline: none;

    background: transparent;

    color: #172033;

    font-size: 12px;
}

.password-modern-input input::placeholder {
    color: #a0a9b8;
}

.password-modern-toggle {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 3px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #7b8799;

    cursor: pointer;

    font-size: 13px;

    transition:
        background .2s ease,
        color .2s ease;
}

.password-modern-toggle:hover {
    background: #eef2ff;
    color: #1119b9;
}

.password-hint {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 6px;

    color: #7b8799;

    font-size: 9px;
}

.password-hint i {
    color: #4355f2;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.password-modern-actions {
    padding-top: 3px;
}

.password-modern-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 45px;

    padding: 0 18px;

    border-radius: 10px;

    font-size: 11px;
    font-weight: 700;

    box-shadow:
        0 7px 16px rgba(17,25,185,.18);
}

.password-modern-submit > i:last-child {
    font-size: 10px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .profile-page {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .profile-page {
        gap: 13px;
        padding: 13px 0 20px;
    }

    .profile-modern-card,
    .password-modern-card {
        padding: 17px;
        border-radius: 15px;
    }

    .profile-heading h3 {
        font-size: 15px;
    }

    .profile-heading p {
        font-size: 11px;
    }

    .profile-modern-summary {
        align-items: flex-start;
        flex-direction: column;

        gap: 14px;

        padding: 16px;
    }

    .profile-avatar-modern {
        width: 68px;
        height: 68px;

        flex-basis: 68px;

        border-radius: 20px;

        font-size: 25px;
    }

    .profile-detail-modern {
        flex-direction: column;

        gap: 10px;

        margin-top: 15px;
    }

    .profile-detail-item strong {
        max-width: calc(100vw - 110px);
    }

    .password-modern-input {
        min-height: 46px;
    }

    .password-modern-input input {
        height: 44px;
    }

    .password-modern-submit {
        width: 100%;
    }

}

body {

  margin:0;

  font-family:Inter,Arial,sans-serif;

  background:#f5f7fb;

  color:#172033;

  font-size:14px;

}

.app-shell {

  display:flex;

  min-height:100vh;

}

.sidebar {

  width:230px;

  background:#000590;

  color:white;

  position:fixed;

  inset:0 auto 0 0;

  padding:18px 12px;

  z-index:20;

}

.brand {

  display:flex;

  align-items:center;

  gap:10px;

  padding:8px 8px 22px;

}

.brand strong {

  font-size:10px;

  line-height:1.3;

}

.brand-mark {

  width:42px;

  height:42px;

  border-radius:50%;

  background:#fff;

  color:#000590;

  display:grid;

  place-items:center;

  font-weight:900;

}

.brand-mark.large {

  width:64px;

  height:64px;

  margin:auto;

  font-size:22px;

}

.sidebar nav {

  display:flex;

  flex-direction:column;

  gap:4px;

}

.sidebar a {

  color:white;

  text-decoration:none;

  padding:11px 12px;

  border-radius:8px;

  display:flex;

  gap:10px;

  align-items:center;

}

.sidebar a:hover,.sidebar a:focus {

  background:rgba(255,255,255,.14);

}

.main {

  margin-left:230px;

  flex:1;

  min-width:0;

}

.topbar {

  height:64px;

  background:white;

  border-bottom:1px solid #e8ebf2;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 24px;

  position:sticky;

  top:0;

  z-index:10;

}

.page-title {

  font-size:18px;

  font-weight:800;

}

.user-menu {

  display:flex;

  align-items:center;

  gap:9px;

}

.user-menu small {

  display:block;

  color:#7c8798;

  font-size:11px;

}

.avatar {

  width:34px;

  height:34px;

  border-radius:50%;

  background:#000590;

  color:#fff;

  display:grid;

  place-items:center;

  font-weight:700;

}

.avatar.big {

  width:70px;

  height:70px;

  font-size:28px;

}

.main>section,.main>.panel,.main>.grid-2,.main>.stats-grid,.main>.quick-filter,.main>.alert {

  margin-left:24px;

  margin-right:24px;

}

.quick-filter {

  padding:16px 0;

  display:flex;

  gap:8px;

  align-items:center;

  flex-wrap:wrap;

}

.quick-filter button {

  border:1px solid #dfe4ed;

  background:#fff;

  border-radius:8px;

  padding:8px 12px;

}

.quick-filter .active {

  background:#000590;

  color:#fff;

  border-color:#000590;

}

.stats-grid {

  display:grid;

  grid-template-columns:repeat(7,minmax(130px,1fr));

  gap:12px;

}

.stat-card,.panel {

  background:white;

  border:1px solid #e6e9f0;

  border-radius:12px;

  box-shadow:0 2px 10px rgba(20,30,60,.03);

}

.stat-card {

  padding:16px;

}

.stat-card span {

  display:block;

  color:#6c7687;

  font-size:12px;

}

.stat-card strong {

  display:block;

  font-size:22px;

  margin:10px 0 5px;

}

.stat-card small {

  color:#16a34a;

}

.grid-2 {

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:16px;

  margin-top:16px;

}

.panel {

  padding:18px;

  margin-top:16px;

}

.panel h3 {

  margin:0 0 14px;

  font-size:15px;

}

.panel canvas {

  max-height:250px;

}

.legend {

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:12px;

  color:#5d6677;

}

.status-grid {

  display:grid;

  grid-template-columns:repeat(7,1fr);

  gap:10px;

}

.status-grid div {

  border:1px solid #e7eaf1;

  border-radius:9px;

  padding:12px;

}

.status-grid strong {

  display:block;

  font-size:22px;

  margin-top:6px;

}

.filter-panel {

  margin-top:16px;

}

.filters {

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:12px;

  align-items:end;

}

.filters label,.form-grid label {

  font-weight:700;

  font-size:12px;

  color:#505b6d;

}

.filters input,.filters select,.form-grid input,.form-grid select,.form-grid textarea,.login-card input {

  width:100%;

  margin-top:6px;

  padding:10px 11px;

  border:1px solid #d9deea;

  border-radius:8px;

  background:#fff;

  font:inherit;

}

.filters .wide {

  grid-column:span 2;

}

.filter-actions {

  grid-column:1/-1;

  display:flex;

  gap:8px;

  flex-wrap:wrap;

}

.btn {

  display:inline-block;

  border:0;

  border-radius:8px;

  padding:10px 14px;

  text-decoration:none;

  cursor:pointer;

  font-weight:700;

  font-size:13px;

}

.btn.primary {

  background:#000590;

  color:white;

}

.btn.outline {

  background:white;

  border:1px solid #000590;

  color:#000590;

}

.btn.light {

  background:#eef1f7;

  color:#263149;

}

.btn.danger {

  background:#dc2626;

  color:white;

}

.btn.full {

  width:100%;

}

.table-panel {

  overflow:hidden;

}

.table-head {

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:10px;

}

.table-head>div {

  display:flex;

  gap:8px;

}

.table-wrap {

  overflow:auto;

}

table {

  width:100%;

  border-collapse:collapse;

  min-width:1000px;

}

th,td {

  padding:11px 10px;

  border-bottom:1px solid #edf0f5;

  text-align:left;

  white-space:nowrap;

}

th {

  font-size:11px;

  color:#697487;

  background:#f9fafc;

  text-transform:uppercase;

}

td {

  font-size:12px;

}

.badge {

  color:white;

  padding:4px 8px;

  border-radius:999px;

  font-size:11px;

}

.form-panel {

  max-width:1100px;

}

.form-grid {

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:14px;

}

.form-grid .wide {

  grid-column:1/-1;

}

.form-grid textarea {

  min-height:90px;

  resize:vertical;

}

.form-actions {

  display:flex;

  gap:8px;

  justify-content:flex-end;

  grid-column:1/-1;

  margin-top:6px;

}

.danger-zone {

  border-top:1px solid #eee;

  margin-top:18px;

  padding-top:16px;

  display:flex;

  gap:8px;

  justify-content:flex-end;

}

.alert {

  padding:12px 14px;

  border-radius:8px;

  margin-top:14px;

}

.alert.success {

  background:#ecfdf3;

  color:#166534;

}

.alert.danger {

  background:#fef2f2;

  color:#991b1b;

}

.profile-large {

  display:flex;

  gap:18px;

  align-items:center;

}

.login-page {

  min-height:100vh;

  display:grid;

  place-items:center;

  background:#f5f7fb;

}

.login-card {

  background:white;

  width:min(420px,calc(100% - 30px));

  padding:34px;

  border-radius:16px;

  box-shadow:0 10px 40px rgba(0,0,0,.08);

  text-align:left;

}

.login-card h1 {

  text-align:center;

}

.login-card p {

  text-align:center;

  color:#697487;

  margin-bottom:24px;

}

.login-card label {

  display:block;

  font-weight:700;

  margin:14px 0;

}

.login-card .brand-mark {

  margin:0 auto 15px;

}

.login-card input {

  margin-top:7px;

}

.login-card button {

  margin-top:15px;

}

.danger-zone form {

  margin:0;

}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .stats-grid {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
    }

    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   LOGIN PAGE
   ========================================================= */

html,
body.login-page {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

body.login-page {
    min-height: 100vh;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #f5f7fb;
}

body.login-page .login-card {
    box-sizing: border-box;

    width: min(420px, calc(100% - 32px));

    margin: 0 !important;
    padding: 34px;

    background: #fff;
    border-radius: 16px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);

    text-align: left;
}

body.login-page .login-card h1 {
    margin: 0;
    text-align: center;
}

body.login-page .login-card p {
    text-align: center;
}


/* =========================================================
   MODERN SIDEBAR NAVIGATION
   ========================================================= */

.sidebar {
    z-index: 1000;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 46px;
    padding: 7px 12px;

    border-radius: 10px;

    color: rgba(255, 255, 255, .88);
    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.sidebar-nav a:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

.sidebar-nav a.active {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.sidebar-nav a.active .nav-icon {
    transform: scale(1.04);
}


/* =========================================================
   NAV ICON
   ========================================================= */

.nav-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    transition: transform .2s ease;
}

.nav-icon svg {
    width: 18px;
    height: 18px;

    stroke-width: 2.2;
}


/* Icon colors */

.icon-blue {
    background: rgba(59, 130, 246, .18);
    color: #60a5fa;
}

.icon-cyan {
    background: rgba(34, 211, 238, .16);
    color: #67e8f9;
}

.icon-green {
    background: rgba(74, 222, 128, .16);
    color: #86efac;
}

.icon-purple {
    background: rgba(192, 132, 252, .16);
    color: #d8b4fe;
}

.icon-emerald {
    background: rgba(52, 211, 153, .16);
    color: #6ee7b7;
}

.icon-orange {
    background: rgba(251, 146, 60, .16);
    color: #fdba74;
}

.icon-indigo {
    background: rgba(129, 140, 248, .16);
    color: #a5b4fc;
}

.icon-sky {
    background: rgba(56, 189, 248, .16);
    color: #7dd3fc;
}

.icon-red {
    background: rgba(248, 113, 113, .16);
    color: #fca5a5;
}


/* =========================================================
   LOGOUT
   ========================================================= */

.sidebar-nav .nav-logout {
    margin-top: 10px;
}

.sidebar-nav .nav-logout:hover {
    background: rgba(248, 113, 113, .10);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-button {
    display: none;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 0;
    border-radius: 9px;

    background: #eef1f7;
    color: #000590;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    position: relative;
    z-index: 1002;
}

.mobile-menu-button svg {
    width: 22px;
    height: 22px;
}


/* =========================================================
   SIDEBAR CLOSE BUTTON
   ========================================================= */

.sidebar-close {
    display: none;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 0;
    border-radius: 9px;

    background: rgba(255, 255, 255, .10);
    color: #fff;

    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.sidebar-close svg {
    width: 21px;
    height: 21px;
}


/* =========================================================
   SIDEBAR OVERLAY
   ========================================================= */

.sidebar-overlay {
    display: block;

    position: fixed;
    inset: 0;

    z-index: 999;

    background: rgba(15, 23, 42, .48);

    opacity: 0;

    /*
     * PENTING:
     * Saat sidebar tertutup, overlay tidak boleh
     * menangkap klik.
     */
    pointer-events: none;

    transition: opacity .25s ease;
}

.sidebar-overlay.visible {
    opacity: 1;

    /*
     * Saat sidebar terbuka, overlay boleh diklik
     * untuk menutup sidebar.
     */
    pointer-events: auto;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* =========================================================
   TABLET & MOBILE
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------
       PAGE
       ----------------------------------------- */

    body.menu-open {
        overflow: hidden;
    }

    .main {
        margin-left: 0 !important;
        width: 100%;
        min-width: 0;
    }


    /* -----------------------------------------
       TOPBAR
       ----------------------------------------- */

    .topbar {
        position: relative;
        z-index: 1001;

        min-height: 58px;
        padding: 0 14px;
    }

    .topbar-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .page-title {
        font-size: 16px;
    }


    /* -----------------------------------------
       HAMBURGER
       ----------------------------------------- */

    .mobile-menu-button {
        display: inline-flex;

        width: 40px;
        height: 40px;

        padding: 0;

        border: 0;
        border-radius: 9px;

        background: #eef1f7;
        color: #000590;

        align-items: center;
        justify-content: center;

        cursor: pointer;

        position: relative;
        z-index: 1002;
    }

    .mobile-menu-button svg {
        width: 22px;
        height: 22px;
    }


    /* -----------------------------------------
       SIDEBAR MOBILE
       ----------------------------------------- */

    .sidebar {
        position: fixed;

        /*
         * Mulai di bawah topbar supaya
         * bagian atas sidebar tidak terpotong.
         */
        top: 58px;
        right: auto;
        bottom: 0;
        left: 0;

        width: 280px;
        max-width: 86vw;

        padding: 18px 12px;

        transform: translateX(-105%);
        transition: transform .28s ease;

        z-index: 1000;

        overflow-y: auto;
        overflow-x: hidden;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }


    /* -----------------------------------------
       SIDEBAR BRAND
       ----------------------------------------- */

    .sidebar .brand {
        position: relative;

        padding: 8px 52px 22px 8px;
    }


    /* -----------------------------------------
       CLOSE BUTTON
       ----------------------------------------- */

    .sidebar-close {
        display: inline-flex;

        position: absolute;

        top: 50%;
        right: 10px;

        transform: translateY(-50%);

        width: 38px;
        height: 38px;

        padding: 0;

        border: 0;
        border-radius: 9px;

        background: rgba(255, 255, 255, .10);
        color: #fff;

        align-items: center;
        justify-content: center;

        cursor: pointer;
    }

    .sidebar-close svg {
        width: 21px;
        height: 21px;
    }


    /* -----------------------------------------
       SIDEBAR NAVIGATION
       ----------------------------------------- */

    .sidebar-nav {
        display: flex;
        flex-direction: column;

        gap: 6px;

        padding: 0 10px 20px;
    }

    .sidebar-nav a {
        display: flex;
        align-items: center;
        gap: 12px;

        min-height: 52px;

        padding: 8px 12px;

        border-radius: 11px;

        color: rgba(255, 255, 255, .88);
        text-decoration: none;

        font-size: 14px;
        font-weight: 600;

        transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;
    }

    .sidebar-nav a:hover {
        background: rgba(255, 255, 255, .10);
        color: #fff;
    }

    .sidebar-nav a.active {
        background: rgba(255, 255, 255, .15);
        color: #fff;
    }


    /* -----------------------------------------
       NAV ICON
       ----------------------------------------- */

    .nav-icon {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: 10px;
    }

    .nav-icon svg {
        width: 20px;
        height: 20px;

        stroke-width: 2.2;
    }


    /* -----------------------------------------
       OVERLAY
       ----------------------------------------- */

    .sidebar-overlay {
        display: block;

        position: fixed;
        inset: 0;

        z-index: 999;

        background: rgba(15, 23, 42, .48);

        opacity: 0;

        pointer-events: none;

        transition: opacity .25s ease;
    }

    .sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }


    /* -----------------------------------------
       CONTENT SPACING
       ----------------------------------------- */

    .main > section,
    .main > .panel,
    .main > .grid-2,
    .main > .stats-grid,
    .main > .quick-filter,
    .main > .alert {
        margin-left: 14px;
        margin-right: 14px;
    }


    /* -----------------------------------------
       DASHBOARD
       ----------------------------------------- */

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       FORM
       ----------------------------------------- */

    .filters,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .filters .wide,
    .form-grid .wide {
        grid-column: auto;
    }


    /* -----------------------------------------
       STATUS
       ----------------------------------------- */

    .status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------
       USER INFO
       ----------------------------------------- */

    .user-info {
        display: none;
    }


    /* -----------------------------------------
       QUICK FILTER
       ----------------------------------------- */

    .quick-filter {
        position: relative;
        z-index: 5;

        display: flex;
        flex-wrap: wrap;
        align-items: center;

        gap: 8px;
    }

    .quick-filter a,
    .quick-filter button {
        position: relative;
        z-index: 6;

        cursor: pointer;
        pointer-events: auto;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .mobile-menu-button {
        width: 38px;
        height: 38px;
    }

    .topbar {
        min-height: 58px;
    }

    .page-title {
        font-size: 16px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .panel {
        padding: 14px;
    }

    .quick-filter {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .quick-filter span {
        width: 100%;
    }

    .quick-filter a,
    .quick-filter button {
        min-height: 38px;
    }

    .table-wrap table {
        min-width: 950px;
    }


    /* Login mobile */

    body.login-page .login-card {
        width: calc(100% - 28px);

        padding: 24px 20px;

        border-radius: 14px;
    }

    body.login-page .login-card h1 {
        font-size: 24px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        min-height: 58px;
    }

    .page-title {
        font-size: 15px;
    }

    .stat-card strong {
        font-size: 20px;
    }

    .panel {
        padding: 14px;
    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    .sidebar,
    .topbar,
    .quick-filter,
    .btn,
    .filter-panel,
    .mobile-menu-button,
    .sidebar-overlay {
        display: none !important;
    }

    .main {
        margin: 0;
    }

    .panel {
        box-shadow: none;
        border: 0;
    }

    .main > section,
    .main > .panel {
        margin: 0 0 12px;
    }

    .table-wrap {
        overflow: visible;
    }

    body {
        background: #fff;
    }

}

/* =========================================================
   MODERN LOGIN PAGE
   ========================================================= */

body.login-page {
    margin: 0;
    min-height: 100vh;
    background: #f3f5fa;
    font-family: Inter, Arial, sans-serif;
}


/* =========================================================
   LOGIN WRAPPER
   ========================================================= */

.login-modern {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(430px, 0.75fr);
    background: #f3f5fa;
}


/* =========================================================
   BRANDING PANEL
   ========================================================= */

.login-brand-panel {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    display: flex;
    align-items: center;

    padding: 70px 8%;
    
    background:
        radial-gradient(
            circle at 78% 88%,
            rgba(72, 88, 255, 0.22),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #2837d9 0%,
            #151dbd 23%,
            #080e9d 55%,
            #000590 100%
        );

    color: #fff;
}


/* Decorative background */

.login-brand-bg::before {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    right: -240px;
    bottom: -260px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.06);
    box-shadow:
        0 0 0 70px rgba(255,255,255,.018),
        0 0 0 140px rgba(255,255,255,.012);
}

.login-brand-bg::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -180px;
    top: -180px;

    border-radius: 50%;

    background: rgba(255,255,255,.035);
}


/* =========================================================
   BRAND CONTENT
   ========================================================= */

.login-brand-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 560px;

    margin: 0 auto;
}


/* Logo */

.login-company-logo {
    width: 300px;
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 14px;

    background: rgba(255,255,255,.96);

    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.16);

    margin-bottom: 32px;
}

.login-company-logo img {
    display: block;

    width: 100%;
    max-width: 250px;
    height: auto;

    object-fit: contain;
}


/* Heading */

.login-brand-content h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.12;

    font-weight: 800;
    letter-spacing: -1.2px;
}


/* Line */

.login-brand-line {
    width: 46px;
    height: 4px;

    margin: 22px 0 20px;

    border-radius: 99px;

    background: rgba(255,255,255,.82);
}


/* Description */

.login-brand-description {
    max-width: 520px;

    margin: 0;

    color: rgba(255,255,255,.82);

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   FEATURES
   ========================================================= */

.login-features {
    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-top: 32px;
}

.login-feature {
    display: flex;
    align-items: center;

    gap: 14px;
}

.login-feature-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    font-size: 16px;

    background: rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}

.login-feature strong {
    display: block;

    margin-bottom: 2px;

    color: #fff;

    font-size: 13px;
    font-weight: 700;
}

.login-feature span {
    display: block;

    color: rgba(255,255,255,.66);

    font-size: 11px;
    line-height: 1.45;
}


/* Icon colors */

.login-feature-icon.icon-blue {
    color: #60a5fa;
}

.login-feature-icon.icon-cyan {
    color: #67e8f9;
}

.login-feature-icon.icon-purple {
    color: #d8b4fe;
}


/* =========================================================
   BRAND FOOTER
   ========================================================= */

.login-brand-footer {
    margin-top: 42px;
}

.login-brand-footer span {
    display: block;

    width: 38px;
    height: 3px;

    margin-bottom: 12px;

    border-radius: 99px;

    background: rgba(255,255,255,.65);
}

.login-brand-footer p {
    margin: 0;

    color: rgba(255,255,255,.85);

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   LOGIN FORM PANEL
   ========================================================= */

.login-form-panel {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 46px;

    background: #f3f5fa;
}


/* Card */

.login-form-card {
    width: 100%;
    max-width: 420px;

    padding: 42px 46px;

    background: #fff;

    border: 1px solid #e1e6ef;

    border-radius: 20px;

    box-shadow:
        0 20px 50px rgba(23,32,51,.10);
}


/* =========================================================
   MOBILE LOGO
   ========================================================= */

.login-mobile-logo {
    display: none;

    width: 200px;
    height: 100px;

    align-items: center;
    justify-content: center;

    margin: 0 auto 24px;

    background: #fff;

    border: 1px solid #e1e6ef;

    border-radius: 17px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.08);
}

.login-mobile-logo img {
    width: 150px;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   WELCOME
   ========================================================= */

.login-welcome > span {
    display: block;

    margin-bottom: 7px;

    color: #000590;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.8px;
}

.login-welcome h1 {
    margin: 0 0 8px;

    color: #172033;

    font-size: 29px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.7px;
}

.login-welcome p {
    margin: 0;

    color: #697487;

    font-size: 12px;
    line-height: 1.65;
}


/* =========================================================
   ERROR
   ========================================================= */

.login-error {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 22px;
    padding: 11px 13px;

    border: 1px solid #fecaca;

    border-radius: 9px;

    background: #fff5f5;

    color: #dc2626;

    font-size: 11px;
    line-height: 1.45;
}

.login-error i {
    flex: 0 0 auto;
}


/* =========================================================
   FORM
   ========================================================= */

.login-form {
    margin-top: 27px;
}

.login-field {
    margin-bottom: 19px;
}

.login-field label {
    display: block;

    margin-bottom: 8px;

    color: #263149;

    font-size: 11px;
    font-weight: 700;
}


/* Input wrapper */

.login-input {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    height: 49px;

    border: 1px solid #d8deea;

    border-radius: 10px;

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.login-input:focus-within {
    border-color: #000590;

    box-shadow:
        0 0 0 3px rgba(0,5,144,.08);
}


/* Input icon */

.login-input-icon {
    width: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #000590;

    font-size: 13px;
}


/* Actual input */

.login-input input {
    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 12px 0 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #172033;

    font: inherit;

    font-size: 12px;

    box-shadow: none !important;
}

.login-input input::placeholder {
    color: #a0a8b6;
}


/* Password toggle */

.login-password-toggle {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 5px 0 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 8px;

    background: transparent !important;

    color: #8992a3;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        background .2s ease,
        color .2s ease;
}

.login-password-toggle:hover {
    background: #f1f4fa !important;

    color: #000590;
}

.login-password-toggle:focus-visible {
    outline: 2px solid rgba(0,5,144,.25);

    outline-offset: 1px;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.login-submit {
    width: 100%;
    height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 7px !important;

    border: 0 !important;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #000590 0%,
            #1118b8 100%
        ) !important;

    color: #fff !important;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 22px rgba(0,5,144,.20);

    transition:
        transform .15s ease,
        box-shadow .2s ease;
}

.login-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 13px 26px rgba(0,5,144,.25);
}

.login-submit:active {
    transform: translateY(0);
}


/* =========================================================
   SYSTEM INFO
   ========================================================= */

.login-system-info {
    margin-top: 27px;
}


/* Divider */

.login-divider {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #a0a8b6;

    font-size: 9px;
}

.login-divider span {
    flex: 1;

    height: 1px;

    background: #e3e7ef;
}

.login-divider b {
    font-size: 9px;

    letter-spacing: 1.5px;

    font-weight: 700;
}


/* Security box */

.login-security {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 14px;
    padding: 11px 12px;

    border-radius: 9px;

    background: #f5f7fb;
}

.login-security-icon {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #eaf0ff;

    color: #000590;

    font-size: 12px;
}

.login-security strong {
    display: block;

    margin-bottom: 2px;

    color: #263149;

    font-size: 10px;
}

.login-security span {
    display: block;

    color: #8992a3;

    font-size: 9px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .login-modern {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, .8fr);
    }

    .login-brand-panel {
        padding: 55px 6%;
    }

    .login-form-panel {
        padding: 30px;
    }

    .login-form-card {
        padding: 36px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    body.login-page {
        min-height: 100vh;

        background:
            linear-gradient(
                180deg,
                #eef1f8 0%,
                #f7f8fb 100%
            );
    }


    .login-modern {
        display: block;

        min-height: 100vh;
    }


    /* Hide desktop branding */

    .login-brand-panel {
        display: none;
    }


    /* Form area */

    .login-form-panel {
        min-height: 100vh;

        padding:
            24px
            16px;

        align-items: center;
    }


    /* Card */

    .login-form-card {
        max-width: 430px;

        padding:
            30px
            24px;

        border-radius: 18px;

        box-shadow:
            0 18px 45px rgba(23,32,51,.10);
    }


    /* Show logo */

    .login-mobile-logo {
        display: flex;
    }


    .login-welcome {
        text-align: center;
    }


    .login-welcome > span {
        font-size: 9px;
    }


    .login-welcome h1 {
        font-size: 24px;
    }


    .login-welcome p {
        font-size: 11px;
    }


    .login-form {
        margin-top: 25px;
    }


    .login-field {
        margin-bottom: 17px;
    }


    .login-input {
        height: 51px;
    }


    .login-submit {
        height: 51px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .login-form-panel {
        padding: 16px 10px;
    }

    .login-form-card {
        padding: 27px 19px;

        border-radius: 16px;
    }

    .login-mobile-logo {
        width: 64px;
        height: 64px;

        margin-bottom: 20px;
    }

    .login-mobile-logo img {
        width: 51px;
    }

    .login-welcome h1 {
        font-size: 22px;
    }

}

/* =========================================================
   MODERN DASHBOARD
   ========================================================= */

.dashboard-toolbar {
    margin: 18px 24px 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e0e5ee;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dashboard-period-info span {
    display: block;
    color: #8a93a3;
    font-size: 11px;
    margin-bottom: 4px;
}

.dashboard-period-info strong {
    color: #172033;
    font-size: 15px;
}

.dashboard-periods {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.dashboard-period-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #d9deea;
    border-radius: 9px;
    background: #fff;
    color: #465166;
    text-decoration: none;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.dashboard-period-btn:hover {
    border-color: #000590;
    color: #000590;
}

.dashboard-period-btn.active {
    background: #000590;
    border-color: #000590;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,5,144,.16);
}


/* STATISTICS */

.dashboard-stat-grid {
    margin: 0 24px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-stat-card {
    padding: 16px;
    background: #fff;
    border: 1px solid #e0e5ee;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(23,32,51,.035);
}

.dashboard-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dashboard-stat-top > span {
    color: #697487;
    font-size: 11px;
    line-height: 1.4;
}

.dashboard-stat-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}

.dashboard-stat-value {
    display: block;
    margin-top: 14px;
    color: #172033;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 800;
}

.dashboard-stat-card small {
    display: block;
    margin-top: 6px;
    color: #16a34a;
    font-size: 10px;
}


/* CHART */

.dashboard-chart-grid {
    margin: 14px 24px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-chart-card {
    margin-top: 0;
    min-height: 250px;
}

.dashboard-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-panel-header h3 {
    margin: 0 0 4px;
    font-size: 14px;
    color: #172033;
}

.dashboard-panel-header span {
    color: #8a93a3;
    font-size: 10px;
}

.dashboard-panel-header > i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eef1ff;
    color: #000590;
}

.dashboard-chart-card canvas {
    max-height: 220px;
}

.dashboard-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 12px;
    color: #697487;
    font-size: 10px;
}

.dashboard-legend b {
    color: #263149;
}


/* STATUS */

.dashboard-status-panel {
    margin: 14px 24px 24px;
}

.dashboard-status-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
}

.dashboard-status-item {
    padding: 12px;
    border: 1px solid #e0e5ee;
    border-radius: 11px;
    background: #fff;
}

.dashboard-status-name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #697487;
    font-size: 10px;
}

.dashboard-status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #000590;
}

.dashboard-status-item strong {
    display: block;
    margin-top: 7px;
    color: #172033;
    font-size: 19px;
}


/* CUSTOM FILTER */

.dashboard-filter-panel {
    margin: 0 24px 14px;
}

.dashboard-date-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 12px;
}

.dashboard-date-form label {
    color: #505b6d;
    font-size: 11px;
    font-weight: 700;
}

.dashboard-date-form input {
    width: 100%;
    margin-top: 6px;
    padding: 10px 11px;
    border: 1px solid #d9deea;
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

.dashboard-filter-actions {
    display: flex;
    gap: 7px;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

    .dashboard-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-status-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 900px) {

    .dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-chart-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-date-form {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-filter-actions {
        grid-column: 1 / -1;
    }

}


@media (max-width: 600px) {

    .dashboard-toolbar,
    .dashboard-stat-grid,
    .dashboard-chart-grid,
    .dashboard-status-panel,
    .dashboard-filter-panel {
        margin-left: 14px;
        margin-right: 14px;
    }

    .dashboard-toolbar {
        padding: 14px;
    }

    .dashboard-periods {
        width: 100%;
    }

    .dashboard-period-btn {
        flex: 1 1 auto;
        min-height: 38px;
    }

    .dashboard-stat-grid {
        gap: 8px;
    }

    .dashboard-stat-card {
        padding: 13px;
    }

    .dashboard-stat-value {
        font-size: 19px;
    }

    .dashboard-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-date-form {
        grid-template-columns: 1fr;
    }

    .dashboard-filter-actions {
        grid-column: auto;
    }

    .dashboard-filter-actions .btn {
        flex: 1;
    }

}

/* =========================================================
   MODERN SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: 240px;

    padding: 22px 14px;

    background:
        linear-gradient(
            155deg,
            #4355f2 0%,
            #2638d9 22%,
            #1119b9 50%,
            #080d9f 76%,
            #000590 100%
        );

    color: #fff;

    overflow: hidden;

    box-shadow:
        8px 0 30px rgba(0, 5, 144, .12);

    z-index: 1000;
}


/* Decorative gradient circles */

.sidebar-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.circle-one {
    width: 330px;
    height: 330px;

    top: -190px;
    right: -165px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.22) 0%,
            rgba(255,255,255,.08) 38%,
            transparent 70%
        );
}

.circle-two {
    width: 420px;
    height: 420px;

    right: -240px;
    bottom: -310px;

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 0 0 28px rgba(255,255,255,.035),
        0 0 0 58px rgba(255,255,255,.025),
        0 0 0 88px rgba(255,255,255,.018);
}


/* =========================================================
   BRAND
   ========================================================= */

.sidebar .brand {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 4px 8px 24px;
}

.sidebar .brand-logo {
    width: 100px;
    height: 50px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border-radius: 13px;

    overflow: hidden;

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);
}

.sidebar .brand-logo img {
    width: 100px;
    height: 50px;

    object-fit: contain;
}

.sidebar .brand-text {
    display: flex;
    flex-direction: column;

    font-size: 9px;
    line-height: 1.35;
    letter-spacing: .25px;
}

.sidebar .brand-text strong {
    font-weight: 800;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.sidebar-nav {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.sidebar-nav a {
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 5px 10px;

    color: rgba(255,255,255,.84);

    text-decoration: none;

    border-radius: 11px;

    font-size: 12px;
    font-weight: 600;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.sidebar-nav a:hover {
    background: rgba(255,255,255,.10);
    color: #fff;

    transform: translateX(2px);
}

.sidebar-nav a.active {
    background: rgba(255,255,255,.16);
    color: #fff;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05);
}


/* =========================================================
   ICON
   ========================================================= */

.nav-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    font-size: 14px;

    transition:
        transform .2s ease,
        background .2s ease;
}

.sidebar-nav a:hover .nav-icon {
    transform: scale(1.06);
}

.sidebar-nav a.active .nav-icon {
    transform: scale(1.04);
}


/* =========================================================
   ICON COLORS
   ========================================================= */

.icon-blue {
    background: rgba(59,130,246,.18);
    color: #60a5fa;
}

.icon-cyan {
    background: rgba(34,211,238,.16);
    color: #67e8f9;
}

.icon-green {
    background: rgba(74,222,128,.16);
    color: #86efac;
}

.icon-purple {
    background: rgba(192,132,252,.16);
    color: #d8b4fe;
}

.icon-emerald {
    background: rgba(52,211,153,.16);
    color: #6ee7b7;
}

.icon-orange {
    background: rgba(251,146,60,.16);
    color: #fdba74;
}

.icon-indigo {
    background: rgba(129,140,248,.16);
    color: #a5b4fc;
}

.icon-sky {
    background: rgba(56,189,248,.16);
    color: #7dd3fc;
}

.icon-red {
    background: rgba(248,113,113,.16);
    color: #fca5a5;
}


/* =========================================================
   LOGOUT
   ========================================================= */

.sidebar-nav .nav-logout {
    margin-top: 12px;

    padding-top: 13px;

    border-top:
        1px solid rgba(255,255,255,.10);
}

/* =========================================================
   PROFILE & SECURITY - TYPOGRAPHY
   ========================================================= */

.profile-modern-page {
    font-size: 14px;
}

/* Header card */

.profile-modern-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.profile-modern-header h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 3px 0 6px;
}

.profile-modern-header p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: #64748b;
}

.profile-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #000590;
    margin-bottom: 2px;
}

/* Header icon */

.profile-modern-header-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #e8efff;
    color: #2457d6;

    font-size: 18px;
}

.profile-modern-header-icon.security {
    background: #e8f1ff;
    color: #2563eb;
}


/* =========================================================
   PROFILE INFORMATION
   ========================================================= */

.profile-modern-body {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 24px;
    padding: 20px;

    border: 1px solid #dfe5ef;
    border-radius: 15px;

    background: linear-gradient(
        135deg,
        #f7f9ff 0%,
        #eef2fa 100%
    );
}

.profile-avatar-modern {
    position: relative;

    width: 82px;
    height: 82px;
    flex: 0 0 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 22px;

    background: linear-gradient(
        145deg,
        #4355f2,
        #000590
    );

    color: #fff;

    font-size: 34px;
    font-weight: 800;

    box-shadow: 0 10px 24px rgba(0, 5, 144, .20);
}

.profile-status-dot {
    position: absolute;

    width: 14px;
    height: 14px;

    right: 1px;
    bottom: 3px;

    border: 3px solid #fff;
    border-radius: 50%;

    background: #22c55e;
}

.profile-user-info {
    min-width: 0;
}

.profile-user-info h2 {
    margin: 0 0 8px;

    font-size: 23px;
    line-height: 1.25;
    font-weight: 800;

    color: #172033;
}

.profile-role-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 10px;

    border-radius: 999px;

    background: #eef2ff;
    color: #000590;

    font-size: 13px;
    font-weight: 700;
}

.profile-details {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    margin-top: 18px;
}

.profile-detail {
    display: flex;
    align-items: center;
    gap: 9px;
}

.profile-detail-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #fff;
    color: #315bd6;

    border: 1px solid #dce3ef;

    font-size: 13px;
}

.profile-detail > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profile-detail span {
    font-size: 12px;
    color: #7b8799;
}

.profile-detail strong {
    font-size: 14px;
    font-weight: 700;
    color: #172033;
}


/* =========================================================
   ACCOUNT STATUS
   ========================================================= */

.profile-account-active {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-top: 18px;
    padding: 13px 15px;

    border: 1px solid #bbf7d0;
    border-radius: 12px;

    background: #f0fdf4;
}

.profile-account-active-icon {
    color: #16a34a;
    font-size: 18px;
}

.profile-account-active > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-account-active strong {
    font-size: 14px;
    color: #166534;
}

.profile-account-active span {
    font-size: 12px;
    color: #4d7c5b;
}


/* =========================================================
   PASSWORD FORM
   ========================================================= */

.password-modern-form {
    margin-top: 24px;
}

.password-modern-field {
    margin-bottom: 18px;
}

.password-modern-field label {
    display: block;

    margin-bottom: 7px;

    font-size: 14px;
    font-weight: 700;

    color: #172033;
}

.password-modern-input {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 48px;

    border: 1px solid #d5dce8;
    border-radius: 11px;

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.password-modern-input:focus-within {
    border-color: #315bd6;

    box-shadow:
        0 0 0 3px rgba(49, 91, 214, .10);
}

.password-input-icon {
    width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #64748b;

    font-size: 14px;
}

.password-modern-input input {
    flex: 1;

    width: 100%;

    min-width: 0;

    height: 46px;

    padding: 0 8px;

    border: 0;
    outline: 0;

    background: transparent;

    font-family: inherit;
    font-size: 14px;
    color: #172033;
}

.password-modern-input input::placeholder {
    color: #a0aabd;
    font-size: 14px;
}

.password-toggle-modern {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 46px;

    border: 0;
    background: transparent;

    color: #7b8799;

    cursor: pointer;

    font-size: 15px;
}

.password-toggle-modern:hover {
    color: #000590;
}

.password-modern-hint {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 6px;

    font-size: 12px;
    color: #64748b;
}

.password-modern-hint i {
    color: #315bd6;
}


/* =========================================================
   PASSWORD BUTTON
   ========================================================= */

.password-modern-actions {
    margin-top: 24px;
}

.password-modern-submit {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: #000590;
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(0, 5, 144, .18);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.password-modern-submit:hover {
    background: #1119b9;

    transform: translateY(-1px);

    box-shadow:
        0 10px 22px rgba(0, 5, 144, .24);
}

.password-modern-submit i:last-child {
    font-size: 12px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .profile-modern-page {
        display: block;
    }

    .profile-modern-header h3 {
        font-size: 17px;
    }

    .profile-modern-header p {
        font-size: 13px;
    }

    .profile-eyebrow {
        font-size: 11px;
    }

    .profile-modern-body {
        align-items: flex-start;
        gap: 15px;

        padding: 16px;
    }

    .profile-avatar-modern {
        width: 68px;
        height: 68px;
        flex-basis: 68px;

        border-radius: 18px;

        font-size: 28px;
    }

    .profile-user-info h2 {
        font-size: 19px;
    }

    .profile-role-modern {
        font-size: 12px;
    }

    .profile-details {
        flex-direction: column;
        gap: 12px;

        margin-top: 14px;
    }

    .profile-detail strong {
        font-size: 13px;
    }

    .password-modern-field label {
        font-size: 13px;
    }

    .password-modern-input input {
        font-size: 14px;
    }

    .password-modern-input input::placeholder {
        font-size: 13px;
    }

    .password-modern-submit {
        width: 100%;
        justify-content: center;
    }

}

/* =========================================================
   PROFILE & SECURITY
   LARGE & COMFORTABLE TYPOGRAPHY
   ========================================================= */

.profile-modern-page {
    font-size: 16px !important;
}

/* =========================
   CARD HEADER
   ========================= */

.profile-modern-header {
    gap: 16px;
}

.profile-modern-header-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    border-radius: 13px;

    font-size: 20px;
}

.profile-eyebrow {
    font-size: 13px !important;
    letter-spacing: 1.1px;
    margin-bottom: 4px;
}

.profile-modern-header h3 {
    font-size: 20px !important;
    line-height: 1.35;
    margin: 0 0 7px;
}

.profile-modern-header p {
    font-size: 15px !important;
    line-height: 1.55;
}


/* =========================
   PROFILE USER
   ========================= */

.profile-modern-body {
    gap: 22px;
    margin-top: 26px;
    padding: 24px;
    border-radius: 17px;
}

.profile-avatar-modern {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;

    border-radius: 23px;

    font-size: 36px;
}

.profile-status-dot {
    width: 16px;
    height: 16px;

    right: 0;
    bottom: 2px;

    border-width: 3px;
}

.profile-user-info h2 {
    font-size: 26px !important;
    line-height: 1.3;
    margin-bottom: 10px;
}

.profile-role-modern {
    padding: 6px 11px;

    font-size: 14px !important;
}

.profile-details {
    gap: 30px;
    margin-top: 21px;
}

.profile-detail {
    gap: 11px;
}

.profile-detail-icon {
    width: 38px;
    height: 38px;

    border-radius: 10px;

    font-size: 15px;
}

.profile-detail > div:last-child {
    gap: 4px;
}

.profile-detail span {
    font-size: 13px !important;
}

.profile-detail strong {
    font-size: 15px !important;
}


/* =========================
   ACCOUNT STATUS
   ========================= */

.profile-account-active {
    gap: 13px;

    margin-top: 20px;
    padding: 15px 17px;

    border-radius: 13px;
}

.profile-account-active-icon {
    font-size: 20px;
}

.profile-account-active strong {
    font-size: 15px !important;
}

.profile-account-active span {
    font-size: 13px !important;
}


/* =========================
   PASSWORD
   ========================= */

.password-modern-form {
    margin-top: 27px;
}

.password-modern-field {
    margin-bottom: 21px;
}

.password-modern-field label {
    margin-bottom: 8px;

    font-size: 15px !important;
    font-weight: 700;
}

.password-modern-input {
    min-height: 53px;
    border-radius: 12px;
}

.password-input-icon {
    width: 50px;
    font-size: 16px;
}

.password-modern-input input {
    height: 51px;

    font-size: 16px !important;
}

.password-modern-input input::placeholder {
    font-size: 15px !important;
}

.password-toggle-modern {
    width: 50px;
    height: 51px;
    flex-basis: 50px;

    font-size: 17px;
}

.password-modern-hint {
    margin-top: 7px;
    font-size: 13px !important;
}


/* =========================
   BUTTON
   ========================= */

.password-modern-actions {
    margin-top: 28px;
}

.password-modern-submit {
    min-height: 50px;

    padding: 0 20px;

    border-radius: 11px;

    font-size: 15px !important;
}


/* =========================================================
   SIDEBAR TYPOGRAPHY
   Supaya menu juga tidak terlalu kecil
   ========================================================= */

.sidebar-nav a,
.sidebar nav a {
    font-size: 15px !important;
}

.sidebar-nav a span,
.sidebar nav a span {
    font-size: 15px !important;
}

.nav-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;

    border-radius: 11px;
}

.nav-icon i,
.nav-icon svg {
    font-size: 18px;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.page-title {
    font-size: 20px !important;
    font-weight: 800;
}

.user-menu b {
    font-size: 14px !important;
}

.user-menu small {
    font-size: 12px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .profile-modern-page {
        font-size: 15px !important;
    }

    .profile-modern-header h3 {
        font-size: 18px !important;
    }

    .profile-modern-header p {
        font-size: 14px !important;
    }

    .profile-eyebrow {
        font-size: 12px !important;
    }

    .profile-modern-body {
        padding: 19px;
        gap: 16px;
    }

    .profile-avatar-modern {
        width: 72px;
        height: 72px;
        flex-basis: 72px;

        border-radius: 19px;

        font-size: 30px;
    }

    .profile-user-info h2 {
        font-size: 21px !important;
    }

    .profile-role-modern {
        font-size: 13px !important;
    }

    .profile-details {
        gap: 14px;
        margin-top: 17px;
    }

    .profile-detail span {
        font-size: 12px !important;
    }

    .profile-detail strong {
        font-size: 14px !important;
    }

    .profile-account-active strong {
        font-size: 14px !important;
    }

    .profile-account-active span {
        font-size: 12px !important;
    }

    .password-modern-field label {
        font-size: 14px !important;
    }

    .password-modern-input input {
        font-size: 15px !important;
    }

    .password-modern-input input::placeholder {
        font-size: 14px !important;
    }

    .password-modern-submit {
        width: 100%;
        justify-content: center;

        font-size: 15px !important;
    }

}

/* =========================================================
   MOBILE SIDEBAR
   ========================================================= */

@media (max-width: 760px) {

    /* Topbar selalu berada paling atas */
    .topbar {
        position: relative;
        z-index: 1100;
    }

    /* Sidebar mulai DI BAWAH topbar */
    .sidebar {
        position: fixed !important;

        top: 58px !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 240px !important;
        height: calc(100vh - 58px) !important;

        z-index: 1050 !important;

        overflow-y: auto;
        overflow-x: hidden;

        padding-top: 18px !important;

        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    /* Saat sidebar dibuka */
    .sidebar.mobile-open,
    .sidebar.open,
    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    /* Overlay juga jangan menutupi topbar */
    .sidebar-overlay {
        position: fixed !important;

        top: 58px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        z-index: 1040 !important;

        background: rgba(15, 23, 42, .48);
        backdrop-filter: blur(2px);
    }

    /* Brand tidak lagi kepotong */
    .sidebar .brand {
        padding-top: 4px !important;
        padding-bottom: 22px !important;
    }

}

/* =========================================================
   APP FOOTER
   ========================================================= */

.app-footer {
    position: fixed;
    left: 220px;
    right: 0;
    bottom: 0;

    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px 28px;

    background: #172033;
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    text-align: center;

    z-index: 900;

    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}

.footer-separator {
    display: inline;
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.45);
}


/* =========================================================
   FOOTER MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .app-footer {
        left: 0;

        min-height: 64px;

        padding: 14px 20px;

        font-size: 13px;
    }

}