:root {
    --teal-950: #073f43;
    --teal-900: #07585d;
    --teal-850: #09686d;
    --teal-800: #08787d;
    --teal-700: #0b8585;
    --teal-600: #10a09b;
    --teal-100: #dff7f3;
    --teal-050: #f0fbf9;

    --gold-700: #9a7621;
    --gold-600: #e4bd4a;
    --gold-500: #f2c94c;
    --gold-100: #fff4ce;

    --blue-700: #10658a;
    --blue-100: #e1f3ff;
    --red-700: #b42318;
    --red-600: #e11d48;
    --red-100: #fee4e2;
    --green-700: #067647;
    --green-600: #12b76a;
    --green-100: #dcfae6;
    --orange-700: #93370d;
    --orange-600: #f59e0b;
    --orange-100: #fef0c7;

    --ink: #11242c;
    --muted: #637488;
    --line: #d9e6e3;
    --page: #f4f8f7;
    --card: #ffffff;

    --shadow-soft: 0 16px 42px rgba(7, 88, 93, .10);
    --shadow-strong: 0 24px 70px rgba(7, 63, 67, .20);
    --sidebar-width: 282px;
    --content-max: 1180px;
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: hidden; }
body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--page);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
[hidden] { display: none !important; }
.eyebrow { margin: 0 0 10px; color: var(--teal-800); font-size: 12px; font-weight: 950; letter-spacing: .16em; }
.muted { color: var(--muted); }

