:root {
    --navy-950: #061a33;
    --navy-900: #082645;
    --navy-800: #0b315d;
    --navy-700: #123f72;
    --navy-text: #0b1d3a;
    --muted: #5f7699;
    --bg: #eef4fa;
    --card: #ffffff;
    --border: #d8e3f0;
    --soft: #f6f9fc;
    --gold: #f6c343;
    --danger: #b42318;
    --success: #177245;
    --shadow: 0 8px 24px rgba(8, 38, 69, .06);
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--navy-text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    color: var(--navy-text);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

p {
    color: #3d506e;
    line-height: 1.55;
}

a {
    color: var(--navy-800);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

header,
.topbar,
.navbar,
.app-header {
    background: var(--navy-950);
    color: #ffffff;
}

header h1,
header h2,
header h3,
header a,
.topbar a,
.navbar a,
.app-header a {
    color: #ffffff;
}

main,
.container,
.page-container {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.card,
.panel,
.profile,
.content-card,
.form-card,
.table-card,
section.profile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.label,
.form-label,
.field-label,
th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .035em;
}

.value,
.field-value,
.profile-value {
    color: var(--navy-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    color: var(--navy-text);
    background: #ffffff;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--navy-700);
    box-shadow: 0 0 0 3px rgba(18, 63, 114, .12);
}

textarea {
    min-height: 100px;
    resize: vertical;
}

button,
.btn,
.button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    background: var(--navy-900);
    color: #ffffff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover {
    background: var(--navy-800);
    text-decoration: none;
}

.btn-secondary,
.button-secondary {

}

.btn-secondary:hover,
.button-secondary:hover {
}

.btn-danger,
.button-danger {
    background: var(--danger);
}

.btn-success,
.button-success {
    background: var(--success);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

th {
    text-align: left;
    background: #f5f8fc;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--navy-text);
    font-size: 14px;
}

tr:hover td {
    background: #f8fbff;
}

.notice,
.alert,
.info-box {
    border-radius: 14px;
    padding: 16px 18px;
    line-height: 1.55;
}

.notice {
    background: #fff6d8;
    border-left: 4px solid var(--gold);
}

.alert-success {
    background: #eaf7ef;
    color: #145c38;
}

.alert-danger,
.alert-error {
    background: #fdecec;
    color: #8f1d16;
}

.photo-box,
.photo-placeholder {
    background: #eef6ff;
    border: 1px dashed #b9cbe2;
    border-radius: 14px;
    color: #557092;
    font-weight: 600;
}

.text-muted {
    color: var(--muted);
}

.divider,
hr {
    border: 0;
    border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
    main,
    .container,
    .page-container {
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    h1 { font-size: 24px; }
    h2 { font-size: 22px; }
    h3 { font-size: 18px; }

    .card,
    .panel,
    .profile,
    .content-card,
    .form-card,
    .table-card,
    section.profile {
        border-radius: 16px;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Header brand tidak memakai garis bawah saat hover */
.app-brand-link,
.app-brand-link:hover,
.app-brand-link:focus,
.brand a,
.brand a:hover,
header a.app-brand-link:hover {
    text-decoration: none !important;
}

.app-title,
.app-page-title {
    text-decoration: none !important;
}


/* Uniform typography for E-Logbook Perwira */
body,
button,
input,
select,
textarea {
    font-family: "Segoe UI", Arial, sans-serif;
}

.label,
.form-label,
.field-label {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #607899;
}

.value,
.field-value,
.profile-value {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    color: #152238;
}

.card h2,
.profile h2,
.section-title {
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #061b3a;
}


/* =========================================================
   Universal App Header - E-Logbook Perwira
   Dipakai semua halaman internal aplikasi.
   ========================================================= */
.app-header,
header.app-header {
    width: 100% !important;
    max-width: none !important;
    background: #082b4c !important;
    color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
}

.app-header-row,
header.app-header .app-header-row {
    width: 100% !important;
    max-width: none !important;
    min-height: 70px !important;
    padding: 12px 24px !important;
    margin: 0 !important;

    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.app-brand-link,
header.app-header .app-brand-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.app-brand-link:hover,
header.app-header .app-brand-link:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.app-logo,
header.app-header .app-logo {
    width: 38px !important;
    height: 38px !important;
    display: block !important;
    flex: 0 0 auto !important;
}

.app-title,
header.app-header .app-title {
    color: #ffffff !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    margin: 0 !important;
}

.app-page-title,
header.app-header .app-page-title {
    margin-top: 4px !important;
    color: #dbeafe !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.user-info,
header.app-header .user-info {

    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.user-info form,
header.app-header .user-info form {
    margin: 0 !important;
    padding: 0 !important;
}

.user-info button,
header.app-header .user-info button {
    min-height: 40px !important;
    border: none !important;
    border-radius: 11px !important;
    background: #062747 !important;
    color: #ffffff !important;
    padding: 9px 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.user-info button:hover,
header.app-header .user-info button:hover {
    background: #0b355f !important;
}

.top-separator,
header.app-header .top-separator {
    color: rgba(255, 255, 255, .55) !important;
    font-weight: 700 !important;
}

@media (max-width: 760px) {
    .app-header-row,
    header.app-header .app-header-row {
        min-height: auto !important;
        padding: 14px 18px !important;
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .user-info,
    header.app-header .user-info {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
    }
}


/* =========================================================
   Universal Content Layout - E-Logbook Perwira
   Standar mengikuti halaman dashboard.
   ========================================================= */
body {
    margin: 0;
    background: #eef4fa;
    color: #0b1d3a;
    font-family: "Segoe UI", Arial, sans-serif;
}

main,
.app-main {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

.panel,
.profile,
.card {
    background: #ffffff;
    border: 1px solid #d7e4f2;
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 22px;
    box-shadow: 0 10px 24px rgba(11, 29, 58, .07);
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.section-head h1,
.section-head h2,
.panel h1,
.panel h2,
.card h1,
.card h2,
.profile h1,
.profile h2 {
    margin: 0;
    color: #061b3a;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.03em;
}

.section-subtitle {
    margin: 6px 0 0;
    color: #5f7699;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.table-wrap table,
table.universal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #d7e4f2;
    border-radius: 14px;
    background: #ffffff;
}

.table-wrap th,
.table-wrap td,
table.universal-table th,
table.universal-table td {
    padding: 13px 14px;
    text-align: left;
    border-bottom: 1px solid #e4edf7;
    vertical-align: middle;
    font-size: 14px;
}

.table-wrap th,
table.universal-table th {
    background: #f4f7fb;
    color: #47658d;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
}

.table-wrap td,
table.universal-table td {
    color: #0b1d3a;
}

.table-wrap tr:last-child td,
table.universal-table tr:last-child td {
    border-bottom: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-muted {
    background: #eef2f7;
    color: #475569;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.btn,
.btn-small,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 10px;

    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    line-height: 1.2;
}

.btn:hover,
.btn-small:hover,
button.btn:hover {

    text-decoration: none;
}

.btn.primary,
.btn-small.primary {

}

.btn-light {
    background: #ffffff;
    color: #0b2b4c;
}

.btn-danger {
    background: #b42318;
    border-color: #b42318;
    color: #ffffff;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    align-items: start;
}

.form-full {
    grid-column: 1 / -1;
}

.label,
.form-label {
    display: block;
    margin-bottom: 7px;
    color: #526b92;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #c9d9ea;
    border-radius: 11px;
    background: #ffffff;
    color: #001b44;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #38598a 50%),
        linear-gradient(135deg, #38598a 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 12px) 19px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

textarea {
    min-height: 98px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #0b355f;
    box-shadow: 0 0 0 3px rgba(11, 53, 95, .10);
}

.alert,
.notice {
    background: #ecfdf3;
    color: #05603a;
    border: 1px solid #abefc6;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-weight: 700;
}

.empty,
.empty-box {
    padding: 18px;
    border-radius: 14px;
    background: #f8fbff;
    color: #5f7699;
    border: 1px dashed #cbd8e6;
    text-align: center;
    font-weight: 600;
}

@media (max-width: 760px) {
    main,
    .app-main {
        padding: 20px 14px 36px;
    }

    .section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .panel,
    .profile,
    .card {
        border-radius: 16px;
        padding: 18px;
    }

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

    .form-full {
        grid-column: auto;
    }
}


/* =========================================================
   Universal Slim Typography - E-Logbook Perwira
   Membuat tipografi lebih ramping dan profesional.
   ========================================================= */
body {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Judul besar halaman/panel */
h1,
h2,
h3,
.panel h1,
.panel h2,
.card h1,
.card h2,
.profile h1,
.profile h2,
.section-head h1,
.section-head h2,
.section-title {
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

/* Header aplikasi */
.app-title,
header.app-header .app-title {
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

.app-page-title,
header.app-header .app-page-title {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* Info user di kanan header */
.user-info,
header.app-header .user-info,
.user-name,
.user-role {
    font-weight: 600 !important;
}

/* Tombol */
.btn,
.btn-small,
button,
button.btn,
.user-info button,
header.app-header .user-info button {
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* Label form dan header tabel jangan terlalu berat */
.label,
.form-label,
label,
.table-wrap th,
table th,
table.universal-table th {
    font-weight: 600 !important;
    letter-spacing: .03em !important;
}

/* Badge/status */
.badge,
.status-pill,
.badge-status,
.rank-status-green {
    font-weight: 600 !important;
}

/* Teks isi */
p,
td,
.value,
.section-subtitle,
.muted,
.empty,
.empty-box,
.alert,
.notice {
    font-weight: 400 !important;
}

/* Khusus teks penting tetap tegas tapi tidak terlalu gemuk */
strong,
b {
    font-weight: 600 !important;
}


/* =========================================================
   Universal Font Family - E-Logbook Perwira
   Standar 1 font utama untuk seluruh halaman internal.
   ========================================================= */
html,
body,
button,
input,
select,
textarea,
table,
th,
td,
a,
p,
div,
span,
label {
    font-family: "Segoe UI", Arial, sans-serif !important;
}


/* =========================================================
   Universal Slim Panel Titles - E-Logbook Perwira
   Judul panel dibuat lebih ramping.
   ========================================================= */
.section-head h1,
.section-head h2,
.panel h1,
.panel h2,
.card h1,
.card h2,
.profile h1,
.profile h2,
.section-title {
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
}

.section-head h2,
.panel h2,
.card h2,
.profile h2 {
    font-size: 23px !important;
}

/* Judul aplikasi di header tetap tegas, tapi tidak terlalu gemuk */
.app-title,
header.app-header .app-title {
    font-weight: 600 !important;
}

.app-page-title,
header.app-header .app-page-title {
    font-weight: 500 !important;
}


/* =========================================================
   Universal Final Typography Polish - E-Logbook Perwira
   Penyelarasan akhir agar font tidak terlalu tebal.
   ========================================================= */

/* Header kanan */
.user-info,
header.app-header .user-info,
.user-name,
.user-role {
    font-weight: 500 !important;
}

/* Tombol */
.btn,
.btn-small,
button,
button.btn,
.user-info button,
header.app-header .user-info button {
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
}

/* Header tabel */
.table-wrap th,
table th,
table.universal-table th {
    font-weight: 600 !important;
    letter-spacing: .025em !important;
}

/* Label form */
.label,
.form-label,
label {
    font-weight: 500 !important;
    letter-spacing: .025em !important;
}

/* Badge/status */
.badge,
.status-pill,
.badge-status,
.rank-status-green {
    font-weight: 500 !important;
}

/* Isi tabel dan nilai data */
.table-wrap td,
table td,
.value {
    font-weight: 400 !important;
}

/* Subtitle dan teks bantu */
.section-subtitle,
.muted,
.empty,
.empty-box {
    font-weight: 400 !important;
}

/* Alert/notice jangan terlalu berat */
.alert,
.notice {
    font-weight: 500 !important;
}

/* Nama aplikasi tetap cukup tegas tapi tidak gemuk */
.app-title,
header.app-header .app-title {
    font-weight: 600 !important;
}

.app-page-title,
header.app-header .app-page-title {
    font-weight: 500 !important;
}

/* Judul panel tetap seperti yang sudah enak */
.section-head h1,
.section-head h2,
.panel h1,
.panel h2,
.card h1,
.card h2,
.profile h1,
.profile h2,
.section-title {
    font-weight: 600 !important;
}


/* =========================================================
   Universal Slim Subsection Titles - E-Logbook Perwira
   Judul kecil seperti Identitas Dasar dan Penempatan Saat Ini.
   ========================================================= */
h3,
.panel h3,
.card h3,
.profile h3,
.subsection-title,
.info-section-title {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #061b3a !important;
}

/* Kalau masih terlihat terlalu besar/tebal, kecilkan sedikit */
.panel h3,
.card h3,
.profile h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

/* Label data seperti NAMA LENGKAP, TEMPAT LAHIR, dst */
.label,
.form-label,
.info-label,
.profile-label {
    font-weight: 500 !important;
    letter-spacing: .025em !important;
}

/* Nilai data profil */
.value,
.info-value,
.profile-value {
    font-weight: 400 !important;
}


/* =========================================================
   Universal Header Icons - E-Logbook Perwira
   Icon kecil untuk nama, role, dan tombol keluar.
   ========================================================= */
.user-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.user-meta-icon {
    width: 15px !important;
    height: 15px !important;
    display: inline-block !important;
    fill: currentColor !important;
    color: rgba(255, 255, 255, .86) !important;
    flex: 0 0 auto !important;
}

.logout-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.logout-icon {
    color: rgba(255, 255, 255, .9) !important;
}

@media (max-width: 760px) {
    .user-meta-icon {
        width: 14px !important;
        height: 14px !important;
    }
}


/* =========================================================
   Universal Logout Button Polish - E-Logbook Perwira
   Hover tombol keluar dibuat lebih elegan dan jelas.
   ========================================================= */
.user-info button,
header.app-header .user-info button,
.logout-button {
    background: rgba(5, 35, 68, .88) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.user-info button:hover,
header.app-header .user-info button:hover,
.logout-button:hover {
    background: #123f6d !important;
    border-color: rgba(255, 255, 255, .22) !important;
    box-shadow:
        0 10px 22px rgba(0, 18, 42, .24),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    transform: translateY(-1px) !important;
}

.user-info button:active,
header.app-header .user-info button:active,
.logout-button:active {
    transform: translateY(0) !important;
    background: #062747 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18) !important;
}

.user-info button:focus-visible,
header.app-header .user-info button:focus-visible,
.logout-button:focus-visible {
    outline: 3px solid rgba(147, 197, 253, .55) !important;
    outline-offset: 2px !important;
}

.logout-button .logout-icon,
.logout-button .user-meta-icon {
    transition: transform .18s ease, color .18s ease !important;
}

.logout-button:hover .logout-icon,
.logout-button:hover .user-meta-icon {
    color: #bfdbfe !important;
    transform: translateX(2px) !important;
}


/* =========================================================
   Universal Button Motion - E-Logbook Perwira
   Tombol seragam, modern, dengan hover dan klik halus.
   ========================================================= */
.btn,
.btn-small,
button.btn,
a.btn,
a.btn-small,
button[type="submit"] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 10px 16px !important;
    border-radius: 11px !important;

    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    cursor: pointer !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn:hover,
.btn-small:hover,
button.btn:hover,
a.btn:hover,
a.btn-small:hover,
button[type="submit"]:hover {

    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.btn:active,
.btn-small:active,
button.btn:active,
a.btn:active,
a.btn-small:active,
button[type="submit"]:active {
    transform: translateY(1px) scale(.99) !important;

}

.btn:focus-visible,
.btn-small:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible,
a.btn-small:focus-visible,
button[type="submit"]:focus-visible {
    outline: 3px solid rgba(147, 197, 253, .55) !important;
    outline-offset: 2px !important;
}

/* Varian utama tetap navy */
.btn.primary,
.btn-small.primary,
a.btn.primary,
a.btn-small.primary {

}

.btn.primary:hover,
.btn-small.primary:hover,
a.btn.primary:hover,
a.btn-small.primary:hover {

}

/* Tombol putih/secondary */
.btn-light,
.btn.secondary,
.btn-small.secondary,
a.btn-light {

}

.btn-light:hover,
.btn.secondary:hover,
.btn-small.secondary:hover,
a.btn-light:hover {

}

/* Tombol danger */
.btn-danger,
.btn.danger,
.btn-small.danger {

}

.btn-danger:hover,
.btn.danger:hover,
.btn-small.danger:hover {

}

/* Tombol disabled */
.btn.disabled,
.btn-small.disabled,
.btn:disabled,
.btn-small:disabled,
button:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Ikon di dalam tombol ikut bergerak halus */
.btn svg,
.btn-small svg,
button.btn svg,
button[type="submit"] svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto !important;
    transition: transform .16s ease, opacity .16s ease !important;
}

.btn:hover svg,
.btn-small:hover svg,
button.btn:hover svg,
button[type="submit"]:hover svg {
    transform: translateX(1px) !important;
}

/* Khusus tombol di area header agar tetap compact dan tidak terlalu besar */
header.app-header .user-info button,
.logout-button {
    min-height: 38px !important;
    padding: 9px 15px !important;
    border-radius: 11px !important;
}


/* === Penyempurnaan Tipografi Profil === */
.profile-label,
.info-label,
.detail-label,
.field-label {
    color: #6b7f99 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .55px;
    line-height: 1.35;
}

.profile-value,
.info-value,
.detail-value,
.field-value {
    color: #1f3a5f !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.55;
}

.profile-section-title,
.section-title,
.panel h2,
.panel-title {
    color: #102a43 !important;
    font-weight: 800 !important;
}

/* Khusus tampilan mobile agar tetap nyaman */
@media (max-width: 640px) {
    .profile-value,
    .info-value,
    .detail-value,
    .field-value {
        font-size: 17px !important;
        line-height: 1.55;
    }

    .profile-label,
    .info-label,
    .detail-label,
    .field-label {
        font-size: 12.5px !important;
    }
}

/* === Koreksi ketebalan heading panel === */
.panel h2,
.section-title,
.profile-section-title,
.panel-title {
    font-weight: 650 !important;
    letter-spacing: -0.2px;
}

/* ===== Heading Navy ===== */

.panel h2,
.section-title,
.profile-section-title,
.panel-title{
    color:#163A63 !important;
    font-weight:600 !important;
    letter-spacing:-0.2px;
}

.panel h3,
.section-head h3,
.card-title{
    color:#1E4E79 !important;
    font-weight:600 !important;
}


/* === Final tuning heading: navy lebih tajam + sedikit lebih tebal === */
.panel h2,
.section-title,
.profile-section-title,
.panel-title {
    color: #0B2E59 !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px;
}

.panel h3,
.section-head h3,
.card-title {
    color: #123F73 !important;
    font-weight: 700 !important;
}

/* === Dashboard Profile: Foto + Data Statis + Data Dinamis === */
.profile-dashboard-cards {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.profile-card {
    background: #ffffff;
    border: 1px solid #dbe7f3;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(15, 35, 75, .06);
}

.profile-card-title {
    color: #0B2E59;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.2px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5eef7;
}

.profile-card.photo-card {
    display: flex;
    flex-direction: column;
}

.profile-photo-box.clean {
    box-shadow: none;
    border: 0;
    padding: 0;
    background: transparent;
}

.info-grid.compact {
    gap: 12px 16px;
}

.info-grid.compact .label {

}

.info-grid.compact .value {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #1f3a5f !important;
}

@media (max-width: 1100px) {
    .profile-dashboard-cards {
        grid-template-columns: 260px 1fr;
    }

    .profile-dashboard-cards .profile-card:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .profile-dashboard-cards {
        grid-template-columns: 1fr;
    }

    .profile-dashboard-cards .profile-card:nth-child(3) {
        grid-column: auto;
    }
}

/* === Pill action di card profil dashboard === */
.profile-card-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e5eef7;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.pill-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #0B2E59;
    border: 1px solid #bfdbfe;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(15, 35, 75, .08);
}

.pill-action:hover {
    background: #dbeafe;
    color: #08244a;
}

/* === Identitas singkat di bawah foto pangkat terakhir === */
.photo-identity-summary {
    margin-top: 16px;
    padding: 14px 12px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
    text-align: center;
}

.photo-rank-line {
    color: #0B2E59;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.photo-name-line {
    margin-top: 8px;
    color: #1f3a5f;
    font-size: 15.5px;
    font-weight: 750;
    line-height: 1.45;
}

.photo-helper-line {
    margin-top: 8px;
    color: #6b7f99;
    font-size: 12px;
    font-weight: 650;
}

/* === Final typography identitas singkat bawah foto === */
.photo-identity-summary {
    padding: 14px 12px !important;
    background: #f8fbff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 16px !important;
    text-align: center !important;
}

.photo-rank-line,
.photo-name-line {
    color: #0B2E59 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 750 !important;
    line-height: 1.42 !important;
    letter-spacing: -0.15px !important;
}

.photo-rank-line {
    font-size: 16px !important;
}

.photo-name-line {
    margin-top: 6px !important;
    font-size: 15px !important;
}

.photo-helper-line {
    display: none !important;
}

/* === Rapikan jarak pangkat dan nama di bawah foto === */
.photo-identity-summary {
    padding: 13px 12px !important;
    line-height: 1.35 !important;
}

.photo-rank-line,
.photo-name-line {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0B2E59 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 750 !important;
    font-size: 15.5px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.12px !important;
}

.photo-name-line {
    margin-top: 2px !important;
}

.photo-helper-line {
    display: none !important;
}

/* === Perbesar dan birukan identitas di bawah foto === */
.photo-rank-line,
.photo-name-line {
    color: #0A4E96 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 800 !important;
    line-height: 1.32 !important;
    letter-spacing: -0.15px !important;
}

.photo-rank-line {
    font-size: 17.5px !important;
}

.photo-name-line {
    font-size: 16.5px !important;
    margin-top: 3px !important;
}

.photo-identity-summary {
    padding: 14px 12px !important;
}

/* === Final tuning: identitas bawah foto lebih besar, lebih ringan, biru langit === */
.photo-rank-line,
.photo-name-line {
    color: #1D8FE3 !important;       /* biru langit */
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 700 !important;     /* ketebalan dikurangi */
    line-height: 1.28 !important;
    letter-spacing: -0.12px !important;
}

.photo-rank-line {
    font-size: 19px !important;
}

.photo-name-line {
    font-size: 18px !important;
    margin-top: 2px !important;
}

.photo-identity-summary {
    padding: 14px 12px !important;
}


/* === Profil Saya: tampilan detail modern === */
.profile-detail-hero {
    background: linear-gradient(135deg, #0B2E59 0%, #114A7E 55%, #1D8FE3 100%);
    color: #ffffff;
    border-radius: 22px;
    padding: 24px 26px;
    margin-bottom: 18px;
    box-shadow: 0 18px 38px rgba(11, 46, 89, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.profile-detail-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    opacity: 0.84;
    margin-bottom: 6px;
}

.profile-detail-hero h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 720;
    letter-spacing: -0.25px;
}

.profile-detail-hero p {
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: 600;
    opacity: 0.92;
}

.hero-separator {
    opacity: 0.72;
    margin: 0 8px;
}

.profile-detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.profile-detail-actions .pill-action {
    background: #ffffff;
    color: #0B2E59;
    border-color: rgba(255,255,255,0.8);
    box-shadow: 0 10px 20px rgba(11,46,89,0.16);
}

.profile-detail-actions .pill-action.muted {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    border-color: rgba(255,255,255,0.45);
}

.profile-detail-card {
    background: #ffffff;
    border: 1px solid #dbe7f3;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 12px 30px rgba(15, 35, 60, 0.07);
}

.profile-detail-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e5eef7;
}

.profile-detail-card-head h2 {
    margin: 0;
    color: #0B2E59;
    font-size: 20px;
    font-weight: 720;
    letter-spacing: -0.15px;
}

.profile-detail-card-head p {
    margin: 5px 0 0;
    color: #6b7f99;
    font-size: 13px;
    font-weight: 600;
}

.profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

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

.profile-detail-grid > div {
    background: #f8fbff;
    border: 1px solid #edf4fb;
    border-radius: 14px;
    padding: 13px 14px;
}

.profile-detail-grid > div.wide {
    grid-column: 1 / -1;
}

.profile-detail-grid .label {
    color: #6b7f99;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
}

.profile-detail-grid .value {
    color: #163B66;
    font-size: 16px;
    font-weight: 720;
    line-height: 1.35;
    word-break: break-word;
}

@media (max-width: 760px) {
    .profile-detail-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .profile-detail-actions {
        justify-content: flex-start;
    }

    .profile-detail-grid,
    .profile-detail-grid.two {
        grid-template-columns: 1fr;
    }

    .profile-detail-hero h1 {
        font-size: 23px;
    }
}


/* === Fix kontras teks hero Profil Saya === */
.profile-detail-hero,
.profile-detail-hero * {
    color: #ffffff !important;
}

.profile-detail-hero h1 {
    color: #ffffff !important;
    font-weight: 760 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.profile-detail-hero p {
    color: #dbeafe !important;
    font-weight: 650 !important;
}

.profile-detail-eyebrow {
    color: #f8fbff !important;
    opacity: 0.95 !important;
}

.profile-detail-actions .pill-action {
    color: #0B2E59 !important;
    background: #ffffff !important;
}

.profile-detail-actions .pill-action.muted {
    color: #ffffff !important;
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.55) !important;
}

/* === Profil Saya: 3 card sama seperti dashboard === */
.profile-page-cards {
    display: grid;
    grid-template-columns: 280px minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.profile-page-cards .profile-card {
    min-height: 100%;
}

.profile-page-cards .profile-photo {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
}

.profile-page-cards .profile-photo-placeholder {
    min-height: 280px;
}

@media (max-width: 1100px) {
    .profile-page-cards {
        grid-template-columns: 1fr;
    }

    .profile-page-cards .profile-photo {
        max-height: 420px;
    }
}

/* === Final tuning halaman Profil Prajurit === */

/* Hero: pastikan teks jelas dan elegan */
.profile-detail-hero,
.profile-detail-hero * {
    color: #ffffff !important;
}

.profile-detail-hero {
    background: linear-gradient(135deg, #08294F 0%, #0B3F72 48%, #1687D9 100%) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    box-shadow: 0 18px 42px rgba(8, 41, 79, 0.26) !important;
}

.profile-detail-hero h1 {
    color: #ffffff !important;
    font-weight: 740 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}

.profile-detail-hero p {
    color: #dbeafe !important;
    font-weight: 650 !important;
}

.profile-detail-eyebrow {
    color: #f8fbff !important;
    opacity: 0.96 !important;
}

.profile-detail-actions .pill-action {
    color: #0B2E59 !important;
    background: #ffffff !important;
    border-color: rgba(255,255,255,0.88) !important;
}

.profile-detail-actions .pill-action.muted {
    color: #ffffff !important;
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.55) !important;
}

/* Card container */
.profile-page-cards {
    grid-template-columns: 285px minmax(0, 1.28fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

/* Foto agar tidak terlalu tinggi/lebar liar */
.profile-page-cards .profile-card.photo-card {
    overflow: hidden !important;
}

.profile-page-cards .profile-photo-box.clean {
    width: 100% !important;
}

.profile-page-cards .profile-photo {
    width: 100% !important;
    height: 345px !important;
    max-height: 345px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 16px !important;
}

/* Jika belum ada foto */
.profile-page-cards .profile-photo-placeholder {
    min-height: 345px !important;
    border-radius: 16px !important;
}

/* Identitas bawah foto */
.profile-page-cards .photo-identity-summary {
    margin-top: 14px !important;
    padding: 14px 12px !important;
}

.profile-page-cards .photo-rank-line {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1D8FE3 !important;
}

.profile-page-cards .photo-name-line {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1D8FE3 !important;
}

/* Isi card lebih lapang */
.profile-page-cards .info-grid.compact {
    gap: 12px 14px !important;
}

.profile-page-cards .info-grid.compact > div {
    padding: 11px 12px !important;
    border-radius: 13px !important;
}

.profile-page-cards .info-grid.compact .label {
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
}

.profile-page-cards .info-grid.compact .value {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
    font-weight: 720 !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .profile-page-cards {
        grid-template-columns: 1fr !important;
    }

    .profile-page-cards .profile-photo {
        height: auto !important;
        max-height: 430px !important;
    }

    .profile-page-cards .profile-photo-placeholder {
        min-height: 260px !important;
    }
}

/* =========================================================
   Dashboard Profil Prajurit - polish layout 2026-07-09
   Fokus:
   1. Foto lebih proporsional
   2. Hero lebih jelas terbaca
   3. Card 3 kolom lebih rapi
   4. Isi card lebih lega
========================================================= */

.profile-dashboard-wrap,
.dashboard-profile-wrap,
.prajurit-profile-wrap {
    width: 100%;
}

/* HERO PROFIL */
.profile-hero,
.dashboard-profile-hero,
.hero-profile-prajurit,
.prajurit-hero {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 26px 30px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(6, 22, 54, 0.96), rgba(11, 55, 105, 0.94)),
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.22), transparent 38%);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.20);
    overflow: hidden;
    margin-bottom: 22px;
}

.profile-hero::after,
.dashboard-profile-hero::after,
.hero-profile-prajurit::after,
.prajurit-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

/* FOTO PROFIL / FOTO PANGKAT TERAKHIR */
.profile-hero img,
.dashboard-profile-hero img,
.hero-profile-prajurit img,
.prajurit-hero img,
.profile-photo-card img,
.dashboard-photo-card img,
.card-foto img {
    width: 132px;
    height: 168px;
    max-width: 132px;
    max-height: 168px;
    object-fit: cover;
    object-position: center top;
    border-radius: 18px;
    border: 4px solid rgba(255, 255, 255, 0.88);
    background: #e5e7eb;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.28);
}

/* Kalau foto berada dalam card sendiri */
.profile-photo-card,
.dashboard-photo-card,
.card-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    min-height: 250px;
}

/* TEKS HERO */
.profile-hero h1,
.dashboard-profile-hero h1,
.hero-profile-prajurit h1,
.prajurit-hero h1,
.profile-hero .hero-title,
.dashboard-profile-hero .hero-title {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.16;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.profile-hero .hero-subtitle,
.dashboard-profile-hero .hero-subtitle,
.profile-hero .subtitle,
.dashboard-profile-hero .subtitle,
.prajurit-hero .subtitle {
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    line-height: 1.55;
    margin-top: 4px;
}

.profile-hero .hero-meta,
.dashboard-profile-hero .hero-meta,
.prajurit-hero .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.profile-hero .hero-meta span,
.dashboard-profile-hero .hero-meta span,
.prajurit-hero .hero-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

/* GRID CARD 3 KOLOM */
.profile-summary-grid,
.dashboard-profile-grid,
.dashboard-card-grid,
.profile-three-column,
.prajurit-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    margin-top: 18px;
}

/* CARD */
.profile-summary-grid > *,
.dashboard-profile-grid > *,
.dashboard-card-grid > *,
.profile-three-column > *,
.prajurit-card-grid > *,
.profile-card,
.dashboard-card,
.navy-card {
    min-width: 0;
}

.profile-card,
.dashboard-card,
.profile-summary-card,
.dashboard-summary-card,
.identity-card,
.placement-card,
.dynamic-card {
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    padding: 22px 22px;
}

/* HEADER CARD */
.profile-card h2,
.dashboard-card h2,
.profile-summary-card h2,
.dashboard-summary-card h2,
.identity-card h2,
.placement-card h2,
.dynamic-card h2,
.profile-card h3,
.dashboard-card h3,
.profile-summary-card h3,
.dashboard-summary-card h3,
.identity-card h3,
.placement-card h3,
.dynamic-card h3 {
    margin: 0 0 16px;
    color: #0f2f57;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -0.01em;
}

/* ISI CARD BIAR TIDAK PADAT */
.profile-card .info-row,
.dashboard-card .info-row,
.profile-summary-card .info-row,
.dashboard-summary-card .info-row,
.identity-card .info-row,
.placement-card .info-row,
.dynamic-card .info-row,
.profile-card .data-row,
.dashboard-card .data-row,
.identity-card .data-row,
.placement-card .data-row,
.dynamic-card .data-row {
    display: grid;
    grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.profile-card .info-row:last-child,
.dashboard-card .info-row:last-child,
.profile-summary-card .info-row:last-child,
.dashboard-summary-card .info-row:last-child,
.identity-card .info-row:last-child,
.placement-card .info-row:last-child,
.dynamic-card .info-row:last-child,
.profile-card .data-row:last-child,
.dashboard-card .data-row:last-child,
.identity-card .data-row:last-child,
.placement-card .data-row:last-child,
.dynamic-card .data-row:last-child {
    border-bottom: 0;
}

.profile-card .label,
.dashboard-card .label,
.profile-summary-card .label,
.dashboard-summary-card .label,
.identity-card .label,
.placement-card .label,
.dynamic-card .label {
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
}

.profile-card .value,
.dashboard-card .value,
.profile-summary-card .value,
.dashboard-summary-card .value,
.identity-card .value,
.placement-card .value,
.dynamic-card .value {
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 650;
    word-break: break-word;
}

/* Jarak antar section dashboard */
.dashboard-section,
.profile-section,
.prajurit-section {
    margin-top: 22px;
}

/* Responsive tablet */
@media (max-width: 1100px) {
    .profile-summary-grid,
    .dashboard-profile-grid,
    .dashboard-card-grid,
    .profile-three-column,
    .prajurit-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Responsive mobile */
@media (max-width: 760px) {
    .profile-hero,
    .dashboard-profile-hero,
    .hero-profile-prajurit,
    .prajurit-hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px 20px;
    }

    .profile-hero img,
    .dashboard-profile-hero img,
    .hero-profile-prajurit img,
    .prajurit-hero img,
    .profile-photo-card img,
    .dashboard-photo-card img,
    .card-foto img {
        margin: 0 auto;
        width: 118px;
        height: 150px;
        max-width: 118px;
        max-height: 150px;
    }

    .profile-hero .hero-meta,
    .dashboard-profile-hero .hero-meta,
    .prajurit-hero .hero-meta {
        justify-content: center;
    }

    .profile-summary-grid,
    .dashboard-profile-grid,
    .dashboard-card-grid,
    .profile-three-column,
    .prajurit-card-grid {
        grid-template-columns: 1fr;
    }

    .profile-card .info-row,
    .dashboard-card .info-row,
    .profile-summary-card .info-row,
    .dashboard-summary-card .info-row,
    .identity-card .info-row,
    .placement-card .info-row,
    .dynamic-card .info-row,
    .profile-card .data-row,
    .dashboard-card .data-row,
    .identity-card .data-row,
    .placement-card .data-row,
    .dynamic-card .data-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* =========================================================
   Header Centered Responsive - 2026-07-09
   Menyamakan posisi header dengan konten utama dashboard/profil
========================================================= */

/* Bungkus isi header agar tidak melebar penuh */
.app-header,
.navy-header,
.main-header,
.topbar,
.navbar {
    width: 100%;
}

/* Isi header dibuat center seperti konten utama */
.app-header > .container,
.navy-header > .container,
.main-header > .container,
.topbar > .container,
.navbar > .container,
.app-header-inner,
.navy-header-inner,
.header-inner,
.topbar-inner {
    width: min(100% - 48px, 1260px);
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
}

/* Kalau header langsung berisi kiri-kanan tanpa container */
.app-header,
.navy-header,
.main-header,
.topbar {
    display: flex;
    justify-content: center;
}

.app-header > *,
.navy-header > *,
.main-header > *,
.topbar > * {
    box-sizing: border-box;
}

/* Layout isi header */
.app-header-inner,
.navy-header-inner,
.header-inner,
.topbar-inner,
.app-header > .container,
.navy-header > .container,
.main-header > .container,
.topbar > .container,
.navbar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

/* Area kiri: logo + judul */
.header-brand,
.app-brand,
.navy-brand,
.brand-area {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Area kanan: role + logout */
.header-actions,
.app-header-actions,
.navy-header-actions,
.topbar-actions,
.user-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

/* Tombol dashboard di tengah kiri tetap rapi */
.header-nav,
.app-nav,
.navy-nav,
.topbar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Samakan container konten utama dengan header */
.main-content,
.page-content,
.dashboard-container,
.profile-page,
.profile-shell,
.content-wrapper {
    width: min(100% - 48px, 1260px);
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero juga dibuat konsisten dengan lebar konten */
.profile-hero,
.dashboard-profile-hero,
.hero-profile-prajurit,
.prajurit-hero {
    width: 100%;
    box-sizing: border-box;
}

/* Responsive tablet */
@media (max-width: 900px) {
    .app-header > .container,
    .navy-header > .container,
    .main-header > .container,
    .topbar > .container,
    .navbar > .container,
    .app-header-inner,
    .navy-header-inner,
    .header-inner,
    .topbar-inner,
    .main-content,
    .page-content,
    .dashboard-container,
    .profile-page,
    .profile-shell,
    .content-wrapper {
        width: min(100% - 32px, 1260px);
    }

    .app-header-inner,
    .navy-header-inner,
    .header-inner,
    .topbar-inner,
    .app-header > .container,
    .navy-header > .container,
    .main-header > .container,
    .topbar > .container,
    .navbar > .container {
        gap: 12px;
    }
}

/* Responsive mobile */
@media (max-width: 640px) {
    .app-header,
    .navy-header,
    .main-header,
    .topbar,
    .navbar {
        min-height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .app-header > .container,
    .navy-header > .container,
    .main-header > .container,
    .topbar > .container,
    .navbar > .container,
    .app-header-inner,
    .navy-header-inner,
    .header-inner,
    .topbar-inner {
        width: calc(100% - 24px);
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 10px 14px;
    }

    .header-brand,
    .app-brand,
    .navy-brand,
    .brand-area {
        justify-content: center;
        width: 100%;
    }

    .header-nav,
    .app-nav,
    .navy-nav,
    .topbar-nav {
        justify-content: center;
        width: 100%;
        order: 2;
    }

    .header-actions,
    .app-header-actions,
    .navy-header-actions,
    .topbar-actions,
    .user-menu {
        justify-content: center;
        width: 100%;
        order: 3;
    }

    .main-content,
    .page-content,
    .dashboard-container,
    .profile-page,
    .profile-shell,
    .content-wrapper {
        width: calc(100% - 24px);
    }
}


/* =========================================================
   FINAL FIX - Center App Header Row
   Header background tetap full, isi header sejajar konten utama
========================================================= */

.app-header {
    width: 100%;
    background: #082f57;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

/* INI CLASS ASLI HEADER ANDA */
.app-header-row {
    width: min(100% - 48px, 1260px);
    max-width: 1260px;
    min-height: 72px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-sizing: border-box;
}

/* Brand kiri */
.app-brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #ffffff;
    text-decoration: none;
}

/* Logo */
.app-logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

/* Judul aplikasi */
.app-brand-link strong,
.app-brand-link .app-title,
.app-brand-title {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
}

/* Subtitle halaman */
.app-brand-link small,
.app-brand-link .app-subtitle,
.app-brand-subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    line-height: 1.25;
    margin-top: 2px;
    font-weight: 600;
}

/* Tombol/nav di header */
.app-header-row nav,
.app-header-nav,
.app-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Area kanan: role dan keluar */
.app-header-row > div:last-child,
.app-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: #ffffff;
    flex-shrink: 0;
}

/* Tombol header */
.app-header a,
.app-header button {
    white-space: nowrap;
}

/* Supaya separator tidak terlalu mencolok */
.app-header .separator,
.app-header .divider {
    opacity: 0.35;
}

/* =========================================================
   Responsive Tablet
========================================================= */

@media (max-width: 900px) {
    .app-header-row {
        width: calc(100% - 32px);
        min-height: 68px;
        gap: 12px;
    }

    .app-brand-link strong,
    .app-brand-link .app-title,
    .app-brand-title {
        font-size: 16px;
    }

    .app-brand-link small,
    .app-brand-link .app-subtitle,
    .app-brand-subtitle {
        font-size: 12px;
    }
}

/* =========================================================
   Responsive Mobile
   Header ditengah, tidak mepet kiri-kanan
========================================================= */

@media (max-width: 640px) {
    .app-header {
        padding: 10px 0;
    }

    .app-header-row {
        width: calc(100% - 24px);
        min-height: auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .app-brand-link {
        justify-content: center;
        width: 100%;
    }

    .app-header-row nav,
    .app-header-nav,
    .app-nav {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .app-header-row > div:last-child,
    .app-header-actions {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 13px;
    }

    .app-logo {
        width: 34px;
        height: 34px;
    }
}


/* =========================================================
   Dashboard Profil Prajurit
   - Foto + caption center
   - Identitas Personel 2 kolom
========================================================= */

/* ---------- CARD FOTO ---------- */
.photo-card,
.profile-photo-card,
.rank-photo-card {
    display: flex;
    flex-direction: column;
}

.photo-card-body,
.profile-photo-card-body,
.rank-photo-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    width: 100%;
}

.photo-card-body img,
.profile-photo-card-body img,
.rank-photo-card-body img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.photo-caption,
.rank-photo-caption,
.photo-name-box {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    max-width: 260px;
}

/* ---------- IDENTITAS PERSONEL ---------- */
.identity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}

.identity-item {
    min-width: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.identity-item .label {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.identity-item .value {
    color: #0f2f57;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    word-break: break-word;
}

/* ---------- STATUS SAAT INI juga boleh ikut 2 kolom bila ingin rapi ---------- */
.status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}

.status-item {
    min-width: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.status-item .label {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.status-item .value {
    color: #0f2f57;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    word-break: break-word;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .identity-grid,
    .status-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .photo-caption,
    .rank-photo-caption,
    .photo-name-box {
        max-width: 220px;
    }
}


/* =========================================================
   Button Polish - 2026-07-09
   - Sembunyikan tombol Dashboard duplikat di Hero Profil
   - Semua tombol dibuat bentuk pil
========================================================= */

/* Sembunyikan tombol Dashboard yang ada di Hero Profil Prajurit */
.profile-hero a[href$="/dashboard"],
.profile-hero a[href*="/dashboard"],
.dashboard-profile-hero a[href$="/dashboard"],
.dashboard-profile-hero a[href*="/dashboard"],
.hero-profile-prajurit a[href$="/dashboard"],
.hero-profile-prajurit a[href*="/dashboard"],
.prajurit-hero a[href$="/dashboard"],
.prajurit-hero a[href*="/dashboard"] {
    display: none !important;
}

/* Semua tombol umum dibuat pil */
.btn,
.button,
.navy-btn,
.app-btn,
.action-btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-light,
.btn-warning,
.btn-success,
.btn-danger,
.btn-info,
a.btn,
button.btn,
.app-header a,
.app-header button,
.profile-hero a,
.profile-hero button,
.dashboard-profile-hero a,
.dashboard-profile-hero button,
.hero-profile-prajurit a,
.hero-profile-prajurit button,
.prajurit-hero a,
.prajurit-hero button {
    border-radius: 999px !important;
}

/* Tombol header atas */
.app-header a,
.app-header button {
    min-height: 38px;
    padding: 9px 18px;
    border-radius: 999px !important;
    font-weight: 700;
}

/* Tombol di Hero Profil */
.profile-hero a,
.profile-hero button,
.dashboard-profile-hero a,
.dashboard-profile-hero button,
.hero-profile-prajurit a,
.hero-profile-prajurit button,
.prajurit-hero a,
.prajurit-hero button {
    min-height: 42px;
    padding: 10px 22px;
    border-radius: 999px !important;
    font-weight: 700;
}

/* Tombol putih di hero, seperti Revisi Identitas */
.profile-hero .btn-light,
.dashboard-profile-hero .btn-light,
.hero-profile-prajurit .btn-light,
.prajurit-hero .btn-light,
.profile-hero a:not([href*="/dashboard"]),
.dashboard-profile-hero a:not([href*="/dashboard"]),
.hero-profile-prajurit a:not([href*="/dashboard"]),
.prajurit-hero a:not([href*="/dashboard"]) {
    border-radius: 999px !important;
}

/* Tombol kecil dalam tabel/list tetap pil tapi tidak terlalu besar */
table .btn,
.table .btn,
.navy-table .btn,
.data-table .btn {
    min-height: 32px;
    padding: 7px 14px;
    border-radius: 999px !important;
    font-size: 12px;
    font-weight: 700;
}

/* Mobile: tombol tetap proporsional */
@media (max-width: 640px) {
    .app-header a,
    .app-header button {
        min-height: 36px;
        padding: 8px 16px;
    }

    .profile-hero a,
    .profile-hero button,
    .dashboard-profile-hero a,
    .dashboard-profile-hero button,
    .hero-profile-prajurit a,
    .hero-profile-prajurit button,
    .prajurit-hero a,
    .prajurit-hero button {
        min-height: 38px;
        padding: 9px 18px;
    }
}


/* Rapikan jarak setelah judul Profil Prajurit dihapus */
.profile-section,
.dashboard-section,
.profile-card-wrap,
.dashboard-profile-panel {
    padding-top: 18px;
}

.profile-section > .section-header:empty,
.dashboard-section > .section-header:empty,
.profile-card-wrap > .section-header:empty,
.dashboard-profile-panel > .section-header:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Bersihkan ruang kosong setelah judul Profil Prajurit dihapus */
.profile-panel,
.profile-dashboard-panel,
.profile-main-panel,
.dashboard-profile-panel {
    padding-top: 24px !important;
}

.profile-panel > hr:first-child,
.profile-dashboard-panel > hr:first-child,
.profile-main-panel > hr:first-child,
.dashboard-profile-panel > hr:first-child {
    display: none !important;
}

.profile-dashboard-cards,
.profile-cards,
.dashboard-profile-cards {
    margin-top: 0 !important;
}


/* =========================================================
   Header final: Dashboard tetap ada, icon user/logout tetap ada
========================================================= */

.app-header-row {
    width: min(100% - 48px, 1260px);
    max-width: 1260px;
    min-height: 72px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.app-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-dashboard-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.header-dashboard-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.app-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: #ffffff;
}

.app-user-role {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.app-header-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 13px;
}

.app-header-separator {
    opacity: 0.35;
}

.app-logout-form {
    margin: 0;
}

.app-logout-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 56, 112, 0.45);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.app-logout-btn:hover {
    background: rgba(0, 76, 140, 0.65);
}

/* Mobile tetap rapi */
@media (max-width: 640px) {
    .app-header-row {
        width: calc(100% - 24px);
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        text-align: center;
        padding: 10px 0;
    }

    .app-brand-link,
    .app-header-nav,
    .app-header-actions {
        justify-content: center;
        width: 100%;
    }

    .header-dashboard-btn,
    .app-logout-btn {
        min-height: 38px;
        padding: 8px 18px;
    }
}


/* =========================================================
   HEADER_CLEAN_FINAL_20260709_START
   Header final:
   - Dashboard atas tetap ada
   - Icon nama/user tetap ada
   - Icon role Perwira tetap ada
   - Icon Keluar tetap ada
   - Tombol bentuk pil
========================================================= */

.app-header {
    width: 100%;
    background: #082f57;
}

.app-header-row {
    width: min(100% - 48px, 1260px);
    max-width: 1260px;
    min-height: 72px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-sizing: border-box;
}

.app-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #ffffff;
    text-decoration: none;
}

.app-logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.app-title {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.12;
    font-weight: 800;
}

.app-page-title {
    color: rgba(255,255,255,0.88);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    margin-top: 3px;
}

.app-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-dashboard-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 24px;
    border-radius: 999px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.header-dashboard-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.user-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: #ffffff;
    flex-shrink: 0;
}

.user-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-weight: 800;
    white-space: nowrap;
}

.user-meta-icon {
    display: inline-block !important;
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
    opacity: 0.95;
}

.top-separator {
    color: rgba(255, 255, 255, 0.35);
}

.logout-form {
    margin: 0;
}

.logout-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 20px;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 56, 112, 0.45);
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.logout-button:hover {
    background: rgba(0, 76, 140, 0.65);
}

@media (max-width: 640px) {
    .app-header-row {
        width: calc(100% - 24px);
        min-height: auto;
        padding: 12px 0;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    .app-brand-link,
    .app-header-nav,
    .user-info {
        justify-content: center;
        width: 100%;
    }

    .user-info {
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .header-dashboard-btn,
    .logout-button {
        min-height: 38px;
        padding: 8px 18px;
    }
}

/* HEADER_CLEAN_FINAL_20260709_END */


/* =========================================================
   MOBILE HEADER TWEAK
   - User | Role | Keluar horizontal
   - Keluar tetap pil di sisi kanan
========================================================= */

@media (max-width: 640px) {
    body .app-header .user-info {
        width: 100% !important;

        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;

        margin-top: 6px !important;
    }

    body .app-header .top-separator {
        display: none !important;
    }

    body .app-header .user-meta-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    body .app-header .logout-form {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    body .app-header .logout-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        padding: 8px 16px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}


/* Placeholder nav saat tombol Dashboard disembunyikan di halaman Dashboard Perwira */
body .app-header .app-header-nav-empty {
    min-width: 120px !important;
    min-height: 42px !important;
}

@media (max-width: 760px) {
    body .app-header .app-header-nav-empty {
        display: none !important;
    }
}


/* =========================================================
   LOGOUT_BUTTON_PILL_FINAL_20260709
   Tombol Keluar dibuat model pil di semua halaman
========================================================= */

body .app-header .logout-button,
body .app-header button.logout-button,
body .app-header .app-logout-btn,
body .app-header button.app-logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 42px !important;
    padding: 10px 22px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    background: rgba(0, 56, 112, 0.50) !important;
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
                0 8px 18px rgba(0,0,0,0.10) !important;

    cursor: pointer !important;
    white-space: nowrap !important;
}

body .app-header .logout-button:hover,
body .app-header button.logout-button:hover,
body .app-header .app-logout-btn:hover,
body .app-header button.app-logout-btn:hover {
    background: rgba(0, 76, 140, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

body .app-header .logout-button svg,
body .app-header .app-logout-btn svg,
body .app-header .logout-icon {
    width: 15px !important;
    height: 15px !important;
    display: inline-block !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

/* Mobile */
@media (max-width: 760px) {
    body .app-header .logout-button,
    body .app-header button.logout-button,
    body .app-header .app-logout-btn,
    body .app-header button.app-logout-btn {
        min-height: 38px !important;
        padding: 8px 18px !important;
        border-radius: 999px !important;
    }
}


/* =========================================================
   MOBILE DASHBOARD PHOTO CENTER - 2026-07-09
   Pusatkan judul Foto Pangkat Terakhir, foto, dan blok nama
========================================================= */

@media (max-width: 760px) {

    /* Card foto pangkat terakhir */
    body .profile-photo-card,
    body .dashboard-photo-card,
    body .card-foto,
    body .photo-card,
    body .rank-photo-card {

        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Judul "Foto Pangkat Terakhir" */
    body .profile-photo-card h2,
    body .profile-photo-card h3,
    body .dashboard-photo-card h2,
    body .dashboard-photo-card h3,
    body .card-foto h2,
    body .card-foto h3,
    body .photo-card h2,
    body .photo-card h3,
    body .rank-photo-card h2,
    body .rank-photo-card h3 {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Area isi card foto */
    body .photo-card-body,
    body .profile-photo-card-body,
    body .rank-photo-card-body,
    body .dashboard-photo-card-body,
    body .photo-body,
    body .rank-photo-body {
        width: 100% !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Foto pangkat terakhir */
    body .profile-photo-card img,
    body .dashboard-photo-card img,
    body .card-foto img,
    body .photo-card img,
    body .rank-photo-card img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: min(100%, 280px) !important;
        max-width: 280px !important;
        height: auto !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Blok nama/pangkat di bawah foto */
    body .photo-caption,
    body .rank-photo-caption,
    body .photo-name-box,
    body .rank-name-box,
    body .profile-photo-caption,
    body .dashboard-photo-caption {
        width: min(100%, 280px) !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    /* Jika blok pangkat/nama memakai div umum di bawah gambar */
    body .profile-photo-card img + div,
    body .dashboard-photo-card img + div,
    body .card-foto img + div,
    body .photo-card img + div,
    body .rank-photo-card img + div {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}


/* =========================================================
   BOTTOM ACTION + SOFT TYPOGRAPHY FINAL - 2026-07-09
========================================================= */

/* Tombol Revisi Identitas dipindah ke bawah halaman */
body .page-bottom-actions {
    width: min(100% - 48px, 1260px);
    max-width: 1260px;
    margin: 28px auto 36px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
}

body .page-bottom-actions a,
body .page-bottom-actions .btn,
body .page-bottom-actions button {
    position: static !important;
    inset: auto !important;
    transform: none !important;

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

    min-height: 42px !important;
    padding: 10px 24px !important;
    border-radius: 999px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;

    background: #ffffff !important;
    color: #0f2f57 !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10) !important;
}

/* Hero tidak perlu menyisakan ruang untuk tombol */
body .profile-hero,
body .dashboard-profile-hero,
body .hero-profile-prajurit,
body .prajurit-hero {
    margin-bottom: 22px !important;
}

/* Typography header lebih ringan */
body .app-title {
    font-weight: 700 !important;
}

body .app-page-title {
    font-weight: 600 !important;
}

body .header-dashboard-btn,
body .logout-button,
body .user-name,
body .user-role,
body .user-meta-item {
    font-weight: 600 !important;
}

/* Typography hero lebih ringan */
body .profile-hero h1,
body .dashboard-profile-hero h1,
body .hero-profile-prajurit h1,
body .prajurit-hero h1,
body .profile-hero .hero-title,
body .dashboard-profile-hero .hero-title,
body .hero-profile-prajurit .hero-title,
body .prajurit-hero .hero-title {
    font-weight: 650 !important;
    letter-spacing: -0.015em !important;
}

body .profile-hero,
body .dashboard-profile-hero,
body .hero-profile-prajurit,
body .prajurit-hero {
    font-weight: 500 !important;
}

/* Judul card */
body .profile-card h2,
body .profile-card h3,
body .dashboard-card h2,
body .dashboard-card h3,
body .identity-card h2,
body .identity-card h3,
body .placement-card h2,
body .placement-card h3,
body .dynamic-card h2,
body .dynamic-card h3,
body .photo-card h2,
body .photo-card h3,
body .rank-photo-card h2,
body .rank-photo-card h3 {
    font-weight: 620 !important;
}

/* Label data */
body .label,
body .identity-item .label,
body .status-item .label,
body .profile-card .label,
body .dashboard-card .label {
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
}

/* Value data */
body .value,
body .identity-item .value,
body .status-item .value,
body .profile-card .value,
body .dashboard-card .value {
    font-weight: 600 !important;
}

/* Blok nama/pangkat di bawah foto */
body .photo-caption,
body .rank-photo-caption,
body .photo-name-box,
body .rank-name-box,
body .profile-photo-caption,
body .dashboard-photo-caption,
body .photo-caption *,
body .rank-photo-caption *,
body .photo-name-box *,
body .rank-name-box *,
body .profile-photo-caption *,
body .dashboard-photo-caption * {
    font-weight: 600 !important;
}

/* Tombol umum tidak terlalu tebal */
body .btn,
body .button,
body .navy-btn,
body .app-btn,
body .action-btn,
body button,
body a.btn {
    font-weight: 600 !important;
}

/* Mobile */
@media (max-width: 760px) {
    body .page-bottom-actions {
        width: calc(100% - 24px);
        margin: 24px auto 32px;
        justify-content: center;
    }

    body .page-bottom-actions a,
    body .page-bottom-actions .btn,
    body .page-bottom-actions button {
        width: 100%;
        max-width: 260px;
        min-height: 40px !important;
        padding: 10px 20px !important;
    }
}


/* =========================================================
   PROFILE PHOTO RATIO 4:6 / 2:3 - 2026-07-09
   Foto Pangkat Terakhir dibuat proporsi portrait
========================================================= */

/* Foto pangkat terakhir di Profil Saya dan Dashboard */
body .profile-photo-card img,
body .dashboard-photo-card img,
body .card-foto img,
body .photo-card img,
body .rank-photo-card img,
body img.dashboard-rank-main-photo,
body img.profile-rank-main-photo {
    width: 240px !important;
    height: 360px !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 6 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 14px !important;
}

/* Container foto tetap center */
body .profile-photo-card,
body .dashboard-photo-card,
body .card-foto,
body .photo-card,
body .rank-photo-card {
    align-items: center !important;
    text-align: center !important;
}

/* Blok nama/pangkat mengikuti lebar foto */
body .photo-caption,
body .rank-photo-caption,
body .photo-name-box,
body .rank-name-box,
body .profile-photo-caption,
body .dashboard-photo-caption,
body .profile-photo-card img + div,
body .dashboard-photo-card img + div,
body .card-foto img + div,
body .photo-card img + div,
body .rank-photo-card img + div {
    width: 240px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile: foto portrait lebih kecil agar tidak memenuhi layar */
@media (max-width: 760px) {
    body .profile-photo-card img,
    body .dashboard-photo-card img,
    body .card-foto img,
    body .photo-card img,
    body .rank-photo-card img,
    body img.dashboard-rank-main-photo,
    body img.profile-rank-main-photo {
        width: 220px !important;
        height: 330px !important;
        aspect-ratio: 4 / 6 !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    body .photo-caption,
    body .rank-photo-caption,
    body .photo-name-box,
    body .rank-name-box,
    body .profile-photo-caption,
    body .dashboard-photo-caption,
    body .profile-photo-card img + div,
    body .dashboard-photo-card img + div,
    body .card-foto img + div,
    body .photo-card img + div,
    body .rank-photo-card img + div {
        width: 220px !important;
        max-width: 100% !important;
    }
}

/* Desktop lebar: sedikit lebih besar tapi tetap 4:6 */
@media (min-width: 1200px) {
    body .profile-photo-card img,
    body .dashboard-photo-card img,
    body .card-foto img,
    body .photo-card img,
    body .rank-photo-card img,
    body img.dashboard-rank-main-photo,
    body img.profile-rank-main-photo {
        width: 250px !important;
        height: 375px !important;
    }

    body .photo-caption,
    body .rank-photo-caption,
    body .photo-name-box,
    body .rank-name-box,
    body .profile-photo-caption,
    body .dashboard-photo-caption,
    body .profile-photo-card img + div,
    body .dashboard-photo-card img + div,
    body .card-foto img + div,
    body .photo-card img + div,
    body .rank-photo-card img + div {
        width: 250px !important;
    }
}


/* =========================================================
   GLOBAL SOFT TYPOGRAPHY FINAL - 2026-07-09
   Menipiskan typography agar seragam di semua tampilan
========================================================= */

/* Judul utama aplikasi */
body .app-title {
    font-weight: 650 !important;
}

/* Subtitle header */
body .app-page-title {
    font-weight: 550 !important;
}

/* Header user, role, dashboard, keluar */
body .user-name,
body .user-role,
body .user-meta-item,
body .header-dashboard-btn,
body .logout-button {
    font-weight: 550 !important;
}

/* Judul hero / nama besar */
body .profile-hero h1,
body .dashboard-profile-hero h1,
body .hero-profile-prajurit h1,
body .prajurit-hero h1,
body .profile-hero .hero-title,
body .dashboard-profile-hero .hero-title,
body .hero-profile-prajurit .hero-title,
body .prajurit-hero .hero-title {
    font-weight: 620 !important;
}

/* Meta hero: pangkat, korps, NRP */
body .profile-hero,
body .dashboard-profile-hero,
body .hero-profile-prajurit,
body .prajurit-hero {
    font-weight: 500 !important;
}

/* Judul card */
body .profile-card h2,
body .profile-card h3,
body .dashboard-card h2,
body .dashboard-card h3,
body .identity-card h2,
body .identity-card h3,
body .placement-card h2,
body .placement-card h3,
body .dynamic-card h2,
body .dynamic-card h3,
body .photo-card h2,
body .photo-card h3,
body .rank-photo-card h2,
body .rank-photo-card h3,
body .status-card h2,
body .status-card h3,
body .navy-card h2,
body .navy-card h3 {
    font-weight: 600 !important;
}

/* Label/kategori data */
body .label,
body .identity-item .label,
body .status-item .label,
body .profile-card .label,
body .dashboard-card .label,
body .identity-card .label,
body .placement-card .label,
body .dynamic-card .label,
body .navy-card .label,
body .info-label,
body .data-label {
    font-weight: 450 !important;
    letter-spacing: 0.025em !important;
}

/* Value/isian data - ini yang sebelumnya terlalu tebal */
body .value,
body .identity-item .value,
body .status-item .value,
body .profile-card .value,
body .dashboard-card .value,
body .identity-card .value,
body .placement-card .value,
body .dynamic-card .value,
body .navy-card .value,
body .info-value,
body .data-value {
    font-weight: 550 !important;
}

/* Isi tabel */
body table,
body table td,
body .table,
body .navy-table,
body .data-table {
    font-weight: 450 !important;
}

/* Header tabel tetap sedikit tegas tapi tidak terlalu bold */
body table th,
body .table th,
body .navy-table th,
body .data-table th {
    font-weight: 600 !important;
}

/* Tombol umum */
body .btn,
body .button,
body .navy-btn,
body .app-btn,
body .action-btn,
body button,
body a.btn {
    font-weight: 550 !important;
}

/* Blok pangkat/nama di bawah foto */
body .photo-caption,
body .rank-photo-caption,
body .photo-name-box,
body .rank-name-box,
body .profile-photo-caption,
body .dashboard-photo-caption,
body .photo-caption *,
body .rank-photo-caption *,
body .photo-name-box *,
body .rank-name-box *,
body .profile-photo-caption *,
body .dashboard-photo-caption * {
    font-weight: 550 !important;
}

/* Form input */
body input,
body select,
body textarea {
    font-weight: 450 !important;
}

body label {
    font-weight: 500 !important;
}

/* Mobile: value lebih halus agar tidak berat di layar kecil */
@media (max-width: 760px) {
    body .value,
    body .identity-item .value,
    body .status-item .value,
    body .profile-card .value,
    body .dashboard-card .value,
    body .identity-card .value,
    body .placement-card .value,
    body .dynamic-card .value,
    body .navy-card .value,
    body .info-value,
    body .data-value {
        font-weight: 520 !important;
    }

    body .label,
    body .identity-item .label,
    body .status-item .label,
    body .profile-card .label,
    body .dashboard-card .label,
    body .identity-card .label,
    body .placement-card .label,
    body .dynamic-card .label,
    body .navy-card .label,
    body .info-label,
    body .data-label {
        font-weight: 430 !important;
    }

    body .profile-card h2,
    body .profile-card h3,
    body .dashboard-card h2,
    body .dashboard-card h3,
    body .identity-card h2,
    body .identity-card h3,
    body .placement-card h2,
    body .placement-card h3,
    body .dynamic-card h2,
    body .dynamic-card h3,
    body .photo-card h2,
    body .photo-card h3,
    body .rank-photo-card h2,
    body .rank-photo-card h3,
    body .status-card h2,
    body .status-card h3,
    body .navy-card h2,
    body .navy-card h3 {
        font-weight: 580 !important;
    }
}


/* =========================================================
   VALUE FONT THINNER FINAL - 2026-07-09
   Isian data dibuat lebih tipis lagi
========================================================= */

/* Value/isian data global */
body .value,
body .identity-item .value,
body .status-item .value,
body .profile-card .value,
body .dashboard-card .value,
body .identity-card .value,
body .placement-card .value,
body .dynamic-card .value,
body .navy-card .value,
body .info-value,
body .data-value {
    font-weight: 480 !important;
}

/* Jika value ditulis langsung di dalam item/card tanpa class value */
body .identity-item,
body .status-item,
body .profile-card .data-row,
body .dashboard-card .data-row,
body .profile-card .info-row,
body .dashboard-card .info-row {
    font-weight: 480 !important;
}

/* Blok pangkat/nama di bawah foto juga lebih halus */
body .photo-caption,
body .rank-photo-caption,
body .photo-name-box,
body .rank-name-box,
body .profile-photo-caption,
body .dashboard-photo-caption,
body .photo-caption *,
body .rank-photo-caption *,
body .photo-name-box *,
body .rank-name-box *,
body .profile-photo-caption *,
body .dashboard-photo-caption * {
    font-weight: 500 !important;
}

/* Mobile: isian data lebih tipis lagi */
@media (max-width: 760px) {
    body .value,
    body .identity-item .value,
    body .status-item .value,
    body .profile-card .value,
    body .dashboard-card .value,
    body .identity-card .value,
    body .placement-card .value,
    body .dynamic-card .value,
    body .navy-card .value,
    body .info-value,
    body .data-value {
        font-weight: 460 !important;
    }

    body .identity-item,
    body .status-item,
    body .profile-card .data-row,
    body .dashboard-card .data-row,
    body .profile-card .info-row,
    body .dashboard-card .info-row {
        font-weight: 460 !important;
    }
}


/* =========================================================
   VALUE FONT MEDIUM FINAL - 2026-07-09
   Isian data dibuat bold sedikit saja, tidak terlalu tebal
========================================================= */

/* Isian data utama */
body .value,
body .identity-item .value,
body .status-item .value,
body .profile-card .value,
body .dashboard-card .value,
body .identity-card .value,
body .placement-card .value,
body .dynamic-card .value,
body .navy-card .value,
body .info-value,
body .data-value {
    font-weight: 500 !important;
}

/* Jika value berada langsung di dalam info/data row */
body .profile-card .data-row,
body .dashboard-card .data-row,
body .profile-card .info-row,
body .dashboard-card .info-row,
body .identity-card .data-row,
body .identity-card .info-row,
body .status-card .data-row,
body .status-card .info-row {
    font-weight: 500 !important;
}

/* Label tetap lebih tipis daripada value */
body .label,
body .identity-item .label,
body .status-item .label,
body .profile-card .label,
body .dashboard-card .label,
body .identity-card .label,
body .placement-card .label,
body .dynamic-card .label,
body .navy-card .label,
body .info-label,
body .data-label {
    font-weight: 450 !important;
}

/* Card title tetap jelas, tapi tidak terlalu berat */
body .profile-card h2,
body .profile-card h3,
body .dashboard-card h2,
body .dashboard-card h3,
body .identity-card h2,
body .identity-card h3,
body .placement-card h2,
body .placement-card h3,
body .dynamic-card h2,
body .dynamic-card h3,
body .photo-card h2,
body .photo-card h3,
body .rank-photo-card h2,
body .rank-photo-card h3,
body .status-card h2,
body .status-card h3,
body .navy-card h2,
body .navy-card h3 {
    font-weight: 580 !important;
}

/* Blok pangkat/nama di bawah foto sedikit lebih tegas karena sebagai caption utama */
body .photo-caption,
body .rank-photo-caption,
body .photo-name-box,
body .rank-name-box,
body .profile-photo-caption,
body .dashboard-photo-caption,
body .photo-caption *,
body .rank-photo-caption *,
body .photo-name-box *,
body .rank-name-box *,
body .profile-photo-caption *,
body .dashboard-photo-caption * {
    font-weight: 550 !important;
}

/* Mobile sama, tidak lebih tebal */
@media (max-width: 760px) {
    body .value,
    body .identity-item .value,
    body .status-item .value,
    body .profile-card .value,
    body .dashboard-card .value,
    body .identity-card .value,
    body .placement-card .value,
    body .dynamic-card .value,
    body .navy-card .value,
    body .info-value,
    body .data-value {
        font-weight: 500 !important;
    }
}


/* =========================================================
   LABEL VALUE BALANCE FINAL - 2026-07-09
   Label dibuat sedikit lebih tegas, value dibuat lebih ringan
========================================================= */

/* LABEL: NAMA LENGKAP, PANGKAT/KORPS, NRP, dst */
body .label,
body .identity-item .label,
body .status-item .label,
body .profile-card .label,
body .dashboard-card .label,
body .identity-card .label,
body .placement-card .label,
body .dynamic-card .label,
body .status-card .label,
body .navy-card .label,
body .info-label,
body .data-label {
    font-weight: 500 !important;
    color: #536b8a !important;
    letter-spacing: 0.025em !important;
}

/* VALUE: Agus Haryanto, Kolonel Laut / Pelaut, 14281, dst */
body .value,
body .identity-item .value,
body .status-item .value,
body .profile-card .value,
body .dashboard-card .value,
body .identity-card .value,
body .placement-card .value,
body .dynamic-card .value,
body .status-card .value,
body .navy-card .value,
body .info-value,
body .data-value {
    font-weight: 450 !important;
    color: #082f57 !important;
}

/* Kalau ada value yang tidak memakai class value tetapi berada dalam row/card */
body .profile-card .info-row,
body .profile-card .data-row,
body .dashboard-card .info-row,
body .dashboard-card .data-row,
body .identity-card .info-row,
body .identity-card .data-row,
body .status-card .info-row,
body .status-card .data-row {
    font-weight: 450 !important;
}

/* Judul card tetap jelas tetapi tidak terlalu berat */
body .profile-card h2,
body .profile-card h3,
body .dashboard-card h2,
body .dashboard-card h3,
body .identity-card h2,
body .identity-card h3,
body .placement-card h2,
body .placement-card h3,
body .dynamic-card h2,
body .dynamic-card h3,
body .photo-card h2,
body .photo-card h3,
body .rank-photo-card h2,
body .rank-photo-card h3,
body .status-card h2,
body .status-card h3,
body .navy-card h2,
body .navy-card h3 {
    font-weight: 600 !important;
}

/* Mobile: pertahankan komposisi yang sama */
@media (max-width: 760px) {
    body .label,
    body .identity-item .label,
    body .status-item .label,
    body .profile-card .label,
    body .dashboard-card .label,
    body .identity-card .label,
    body .placement-card .label,
    body .dynamic-card .label,
    body .status-card .label,
    body .navy-card .label,
    body .info-label,
    body .data-label {
        font-weight: 500 !important;
    }

    body .value,
    body .identity-item .value,
    body .status-item .value,
    body .profile-card .value,
    body .dashboard-card .value,
    body .identity-card .value,
    body .placement-card .value,
    body .dynamic-card .value,
    body .status-card .value,
    body .navy-card .value,
    body .info-value,
    body .data-value {
        font-weight: 450 !important;
    }
}


/* =========================================================
   DASHBOARD RANK SUMMARY CLEAN - 2026-07-09
   Blok Riwayat Pangkat di Dashboard Perwira dibuat sebagai ringkasan.
========================================================= */

.dashboard-rank-footer,
.rank-history-footer,
.pangkat-history-footer,
.dashboard-rank-actions,
.rank-history-actions,
.pangkat-history-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 16px;
    margin-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.dashboard-rank-footer-note {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

.dashboard-card table th:last-child,
.dashboard-card table td:last-child {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .dashboard-rank-footer,
    .rank-history-footer,
    .pangkat-history-footer,
    .dashboard-rank-actions,
    .rank-history-actions,
    .pangkat-history-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-rank-footer-note {
        text-align: left;
    }
}

/* =========================================================
   RESTORE RANK EDIT COLUMN - 2026-07-09
========================================================= */

.rank-action-cell {
    width: 120px;
    min-width: 120px;
    text-align: right;
    white-space: nowrap;
}

.rank-edit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid #bae6fd;
    background: #e0f2fe;
    color: #075985;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.12);
}

.rank-edit-pill:hover {
    background: #bae6fd;
    color: #034c74;
}

/* =========================================================
   RANK DASHBOARD EDIT BUTTON RESTORE - 2026-07-09
========================================================= */

.rank-edit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid #bae6fd;
    background: #e0f2fe;
    color: #075985;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.12);
}

.rank-edit-pill:hover {
    background: #bae6fd;
    color: #034c74;
}

.dashboard-rank-table th:last-child,
.dashboard-rank-table td:last-child,
.rank-history-table th:last-child,
.rank-history-table td:last-child,
.panel table th:last-child,
.panel table td:last-child {
    white-space: nowrap;
}

/* =========================================================
   FIX RANK FOOTER BUTTON VISIBILITY - 2026-07-09
========================================================= */

.dashboard-rank-footer {
    justify-content: flex-end !important;
}

/* Pastikan tombol Tambah Pangkat tetap terbaca normal dan saat hover */
.dashboard-rank-footer .btn-small.primary,
.dashboard-rank-footer .btn-small.primary:visited,
.dashboard-rank-footer .btn-small.primary:hover,
.dashboard-rank-footer .btn-small.primary:focus,
.dashboard-rank-footer .btn-small.primary:active {

    text-decoration: none !important;
    opacity: 1 !important;
}

/* Hover dibuat sedikit lebih terang, tapi teks tetap putih */
.dashboard-rank-footer .btn-small.primary:hover {

}

/* =========================================================
   UNIVERSAL PILL BUTTON SYSTEM - 2026-07-09
   Standarisasi tombol utama, tombol aksi, dan tombol edit.
========================================================= */

/* ------------------------------
   BASE PILL BUTTON
------------------------------ */
.btn,
.btn-small,
.btn-primary,
.btn-action,
.action-btn,
.pill-btn,
button.btn,
a.btn,
a.btn-small {
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

/* ------------------------------
   PRIMARY NAVY BUTTON
   Untuk: Profil Lengkap, Tambah Pangkat, Simpan, Kelola, Tambah Data
------------------------------ */
.btn.primary,
.btn-small.primary,
.btn-primary,
a.btn.primary,
a.btn-small.primary,
button.btn.primary,
button.btn-small.primary,
.profile-bottom-actions .btn-small.primary,
.dashboard-rank-footer .btn-small.primary,
.card-actions .btn-small.primary,
.form-actions .btn-small.primary,
.table-actions .btn-small.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 136px !important;
    height: 40px !important;
    padding: 0 22px !important;

    border-radius: 999px !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    opacity: 1 !important;
}

/* State tombol primary */
.btn.primary:visited,
.btn-small.primary:visited,
.btn-primary:visited,
.profile-bottom-actions .btn-small.primary:visited,
.dashboard-rank-footer .btn-small.primary:visited {
}

.btn.primary:hover,
.btn.primary:focus,
.btn.primary:active,
.btn-small.primary:hover,
.btn-small.primary:focus,
.btn-small.primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.profile-bottom-actions .btn-small.primary:hover,
.profile-bottom-actions .btn-small.primary:focus,
.profile-bottom-actions .btn-small.primary:active,
.dashboard-rank-footer .btn-small.primary:hover,
.dashboard-rank-footer .btn-small.primary:focus,
.dashboard-rank-footer .btn-small.primary:active {

    text-decoration: none !important;
    opacity: 1 !important;
}

/* ------------------------------
   EDIT / SECONDARY LIGHT BLUE BUTTON
   Untuk: Edit di tabel, revisi ringan, buka detail
------------------------------ */
.rank-edit-pill,
.btn-edit,
.btn.small-edit,
.btn-small.edit,
a.rank-edit-pill,
a.btn-edit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 86px !important;
    height: 34px !important;
    padding: 0 18px !important;

    border-radius: 999px !important;

    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    opacity: 1 !important;
}

.rank-edit-pill:visited,
.btn-edit:visited,
.btn.small-edit:visited,
.btn-small.edit:visited {
}

.rank-edit-pill:hover,
.rank-edit-pill:focus,
.rank-edit-pill:active,
.btn-edit:hover,
.btn-edit:focus,
.btn-edit:active,
.btn.small-edit:hover,
.btn.small-edit:focus,
.btn.small-edit:active,
.btn-small.edit:hover,
.btn-small.edit:focus,
.btn-small.edit:active {

    text-decoration: none !important;
    opacity: 1 !important;
}

/* ------------------------------
   WARNING / REVISION BUTTON
------------------------------ */
.btn-warning,
.btn.warning,
.btn-small.warning {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 120px !important;
    height: 38px !important;
    padding: 0 20px !important;

    border-radius: 999px !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.btn-warning:hover,
.btn.warning:hover,
.btn-small.warning:hover {

}

/* ------------------------------
   DANGER / DELETE BUTTON
------------------------------ */
.btn-danger,
.btn.danger,
.btn-small.danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 120px !important;
    height: 38px !important;
    padding: 0 20px !important;

    border-radius: 999px !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.btn-danger:hover,
.btn.danger:hover,
.btn-small.danger:hover {

}

/* ------------------------------
   BUTTON GROUP / FOOTER ACTIONS
------------------------------ */
.profile-bottom-actions,
.dashboard-rank-footer,
.card-actions,
.form-actions,
.table-footer-actions,
.section-actions {

    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* Footer tombol bawah card/table */
.dashboard-rank-footer,
.table-footer-actions {
    padding-top: 16px !important;
    margin-top: 14px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.25) !important;
}

/* Kolom aksi tabel */
.rank-action-cell,
.action-cell,
td.action-cell,
th.action-cell {
    width: 120px;
    min-width: 120px;
    text-align: center;
    white-space: nowrap;
}

/* ------------------------------
   MOBILE
------------------------------ */
@media (max-width: 768px) {
    .profile-bottom-actions,
    .dashboard-rank-footer,
    .card-actions,
    .form-actions,
    .table-footer-actions,
    .section-actions {
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-direction: column !important;
    }

    .profile-bottom-actions .btn-small.primary,
    .dashboard-rank-footer .btn-small.primary,
    .card-actions .btn-small.primary,
    .form-actions .btn-small.primary,
    .table-footer-actions .btn-small.primary,
    .btn.primary,
    .btn-small.primary,
    .btn-primary {
        width: 100% !important;
        min-width: 0 !important;
    }

    .rank-edit-pill,
    .btn-edit,
    .btn.small-edit,
    .btn-small.edit {
        min-width: 82px !important;
    }
}

/* =========================================================
   UNIVERSAL TABLE STATUS COLUMN ALIGNMENT - 2026-07-09
   Merapikan header dan isi kolom Status agar simetris.
========================================================= */

/* Kolom status pada tabel riwayat/dashboard */
th.status-cell,
td.status-cell,
th.rank-status-cell,
td.rank-status-cell,
.table-wrap table th:nth-last-child(2),
.table-wrap table td.rank-status-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Khusus tabel Riwayat Pangkat dashboard:
   Setelah ada kolom AKSI, Status adalah kolom sebelum terakhir */
section.panel .table-wrap table th:nth-last-child(2) {
    text-align: center !important;
}

/* Badge status dipastikan berada tepat di tengah cell */
.rank-status-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

.rank-status-pill,
.status-pill,
.badge,
.badge-muted,
.badge-info,
.badge-success,
.badge-warning,
.badge-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
}

/* Lebar kolom status dibuat cukup agar "Menunggu Verifikasi" tidak terasa mepet */
.rank-status-cell,
section.panel .table-wrap table th:nth-last-child(2) {
    min-width: 160px !important;
}

/* =========================================================
   UNIVERSAL TABLE ACTION COLUMN ALIGNMENT - 2026-07-09
   Merapikan header dan isi kolom Aksi agar simetris.
========================================================= */

/* Kolom aksi tabel: header dan isi rata tengah */
th.action-cell,
td.action-cell,
th.rank-action-cell,
td.rank-action-cell,
.rank-action-cell,
.table-wrap table th:last-child,
.table-wrap table td:last-child {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Tombol dalam kolom aksi dipastikan berada tepat di tengah */
.table-wrap table td:last-child a,
.table-wrap table td:last-child button,
.rank-action-cell a,
.rank-action-cell button,
.action-cell a,
.action-cell button {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Lebar kolom aksi dibuat stabil */
.table-wrap table th:last-child,
.table-wrap table td:last-child,
.rank-action-cell,
.action-cell {
    width: 130px !important;
    min-width: 130px !important;
    white-space: nowrap !important;
}

/* Khusus tombol edit agar tetap proporsional di tengah kolom */
.rank-edit-pill {
    min-width: 86px !important;
    height: 34px !important;
}

/* =========================================================
   MOBILE STICKY ACTION COLUMN - 2026-07-09
   Kolom AKSI tetap terlihat pada tampilan mobile.
========================================================= */

/* Table wrapper tetap bisa scroll horizontal */
.table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Tabel punya lebar minimal agar kolom tidak saling menekan */
.table-wrap table {
    min-width: 860px;
}

/* Header dan cell kolom aksi */
.table-wrap table th:last-child,
.table-wrap table td:last-child {
    text-align: center !important;
    vertical-align: middle !important;
    width: 130px !important;
    min-width: 130px !important;
    white-space: nowrap !important;
}

/* Khusus mobile: kolom AKSI dibuat menempel di kanan */
@media (max-width: 768px) {
    .table-wrap table th:last-child,
    .table-wrap table td:last-child {
        position: sticky !important;
        right: 0 !important;
        z-index: 8 !important;
        background: #ffffff !important;
        box-shadow: -8px 0 16px rgba(15, 23, 42, 0.06) !important;
    }

    .table-wrap table thead th:last-child {
        z-index: 12 !important;
        background: #f1f5f9 !important;
    }

    .rank-action-cell,
    .action-cell {
        text-align: center !important;
    }

    .rank-edit-pill {
        min-width: 78px !important;
        height: 32px !important;
        padding: 0 14px !important;

    }

    /* Judul card mobile dibuat tidak terlalu melebar */
    .section-subtitle {
        max-width: 100% !important;
        line-height: 1.45 !important;
    }

    /* Tombol Tambah Pangkat tidak ikut terpotong di mobile */
    .dashboard-rank-footer {
        justify-content: flex-end !important;
        overflow: visible !important;
    }

    .dashboard-rank-footer .btn-small.primary {

        min-width: 136px !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   REMOVE MOBILE ACTION COLUMN SHADOW - 2026-07-09
   Menghilangkan bayangan antara kolom STATUS dan AKSI.
========================================================= */

@media (max-width: 768px) {
    .table-wrap table th:last-child,
    .table-wrap table td:last-child {
        box-shadow: none !important;
        border-left: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
    }

    .table-wrap table thead th:last-child {
        box-shadow: none !important;
        border-left: 1px solid #e2e8f0 !important;
        background: #f1f5f9 !important;
    }
}

/* =========================================================
   NORMALIZE MOBILE TABLE HEADER & ACTION COLUMN - 2026-07-09
   Hilangkan garis vertikal STATUS-AKSI dan center semua header tabel.
========================================================= */

/* Semua judul kolom tabel dibuat rata tengah */
.table-wrap table thead th,
.table-wrap table th {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Isi kolom status dan aksi tetap center */
.table-wrap table td.rank-status-cell,
.table-wrap table td.rank-action-cell,
.table-wrap table td.action-cell,
.table-wrap table td:last-child {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Badge dan tombol di dalam cell diposisikan tengah */
.table-wrap table td .rank-status-pill,
.table-wrap table td .status-pill,
.table-wrap table td .rank-edit-pill,
.table-wrap table td .btn-edit {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Normalisasi kolom AKSI mobile: tanpa garis vertikal dan tanpa bayangan */
@media (max-width: 768px) {
    .table-wrap table th:last-child,
    .table-wrap table td:last-child,
    .table-wrap table thead th:last-child {
        box-shadow: none !important;
        border-left: 0 !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* Tetap sticky kanan, tapi tampil normal */
    .table-wrap table th:last-child,
    .table-wrap table td:last-child {
        position: sticky !important;
        right: 0 !important;
        z-index: 8 !important;
        background: #ffffff !important;
    }

    .table-wrap table thead th:last-child {
        z-index: 12 !important;
        background: #f1f5f9 !important;
    }

    /* Header STATUS dan AKSI benar-benar di tengah */
    .table-wrap table thead th:nth-last-child(2),
    .table-wrap table thead th:last-child {
        text-align: center !important;
    }
}

/* =========================================================
   UNIVERSAL PILL BUTTON FONT NORMALIZATION - 2026-07-09
   Menyeragamkan ukuran dan ketebalan font semua tombol pil.
========================================================= */

/* Semua tombol pil utama dan aksi */
.btn,
.btn-small,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-warning,
.btn-success,
.btn-info,
.btn-muted,
.btn-action,
.action-btn,
.pill-btn,
.rank-edit-pill,
.btn-edit,
button.btn,
button.btn-small,
a.btn,
a.btn-small,
a.btn-primary,
a.btn-danger,
a.btn-warning,
form button,
.form-actions button,
.form-actions a,
.card-actions button,
.card-actions a,
.profile-actions a,
.profile-bottom-actions a,
.dashboard-rank-footer a,
.table-footer-actions a,
.section-actions a {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-rendering: geometricPrecision !important;
}

/* Tombol kecil di tabel seperti Edit tetap boleh sedikit kecil, tapi konsisten */
.rank-edit-pill,
.btn-edit,
.btn-small.edit,
.table-wrap .rank-edit-pill,
.table-wrap .btn-edit {

    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

/* Tombol besar/form action: Simpan, Batal, Ajukan, Hapus */
.form-actions .btn,
.form-actions .btn-small,
.form-actions button,
.form-actions a,
.card-actions .btn,
.card-actions .btn-small,
.card-actions button,
.card-actions a,
.section-actions .btn,
.section-actions .btn-small,
.section-actions button,
.section-actions a {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

/* Pastikan teks tombol tidak berubah saat hover/focus/active */
.btn:hover,
.btn:focus,
.btn:active,
.btn-small:hover,
.btn-small:focus,
.btn-small:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.rank-edit-pill:hover,
.rank-edit-pill:focus,
.rank-edit-pill:active,
button:hover,
button:focus,
button:active {
    font-size: inherit !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}

/* =========================================================
   NORMALIZE PLAIN BTN-SMALL - 2026-07-09
   Menyeragamkan tombol btn-small polos seperti Batal.
========================================================= */

/* btn-small polos: dipakai untuk Batal dan tombol netral lain */
.btn-small:not(.primary):not(.danger):not(.warning):not(.success):not(.edit),
a.btn-small:not(.primary):not(.danger):not(.warning):not(.success):not(.edit),
button.btn-small:not(.primary):not(.danger):not(.warning):not(.success):not(.edit) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 86px !important;
    height: 40px !important;
    padding: 0 22px !important;

    border-radius: 999px !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    opacity: 1 !important;
}

.btn-small:not(.primary):not(.danger):not(.warning):not(.success):not(.edit):visited {
}

.btn-small:not(.primary):not(.danger):not(.warning):not(.success):not(.edit):hover,
.btn-small:not(.primary):not(.danger):not(.warning):not(.success):not(.edit):focus,
.btn-small:not(.primary):not(.danger):not(.warning):not(.success):not(.edit):active {

    text-decoration: none !important;
    opacity: 1 !important;
}

/* =========================================================
   DASHBOARD RIWAYAT JABATAN - SINGLE TABLE
========================================================= */
.table-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.empty-cell {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 24px 12px;
}

/* =========================================================
   RAPKAN TOMBOL TAMBAH JABATAN - 2026-07-09
   Tombol diletakkan lebih lega di bawah tabel/blok riwayat jabatan
========================================================= */

body .table-actions,
body .position-table-actions,
body .position-add-action {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

body .table-actions .btn-small,
body .table-actions .btn,
body .position-table-actions .btn-small,
body .position-table-actions .btn,
body .position-add-action .btn-small,
body .position-add-action .btn {
    min-width: 150px;
    justify-content: center;
    text-align: center;
}

/* Supaya tombol tidak terlalu mepet di layar kecil */
@media (max-width: 768px) {
    body .table-actions,
    body .position-table-actions,
    body .position-add-action {
        justify-content: stretch;
        margin-top: 18px;
        padding-top: 16px;
    }

    body .table-actions .btn-small,
    body .table-actions .btn,
    body .position-table-actions .btn-small,
    body .position-table-actions .btn,
    body .position-add-action .btn-small,
    body .position-add-action .btn {
        width: 100%;
    }
}


/* =========================================================
   TOMBOL TAMBAH JABATAN FINAL - 2026-07-09
========================================================= */

body .position-add-action {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    padding-right: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    clear: both;
}

body .position-add-action .btn-small,
body .position-add-action .btn {
    min-width: 160px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 768px) {
    body .position-add-action {
        justify-content: stretch;
        margin-top: 20px;
        padding-top: 16px;
        padding-right: 0;
    }

    body .position-add-action .btn-small,
    body .position-add-action .btn {
        width: 100%;
    }
}


/* =========================================================
   RAPKAN POSISI TOMBOL HEADER - 2026-07-09
   Dashboard/Keluar tidak terlalu menempel ke pojok kanan browser
========================================================= */

body .app-header,
body .navy-header,
body header.app-header {
    width: 100%;
}

body .app-header-inner,
body .header-inner,
body .topbar-inner,
body .navy-header-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 26px;
    padding-right: 26px;
}

body .app-header-actions,
body .header-actions,
body .topbar-actions,
body .navy-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-left: auto;
}

body .app-header-actions .btn,
body .app-header-actions .btn-small,
body .header-actions .btn,
body .header-actions .btn-small,
body .topbar-actions .btn,
body .topbar-actions .btn-small,
body .navy-header-actions .btn,
body .navy-header-actions .btn-small {
    white-space: nowrap;
}

@media (max-width: 768px) {
    body .app-header-inner,
    body .header-inner,
    body .topbar-inner,
    body .navy-header-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    body .app-header-actions,
    body .header-actions,
    body .topbar-actions,
    body .navy-header-actions {
        gap: 8px;
    }
}

/* =========================================================
   HEADER UNIVERSAL FINAL - 2026-07-09
   Tombol Dashboard di tengah untuk semua halaman selain dashboard
========================================================= */

body .navy-app-header,
body .app-header {
    background: #062f55;
    color: #ffffff;
    width: 100%;
    min-height: 84px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

body .navy-app-header-inner,
body .app-header-inner {
    width: 100%;
    min-height: 84px;
    padding: 0 34px;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr);
    align-items: center;
    gap: 24px;
}

body .app-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    text-decoration: none;
    min-width: 0;
}

body .brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body .brand-mark img {
    width: 34px;
    height: 34px;
    display: block;
}

body .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

body .brand-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
}

body .brand-subtitle {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
}

body .app-header-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

body .app-header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    min-width: 0;
}

body .header-user,
body .header-role {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

body .header-separator {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.42);
    display: inline-block;
}

body .header-logout-form {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

body .header-pill {
    min-height: 40px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.38);
    background: rgba(255,255,255,0.07);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

body .header-pill:hover {
    background: rgba(255,255,255,0.13);
    color: #ffffff;
    text-decoration: none;
}

body .header-pill-logout {
    background: #073d6f;
    border-color: rgba(255,255,255,0.20);
}

@media (max-width: 900px) {
    body .navy-app-header-inner,
    body .app-header-inner {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 18px;
    }

    body .app-header-center,
    body .app-header-actions {
        justify-content: flex-start;
    }

    body .app-header-actions {
        flex-wrap: wrap;
        gap: 9px;
    }

    body .header-separator {
        display: none;
    }

    body .header-pill {
        min-height: 38px;
        padding: 0 18px;
    }
}

/* =========================================================
   PAKSA HEADER UNIVERSAL MENANG - 2026-07-09
   Mengalahkan sisa CSS lokal app-header-row/header-dashboard-btn/user-info
========================================================= */

body header.navy-app-header.app-header {
    background: #062f55 !important;
    color: #ffffff !important;
    width: 100% !important;
    min-height: 84px !important;

    align-items: center !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) !important;
}

body header.navy-app-header .navy-app-header-inner,
body header.navy-app-header .app-header-inner {
    width: 100% !important;
    min-height: 84px !important;
    padding: 0 34px !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr) !important;
    align-items: center !important;
    gap: 24px !important;
}

body header.navy-app-header .app-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    min-width: 0 !important;
}

body header.navy-app-header .brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body header.navy-app-header .brand-mark img {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
}

body header.navy-app-header .brand-text {

    flex-direction: column !important;
    line-height: 1.15 !important;
    min-width: 0 !important;
}

body header.navy-app-header .brand-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
}

body header.navy-app-header .brand-subtitle {
    margin-top: 3px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.92) !important;
}

body header.navy-app-header .app-header-center {

    justify-content: center !important;
    align-items: center !important;
}

body header.navy-app-header .app-header-actions {

    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    min-width: 0 !important;
}

body header.navy-app-header .header-user,
body header.navy-app-header .header-role {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    color: #ffffff !important;
}

body header.navy-app-header .header-separator {
    width: 1px !important;
    height: 20px !important;
    background: rgba(255,255,255,0.42) !important;
    display: inline-block !important;
}

body header.navy-app-header .header-logout-form {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
}

body header.navy-app-header .header-pill {
    min-height: 40px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.38) !important;
    background: rgba(255,255,255,0.07) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

body header.navy-app-header .header-pill:hover {
    background: rgba(255,255,255,0.13) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

body header.navy-app-header .header-pill-logout {
    background: #073d6f !important;
    border-color: rgba(255,255,255,0.20) !important;
}

@media (max-width: 900px) {
    body header.navy-app-header .navy-app-header-inner,
    body header.navy-app-header .app-header-inner {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px 18px !important;
    }

    body header.navy-app-header .app-header-center,
    body header.navy-app-header .app-header-actions {
        justify-content: flex-start !important;
    }

    body header.navy-app-header .app-header-actions {
        flex-wrap: wrap !important;
        gap: 9px !important;
    }

    body header.navy-app-header .header-separator {
        display: none !important;
    }

    body header.navy-app-header .header-pill {
        min-height: 38px !important;
        padding: 0 18px !important;
    }
}

/* =========================================================
   MOBILE HEADER & KARTU RIWAYAT JABATAN - 2026-07-09
   Tampilan mobile dibuat ringkas dan rapi
========================================================= */

@media (max-width: 768px) {

    body header.navy-app-header.app-header {
        min-height: auto !important;
        padding: 0 !important;
    }

    body header.navy-app-header .navy-app-header-inner,
    body header.navy-app-header .app-header-inner {
        min-height: auto !important;
        padding: 14px 14px 16px 14px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: start !important;
    }

    body header.navy-app-header .app-brand {
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 11px !important;
    }

    body header.navy-app-header .brand-mark {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    body header.navy-app-header .brand-mark img {
        width: 30px !important;
        height: 30px !important;
    }

    body header.navy-app-header .brand-title {
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    body header.navy-app-header .brand-subtitle {

        margin-top: 2px !important;
        line-height: 1.15 !important;
    }

    body header.navy-app-header .app-header-center {
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        order: 2 !important;
    }

    body header.navy-app-header .header-pill-dashboard {
        min-height: 36px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }

    body header.navy-app-header .app-header-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        order: 3 !important;
        font-size: 13px !important;
    }

    body header.navy-app-header .header-user,
    body header.navy-app-header .header-role {
        gap: 6px !important;
        max-width: 100% !important;
        color: #ffffff !important;
    }

    body header.navy-app-header .header-user span:last-child,
    body header.navy-app-header .header-role span:last-child {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 165px !important;
    }

    body header.navy-app-header .header-separator {
        display: none !important;
    }

    body header.navy-app-header .header-pill-logout {
        min-height: 36px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }

    body main,
    body .container,
    body .content,
    body .main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body .card,
    body .dashboard-card,
    body .profile-card,
    body .summary-card,
    body .panel,
    body .section-card {
        border-radius: 14px !important;
    }

    body .identity-card,
    body .officer-summary,
    body .profile-summary {
        padding: 16px 18px !important;
        line-height: 1.45 !important;
    }

    body .stats-grid,
    body .summary-grid,
    body .dashboard-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body .stat-card,
    body .summary-card {
        min-height: auto !important;
        padding: 20px 18px !important;
    }

    body .stat-card .stat-number,
    body .summary-card .stat-number,
    body .stat-value {
        font-size: 26px !important;
        line-height: 1.1 !important;
    }

    body .table-responsive,
    body .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body .position-add-action {
        margin-top: 18px !important;
        padding-top: 16px !important;
        justify-content: stretch !important;
    }

    body .position-add-action .btn-small,
    body .position-add-action .btn {
        width: 100% !important;
    }
}


/* =========================================================
   MOBILE HEADER 2 BARIS FINAL - 2026-07-09
   Baris 1: Brand
   Baris 2: Dashboard kiri, user/role/keluar kanan
========================================================= */

@media (max-width: 768px) {
    body header.navy-app-header.app-header {
        min-height: auto !important;
        padding: 0 !important;
    }

    body header.navy-app-header .navy-app-header-inner,
    body header.navy-app-header .app-header-inner {
        width: 100% !important;
        min-height: auto !important;
        padding: 14px 12px !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-areas:
            "brand brand"
            "dash actions" !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 12px !important;
    }

    body header.navy-app-header .app-brand {
        grid-area: brand !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    body header.navy-app-header .brand-mark {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    body header.navy-app-header .brand-mark img {
        width: 30px !important;
        height: 30px !important;
    }

    body header.navy-app-header .brand-title {
        font-size: 18px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    body header.navy-app-header .brand-subtitle {
        font-size: 12px !important;
        line-height: 1.05 !important;
        margin-top: 3px !important;
        white-space: nowrap !important;
    }

    body header.navy-app-header .app-header-center {
        grid-area: dash !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        order: initial !important;
    }

    body header.navy-app-header .header-pill-dashboard {
        min-height: 36px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        border-radius: 999px !important;
    }

    body header.navy-app-header .app-header-actions {
        grid-area: actions !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        order: initial !important;
        min-width: 0 !important;
        font-size: 12px !important;
    }

    body header.navy-app-header .header-separator {
        display: none !important;
    }

    body header.navy-app-header .header-user,
    body header.navy-app-header .header-role {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
    }

    body header.navy-app-header .header-user span:last-child {
        display: inline-block !important;
        max-width: 88px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        vertical-align: bottom !important;
    }

    body header.navy-app-header .header-role span:last-child {
        display: inline-block !important;
        max-width: 58px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        vertical-align: bottom !important;
    }

    body header.navy-app-header .header-pill-logout {
        min-height: 36px !important;
        padding: 0 13px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 390px) {
    body header.navy-app-header .navy-app-header-inner,
    body header.navy-app-header .app-header-inner {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "dash"
            "actions" !important;
        row-gap: 10px !important;
    }

    body header.navy-app-header .app-header-center,
    body header.navy-app-header .app-header-actions {
        justify-content: flex-start !important;
    }

    body header.navy-app-header .header-user span:last-child {
        max-width: 120px !important;
    }
}


/* =========================================================
   HEADER TABLET HALFSCREEN FINAL - 2026-07-09
   Untuk layar PC setengah / tablet landscape
   Baris 1: Brand
   Baris 2: Dashboard kiri, user/role/keluar kanan
========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

    body header.navy-app-header.app-header {
        min-height: auto !important;
        padding: 0 !important;
    }

    body header.navy-app-header .navy-app-header-inner,
    body header.navy-app-header .app-header-inner {
        width: 100% !important;
        min-height: auto !important;
        padding: 16px 28px 16px 28px !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-areas:
            "brand brand"
            "dash actions" !important;
        align-items: center !important;
        column-gap: 18px !important;
        row-gap: 14px !important;
    }

    body header.navy-app-header .app-brand {
        grid-area: brand !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body header.navy-app-header .brand-title {
        font-size: 20px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    body header.navy-app-header .brand-subtitle {
        font-size: 13px !important;
        margin-top: 3px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    body header.navy-app-header .app-header-center {
        grid-area: dash !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        order: initial !important;
    }

    body header.navy-app-header .app-header-actions {
        grid-area: actions !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        order: initial !important;
        min-width: 0 !important;
        font-size: 13px !important;
    }

    body header.navy-app-header .header-pill-dashboard {
        min-height: 38px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }

    body header.navy-app-header .header-pill-logout {
        min-height: 38px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
        flex: 0 0 auto !important;
    }

    body header.navy-app-header .header-separator {
        display: none !important;
    }

    body header.navy-app-header .header-user,
    body header.navy-app-header .header-role {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    body header.navy-app-header .header-user span:last-child {
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }

    body header.navy-app-header .header-role span:last-child {
        max-width: 90px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
}


/* =========================================================
   RIWAYAT JABATAN MOBILE CONTENT FINAL - 2026-07-09
   Merapikan isi halaman jabatan untuk mobile dan layar setengah
========================================================= */

/* Layar PC setengah / tablet */
@media (min-width: 769px) and (max-width: 1100px) {
    body main,
    body .container,
    body .content,
    body .main-content {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    body .stats-grid,
    body .summary-grid,
    body .dashboard-stats,
    body .summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    body .stat-card,
    body .summary-card {
        min-height: auto !important;
        padding: 18px 18px !important;
        border-radius: 16px !important;
    }

    body .stat-value,
    body .stat-card .stat-number,
    body .summary-card .stat-number,
    body .summary-card strong {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    body .table-responsive,
    body .table-wrap,
    body .table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body table {
        min-width: 920px;
    }

    body .position-add-action,
    body .table-actions {
        margin-top: 20px !important;
        padding-top: 16px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
        line-height: 1.25 !important;
    }

    body main,
    body .container,
    body .content,
    body .main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    body .card,
    body .dashboard-card,
    body .profile-card,
    body .summary-card,
    body .panel,
    body .section-card,
    body .content-card,
    body .person-card {
        border-radius: 14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    body .page-title,
    body h1 {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    body h2 {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    body .subtitle,
    body .page-subtitle,
    body .section-subtitle,
    body .muted {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    body .stats-grid,
    body .summary-grid,
    body .dashboard-stats,
    body .summary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body .stat-card,
    body .summary-card {
        min-height: auto !important;
        padding: 16px 16px !important;
        border-radius: 14px !important;
    }

    body .stat-value,
    body .stat-card .stat-number,
    body .summary-card .stat-number,
    body .summary-card strong {
        font-size: 24px !important;
        line-height: 1.1 !important;
    }

    body .stat-label,
    body .summary-label,
    body .summary-card span {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body .identity-card,
    body .officer-summary,
    body .profile-summary,
    body .position-summary,
    body .person-head {
        padding: 14px 14px !important;
        border-radius: 14px !important;
        line-height: 1.45 !important;
    }

    body .identity-grid,
    body .profile-grid,
    body .info-grid,
    body .form-grid,
    body .rank-grid,
    body .rank-edit-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body label,
    body .label {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body input,
    body select,
    body textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    body textarea {
        min-height: 96px !important;
    }

    body .form-actions,
    body .action-row,
    body .button-row,
    body .actions,
    body .profile-actions,
    body .table-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    body .form-actions .btn,
    body .form-actions .btn-small,
    body .action-row .btn,
    body .action-row .btn-small,
    body .button-row .btn,
    body .button-row .btn-small,
    body .actions .btn,
    body .actions .btn-small,
    body .profile-actions .btn,
    body .profile-actions .btn-small,
    body .table-actions .btn,
    body .table-actions .btn-small {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    body .table-responsive,
    body .table-wrap,
    body .table-scroll {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 14px !important;
    }

    body table {
        min-width: 860px;
        font-size: 13px !important;
    }

    body th,
    body td {
        padding: 10px 10px !important;
        white-space: nowrap;
        vertical-align: middle !important;
    }

    body td .btn,
    body td .btn-small {
        white-space: nowrap !important;
    }

    body .position-add-action {
        margin-top: 18px !important;
        padding-top: 16px !important;
        padding-right: 0 !important;
        justify-content: stretch !important;
        border-top: 1px solid rgba(148, 163, 184, 0.24) !important;
    }

    body .position-add-action .btn,
    body .position-add-action .btn-small {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Layar sangat kecil */
@media (max-width: 390px) {
    body main,
    body .container,
    body .content,
    body .main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body .card,
    body .dashboard-card,
    body .profile-card,
    body .summary-card,
    body .panel,
    body .section-card,
    body .content-card,
    body .person-card {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body table {
        min-width: 820px;
    }
}


/* =========================================================
   RIWAYAT JABATAN TABLE MOBILE OVERRIDE FINAL - 2026-07-09
   Memastikan tabel jabatan tidak membuat halaman mobile melebar
========================================================= */

@media (max-width: 768px) {
    body #positionTableScroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    body #positionTableScroll table {
        width: max-content !important;
        min-width: 920px !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    body #positionTableScroll th,
    body #positionTableScroll td {
        white-space: nowrap !important;
        vertical-align: middle !important;
        padding: 10px 10px !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }

    body #positionTableScroll th:nth-child(1),
    body #positionTableScroll td:nth-child(1) {
        min-width: 48px !important;
        width: 48px !important;
        text-align: center !important;
    }

    body #positionTableScroll th:nth-child(2),
    body #positionTableScroll td:nth-child(2) {
        min-width: 140px !important;
    }

    body #positionTableScroll th:nth-child(3),
    body #positionTableScroll td:nth-child(3) {
        min-width: 150px !important;
    }

    body #positionTableScroll th:nth-child(4),
    body #positionTableScroll td:nth-child(4) {
        min-width: 170px !important;
    }

    body #positionTableScroll th:nth-child(5),
    body #positionTableScroll td:nth-child(5) {
        min-width: 130px !important;
    }

    body #positionTableScroll th:nth-child(6),
    body #positionTableScroll td:nth-child(6) {
        min-width: 130px !important;
    }

    body #positionTableScroll th:nth-child(7),
    body #positionTableScroll td:nth-child(7) {
        min-width: 135px !important;
    }

    body #positionTableScroll th:nth-child(8),
    body #positionTableScroll td:nth-child(8) {
        min-width: 140px !important;
    }

    body #positionTableScroll th:nth-child(9),
    body #positionTableScroll td:nth-child(9) {
        min-width: 180px !important;
    }

    body #positionTableScroll .btn,
    body #positionTableScroll .btn-small,
    body #positionTableScroll button,
    body #positionTableScroll a {
        white-space: nowrap !important;
    }

    body .position-add-action {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 18px !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(148, 163, 184, 0.24) !important;
        box-sizing: border-box !important;
    }

    body .position-add-action .btn,
    body .position-add-action .btn-small,
    body .position-add-action a {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 390px) {
    body #positionTableScroll table {
        min-width: 880px !important;
    }

    body #positionTableScroll th,
    body #positionTableScroll td {
        padding: 9px 8px !important;
        font-size: 12px !important;
    }
}


/* =========================================================
   AKSI RIWAYAT PANGKAT & JABATAN UNIFORM PILL - 2026-07-09
   Menyeragamkan tombol Sunting/Ajukan/Hapus pada tabel riwayat
========================================================= */

body #positionTableScroll td:last-child,
body .rank-history-table td:last-child,
body .table-scroll td:last-child {
    vertical-align: middle !important;
}

body #positionTableScroll td:last-child a,
body #positionTableScroll td:last-child button,
body .rank-history-table td:last-child a,
body .rank-history-table td:last-child button,
body .table-scroll td:last-child a,
body .table-scroll td:last-child button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

body #positionTableScroll td:last-child a:hover,
body #positionTableScroll td:last-child button:hover,
body .rank-history-table td:last-child a:hover,
body .rank-history-table td:last-child button:hover,
body .table-scroll td:last-child a:hover,
body .table-scroll td:last-child button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12) !important;
}

/* Sunting: biru lembut */
body #positionTableScroll td:last-child a[href*="edit"],
body .rank-history-table td:last-child a[href*="edit"],
body .table-scroll td:last-child a[href*="edit"] {
    background: #e0f2fe !important;
    color: #075985 !important;
    border-color: #bae6fd !important;
}

/* Hapus: merah lembut */
body #positionTableScroll td:last-child form button[type="submit"].danger,
body .rank-history-table td:last-child form button[type="submit"].danger,
body .table-scroll td:last-child form button[type="submit"].danger,
body #positionTableScroll td:last-child form[action*="delete"] button,
body .rank-history-table td:last-child form[action*="delete"] button,
body .table-scroll td:last-child form[action*="delete"] button {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

@media (max-width: 768px) {
    body #positionTableScroll td:last-child,
    body .rank-history-table td:last-child,
    body .table-scroll td:last-child {
        min-width: 190px !important;
    }

    body #positionTableScroll td:last-child a,
    body #positionTableScroll td:last-child button,
    body .rank-history-table td:last-child a,
    body .rank-history-table td:last-child button,
    body .table-scroll td:last-child a,
    body .table-scroll td:last-child button {
        min-height: 34px !important;
        padding: 8px 13px !important;
        font-size: 12px !important;
    }
}


/* =========================================================
   DASHBOARD ACTION SUNTING UNIFORM - 2026-07-09
   Menyeragamkan tombol Sunting pada dashboard, riwayat pangkat, dan jabatan
========================================================= */

body .action-sunting,
body a.action-sunting,
body button.action-sunting,
body .rank-edit-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 88px !important;
    min-height: 36px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.14) !important;
}

body .action-sunting:hover,
body a.action-sunting:hover,
body button.action-sunting:hover,
body .rank-edit-pill:hover {
    background: #bfdbfe !important;
    color: #1e40af !important;
    border-color: #93c5fd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 26px rgba(59, 130, 246, 0.18) !important;
}

/* Paksa semua tombol menuju /edit di tabel dashboard ikut soft blue pill */
body .dashboard-card table a[href*="/edit"],
body .dashboard-card table a[href*="edit"],
body .dashboard-card table .btn-small[href*="edit"],
body .dashboard-card table .btn[href*="edit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 88px !important;
    min-height: 36px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body .dashboard-card table a[href*="/edit"]:hover,
body .dashboard-card table a[href*="edit"]:hover,
body .dashboard-card table .btn-small[href*="edit"]:hover,
body .dashboard-card table .btn[href*="edit"]:hover {

    transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
    body .action-sunting,
    body a.action-sunting,
    body button.action-sunting,
    body .rank-edit-pill,
    body .dashboard-card table a[href*="/edit"],
    body .dashboard-card table a[href*="edit"] {
        min-width: 88px !important;
        min-height: 36px !important;
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   HEADER HARD RESET FINAL
   Berlaku untuk partial app-header.blade.php yang asli
========================================================= */

body header.app-header.navy-app-header {
    width: 100% !important;
    min-height: 116px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #07385f !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

body header.app-header.navy-app-header .app-header-inner.navy-app-header-inner {
    width: 100% !important;
    min-height: 116px !important;
    padding: 0 48px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

/* BRAND KIRI */
body header.app-header.navy-app-header .app-brand {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

body header.app-header.navy-app-header .brand-mark {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

body header.app-header.navy-app-header .brand-mark img {
    width: 38px !important;
    height: 38px !important;
    display: block !important;
    margin: 0 !important;
}

body header.app-header.navy-app-header .brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.12 !important;
}

body header.app-header.navy-app-header .brand-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

body header.app-header.navy-app-header .brand-subtitle {
    display: block !important;
    margin: 3px 0 0 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

/* TENGAH */
body header.app-header.navy-app-header .app-header-center {
    flex: 1 1 auto !important;
    min-width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* AKSI KANAN */
body header.app-header.navy-app-header .app-header-actions {
    flex: 0 0 auto !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    white-space: nowrap !important;
}

body header.app-header.navy-app-header .header-user,
body header.app-header.navy-app-header .header-role {
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

body header.app-header.navy-app-header .header-separator {
    width: 1px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-block !important;
    background: rgba(255,255,255,.35) !important;
    margin: 0 !important;
    padding: 0 !important;
}

body header.app-header.navy-app-header .header-logout-form {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;

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

body header.app-header.navy-app-header .header-pill-logout {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    border-radius: 999px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* PC SETENGAH LAYAR */
@media (min-width: 769px) and (max-width: 1100px) {
    body header.app-header.navy-app-header {
        min-height: 112px !important;
    }

    body header.app-header.navy-app-header .app-header-inner.navy-app-header-inner {
        min-height: 112px !important;
        padding: 0 36px !important;
        gap: 18px !important;
    }

    body header.app-header.navy-app-header .brand-title {
        font-size: 22px !important;
    }

    body header.app-header.navy-app-header .brand-subtitle {
        font-size: 14px !important;
    }

    body header.app-header.navy-app-header .header-user,
    body header.app-header.navy-app-header .header-role {
        font-size: 13px !important;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    body header.app-header.navy-app-header {
        min-height: auto !important;
        padding: 16px 0 !important;
        align-items: flex-start !important;
    }

    body header.app-header.navy-app-header .app-header-inner.navy-app-header-inner {
        min-height: auto !important;
        padding: 0 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 14px !important;
    }

    body header.app-header.navy-app-header .app-header-center {
        display: none !important;
    }

    body header.app-header.navy-app-header .app-header-actions {
        width: 100% !important;
        min-height: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        white-space: normal !important;
    }

    body header.app-header.navy-app-header .header-user,
    body header.app-header.navy-app-header .header-role {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 13px !important;
    }

    body header.app-header.navy-app-header .header-separator {
        height: 36px !important;
        min-height: 36px !important;
    }

    body header.app-header.navy-app-header .header-pill-logout {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 18px !important;
    }
}

/* HP SANGAT SEMPIT */
@media (max-width: 420px) {
    body header.app-header.navy-app-header .brand-mark,
    body header.app-header.navy-app-header .brand-mark img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    body header.app-header.navy-app-header .brand-title {
        font-size: 18px !important;
    }

    body header.app-header.navy-app-header .brand-subtitle {
        font-size: 12px !important;
    }

    body header.app-header.navy-app-header .app-header-actions {
        gap: 8px !important;
    }
}

/* =========================================================
   FIX HEADER HALFSCREEN - ACTIONS HILANG
   Fokus: layar PC setengah / sedang
========================================================= */
@media (min-width: 769px) and (max-width: 1100px) {
    body header.app-header.navy-app-header .app-header-inner.navy-app-header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        padding: 0 28px !important;
    }

    /* area tengah jangan ambil ruang */
    body header.app-header.navy-app-header .app-header-center {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
    }

    /* brand kiri tetap ada tapi lebih ramping */
    body header.app-header.navy-app-header .app-brand {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 48% !important;
        gap: 12px !important;
    }

    body header.app-header.navy-app-header .brand-title {
        font-size: 20px !important;
        line-height: 1.08 !important;
    }

    body header.app-header.navy-app-header .brand-subtitle {
        font-size: 13px !important;
        line-height: 1.08 !important;
    }

    /* area kanan wajib tampil */
    body header.app-header.navy-app-header .app-header-actions {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        min-width: max-content !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    body header.app-header.navy-app-header .header-user,
    body header.app-header.navy-app-header .header-role {
        font-size: 13px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    body header.app-header.navy-app-header .header-separator {
        height: 36px !important;
        min-height: 36px !important;
    }

    body header.app-header.navy-app-header .header-pill-logout {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   UNIVERSAL PILL BUTTON FINAL
   Satu standar tombol pil navy untuk seluruh aplikasi
========================================================= */

.btn-pill-navy,
a.btn-pill-navy,
button.btn-pill-navy,
.btn-small.btn-pill-navy,
.btn.btn-pill-navy,
.dashboard-action-row a,
.dashboard-add-free-btn,
.dashboard-history-pill-btn,
.dashboard-history-view-btn,
.profile-complete-row a,
.dashboard-profile-action-row a,
.profile-action-row a {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.btn-pill-navy:hover,
a.btn-pill-navy:hover,
button.btn-pill-navy:hover,
.btn-small.btn-pill-navy:hover,
.btn.btn-pill-navy:hover,
.dashboard-action-row a:hover,
.dashboard-add-free-btn:hover,
.dashboard-history-pill-btn:hover,
.dashboard-history-view-btn:hover,
.profile-complete-row a:hover,
.dashboard-profile-action-row a:hover,
.profile-action-row a:hover {

    text-decoration: none !important;
}

/* Baris aksi universal: PC sejajar kanan */
.dashboard-action-row,
.profile-complete-row,
.dashboard-profile-action-row,
.profile-action-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 20px !important;
    padding: 0 !important;
}

/* Tombol lihat riwayat biasanya lebih panjang */
.dashboard-action-row .dashboard-history-view-btn,
.dashboard-action-row .dashboard-history-pill-btn {
    min-width: 230px !important;
}

/* Tombol tambah proporsional */
.dashboard-action-row .dashboard-add-free-btn {
    min-width: 150px !important;
}

/* Mobile: tombol bertumpuk rapi dan tidak tabrakan */
@media (max-width: 640px) {
    .dashboard-action-row,
    .profile-complete-row,
    .dashboard-profile-action-row,
    .profile-action-row {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .btn-pill-navy,
    a.btn-pill-navy,
    button.btn-pill-navy,
    .btn-small.btn-pill-navy,
    .btn.btn-pill-navy,
    .dashboard-action-row a,
    .dashboard-add-free-btn,
    .dashboard-history-pill-btn,
    .dashboard-history-view-btn,
    .profile-complete-row a,
    .dashboard-profile-action-row a,
    .profile-action-row a {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 16px !important;
        white-space: normal !important;
        line-height: 1.15 !important;
    }
}

/* =========================================================
   PAGE BOTTOM ACTION - FINAL CLEAN RULE
   Tombol aksi bawah halaman mengikuti tombol pil navy universal
========================================================= */

html body main .page-bottom-actions > a.btn-pill-navy,
html body .page-bottom-actions > a.btn-pill-navy {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

html body main .page-bottom-actions > a.btn-pill-navy:hover,
html body .page-bottom-actions > a.btn-pill-navy:hover {

    text-decoration: none !important;
}

@media (max-width: 640px) {
    html body main .page-bottom-actions > a.btn-pill-navy,
    html body .page-bottom-actions > a.btn-pill-navy {
        width: 100% !important;
        min-width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
    }
}



/* =========================================================
   HEADER MOBILE SIMPLE FINAL
   HP: brand, user/action, dashboard dibuat bertumpuk rapi
========================================================= */

@media (max-width: 640px) {
    body header.app-header.navy-app-header {
        height: auto !important;
        min-height: 190px !important;
        padding: 16px 14px !important;
    }

    body header.app-header.navy-app-header .app-header-inner.navy-app-header-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    body header.app-header.navy-app-header .app-brand {
        width: auto !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    body header.app-header.navy-app-header .brand-title {
        font-size: 20px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    body header.app-header.navy-app-header .brand-subtitle {
        font-size: 13px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    body header.app-header.navy-app-header .app-header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
    }

    body header.app-header.navy-app-header .header-separator {
        display: none !important;
    }

    body header.app-header.navy-app-header .header-user,
    body header.app-header.navy-app-header .header-role {
        max-width: 110px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        font-size: 12px !important;
    }

    body header.app-header.navy-app-header .header-pill-logout {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 16px !important;
        font-size: 12px !important;
    }

    body header.app-header.navy-app-header .app-header-center {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        position: static !important;
        transform: none !important;
    }

    body header.app-header.navy-app-header .header-pill-dashboard {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 126px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 20px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }
}


/* =========================================================
   DASHBOARD BUTTON TABLET ONLY FIX
   Khusus layar setengah/tablet: munculkan tombol Dashboard
   Tidak mengubah susunan header desktop dan HP
========================================================= */

@media (min-width: 641px) and (max-width: 1100px) {
    body header.app-header.navy-app-header .app-header-center {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 16px !important;
        position: static !important;
        transform: none !important;
        flex: 0 0 auto !important;
    }

    body header.app-header.navy-app-header .header-pill-dashboard,
    body header.app-header.navy-app-header a.header-pill-dashboard {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 124px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 20px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }
}


/* =========================================================
   HEADER TABLET SIMPLE FINAL
   Tablet/layar setengah: susunan dibuat aman seperti HP
   Logo+judul, user-role-keluar, Dashboard
========================================================= */

@media (min-width: 641px) and (max-width: 1100px) {
    body header.app-header.navy-app-header {
        height: auto !important;
        min-height: 168px !important;
        padding: 18px 20px !important;
    }

    body header.app-header.navy-app-header .app-header-inner.navy-app-header-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body header.app-header.navy-app-header .app-brand {
        position: static !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    body header.app-header.navy-app-header .brand-title {
        font-size: 21px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    body header.app-header.navy-app-header .brand-subtitle {
        font-size: 13px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    body header.app-header.navy-app-header .app-header-actions {
        position: static !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
    }

    body header.app-header.navy-app-header .header-separator {
        display: none !important;
    }

    body header.app-header.navy-app-header .app-header-center {
        position: static !important;
        transform: none !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    body header.app-header.navy-app-header .header-pill-dashboard,
    body header.app-header.navy-app-header a.header-pill-dashboard {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 126px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 20px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }
}


/* =========================================================
   PROFIL LENGKAP BUTTON SPACING FIX
   Tombol tidak terlalu mepet dengan garis/card di atasnya
========================================================= */

body .profile-full-action,
body .profile-action-row,
body .dashboard-profile-action,
body .profile-card-actions {
    margin-top: 18px !important;
    padding-top: 2px !important;
}

body a[href*="profil-saya"].btn-pill-navy,
body a[href*="profil-saya"].btn-pill,
body .profile-full-action a,
body .dashboard-profile-action a {
    margin-top: 10px !important;
}


/* =========================================================
   PROFIL LENGKAP BUTTON - RIGHT BOTTOM CARD
   Tombol Profil Lengkap dipindahkan ke sisi kanan bawah card
========================================================= */

body .profile-full-action,
body .profile-action-row,
body .dashboard-profile-action,
body .profile-card-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 18px !important;
    padding-top: 0 !important;
}

body .profile-full-action a,
body .profile-action-row a,
body .dashboard-profile-action a,
body .profile-card-actions a,
body a[href*="profil-saya"].btn-pill-navy,
body a[href*="profil-saya"].btn-pill {
    margin-left: auto !important;
    margin-right: 0 !important;
}

@media (max-width: 640px) {
    body .profile-full-action,
    body .profile-action-row,
    body .dashboard-profile-action,
    body .profile-card-actions {
        justify-content: flex-end !important;
        padding-right: 0 !important;
    }
}


/* =========================================================
   PROFILE PAGE PHOTO 4x6 FIX
   Foto Pangkat Terakhir dibuat proporsional rasio 4x6 / 2:3
========================================================= */

body .profile-photo-card img,
body .profile-rank-photo img,
body .latest-rank-photo img,
body .rank-photo-preview img,
body .dashboard-rank-photo,
body .rank-photo-thumb,
body img[src*="rank"],
body img[src*="pangkat"] {
    width: 180px !important;
    height: 270px !important;
    max-width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 14px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .profile-photo-card,
body .profile-rank-photo,
body .latest-rank-photo,
body .rank-photo-preview {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

@media (max-width: 640px) {
    body .profile-photo-card img,
    body .profile-rank-photo img,
    body .latest-rank-photo img,
    body .rank-photo-preview img,
    body .dashboard-rank-photo,
    body .rank-photo-thumb,
    body img[src*="rank"],
    body img[src*="pangkat"] {
        width: 160px !important;
        height: 240px !important;
    }
}


/* =========================================================
   PROFIL SAYA - FOTO PANGKAT 4x6 FINAL
   Khusus class .profile-photo di halaman Profil Saya
========================================================= */

body .photo-card .profile-photo-box.clean {
    width: 180px !important;
    max-width: 100% !important;
    margin: 14px auto 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

body .photo-card img.profile-photo,
body img.profile-photo {
    width: 180px !important;
    height: 270px !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 14px !important;
    display: block !important;
    margin: 0 auto !important;
}

body .photo-card .photo-identity-summary {
    width: 180px !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    text-align: center !important;
}

@media (max-width: 640px) {
    body .photo-card .profile-photo-box.clean {
        width: 160px !important;
    }

    body .photo-card img.profile-photo,
    body img.profile-photo {
        width: 160px !important;
        height: 240px !important;
    }

    body .photo-card .photo-identity-summary {
        width: 160px !important;
    }
}


/* =========================================================
   PAGE BOTTOM ACTIONS - UNIVERSAL
   Dipakai untuk tombol bawah halaman selain dashboard:
   Kembali, Edit/Sunting, Simpan, Tambah, dll.
========================================================= */

body .page-bottom-actions {
    width: 100% !important;
    max-width: 1260px !important;
    margin: 22px auto 0 auto !important;
    padding: 0 2px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body .page-bottom-actions .btn-pill-navy,
body .page-bottom-actions a.btn-pill-navy,
body .page-bottom-actions button.btn-pill-navy {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body .page-bottom-actions .btn-pill-muted,
body .page-bottom-actions a.btn-pill-muted {

}

body .page-bottom-actions .btn-pill-muted:hover,
body .page-bottom-actions a.btn-pill-muted:hover {

}

@media (max-width: 640px) {
    body .page-bottom-actions {
        justify-content: center !important;
        margin-top: 18px !important;
        gap: 10px !important;
    }

    body .page-bottom-actions .btn-pill-navy,
    body .page-bottom-actions a.btn-pill-navy,
    body .page-bottom-actions button.btn-pill-navy {
        width: 100% !important;
        max-width: 260px !important;
    }
}


/* =========================================================
   PAGE BOTTOM ACTIONS - DISTANCE FIX
   Tombol bawah halaman didekatkan ke blok/card terakhir
========================================================= */

body .page-bottom-actions {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

@media (max-width: 640px) {
    body .page-bottom-actions {
        margin-top: 10px !important;
    }
}


/* =========================================================
   PAGE BOTTOM ACTIONS - PROFESSIONAL FINAL
   Tombol bawah halaman dekat dengan card terakhir,
   tidak mepet bawah, dan berkelompok rapi kanan bawah.
========================================================= */

body .page-bottom-actions {
    width: 100% !important;
    max-width: 1080px !important;
    margin: 12px auto 34px auto !important;
    padding: 0 18px !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

body .page-bottom-actions .btn-pill-navy,
body .page-bottom-actions a.btn-pill-navy,
body .page-bottom-actions button.btn-pill-navy {
    margin: 0 !important;
    min-width: 128px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;

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

    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

body .page-bottom-actions .btn-pill-muted,
body .page-bottom-actions a.btn-pill-muted {

}

@media (max-width: 640px) {
    body .page-bottom-actions {
        max-width: 100% !important;
        margin: 12px auto 28px auto !important;
        padding: 0 18px !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    body .page-bottom-actions .btn-pill-navy,
    body .page-bottom-actions a.btn-pill-navy,
    body .page-bottom-actions button.btn-pill-navy {
        width: auto !important;
        min-width: 132px !important;
        max-width: none !important;
    }
}


/* =========================================================
   RIWAYAT PANGKAT TABLE PHOTO FIX
   Mengembalikan foto di tabel Riwayat Pangkat menjadi thumbnail,
   tidak ikut aturan foto 4x6 halaman Profil Saya.
========================================================= */

body table img.dashboard-rank-photo,
body table img.rank-photo-thumb,
body table img.profile-photo,
body .table-wrap table img.dashboard-rank-photo,
body .table-wrap table img.rank-photo-thumb,
body .table-wrap table img.profile-photo,
body .panel table img.dashboard-rank-photo,
body .panel table img.rank-photo-thumb,
body .panel table img.profile-photo {
    width: 48px !important;
    height: 60px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 0 auto !important;
}

body table td,
body .table-wrap table td,
body .panel table td {
    vertical-align: middle !important;
}

body table td:has(img.dashboard-rank-photo),
body table td:has(img.rank-photo-thumb),
body table td:has(img.profile-photo),
body .table-wrap table td:has(img.dashboard-rank-photo),
body .table-wrap table td:has(img.rank-photo-thumb),
body .table-wrap table td:has(img.profile-photo) {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    text-align: center !important;
}


/* =========================================================
   RANK HISTORY BOTTOM ACTIONS
   Tombol Kembali + Tambah Pangkat di kanan bawah card
========================================================= */

body .rank-bottom-actions-final,
body .page-bottom-actions.rank-bottom-actions-final {
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body .rank-bottom-actions-final .btn-pill-navy,
body .rank-bottom-actions-final a.btn-pill-navy {
    margin: 0 !important;
    min-width: 128px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body .rank-bottom-actions-final .btn-pill-muted {

}

@media (max-width: 640px) {
    body .rank-bottom-actions-final,
    body .page-bottom-actions.rank-bottom-actions-final {
        justify-content: center !important;
        gap: 10px !important;
    }

    body .rank-bottom-actions-final .btn-pill-navy,
    body .rank-bottom-actions-final a.btn-pill-navy {
        min-width: 132px !important;
    }
}


/* =========================================================
   RANK HISTORY BOTTOM ACTIONS - FINAL CLEAN
   Tombol Kembali + Tambah Pangkat di kanan bawah card
========================================================= */

body .page-bottom-actions.rank-bottom-actions-final {
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body .page-bottom-actions.rank-bottom-actions-final a,
body .page-bottom-actions.rank-bottom-actions-final .btn-pill-navy {
    margin: 0 !important;
    min-width: 128px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;

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

    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body .page-bottom-actions.rank-bottom-actions-final .btn-pill-muted {

}

@media (max-width: 640px) {
    body .page-bottom-actions.rank-bottom-actions-final {
        justify-content: center !important;
        gap: 10px !important;
    }

    body .page-bottom-actions.rank-bottom-actions-final a,
    body .page-bottom-actions.rank-bottom-actions-final .btn-pill-navy {
        min-width: 132px !important;
    }
}


/* =========================================================
   UNIVERSAL PAGE BOTTOM ACTIONS - FINAL STANDARD
   Dipakai semua halaman selain dashboard:
   Kembali, Tambah, Sunting/Edit, Simpan, Hapus, dll.
========================================================= */

body .page-bottom-actions,
body .page-bottom-actions.rank-bottom-actions-final,
body .profile-full-action,
body .profile-action-row,
body .dashboard-profile-action,
body .profile-card-actions {
    width: 100% !important;
    max-width: 100% !important;

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

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;

    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Semua tombol di area bawah halaman harus sama bentuk */
body .page-bottom-actions a,
body .page-bottom-actions button,
body .page-bottom-actions .btn-pill-navy,
body .page-bottom-actions .btn-small,
body .page-bottom-actions.rank-bottom-actions-final a,
body .page-bottom-actions.rank-bottom-actions-final button,
body .profile-full-action a,
body .profile-action-row a,
body .dashboard-profile-action a,
body .profile-card-actions a {
    min-width: 148px !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

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

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

    border-radius: 999px !important;
    box-sizing: border-box !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Tombol utama: navy */
body .page-bottom-actions a:not(.btn-pill-muted),
body .page-bottom-actions button:not(.btn-pill-muted),
body .page-bottom-actions .btn-pill-navy:not(.btn-pill-muted),
body .profile-full-action a:not(.btn-pill-muted),
body .profile-action-row a:not(.btn-pill-muted),
body .dashboard-profile-action a:not(.btn-pill-muted),
body .profile-card-actions a:not(.btn-pill-muted) {

}

/* Tombol sekunder: Kembali */
body .page-bottom-actions .btn-pill-muted,
body .page-bottom-actions a.btn-pill-muted,
body .page-bottom-actions button.btn-pill-muted {

}

body .page-bottom-actions .btn-pill-muted:hover,
body .page-bottom-actions a.btn-pill-muted:hover,
body .page-bottom-actions button.btn-pill-muted:hover {

}

/* Area bawah di dalam panel/card harus mengikuti lebar card, bukan layar */
body .panel .page-bottom-actions,
body section.panel .page-bottom-actions,
body .card .page-bottom-actions,
body .profile-panel .page-bottom-actions {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* HP/tablet kecil: tombol tetap seragam dan tidak mepet */
@media (max-width: 640px) {
    body .page-bottom-actions,
    body .page-bottom-actions.rank-bottom-actions-final,
    body .profile-full-action,
    body .profile-action-row,
    body .dashboard-profile-action,
    body .profile-card-actions {
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }

    body .page-bottom-actions a,
    body .page-bottom-actions button,
    body .page-bottom-actions .btn-pill-navy,
    body .page-bottom-actions .btn-small,
    body .profile-full-action a,
    body .profile-action-row a,
    body .dashboard-profile-action a,
    body .profile-card-actions a {
        min-width: 148px !important;
        width: auto !important;
        max-width: none !important;
    }
}


/* =========================================================
   PROFILE SHOW ACTIONS - OUTSIDE THREE COLUMN GRID
========================================================= */

body .profile-show-actions {
    clear: both !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 18px 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    border-top: 1px solid #dbe4ee !important;
}

body .profile-show-actions > a {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 150px !important;
}

@media (max-width: 640px) {
    body .profile-show-actions {
        flex-wrap: wrap !important;
    }

    body .profile-show-actions > a {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
    }
}

@media (max-width: 420px) {
    body .profile-show-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body .profile-show-actions > a {
        width: 100% !important;
        flex: none !important;
    }
}

/* =========================================================
   UNIVERSAL BUTTON SYSTEM - FINAL
   Satu sumber warna untuk seluruh tombol pil aplikasi.
   Badge status tidak termasuk.
========================================================= */

:root {
    --button-navy: #075985;
    --button-navy-hover: #06476b;
    --button-navy-active: #053a58;
    --button-text: #ffffff;
    --button-shadow: 0 5px 12px rgba(7, 89, 133, 0.18);
    --button-shadow-hover: 0 7px 15px rgba(7, 89, 133, 0.24);
}

/* Seluruh tombol pil universal */
html body a.btn-pill-navy,
html body button.btn-pill-navy,
html body a.btn-pill-muted,
html body button.btn-pill-muted,
html body a.btn-pill-white,
html body button.btn-pill-white,
html body a.btn-small,
html body button.btn-small,
html body a.btn-primary,
html body button.btn-primary,
html body a.btn-secondary,
html body button.btn-secondary,
html body .page-bottom-actions > a,
html body .page-bottom-actions > button,
html body .profile-show-actions > a,
html body .profile-show-actions > button,
html body .dashboard-add-free-row > a,
html body .dashboard-add-free-row > button,
html body .dashboard-add-free-btn,
html body .profile-full-action > a,
html body .profile-full-action > button,
html body .profile-action-row > a,
html body .profile-action-row > button,
html body .dashboard-profile-action > a,
html body .dashboard-profile-action > button,
html body .profile-card-actions > a,
html body .profile-card-actions > button {
    background: var(--button-navy) !important;
    background-color: var(--button-navy) !important;
    background-image: none !important;
    border: 1px solid var(--button-navy) !important;
    color: var(--button-text) !important;
    box-shadow: var(--button-shadow) !important;

    min-height: 40px !important;
    height: 40px !important;
    padding: 0 24px !important;

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

    border-radius: 999px !important;
    box-sizing: border-box !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
}

/* Hover */
html body a.btn-pill-navy:hover,
html body button.btn-pill-navy:hover,
html body a.btn-pill-muted:hover,
html body button.btn-pill-muted:hover,
html body a.btn-pill-white:hover,
html body button.btn-pill-white:hover,
html body a.btn-small:hover,
html body button.btn-small:hover,
html body a.btn-primary:hover,
html body button.btn-primary:hover,
html body a.btn-secondary:hover,
html body button.btn-secondary:hover,
html body .page-bottom-actions > a:hover,
html body .page-bottom-actions > button:hover,
html body .profile-show-actions > a:hover,
html body .profile-show-actions > button:hover,
html body .dashboard-add-free-row > a:hover,
html body .dashboard-add-free-row > button:hover,
html body .dashboard-add-free-btn:hover,
html body .profile-full-action > a:hover,
html body .profile-full-action > button:hover,
html body .profile-action-row > a:hover,
html body .profile-action-row > button:hover,
html body .dashboard-profile-action > a:hover,
html body .dashboard-profile-action > button:hover,
html body .profile-card-actions > a:hover,
html body .profile-card-actions > button:hover {
    background: var(--button-navy-hover) !important;
    background-color: var(--button-navy-hover) !important;
    background-image: none !important;
    border-color: var(--button-navy-hover) !important;
    color: #ffffff !important;
    box-shadow: var(--button-shadow-hover) !important;
    transform: translateY(-1px) !important;
}

/* Saat ditekan */
html body a.btn-pill-navy:active,
html body button.btn-pill-navy:active,
html body .page-bottom-actions > a:active,
html body .page-bottom-actions > button:active {
    background: var(--button-navy-active) !important;
    border-color: var(--button-navy-active) !important;
    transform: translateY(0) !important;
}

/* Nonaktif */
html body button.btn-pill-navy:disabled,
html body button.btn-small:disabled,
html body .page-bottom-actions > button:disabled,
html body a.btn-pill-navy.disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Responsif */
@media (max-width: 640px) {
    html body .page-bottom-actions > a,
    html body .page-bottom-actions > button,
    html body .profile-show-actions > a,
    html body .profile-show-actions > button {
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 12px !important;
    }
}


/* =========================================================
   PROFILE EDIT ACTIONS - FINAL POSITION
========================================================= */

html body .profile-edit-actions {
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 18px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    border-top: 1px solid #dbe4ee !important;
    box-sizing: border-box !important;
}

html body .profile-edit-actions > a,
html body .profile-edit-actions > button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 150px !important;
    margin: 0 !important;
}

@media (max-width: 640px) {
    html body .profile-edit-actions > a,
    html body .profile-edit-actions > button {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
    }
}

@media (max-width: 420px) {
    html body .profile-edit-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    html body .profile-edit-actions > a,
    html body .profile-edit-actions > button {
        width: 100% !important;
        flex: none !important;
    }
}

/* =========================================================
   RANK EDIT DELETE ACTION - CENTERED
========================================================= */

html body .rank-delete-center {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;

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

    box-sizing: border-box !important;
}

html body .rank-delete-center form {
    margin: 0 !important;
    padding: 0 !important;

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

html body .rank-delete-center a,
html body .rank-delete-center button {
    margin: 0 auto !important;
}

/* =========================================================
   RANK PHOTO ACTIONS - CENTER FULL WIDTH
========================================================= */

html body .rank-photo-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;

    box-sizing: border-box !important;
}

html body .rank-photo-actions form {
    margin: 0 !important;
    padding: 0 !important;
}

html body .rank-photo-actions button {
    margin: 0 !important;
}

/* =========================================================
   IDENTITAS PERSONEL - JARAK LABEL DAN ISIAN
   Label dekat dengan nilainya, antar-data lebih renggang
========================================================= */

.profile-card .info-grid > div,
.identity-card .info-grid > div,
.identity-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 0 0 14px 0 !important;
}

/* Label dekat dengan isi */
.profile-card .info-grid > div > .label,
.identity-card .info-grid > div > .label,
.identity-item .label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Nilai tidak membawa margin tambahan */
.profile-card .info-grid > div > .value,
.identity-card .info-grid > div > .value,
.identity-item .value {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
}

/* Data terakhir tidak perlu jarak bawah */
.profile-card .info-grid > div:last-child,
.identity-card .info-grid > div:last-child,
.identity-item:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   UNIVERSAL PILL BUTTON - FINAL
   Menyeragamkan tombol dan menghilangkan efek getar saat hover
========================================================= */

/* Bentuk dan ukuran universal */
html body a.btn-small,
html body button.btn-small,
html body a.btn-pill-navy,
html body button.btn-pill-navy,
html body a.btn-table-action,
html body button.btn-table-action,
html body button.education-submit-btn,
html body .page-bottom-actions > a,
html body .page-bottom-actions > button,
html body .form-actions > a,
html body .form-actions > button,
html body a.dashboard-add-free-btn,
html body button.dashboard-add-free-btn,
html body a.btn,
html body button.btn {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 20px !important;

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

    border-radius: 999px !important;
    box-sizing: border-box !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;

    transform: none !important;
    translate: none !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease !important;
}

/* Jangan bergerak ketika hover, fokus, atau ditekan */
html body a.btn-small:hover,
html body button.btn-small:hover,
html body a.btn-pill-navy:hover,
html body button.btn-pill-navy:hover,
html body a.btn-table-action:hover,
html body button.btn-table-action:hover,
html body button.education-submit-btn:hover,
html body .page-bottom-actions > a:hover,
html body .page-bottom-actions > button:hover,
html body .form-actions > a:hover,
html body .form-actions > button:hover,
html body a.dashboard-add-free-btn:hover,
html body button.dashboard-add-free-btn:hover,
html body a.btn:hover,
html body button.btn:hover,
html body a.btn-small:focus,
html body button.btn-small:focus,
html body a.btn-table-action:focus,
html body button.education-submit-btn:focus,
html body a.btn-small:active,
html body button.btn-small:active,
html body a.btn-table-action:active,
html body button.education-submit-btn:active {
    transform: none !important;
    translate: none !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
}

/* =========================================================
   AKSI TABEL PENDIDIKAN
========================================================= */

html body .education-row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

html body .education-row-actions form {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tombol sekunder: Sunting */
html body .education-row-actions a.btn-table-action {
    min-width: 82px !important;

    background: #e8eef5 !important;
    color: #28445f !important;
    border: 1px solid #d4dfeb !important;
    box-shadow: none !important;
}

html body .education-row-actions a.btn-table-action:hover {
    background: #dbe6f1 !important;
    color: #163c5c !important;
    border-color: #c5d4e3 !important;
    box-shadow: 0 5px 12px rgba(15, 47, 74, .10) !important;
}

/* Tombol utama: Ajukan Verifikasi */
html body .education-row-actions button.education-submit-btn {
    min-width: 128px !important;

    background: #075f8f !important;
    color: #ffffff !important;
    border: 1px solid #075f8f !important;
    box-shadow: 0 5px 12px rgba(7, 95, 143, .18) !important;
}

html body .education-row-actions button.education-submit-btn:hover {
    background: #064f78 !important;
    color: #ffffff !important;
    border-color: #064f78 !important;
    box-shadow: 0 6px 14px rgba(7, 95, 143, .22) !important;
}

/* Tombol nonaktif */
html body button:disabled,
html body .btn:disabled,
html body .btn-small:disabled {
    opacity: .58 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Tampilan HP */
@media (max-width: 640px) {
    html body .education-row-actions {
        flex-wrap: wrap !important;
        min-width: 150px !important;
    }

    html body .education-row-actions a.btn-table-action,
    html body .education-row-actions button.education-submit-btn {
        width: 100% !important;
        min-width: 140px !important;
    }
}


/* =========================================================
   UNIVERSAL TABLE ACTION BUTTONS - FINAL
========================================================= */

html body .table-action-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

html body .table-action-group form {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .table-action-btn,
html body a.table-action-btn,
html body button.table-action-btn {
    width: auto !important;
    min-width: 76px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    margin: 0 !important;

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

    border-radius: 999px !important;
    box-sizing: border-box !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    cursor: pointer !important;
    box-shadow: none !important;
    transition: all .18s ease !important;
}

/* Sunting */
html body .table-action-edit,
html body a.table-action-edit,
html body button.table-action-edit {
    color: #075985 !important;
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
}

html body .table-action-edit:hover,
html body a.table-action-edit:hover,
html body button.table-action-edit:hover {
    color: #075985 !important;
    background: #bae6fd !important;
    border-color: #7dd3fc !important;
    transform: translateY(-1px) !important;
}

/* Ajukan Verifikasi */
html body .table-action-submit,
html body a.table-action-submit,
html body button.table-action-submit {
    min-width: 128px !important;
    color: #ffffff !important;
    background: #075f8f !important;
    border: 1px solid #075f8f !important;
}

html body .table-action-submit:hover,
html body a.table-action-submit:hover,
html body button.table-action-submit:hover {
    color: #ffffff !important;
    background: #064b72 !important;
    border-color: #064b72 !important;
    transform: translateY(-1px) !important;
}

/* Bahaya */
html body .table-action-danger,
html body a.table-action-danger,
html body button.table-action-danger {
    color: #b91c1c !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
}

html body .table-action-danger:hover,
html body a.table-action-danger:hover,
html body button.table-action-danger:hover {
    color: #991b1b !important;
    background: #fecaca !important;
    border-color: #fca5a5 !important;
}

/* Tombol langsung di dalam sel tabel */
html body td > .table-action-btn,
html body td > form > .table-action-btn {
    margin: 2px 3px !important;
}

html body td > form {
    display: inline-flex !important;
    margin: 0 !important;
}

@media (max-width: 640px) {
    html body .table-action-group {
        gap: 5px !important;
    }

    html body .table-action-btn,
    html body a.table-action-btn,
    html body button.table-action-btn {
        min-width: 70px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
        font-size: 10px !important;
    }

    html body .table-action-submit,
    html body a.table-action-submit,
    html body button.table-action-submit {
        min-width: 118px !important;
    }
}

/* =========================================================
   FORCE FINAL - UNIVERSAL TABLE SUBMIT BUTTON
========================================================= */

html body table .table-action-group button.table-action-btn.table-action-submit,
html body table td button.table-action-btn.table-action-submit,
html body table td form button.table-action-btn.table-action-submit {
    color: #ffffff !important;
    background: #075f8f !important;
    border: 1px solid #075f8f !important;
    box-shadow: none !important;
}

html body table .table-action-group button.table-action-btn.table-action-submit:hover,
html body table td button.table-action-btn.table-action-submit:hover,
html body table td form button.table-action-btn.table-action-submit:hover {
    color: #ffffff !important;
    background: #064b72 !important;
    border-color: #064b72 !important;
}

/* =========================================================
   UNIVERSAL HISTORY STATUS PILL - FINAL
   Pangkat, Jabatan, Pendidikan, Operasi, Dashboard
========================================================= */

html body .history-status-pill {
    width: auto !important;
    min-width: 70px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    margin: 0 !important;

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

    border-radius: 999px !important;
    box-sizing: border-box !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;
}

/* Draf */
html body .history-status-pill.history-status-draft {
    min-width: 64px !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

/* Menunggu Verifikasi */
html body .history-status-pill.history-status-submitted {
    min-width: 136px !important;
    color: #1d4ed8 !important;
    background: #dbeafe !important;
    border: 1px solid #bfdbfe !important;
}

/* Terverifikasi */
html body .history-status-pill.history-status-verified {
    min-width: 108px !important;
    color: #166534 !important;
    background: #dcfce7 !important;
    border: 1px solid #bbf7d0 !important;
}

/* Perlu Perbaikan */
html body .history-status-pill.history-status-revision {
    min-width: 116px !important;
    color: #92400e !important;
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
}

/* Ditolak */
html body .history-status-pill.history-status-rejected {
    min-width: 72px !important;
    color: #991b1b !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
}

@media (max-width: 640px) {
    html body .history-status-pill {
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 10px !important;
        font-size: 10px !important;
    }

    html body .history-status-pill.history-status-submitted {
        min-width: 126px !important;
    }
}


/* =========================================================
   UNIVERSAL MAIN ACTION BUTTON - FINAL PILL STANDARD
   Semua tombol pada isi halaman wajib berbentuk pil.
   Header aplikasi tidak terpengaruh.
========================================================= */

html body main button,
html body main input[type="button"],
html body main input[type="submit"],
html body main input[type="reset"],
html body main a.btn,
html body main .btn,
html body main a[class*="btn-"],
html body main button[class*="btn-"],
html body main .page-bottom-actions a,
html body main .dashboard-action-row a,
html body main .action-box button {
    min-height: 40px !important;
    height: auto !important;
    min-width: 120px !important;

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

    padding: 9px 22px !important;
    border-radius: 999px !important;

    border-width: 1px !important;
    border-style: solid !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;

    box-shadow: 0 5px 12px rgba(8, 49, 82, .12) !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease !important;
}

html body main button:hover,
html body main input[type="button"]:hover,
html body main input[type="submit"]:hover,
html body main input[type="reset"]:hover,
html body main a.btn:hover,
html body main .btn:hover,
html body main a[class*="btn-"]:hover,
html body main button[class*="btn-"]:hover,
html body main .page-bottom-actions a:hover,
html body main .dashboard-action-row a:hover,
html body main .action-box button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 17px rgba(8, 49, 82, .18) !important;
    filter: brightness(.97) !important;
}

/* Tombol aksi utama navy */
html body main .btn-primary,
html body main .btn-navy,
html body main .btn-pill-navy,
html body main .dashboard-add-free-btn,
html body main .dashboard-history-view-btn,
html body main button[type="submit"]:not(.btn-green):not(.btn-yellow):not(.btn-red):not(.btn-light):not(.btn-secondary) {
    background: #075f8f !important;
    border-color: #075f8f !important;
    color: #ffffff !important;
}

/* Tombol sekunder */
html body main .btn-light,
html body main .btn-secondary,
html body main .btn-muted,
html body main .page-bottom-actions .btn-light {
    background: #edf3f8 !important;
    border-color: #d5e1eb !important;
    color: #173653 !important;
}

/* Tombol status aksi tetap mempertahankan warnanya */
html body main .btn-green {
    background: #238653 !important;
    border-color: #238653 !important;
    color: #ffffff !important;
}

html body main .btn-yellow {
    background: #b7791f !important;
    border-color: #b7791f !important;
    color: #ffffff !important;
}

html body main .btn-red,
html body main .btn-danger {
    background: #b42318 !important;
    border-color: #b42318 !important;
    color: #ffffff !important;
}

/* Tombol dalam tabel tidak boleh terpotong */
html body main td button,
html body main td a.btn,
html body main td a[class*="btn-"] {
    max-width: 100% !important;
}

/* Mobile: tombol tetap pil dan teks tidak keluar */
@media (max-width: 640px) {
    html body main button,
    html body main input[type="button"],
    html body main input[type="submit"],
    html body main input[type="reset"],
    html body main a.btn,
    html body main .btn,
    html body main a[class*="btn-"],
    html body main button[class*="btn-"] {
        min-width: 108px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        white-space: normal !important;
    }
}


/* =========================================================
   TRAINING SUBMIT BUTTON - FINAL TRUE PILL
========================================================= */

html body main .training-row-actions form {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

html body main .training-row-actions button.training-submit-btn,
html body main .training-row-actions button.training-submit-btn.btn-pill-navy {
    width: auto !important;
    min-width: 138px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    padding: 0 22px !important;
    border: 1px solid #075f8f !important;
    border-radius: 9999px !important;

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

    background: #075f8f !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}


/* =========================================================
   PAGE BOTTOM ACTIONS - JARAK DARI GARIS PEMBATAS
========================================================= */

.page-bottom-actions {
    margin-top: 16px !important;
    padding-top: 0 !important;
}


/* =========================================================
   PAGE BOTTOM ACTIONS - FINAL UNIVERSAL LAYOUT
   Berlaku untuk seluruh tombol aksi bawah halaman
========================================================= */

html body .page-bottom-actions {
    width: 100% !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 12px !important;

    margin-top: 16px !important;
    padding-top: 18px !important;

    border-top: 1px solid #d9e3ef !important;
}

/* Jarak bagian bawah panel agar tombol tidak mepet */
html body .page-bottom-actions:last-child {
    padding-bottom: 2px !important;
}

/* Tampilan tablet dan HP */
@media (max-width: 640px) {
    html body .page-bottom-actions {
        gap: 10px !important;
        margin-top: 14px !important;
        padding-top: 16px !important;
    }

    html body .page-bottom-actions > a,
    html body .page-bottom-actions > button {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }
}


/* =========================================================
   RANK BOTTOM ACTIONS - OVERRIDE KONFLIK FINAL
   Samakan jarak tombol Riwayat Pangkat dengan Riwayat Jabatan
========================================================= */

html body main .page-bottom-actions.rank-bottom-actions-final {
    width: 100% !important;
    max-width: 100% !important;

    margin: 16px 0 0 0 !important;
    padding: 18px 0 2px 0 !important;

    border-top: 1px solid #d9e3ef !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

@media (max-width: 640px) {
    html body main .page-bottom-actions.rank-bottom-actions-final {
        margin-top: 14px !important;
        padding: 16px 0 2px 0 !important;
        justify-content: center !important;
        gap: 10px !important;
    }
}


/* =========================================================
   UNIVERSAL HISTORY BOTTOM ACTIONS - FINAL
   Seragam untuk Pangkat, Jabatan, Pendidikan, Operasi,
   Latihan, Prestasi, Tanda Jasa, Kesamaptaan, dan lainnya
========================================================= */

html body main .page-bottom-actions,
html body main [class*="bottom-actions"].page-bottom-actions {
    width: 100% !important;
    max-width: 100% !important;

    margin: 16px 0 0 0 !important;
    padding: 18px 0 2px 0 !important;

    border-top: 1px solid #d9e3ef !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;

    box-sizing: border-box !important;
    position: static !important;
    transform: none !important;
}

/* Tombol dalam kelompok aksi bawah */
html body main .page-bottom-actions > a,
html body main .page-bottom-actions > button {
    margin: 0 !important;
}

/* Tablet dan HP */
@media (max-width: 640px) {
    html body main .page-bottom-actions,
    html body main [class*="bottom-actions"].page-bottom-actions {
        margin-top: 14px !important;
        padding: 16px 0 2px 0 !important;
        justify-content: center !important;
        gap: 10px !important;
    }
}


/* =========================================================
   UNIVERSAL HISTORY BOTTOM SPACING - IDEAL FINAL
   Jarak tombol aksi terhadap batas bawah kartu dibuat ringkas
   dan seragam pada seluruh halaman riwayat.
========================================================= */

/* Kelompok tombol bawah seluruh halaman riwayat */
html body main .page-bottom-actions,
html body main [class*="bottom-actions"].page-bottom-actions {
    margin: 16px 0 0 0 !important;
    padding: 16px 0 0 0 !important;
    border-top: 1px solid #d9e3ef !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;

    width: 100% !important;
    box-sizing: border-box !important;
}

/* Khusus kartu utama Riwayat Jabatan */
html body main .position-history-shell {
    padding-bottom: 16px !important;
}

/* Pastikan kelompok tombol Jabatan tidak menambah ruang bawah */
html body main .position-history-shell
.position-add-action.page-bottom-actions {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Tablet dan HP */
@media (max-width: 640px) {
    html body main .page-bottom-actions,
    html body main [class*="bottom-actions"].page-bottom-actions {
        margin-top: 14px !important;
        padding-top: 14px !important;
        padding-bottom: 0 !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    html body main .position-history-shell {
        padding-bottom: 14px !important;
    }
}


/* =========================================================
   PASFOTO CAPTION COLOR UNIFORM FINAL
   Pangkat dan nama pada caption pasfoto menggunakan
   warna, ketebalan, dan line-height yang sama.
========================================================= */

html body main .photo-identity-summary .photo-rank-line,
html body main .photo-identity-summary .photo-name-line {
    color: #0b5f98 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* Jarak pangkat dan nama tetap rapat */
html body main .photo-identity-summary .photo-rank-line {
    margin: 0 !important;
}

html body main .photo-identity-summary .photo-name-line {
    margin: 3px 0 0 0 !important;
}

/* Teks turunan tidak boleh mengambil warna lain */
html body main .photo-identity-summary .photo-rank-line *,
html body main .photo-identity-summary .photo-name-line * {
    color: inherit !important;
}

/* UNIVERSAL_HISTORY_PILL_BUTTONS_FINAL
   Seluruh tombol pada halaman riwayat menggunakan komponen universal.
   View lokal hanya boleh mengatur posisi, gap, dan lebar khusus.
*/

/* =========================================================
   DASAR UNIVERSAL
========================================================= */
html body .btn-pill-navy,
html body .btn-pill-secondary,
html body .btn-pill-muted,
html body main .history-filter-primary,
html body main .history-filter-secondary,
html body main .history-row-primary,
html body main .history-row-muted,
html body main .history-bottom-primary {
    min-height: 40px !important;
    padding: 0 20px !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;

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

    font-family: inherit !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer;
}

/* =========================================================
   TOMBOL UTAMA NAVY
========================================================= */
html body .btn-pill-navy,
html body main .history-filter-primary,
html body main .history-row-primary,
html body main .history-bottom-primary {
    color: #ffffff !important;
    background: #086a99 !important;
    border: 1px solid #086a99 !important;
    box-shadow: 0 7px 16px rgba(8, 106, 153, .18) !important;
}

/* =========================================================
   TOMBOL SEKUNDER
========================================================= */
html body .btn-pill-secondary,
html body main .history-filter-secondary {
    color: #455b75 !important;
    background: #ffffff !important;
    border: 1px solid #c8d7e6 !important;
    box-shadow: none !important;
}

/* =========================================================
   TOMBOL NONAKTIF / DIPROSES
========================================================= */
html body .btn-pill-muted,
html body main .history-row-muted {
    color: #64748b !important;
    background: #e8eef4 !important;
    border: 1px solid #d3dde7 !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* =========================================================
   ALIAS CLASS LAMA
   Menjaga halaman lama tetap mengikuti universal.
========================================================= */
html body main .filter-button,
html body main .filter-btn,
html body main .row-action-button,
html body main .row-action-btn,
html body main .bottom-button,
html body main .medical-history-view-btn,
html body main .medical-history-add-btn,
html body main .dashboard-history-view-btn,
html body main .dashboard-add-free-btn,
html body main .dashboard-row-edit-btn {
    border-radius: 9999px !important;
}

/* Terapkan / aksi utama */
html body main .filter-apply,
html body main .filter-submit,
html body main .row-edit-button,
html body main .row-submit-button,
html body main .medical-history-add-btn {
    color: #ffffff !important;
    background: #086a99 !important;
    border: 1px solid #086a99 !important;
}

/* Reset */
html body main .filter-reset {
    color: #455b75 !important;
    background: #ffffff !important;
    border: 1px solid #c8d7e6 !important;
}

/* Form di dalam kolom aksi tidak membawa margin bawaan */
html body main .row-actions form,
html body main .table-actions form {
    margin: 0 !important;
    padding: 0 !important;
}

/* HP */
@media (max-width: 640px) {
    html body main .page-bottom-actions .btn-pill-navy,
    html body main .page-bottom-actions .btn-pill-secondary,
    html body main .page-bottom-actions .history-bottom-primary {
        width: 100% !important;
    }
}
/* END_UNIVERSAL_HISTORY_PILL_BUTTONS_FINAL */

/* =========================================================
   DASHBOARD RIWAYAT KESAMAPTAAN
========================================================= */
html {
    scroll-behavior: smooth;
}

#riwayat-kesamaptaan {
    scroll-margin-top: 24px;
}

#riwayat-kesamaptaan .dashboard-verification-note {
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    line-height: 1.45;
}

#riwayat-kesamaptaan .dashboard-section-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

#riwayat-kesamaptaan .dashboard-section-actions a {
    margin: 0;
}

@media (max-width: 640px) {
    #riwayat-kesamaptaan .dashboard-section-actions {
        justify-content: center;
    }

    #riwayat-kesamaptaan .dashboard-section-actions a {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   RIWAYAT KESAMAPTAAN DASHBOARD
========================================================= */
#riwayat-kesamaptaan {
    scroll-margin-top: 24px;
}

#riwayat-kesamaptaan .dashboard-verification-note {
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    line-height: 1.45;
}

/* =========================================================
   SAMAKAN TOMBOL DASHBOARD RIWAYAT KESAMAPTAAN
   dengan Riwayat Kesehatan dan modul riwayat lainnya
========================================================= */
html body #riwayat-kesamaptaan .dashboard-history-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;

    width: 100% !important;
    margin-top: 20px !important;
    padding: 0 !important;
}

html body #riwayat-kesamaptaan .dashboard-history-view-btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;

    min-width: 230px !important;
    min-height: 40px !important;
    padding: 10px 22px !important;

    border-radius: 999px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

html body #riwayat-kesamaptaan .dashboard-add-free-btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;

    min-width: 173px !important;
    min-height: 40px !important;
    padding: 10px 22px !important;

    border-radius: 999px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

@media (max-width: 640px) {
    html body #riwayat-kesamaptaan .dashboard-history-actions {
        justify-content: center !important;
        gap: 10px !important;
    }

    html body #riwayat-kesamaptaan .dashboard-history-view-btn,
    html body #riwayat-kesamaptaan .dashboard-add-free-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Tautan Akun Saya pada header */
.header-user-link {
    color: inherit;
    text-decoration: none;
    border-radius: 999px;
    padding: 8px 10px;
    transition:
        background-color .2s ease,
        color .2s ease;
}

.header-user-link:hover,
.header-user-link:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    outline: none;
}

/* =========================================================
   FINAL UNIVERSAL HEADER VISIBILITY
   Memastikan header tidak disembunyikan aturan lama
   ========================================================= */

body header.app-header.navy-app-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 86px !important;
    padding: 0 !important;
    background: #083d68 !important;
}

body header.app-header.navy-app-header
.app-header-inner.navy-app-header-inner {
    width: min(100% - 48px, 1540px) !important;
    min-height: 86px !important;
    margin: 0 auto !important;
    padding: 14px 0 !important;

    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr) !important;
    align-items: center !important;
    gap: 20px !important;

    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .app-brand {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .brand-mark,
body header.app-header.navy-app-header .brand-mark img {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .brand-text {
    display: block !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .brand-title {
    display: block !important;
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .brand-subtitle {
    display: block !important;
    margin-top: 3px !important;
    color: #d8e9f7 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .app-header-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .app-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: 0 !important;
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .header-user,
body header.app-header.navy-app-header .header-role,
body header.app-header.navy-app-header .header-logout-form,
body header.app-header.navy-app-header .header-pill-logout {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .header-user,
body header.app-header.navy-app-header .header-role {
    gap: 7px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

body header.app-header.navy-app-header .header-user-link {
    padding: 8px 10px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
}

body header.app-header.navy-app-header .header-separator {
    display: block !important;
    width: 1px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, .28) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body header.app-header.navy-app-header .header-pill-logout {
    min-height: 38px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #ffffff !important;
    font-weight: 750 !important;
    cursor: pointer !important;
}

body header.app-header.navy-app-header .header-pill-logout:hover,
body header.app-header.navy-app-header .header-user-link:hover {
    background: rgba(255, 255, 255, .13) !important;
}

@media (max-width: 900px) {
    body header.app-header.navy-app-header
    .app-header-inner.navy-app-header-inner {
        width: min(100% - 32px, 1540px) !important;
        grid-template-columns: 1fr auto !important;
    }

    body header.app-header.navy-app-header .app-header-center {
        display: none !important;
    }
}

@media (max-width: 700px) {
    body header.app-header.navy-app-header {
        min-height: auto !important;
    }

    body header.app-header.navy-app-header
    .app-header-inner.navy-app-header-inner {
        width: min(100% - 24px, 1540px) !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px 0 !important;
    }

    body header.app-header.navy-app-header .app-header-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-left: 58px !important;
    }

    body header.app-header.navy-app-header .header-user,
    body header.app-header.navy-app-header .header-role {
        white-space: normal !important;
    }
}

@media (max-width: 480px) {
    body header.app-header.navy-app-header .app-header-actions {
        padding-left: 0 !important;
    }

    body header.app-header.navy-app-header .header-separator {
        display: none !important;
    }

    body header.app-header.navy-app-header .header-user {
        width: 100% !important;
    }
}

/* =========================================================
   Universal icon input
   ========================================================= */

.icon-input-group {
    display: flex;
    width: 100%;
    min-height: 46px;
    overflow: hidden;
    border: 1px solid #cbd8e5;
    border-radius: 12px;
    background: #ffffff;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.icon-input-group:hover {
    border-color: #afc2d4;
}

.icon-input-group:focus-within {
    border-color: #5f89ae;
    box-shadow: 0 0 0 3px rgba(19, 72, 117, .11);
}

.icon-input-group.has-error {
    border-color: #e11d48;
}

.icon-input-leading {
    width: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #dbe5ee;
    background: #f4f8fb;
    color: #355b7e;
}

.icon-input-leading svg,
.icon-input-password-toggle svg {
    width: 19px;
    height: 19px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-input-group input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    box-shadow: none !important;
    padding: 10px 14px;
    background: transparent;
    color: #102a43;
    font: inherit;
    font-weight: 650;
}

.icon-input-group input::placeholder {
    color: #8a9caf;
    font-weight: 500;
}

.icon-input-group input:disabled {
    color: #64748b;
    background: #f1f5f9;
    cursor: not-allowed;
}

.icon-input-password-toggle {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    flex: 0 0 48px !important;
    align-self: stretch;
    border: 0 !important;
    border-left: 1px solid #dbe5ee !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f8fafc !important;
    color: #526f89 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    box-shadow: none !important;
    line-height: 1 !important;
    appearance: none;
    -webkit-appearance: none;
    transition:
        background .18s ease,
        color .18s ease;
}

.icon-input-password-toggle:hover {
    background: #eaf2f8;
    color: #0b3a63;
}

.icon-input-password-toggle:active {
    background: #dce9f3;
}

.icon-input-password-toggle:focus-visible {
    outline: 2px solid rgba(8, 47, 87, .28);
    outline-offset: -3px;
}

.icon-input-password-toggle .password-icon-hide {
    display: none;
}

.icon-input-password-toggle.is-visible .password-icon-show {
    display: none;
}

.icon-input-password-toggle.is-visible .password-icon-hide {
    display: block;
}

@media (max-width: 640px) {
    .icon-input-leading,
    .icon-input-password-toggle {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        flex: 0 0 44px !important;
    }

    .icon-input-leading svg,
    .icon-input-password-toggle svg {
        width: 18px;
        height: 18px;
    }
}

/* =========================================================
   Universal icon input - dark login variant
   ========================================================= */

.icon-input-group.icon-input-dark {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .12);
}

.icon-input-group.icon-input-dark:hover {
    border-color: rgba(255, 255, 255, .38);
}

.icon-input-group.icon-input-dark:focus-within {
    border-color: rgba(247, 201, 72, .85);
    box-shadow: 0 0 0 3px rgba(247, 201, 72, .14);
}

.icon-input-group.icon-input-dark .icon-input-leading {
    border-right-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #f7c948;
}

.icon-input-group.icon-input-dark input {
    color: #ffffff;
}

.icon-input-group.icon-input-dark input::placeholder {
    color: #b8c8d8;
}

.icon-input-group.icon-input-dark .icon-input-password-toggle {
    border-left-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #c7d7e7;
}

.icon-input-group.icon-input-dark .icon-input-password-toggle:hover,
.icon-input-group.icon-input-dark .icon-input-password-toggle:focus-visible {
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

.icon-input-group .icon-input-password-toggle svg {
    flex: 0 0 auto;
    pointer-events: none;
}

/* =========================================================
   FINAL APPLICATION-WIDE PILL BUTTON STANDARD
   Menyeragamkan seluruh tombol aksi menjadi pil.
   Komponen ikon dan kontrol khusus dikecualikan.
   ========================================================= */

/* Tombol HTML pada area konten utama. */
html body main button:not(.icon-input-password-toggle):not(.corps-select-button),
html body .app-content button:not(.icon-input-password-toggle):not(.corps-select-button),
html body .page-content button:not(.icon-input-password-toggle):not(.corps-select-button),

/* Sistem tombol umum dan versi lama. */
html body .btn,
html body .btn-small,
html body .btn-primary,
html body .btn-secondary,
html body .btn-light,
html body .btn-green,
html body .btn-yellow,
html body .btn-red,
html body .btn-danger,
html body .btn-warning,
html body .btn-success,
html body .btn-action,

/* Sistem tombol pil aplikasi. */
html body .btn-pill,
html body .btn-pill-navy,
html body .btn-pill-secondary,
html body .btn-pill-muted,
html body .btn-pill-primary,
html body .btn-pill-green,
html body .btn-pill-red,
html body .btn-danger-pill,

/* Tombol halaman akun dan login. */
html body .account-pill,
html body .login-submit,

/* Tombol formulir dan aksi bawah. */
html body .form-action-btn,
html body .filter-button,
html body .bottom-button,
html body .page-bottom-actions > a,
html body .page-bottom-actions > button,

/* Tombol tabel dan baris data. */
html body .table-action-btn,
html body .row-action-button,
html body .education-submit-btn,
html body .operation-submit-btn,
html body .training-submit-btn,
html body .achievement-submit-btn,

/* Tombol administrator. */
html body .pill,
html body .pill-link,
html body .audit-btn,
html body .management-summary-btn,

/* Tombol header. */
html body .header-pill,
html body .logout-button,
html body .universal-app-logout,
html body .header-dashboard-btn,
html body .logout-btn {
    border-radius: 9999px !important;
}

/* Menjaga bentuk pil pada semua kondisi interaksi. */
html body main button:not(.icon-input-password-toggle):not(.corps-select-button):hover,
html body main button:not(.icon-input-password-toggle):not(.corps-select-button):focus,
html body main button:not(.icon-input-password-toggle):not(.corps-select-button):active,
html body .account-pill:hover,
html body .account-pill:focus,
html body .account-pill:active,
html body .btn:hover,
html body .btn:focus,
html body .btn:active,
html body .btn-small:hover,
html body .btn-small:focus,
html body .btn-small:active,
html body .table-action-btn:hover,
html body .table-action-btn:focus,
html body .table-action-btn:active {
    border-radius: 9999px !important;
}

/*
 * Pengecualian:
 * tombol mata merupakan bagian persegi pada ujung input,
 * bukan tombol aksi berbentuk pil.
 */
html body .icon-input-password-toggle {
    border-radius: 0 12px 12px 0 !important;
}

/*
 * Pemilih korps adalah kontrol formulir gabungan.
 * Bentuknya mengikuti bidang input, bukan tombol aksi.
 */
html body .corps-select-button {
    border-radius: 12px !important;
}

/* =========================================================
   UNIVERSAL PAGINATION
   Mencegah ikon panah pagination membesar dan menyeragamkan
   navigasi halaman dengan tema aplikasi.
   ========================================================= */

html body nav[aria-label="Pagination Navigation"] {
    margin-top: 18px;
}

html body .pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .pagination .page-item {
    margin: 0;
}

html body .pagination .page-link {
    min-width: 38px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #cbd8e5;
    border-radius: 999px !important;
    background: #ffffff;
    color: #174b75;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    box-shadow: none;
}

html body .pagination .page-link:hover,
html body .pagination .page-link:focus {
    border-color: #7fa4c3;
    background: #edf5fb;
    color: #083d68;
    outline: none;
}

html body .pagination .page-item.active .page-link {
    border-color: #086a99;
    background: #086a99;
    color: #ffffff;
}

html body .pagination .page-item.disabled .page-link {
    border-color: #dbe5ee;
    background: #f5f8fb;
    color: #94a3b8;
    cursor: not-allowed;
}

html body nav[aria-label="Pagination Navigation"] svg,
html body .pagination svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    display: block !important;
    flex: 0 0 16px !important;
}

html body nav[aria-label="Pagination Navigation"] > div {
    max-width: 100%;
}

@media (max-width: 640px) {
    html body .pagination {
        justify-content: center;
    }

    html body .pagination .page-link {
        min-width: 36px;
        min-height: 36px;
        padding: 7px 11px;
    }
}

/*
 * Gunakan hanya tombol tampilkan password milik aplikasi.
 * Sembunyikan ikon reveal/clear bawaan Microsoft Edge.
 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

/* Mencegah kontrol kredensial WebKit menumpuk dengan tombol aplikasi. */
input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* =========================================================
   UNIVERSAL PILL BUTTON VARIANTS
   ========================================================= */

.btn-pill-light,
.btn-pill-soft,
.btn-pill-success,
.btn-pill-danger {
    display: inline-flex;
    min-height: 40px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 10px 18px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.btn-pill-light {
    border-color: rgba(255, 255, 255, 0.72);
    color: #0b3a63;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(5, 34, 59, 0.12);
}

.btn-pill-light:hover {
    border-color: #ffffff;
    color: #082f55;
    background: #f4f9fd;
    box-shadow: 0 8px 20px rgba(5, 34, 59, 0.18);
    transform: translateY(-1px);
}

.btn-pill-soft {
    border-color: #bfdbed;
    color: #0f4c81;
    background: #eaf5fb;
}

.btn-pill-soft:hover {
    border-color: #8fc3df;
    color: #0b3a63;
    background: #dceff9;
    transform: translateY(-1px);
}

.btn-pill-success {
    border-color: #86d5a4;
    color: #155f37;
    background: #dcf8e7;
}

.btn-pill-success:hover {
    border-color: #59bd7d;
    color: #0f4f2d;
    background: #c8f1d8;
    transform: translateY(-1px);
}

.btn-pill-danger {
    border-color: #f4a6a6;
    color: #9b1c1c;
    background: #fee2e2;
}

.btn-pill-danger:hover {
    border-color: #ee7d7d;
    color: #7f1d1d;
    background: #fecaca;
    transform: translateY(-1px);
}

.btn-pill-light:focus-visible,
.btn-pill-soft:focus-visible,
.btn-pill-success:focus-visible,
.btn-pill-danger:focus-visible {
    outline: 3px solid rgba(40, 120, 181, 0.22);
    outline-offset: 2px;
}

.btn-pill-light:disabled,
.btn-pill-soft:disabled,
.btn-pill-success:disabled,
.btn-pill-danger:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 640px) {
    .btn-pill-light,
    .btn-pill-soft,
    .btn-pill-success,
    .btn-pill-danger {
        min-height: 42px;
        padding: 10px 16px;
    }
}

/* =========================================================
   HISTORY TABLE ACTIONS - STANDARD GLOBAL
========================================================= */

html body .history-action-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    min-width: 285px !important;
}

html body .history-action-group form {
    display: inline-flex !important;
    margin: 0 !important;
    width: auto !important;
}

html body .history-action-button,
html body a.history-action-button,
html body button.history-action-button {
    width: auto !important;
    min-width: 68px !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;

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

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease !important;
}

html body .history-action-button:hover {
    transform: translateY(-1px) !important;
}

html body .history-action-edit {
    border-color: #bae6fd !important;
    background: #e0f2fe !important;
    color: #075985 !important;
}

html body .history-action-edit:hover {
    border-color: #0e7490 !important;
    background: #0e7490 !important;
    color: #ffffff !important;
}

html body .history-action-delete {
    border-color: #fecaca !important;
    background: #fee2e2 !important;
    color: #b42318 !important;
}

html body .history-action-delete:hover {
    border-color: #dc2626 !important;
    background: #dc2626 !important;
    color: #ffffff !important;
}

html body .history-action-submit {
    min-width: 118px !important;
    border-color: #075f8f !important;
    background: #075f8f !important;
    color: #ffffff !important;
}

html body .history-action-submit:hover {
    border-color: #064d74 !important;
    background: #064d74 !important;
    color: #ffffff !important;
}

html body .history-action-locked {
    border-color: #dbe3ec !important;
    background: #eef2f6 !important;
    color: #64748b !important;
    cursor: default !important;
}

html body .history-action-locked:hover {
    transform: none !important;
}

@media (max-width: 700px) {
    html body .history-action-group {
        justify-content: flex-start !important;
        min-width: 250px !important;
    }

    html body .history-action-button,
    html body a.history-action-button,
    html body button.history-action-button {
        min-height: 34px !important;
    }
}