/* LOGIN */
.login-page {
    width: 100%; height: 100vh; height: 100dvh; min-height: 560px;
    display: grid; place-items: center; padding: 16px; overflow: hidden;
    background: radial-gradient(circle at 18% 15%, rgba(8,120,125,.16), transparent 32%),
                radial-gradient(circle at 92% 80%, rgba(228,189,74,.14), transparent 28%), #edf4f3;
}
.login-shell {
    width: min(1120px, calc(100vw - 32px)); height: min(650px, calc(100vh - 32px)); height: min(650px, calc(100dvh - 32px));
    min-height: 520px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden;
    border-radius: 32px; background: #fff; box-shadow: var(--shadow-strong);
}
.login-brand {
    position: relative; min-width: 0; overflow: hidden; color: #fff;
    background: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px),
                radial-gradient(circle at 66% 68%, rgba(255,255,255,.10), transparent 34%),
                linear-gradient(145deg, var(--teal-800), var(--teal-950));
    background-size: 22px 22px, 22px 22px, auto, auto;
}
.login-brand::before { content: ""; position: absolute; right: -140px; bottom: -140px; width: 360px; height: 360px; border: 1px solid rgba(228,189,74,.42); border-radius: 50%; }
.login-brand-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(34px,5.5vh,62px); padding: clamp(72px,9vh,104px) clamp(38px,5vw,66px) 36px clamp(44px,5.6vw,72px); }
.brand-topline { display: flex; align-items: center; gap: 17px; }
.login-logo { width: clamp(82px,7.6vw,98px); height: clamp(82px,7.6vw,98px); object-fit: contain; flex: 0 0 auto; padding: 9px; border-radius: 20px; background: #fff; box-shadow: 0 18px 42px rgba(0,0,0,.18); }
.brand-campus span, .brand-campus strong { display: block; line-height: 1.08; }
.brand-campus span { color: #f3fffd; font-size: clamp(13px,1.25vw,17px); font-weight: 900; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 3px 14px rgba(0,0,0,.24); }
.brand-campus strong { margin-top: 7px; color: var(--gold-600); font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px,3vw,39px); font-weight: 900; text-shadow: 0 2px 0 rgba(99,76,22,.70), 0 8px 20px rgba(0,0,0,.28), 0 0 22px rgba(228,189,74,.12); }
.brand-main { max-width: 620px; }
.brand-main h1 { margin: 0; color: var(--gold-600); font-family: Georgia, "Times New Roman", "Bookman Old Style", "Palatino Linotype", serif; font-size: clamp(82px,9.2vw,124px); line-height: .82; letter-spacing: .055em; font-weight: 900; -webkit-text-stroke: .8px rgba(88,68,18,.64); text-shadow: 0 2px 0 var(--gold-700), 0 4px 0 rgba(94,73,23,.48), 0 12px 22px rgba(0,0,0,.34), 0 0 26px rgba(228,189,74,.18); }
.brand-main p { max-width: 590px; margin: 17px 0 0; color: #fff; font-size: clamp(16px,1.55vw,21px); line-height: 1.34; font-weight: 850; text-shadow: 0 3px 15px rgba(0,0,0,.30); }
.login-badge, .login-headline { display: none !important; }
.login-panel { min-width: 0; display: grid; place-items: center; padding: clamp(34px,5vw,64px); background: linear-gradient(180deg,#fff 0%,#f8fbfb 100%); }
.login-card { width: min(420px,100%); }
.login-card h2 { margin: 0; color: var(--ink); font-size: clamp(34px,4vw,46px); line-height: 1; letter-spacing: -.045em; font-weight: 900; }
.login-card .muted { margin: 12px 0 30px; font-weight: 650; }
.login-note { margin: 26px 0 0; color: var(--muted); text-align: center; font-size: 13px; }

/* FORMS & BUTTONS */
.field { min-width: 0; }
.field + .field { margin-top: 18px; }
label { display: block; margin: 0 0 8px; color: #34435a; font-size: 13px; font-weight: 900; }
input, select, textarea { width: 100%; min-width: 0; min-height: 52px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff; outline: none; }
.login-card input, .login-card select { background: #eef4fb; border-color: #dfebf5; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--teal-700); box-shadow: 0 0 0 4px rgba(8,120,125,.15); }
.password-row { display: grid; grid-template-columns: minmax(0,1fr) 78px; gap: 10px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 15px; cursor: pointer; font-weight: 900; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: linear-gradient(135deg, var(--teal-700), var(--teal-950)); box-shadow: 0 14px 30px rgba(8,120,125,.24); }
.button-secondary { color: var(--teal-950); background: var(--teal-100); }
.button-light { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.button-danger { color: var(--red-700); background: var(--red-100); }
.button-warning { color: #fff; background: var(--gold-700); }
.button-full { width: 100%; margin-top: 24px; }
.button-small { min-height: 36px; padding: 8px 13px; border-radius: 10px; font-size: 12px; }
.button-logout { width: 100%; min-height: 46px; color: #fff; background: linear-gradient(135deg, #e11d48, #9f1239); box-shadow: 0 14px 28px rgba(225,29,72,.25); }
.alert { margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; font-weight: 760; }
.alert-error { color: var(--red-700); background: var(--red-100); }
.alert-success { color: var(--green-700); background: var(--green-100); }

/* APP LAYOUT */
.app-page { height: 100vh; overflow: hidden; background: linear-gradient(135deg, #f2f7f6 0%, #f9fbfb 60%, #fff8e3 100%); }
.app-layout { min-height: 100vh; display: block; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width); height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; color: #fff;
    background: radial-gradient(circle at 26% 10%, rgba(255,255,255,.14), transparent 26%),
                radial-gradient(circle at 100% 80%, rgba(228,189,74,.18), transparent 28%),
                linear-gradient(180deg, var(--teal-800), var(--teal-950));
    box-shadow: 18px 0 48px rgba(7,63,67,.18);
}
.sidebar-brand { display: flex; align-items: center; gap: 13px; padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
.institution-logo-small { width: 58px; height: 58px; object-fit: contain; flex: 0 0 auto; padding: 7px; border-radius: 17px; background: #fff; box-shadow: 0 16px 34px rgba(0,0,0,.19); }
.sidebar-brand strong, .sidebar-user strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-brand strong { color: #fff; font-size: 19px; line-height: 1.1; }
.sidebar-brand span, .sidebar-user span { display: block; margin-top: 4px; color: #d5e8e6; font-size: 12px; }
.sidebar-nav { display: grid; gap: 8px; padding: 18px 14px; }
.sidebar-nav a, .sidebar-nav span { min-width: 0; display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 12px 16px; border-radius: 14px; color: #eaf7f5; text-decoration: none; font-size: 15px; font-weight: 900; }
.sidebar-nav a:hover { background: rgba(255,255,255,.10); }
.sidebar-nav .active { position: relative; color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 4px 0 0 var(--gold-600), 0 10px 24px rgba(0,0,0,.12); }
.sidebar-nav .active::after { content: ""; position: absolute; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-600); }
.sidebar-nav .disabled { color: rgba(255,255,255,.54); cursor: not-allowed; }
.nav-icon { width: 20px; display: inline-grid; place-items: center; color: var(--gold-600); font-weight: 950; }
.sidebar-bottom { margin-top: auto; padding: 14px 18px 20px; border-top: 1px solid rgba(255,255,255,.13); }
.sidebar-user { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 11px; margin-bottom: 12px; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--teal-900); background: #e1fffb; font-weight: 950; }
.sidebar-logout { margin: 0; }
.content { min-width: 0; height: 100vh; overflow-y: auto; margin-left: var(--sidebar-width); padding: 34px clamp(24px,4vw,46px); scroll-behavior: smooth; }
.content > * { width: min(var(--content-max),100%); margin-left: auto; margin-right: auto; }
.page-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 28px; }
.page-header h1 { margin: 0 0 8px; font-size: clamp(34px,4vw,48px); line-height: 1; letter-spacing: -.045em; }
.page-header p { margin-top: 0; }
.dashboard-hero { padding: 2px 0 4px; }
.header-actions, .form-actions, .filter-actions, .row-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* DASHBOARD */
.stat-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card { position: relative; min-width: 0; overflow: hidden; padding: 22px; border: 1px solid rgba(217,230,227,.96); border-radius: 21px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-soft); }
.stat-card::before { content: ""; position: absolute; top: 0; left: 18px; width: 86px; height: 4px; border-radius: 0 0 999px 999px; background: var(--teal-700); }
.stat-card::after { content: ""; position: absolute; right: -18px; bottom: -22px; width: 82px; height: 82px; border-radius: 50%; opacity: .12; background: var(--teal-700); }
.stat-total::before, .stat-total::after { background: var(--teal-700); }
.stat-incoming::before, .stat-incoming::after { background: var(--green-600); }
.stat-outgoing::before, .stat-outgoing::after { background: var(--blue-700); }
.stat-draft::before, .stat-draft::after { background: var(--orange-600); }
.stat-final::before, .stat-final::after { background: var(--green-700); }
.stat-cancelled::before, .stat-cancelled::after { background: var(--red-600); }
.stat-card span { color: #516375; font-size: 13px; font-weight: 900; }
.stat-card strong { display: block; margin-top: 12px; font-size: 36px; line-height: 1; }
.stat-card small { display: block; margin-top: 12px; color: #7f8f99; font-size: 12px; line-height: 1.35; }
.panel { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-soft); }
.panel-featured { border-top: 4px solid var(--gold-600); }
.panel + .panel { margin-top: 20px; }
.panel-header, .form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel-header h2, .form-heading h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.form-heading { margin-bottom: 22px; }
.status { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 950; }
.status-final { color: var(--green-700); background: var(--green-100); }
.status-draft { color: var(--orange-700); background: var(--orange-100); }
.status-dibatalkan { color: var(--red-700); background: var(--red-100); }
.empty-state { padding: 64px 20px; color: var(--muted); text-align: center; }
.empty-state strong { display: block; color: var(--ink); font-size: 20px; }
.table-wrap { margin-top: 22px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: #53677b; font-size: 12px; font-weight: 950; letter-spacing: .04em; }
tbody tr:hover { background: #f0fbf9; }

/* FORM */
.form-panel { max-width: 1080px; }
.segmented { width: min(520px,100%); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 24px; padding: 5px; border-radius: 16px; background: var(--teal-100); }
.segmented label { margin: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { min-height: 44px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; font-weight: 900; }
.segmented input:checked + span { color: #fff; background: linear-gradient(135deg,var(--teal-700),var(--teal-950)); box-shadow: 0 8px 20px rgba(8,120,125,.20); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.form-grid .field, .filter-grid .field { margin-top: 0; }
.field-full { grid-column: 1 / -1; }
.placeholder-upload { margin-top: 22px; padding: 22px; border: 1px dashed #98b8b4; border-radius: 18px; color: var(--muted); background: linear-gradient(135deg,#f9fdfc 0%,#fff9e8 100%); text-align: center; font-weight: 760; }
.form-actions { justify-content: flex-end; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ARCHIVE */
.filter-panel { margin-bottom: 20px; }
.filter-grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 16px; }
.filter-actions { justify-content: flex-end; margin-top: 18px; }
.archive-list { margin-top: 16px; }
.archive-item { min-width: 0; display: grid; grid-template-columns: minmax(210px,1.35fr) minmax(210px,1.45fr) minmax(120px,.85fr) auto auto; gap: 18px; align-items: center; padding: 18px 10px; border-bottom: 1px solid var(--line); border-radius: 14px; }
.archive-item:hover { background: #f0fbf9; }
.archive-item:last-child { border-bottom: 0; }
.archive-item strong, .archive-item span { display: block; }
.archive-item span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.archive-primary strong { color: var(--teal-950); }
.cancel-note { color: var(--red-700) !important; font-weight: 800; }
.row-actions { justify-content: flex-end; }
.row-actions form { margin: 0; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 24px; }
.disabled-link { opacity: .45; pointer-events: none; }

/* Laptop pendek */
@media (max-height: 720px) and (min-width: 901px) {
    .sidebar-brand { padding: 16px 18px 12px; }
    .institution-logo-small { width: 50px; height: 50px; border-radius: 15px; }
    .sidebar-nav { gap: 6px; padding: 14px 12px; }
    .sidebar-nav a, .sidebar-nav span { min-height: 43px; padding: 10px 14px; font-size: 14px; }
    .sidebar-bottom { padding: 12px 16px 16px; }
    .sidebar-user { margin-bottom: 10px; }
    .button-logout { min-height: 42px; }
    .content { padding-top: 26px; padding-bottom: 34px; }
}

/* Laptop kecil */
@media (max-width: 1240px) {
    :root { --sidebar-width: 260px; --content-max: 1040px; }
    .content { padding: 32px 24px; }
    .stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .archive-item { grid-template-columns: 1.1fr 1.3fr .8fr; }
    .archive-item .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .filter-grid .field:first-child { grid-column: 1 / -1; }
}

/* Tablet & ponsel */
@media (max-width: 900px) {
    .app-page { height: auto; overflow: auto; }
    .app-layout { display: block; }
    .sidebar { position: relative; inset: auto; width: 100%; height: auto; min-height: 0; overflow: visible; box-shadow: 0 12px 28px rgba(7,63,67,.15); }
    .sidebar-brand { padding: 14px 18px; }
    .institution-logo-small { width: 48px; height: 48px; }
    .sidebar-nav { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 14px; scrollbar-width: none; }
    .sidebar-nav::-webkit-scrollbar { display: none; }
    .sidebar-nav a, .sidebar-nav span { min-height: 42px; padding: 10px 15px; white-space: nowrap; font-size: 14px; }
    .sidebar-bottom { display: flex; align-items: center; gap: 12px; padding: 10px 14px 14px; }
    .sidebar-user { margin: 0; flex: 1; min-width: 0; }
    .sidebar-logout { width: 150px; }
    .content { height: auto; overflow: visible; margin-left: 0; padding: 24px 16px; }
}

@media (max-width: 640px) {
    body { background: #f5f8f8; }
    .login-page { height: auto; min-height: 100vh; min-height: 100dvh; align-items: stretch; padding: 0; overflow: auto; }
    .login-shell { width: 100%; height: auto; min-height: 100vh; min-height: 100dvh; display: block; border-radius: 0; box-shadow: none; }
    .login-brand { min-height: auto; }
    .login-brand-inner { height: auto; display: block; padding: 28px 22px 34px; }
    .brand-topline { gap: 12px; }
    .login-logo { width: 64px; height: 64px; border-radius: 17px; }
    .brand-campus span { font-size: 10px; }
    .brand-campus strong { font-size: 20px; }
    .brand-main { padding-top: 30px; }
    .brand-main h1 { font-size: 64px; }
    .brand-main p { font-size: 15px; }
    .login-panel { padding: 24px 18px 34px; }
    .login-card { width: 100%; }
    .login-card h2 { font-size: 30px; }
    .password-row { grid-template-columns: minmax(0,1fr) 78px; }
    .sidebar-bottom { display: grid; grid-template-columns: 1fr; }
    .sidebar-logout { width: 100%; }
    .content { padding: 22px 14px 34px; }
    .page-header { flex-direction: column; gap: 16px; margin-bottom: 20px; }
    .page-header h1 { font-size: 34px; }
    .header-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .header-actions > *, .header-actions form, .header-actions button, .header-actions .button { width: 100%; }
    .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .stat-card { padding: 17px; border-radius: 18px; }
    .stat-card strong { font-size: 30px; }
    .stat-card small { display: none; }
    .panel { padding: 18px; border-radius: 20px; }
    .panel-header, .form-heading { flex-direction: column; align-items: stretch; gap: 12px; }
    .panel-header .button, .form-heading .status { width: max-content; }
    .form-grid, .filter-grid { grid-template-columns: 1fr; }
    .field-full, .filter-grid .field:first-child { grid-column: auto; }
    .segmented { width: 100%; }
    .form-actions, .filter-actions { display: grid; grid-template-columns: 1fr; }
    .form-actions .button, .filter-actions .button { width: 100%; }
    .archive-item { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
    .row-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); justify-content: stretch; }
    .row-actions > *, .row-actions form, .row-actions button, .row-actions a { width: 100%; }
    .table-wrap { overflow: visible; }
    .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap th, .table-wrap td, .table-wrap tr { display: block; }
    .table-wrap thead { display: none; }
    .table-wrap tr { margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdfd; }
    .table-wrap td { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 10px; padding: 9px 0; border: 0; white-space: normal; }
    .table-wrap td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 850; }
    .pagination { gap: 10px; flex-wrap: wrap; font-size: 13px; }
    .pagination .button { flex: 1 1 120px; }
}
@media (max-width: 390px) {
    .stat-grid { grid-template-columns: 1fr; }
    .header-actions { grid-template-columns: 1fr; }
    .row-actions { grid-template-columns: 1fr; }
}



/* =========================================================
   ARISTA TAHAP 2.5 — MOBILE RESET FINAL
   Tujuan:
   - mengembalikan logo STIT MAFA yang benar;
   - menu ponsel dibuat rapi: Dashboard, Buat Surat, Arsip;
   - halaman Buat Surat tidak melebar ke kanan;
   - tetap menjaga tampilan laptop yang sudah bagus.
   ========================================================= */

/* Login desktop: ukuran teks kampus dibuat aman di laptop 1366px */
@media (min-width: 641px) {
    .brand-topline {
        align-items: center !important;
        gap: 16px !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .brand-campus {
        min-width: 0 !important;
        max-width: calc(100% - 116px) !important;
        overflow: visible !important;
    }

    .brand-campus span {
        font-size: clamp(11px, 1.05vw, 14px) !important;
        line-height: 1.08 !important;
        letter-spacing: .12em !important;
        white-space: normal !important;
    }

    .brand-campus strong {
        font-size: clamp(22px, 2.15vw, 30px) !important;
        line-height: 1.06 !important;
        white-space: normal !important;
        max-width: 100% !important;
        overflow-wrap: normal !important;
        text-shadow:
            0 2px 0 rgba(99, 76, 22, .62),
            0 7px 17px rgba(0, 0, 0, .25),
            0 0 18px rgba(228, 189, 74, .12) !important;
    }

    .login-logo {
        width: clamp(78px, 7vw, 90px) !important;
        height: clamp(78px, 7vw, 90px) !important;
        flex: 0 0 auto !important;
    }
}

@media (min-width: 641px) and (max-width: 1440px) {
    .brand-campus strong {
        font-size: clamp(22px, 2vw, 28px) !important;
    }

    .brand-campus span {
        font-size: clamp(11px, .95vw, 13px) !important;
    }
}

/* Target ponsel/tablet, termasuk Chrome Android yang kadang memakai viewport desktop */
@media screen and (max-width: 1024px), screen and (hover: none) and (pointer: coarse) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        color-scheme: light !important;
    }

    body.app-page,
    body:not(.login-page) {
        height: auto !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background:
            radial-gradient(circle at 10% 0%, rgba(8, 120, 125, .10), transparent 30%),
            linear-gradient(180deg, #f6fbfa 0%, #eef7f5 100%) !important;
        color: var(--ink) !important;
    }

    body:not(.login-page) *,
    body:not(.login-page) *::before,
    body:not(.login-page) *::after {
        box-sizing: border-box !important;
    }

    body:not(.login-page) .app-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
    }

    body:not(.login-page) .sidebar {
        position: relative !important;
        inset: auto !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        display: block !important;
        border-radius: 0 0 22px 22px !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(255,255,255,.13), transparent 30%),
            radial-gradient(circle at 95% 95%, rgba(228,189,74,.18), transparent 30%),
            linear-gradient(135deg, #08787d 0%, #073f43 100%) !important;
        box-shadow: 0 18px 42px rgba(7, 63, 67, .22) !important;
    }

    body:not(.login-page) .sidebar-brand {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 14px 16px 12px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
    }

    body:not(.login-page) .institution-logo-small,
    body:not(.login-page) .sidebar-brand img {
        width: 52px !important;
        height: 52px !important;
        flex: 0 0 52px !important;
        object-fit: contain !important;
        padding: 6px !important;
        border-radius: 15px !important;
        background: #ffffff !important;
    }

    body:not(.login-page) .sidebar-brand strong {
        display: block !important;
        color: #ffffff !important;
        font-size: 20px !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        letter-spacing: .01em !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body:not(.login-page) .sidebar-brand span {
        display: block !important;
        margin-top: 3px !important;
        color: rgba(255,255,255,.80) !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Ponsel: hanya tampilkan 3 menu utama supaya rapi */
    body:not(.login-page) .sidebar-nav {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 12px 12px 14px !important;
        margin: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
    }

    body:not(.login-page) .sidebar-nav .disabled {
        display: none !important;
    }

    body:not(.login-page) .sidebar-nav a,
    body:not(.login-page) .sidebar-nav span {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 4px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        color: rgba(255,255,255,.86) !important;
        background: rgba(255,255,255,.055) !important;
        font-size: clamp(10px, 2.9vw, 12.5px) !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body:not(.login-page) .sidebar-nav a::before,
    body:not(.login-page) .sidebar-nav a::after,
    body:not(.login-page) .sidebar-nav span::before,
    body:not(.login-page) .sidebar-nav span::after {
        display: none !important;
        content: none !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon {
        width: auto !important;
        min-width: 0 !important;
        display: inline-grid !important;
        place-items: center !important;
        color: #e4bd4a !important;
        font-size: 12px !important;
        line-height: 1 !important;
        flex: 0 0 auto !important;
    }

    body:not(.login-page) .sidebar-nav a.active {
        color: #ffffff !important;
        background: rgba(255,255,255,.16) !important;
        box-shadow: inset 4px 0 0 #e4bd4a, 0 8px 18px rgba(0, 0, 0, .13) !important;
    }

    body:not(.login-page) .sidebar-bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 13px 16px 16px !important;
        margin: 0 !important;
        border-top: 0 !important;
    }

    body:not(.login-page) .sidebar-user {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    body:not(.login-page) .sidebar-user .avatar,
    body:not(.login-page) .avatar {
        width: 46px !important;
        height: 46px !important;
        flex: 0 0 46px !important;
    }

    body:not(.login-page) .sidebar-user strong {
        display: block !important;
        color: #ffffff !important;
        font-size: 16px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body:not(.login-page) .sidebar-user span {
        display: block !important;
        margin-top: 3px !important;
        color: rgba(255,255,255,.80) !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    body:not(.login-page) .sidebar-logout,
    body:not(.login-page) .sidebar form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.login-page) .button-logout,
    body:not(.login-page) .sidebar form button {
        width: 100% !important;
        min-height: 48px !important;
        border: 0 !important;
        border-radius: 16px !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #e11d48, #be123c) !important;
        box-shadow: 0 14px 28px rgba(190, 18, 60, .26) !important;
    }

    body:not(.login-page) .content,
    body:not(.login-page) main.content {
        position: relative !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 24px 16px 44px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    body:not(.login-page) .content > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:not(.login-page) .page-header {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin: 0 0 22px !important;
    }

    body:not(.login-page) .page-header h1 {
        max-width: 100% !important;
        font-size: clamp(34px, 10vw, 46px) !important;
        line-height: .98 !important;
    }

    body:not(.login-page) .header-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body:not(.login-page) .header-actions .button,
    body:not(.login-page) .header-actions a,
    body:not(.login-page) .header-actions button {
        width: 100% !important;
        justify-content: center !important;
    }

    body:not(.login-page) .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body:not(.login-page) .panel,
    body:not(.login-page) .form-panel,
    body:not(.login-page) .form-card,
    body:not(.login-page) .card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        background-color: #ffffff !important;
        color: var(--ink) !important;
    }

    body:not(.login-page) .form-heading,
    body:not(.login-page) .panel-header {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-items: start !important;
    }

    body:not(.login-page) .form-heading .status,
    body:not(.login-page) .panel-header .status {
        justify-self: start !important;
        width: auto !important;
    }

    body:not(.login-page) .form-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    body:not(.login-page) .field,
    body:not(.login-page) .field-full,
    body:not(.login-page) .form-grid > * {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body:not(.login-page) input,
    body:not(.login-page) select,
    body:not(.login-page) textarea {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        color: var(--ink) !important;
        background-color: #ffffff !important;
        border-color: var(--line) !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    body:not(.login-page) textarea {
        min-height: 130px !important;
    }

    body:not(.login-page) .segmented {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 6px !important;
        border-radius: 18px !important;
    }

    body:not(.login-page) .segmented label,
    body:not(.login-page) .segmented span {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body:not(.login-page) .segmented span {
        min-height: 50px !important;
        padding: 10px 8px !important;
        font-size: clamp(13px, 3.6vw, 16px) !important;
        white-space: nowrap !important;
    }

    body:not(.login-page) .form-actions,
    body:not(.login-page) .filter-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body:not(.login-page) .form-actions .button,
    body:not(.login-page) .form-actions button,
    body:not(.login-page) .filter-actions .button,
    body:not(.login-page) .filter-actions button {
        width: 100% !important;
        justify-content: center !important;
    }

    body:not(.login-page) .table-wrap {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}

@media screen and (max-width: 430px), screen and (hover: none) and (pointer: coarse) and (max-width: 430px) {
    body:not(.login-page) .content,
    body:not(.login-page) main.content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body:not(.login-page) .sidebar-nav {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 7px !important;
    }

    body:not(.login-page) .sidebar-nav a,
    body:not(.login-page) .sidebar-nav span {
        font-size: 10.5px !important;
        gap: 3px !important;
    }

    body:not(.login-page) .panel,
    body:not(.login-page) .form-panel,
    body:not(.login-page) .form-card,
    body:not(.login-page) .card {
        padding: 18px !important;
    }
}

@media screen and (max-width: 390px) {
    body:not(.login-page) .stat-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ARISTA_TAHAP2_6_SIDEBAR_ICON_FIX_START
   Finishing icon sidebar: Dashboard, Buat Surat, Arsip dibuat lebih jelas,
   sejajar, dan konsisten di laptop maupun ponsel. */
.sidebar-nav a,
.sidebar-nav span {
    align-items: center !important;
}

.sidebar-nav .nav-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    color: #f1d16b !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .09),
        0 8px 18px rgba(0, 0, 0, .10) !important;
}

.sidebar-nav .nav-icon svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.15 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.sidebar-nav .nav-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sidebar-nav a.active .nav-icon {
    color: #ffffff !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .26), transparent 42%),
        linear-gradient(135deg, #e4bd4a, #a67f25) !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
}

.sidebar-nav a:hover .nav-icon {
    transform: translateY(-1px) !important;
}

/* Laptop: icon lebih tegas dan jarak icon-teks konsisten */
@media (min-width: 901px) {
    .sidebar-nav {
        gap: 9px !important;
    }

    .sidebar-nav a,
    .sidebar-nav span {
        min-height: 54px !important;
        gap: 12px !important;
        padding: 12px 15px !important;
    }

    .sidebar-nav .nav-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex-basis: 32px !important;
    }

    .sidebar-nav .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.25 !important;
    }

    .sidebar-nav .active {
        box-shadow:
            inset 4px 0 0 #e4bd4a,
            0 12px 26px rgba(0,0,0,.14) !important;
    }
}

/* Ponsel: menu 3 kolom, icon dan teks rapi tanpa saling menabrak */
@media (max-width: 900px) {
    body:not(.login-page) .sidebar-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 13px 14px 15px !important;
    }

    body:not(.login-page) .sidebar-nav a,
    body:not(.login-page) .sidebar-nav span {
        min-height: 54px !important;
        height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 8px 7px !important;
        border-radius: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        flex: 0 0 24px !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, .10) !important;
        color: #f1d16b !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon svg {
        width: 16px !important;
        height: 16px !important;
        stroke-width: 2.35 !important;
    }

    body:not(.login-page) .sidebar-nav .nav-label {
        display: inline-block !important;
        max-width: calc(100% - 31px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.05 !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon {
        color: #ffffff !important;
        background: linear-gradient(135deg, #e4bd4a, #a67f25) !important;
    }

    body:not(.login-page) .sidebar-nav a.active {
        box-shadow:
            inset 4px 0 0 #e4bd4a,
            0 10px 20px rgba(0,0,0,.14) !important;
    }
}

@media (max-width: 390px) {
    body:not(.login-page) .sidebar-nav {
        gap: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:not(.login-page) .sidebar-nav a,
    body:not(.login-page) .sidebar-nav span {
        gap: 5px !important;
        font-size: 11px !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        flex-basis: 22px !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon svg {
        width: 15px !important;
        height: 15px !important;
    }
}
/* ARISTA_TAHAP2_6_SIDEBAR_ICON_FIX_END */


/* ARISTA_TAHAP2_7_LOGIN_TITLE_ICON_ACTIVE_FIX_START
   Final polish:
   1) tulisan ARISTA di login desktop diperkecil agar tidak terpotong;
   2) background emas icon menu aktif diperbesar dan dirapikan.
*/

/* Login desktop/laptop: ARISTA tidak lagi terlalu besar */
@media (min-width: 641px) {
    .login-brand {
        overflow: hidden !important;
    }

    .brand-main {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .brand-main h1 {
        font-size: clamp(76px, 7.2vw, 98px) !important;
        line-height: .86 !important;
        letter-spacing: .045em !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    .brand-main p {
        max-width: 520px !important;
        font-size: clamp(15px, 1.35vw, 18px) !important;
        line-height: 1.36 !important;
    }
}

/* Laptop 1366px dan sejenis: ukuran dibuat paling aman */
@media (min-width: 901px) and (max-width: 1440px) {
    .brand-main h1 {
        font-size: clamp(72px, 6.9vw, 92px) !important;
        letter-spacing: .042em !important;
    }

    .brand-main p {
        max-width: 500px !important;
        font-size: 16px !important;
    }
}

/* Laptop pendek */
@media (min-width: 901px) and (max-height: 740px) {
    .brand-main h1 {
        font-size: clamp(68px, 6.5vw, 86px) !important;
    }
}

/* Ponsel tetap besar dan proporsional seperti versi yang sudah bagus */
@media (max-width: 640px) {
    .brand-main h1 {
        font-size: 64px !important;
        line-height: .88 !important;
        letter-spacing: .055em !important;
    }
}

/* Sidebar icon active: background emas diperbesar dan dibuat rata */
.sidebar-nav .nav-icon {
    position: relative !important;
    overflow: visible !important;
}

@media (min-width: 901px) {
    .sidebar-nav .nav-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex-basis: 38px !important;
        border-radius: 13px !important;
    }

    .sidebar-nav .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .sidebar-nav a.active .nav-icon {
        color: #ffffff !important;
        background:
            radial-gradient(circle at 28% 20%, rgba(255,255,255,.32), transparent 42%),
            linear-gradient(135deg, #f0c85a 0%, #d4af37 50%, #9f7924 100%) !important;
        box-shadow:
            0 12px 26px rgba(0, 0, 0, .20),
            inset 0 0 0 1px rgba(255,255,255,.25) !important;
    }

    .sidebar-nav a.active .nav-icon::before {
        content: "" !important;
        position: absolute !important;
        inset: -3px !important;
        border-radius: 16px !important;
        background: rgba(228, 189, 74, .18) !important;
        z-index: -1 !important;
    }

    .sidebar-nav a,
    .sidebar-nav span {
        gap: 14px !important;
    }
}

@media (max-width: 900px) {
    body:not(.login-page) .sidebar-nav .nav-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        flex-basis: 28px !important;
        border-radius: 10px !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon {
        background:
            radial-gradient(circle at 28% 20%, rgba(255,255,255,.32), transparent 42%),
            linear-gradient(135deg, #f0c85a 0%, #d4af37 52%, #9f7924 100%) !important;
        box-shadow:
            0 8px 17px rgba(0, 0, 0, .18),
            inset 0 0 0 1px rgba(255,255,255,.22) !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon::before {
        content: "" !important;
        position: absolute !important;
        inset: -2px !important;
        border-radius: 12px !important;
        background: rgba(228, 189, 74, .16) !important;
        z-index: -1 !important;
    }
}

@media (max-width: 390px) {
    body:not(.login-page) .sidebar-nav .nav-icon {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        flex-basis: 25px !important;
    }
}
/* ARISTA_TAHAP2_7_LOGIN_TITLE_ICON_ACTIVE_FIX_END */


/* ARISTA_TAHAP2_8_SIDEBAR_LOGOUT_FIT_FIX_START
   Perbaikan tombol Keluar Sistem agar tidak terpotong di sidebar laptop.
   Fokus: mempertahankan semua UI sebelumnya, hanya mengatur tinggi sidebar,
   area menu, profil admin, dan tombol logout.
*/

/* Desktop/laptop: sidebar dibuat flex column yang stabil */
@media (min-width: 901px) {
    body:not(.login-page) .sidebar {
        height: 100vh !important;
        max-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    body:not(.login-page) .sidebar-brand {
        flex: 0 0 auto !important;
    }

    body:not(.login-page) .sidebar-nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 12px !important;
        scrollbar-width: thin !important;
    }

    body:not(.login-page) .sidebar-nav::-webkit-scrollbar {
        width: 4px !important;
    }

    body:not(.login-page) .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .20) !important;
        border-radius: 999px !important;
    }

    body:not(.login-page) .sidebar-user {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        padding: 13px 16px 8px !important;
        border-top: 1px solid rgba(255, 255, 255, .10) !important;
    }

    body:not(.login-page) .logout-form,
    body:not(.login-page) .sidebar form[action*="logout"] {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 16px 12px !important;
        box-sizing: border-box !important;
    }

    body:not(.login-page) .logout-form .button,
    body:not(.login-page) .sidebar form[action*="logout"] button,
    body:not(.login-page) .sidebar a[href*="logout"],
    body:not(.login-page) .sidebar .button-danger {
        width: 100% !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 11px 14px !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.15 !important;
        box-sizing: border-box !important;
    }
}

/* Laptop pendek: menu sedikit dipadatkan agar logout tetap utuh */
@media (min-width: 901px) and (max-height: 760px) {
    body:not(.login-page) .sidebar-brand {
        padding-top: 13px !important;
        padding-bottom: 12px !important;
    }

    body:not(.login-page) .sidebar-nav {
        gap: 7px !important;
        padding-top: 12px !important;
        padding-bottom: 8px !important;
    }

    body:not(.login-page) .sidebar-nav a,
    body:not(.login-page) .sidebar-nav span {
        min-height: 48px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex-basis: 34px !important;
    }

    body:not(.login-page) .sidebar-user {
        padding-top: 10px !important;
        padding-bottom: 6px !important;
    }

    body:not(.login-page) .sidebar-user .avatar {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
    }

    body:not(.login-page) .sidebar-user strong {
        font-size: 15px !important;
        line-height: 1.1 !important;
    }

    body:not(.login-page) .sidebar-user span {
        font-size: 11px !important;
    }

    body:not(.login-page) .logout-form,
    body:not(.login-page) .sidebar form[action*="logout"] {
        padding-bottom: 10px !important;
    }

    body:not(.login-page) .logout-form .button,
    body:not(.login-page) .sidebar form[action*="logout"] button,
    body:not(.login-page) .sidebar a[href*="logout"],
    body:not(.login-page) .sidebar .button-danger {
        min-height: 42px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* Laptop sangat pendek: sidebar boleh scroll internal, bukan memotong logout */
@media (min-width: 901px) and (max-height: 650px) {
    body:not(.login-page) .sidebar {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body:not(.login-page) .sidebar-nav {
        overflow: visible !important;
        flex: 0 0 auto !important;
    }
}

/* Ponsel dipertahankan, tetapi logout tetap full dan tidak terpotong */
@media (max-width: 900px) {
    body:not(.login-page) .sidebar {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    body:not(.login-page) .logout-form,
    body:not(.login-page) .sidebar form[action*="logout"] {
        width: 100% !important;
        padding: 0 16px 18px !important;
        box-sizing: border-box !important;
    }

    body:not(.login-page) .logout-form .button,
    body:not(.login-page) .sidebar form[action*="logout"] button,
    body:not(.login-page) .sidebar a[href*="logout"],
    body:not(.login-page) .sidebar .button-danger {
        width: 100% !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}
/* ARISTA_TAHAP2_8_SIDEBAR_LOGOUT_FIT_FIX_END */


/* ARISTA_TAHAP2_9_SIDEBAR_ICON_CENTER_PRECISION_FIX_START
   Finishing presisi icon sidebar:
   - Semua icon memakai kotak tetap agar sejajar.
   - Icon aktif dipusatkan tepat di tengah background emas.
   - Background emas diperbesar sedikit, tetapi tidak menggeser teks.
*/

/* Reset alignment icon agar tidak dipengaruhi baseline font/SVG */
.sidebar-nav .nav-icon {
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    overflow: visible !important;
}

.sidebar-nav .nav-icon svg {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Desktop/laptop */
@media (min-width: 901px) {
    body:not(.login-page) .sidebar-nav a,
    body:not(.login-page) .sidebar-nav span {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        flex: 0 0 42px !important;
        border-radius: 15px !important;
        background: rgba(255, 255, 255, .075) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .10),
            0 7px 16px rgba(0, 0, 0, .09) !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.25 !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex-basis: 44px !important;
        border-radius: 15px !important;
        color: #ffffff !important;
        background:
            radial-gradient(circle at 30% 18%, rgba(255,255,255,.34), transparent 39%),
            linear-gradient(145deg, #f3cd5f 0%, #d4af37 48%, #a67f25 100%) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.28),
            inset 0 -2px 5px rgba(79, 54, 12, .24),
            0 11px 22px rgba(0,0,0,.20) !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon svg {
        width: 21px !important;
        height: 21px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        stroke-width: 2.35 !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon::before {
        content: none !important;
        display: none !important;
    }
}

/* Laptop pendek: tetap presisi tetapi sedikit dipadatkan */
@media (min-width: 901px) and (max-height: 760px) {
    body:not(.login-page) .sidebar-nav .nav-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex-basis: 38px !important;
        border-radius: 13px !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex-basis: 40px !important;
        border-radius: 14px !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon svg {
        width: 19px !important;
        height: 19px !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Ponsel: icon menu tetap rapi di tengah background */
@media (max-width: 900px) {
    body:not(.login-page) .sidebar-nav .nav-icon {
        width: 29px !important;
        height: 29px !important;
        min-width: 29px !important;
        flex: 0 0 29px !important;
        border-radius: 10px !important;
    }

    body:not(.login-page) .sidebar-nav .nav-icon svg {
        width: 16px !important;
        height: 16px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        flex-basis: 31px !important;
        border-radius: 11px !important;
        background:
            radial-gradient(circle at 30% 18%, rgba(255,255,255,.30), transparent 40%),
            linear-gradient(145deg, #f3cd5f 0%, #d4af37 50%, #a67f25 100%) !important;
    }

    body:not(.login-page) .sidebar-nav a.active .nav-icon::before {
        content: none !important;
        display: none !important;
    }
}
/* ARISTA_TAHAP2_9_SIDEBAR_ICON_CENTER_PRECISION_FIX_END */


/* ARISTA_TAHAP3_1_ARCHIVE_FILTER_DETAIL_UPLOAD_START
   Modul inti arsip:
   - upload file surat lokal;
   - filter jenis/unit;
   - halaman detail surat;
   - tombol file/detail di arsip.
*/
.upload-box {
    margin-top: 22px;
    padding: 18px;
    border: 1px dashed rgba(15, 124, 116, .32);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(210, 250, 244, .45), rgba(255, 255, 255, .76));
}

.upload-box > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 900;
    color: var(--text);
}

.upload-box input[type="file"] {
    margin-top: 14px;
    width: 100%;
    min-height: 48px;
    padding: 12px;
    border: 1px solid rgba(15, 124, 116, .18);
    border-radius: 14px;
    background: #fff;
}

.current-file {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 13px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(15, 124, 116, .14);
}

.current-file strong {
    display: block;
    color: var(--text);
    font-weight: 900;
}

.current-file span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.current-file-empty {
    opacity: .9;
}

.detail-panel {
    display: grid;
    gap: 22px;
}

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

.detail-grid > div {
    padding: 16px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 100%, rgba(228, 189, 74, .12), transparent 38%),
        rgba(244, 251, 249, .76);
    border: 1px solid rgba(15, 124, 116, .12);
}

.detail-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
}

.detail-grid strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.detail-text-block,
.detail-file-box {
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(15, 124, 116, .12);
}

.detail-text-block h3,
.detail-file-box h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.detail-text-block p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.row-actions {
    align-items: center;
}

@media (max-width: 1100px) {
    .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .current-file {
        align-items: stretch;
        flex-direction: column;
    }

    .current-file .button {
        width: 100%;
    }

    .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
}
/* ARISTA_TAHAP3_1_ARCHIVE_FILTER_DETAIL_UPLOAD_END */


/* ARISTA_TAHAP3_3_ARCHIVE_ROW_LAYOUT_FIX_START
   Perbaikan daftar arsip:
   - Nomor surat panjang tidak menindih kolom perihal.
   - Setiap kolom diberi min-width: 0 agar grid CSS bisa mengecil secara benar.
   - Teks panjang boleh turun baris.
   - Tombol aksi tetap rapi di kanan.
*/

.archive-item {
    grid-template-columns:
        minmax(230px, 1.08fr)
        minmax(180px, 1.05fr)
        minmax(118px, .72fr)
        minmax(74px, .42fr)
        minmax(220px, max-content) !important;
    column-gap: 22px !important;
    row-gap: 12px !important;
    align-items: center !important;
}

.archive-item > div {
    min-width: 0 !important;
}

.archive-item strong,
.archive-item span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.archive-item strong {
    line-height: 1.35 !important;
}

.archive-item span {
    line-height: 1.35 !important;
}

.archive-item .row-actions {
    min-width: 220px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.archive-item .row-actions form {
    display: inline-flex !important;
    margin: 0 !important;
}

.archive-item .row-actions .button,
.archive-item .row-actions button,
.archive-item .row-actions a {
    white-space: nowrap !important;
}

/* Laptop sedang: aksi turun ke baris sendiri agar data tidak sempit */
@media (max-width: 1280px) and (min-width: 901px) {
    .archive-item {
        grid-template-columns:
            minmax(230px, 1.1fr)
            minmax(190px, 1fr)
            minmax(120px, .65fr)
            minmax(76px, .4fr) !important;
    }

    .archive-item .row-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        padding-top: 4px !important;
    }
}

/* Tablet dan ponsel tetap stack agar tidak melebar ke kanan */
@media (max-width: 900px) {
    .archive-item {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    .archive-item .row-actions {
        min-width: 0 !important;
        justify-content: stretch !important;
    }
}
/* ARISTA_TAHAP3_3_ARCHIVE_ROW_LAYOUT_FIX_END */


/* ARISTA_TAHAP3_4_ARCHIVE_NUMBER_ONE_LINE_FIX_START
   Perbaikan daftar arsip:
   - Nomor surat diprioritaskan agar tetap 1 baris di laptop normal.
   - Kolom aksi boleh turun ke baris bawah pada layar yang kurang lebar.
   - Font nomor tetap jelas, tidak diperkecil berlebihan.
   - Jika layar benar-benar sempit, nomor baru boleh wrap secara aman.
*/

.archive-item {
    grid-template-columns:
        minmax(330px, 1.45fr)
        minmax(170px, .95fr)
        minmax(118px, .55fr)
        minmax(74px, .35fr)
        minmax(210px, max-content) !important;
    column-gap: 18px !important;
    row-gap: 12px !important;
}

.archive-item > div {
    min-width: 0 !important;
}

/* Nomor surat: prioritas 1 baris di laptop */
.archive-item > div:first-child strong {
    display: block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    letter-spacing: -0.15px !important;
    font-size: clamp(14px, 1.05vw, 16px) !important;
    line-height: 1.25 !important;
}

/* Keterangan di bawah nomor tetap kecil dan rapi */
.archive-item > div:first-child span {
    display: block !important;
    margin-top: 4px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Perihal boleh wrap, supaya nomor tidak dikorbankan */
.archive-item > div:nth-child(2) strong,
.archive-item > div:nth-child(2) span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Kolom jenis/unit dan status tetap compact */
.archive-item > div:nth-child(3) strong,
.archive-item > div:nth-child(3) span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.archive-item .row-actions {
    min-width: 210px !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Laptop sedang: aksi turun sendiri, nomor tetap diberi ruang lega */
@media (max-width: 1320px) and (min-width: 901px) {
    .archive-item {
        grid-template-columns:
            minmax(345px, 1.45fr)
            minmax(190px, 1fr)
            minmax(128px, .55fr)
            minmax(82px, .35fr) !important;
    }

    .archive-item .row-actions {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        padding-top: 2px !important;
    }

    .archive-item > div:first-child strong {
        font-size: 15px !important;
        white-space: nowrap !important;
    }
}

/* Laptop lebih sempit: masih prioritaskan nomor, tetapi boleh turun jika sangat panjang */
@media (max-width: 1120px) and (min-width: 901px) {
    .archive-item {
        grid-template-columns:
            minmax(320px, 1.35fr)
            minmax(170px, 1fr)
            minmax(118px, .55fr)
            minmax(76px, .35fr) !important;
        column-gap: 16px !important;
    }

    .archive-item > div:first-child strong {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 15px !important;
    }
}

/* Tablet dan ponsel: stack satu kolom agar tidak melebar */
@media (max-width: 900px) {
    .archive-item {
        grid-template-columns: 1fr !important;
    }

    .archive-item > div:first-child strong {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .archive-item .row-actions {
        min-width: 0 !important;
        width: 100% !important;
        justify-content: stretch !important;
    }
}
/* ARISTA_TAHAP3_4_ARCHIVE_NUMBER_ONE_LINE_FIX_END */


/* ARISTA_TAHAP3_5_ARCHIVE_ACTION_BUTTONS_FIX_START
   Perbaikan tombol aksi daftar arsip:
   - Tombol Detail/File/Edit/Batalkan/Hapus tidak lagi keluar dari panel.
   - Nomor surat tetap diprioritaskan 1 baris di laptop.
   - Tombol aksi dipindah ke baris sendiri pada daftar arsip agar layout stabil.
   - Hapus sejajar dengan tombol lain, tidak turun sendiri di sisi kanan luar.
*/

.archive-item {
    grid-template-columns:
        minmax(330px, 1.45fr)
        minmax(170px, .95fr)
        minmax(118px, .55fr)
        minmax(84px, .38fr) !important;
    column-gap: 18px !important;
    row-gap: 14px !important;
    overflow: hidden !important;
}

.archive-item > div {
    min-width: 0 !important;
}

.archive-item > div:first-child strong {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: clamp(14px, 1.05vw, 16px) !important;
    letter-spacing: -0.15px !important;
}

.archive-item .row-actions {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 9px !important;
    flex-wrap: wrap !important;
    padding-top: 2px !important;
}

.archive-item .row-actions form {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.archive-item .row-actions .button,
.archive-item .row-actions button,
.archive-item .row-actions a {
    min-height: 38px !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Jika layar laptop masih cukup lebar, tombol tetap tampak sebagai satu grup di kanan */
@media (min-width: 1200px) {
    .archive-item .row-actions {
        flex-wrap: nowrap !important;
    }
}

/* Laptop sedang: nomor tetap 1 baris, aksi tetap aman di dalam panel */
@media (max-width: 1320px) and (min-width: 901px) {
    .archive-item {
        grid-template-columns:
            minmax(330px, 1.42fr)
            minmax(180px, 1fr)
            minmax(120px, .55fr)
            minmax(82px, .36fr) !important;
    }

    .archive-item > div:first-child strong {
        font-size: 15px !important;
        white-space: nowrap !important;
    }
}

/* Laptop lebih sempit: nomor boleh wrap jika sangat terpaksa */
@media (max-width: 1120px) and (min-width: 901px) {
    .archive-item {
        grid-template-columns:
            minmax(300px, 1.35fr)
            minmax(170px, 1fr)
            minmax(118px, .55fr)
            minmax(76px, .35fr) !important;
    }

    .archive-item > div:first-child strong {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 15px !important;
    }
}

/* Ponsel/tablet: susunan tetap satu kolom */
@media (max-width: 900px) {
    .archive-item {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    .archive-item .row-actions {
        justify-content: stretch !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .archive-item .row-actions form,
    .archive-item .row-actions .button,
    .archive-item .row-actions button,
    .archive-item .row-actions a {
        width: 100% !important;
    }
}
/* ARISTA_TAHAP3_5_ARCHIVE_ACTION_BUTTONS_FIX_END */


/* ARISTA_TAHAP4_1_SETTINGS_REFERENCES_START
   Pengaturan referensi sistem:
   - jenis surat
   - unit
   - tahun akademik
   - sistem
   - akun admin
*/
.settings-section {
    margin-bottom: 22px;
}

.settings-form {
    display: grid;
    gap: 18px;
}

.add-form {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(15, 124, 116, .14);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.field-wide {
    grid-column: span 2;
}

.reference-list {
    display: grid;
    gap: 12px;
}

.reference-form {
    display: grid;
    grid-template-columns: minmax(90px, .5fr) minmax(220px, 1.2fr) minmax(86px, .42fr) minmax(86px, .36fr) minmax(240px, 1.25fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 100%, rgba(228, 189, 74, .10), transparent 38%),
        rgba(244, 251, 249, .78);
    border: 1px solid rgba(15, 124, 116, .12);
}

.reference-form .field {
    min-width: 0;
}

.reference-form label,
.settings-form label {
    font-size: 12px;
    font-weight: 900;
    color: var(--ink);
}

.toggle-field {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 124, 116, .14);
    background: #fff;
    color: var(--ink);
    font-weight: 900;
}

.toggle-field input {
    width: 16px;
    height: 16px;
    accent-color: var(--teal-800);
}

.reference-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid rgba(15, 124, 116, .12);
    background: rgba(244, 251, 249, .78);
}

.reference-row strong {
    display: block;
    color: var(--ink);
    font-weight: 950;
}

.reference-row span:not(.status) {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.reference-row form {
    margin: 0;
}

.button:disabled,
button:disabled {
    opacity: .52;
    cursor: not-allowed;
}

@media (max-width: 1280px) {
    .reference-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-form .field-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .form-grid,
    .reference-form,
    .reference-row {
        grid-template-columns: 1fr;
    }

    .field-wide {
        grid-column: auto;
    }

    .reference-form .button,
    .reference-row .button {
        width: 100%;
    }

    .settings-section .panel-header {
        gap: 12px;
    }
}
/* ARISTA_TAHAP4_1_SETTINGS_REFERENCES_END */


/* ARISTA_TAHAP4_2_SETTINGS_TABS_START
   Pengaturan dibuat seperti tab/menu sendiri-sendiri:
   - Sistem
   - Jenis Surat
   - Unit
   - Tahun Akademik
   - Akun Saya
*/
.settings-tabs {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 12px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(234, 248, 246, .92)),
        radial-gradient(circle at 0 0, rgba(228, 189, 74, .18), transparent 34%);
    border: 1px solid rgba(15, 124, 116, .14);
    box-shadow: 0 18px 48px rgba(6, 65, 61, .08);
}

.settings-tabs a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 16px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 950;
    letter-spacing: .01em;
    border: 1px solid transparent;
    background: transparent;
    transition: .18s ease;
}

.settings-tabs a:hover {
    color: var(--ink);
    background: rgba(15, 124, 116, .08);
    border-color: rgba(15, 124, 116, .12);
}

.settings-tabs a.active {
    color: #fff;
    background:
        linear-gradient(135deg, var(--teal-700), var(--teal-900));
    border-color: rgba(228, 189, 74, .36);
    box-shadow: 0 16px 34px rgba(0, 100, 94, .24);
    position: relative;
}

.settings-tabs a.active::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--gold);
    margin-right: 9px;
    box-shadow: 0 0 0 4px rgba(228, 189, 74, .16);
}

.settings-section {
    animation: settingsPanelIn .18s ease both;
}

@keyframes settingsPanelIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-section .panel-header {
    border-bottom: 1px solid rgba(15, 124, 116, .12);
    padding-bottom: 16px;
    margin-bottom: 18px;
}

.settings-section .panel-header h2 {
    margin-top: 3px;
}

@media (max-width: 900px) {
    .settings-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 10px;
        gap: 10px;
        margin-bottom: 18px;
    }

    .settings-tabs::-webkit-scrollbar {
        height: 0;
    }

    .settings-tabs a {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 16px;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .settings-section {
        margin-bottom: 16px;
    }
}
/* ARISTA_TAHAP4_2_SETTINGS_TABS_END */


/* ARISTA_TAHAP4_3_SETTINGS_CHECKBOX_UI_FIX_START
   Perbaikan visual Pengaturan:
   - Titik/lingkaran pada tab aktif dibuat lebih tegas.
   - Checkbox Aktif pada Jenis Surat dan Unit dibuat kecil, presisi, dan tidak memanjang.
   - Tampilan checkbox di ponsel tidak lagi terlalu besar.
*/

/* Tab aktif: lingkaran kiri dibuat jelas */
.settings-tabs a.active::before {
    content: "" !important;
    flex: 0 0 10px !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    border-radius: 999px !important;
    background: var(--gold) !important;
    border: 2px solid rgba(255, 255, 255, .72) !important;
    margin-right: 9px !important;
    box-shadow:
        0 0 0 4px rgba(228, 189, 74, .20),
        0 3px 8px rgba(0, 0, 0, .18) !important;
    opacity: 1 !important;
}

/* Label Aktif dibuat seperti chip compact */
.toggle-field {
    min-height: 46px !important;
    height: 46px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(15, 124, 116, .18) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--ink) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

/* Override total styling input global agar checkbox tidak menjadi kotak panjang */
.toggle-field input[type="checkbox"],
.reference-form .toggle-field input[type="checkbox"],
.settings-form .toggle-field input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 18px !important;
    display: inline-block !important;

    border: 2px solid rgba(15, 124, 116, .52) !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    accent-color: unset !important;
}

.toggle-field input[type="checkbox"]:checked,
.reference-form .toggle-field input[type="checkbox"]:checked,
.settings-form .toggle-field input[type="checkbox"]:checked {
    border-color: var(--teal-700) !important;
    background-color: var(--teal-700) !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.3 8.2 6.6 11.4 12.8 4.6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
}

.toggle-field input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(228, 189, 74, .38) !important;
    outline-offset: 3px !important;
}

/* Susunan form referensi dibuat lebih stabil di laptop */
.reference-form {
    grid-template-columns:
        minmax(90px, .55fr)
        minmax(220px, 1.2fr)
        minmax(82px, .38fr)
        minmax(104px, .42fr)
        minmax(230px, 1.15fr)
        minmax(104px, auto) !important;
    align-items: end !important;
}

.reference-form .toggle-field {
    align-self: end !important;
}

/* Ponsel: checkbox tetap kecil dan chip aktif tidak melebar aneh */
@media (max-width: 900px) {
    .settings-tabs a.active::before {
        width: 9px !important;
        height: 9px !important;
        min-width: 9px !important;
        min-height: 9px !important;
        flex-basis: 9px !important;
        margin-right: 8px !important;
    }

    .reference-form .toggle-field,
    .toggle-field {
        width: 100% !important;
        min-height: 50px !important;
        height: 50px !important;
        justify-content: flex-start !important;
        padding: 0 16px !important;
        border-radius: 16px !important;
    }

    .toggle-field input[type="checkbox"],
    .reference-form .toggle-field input[type="checkbox"],
    .settings-form .toggle-field input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        flex-basis: 18px !important;
        background-size: 13px 13px !important;
    }
}
/* ARISTA_TAHAP4_3_SETTINGS_CHECKBOX_UI_FIX_END */


/* ARISTA_TAHAP4_4_MOBILE_SETTINGS_DASHBOARD_FIX_START
   Perbaikan:
   1. Tab Pengaturan di ponsel tidak terpotong dan nyaman digeser.
   2. Form Unit/Jenis Surat di ponsel dipaksa stack satu kolom agar tidak melebar ke kanan.
   3. Checkbox Aktif tetap kecil dan rapi.
   4. Nomor surat pada dashboard ponsel digeser sedikit dan dibuat aman wrap.
*/

/* Tab Pengaturan: ponsel dibuat horizontal scroll yang benar */
@media (max-width: 900px) {
    .settings-tabs {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 10px !important;
        padding: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .settings-tabs a {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        padding: 0 18px !important;
        min-height: 46px !important;
        scroll-snap-align: start !important;
    }

    .settings-tabs a.active {
        padding-left: 16px !important;
        padding-right: 18px !important;
    }

    .settings-tabs::-webkit-scrollbar {
        height: 0 !important;
    }

    /* Panel pengaturan tidak boleh memotong isi form */
    .settings-section,
    .settings-section.panel,
    .reference-list,
    .reference-form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Form referensi dipaksa satu kolom di HP.
       Ini menimpa grid laptop supaya Unit/Jenis Surat tidak terpotong. */
    .reference-form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 20px !important;
        border-radius: 22px !important;
        min-width: 0 !important;
    }

    .reference-form .field,
    .reference-form .field-wide {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-column: auto !important;
        box-sizing: border-box !important;
    }

    .reference-form input,
    .reference-form select,
    .reference-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .reference-form .toggle-field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    .reference-form .toggle-field input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        flex: 0 0 18px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .reference-form .button,
    .reference-form button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Dashboard ponsel: nomor surat diberi ruang lebih rapi dan tidak menabrak tepi */
@media (max-width: 900px) {
    .recent-table,
    .dashboard-table,
    .table-card,
    .table-responsive {
        max-width: 100% !important;
    }

    /* Pola table responsive umum: kolom pertama/label + value */
    .recent-table td[data-label="Nomor"],
    .recent-table td:first-child,
    .dashboard-table td[data-label="Nomor"],
    .dashboard-table td:first-child {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Jika table diubah menjadi block/card oleh CSS sebelumnya, value nomor digeser sedikit ke kiri
       agar nomor panjang seperti 003/INV/.../2026 tidak terlalu mepet kanan. */
    .recent-table td::before,
    .dashboard-table td::before {
        min-width: 128px !important;
        width: 128px !important;
        padding-right: 14px !important;
    }

    .recent-table td,
    .dashboard-table td {
        grid-template-columns: 128px minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    .recent-table td[data-label="Nomor"],
    .dashboard-table td[data-label="Nomor"] {
        font-size: clamp(14px, 4vw, 16px) !important;
        line-height: 1.35 !important;
    }
}
/* ARISTA_TAHAP4_4_MOBILE_SETTINGS_DASHBOARD_FIX_END */


/* ARISTA_TAHAP4_5_MOBILE_APP_LAYOUT_START
   Mobile App Layout ala SIAKAD:
   - Desktop tetap memakai sidebar kiri.
   - Ponsel memakai header atas + bottom navigation.
   - Sidebar tidak lagi memakan ruang vertikal di ponsel.
   - Form surat dibuat satu kolom penuh dan nyaman disentuh.
   - Arsip, dashboard, dan pengaturan dibuat lebih aman di layar HP.
   - Jika browser HP memakai mode desktop dan viewport melebar, layout desktop tetap aktif.
*/

@media (max-width: 900px) {
    :root {
        --mobile-topbar-height: 88px;
        --mobile-bottomnav-height: 84px;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.app-page {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: auto !important;
        overflow: auto !important;
        padding: 0 !important;
        background:
            radial-gradient(circle at 18% 12%, rgba(16, 160, 155, .12), transparent 32%),
            radial-gradient(circle at 95% 42%, rgba(228, 189, 74, .12), transparent 28%),
            #f4f8f8 !important;
    }

    body.app-page .app-layout {
        display: block !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Header mobile */
    body.app-page .sidebar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        z-index: 90 !important;
        width: 100% !important;
        height: var(--mobile-topbar-height) !important;
        min-height: var(--mobile-topbar-height) !important;
        max-height: var(--mobile-topbar-height) !important;
        overflow: visible !important;
        display: block !important;
        color: #fff !important;
        border-radius: 0 0 24px 24px !important;
        background:
            radial-gradient(circle at 82% 30%, rgba(228, 189, 74, .18), transparent 28%),
            linear-gradient(135deg, var(--teal-800), var(--teal-950)) !important;
        box-shadow: 0 18px 44px rgba(7, 63, 67, .22) !important;
    }

    body.app-page .sidebar-brand {
        height: var(--mobile-topbar-height) !important;
        min-height: var(--mobile-topbar-height) !important;
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) 58px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    body.app-page .institution-logo-small {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        padding: 7px !important;
        border-radius: 17px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
    }

    body.app-page .sidebar-brand > div {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.app-page .sidebar-brand strong {
        display: block !important;
        color: #fff !important;
        font-size: 20px !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        letter-spacing: .01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.app-page .sidebar-brand span {
        display: block !important;
        margin-top: 4px !important;
        color: #d8f6f1 !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        font-weight: 750 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Logout mobile diposisikan seperti tombol power pada SIAKAD */
    body.app-page .sidebar-bottom {
        position: absolute !important;
        top: calc(15px + env(safe-area-inset-top, 0px)) !important;
        right: 18px !important;
        z-index: 94 !important;
        display: block !important;
        width: 54px !important;
        height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.app-page .sidebar-user {
        display: none !important;
    }

    body.app-page .sidebar-logout {
        width: 54px !important;
        height: 54px !important;
        margin: 0 !important;
    }

    body.app-page .button-logout {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        border-radius: 17px !important;
        font-size: 0 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #f43f5e, #be123c) !important;
        box-shadow: 0 14px 30px rgba(225, 29, 72, .30) !important;
    }

    body.app-page .button-logout::before {
        content: "⏻" !important;
        font-size: 25px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    /* Bottom navigation mobile */
    body.app-page .sidebar-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 92 !important;
        height: calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 2px !important;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        overflow: visible !important;
        scrollbar-width: none !important;
        border-radius: 26px 26px 0 0 !important;
        border: 1px solid rgba(15, 124, 116, .10) !important;
        background: rgba(255, 255, 255, .97) !important;
        backdrop-filter: blur(14px) !important;
        box-shadow: 0 -18px 44px rgba(7, 63, 67, .14) !important;
    }

    body.app-page .sidebar-nav::-webkit-scrollbar {
        display: none !important;
    }

    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 66px !important;
        height: 66px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 6px 3px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        color: #8a9aac !important;
        background: transparent !important;
        box-shadow: none !important;
        text-decoration: none !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body.app-page .sidebar-nav .disabled {
        opacity: .52 !important;
        cursor: not-allowed !important;
    }

    body.app-page .sidebar-nav .nav-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        flex: 0 0 30px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 14px !important;
        color: #9fb0c0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.app-page .sidebar-nav .nav-icon svg {
        width: 21px !important;
        height: 21px !important;
        stroke: currentColor !important;
        fill: none !important;
        stroke-width: 2.35 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    body.app-page .sidebar-nav .nav-label {
        max-width: 100% !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.05 !important;
    }

    body.app-page .sidebar-nav .active {
        color: var(--teal-800) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.app-page .sidebar-nav .active::after {
        display: none !important;
        content: none !important;
    }

    body.app-page .sidebar-nav .active .nav-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        flex-basis: 48px !important;
        margin-top: -26px !important;
        color: #fff !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, var(--gold-600), var(--gold-700)) !important;
        box-shadow:
            0 0 0 7px rgba(255, 255, 255, .92),
            0 15px 28px rgba(154, 118, 33, .25) !important;
    }

    body.app-page .sidebar-nav .active .nav-label {
        margin-top: -2px !important;
        color: var(--teal-800) !important;
        font-weight: 950 !important;
    }

    /* Konten mobile */
    body.app-page .content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow: visible !important;
        margin-left: 0 !important;
        padding:
            calc(var(--mobile-topbar-height) + 28px)
            18px
            calc(var(--mobile-bottomnav-height) + 34px + env(safe-area-inset-bottom, 0px))
            18px !important;
        scroll-behavior: smooth !important;
    }

    body.app-page .content > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.app-page .page-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        margin-bottom: 22px !important;
    }

    body.app-page .page-header h1 {
        font-size: clamp(32px, 9.5vw, 44px) !important;
        line-height: .98 !important;
        letter-spacing: -.05em !important;
    }

    body.app-page .page-header .button,
    body.app-page .header-actions,
    body.app-page .header-actions .button {
        width: 100% !important;
    }

    /* Dashboard mobile */
    body.app-page .stat-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    body.app-page .stat-card {
        min-height: 118px !important;
        padding: 18px 14px !important;
        border-radius: 21px !important;
        text-align: center !important;
        box-shadow: 0 10px 30px rgba(7, 63, 67, .08) !important;
    }

    body.app-page .stat-card::before {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 52px !important;
    }

    body.app-page .stat-card span {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    body.app-page .stat-card strong {
        margin-top: 10px !important;
        font-size: 30px !important;
    }

    body.app-page .stat-card small {
        display: none !important;
    }

    body.app-page .panel {
        border-radius: 24px !important;
        padding: 22px !important;
        box-shadow: 0 14px 36px rgba(7, 63, 67, .09) !important;
    }

    body.app-page .panel-header,
    body.app-page .form-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    body.app-page .panel-header .button {
        width: 100% !important;
    }

    /* Tabel dashboard diubah menjadi kartu vertikal yang lebih mobile */
    body.app-page .table-wrap {
        overflow: visible !important;
    }

    body.app-page .table-wrap table,
    body.app-page .table-wrap thead,
    body.app-page .table-wrap tbody,
    body.app-page .table-wrap th,
    body.app-page .table-wrap td,
    body.app-page .table-wrap tr {
        display: block !important;
    }

    body.app-page .table-wrap thead {
        display: none !important;
    }

    body.app-page .table-wrap tr {
        margin: 0 0 16px !important;
        padding: 18px !important;
        border: 1px solid rgba(15, 124, 116, .14) !important;
        border-radius: 22px !important;
        background:
            radial-gradient(circle at 100% 0, rgba(16, 160, 155, .07), transparent 34%),
            rgba(255, 255, 255, .96) !important;
        box-shadow: 0 12px 30px rgba(7, 63, 67, .07) !important;
    }

    body.app-page .table-wrap td {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 104px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
        padding: 9px 0 !important;
        border: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    body.app-page .table-wrap td::before {
        content: attr(data-label) !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        color: #667789 !important;
        font-size: 12px !important;
        font-weight: 950 !important;
    }

    body.app-page .table-wrap td[data-label="Nomor"] strong {
        display: block !important;
        margin-left: -2px !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 1.35 !important;
    }

    /* Form surat mobile: satu kolom, tombol besar, tanpa melebar */
    body.app-page .form-panel {
        max-width: 100% !important;
    }

    body.app-page .form-grid,
    body.app-page .filter-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    body.app-page .field-full,
    body.app-page .filter-grid .field:first-child {
        grid-column: auto !important;
    }

    body.app-page input,
    body.app-page select,
    body.app-page textarea {
        min-height: 56px !important;
        border-radius: 18px !important;
        font-size: 16px !important;
    }

    body.app-page textarea {
        min-height: 148px !important;
    }

    body.app-page .segmented {
        width: 100% !important;
        gap: 6px !important;
        padding: 6px !important;
        border-radius: 20px !important;
    }

    body.app-page .segmented span {
        min-height: 58px !important;
        border-radius: 16px !important;
        font-size: 14px !important;
        text-align: center !important;
    }

    body.app-page .placeholder-upload {
        padding: 22px 16px !important;
        border-radius: 22px !important;
        text-align: center !important;
    }

    body.app-page .form-actions,
    body.app-page .filter-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        justify-content: stretch !important;
        width: 100% !important;
    }

    body.app-page .form-actions .button,
    body.app-page .form-actions button,
    body.app-page .filter-actions .button,
    body.app-page .filter-actions button {
        width: 100% !important;
        min-height: 54px !important;
    }

    /* Arsip mobile: kartu tetap vertikal, aksi mudah ditekan */
    body.app-page .archive-list {
        display: grid !important;
        gap: 14px !important;
    }

    body.app-page .archive-item {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 13px !important;
        padding: 18px !important;
        border: 1px solid rgba(15, 124, 116, .12) !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 10px 30px rgba(7, 63, 67, .07) !important;
        overflow: visible !important;
    }

    body.app-page .archive-item > div:first-child strong {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 16px !important;
        line-height: 1.32 !important;
    }

    body.app-page .archive-item:hover {
        background: rgba(255, 255, 255, .96) !important;
    }

    body.app-page .archive-item .row-actions {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        justify-content: stretch !important;
        padding-top: 4px !important;
    }

    body.app-page .archive-item .row-actions .button,
    body.app-page .archive-item .row-actions button,
    body.app-page .archive-item .row-actions a,
    body.app-page .archive-item .row-actions form {
        width: 100% !important;
    }

    /* Pengaturan mobile */
    body.app-page .settings-tabs {
        margin-top: 0 !important;
        width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        border-radius: 22px !important;
    }

    body.app-page .reference-form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        gap: 16px !important;
    }

    body.app-page .reference-form .field,
    body.app-page .reference-form .field-wide,
    body.app-page .reference-form input,
    body.app-page .reference-form select,
    body.app-page .reference-form textarea,
    body.app-page .reference-form .button {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 520px) {
    body.app-page .content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.app-page .sidebar-brand {
        grid-template-columns: 54px minmax(0, 1fr) 56px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    body.app-page .institution-logo-small {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }

    body.app-page .sidebar-brand strong {
        font-size: 19px !important;
    }

    body.app-page .sidebar-brand span {
        font-size: 11px !important;
    }

    body.app-page .stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.app-page .stat-card {
        min-height: 108px !important;
        padding: 15px 9px !important;
    }

    body.app-page .stat-card strong {
        font-size: 27px !important;
    }

    body.app-page .panel {
        padding: 20px !important;
    }

    body.app-page .table-wrap td {
        grid-template-columns: 94px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        font-size: 10.5px !important;
    }

    body.app-page .sidebar-nav .nav-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
    }

    body.app-page .sidebar-nav .active .nav-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        flex-basis: 46px !important;
    }
}

@media (max-width: 380px) {
    body.app-page .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.app-page .sidebar-nav .nav-label {
        font-size: 9.8px !important;
    }
}
/* ARISTA_TAHAP4_5_MOBILE_APP_LAYOUT_END */


/* ARISTA_TAHAP4_6_MOBILE_BOTTOMBAR_LOGOUT_FORM_FIX_START
   Perbaikan mobile:
   - Bottom navigation dibuat lebih rendah, presisi, dan tidak menutupi tombol Terbitkan.
   - Menu aktif tidak lagi memakai gelembung putih besar yang terasa kurang pas.
   - Tombol logout mobile dibuat lingkaran.
   - Tombol Terbitkan/Simpan Draft di form surat diberi jarak aman dari bottom navigation.
*/
@media (max-width: 900px) {
    :root {
        --mobile-topbar-height: 88px;
        --mobile-bottomnav-height: 76px;
    }

    /* Ruang bawah ditambah agar tombol Terbitkan tidak tertutup bottom navigation */
    body.app-page .content {
        padding-bottom: calc(var(--mobile-bottomnav-height) + 96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Tombol logout kanan atas dibuat benar-benar lingkaran */
    body.app-page .sidebar-bottom,
    body.app-page .sidebar-logout,
    body.app-page .button-logout {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        border-radius: 999px !important;
    }

    body.app-page .button-logout {
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        background:
            radial-gradient(circle at 35% 25%, rgba(255,255,255,.18), transparent 28%),
            linear-gradient(135deg, #f43f5e, #be123c) !important;
        box-shadow: 0 14px 28px rgba(225, 29, 72, .32) !important;
    }

    body.app-page .button-logout::before {
        font-size: 24px !important;
        transform: translateY(-1px) !important;
    }

    /* Bottom bar lebih compact dan rapi */
    body.app-page .sidebar-nav {
        height: calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 2px !important;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 22px 22px 0 0 !important;
        background: rgba(255, 255, 255, .97) !important;
        border-top: 1px solid rgba(15, 124, 116, .12) !important;
        box-shadow: 0 -14px 34px rgba(7, 63, 67, .13) !important;
    }

    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        min-height: 62px !important;
        height: 62px !important;
        border-radius: 16px !important;
        gap: 4px !important;
        padding: 5px 2px !important;
        font-size: 10.5px !important;
        line-height: 1.05 !important;
    }

    body.app-page .sidebar-nav .nav-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
        border-radius: 12px !important;
        color: #8ea0b1 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.app-page .sidebar-nav .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    body.app-page .sidebar-nav .nav-label {
        font-size: 10.5px !important;
        color: #8a9aac !important;
        font-weight: 850 !important;
        max-width: 100% !important;
    }

    /* Menu aktif dibuat seperti tombol kecil, bukan balon putih besar */
    body.app-page .sidebar-nav .active {
        color: var(--teal-900) !important;
        background: rgba(15, 124, 116, .06) !important;
        border-radius: 18px !important;
    }

    body.app-page .sidebar-nav .active .nav-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        flex-basis: 36px !important;
        margin-top: 0 !important;
        border-radius: 14px !important;
        color: #fff !important;
        background:
            radial-gradient(circle at 32% 22%, rgba(255,255,255,.28), transparent 26%),
            linear-gradient(135deg, var(--gold-500), var(--gold-700)) !important;
        box-shadow: 0 8px 18px rgba(154, 118, 33, .26) !important;
    }

    body.app-page .sidebar-nav .active .nav-label {
        margin-top: 0 !important;
        color: var(--teal-900) !important;
        font-weight: 950 !important;
    }

    /* Form surat: area tombol akhir dibuat aman dan lebih rapi */
    body.app-page .form-actions {
        position: relative !important;
        z-index: 2 !important;
        margin-top: 20px !important;
        margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: 8px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.app-page .form-actions .button,
    body.app-page .form-actions button {
        width: 100% !important;
        min-height: 58px !important;
        border-radius: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.15 !important;
        font-size: 16px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    body.app-page .form-actions .button-primary,
    body.app-page .form-actions button[type="submit"]:last-child {
        box-shadow: 0 14px 28px rgba(0, 100, 94, .18) !important;
    }
}

@media (max-width: 520px) {
    body.app-page .content {
        padding-bottom: calc(var(--mobile-bottomnav-height) + 108px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.app-page .sidebar-nav {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        font-size: 10px !important;
    }

    body.app-page .sidebar-nav .nav-label {
        font-size: 10px !important;
    }
}

@media (max-width: 380px) {
    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        font-size: 9.5px !important;
    }

    body.app-page .sidebar-nav .nav-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        flex-basis: 26px !important;
    }

    body.app-page .sidebar-nav .active .nav-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        flex-basis: 34px !important;
    }
}
/* ARISTA_TAHAP4_6_MOBILE_BOTTOMBAR_LOGOUT_FORM_FIX_END */


/* ARISTA_TAHAP4_7_MOBILE_LOGOUT_CIRCLE_BOTTOMNAV_DOWN_START
   Perbaikan lanjutan mobile:
   - Tombol logout kanan atas dipaksa menjadi lingkaran penuh.
   - Bottom navigation digeser sedikit ke bawah agar lebih pas dengan layar ponsel.
*/
@media (max-width: 900px) {
    /* Parent logout tidak boleh memanjang */
    body.app-page .sidebar-bottom {
        position: absolute !important;
        top: calc(18px + env(safe-area-inset-top, 0px)) !important;
        right: 18px !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        border-radius: 9999px !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    body.app-page .sidebar-bottom form,
    body.app-page .sidebar-logout {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 9999px !important;
        overflow: visible !important;
        background: transparent !important;
    }

    body.app-page .button-logout,
    body.app-page .sidebar-bottom .button-logout,
    body.app-page .sidebar-logout .button-logout {
        box-sizing: border-box !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        aspect-ratio: 1 / 1 !important;
        display: grid !important;
        place-items: center !important;
        flex: 0 0 52px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, .20) !important;
        background:
            radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .20), transparent 29%),
            linear-gradient(135deg, #fb245e 0%, #d90445 55%, #b80f3b 100%) !important;
        box-shadow:
            0 15px 30px rgba(225, 29, 72, .34),
            inset 0 1px 0 rgba(255, 255, 255, .18) !important;
        transform: none !important;
    }

    body.app-page .button-logout::before {
        content: "⏻" !important;
        display: block !important;
        font-size: 24px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        transform: translateY(-1px) !important;
    }

    body.app-page .button-logout::after {
        display: none !important;
        content: none !important;
    }

    /* Bottom bar digeser sedikit ke bawah, tetapi tetap terlihat */
    body.app-page .sidebar-nav {
        bottom: -10px !important;
        height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        padding-top: 6px !important;
        padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 24px 24px 0 0 !important;
    }

    /* Ruang aman bawah tetap cukup setelah nav digeser turun */
    body.app-page .content {
        padding-bottom: calc(76px + 92px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 520px) {
    body.app-page .sidebar-nav {
        bottom: -12px !important;
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.app-page .content {
        padding-bottom: calc(76px + 100px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
/* ARISTA_TAHAP4_7_MOBILE_LOGOUT_CIRCLE_BOTTOMNAV_DOWN_END */


/* ARISTA_TAHAP4_8_MOBILE_BOTTOMNAV_ESTETIK_ICON_DOWN_START
   Penyempurnaan mobile bottom navigation:
   - gaya menu dibuat lebih dekat ke referensi SIAKAD mobile;
   - item aktif tidak lagi berupa kartu/pill putih besar;
   - ikon aktif dibuat bulat emas dengan halo putih;
   - ikon dan label bottom bar digeser sedikit ke bawah;
   - tetap mempertahankan tombol logout lingkaran dari tahap 4.7.
*/
@media (max-width: 900px) {
    :root {
        --mobile-bottomnav-height: 82px;
    }

    body.app-page .sidebar-nav {
        bottom: -8px !important;
        height: calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important;
        padding: 10px 8px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 2px !important;
        border-radius: 24px 24px 0 0 !important;
        border-top: 1px solid rgba(15, 124, 116, .10) !important;
        background: rgba(255, 255, 255, .98) !important;
        backdrop-filter: blur(14px) !important;
        box-shadow: 0 -16px 38px rgba(7, 63, 67, .12) !important;
    }

    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        min-height: 60px !important;
        height: 60px !important;
        padding: 10px 2px 4px !important;
        gap: 4px !important;
        border-radius: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        justify-content: flex-start !important;
        transform: translateY(3px) !important;
    }

    body.app-page .sidebar-nav .nav-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
        color: #94a3b8 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(2px) !important;
    }

    body.app-page .sidebar-nav .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.25 !important;
    }

    body.app-page .sidebar-nav .nav-label {
        font-size: 10.5px !important;
        font-weight: 850 !important;
        color: #90a0b2 !important;
        line-height: 1.05 !important;
        transform: translateY(2px) !important;
    }

    body.app-page .sidebar-nav .active,
    body.app-page .sidebar-nav a.active,
    body.app-page .sidebar-nav span.active {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: translateY(3px) !important;
    }

    body.app-page .sidebar-nav .active::before,
    body.app-page .sidebar-nav .active::after,
    body.app-page .sidebar-nav a.active::before,
    body.app-page .sidebar-nav a.active::after {
        display: none !important;
        content: none !important;
    }

    body.app-page .sidebar-nav .active .nav-icon,
    body.app-page .sidebar-nav a.active .nav-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
        margin-top: -14px !important;
        transform: translateY(0) !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        background:
            radial-gradient(circle at 32% 22%, rgba(255,255,255,.30), transparent 28%),
            linear-gradient(135deg, var(--gold-500), var(--gold-700)) !important;
        box-shadow:
            0 0 0 6px rgba(255,255,255,.98),
            0 12px 22px rgba(166, 127, 37, .24) !important;
    }

    body.app-page .sidebar-nav .active .nav-icon svg,
    body.app-page .sidebar-nav a.active .nav-icon svg {
        width: 19px !important;
        height: 19px !important;
        stroke-width: 2.35 !important;
    }

    body.app-page .sidebar-nav .active .nav-label,
    body.app-page .sidebar-nav a.active .nav-label {
        color: var(--teal-850, #0f6f71) !important;
        font-weight: 950 !important;
        transform: translateY(0) !important;
        margin-top: 2px !important;
    }

    body.app-page .content {
        padding-bottom: calc(var(--mobile-bottomnav-height) + 96px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 520px) {
    body.app-page .sidebar-nav {
        bottom: -10px !important;
        padding: 10px 7px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        min-height: 58px !important;
        height: 58px !important;
        padding-top: 10px !important;
    }

    body.app-page .sidebar-nav .nav-label {
        font-size: 10px !important;
    }

    body.app-page .content {
        padding-bottom: calc(var(--mobile-bottomnav-height) + 102px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 380px) {
    body.app-page .sidebar-nav .nav-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        flex-basis: 26px !important;
    }

    body.app-page .sidebar-nav .active .nav-icon,
    body.app-page .sidebar-nav a.active .nav-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
        margin-top: -12px !important;
        box-shadow:
            0 0 0 5px rgba(255,255,255,.98),
            0 10px 20px rgba(166, 127, 37, .22) !important;
    }
}
/* ARISTA_TAHAP4_8_MOBILE_BOTTOMNAV_ESTETIK_ICON_DOWN_END */




/* ARISTA_TAHAP4_9_MOBILE_LOGOUT_ICON_BOTTOMNAV_RAPI_START
   Penyempurnaan mobile:
   - tombol logout kanan atas memakai ikon power/switch yang lebih tegas;
   - bottom navigation dirapikan lagi agar lebih proporsional dan estetik;
   - item aktif tetap beraksen emas, namun lebih presisi dan tidak terlalu ramai.
*/
@media (max-width: 900px) {
    /* Logout kanan atas: tetap lingkaran, ikon switch dibuat lebih jelas */
    body.app-page .sidebar-bottom {
        top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        right: 16px !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }

    body.app-page .sidebar-bottom form,
    body.app-page .sidebar-logout,
    body.app-page .button-logout,
    body.app-page .sidebar-bottom .button-logout,
    body.app-page .sidebar-logout .button-logout {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        border-radius: 999px !important;
    }

    body.app-page .button-logout,
    body.app-page .sidebar-bottom .button-logout,
    body.app-page .sidebar-logout .button-logout {
        position: relative !important;
        border: 1px solid rgba(255,255,255,.24) !important;
        background:
            radial-gradient(circle at 32% 22%, rgba(255,255,255,.24), transparent 30%),
            linear-gradient(135deg, #ff2064 0%, #e20d4d 58%, #b70d39 100%) !important;
        box-shadow:
            0 14px 26px rgba(220, 20, 73, .26),
            inset 0 1px 0 rgba(255,255,255,.16) !important;
        font-size: 0 !important;
        color: transparent !important;
    }

    body.app-page .button-logout::before,
    body.app-page .sidebar-bottom .button-logout::before,
    body.app-page .sidebar-logout .button-logout::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        margin: auto !important;
        width: 26px !important;
        height: 26px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 26px 26px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.36 5.64a9 9 0 1 1-12.73 0'/%3E%3C/svg%3E") !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        display: block !important;
    }

    body.app-page .button-logout::after,
    body.app-page .sidebar-bottom .button-logout::after,
    body.app-page .sidebar-logout .button-logout::after {
        display: none !important;
        content: none !important;
    }

    /* Bottom nav dibuat lebih rapi dan mirip pola aplikasi mobile */
    :root {
        --mobile-bottomnav-height: 80px;
    }

    body.app-page .sidebar-nav {
        bottom: -4px !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important;
        padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 0 !important;
        border-radius: 26px 26px 0 0 !important;
        border-top: 1px solid rgba(15,124,116,.10) !important;
        background: rgba(255,255,255,.985) !important;
        box-shadow: 0 -12px 28px rgba(7,63,67,.10) !important;
        backdrop-filter: blur(14px) !important;
    }

    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        min-height: 58px !important;
        height: 58px !important;
        padding: 8px 2px 4px !important;
        gap: 5px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        border-radius: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(2px) !important;
    }

    body.app-page .sidebar-nav .nav-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        flex-basis: 26px !important;
        color: #94a3b8 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(2px) !important;
    }

    body.app-page .sidebar-nav .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.2 !important;
    }

    body.app-page .sidebar-nav .nav-label {
        font-size: 10.5px !important;
        line-height: 1.05 !important;
        font-weight: 860 !important;
        letter-spacing: -.01em !important;
        color: #8b9aac !important;
        transform: translateY(2px) !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.app-page .sidebar-nav .active,
    body.app-page .sidebar-nav a.active,
    body.app-page .sidebar-nav span.active {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: translateY(1px) !important;
    }

    body.app-page .sidebar-nav .active::before,
    body.app-page .sidebar-nav .active::after,
    body.app-page .sidebar-nav a.active::before,
    body.app-page .sidebar-nav a.active::after {
        display: none !important;
        content: none !important;
    }

    body.app-page .sidebar-nav .active .nav-icon,
    body.app-page .sidebar-nav a.active .nav-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        flex-basis: 42px !important;
        margin-top: -10px !important;
        transform: translateY(0) !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        background:
            radial-gradient(circle at 32% 22%, rgba(255,255,255,.30), transparent 28%),
            linear-gradient(135deg, var(--gold-500), var(--gold-700)) !important;
        box-shadow:
            0 0 0 5px rgba(255,255,255,.98),
            0 12px 18px rgba(166,127,37,.20) !important;
    }

    body.app-page .sidebar-nav .active .nav-icon svg,
    body.app-page .sidebar-nav a.active .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.35 !important;
    }

    body.app-page .sidebar-nav .active .nav-label,
    body.app-page .sidebar-nav a.active .nav-label {
        color: var(--teal-850, #0f6f71) !important;
        font-weight: 950 !important;
        margin-top: 1px !important;
        transform: translateY(0) !important;
    }

    body.app-page .content {
        padding-bottom: calc(var(--mobile-bottomnav-height) + 98px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 520px) {
    body.app-page .sidebar-nav {
        bottom: -6px !important;
        padding: 8px 8px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        min-height: 56px !important;
        height: 56px !important;
        gap: 4px !important;
        padding-top: 8px !important;
    }

    body.app-page .sidebar-nav .nav-label {
        font-size: 10px !important;
    }

    body.app-page .sidebar-nav .active .nav-icon,
    body.app-page .sidebar-nav a.active .nav-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
        margin-top: -8px !important;
    }

    body.app-page .content {
        padding-bottom: calc(var(--mobile-bottomnav-height) + 104px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 380px) {
    body.app-page .sidebar-bottom,
    body.app-page .sidebar-bottom form,
    body.app-page .sidebar-logout,
    body.app-page .button-logout,
    body.app-page .sidebar-bottom .button-logout,
    body.app-page .sidebar-logout .button-logout {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }

    body.app-page .button-logout::before,
    body.app-page .sidebar-bottom .button-logout::before,
    body.app-page .sidebar-logout .button-logout::before {
        width: 24px !important;
        height: 24px !important;
        background-size: 24px 24px !important;
    }

    body.app-page .sidebar-nav .nav-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        flex-basis: 24px !important;
    }

    body.app-page .sidebar-nav .active .nav-icon,
    body.app-page .sidebar-nav a.active .nav-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
        margin-top: -7px !important;
        box-shadow:
            0 0 0 4px rgba(255,255,255,.98),
            0 10px 16px rgba(166,127,37,.18) !important;
    }
}
/* ARISTA_TAHAP4_9_MOBILE_LOGOUT_ICON_BOTTOMNAV_RAPI_END */


/* ARISTA_TAHAP4_10_MOBILE_DESKTOPMODE_LOGOUT_SIZE_START
   Perbaikan:
   1. Saat browser HP memakai mode desktop, layout tetap dipaksa memakai mobile shell
      agar sidebar tidak berubah menjadi blok hijau besar.
   2. Tombol logout/power kanan atas diperkecil agar tidak terlalu dominan.
   3. Bottom navigation diseimbangkan ulang agar tetap rapi pada mode normal maupun mode desktop HP.
*/
@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1180px) {
    :root {
        --mobile-topbar-height: 86px;
        --mobile-bottomnav-height: 78px;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.app-page {
        min-height: 100dvh !important;
        height: auto !important;
        overflow: auto !important;
        padding: 0 !important;
        background:
            radial-gradient(circle at 14% 8%, rgba(16,160,155,.12), transparent 32%),
            radial-gradient(circle at 92% 44%, rgba(228,189,74,.10), transparent 30%),
            #f4f8f8 !important;
    }

    body.app-page .app-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
    }

    /* Force header mobile juga ketika HP membuka "Desktop site" */
    body.app-page .sidebar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        z-index: 90 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--mobile-topbar-height) !important;
        min-height: var(--mobile-topbar-height) !important;
        max-height: var(--mobile-topbar-height) !important;
        overflow: visible !important;
        display: block !important;
        border-radius: 0 0 24px 24px !important;
        background:
            radial-gradient(circle at 84% 30%, rgba(228,189,74,.16), transparent 26%),
            linear-gradient(135deg, var(--teal-800), var(--teal-950)) !important;
        box-shadow: 0 16px 34px rgba(7,63,67,.20) !important;
    }

    body.app-page .sidebar-brand {
        box-sizing: border-box !important;
        height: var(--mobile-topbar-height) !important;
        min-height: var(--mobile-topbar-height) !important;
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: calc(11px + env(safe-area-inset-top, 0px)) 18px 11px !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.app-page .institution-logo-small {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        padding: 7px !important;
        border-radius: 17px !important;
        background: #fff !important;
        box-shadow: 0 12px 24px rgba(0,0,0,.16) !important;
    }

    body.app-page .sidebar-brand > div {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.app-page .sidebar-brand strong {
        display: block !important;
        font-size: 19px !important;
        line-height: 1.05 !important;
        color: #fff !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.app-page .sidebar-brand span {
        display: block !important;
        margin-top: 4px !important;
        font-size: 11.5px !important;
        line-height: 1.15 !important;
        color: #d8f6f1 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.app-page .sidebar-user {
        display: none !important;
    }

    /* Logout diperkecil: tidak lagi terlalu besar */
    body.app-page .sidebar-bottom {
        position: absolute !important;
        top: calc(18px + env(safe-area-inset-top, 0px)) !important;
        right: 18px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        overflow: visible !important;
        background: transparent !important;
        z-index: 94 !important;
    }

    body.app-page .sidebar-bottom form,
    body.app-page .sidebar-logout,
    body.app-page .button-logout,
    body.app-page .sidebar-bottom .button-logout,
    body.app-page .sidebar-logout .button-logout {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        border-radius: 999px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.app-page .button-logout,
    body.app-page .sidebar-bottom .button-logout,
    body.app-page .sidebar-logout .button-logout {
        position: relative !important;
        display: grid !important;
        place-items: center !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        border: 1px solid rgba(255,255,255,.22) !important;
        background:
            radial-gradient(circle at 32% 22%, rgba(255,255,255,.22), transparent 30%),
            linear-gradient(135deg, #ff2764 0%, #df0d4a 58%, #b70d39 100%) !important;
        box-shadow:
            0 12px 22px rgba(220,20,73,.24),
            inset 0 1px 0 rgba(255,255,255,.16) !important;
        overflow: hidden !important;
    }

    body.app-page .button-logout::before,
    body.app-page .sidebar-bottom .button-logout::before,
    body.app-page .sidebar-logout .button-logout::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        margin: auto !important;
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 22px 22px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.36 5.64a9 9 0 1 1-12.73 0'/%3E%3C/svg%3E") !important;
    }

    body.app-page .button-logout::after,
    body.app-page .sidebar-bottom .button-logout::after,
    body.app-page .sidebar-logout .button-logout::after {
        display: none !important;
        content: none !important;
    }

    /* Bottom navigation: rapi di mode mobile dan desktop-site HP */
    body.app-page .sidebar-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -6px !important;
        z-index: 92 !important;
        width: 100% !important;
        height: calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0 !important;
        padding: 8px 8px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        border: 1px solid rgba(15,124,116,.09) !important;
        background: rgba(255,255,255,.985) !important;
        box-shadow: 0 -12px 28px rgba(7,63,67,.10) !important;
        backdrop-filter: blur(14px) !important;
        overflow: visible !important;
    }

    body.app-page .sidebar-nav a,
    body.app-page .sidebar-nav span {
        min-width: 0 !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 8px 2px 4px !important;
        border-radius: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(2px) !important;
        text-decoration: none !important;
        overflow: visible !important;
    }

    body.app-page .sidebar-nav .nav-icon {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        min-height: 25px !important;
        flex: 0 0 25px !important;
        display: grid !important;
        place-items: center !important;
        color: #94a3b8 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(2px) !important;
    }

    body.app-page .sidebar-nav .nav-icon svg {
        width: 19px !important;
        height: 19px !important;
        stroke-width: 2.25 !important;
        stroke: currentColor !important;
    }

    body.app-page .sidebar-nav .nav-label {
        display: block !important;
        max-width: 100% !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        font-weight: 860 !important;
        color: #8b9aac !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transform: translateY(2px) !important;
    }

    body.app-page .sidebar-nav .active,
    body.app-page .sidebar-nav a.active,
    body.app-page .sidebar-nav span.active {
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(1px) !important;
    }

    body.app-page .sidebar-nav .active .nav-icon,
    body.app-page .sidebar-nav a.active .nav-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
        margin-top: -7px !important;
        border-radius: 999px !important;
        color: #fff !important;
        background:
            radial-gradient(circle at 32% 22%, rgba(255,255,255,.28), transparent 28%),
            linear-gradient(135deg, var(--gold-500), var(--gold-700)) !important;
        box-shadow:
            0 0 0 5px rgba(255,255,255,.98),
            0 10px 16px rgba(166,127,37,.18) !important;
        transform: translateY(0) !important;
    }

    body.app-page .sidebar-nav .active .nav-icon svg,
    body.app-page .sidebar-nav a.active .nav-icon svg {
        width: 19px !important;
        height: 19px !important;
    }

    body.app-page .sidebar-nav .active .nav-label,
    body.app-page .sidebar-nav a.active .nav-label {
        color: var(--teal-850, #0f6f71) !important;
        font-weight: 950 !important;
        margin-top: 1px !important;
        transform: translateY(0) !important;
    }

    body.app-page .content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        margin-left: 0 !important;
        overflow: visible !important;
        padding:
            calc(var(--mobile-topbar-height) + 26px)
            18px
            calc(var(--mobile-bottomnav-height) + 104px + env(safe-area-inset-bottom, 0px))
            18px !important;
    }
}

@media (max-width: 380px) {
    body.app-page .sidebar-brand {
        grid-template-columns: 50px minmax(0, 1fr) 50px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.app-page .sidebar-bottom,
    body.app-page .sidebar-bottom form,
    body.app-page .sidebar-logout,
    body.app-page .button-logout,
    body.app-page .sidebar-bottom .button-logout,
    body.app-page .sidebar-logout .button-logout {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }

    body.app-page .button-logout::before,
    body.app-page .sidebar-bottom .button-logout::before,
    body.app-page .sidebar-logout .button-logout::before {
        width: 21px !important;
        height: 21px !important;
        background-size: 21px 21px !important;
    }
}
/* ARISTA_TAHAP4_10_MOBILE_DESKTOPMODE_LOGOUT_SIZE_END */


/* ARISTA_TAHAP5_1_REKAP_SURAT_START */
.recap-filter {
    margin-bottom: 22px;
}

.recap-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 22px 0;
}

.recap-panel {
    overflow: hidden;
}

.recap-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 16px;
}

.recap-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.recap-table th,
.recap-table td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(15, 124, 116, .12);
    text-align: left;
    vertical-align: middle;
}

.recap-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
}

.recap-table td strong {
    color: var(--ink);
    font-weight: 950;
}

.recap-table td span {
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1180px) {
    .recap-grid-two {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

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

    .recap-table-wrap {
        overflow: visible !important;
    }

    .recap-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .recap-table,
    .recap-table thead,
    .recap-table tbody,
    .recap-table tr,
    .recap-table th,
    .recap-table td {
        display: block !important;
    }

    .recap-table thead {
        display: none !important;
    }

    .recap-table tr {
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(15, 124, 116, .12) !important;
    }

    .recap-table td {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 8px 0 !important;
        border-bottom: 0 !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .recap-table td::before {
        content: attr(data-label) !important;
        color: #667789 !important;
        font-size: 12px !important;
        font-weight: 950 !important;
    }

    .recap-filter .filter-actions {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 420px) {
    .recap-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
/* ARISTA_TAHAP5_1_REKAP_SURAT_END */