html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================================
   RESET & SHARED - dipakai lintas halaman custom (Login, Home,
   Pengajuan Kas, Profil). Semua selector spesifik-halaman di bawah
   ini SENGAJA diberi prefix "body.page-xxx" supaya tidak bocor ke
   halaman yang pakai _Layout.cshtml + Bootstrap (Admin/Employees,
   Privacy, Error) yang juga memuat site.css ini.
   ============================================================ */
html, body { margin:0; height:100%; }

.en { font-weight:400; font-size:11px; color:#9aa2b1; font-style:italic; }
.hidden { display:none !important; }

@keyframes fadeInUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
/* Gradasi latar bernapas pelan; lapisan pertama (wave.svg) tetap diam di center top. */
@keyframes napasWave {
  0%,100%{background-position:center top, 0% 0%, 0% 100%, 0% 0%}
  50%    {background-position:center top, 6% 4%, 4% 96%, 0% 0%}
}
/* Latar bersama seluruh halaman custom: wave.svg (cover, rata atas) di atas
   gradasi navy. Satu sumber - jangan diulang di tiap body.page-xxx. */
body.page-login,
body.page-home,
body.page-pengajuan-kas,
body.page-profile,
body.page-employees {
  background:
    url('../img/wave.svg') center top / cover no-repeat,
    radial-gradient(1100px 620px at 90% -14%, rgba(197,160,89,.20), transparent 58%),
    radial-gradient(880px 540px at 2% 112%, rgba(20,74,158,.34), transparent 60%),
    linear-gradient(168deg, #05173a 0%, #072250 46%, #030e26 100%);
  background-attachment: fixed;
}
@keyframes naik { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes kilat { 0%{background-position:-180% 0} 100%{background-position:180% 0} }

/* ============================================================
   HALAMAN LOGIN (Pages/Login.cshtml)
   ============================================================ */
body.page-login {
  --login-primary: #183E7C;
  --login-dark: #0f2a57;
  --login-bg: #f3f6fb;
  --login-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin:0; min-height:100vh; color:#222;
  font-family: var(--login-font);
  -webkit-font-smoothing: antialiased;
}
body.page-login * { box-sizing: border-box; }
body.page-login .login-page {
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 16px;
}
body.page-login .auth-card {
  width:100%; max-width:540px; border-radius:24px; overflow:hidden;
  background: linear-gradient(0deg, rgba(24,62,124,.04), rgba(24,62,124,.04)), rgba(255,255,255,.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow: 0 24px 60px rgba(24,62,124,.28), 0 2px 8px rgba(24,62,124,.12);
  animation: fadeInUp .4s cubic-bezier(.2,.7,.3,1) both;
}
body.page-login .auth-card__header {
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:28px 32px; background:var(--login-bg);
  border-bottom:1px solid rgba(24,62,124,.1);
}
body.page-login .auth-card__brand-badge {
  width:64px; height:64px; flex:none; border-radius:16px; background:var(--login-primary);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-weight:700; font-size:22px; letter-spacing:.5px;
  box-shadow:0 8px 20px rgba(24,62,124,.3);
}
body.page-login .auth-card__brand-text { display:flex; flex-direction:column; line-height:1.15; color:var(--login-dark); }
body.page-login .auth-card__brand-sub { font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--login-primary); }
body.page-login .auth-card__brand-name { font-size:24px; font-weight:700; letter-spacing:-.2px; }
body.page-login .auth-card__body { padding:28px 32px 32px; }
body.page-login .auth-card__eyebrow {
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--login-primary); margin-bottom:8px;
}
body.page-login .auth-card__title { margin:0 0 8px; font-size:1.5rem; font-weight:700; color:var(--login-dark); }
body.page-login .auth-card__subtitle { margin:0 0 24px; font-size:.9rem; line-height:1.6; color:#57657a; }
body.page-login .auth-field { display:block; margin-bottom:20px; }
body.page-login .auth-field__label { display:block; font-size:.8rem; font-weight:600; color:#33455e; margin-bottom:6px; }
body.page-login .auth-field__control { position:relative; display:block; }
body.page-login .auth-field__icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:#8a97ab; pointer-events:none;
}
body.page-login .auth-field__control input {
  width:100%; padding:10px 12px 10px 40px; border-radius:10px; border:1px solid #cbd5e4;
  font-size:.95rem; font-family:var(--login-font); background:#fff; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.page-login .auth-field__control input:focus { border-color:var(--login-primary); box-shadow:0 0 0 3px rgba(24,62,124,.15); }
body.page-login .auth-field__otp-input { letter-spacing:.5em; font-variant-numeric:tabular-nums; }
body.page-login .auth-button {
  width:100%; padding:12px 16px; border:none; border-radius:10px; background:var(--login-primary);
  color:#fff; font-size:.95rem; font-weight:600; font-family:var(--login-font); cursor:pointer;
  transition: filter .12s ease, transform .1s ease;
}
body.page-login .auth-button:hover:not(:disabled) { filter:brightness(1.1); }
body.page-login .auth-button:active:not(:disabled) { transform:scale(.98); }
body.page-login .auth-button:disabled { background:#9db0d3; cursor:not-allowed; }
body.page-login .auth-resend {
  display:block; width:100%; margin-top:16px; padding:0; border:none; background:none;
  color:var(--login-primary); font-size:.85rem; font-weight:600; font-family:var(--login-font);
  cursor:pointer; text-align:center;
}
body.page-login .auth-resend:disabled { color:#9aa7bb; cursor:not-allowed; }
body.page-login .auth-chip {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(24,62,124,.08); border-radius:10px; padding:10px 14px; margin-bottom:20px;
  font-size:.9rem; color:var(--login-dark); word-break:break-all;
}
body.page-login .auth-chip__change {
  border:none; background:none; color:var(--login-primary); font-weight:600; font-size:.85rem;
  font-family:var(--login-font); cursor:pointer; padding:0; flex:none;
}
body.page-login .auth-banner { border-radius:10px; padding:10px 14px; margin-bottom:20px; font-size:.85rem; line-height:1.5; }
body.page-login .auth-banner--error { background:#fdf1f2; color:#9f1c2e; border:1px solid #f3c6cc; }
body.page-login .auth-banner--success { background:#edf9f2; color:#146c43; border:1px solid #bfe6cf; }
body.page-login .login-footer { margin-top:20px; text-align:center; font-size:12px; color:rgba(255,255,255,.75); }
@media (max-width:560px) {
  body.page-login .auth-card__header { padding:20px; gap:12px; }
  body.page-login .auth-card__brand-badge { width:52px; height:52px; font-size:18px; border-radius:13px; }
  body.page-login .auth-card__brand-name { font-size:19px; }
  body.page-login .auth-card__brand-sub { font-size:13px; }
  body.page-login .auth-card__body { padding:24px 20px 24px; }
}

/* ============================================================
   HALAMAN HOME (Pages/Index.cshtml)
   ============================================================ */
body.page-home {
  box-sizing: border-box;
  font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  min-height:100vh;
  padding:58px 46px 46px;
  -webkit-font-smoothing:antialiased;
  animation:napasWave 22s ease-in-out infinite;
}
body.page-home * { box-sizing: border-box; }
body.page-home .w { max-width:1010px; margin:0 auto; }

body.page-home .anim { opacity:0; animation:naik .62s cubic-bezier(.2,.7,.3,1) forwards; }
body.page-home .d1 { animation-delay:.05s; } body.page-home .d2 { animation-delay:.16s; } body.page-home .d3 { animation-delay:.26s; }
body.page-home .d4 { animation-delay:.34s; } body.page-home .d5 { animation-delay:.42s; } body.page-home .d6 { animation-delay:.50s; } body.page-home .d7 { animation-delay:.58s; }

body.page-home .head { display:flex; align-items:center; flex-wrap:wrap; gap:17px; margin-bottom:40px; }
body.page-home .brandblock { display:flex; align-items:center; gap:17px; }
body.page-home .logo {
  width:56px; height:56px; border-radius:16px; flex:0 0 56px;
  background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; font-weight:800; font-size:17px;
  display:flex; align-items:center; justify-content:center; letter-spacing:.5px;
  box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.1);
}
body.page-home .brand { font-size:11px; font-weight:700; letter-spacing:.32em; color:rgba(255,255,255,.5); }
body.page-home .title { font-size:20px; font-weight:700; color:#fff; margin-top:3px; letter-spacing:-.1px; }

body.page-home .right { margin-left:auto; display:flex; align-items:center; gap:14px; }
body.page-home .userinfo { text-align:right; }
body.page-home .userinfo .uname { font-size:13.5px; font-weight:700; color:#fff; }
body.page-home .userinfo .urole { font-size:11px; color:rgba(255,255,255,.5); margin-top:2px; }
body.page-home .logoutBtn {
  padding:9px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08); color:#fff; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background .2s, border-color .2s;
}
body.page-home .logoutBtn:hover { background:rgba(255,255,255,.16); border-color:rgba(197,160,89,.5); }

body.page-home .hero {
  display:flex; align-items:center; gap:21px; padding:25px 27px; border-radius:19px;
  background:linear-gradient(120deg,rgba(255,255,255,.105),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.15); position:relative; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), border-color .26s, box-shadow .26s;
}
body.page-home .hero::after {
  content:''; position:absolute; top:0; bottom:0; left:0; width:3px;
  background:linear-gradient(180deg,#c5a059,rgba(197,160,89,.1));
}
body.page-home .hero:hover { transform:translateY(-3px); border-color:rgba(197,160,89,.45); box-shadow:0 22px 54px rgba(0,0,0,.34); }
body.page-home .hero:focus-visible { outline:2px solid #c5a059; outline-offset:3px; }
body.page-home .hero .g {
  width:54px; height:54px; border-radius:16px; flex:0 0 54px;
  background:linear-gradient(135deg,#d3ac60,#a5813d); color:#06183a; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center; letter-spacing:.5px;
  box-shadow:0 10px 26px rgba(197,160,89,.34);
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
body.page-home .hero:hover .g { transform:scale(1.07); }
body.page-home .hero .t { font-size:17.5px; font-weight:700; color:#fff; }
body.page-home .hero .d { font-size:12.5px; color:rgba(255,255,255,.6); margin-top:3px; line-height:1.55; }
body.page-home .hero .go {
  margin-left:auto; padding:11px 23px; border-radius:11px; background:#fff; color:#072250;
  font-size:13px; font-weight:600; white-space:nowrap;
  transition:transform .2s, box-shadow .2s;
}
body.page-home .hero:hover .go { transform:translateX(3px); box-shadow:0 8px 22px rgba(0,0,0,.28); }

body.page-home .cap {
  font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.38); margin:30px 0 13px;
}
body.page-home .gr { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
body.page-home .c {
  padding:21px 18px 16px; border-radius:16px; text-decoration:none; display:block; color:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.0278),rgba(255,255,255,.26));
  border:1px solid rgba(255,255,255,.105); position:relative; overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), border-color .26s, box-shadow .26s;
}
body.page-home .c::before {
  content:''; position:absolute; top:0; right:0; bottom:0; left:0; opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.09) 50%,transparent 62%);
  background-size:220% 100%; transition:opacity .2s; pointer-events:none;
}
body.page-home .c:hover::before { opacity:1; animation:kilat .85s ease-out; }
body.page-home .c:hover { transform:translateY(-5px); border-color:rgba(197,160,89,.42); box-shadow:0 20px 46px rgba(0,0,0,.34); }
body.page-home .c:focus-visible { outline:2px solid #c5a059; outline-offset:3px; }
body.page-home .c .g {
  width:41px; height:41px; border-radius:12px; color:#fff; font-weight:700; font-size:13.5px;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; letter-spacing:.5px;
  background:rgba(255,255,255,.095); border:1px solid rgba(255,255,255,.17);
  transition:background .26s, border-color .26s, transform .26s, color .26s;
}
body.page-home .c:hover .g { background:linear-gradient(135deg,#d3ac60,#a5813d); border-color:transparent; color:#06183a; transform:scale(1.06); }
body.page-home .c .t { font-size:13.5px; font-weight:700; color:#fff; line-height:1.3; }
body.page-home .c .d { font-size:10.5px; color:rgba(255,255,255,.48); margin-top:5px; min-height:32px; line-height:1.55; }
body.page-home .c .k {
  margin-top:13px; padding-top:11px; border-top:1px solid rgba(255,255,255,.09);
  font-size:11px; color:rgba(197,160,89,.85); font-weight:600; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:space-between;
  transition:color .26s;
}
body.page-home .c .k span { transition:transform .26s; font-size:20px; }
body.page-home .c:hover .k { color:#d3ac60; }
body.page-home .c:hover .k span { transform:translateX(4px); }

body.page-home .ft { margin-top:38px; text-align:center; font-size:10.5px; color:rgba(255,255,255,.28); letter-spacing:.04em; }

@media(max-width:880px) {
  body.page-home { padding:40px 22px 34px; }
  body.page-home .title { font-size:16.5px; }
  body.page-home .head { gap:13px; }
  body.page-home .gr { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px) {
  body.page-home .right { margin-left:0; width:100%; justify-content:space-between; }
  body.page-home .hero { flex-direction:column; align-items:flex-start; gap:15px; }
  body.page-home .hero .go { width:100%; text-align:center; margin-left:0; }
  body.page-home .gr { grid-template-columns:1fr; }
  body.page-home .c .d { min-height:0; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-home * { animation:none !important; transition:none !important; }
  body.page-home .anim { opacity:1; }
}

/* ============================================================
   HALAMAN PENGAJUAN KAS (Pages/PengajuanKas.cshtml)
   ============================================================ */
body.page-pengajuan-kas {
  box-sizing: border-box;
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  min-height:100vh; color:#222;
  padding:46px 46px 46px;
  -webkit-font-smoothing: antialiased;
  animation:napasWave 22s ease-in-out infinite;
}
body.page-pengajuan-kas * { box-sizing: border-box; }
body.page-pengajuan-kas .wrap { max-width: 1200px; margin: 0 auto; }
body.page-pengajuan-kas .card {
  background:#fff; border-radius:14px; padding:24px; margin-bottom:16px;
  box-shadow:0 20px 54px rgba(0,0,0,.28);
  animation: fadeInUp .32s cubic-bezier(.2,.7,.3,1) both;
}
body.page-pengajuan-kas h2 { font-size:12px; margin:22px 0 10px; color:#8a93a5; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
body.page-pengajuan-kas h2 .en { text-transform:none; letter-spacing:0; margin-left:4px; }

body.page-pengajuan-kas .head { display:flex; align-items:center; flex-wrap:wrap; gap:17px; margin-bottom:24px; }
body.page-pengajuan-kas .brandblock { display:flex; align-items:center; gap:17px; }
body.page-pengajuan-kas .logo {
  width:52px; height:52px; border-radius:15px; flex:0 0 52px;
  background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; font-weight:800; font-size:16px;
  display:flex; align-items:center; justify-content:center; letter-spacing:.5px;
  box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.1);
}
body.page-pengajuan-kas .apptitle { font-size:19px; font-weight:700; color:#fff; letter-spacing:-.1px; }
body.page-pengajuan-kas .appsub { font-size:12px; color:rgba(255,255,255,.55); margin-top:3px; }

body.page-pengajuan-kas .right { margin-left:auto; display:flex; align-items:center; gap:14px; }
body.page-pengajuan-kas .userinfo { text-align:right; }
body.page-pengajuan-kas .userinfo .uname { font-size:13.5px; font-weight:700; color:#fff; }
body.page-pengajuan-kas .userinfo .urole { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
body.page-pengajuan-kas .avatarMenu { position:relative; }
body.page-pengajuan-kas .avatar {
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0; letter-spacing:.2px;
  background:linear-gradient(135deg,#0a2e6b,#0a3d8f);
  box-shadow:0 6px 14px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.14);
  border:none; cursor:pointer; padding:0;
}
body.page-pengajuan-kas .avatar:hover { box-shadow:0 6px 14px rgba(0,0,0,.35), 0 0 0 2px rgba(197,160,89,.6); }
body.page-pengajuan-kas .avatarDropdown {
  position:absolute; top:calc(100% + 10px); right:0; min-width:170px; background:#fff; border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.28); padding:6px; z-index:20;
}
body.page-pengajuan-kas .avatarDropdown a {
  display:block; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600;
  color:#333; text-decoration:none; cursor:pointer;
}
body.page-pengajuan-kas .avatarDropdown a:hover { background:#f1f4f9; }
body.page-pengajuan-kas .avatarDropdown a.danger { color:#c0392b; }

body.page-pengajuan-kas .backlink {
  display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none;
  font-size:13px; font-weight:600; margin-bottom:14px;
}
body.page-pengajuan-kas .backlink:hover { color:#98beff; }

body.page-pengajuan-kas .tabs { display:flex; gap:6px; margin:0 0 20px; flex-wrap:wrap; }
body.page-pengajuan-kas .tab-btn { padding:9px 16px; border-radius:9px; border:1px solid #e3e8f0; background:#fff; cursor:pointer; font-size:14px; font-weight:600; color:#4a5568; }
body.page-pengajuan-kas .tab-btn:hover { border-color:#c8d3e6; }
body.page-pengajuan-kas .tab-btn.active { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; border-color:#0a2e6b; box-shadow:0 6px 16px rgba(10,46,107,.25); }

body.page-pengajuan-kas .jenis-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:4px; }
body.page-pengajuan-kas .jenis-btn { padding:20px 14px; border:1.5px solid #e3e8f0; border-radius:14px; text-align:center; cursor:pointer; font-size:15px; font-weight:600; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
body.page-pengajuan-kas .jenis-btn:hover { transform: translateY(-2px); box-shadow:0 8px 20px rgba(10,46,107,.12); }
body.page-pengajuan-kas .jenis-btn.active { border-color:#0a3d8f; background:#eaf0fb; color:#0a3d8f; box-shadow:0 6px 18px rgba(10,46,107,.14); }

body.page-pengajuan-kas .empty-state { text-align:center; padding:44px 20px; color:#8a8f98; }
body.page-pengajuan-kas .empty-state .es-icon { font-size:30px; opacity:0.55; margin-bottom:10px; }
body.page-pengajuan-kas .empty-state .es-title { font-size:13.5px; color:#666; font-weight:600; }
body.page-pengajuan-kas .empty-state .es-sub { font-size:12px; color:#9a9fa8; margin-top:4px; }

/* ---------- form Kasbon (Cash Advance) ---------- */
body.page-pengajuan-kas label { display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:#4a5568; }
body.page-pengajuan-kas input, body.page-pengajuan-kas select, body.page-pengajuan-kas textarea {
  width:100%; padding:11px 13px; border:1.5px solid #e3e8f0; border-radius:9px; font-size:14.5px;
  margin-bottom:15px; background:#fbfcfe; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.page-pengajuan-kas input:focus, body.page-pengajuan-kas select:focus, body.page-pengajuan-kas textarea:focus {
  border-color:#0a2e6b; box-shadow:0 0 0 3px rgba(10,46,107,.08); background:#fff;
}
body.page-pengajuan-kas select:disabled { background:#f4f6fa; color:#475569; cursor:not-allowed; }
body.page-pengajuan-kas textarea { min-height:90px; resize:vertical; }
body.page-pengajuan-kas .req-mark { color:#c0392b; font-weight:700; margin:0 1px; }
body.page-pengajuan-kas .err { color:#c0392b; font-size:14px; margin-top:8px; }

body.page-pengajuan-kas .btn { display:inline-block; padding:11px 20px; border:none; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; }
body.page-pengajuan-kas .btn-primary { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; width:100%; box-shadow:0 6px 16px rgba(10,46,107,.25); }
body.page-pengajuan-kas .btn-secondary { background:#f1f4f9; color:#333; border:1px solid #e3e8f0; }
body.page-pengajuan-kas .btn-secondary:hover { background:#e4e9f2; }
body.page-pengajuan-kas .btn-sm { padding:7px 13px; font-size:13px; border-radius:8px; }
body.page-pengajuan-kas .btn:disabled { opacity:.55; cursor:not-allowed; }

body.page-pengajuan-kas .step-sticky-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
body.page-pengajuan-kas .pil-jenis {
  display:inline-block; padding:4px 11px; border-radius:20px; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; background:#eaf0fb; color:#0a2e6b;
}

body.page-pengajuan-kas .form-grid { display:grid; grid-template-columns: 1fr 1.15fr; gap:0 44px; align-items:start; }
body.page-pengajuan-kas .form-col-left, body.page-pengajuan-kas .form-col-right { min-width:0; }
body.page-pengajuan-kas .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }

body.page-pengajuan-kas .autocomplete-box { position:relative; }
body.page-pengajuan-kas .ac-list {
  position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #e3e8f0; border-radius:11px;
  max-height:180px; overflow:auto; z-index:10; display:none; box-shadow:0 12px 32px rgba(10,46,107,.14);
}
body.page-pengajuan-kas .ac-list.show { display:block; }
body.page-pengajuan-kas .ac-item { padding:9px 11px; cursor:pointer; font-size:13px; }
body.page-pengajuan-kas .ac-item:hover { background:#f0f4ff; }

body.page-pengajuan-kas table { width:100%; border-collapse:collapse; font-size:13.5px; }
body.page-pengajuan-kas th, body.page-pengajuan-kas td { padding:9px 10px; text-align:left; border:none; border-bottom:1px solid #f0f2f7; }
body.page-pengajuan-kas th { background:transparent; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#9aa2b1; font-weight:700; border-bottom:2px solid #eef1f6; white-space:nowrap; }
body.page-pengajuan-kas .line-table-scroll { max-height:360px; overflow-y:auto; border:1px solid #e3e8f0; border-radius:11px; }
body.page-pengajuan-kas .line-table-scroll table { margin-top:0; border:none; }
body.page-pengajuan-kas #historyList .line-table-scroll { max-height:none; }

/* Riwayat Saya - sinkronisasi NetSuite */
body.page-pengajuan-kas .history-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
body.page-pengajuan-kas .history-head h2 { margin-bottom:10px; }
body.page-pengajuan-kas .sync-btn { width:auto; white-space:nowrap; }
body.page-pengajuan-kas .sync-btn .spin { display:inline-block; animation:pk-spin .8s linear infinite; }
@keyframes pk-spin { to { transform:rotate(360deg); } }
body.page-pengajuan-kas .sync-info { font-size:12px; color:#8a93a5; margin:-4px 0 12px; }
body.page-pengajuan-kas .sync-warning { background:#fff9ee; border:1px solid #f0dcb4; color:#8a6212; border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:12px; }
body.page-pengajuan-kas .status-badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; line-height:1.4; background:#eceff3; color:#3d4757; }
body.page-pengajuan-kas .history-table td { vertical-align:middle; }
body.page-pengajuan-kas .history-table .col-keterangan { max-width:320px; font-size:13px; color:#555; }
body.page-pengajuan-kas .row-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap; }
body.page-pengajuan-kas .row-actions .btn { width:auto; margin:0; white-space:nowrap; font-weight:700; }
body.page-pengajuan-kas .btn-danger-text { color:#c0392b; }
body.page-pengajuan-kas .revisi-banner { background:#fff3cd; border:1px solid #ffe69c; border-radius:9px; padding:6px 10px; margin-top:6px; font-size:12.5px; color:#664d03; }
body.page-pengajuan-kas .sb-wait { background:#eaf0fb; color:#183E7C; }
body.page-pengajuan-kas .sb-ok { background:#e6f7ec; color:#1a7d3a; }
body.page-pengajuan-kas .sb-bad { background:#fdeeec; color:#c0392b; }
body.page-pengajuan-kas .sb-revisi { background:#fff4dc; color:#8a6212; }
body.page-pengajuan-kas .sync-err { font-size:11.5px; color:#8a93a5; margin-top:4px; max-width:360px; }
body.page-pengajuan-kas .total-row { display:flex; justify-content:space-between; font-size:15.5px; font-weight:700; padding:11px 0; border-top:2px solid #eef1f6; margin-top:6px; }

@media (max-width: 720px) {
  body.page-pengajuan-kas { padding:32px 20px; }
  body.page-pengajuan-kas .jenis-grid { grid-template-columns:1fr 1fr; }
  body.page-pengajuan-kas .right { width:100%; justify-content:space-between; margin-left:0; }
  body.page-pengajuan-kas .form-grid, body.page-pengajuan-kas .grid2 { grid-template-columns:1fr; }
}
@media (max-width: 420px) {
  body.page-pengajuan-kas .jenis-grid { grid-template-columns:1fr; }
}

/* ============================================================
   HALAMAN PROFIL (Pages/Profile.cshtml)
   ============================================================ */
body.page-profile {
  box-sizing: border-box;
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  min-height:100vh; color:#222;
  padding:46px 46px 46px;
  -webkit-font-smoothing: antialiased;
}
body.page-profile * { box-sizing: border-box; }
body.page-profile .wrap { max-width: 640px; margin: 0 auto; }
body.page-profile .back {
  display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.7); text-decoration:none;
  font-size:13px; font-weight:600; margin-bottom:18px;
}
body.page-profile .back:hover { color:#fff; }
body.page-profile .card {
  background:#fff; border-radius:14px; padding:28px;
  box-shadow:0 20px 54px rgba(0,0,0,.28);
}
body.page-profile .avatar {
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:#fff; letter-spacing:.2px; margin:0 auto 14px;
  background:linear-gradient(135deg,#0a2e6b,#0a3d8f);
}
body.page-profile .name { text-align:center; font-size:18px; font-weight:700; color:#0a2e6b; }
body.page-profile .empid { text-align:center; font-size:12.5px; color:#9aa3b5; margin-top:2px; margin-bottom:22px; }
body.page-profile .field { padding:12px 0; border-bottom:1px solid #f0f2f7; }
body.page-profile .field:last-child { border-bottom:none; }
body.page-profile .field label { display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9aa3b5; margin-bottom:3px; }
body.page-profile .field .val { font-size:14.5px; color:#222; }
/* PIN approval (Approval Hub) */
body.page-profile .pin-card { margin-top:18px; }
body.page-profile .pin-title { font-size:16px; font-weight:700; color:#0a2e6b; }
body.page-profile .pin-sub { font-size:13px; color:#6b7280; margin:4px 0 16px; }
body.page-profile .pin-row { margin-bottom:12px; }
body.page-profile .pin-row label { display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9aa3b5; margin-bottom:5px; }
body.page-profile .pin-row input { width:100%; padding:10px 12px; border:1.5px solid #e3e8f0; border-radius:9px; font-size:15px; letter-spacing:.2em; }
body.page-profile .pin-row input:focus { outline:none; border-color:#0a3d8f; }
body.page-profile .pin-error { color:#c0392b; font-size:12.5px; min-height:18px; margin-bottom:8px; }
body.page-profile .btn { border:none; border-radius:9px; padding:11px 18px; font-size:14px; font-weight:600; cursor:pointer; width:100%; }
body.page-profile .btn-primary { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; }
body.page-profile .btn-primary:hover { filter:brightness(1.08); }

/* ============================================================
   HALAMAN DAFTAR KARYAWAN (Pages/Admin/Employees.cshtml)
   ============================================================ */
body.page-employees {
  box-sizing: border-box;
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  min-height:100vh; color:#222;
  padding:46px 46px 46px;
  -webkit-font-smoothing: antialiased;
  animation:napasWave 22s ease-in-out infinite;
}
body.page-employees * { box-sizing: border-box; }
body.page-employees .wrap { max-width: 1300px; margin: 0 auto; }
body.page-employees .card {
  background:#fff; border-radius:14px; padding:24px; margin-bottom:16px;
  box-shadow:0 20px 54px rgba(0,0,0,.28);
  animation: fadeInUp .32s cubic-bezier(.2,.7,.3,1) both;
}

body.page-employees .head { display:flex; align-items:center; flex-wrap:wrap; gap:17px; margin-bottom:24px; }
body.page-employees .brandblock { display:flex; align-items:center; gap:17px; }
body.page-employees .logo {
  width:52px; height:52px; border-radius:15px; flex:0 0 52px;
  background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; font-weight:800; font-size:16px;
  display:flex; align-items:center; justify-content:center; letter-spacing:.5px;
  box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.1);
}
body.page-employees .apptitle { font-size:19px; font-weight:700; color:#fff; letter-spacing:-.1px; }
body.page-employees .appsub { font-size:12px; color:rgba(255,255,255,.55); margin-top:3px; }

body.page-employees .right { margin-left:auto; display:flex; align-items:center; gap:14px; }
body.page-employees .userinfo { text-align:right; }
body.page-employees .userinfo .uname { font-size:13.5px; font-weight:700; color:#fff; }
body.page-employees .userinfo .urole { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
body.page-employees .avatarMenu { position:relative; }
body.page-employees .avatar {
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0; letter-spacing:.2px;
  background:linear-gradient(135deg,#0a2e6b,#0a3d8f);
  box-shadow:0 6px 14px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.14);
  border:none; cursor:pointer; padding:0;
}
body.page-employees .avatar:hover { box-shadow:0 6px 14px rgba(0,0,0,.35), 0 0 0 2px rgba(197,160,89,.6); }
body.page-employees .avatarDropdown {
  position:absolute; top:calc(100% + 10px); right:0; min-width:170px; background:#fff; border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.28); padding:6px; z-index:20;
}
body.page-employees .avatarDropdown a {
  display:block; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600;
  color:#333; text-decoration:none; cursor:pointer;
}
body.page-employees .avatarDropdown a:hover { background:#f1f4f9; }
body.page-employees .avatarDropdown a.danger { color:#c0392b; }

body.page-employees .backlink {
  display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none;
  font-size:13px; font-weight:600; margin-bottom:14px;
}
body.page-employees .backlink:hover { color:#98beff; }

body.page-employees .btn { display:inline-block; padding:9px 16px; border:none; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; }
body.page-employees .btn-secondary { background:#f1f4f9; color:#333; border:1px solid #e3e8f0; }
body.page-employees .btn-secondary:hover { background:#e4e9f2; }
body.page-employees .btn-sm { padding:3px 10px; font-size:11px; border-radius:5px; }

body.page-employees .alert-box { padding:14px 18px; border-radius:11px; font-size:14px; margin-bottom:16px; }
body.page-employees .alert-success { background:#eafaf0; border:1px solid #b8ecd0; color:#1a7d3a; }
body.page-employees .alert-error { background:#fdeeec; border:1px solid #f3c4bd; color:#c0392b; }

body.page-employees .stat-row { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
body.page-employees .stat-box { flex:1 1 260px; border:1px solid #e3e8f0; border-radius:12px; padding:14px 16px; }
body.page-employees .stat-label { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#9aa2b1; margin-bottom:4px; }
body.page-employees .stat-value { font-size:15px; font-weight:700; color:#0a2e6b; }
body.page-employees .stat-sub { font-size:11.5px; color:#8a93a5; margin:2px 0 10px; }

body.page-employees .badge {
  display:inline-block; padding:3px 10px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:.02em;
}
body.page-employees .badge-active { background:#e6f7ec; color:#1a7d3a; }
body.page-employees .badge-inactive { background:#eef1f6; color:#6b7280; }

/* ---------- Tabel karyawan - sama dengan tabel Riwayat Saya (Pengajuan Kas) ---------- */
body.page-employees .history-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
body.page-employees .history-toolbar input[type=text],
body.page-employees .history-toolbar select {
  margin:0; padding:9px 12px; border:1.5px solid #e3e8f0; border-radius:9px; font-size:13.5px;
  background:#fbfcfe; outline:none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.page-employees .history-toolbar input[type=text] { flex:1 1 280px; max-width:420px; }
body.page-employees .history-toolbar select { flex:0 1 260px; }
body.page-employees .history-toolbar input[type=text]:focus,
body.page-employees .history-toolbar select:focus { border-color:#0a2e6b; box-shadow:0 0 0 3px rgba(10,46,107,.08); background:#fff; }
body.page-employees .history-toolbar .btn { width:auto; margin:0; white-space:nowrap; padding:7px 13px; font-size:13px; border-radius:8px; }
body.page-employees .emp-check { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:#4a5568; cursor:pointer; user-select:none; padding:0 4px; }
body.page-employees .emp-check input { width:16px; height:16px; margin:0; accent-color:#0a2e6b; }
body.page-employees .emp-count { font-size:12px; color:#8a93a5; margin:0 0 12px; }

body.page-employees table { width:100%; border-collapse:collapse; font-size:13.5px; }
body.page-employees th, body.page-employees td { padding:9px 10px; text-align:left; border:none; border-bottom:1px solid #f0f2f7; }
body.page-employees th { background:transparent; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#9aa2b1; font-weight:700; border-bottom:2px solid #eef1f6; white-space:nowrap; }
body.page-employees .line-table-scroll { overflow-x:auto; border:1px solid #e3e8f0; border-radius:11px; }
body.page-employees .line-table-scroll table { margin-top:0; border:none; }
body.page-employees .history-table td { vertical-align:middle; }
body.page-employees .history-table tbody tr:hover { background:rgba(10,46,107,.03); }
body.page-employees .history-table .col-role { max-width:280px; font-size:12.5px; color:#555; }
body.page-employees .row-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap; }
body.page-employees .row-actions .btn { width:auto; margin:0; white-space:nowrap; font-weight:700; }

body.page-employees .empty-state { text-align:center; padding:44px 20px; color:#8a8f98; }
body.page-employees .empty-state .es-icon { font-size:30px; opacity:0.55; margin-bottom:10px; }
body.page-employees .empty-state .es-title { font-size:13.5px; color:#666; font-weight:600; }
body.page-employees .empty-state .es-sub { font-size:12px; color:#9a9fa8; margin-top:4px; }

@media (max-width: 720px) {
  body.page-employees { padding:32px 20px; }
  body.page-employees .right { width:100%; justify-content:space-between; margin-left:0; }
}

/* Pengajuan Kas - Kliring Kasbon (Cari Dokumen Kasbon, selisih, lampiran) */
body.page-pengajuan-kas .ac-kasbon { max-height:340px; overflow-y:auto; border-radius:14px; box-shadow:0 12px 32px rgba(10,46,107,.14); }
body.page-pengajuan-kas .ac-kasbon-item { padding:10px 12px; border-bottom:1px solid #f2f4f8; }
body.page-pengajuan-kas .ac-kasbon-item:last-child { border-bottom:none; }
body.page-pengajuan-kas .ak-row1 { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
body.page-pengajuan-kas .ak-nodok { font-weight:700; color:#0a2e6b; font-size:13px; }
body.page-pengajuan-kas .ak-total { font-weight:700; font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
body.page-pengajuan-kas .ak-entity { font-size:12px; color:#475569; margin-top:2px; }
body.page-pengajuan-kas .ak-meta { display:flex; gap:8px; align-items:center; font-size:11px; color:#9aa3af; margin-top:2px; }
body.page-pengajuan-kas .ak-dot { color:#cbd5e1; }
body.page-pengajuan-kas .ac-empty { padding:12px; font-size:12.5px; color:#8a93a5; }
body.page-pengajuan-kas .kliring-summary { background:#eef4ff; border:1px solid #9dbcf7; color:#0a2e6b; border-radius:10px; padding:10px 14px; font-size:13px; line-height:1.7; margin-top:10px; }
body.page-pengajuan-kas .selisih-info { font-size:13px; color:#57657a; margin:2px 0 8px; }
body.page-pengajuan-kas .lampiran-hint { text-transform:uppercase; font-size:10.5px; color:#8a93a5; letter-spacing:.04em; font-weight:600; }
body.page-pengajuan-kas .lampiran-note { font-size:13px; color:#333; margin:10px 0 14px; }
body.page-pengajuan-kas .att-list { border:1px solid #e3e8f0; border-radius:11px; overflow:hidden; margin-top:8px; }
body.page-pengajuan-kas .att-row { display:flex; align-items:center; gap:10px; padding:8px 10px; }
body.page-pengajuan-kas .att-row + .att-row { border-top:1px solid #eef1f6; }
body.page-pengajuan-kas .att-icon { color:#0a2e6b; }
body.page-pengajuan-kas .att-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
body.page-pengajuan-kas .att-size { font-size:11.5px; color:#888; white-space:nowrap; }
body.page-pengajuan-kas .att-row .btn { width:auto; margin:0; }

/* Pengajuan Kas - jenis vendor (CSR, Sumbangan, Pembayaran Vendor) */
body.page-pengajuan-kas .vendor-master-info { background:#f7f9fc; border:1px solid #dde5f0; border-radius:8px; padding:10px 12px; margin-bottom:10px; font-size:12.5px; color:#444; }
body.page-pengajuan-kas .checkbox-inline { display:inline-flex; align-items:center; gap:6px; font-weight:400; cursor:pointer; }
body.page-pengajuan-kas .checkbox-inline input { width:auto; margin:0; }
body.page-pengajuan-kas input.readonly-field { background:#f2f2f2; color:#475569; cursor:not-allowed; }
body.page-pengajuan-kas .section-note { font-size:12px; color:#777; margin:-6px 0 10px; line-height:1.5; }
body.page-pengajuan-kas .hidden.li-tanggal-col, body.page-pengajuan-kas th.li-tanggal-col.hidden { display:none !important; }

/* Riwayat Saya - pencarian & export; peringatan Kasbon belum lunas; link lampiran */
body.page-pengajuan-kas .history-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:14px; }
body.page-pengajuan-kas .history-toolbar input { margin:0; max-width:360px; }
body.page-pengajuan-kas .history-toolbar .btn { width:auto; margin:0; white-space:nowrap; }
body.page-pengajuan-kas .outstanding-warning { background:#fff8ec; border:1px solid #f0dcb4; color:#8a6212; border-radius:10px; padding:10px 14px; font-size:13px; line-height:1.55; margin:12px 0; }
body.page-pengajuan-kas .att-link { font-size:12px; white-space:nowrap; }

/* Pengajuan Kas - nama form di judul & tombol Kembali sebaris dengan tab */
body.page-pengajuan-kas .apptitle-jenis { font-weight:600; }
body.page-pengajuan-kas .apptitle-sep { margin:0 10px; color:rgba(255,255,255,.45); font-weight:400; }
/* Bar tab standar - persis .sticky-top-bar Purchase Requisition (lihat bagian KEPALA & LATAR di bawah,
   .fat-tab-bar): di dalam kartu, menempel di atas saat digulir, garis bawah tipis. */
body.page-pengajuan-kas .tabs-bar {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
  position:sticky; top:0; background:#fff; z-index:40;
  margin:-24px -24px 16px; padding:20px 24px 12px;
  border-bottom:1px solid #eef1f6; border-radius:14px 14px 0 0;
}
body.page-pengajuan-kas .tabs-bar .tabs { flex:1 1 auto; margin-bottom:16px; }
body.page-pengajuan-kas .form-back-btn { width:auto; margin:0; white-space:nowrap; }

/* ============================================================
   HALAMAN WORKFLOW APPROVAL (Pages/Admin/ApprovalWorkflow.cshtml)
   Kerangka (header, kartu, tombol sekunder) memakai body.page-employees;
   yang di bawah ini khusus isi halaman approval.
   ============================================================ */
body.page-approval .wrap { max-width:1200px; }
body.page-approval label { display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:#4a5568; }
body.page-approval label .opt { color:#999; font-weight:400; }
body.page-approval .req-mark { color:#c0392b; }
body.page-approval input[type=text], body.page-approval select {
  width:100%; padding:10px 12px; border:1.5px solid #e3e8f0; border-radius:9px; font-size:14px;
  background:#fbfcfe; outline:none; font-family:inherit; transition:border-color .15s ease, box-shadow .15s ease;
}
body.page-approval input[type=text]:focus, body.page-approval select:focus { border-color:#0a2e6b; box-shadow:0 0 0 3px rgba(10,46,107,.08); background:#fff; }
body.page-approval .btn-primary { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; box-shadow:0 6px 16px rgba(10,46,107,.25); }
body.page-approval .btn-primary:hover { filter:brightness(1.05); }
body.page-approval .btn:disabled { opacity:.45; cursor:not-allowed; }
body.page-approval .wa-danger { color:#c0392b; }

body.page-approval .wa-subsidiary { max-width:460px; margin-bottom:6px; }
body.page-approval .wa-hint { font-size:12px; color:#8a93a5; margin-top:6px; }
body.page-approval .wa-empty { text-align:center; padding:40px 20px; color:#8a93a5; font-size:13.5px; border:1px dashed #e3e8f0; border-radius:12px; margin-top:18px; }
body.page-approval .wa-section { font-size:12px; margin:26px 0 6px; color:#8a93a5; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
body.page-approval .wa-section .en { text-transform:none; letter-spacing:0; margin-left:4px; display:inline; }
body.page-approval .wa-note { font-size:13px; color:#57657a; line-height:1.6; margin:0 0 14px; }

body.page-approval .wa-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
body.page-approval .wa-role-card { border:1px solid #e3e8f0; border-radius:12px; padding:16px; background:#fcfdff; }
body.page-approval .wa-role-title { font-size:14.5px; font-weight:700; color:#0a2e6b; }
body.page-approval .wa-role-sub { font-size:12px; color:#8a93a5; margin:2px 0 10px; }
body.page-approval .wa-role-add { display:flex; gap:8px; align-items:flex-start; margin-top:10px; }
body.page-approval .wa-role-add .ac-box { flex:1; }
body.page-approval .wa-role-add .btn { flex:0 0 auto; }
body.page-approval .wa-print-name { padding:6px 9px !important; font-size:13px !important; }

body.page-approval .wa-table-wrap { border:1px solid #e3e8f0; border-radius:11px; overflow:hidden; }
body.page-approval .wa-table { width:100%; border-collapse:collapse; font-size:13.5px; }
body.page-approval .wa-table th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#9aa2b1; font-weight:700; padding:9px 10px; border-bottom:2px solid #eef1f6; white-space:nowrap; background:#fff; }
body.page-approval .wa-table td { padding:9px 10px; border-bottom:1px solid #f0f2f7; vertical-align:middle; }
body.page-approval .wa-table tbody tr:last-child td { border-bottom:none; }
body.page-approval .wa-role-table { border:1px solid #eef1f6; border-radius:9px; background:#fff; }
body.page-approval .wa-actions { white-space:nowrap; text-align:right; }
body.page-approval .wa-actions .btn { margin-left:4px; }
body.page-approval .wa-muted { color:#8a93a5; font-size:12.5px; }
body.page-approval .wa-empty-row { padding:14px 12px; color:#8a93a5; font-size:13px; }
body.page-approval .wa-level { display:inline-flex; width:26px; height:26px; border-radius:50%; align-items:center; justify-content:center; background:#eaf0fb; color:#0a2e6b; font-weight:700; font-size:12.5px; }
body.page-approval .wa-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.03em; background:#eef1f6; color:#5a6272; margin-left:4px; }
body.page-approval .wa-badge-primary { background:#eaf0fb; color:#0a2e6b; }
body.page-approval .wa-badge-warn { background:#fdf3e2; color:#8a6212; }

body.page-approval .wa-form { border:1px solid #e3e8f0; border-radius:12px; padding:16px; margin-top:16px; max-width:760px; background:#fcfdff; }
body.page-approval .wa-form-title { font-size:14px; font-weight:700; color:#0a2e6b; margin-bottom:12px; }
body.page-approval .wa-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
body.page-approval .wa-form-actions { display:flex; gap:8px; margin-top:14px; }

body.page-approval .ac-box { position:relative; }
body.page-approval .ac-list { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #e3e8f0; border-radius:11px; max-height:220px; overflow:auto; z-index:20; display:none; box-shadow:0 12px 32px rgba(10,46,107,.14); margin-top:4px; }
body.page-approval .ac-list.show { display:block; }
body.page-approval .ac-item { padding:9px 11px; cursor:pointer; font-size:13px; }
body.page-approval .ac-item:hover { background:#f0f4ff; }

@media (max-width: 860px) {
  body.page-approval .wa-role-grid, body.page-approval .wa-form-grid { grid-template-columns:1fr; }
}

/* Dashboard - jumlah pengajuan yang menunggu di kartu Approval Hub */
body.page-home .hero-count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; margin-left:8px; border-radius:11px; background:#c0392b; color:#fff; font-size:12px; font-weight:700; vertical-align:2px; }

/* Daftar Karyawan - akses tab Finance & Kasir (tombol Edit) */
body.page-employees .badge-access { background:#eaf0fb; color:#0a2e6b; }
body.page-employees .access-none { color:#b0b7c3; }
body.page-employees .btn-primary { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; box-shadow:0 6px 16px rgba(10,46,107,.25); }
body.page-employees .btn:disabled { opacity:.55; cursor:not-allowed; }
body.page-employees .access-overlay { position:fixed; inset:0; background:rgba(8,16,32,.5); z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; }
body.page-employees .access-box { background:#fff; border-radius:16px; padding:24px 26px; width:440px; max-width:100%; box-shadow:0 24px 70px rgba(10,46,107,.35); animation: fadeInUp .22s cubic-bezier(.2,.7,.3,1) both; }
body.page-employees .access-title { font-size:17px; font-weight:700; color:#0a2e6b; }
body.page-employees .access-sub { font-size:13px; color:#57657a; margin:2px 0 16px; }
body.page-employees .access-option { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid #e3e8f0; border-radius:11px; margin-bottom:10px; cursor:pointer; font-size:13.5px; color:#1f2937; }
body.page-employees .access-option:hover { background:#f7f9fd; }
body.page-employees .access-option input { width:18px; height:18px; margin:2px 0 0; accent-color:#0a2e6b; flex:0 0 auto; }
body.page-employees .access-desc { display:block; font-size:12px; color:#8a93a5; margin-top:2px; font-weight:400; }
body.page-employees .access-err { color:#c0392b; font-size:13px; min-height:18px; margin:4px 0 6px; }
body.page-employees .access-actions { display:flex; gap:8px; justify-content:flex-end; }

/* Halaman admin (Daftar Karyawan, Workflow Approval) - khusus role Administrator */
body.page-employees .denied-card { text-align:center; padding:48px 24px; }
body.page-employees .denied-icon { font-size:34px; margin-bottom:10px; }
body.page-employees .denied-title { font-size:18px; font-weight:700; color:#0a2e6b; }
body.page-employees .denied-sub { font-size:13.5px; color:#57657a; margin:6px 0 18px; }
body.page-employees .denied-card .btn { text-decoration:none; }
body.page-employees .loading-row { padding:26px; text-align:center; color:#8a93a5; font-size:13.5px; }

/* ============================================================
   UTILITAS - pengganti style inline di halaman Razor. Sengaja !important supaya
   tetap menang seperti style inline yang digantikannya.
   ============================================================ */
.u-inline { display:inline !important; }
.u-ml-4 { margin-left:4px !important; }
.u-on-primary { color:#c8d8f0 !important; }
.u-opsional { color:#999 !important; font-weight:400 !important; }
.u-minh-38 { min-height:38px !important; }
.u-mb-10 { margin-bottom:10px !important; }
.u-mt-8 { margin-top:8px !important; }
.u-w-auto { width:auto !important; }
.u-m-r4 { margin:0 4px 0 0 !important; }
.u-right { text-align:right !important; }
.u-nowrap { white-space:nowrap !important; }
.u-cell-input { margin:0 !important; padding:4px !important; }
.u-w-1 { width:1% !important; }
.u-w-38 { width:38% !important; }
.u-w-70px { width:70px !important; }
.u-w-100 { width:100% !important; }

/* Pengajuan Kas - umur kasbon di pencarian Kliring: emas >= 30 hari, merah >= 90 hari. */
body.page-pengajuan-kas .ak-umur { font-weight:600; }
body.page-pengajuan-kas .ak-umur-na { color:#9aa3af; }
body.page-pengajuan-kas .ak-umur-baru { color:#6b7280; }
body.page-pengajuan-kas .ak-umur-30 { color:#8a6212; }
body.page-pengajuan-kas .ak-umur-90 { color:#c0392b; }

/* ============================================================
   MODAL LIHAT PENGAJUAN KAS (wwwroot/js/kas-detail-modal.js, kelas kdm-*)
   ============================================================ */
.kdm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:220;display:flex;align-items:center;justify-content:center;padding:20px;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.kdm-box{background:#fff;border-radius:16px;padding:22px 26px 26px;width:900px;max-width:96%;max-height:92vh;overflow-y:auto;box-shadow:0 24px 70px rgba(10,46,107,.35);color:#1f2937}
.kdm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.kdm-head-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kdm-head-actions{display:flex;gap:8px;flex:0 0 auto}
.kdm-nodok{font-size:19px;font-weight:700;color:#0a2e6b;letter-spacing:-.2px}
.kdm-head .status-badge{text-transform:uppercase;font-size:10.5px;letter-spacing:.04em}
.kdm-btn{display:inline-block;padding:7px 14px;border:1px solid #dfe5ee;background:#f4f6fa;color:#1f2937;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.kdm-btn:hover{background:#e8edf5}
.kdm-warning{background:#fff9ee;border:1px solid #f0dcb4;color:#8a6212;border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:12px}
.kdm-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.kdm-pill{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.kdm-pill-blue{background:#eaf0fb;color:#0a2e6b}.kdm-pill-gold{background:#fdf3e2;color:#8a6212}
.kdm-judul{font-size:17px;font-weight:700;line-height:1.32;margin:0 0 4px;letter-spacing:-.2px;color:#101828}
.kdm-subjudul{font-size:11.5px;color:#8b94a3;line-height:1.6}
.kdm-sorotan{display:grid;gap:10px;margin-top:16px}
.kdm-sorotan-1{grid-template-columns:1fr}.kdm-sorotan-2{grid-template-columns:1fr 1fr}.kdm-sorotan-3{grid-template-columns:repeat(3,1fr)}
.kdm-kartu{background:#f5f8fd;border:1px solid #e1e9f6;border-radius:11px;padding:10px 12px}
.kdm-kartu-utama{background:linear-gradient(135deg,#0a2e6b,#0a3d8f);border-color:#0a2e6b}
.kdm-kartu-warn{background:#fff8ec;border-color:#f0dcb4}
.kdm-kartu-k{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8fa0bd}
.kdm-kartu-utama .kdm-kartu-k{color:#9db4dd}.kdm-kartu-warn .kdm-kartu-k{color:#a98a4a}
.kdm-kartu-v{font-size:14.5px;font-weight:700;color:#0a2e6b;margin-top:3px;line-height:1.2;letter-spacing:-.2px}
.kdm-kartu-utama .kdm-kartu-v{color:#fff}.kdm-kartu-warn .kdm-kartu-v{color:#8a6212}
.kdm-kartu-sub{display:block;font-weight:500;font-size:11px;color:#7b8698;margin-top:2px}
.kdm-sesi{display:flex;align-items:center;gap:9px;margin:20px 0 10px}
.kdm-sesi-judul{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9aa3b5;white-space:nowrap}
.kdm-sesi-garis{flex:1;height:1px;background:#eef1f6}
.kdm-sesi-jumlah{font-size:10px;color:#b6bdc9;font-weight:600}
.kdm-lipat{cursor:pointer;user-select:none}
.kdm-lipat-panah{font-size:10px;color:#9aa3b5;transition:transform .15s;display:inline-block}.kdm-lipat-panah.buka{transform:rotate(90deg)}
.kdm-lipat-teks{font-size:10.5px;color:#3a5fa0;font-weight:600;white-space:nowrap}
.kdm-orang{display:flex;align-items:center;gap:11px;border:1px solid #eef1f6;border-radius:11px;padding:13px 14px;background:#fcfdff}
.kdm-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#0a2e6b,#0a3d8f);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.kdm-orang-isi{min-width:0;flex:1}.kdm-orang-nama{display:block;font-size:13px;font-weight:600;line-height:1.3}
.kdm-orang-sub{display:block;font-size:11.5px;color:#8b94a3}
.kdm-orang-kanan{margin-left:auto;font-size:11px;color:#9aa3b5;text-align:right;line-height:1.45}
.kdm-table-wrap{overflow-x:auto}
.kdm-table{width:100%;border-collapse:collapse}
.kdm-table th{text-align:left;font-size:12px;padding:6px;border-bottom:2px solid #ccc;color:#9aa2b1;text-transform:uppercase;letter-spacing:.05em}
.kdm-table td{padding:8px 6px;border-bottom:1px solid #eee;font-size:13px}
.kdm-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.kdm-kv-lebar{grid-column:1 / -1}
.kdm-kv-k{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#a0a8b6}
.kdm-kv-v{font-size:12.5px;color:#1f2937;margin-top:1px;line-height:1.45;white-space:pre-wrap}
.kdm-lampiran{border:1px solid #e3e8f0;border-radius:11px;overflow:hidden}
.kdm-lampiran-row{display:flex;align-items:center;gap:10px;padding:10px 12px}.kdm-lampiran-row + .kdm-lampiran-row{border-top:1px solid #eef1f6}
.kdm-lampiran-ikon{flex:0 0 auto;color:#0a2e6b}
.kdm-lampiran-nama{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.kdm-lampiran-row .kdm-btn{text-decoration:underline}
.kdm-lampiran-note{font-size:11px;color:#9aa3b5}
.kdm-log{background:#fbfcfe;border:1px solid #eef1f6;border-radius:14px;padding:4px 14px;max-height:220px;overflow-y:auto}
.kdm-log-row{padding:9px 0}.kdm-log-row + .kdm-log-row{border-top:1px solid #eef1f6}
.kdm-log-meta{font-size:11.5px;color:#8a93a5}.kdm-log-actor{color:#0a2e6b;font-weight:600}
.kdm-log-text{font-size:12.5px;color:#333;margin-top:3px;line-height:1.55}
.kdm-empty{text-align:center;padding:22px 16px;color:#8a8f98;border:1px dashed #e3e8f0;border-radius:11px}
.kdm-empty-icon{font-size:24px;opacity:.55;margin-bottom:6px}.kdm-empty-title{font-size:13px;color:#666;font-weight:600}
@media (max-width:640px){.kdm-box{padding:18px 16px}.kdm-sorotan-2,.kdm-sorotan-3,.kdm-kv{grid-template-columns:1fr}.kdm-head{flex-direction:column}}
.kdm-dot{color:#c5a059}
.kdm-note{color:#666}
.kdm-table th.kdm-r,.kdm-table td.kdm-r{text-align:right}
.kdm-table td.kdm-nowrap{white-space:nowrap}
.kdm-ref{color:#0a2e6b}

/* ============================================================
   CETAK SLIP PENGAJUAN KAS (wwwroot/js/kas-print-slip.js)
   Dokumen cetak di jendela baru, <body class="page-kas-print">. A4 portrait lewat named page.
   ============================================================ */
body.page-kas-print, body.page-kas-print * { box-sizing:border-box; }
html:has(body.page-kas-print),
body.page-kas-print { margin:0; padding:0; }
body.page-kas-print { font-family: Arial, Helvetica, sans-serif; font-size:11.7px; color:#1a1a1a; background:#e9edf3; }
body.page-kas-print .en { display:block; font-weight:400; font-size:8.5px; color:#888; font-style:italic; margin-top:1px; }
body.page-kas-print .print-btn { margin:14px 0; text-align:center; }
body.page-kas-print .print-btn button { padding:10px 24px; background:#0a3d8f; color:#fff; border:none; border-radius:6px; font-size:14px; cursor:pointer; }
body.page-kas-print .page { position:relative; width:210mm; min-height:297mm; margin:0 auto 16px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.15); padding:14mm; overflow:hidden; }
body.page-kas-print .page-content { position:relative; z-index:1; }
@page pagekasprint { size: A4 portrait; margin:0; }
body.page-kas-print { page: pagekasprint; }
@media print {
  body.page-kas-print .print-btn { display:none !important; }
  body.page-kas-print { background:#fff; }
  body.page-kas-print .page { box-shadow:none; margin:0; }
}
body.page-kas-print table { width:100%; border-collapse:collapse; margin-top:5px; }
body.page-kas-print td,
body.page-kas-print th { border:1px solid #333; padding:3.5px 6px; font-size:11.7px; }
body.page-kas-print thead { display: table-header-group; }
body.page-kas-print tr { page-break-inside: avoid; }
body.page-kas-print .doc-header { display:flex; align-items:center; border-bottom:3px solid #0a2e6b; padding-bottom:7px; margin-bottom:5px; }
body.page-kas-print .doc-header img { height:52px; margin-right:16px; }
body.page-kas-print .doc-header-text { flex:1; text-align:center; }
body.page-kas-print .header-title { font-weight:bold; font-size:16px; letter-spacing:.5px; color:#0a2e6b; }
body.page-kas-print .header-sub { font-size:11px; color:#555; margin-top:2px; }
body.page-kas-print .doc-meta-bar { text-align:center; font-size:10.5px; color:#444; margin-bottom:6px; background:#f7f9fc; padding:4px; border-radius:4px; }
body.page-kas-print .section-title { font-weight:bold; font-size:12px; margin:8px 0 4px; color:#0a2e6b; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid #ccc; padding-bottom:2px; }
body.page-kas-print .section-title .en { display:inline; margin-left:6px; text-transform:none; letter-spacing:0; }
body.page-kas-print .meta-table td { border:none; padding:2.5px 4px; font-size:11.7px; vertical-align:top; }
body.page-kas-print .label { font-weight:bold; width:140px; color:#333; vertical-align:top; }
body.page-kas-print .penjelasan { border:1px solid #333; min-height:34px; padding:6px; margin-top:3px; white-space:pre-wrap; }
body.page-kas-print .sig-table { table-layout:fixed; margin-top:14px; page-break-inside: avoid; }
body.page-kas-print .sig-table td { text-align:center; vertical-align:top; border:1px solid #333; font-size:10.5px; padding:7px; width:25%; }
body.page-kas-print .sig-table-3col td { width:33.333%; }
body.page-kas-print .sig-table .en { display:block; margin-top:2px; }
body.page-kas-print .sig-role { color:#555; font-size:9.5px; min-height:23px; display:block; margin-top:2px; line-height:1.2; overflow-wrap:break-word; }
body.page-kas-print .sig-badge { display:inline-block; font-size:8.5px; font-weight:bold; padding:3px 9px; border-radius:3px; margin-top:6px; letter-spacing:.2px; }
body.page-kas-print .sig-badge-approved { background:#e6f4ea; color:#1a7d3a; border:1px solid #b7dfc4; }
body.page-kas-print .sig-badge-pending { background:#f2f2f2; color:#888; border:1px solid #ddd; }
body.page-kas-print .sig-badge-rejected { background:#fdecea; color:#c0392b; border:1px solid #f0b7b0; }
body.page-kas-print .sig-badge-revisi { background:#fff8e6; color:#96703a; border:1px solid #e8d5a8; }
body.page-kas-print .sig-timestamp { font-size:8px; color:#888; margin-top:4px; }
body.page-kas-print .sig-name { margin-top:10px; border-top:1px solid #333; padding-top:5px; font-weight:bold; font-size:10.5px; line-height:1.25; overflow-wrap:break-word; }
body.page-kas-print .sig-atas-nama { min-height:10px; font-size:8.5px; color:#777; margin-top:2px; line-height:1.2; }
body.page-kas-print .cap-batal { position:absolute; top:46%; left:50%; transform:translate(-50%,-50%) rotate(-32deg); font-size:92px; font-weight:900; letter-spacing:12px; color:rgba(192,57,43,.13); border:9px solid rgba(192,57,43,.13); padding:12px 42px; border-radius:14px; white-space:nowrap; pointer-events:none; z-index:0; }
body.page-kas-print .cap-batal-sub { position:absolute; top:calc(46% + 74px); left:50%; transform:translate(-50%,0) rotate(-32deg); font-size:14px; font-weight:700; letter-spacing:2.5px; color:rgba(192,57,43,.24); white-space:nowrap; pointer-events:none; z-index:0; }
body.page-kas-print .page-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:9px; padding-top:5px; border-top:1px solid #ddd; }
body.page-kas-print .page-footer .sys-name { font-size:8.5px; font-weight:600; color:#555; }
body.page-kas-print .page-footer .copyright { font-size:7.5px; color:#999; }
body.page-kas-print .jenis-grid { width:auto; border:none; margin-top:0; }
body.page-kas-print .jenis-grid td { border:none; padding:6px 22px 6px 0; font-size:14.5px; }
body.page-kas-print .doc-header-text .en { text-align:center; }
body.page-kas-print .doc-header-spacer { width:80px; }
body.page-kas-print .jalur-bayar { width:100%; border-collapse:collapse; margin:0 0 10px; }
body.page-kas-print .jalur-bayar td { border:1.5px solid #96703a; border-left:6px solid #c5a059; background:#fdf8ee; padding:9px 12px; }
body.page-kas-print .jalur-bayar-title { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#96703a; font-weight:bold; }
body.page-kas-print .jalur-bayar-text { font-size:11.5px; color:#3d3320; margin-top:3px; line-height:1.5; }
body.page-kas-print .jalur-bayar-en { display:block; font-style:italic; color:#7a6a48; margin-top:2px; }
body.page-kas-print .meta-table td.catatan-vgm { padding-top:0; font-size:10.5px; color:#96703a; }
body.page-kas-print .coret { text-decoration:line-through; color:#999; }
body.page-kas-print .muted { color:#888; }
body.page-kas-print .meta-table td.revisi-cell { padding-top:3px; }
body.page-kas-print .revisi-box { border:1px solid #e8d5a8; background:#fff8e6; border-left:4px solid #c5a059; border-radius:5px; padding:6px 9px; font-size:10.5px; color:#7a5c2e; line-height:1.5; }
body.page-kas-print .no-cell { text-align:center; color:#8b1a1a; }
body.page-kas-print .c { text-align:center; }
body.page-kas-print .r { text-align:right; }
body.page-kas-print .b { font-weight:bold; }
body.page-kas-print .en.en-inline { display:inline; }
body.page-kas-print .col-no { width:40px; }
body.page-kas-print .col-tgl { width:105px; }
body.page-kas-print .col-jumlah { width:150px; }
body.page-kas-print .slip-loading { font-family:sans-serif; padding:24px; color:#555; }

/* ============================================================
   CSS SUITELET (Tiket & Akomodasi, Purchase Requisition, Approval Hub, cetakan).
   Ditulis otomatis oleh tools/<modul>/build-template.js lewat tools/shared/site-css.js,
   di-scope ke body.page-xxx. Ubah lewat suitelet sumber + jalankan ulang build-template,
   jangan diedit manual. Diletakkan SEBELUM bagian kepala FAT di bawah supaya aturan FAT
   (spesifisitas sama) yang menang.
   ============================================================ */
/* ==== CSS SUITELET (DIBANGKITKAN) - JANGAN DIEDIT MANUAL ==== */
/* ==== GENERATED:travel BEGIN ==== */
/* Tiket & Akomodasi - renderShell() travel_request_suitelet.js */
body.page-travel, body.page-travel * { box-sizing: border-box; }
body.page-travel { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background: linear-gradient(135deg, #0a2e6b 0%, #0a3d8f 45%, #eef4ff 100%); min-height:100vh; margin:0; color:#222; -webkit-font-smoothing: antialiased; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
body.page-travel .wrap { max-width: 1500px; margin: 0 auto; padding: 20px; }
body.page-travel .login-card { background:#fff; border-radius:18px; padding:40px 34px 34px; margin:60px auto 16px; max-width:400px; box-shadow:0 20px 60px rgba(10,46,107,.3), 0 2px 8px rgba(10,46,107,.08); border-top:4px solid; border-image:linear-gradient(90deg,#0a2e6b,#1a5cb8) 1; animation: fadeInUp .4s cubic-bezier(.2,.7,.3,1) both; }
body.page-travel .login-logo-wrap { text-align:center; margin-bottom:12px; }
body.page-travel .login-logo { height:72px; }
body.page-travel .login-title { font-size:21px; font-weight:700; text-align:center; margin:4px 0 0; color:#0a2e6b; letter-spacing:-.2px; }
body.page-travel .login-subtitle { text-align:center; font-size:12px; font-weight:700; letter-spacing:.08em; color:#7691c4; text-transform:uppercase; margin-bottom:6px; }
body.page-travel .login-footer { text-align:center; font-size:11px; color:#aaa; margin-top:18px; }
body.page-travel.app-mode { background: linear-gradient(135deg, #0a2e6b 0%, #0a3d8f 45%, #eef4ff 100%); background-attachment: fixed; }
body.page-travel .card { background:#fff; border-radius:14px; padding:24px; margin-bottom:16px; box-shadow:0 1px 3px rgba(10,46,107,.06), 0 10px 28px rgba(10,46,107,.07); animation: fadeInUp .32s cubic-bezier(.2,.7,.3,1) both; }
body.page-travel h1 { font-size:19px; margin:0 0 4px; letter-spacing:-.2px; }
body.page-travel h2 { font-size:12px; margin:22px 0 10px; color:#8a93a5; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
body.page-travel .sub { color:#777; font-size:14px; margin-bottom:20px; }
body.page-travel label { display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:#4a5568; }
body.page-travel .en { font-weight:400; font-size:11px; color:#9aa2b1; font-style:italic; }
body.page-travel label .en { display:block; margin-top:1px; }
body.page-travel h2 .en { text-transform:none; letter-spacing:0; margin-left:4px; }
body.page-travel input,
body.page-travel select,
body.page-travel textarea { width:100%; padding:11px 13px; border:1.5px solid #e3e8f0; border-radius:9px; font-size:14.5px; margin-bottom:15px; background:#fbfcfe; outline:none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
body.page-travel input:focus,
body.page-travel select:focus,
body.page-travel textarea:focus { border-color:#0a2e6b; box-shadow:0 0 0 3px rgba(10,46,107,.08); background:#fff; }
body.page-travel select { cursor:pointer; }
body.page-travel input[readonly] { background:#f1f3f7; color:#5a6272; }
body.page-travel textarea { min-height:80px; }
body.page-travel .btn { display:inline-block; padding:11px 20px; border:none; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; transition: filter .12s ease, transform .1s ease, box-shadow .15s ease, background .15s ease; }
body.page-travel .btn-primary { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; width:100%; box-shadow:0 6px 16px rgba(10,46,107,.25); }
body.page-travel .btn-secondary { background:#f1f4f9; color:#333; border:1px solid #e3e8f0; }
body.page-travel .btn-secondary:hover:not(:disabled) { background:#e4e9f2; }
body.page-travel .btn-sm { padding:7px 13px; font-size:13px; border-radius:8px; }
body.page-travel .btn-xs { padding:5px 10px; font-size:11.5px; border-radius:7px; }
body.page-travel .btn:hover:not(:disabled) { filter: brightness(1.05); }
body.page-travel .btn:active:not(:disabled) { transform: scale(.97); }
body.page-travel .btn:disabled { opacity:0.55; cursor:not-allowed; filter:none; box-shadow:none; }
body.page-travel .err { color:#c0392b; font-size:14px; margin-top:8px; }
body.page-travel .empty-state { text-align:center; padding:44px 20px; color:#8a8f98; animation: fadeIn .4s ease both; }
body.page-travel .empty-state .es-icon { font-size:30px; opacity:0.55; margin-bottom:10px; }
body.page-travel .empty-state .es-title { font-size:13.5px; color:#666; font-weight:600; }
body.page-travel .empty-state .es-sub { font-size:12px; color:#9a9fa8; margin-top:4px; }
body.page-travel .btn-spinner { display:inline-block; width:11px; height:11px; border:2px solid rgba(255,255,255,0.5); border-top-color:#fff; border-radius:50%; margin-right:6px; vertical-align:-1px; animation: btnspin 0.6s linear infinite; }
body.page-travel .btn-secondary .btn-spinner { border-color:rgba(0,0,0,0.25); border-top-color:#555; }
@keyframes btnspin { to { transform: rotate(360deg); } }
body.page-travel .hidden { display:none !important; }
body.page-travel .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
@media (max-width: 640px) {
  body.page-travel .grid2 { grid-template-columns:1fr; }
}
body.page-travel table { width:100%; border-collapse:collapse; font-size:13.5px; }
body.page-travel th,
body.page-travel td { padding:9px 10px; text-align:left; border:none; border-bottom:1px solid #f0f2f7; }
body.page-travel th { background:transparent; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#9aa2b1; font-weight:700; border-bottom:2px solid #eef1f6; white-space:nowrap; }
body.page-travel tbody tr { transition: background .12s ease; }
body.page-travel tbody tr:nth-child(even) { background:rgba(10,46,107,.022); }
body.page-travel tbody tr:hover { background:rgba(10,46,107,.05); }
body.page-travel .header-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
body.page-travel .sticky-top-bar { position:fixed; top:0; left:0; right:0; z-index:40; background:#fff; border-bottom:1px solid #eef1f6; box-shadow:0 2px 12px rgba(10,46,107,.07); }
body.page-travel .sticky-top-bar-inner { max-width:1200px; margin:0 auto; padding:18px 20px 12px; }
body.page-travel .userinfo { font-size:13px; color:#666; }
body.page-travel .tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
body.page-travel .tab-btn { padding:9px 16px; border-radius:9px; border:1px solid #e3e8f0; background:#fff; cursor:pointer; font-size:14px; font-weight:600; color:#4a5568; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
body.page-travel .tab-btn:hover { border-color:#c8d3e6; }
body.page-travel .tab-btn.active { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; border-color:#0a2e6b; box-shadow:0 6px 16px rgba(10,46,107,.25); }
body.page-travel .subtab-btn { padding:9px 14px; border:none; border-bottom:3px solid transparent; background:transparent; cursor:pointer; font-size:13.5px; color:#8a93a5; font-weight:600; margin-bottom:-2px; transition: color .15s ease, border-color .15s ease; }
body.page-travel .subtab-btn:hover { color:#4a5568; }
body.page-travel .subtab-btn.active { color:#0a3d8f; border-bottom-color:#c5a059; }
body.page-travel .status-badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:10.5px; background:#eef1f6; color:#556; font-weight:700; letter-spacing:.01em; }
body.page-travel .admin-table th,
body.page-travel .admin-table td { padding:6px 8px; font-size:12.5px; }
body.page-travel .truncate-cell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.page-travel .row-actions { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
body.page-travel .row-actions .btn { width:auto; flex:0 0 auto; margin:0; }
body.page-travel .btn-danger-soft { background:#fff; color:#c0392b; border:1px solid #e6b8b2; }
body.page-travel .btn-danger-soft:hover:not(:disabled) { background:#fdf3f2; border-color:#d9998f; }
body.page-travel .admin-table td,
body.page-travel .admin-table th { vertical-align:top; }
@keyframes spin { to { transform:rotate(360deg); } }
body.page-travel .label-bantuan { cursor:help; border-bottom:1px dotted #b6c0d2; }
body.page-travel .label-bantuan:hover { border-bottom-color:#0a2e6b; color:#0a2e6b; }
body.page-travel .bantuan-pop { position:fixed; z-index:900; max-width:290px; background:#0a2e6b; color:#fff; border-radius:11px; padding:13px 15px; font-size:12.5px; line-height:1.6; box-shadow:0 18px 44px rgba(10,46,107,.4); animation:fadeIn .12s ease both; }
body.page-travel .bantuan-pop .judul { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#9db4dd; margin-bottom:5px; padding-right:20px; }
body.page-travel .bantuan-pop .tutup { position:absolute; top:9px; right:10px; width:20px; height:20px; border:none; background:rgba(255,255,255,.14); color:#fff; border-radius:6px; cursor:pointer; font-size:13px; line-height:1; padding:0; }
body.page-travel .bantuan-pop .tutup:hover { background:rgba(255,255,255,.26); }
body.page-travel .topbar-brand { display:flex; align-items:center; gap:13px; min-width:0; }
body.page-travel .topbar-badge { width:44px; height:44px; border-radius:13px; background:linear-gradient(135deg,#0a2e6b,#0a3d8f); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:17px; box-shadow:0 6px 14px rgba(10,46,107,.3); flex-shrink:0; letter-spacing:.5px; }
body.page-travel .topbar-title { font-size:16.5px; font-weight:700; color:#0a2e6b; margin:0; letter-spacing:-.2px; }
body.page-travel .topbar-sub { font-size:11.5px; color:#9aa3b5; margin:0; }
body.page-travel .topbar-user { display:flex; align-items:center; gap:12px; text-align:right; }
body.page-travel .topbar-user .name { font-weight:700; font-size:13.5px; color:#222; line-height:1.3; }
body.page-travel .topbar-user .role { font-size:11px; color:#9aa3b5; line-height:1.3; }
body.page-travel .avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; letter-spacing:.2px; background:linear-gradient(135deg,#0a2e6b,#0a3d8f); }
body.page-travel .md-sorotan { display:grid; gap:9px; margin:15px 0 4px; }
body.page-travel .md-sorotan-1 { grid-template-columns:1fr; }
body.page-travel .md-sorotan-2 { grid-template-columns:1fr 1fr; }
body.page-travel .md-sorotan-3 { grid-template-columns:1fr 1fr 1fr; }
body.page-travel .md-kv { display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; }
body.page-travel .md-kv-lebar { grid-column:1 / -1; }
@media (max-width: 720px) {
  body.page-travel .wrap { padding:12px; }
  body.page-travel .card { padding:16px; border-radius:12px; }
  body.page-travel .sticky-top-bar { margin:-16px -16px 12px; padding:14px 16px 10px; border-radius:12px 12px 0 0; }
  body.page-travel .login-card { margin:24px auto 12px; padding:28px 22px 24px; }
  body.page-travel h1 { font-size:17px; }
  body.page-travel .sub { font-size:13px; margin-bottom:14px; }
  body.page-travel .grid2,
  body.page-travel .grid3,
  body.page-travel .form-grid,
  body.page-travel .md-kv { grid-template-columns:1fr; }
  body.page-travel .jenis-grid { grid-template-columns:1fr; }
  body.page-travel .md-sorotan-2,
  body.page-travel .md-sorotan-3 { grid-template-columns:1fr; }
  body.page-travel .jenis-btn { padding:14px 12px; font-size:14px; }
  body.page-travel table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.page-travel th,
  body.page-travel td { padding:8px 9px; }
  body.page-travel th { font-size:10px; }
  body.page-travel .btn { padding:12px 18px; }
  body.page-travel .btn-sm { padding:9px 14px; font-size:13px; }
  body.page-travel .btn-xs { padding:8px 12px; font-size:12px; }
  body.page-travel .row-actions { gap:6px; }
  body.page-travel .header-bar { flex-direction:column; align-items:stretch; gap:12px; }
  body.page-travel .topbar-brand { justify-content:flex-start; }
  body.page-travel .topbar-user { justify-content:space-between; text-align:left; width:100%; }
  body.page-travel .topbar-title { font-size:15.5px; }
  body.page-travel .topbar-badge { width:38px; height:38px; border-radius:11px; font-size:15px; }
  body.page-travel .avatar { width:34px; height:34px; font-size:12px; }
  body.page-travel .tabs { gap:5px; }
  body.page-travel .tab-btn { padding:9px 13px; font-size:13.5px; }
  body.page-travel input,
  body.page-travel select,
  body.page-travel textarea { font-size:16px; }
}
@media (max-width: 420px) {
  body.page-travel .wrap { padding:8px; }
  body.page-travel .card { padding:13px; }
  body.page-travel .sticky-top-bar { margin:-13px -13px 10px; padding:12px 13px 9px; }
  body.page-travel .md-sorotan-1,
  body.page-travel .md-sorotan-2,
  body.page-travel .md-sorotan-3 { grid-template-columns:1fr; }
  body.page-travel .tab-btn { padding:8px 11px; font-size:13px; }
}
/* ==== GENERATED:travel END ==== */

/* ==== GENERATED:travel-print BEGIN ==== */
/* Cetak Tiket & Akomodasi - renderPrintPage() travel_request_suitelet.js */
body.page-travel-print, body.page-travel-print * { box-sizing:border-box; }
html:has(body.page-travel-print),
body.page-travel-print { margin:0; padding:0; }
body.page-travel-print { font-family: Arial, Helvetica, sans-serif; font-size:11.3px; color:#1a1a1a; background:#e9edf3; }
body.page-travel-print .no-print { margin:14px 0; text-align:center; }
body.page-travel-print .measure-box { position:absolute; left:-99999px; top:0; width:277mm; visibility:hidden; }
body.page-travel-print .page { width:297mm; min-height:210mm; margin:0 auto 16px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.15); padding:6mm 10mm 8mm 10mm; }
body.page-travel-print .print-header { display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid #0a2e6b; padding-bottom:7px; margin-bottom:9px; }
body.page-travel-print .print-header img { height:44px; }
body.page-travel-print .print-header .company { text-align:right; }
body.page-travel-print .print-header .company .name { font-size:15.3px; font-weight:700; color:#0a2e6b; }
body.page-travel-print .print-header .company .sub { font-size:9.5px; color:#777; letter-spacing:1px; text-transform:uppercase; }
body.page-travel-print .doc-title { text-align:center; font-size:13.5px; font-weight:700; margin-bottom:1px; }
body.page-travel-print .doc-subtitle { text-align:center; font-size:9.5px; color:#777; font-style:italic; margin-bottom:6px; }
body.page-travel-print .doc-meta { text-align:center; font-size:10px; color:#444; margin-bottom:7px; background:#f7f9fc; padding:4px; border-radius:4px; }
body.page-travel-print .section-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#0a2e6b; border-bottom:1px solid #ddd; padding-bottom:2px; margin:6px 0 3px; }
body.page-travel-print table.info-table { width:100%; border-collapse:collapse; font-size:10.5px; }
body.page-travel-print table.info-table td { padding:1px 4px; vertical-align:top; }
body.page-travel-print table.info-table td.lbl { width:110px; color:#555; font-weight:600; white-space:nowrap; }
body.page-travel-print table.data-table { width:100%; border-collapse:collapse; font-size:10px; }
body.page-travel-print table.data-table.pemohon-table { table-layout:fixed; }
body.page-travel-print table.data-table.pemohon-table td { word-wrap:break-word; overflow-wrap:break-word; }
body.page-travel-print table.data-table th,
body.page-travel-print table.data-table td { border:1px solid #ccc; padding:3px 6px; text-align:left; }
body.page-travel-print table.data-table th { background:#f2f4f8; font-weight:700; }
body.page-travel-print table.data-table tr { page-break-inside:avoid; break-inside:avoid; }
body.page-travel-print .top-grid { display:grid; grid-template-columns: 1fr 1fr; gap:0 24px; }
body.page-travel-print .mid-grid { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0 24px; }
body.page-travel-print .sign-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:14px; page-break-inside:avoid; break-inside:avoid; }
body.page-travel-print .sign-box { border:1px solid #333; border-radius:2px; padding:6px 6px 7px; text-align:center; }
body.page-travel-print .sign-box .role { font-weight:700; font-size:10.5px; }
body.page-travel-print .sign-box .role-sub { font-style:italic; color:#777; font-size:8.5px; margin-top:1px; }
body.page-travel-print .sign-box .role-title { font-style:italic; color:#555; font-size:9.5px; margin-top:5px; min-height:23px; }
body.page-travel-print .sig-badge { display:inline-block; font-size:8.5px; font-weight:bold; padding:3px 9px; border-radius:3px; margin-top:6px; letter-spacing:.2px; }
body.page-travel-print .sig-badge-approved { background:#e6f4ea; color:#1a7d3a; border:1px solid #b7dfc4; }
body.page-travel-print .sig-badge-pending { background:#f2f2f2; color:#888; border:1px solid #ddd; }
body.page-travel-print .sig-timestamp { font-size:8px; color:#888; margin-top:4px; }
body.page-travel-print .sign-box .sign-name { font-weight:700; font-size:10.5px; padding-top:3px; text-transform:uppercase; min-height:14px; white-space:normal; word-wrap:break-word; overflow-wrap:break-word; line-height:1.25; }
body.page-travel-print .sign-box .sign-atas-nama { min-height:10px; font-size:8.5px; font-weight:normal; color:#777; margin-top:2px; line-height:1.2; white-space:normal; word-wrap:break-word; overflow-wrap:break-word; }
body.page-travel-print .page-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:9px; padding-top:5px; border-top:1px solid #ddd; }
body.page-travel-print .page-footer .footer-brand { text-align:left; line-height:1.35; }
body.page-travel-print .page-footer .footer-brand .sys-name { font-size:8.5px; font-weight:600; color:#555; }
body.page-travel-print .page-footer .footer-brand .copyright { font-size:7.5px; color:#999; }
body.page-travel-print .page-footer .footer-page { font-size:8px; color:#999; white-space:nowrap; }
@page pagetravelprint { size: A4 landscape; margin: 0; }
body.page-travel-print { page: pagetravelprint; }
@media print {
  body.page-travel-print { background:#fff; }
  body.page-travel-print .no-print { display:none !important; }
  body.page-travel-print .page { box-shadow:none; margin:0; page-break-after:always; }
  body.page-travel-print .page:last-child { page-break-after:auto; }
}
/* ==== GENERATED:travel-print END ==== */

/* ==== GENERATED:pr BEGIN ==== */
/* Purchase Requisition - renderAppShell() pr_request_suitelet.js */
body.page-pr, body.page-pr * { box-sizing: border-box; }
body.page-pr { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background: linear-gradient(135deg, #0a2e6b 0%, #0a3d8f 45%, #eef4ff 100%); background-attachment: fixed; min-height:100vh; margin:0; color:#222; -webkit-font-smoothing: antialiased; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
body.page-pr .wrap { max-width: 1600px; margin: 0 auto; padding: 20px; }
body.page-pr .login-card { background:#fff; border-radius:18px; padding:40px 34px 34px; margin:60px auto 16px; max-width:400px; box-shadow:0 20px 60px rgba(10,46,107,.3), 0 2px 8px rgba(10,46,107,.08); border-top:4px solid; border-image:linear-gradient(90deg,#0a2e6b,#1a5cb8) 1; animation: fadeInUp .4s cubic-bezier(.2,.7,.3,1) both; }
body.page-pr .login-logo-wrap { text-align:center; margin-bottom:12px; }
body.page-pr .login-logo { height:72px; }
body.page-pr .login-title { font-size:21px; font-weight:700; text-align:center; margin:4px 0 0; color:#0a2e6b; letter-spacing:-.2px; }
body.page-pr .login-subtitle { text-align:center; font-size:12px; font-weight:700; letter-spacing:.08em; color:#7691c4; text-transform:uppercase; margin-bottom:6px; }
body.page-pr .login-footer { text-align:center; font-size:11px; color:#aaa; margin-top:18px; }
body.page-pr .card { background:#fff; border-radius:14px; padding:24px; margin-bottom:16px; box-shadow:0 1px 3px rgba(10,46,107,.06), 0 10px 28px rgba(10,46,107,.07); animation: fadeInUp .32s cubic-bezier(.2,.7,.3,1) both; }
body.page-pr h1 { font-size:19px; margin:0 0 4px; letter-spacing:-.2px; }
body.page-pr h2 { font-size:12px; margin:22px 0 10px; color:#8a93a5; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
body.page-pr .sub { color:#777; font-size:14px; margin-bottom:20px; }
body.page-pr label { display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:#4a5568; }
body.page-pr .en { font-weight:400; font-size:11px; color:#9aa2b1; font-style:italic; }
body.page-pr label .en { display:block; margin-top:1px; }
body.page-pr h2 .en { text-transform:none; letter-spacing:0; margin-left:4px; }
body.page-pr input,
body.page-pr select,
body.page-pr textarea { width:100%; padding:11px 13px; border:1.5px solid #e3e8f0; border-radius:9px; font-size:14.5px; margin-bottom:15px; background:#fbfcfe; outline:none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
body.page-pr input:focus,
body.page-pr select:focus,
body.page-pr textarea:focus { border-color:#0a2e6b; box-shadow:0 0 0 3px rgba(10,46,107,.08); background:#fff; }
body.page-pr input[readonly] { background:#f1f3f7; color:#5a6272; }
body.page-pr textarea { min-height:80px; }
body.page-pr .btn { display:inline-block; padding:11px 20px; border:none; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; transition: filter .12s ease, transform .1s ease, box-shadow .15s ease, background .15s ease; }
body.page-pr .btn:hover:not(:disabled) { filter: brightness(1.05); }
body.page-pr .btn:active:not(:disabled) { transform: scale(.97); }
body.page-pr .btn:disabled { opacity:0.55; cursor:not-allowed; filter:none; box-shadow:none; }
body.page-pr .btn-primary { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; width:100%; box-shadow:0 6px 16px rgba(10,46,107,.25); }
body.page-pr .btn-secondary { background:#f1f4f9; color:#333; border:1px solid #e3e8f0; }
body.page-pr .btn-secondary:hover:not(:disabled) { background:#e4e9f2; }
body.page-pr .btn-danger { background:#fff; color:#c0392b; border:1px solid #e6b8b2; }
body.page-pr .btn-danger:hover:not(:disabled) { background:#fdf3f2; border-color:#d9998f; }
body.page-pr .btn-sm { padding:7px 13px; font-size:13px; width:auto; border-radius:8px; }
body.page-pr .err { color:#c0392b; font-size:14px; margin-top:8px; min-height:16px; }
body.page-pr .req-mark { color:#c0392b; font-weight:700; margin:0 1px; }
body.page-pr .row-actions { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
body.page-pr .row-actions .btn { width:auto; flex:0 0 auto; margin:0; }
body.page-pr .hidden { display:none !important; }
body.page-pr .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
body.page-pr .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px; }
body.page-pr .form-grid { display:grid; grid-template-columns: 1fr; gap:0; }
body.page-pr .form-col-left,
body.page-pr .form-col-right { min-width:0; }
body.page-pr .jenis-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
body.page-pr .jenis-btn { padding:20px 14px; border:1.5px solid #e3e8f0; border-radius:14px; text-align:center; cursor:pointer; font-size:15px; font-weight:600; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
body.page-pr .jenis-btn:hover { transform: translateY(-2px); box-shadow:0 8px 20px rgba(10,46,107,.12); }
body.page-pr .jenis-btn.active { border-color:#0a3d8f; background:#eaf0fb; color:#0a3d8f; box-shadow:0 6px 18px rgba(10,46,107,.14); }
body.page-pr table { width:100%; border-collapse:collapse; font-size:13.5px; }
body.page-pr th,
body.page-pr td { padding:9px 10px; text-align:left; vertical-align:middle; border:none; border-bottom:1px solid #f0f2f7; }
body.page-pr th { background:transparent; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#9aa2b1; font-weight:700; border-bottom:2px solid #eef1f6; white-space:nowrap; }
body.page-pr tbody tr { transition: background .12s ease; }
body.page-pr tbody tr:nth-child(even) { background:rgba(10,46,107,.022); }
body.page-pr tbody tr:hover { background:rgba(10,46,107,.05); }
body.page-pr table input,
body.page-pr table select { margin-bottom:0; padding:7px 9px; font-size:13px; }
body.page-pr .header-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
body.page-pr .sticky-top-bar { position:sticky; top:0; background:#fff; z-index:40; margin:-24px -24px 16px; padding:20px 24px 12px; border-bottom:1px solid #eef1f6; border-radius:14px 14px 0 0; }
body.page-pr .userinfo { font-size:13px; color:#666; }
body.page-pr .tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
body.page-pr .tab-btn { padding:9px 16px; border-radius:9px; border:1px solid #e3e8f0; background:#fff; cursor:pointer; font-size:14px; font-weight:600; color:#4a5568; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
body.page-pr .tab-btn:hover { border-color:#c8d3e6; }
body.page-pr .tab-btn.active { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; border-color:#0a2e6b; box-shadow:0 6px 16px rgba(10,46,107,.25); }
body.page-pr .autocomplete-box { position:relative; }
body.page-pr .ac-list { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #e3e8f0; border-radius:11px; max-height:180px; overflow:auto; z-index:20; display:none; box-shadow:0 12px 32px rgba(10,46,107,.14); }
body.page-pr .ac-list.show { display:block; }
body.page-pr .ac-item { padding:9px 11px; cursor:pointer; font-size:13px; }
body.page-pr .ac-item:hover { background:#f0f4ff; }
body.page-pr .emp-result-item { padding:10px 12px; cursor:pointer; font-size:13.5px; border-bottom:1px solid #f2f2f2; }
body.page-pr .emp-result-item:hover { background:#f0f4ff; }
body.page-pr .status-badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:10.5px; background:#eef1f6; color:#556; font-weight:700; letter-spacing:.01em; }
body.page-pr .total-row { display:flex; justify-content:space-between; font-size:15.5px; font-weight:700; padding:11px 0; border-top:2px solid #eef1f6; margin-top:6px; }
body.page-pr .line-table-scroll { max-height:340px; overflow-y:auto; border:1px solid #e3e8f0; border-radius:11px; }
body.page-pr .line-table-scroll table { margin-top:0; border:none; }
body.page-pr .line-table-scroll th { position:sticky; top:0; z-index:5; background:#fff; }
body.page-pr .line-table-scroll td,
body.page-pr .line-table-scroll th { border-left:none; border-right:none; border-top:none; }
body.page-pr .empty-state { text-align:center; padding:44px 20px; color:#8a8f98; animation: fadeIn .4s ease both; }
body.page-pr .empty-state .es-icon { font-size:30px; opacity:0.55; margin-bottom:10px; }
body.page-pr .empty-state .es-title { font-size:13.5px; color:#666; font-weight:600; }
@media (max-width: 940px) {
  body.page-pr .form-grid { grid-template-columns: 1fr; }
  body.page-pr .jenis-grid { grid-template-columns: 1fr 1fr; }
  body.page-pr .grid3 { grid-template-columns: 1fr; }
}
body.page-pr .label-bantuan { cursor:help; border-bottom:1px dotted #b6c0d2; }
body.page-pr .label-bantuan:hover { border-bottom-color:#0a2e6b; color:#0a2e6b; }
body.page-pr .bantuan-pop { position:fixed; z-index:900; max-width:290px; background:#0a2e6b; color:#fff; border-radius:11px; padding:13px 15px; font-size:12.5px; line-height:1.6; box-shadow:0 18px 44px rgba(10,46,107,.4); animation:fadeIn .12s ease both; }
body.page-pr .bantuan-pop .judul { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#9db4dd; margin-bottom:5px; padding-right:20px; }
body.page-pr .bantuan-pop .tutup { position:absolute; top:9px; right:10px; width:20px; height:20px; border:none; background:rgba(255,255,255,.14); color:#fff; border-radius:6px; cursor:pointer; font-size:13px; line-height:1; padding:0; }
body.page-pr .bantuan-pop .tutup:hover { background:rgba(255,255,255,.26); }
body.page-pr .topbar-brand { display:flex; align-items:center; gap:13px; min-width:0; }
body.page-pr .topbar-badge { width:44px; height:44px; border-radius:13px; background:linear-gradient(135deg,#0a2e6b,#0a3d8f); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:17px; box-shadow:0 6px 14px rgba(10,46,107,.3); flex-shrink:0; letter-spacing:.5px; }
body.page-pr .topbar-title { font-size:16.5px; font-weight:700; color:#0a2e6b; margin:0; letter-spacing:-.2px; }
body.page-pr .topbar-sub { font-size:11.5px; color:#9aa3b5; margin:0; }
body.page-pr .topbar-user { display:flex; align-items:center; gap:12px; text-align:right; }
body.page-pr .topbar-user .name { font-weight:700; font-size:13.5px; color:#222; line-height:1.3; }
body.page-pr .topbar-user .role { font-size:11px; color:#9aa3b5; line-height:1.3; }
body.page-pr .avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; letter-spacing:.2px; background:linear-gradient(135deg,#0a2e6b,#0a3d8f); }
body.page-pr .md-sorotan { display:grid; gap:9px; margin:15px 0 4px; }
body.page-pr .md-sorotan-1 { grid-template-columns:1fr; }
body.page-pr .md-sorotan-2 { grid-template-columns:1fr 1fr; }
body.page-pr .md-sorotan-3 { grid-template-columns:1fr 1fr 1fr; }
body.page-pr .md-kv { display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; }
body.page-pr .md-kv-lebar { grid-column:1 / -1; }
@media (max-width: 720px) {
  body.page-pr .wrap { padding:12px; }
  body.page-pr .card { padding:16px; border-radius:12px; }
  body.page-pr .sticky-top-bar { margin:-16px -16px 12px; padding:14px 16px 10px; border-radius:12px 12px 0 0; }
  body.page-pr .login-card { margin:24px auto 12px; padding:28px 22px 24px; }
  body.page-pr h1 { font-size:17px; }
  body.page-pr .sub { font-size:13px; margin-bottom:14px; }
  body.page-pr .grid2,
  body.page-pr .grid3,
  body.page-pr .form-grid,
  body.page-pr .md-kv { grid-template-columns:1fr; }
  body.page-pr .jenis-grid { grid-template-columns:1fr; }
  body.page-pr .md-sorotan-2,
  body.page-pr .md-sorotan-3 { grid-template-columns:1fr; }
  body.page-pr .jenis-btn { padding:14px 12px; font-size:14px; }
  body.page-pr table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.page-pr th,
  body.page-pr td { padding:8px 9px; }
  body.page-pr th { font-size:10px; }
  body.page-pr .btn { padding:12px 18px; }
  body.page-pr .btn-sm { padding:9px 14px; font-size:13px; }
  body.page-pr .btn-xs { padding:8px 12px; font-size:12px; }
  body.page-pr .row-actions { gap:6px; }
  body.page-pr .header-bar { flex-direction:column; align-items:stretch; gap:12px; }
  body.page-pr .topbar-brand { justify-content:flex-start; }
  body.page-pr .topbar-user { justify-content:space-between; text-align:left; width:100%; }
  body.page-pr .topbar-title { font-size:15.5px; }
  body.page-pr .topbar-badge { width:38px; height:38px; border-radius:11px; font-size:15px; }
  body.page-pr .avatar { width:34px; height:34px; font-size:12px; }
  body.page-pr .tabs { gap:5px; }
  body.page-pr .tab-btn { padding:9px 13px; font-size:13.5px; }
  body.page-pr input,
  body.page-pr select,
  body.page-pr textarea { font-size:16px; }
}
@media (max-width: 420px) {
  body.page-pr .wrap { padding:8px; }
  body.page-pr .card { padding:13px; }
  body.page-pr .sticky-top-bar { margin:-13px -13px 10px; padding:12px 13px 9px; }
  body.page-pr .md-sorotan-1,
  body.page-pr .md-sorotan-2,
  body.page-pr .md-sorotan-3 { grid-template-columns:1fr; }
  body.page-pr .tab-btn { padding:8px 11px; font-size:13px; }
}
@keyframes spin { to { transform:rotate(360deg); } }
/* ==== GENERATED:pr END ==== */

/* ==== GENERATED:pr-print BEGIN ==== */
/* Cetak Purchase Requisition - renderPrintView() pr_request_suitelet.js */
body.page-pr-print, body.page-pr-print * { box-sizing:border-box; margin:0; padding:0; font-family:Arial,Helvetica,sans-serif; }
html:has(body.page-pr-print),
body.page-pr-print { margin:0; padding:0; }
body.page-pr-print { font-size:11px; color:#1a1a1a; background:#e9edf3; }
body.page-pr-print .print-btn { margin:14px 0; text-align:center; }
@media print {
  body.page-pr-print .print-btn { display:none !important; }
  body.page-pr-print { background:#fff; }
}
body.page-pr-print .measure-box { position:absolute; left:-99999px; top:0; width:273mm; visibility:hidden; }
body.page-pr-print .page { width:297mm; min-height:210mm; margin:0 auto 16px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.15); padding:10mm 12mm; }
@page pageprprint { size:A4 landscape; margin:0; }
body.page-pr-print { page: pageprprint; }
@media print {
  body.page-pr-print .page { box-shadow:none; margin:0; page-break-after:always; }
  body.page-pr-print .page:last-child { page-break-after:auto; }
}
body.page-pr-print table { width:100%; border-collapse:collapse; }
body.page-pr-print td,
body.page-pr-print th { border:1px solid #ccc; padding:5px 8px; font-size:11px; vertical-align:top; }
body.page-pr-print thead { display:table-header-group; }
body.page-pr-print tr { page-break-inside:avoid; }
body.page-pr-print .en { display:block; font-weight:400; font-size:8.5px; color:#888; font-style:italic; margin-top:1px; }
body.page-pr-print .topRow { display:flex; align-items:center; gap:14px; padding-bottom:8px; margin-bottom:8px; }
body.page-pr-print .logoWrap img { height:42px; }
body.page-pr-print .companyBlock { text-align:center; flex:1; }
body.page-pr-print .companyBlock h1 { font-size:16px; color:#0a2e6b; letter-spacing:.3px; }
body.page-pr-print .companyBlock .formTitle { font-size:14px; font-weight:bold; margin-top:2px; }
body.page-pr-print .companyBlock .sub { font-size:10.5px; color:#555; font-style:italic; }
body.page-pr-print .docRowWrap { border-bottom:3px solid #0a2e6b; padding-bottom:10px; margin-bottom:10px; }
body.page-pr-print .docRow { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
body.page-pr-print .docCell { border:1.5px solid #0a2e6b; border-radius:3px; padding:5px 10px; display:flex; align-items:baseline; justify-content:center; gap:10px; }
body.page-pr-print .docCell .docLabel { font-size:9.5px; color:#555; font-weight:600; white-space:nowrap; }
body.page-pr-print .docCell .en { display:inline; font-style:italic; color:#999; font-weight:normal; }
body.page-pr-print .docCell b { font-size:13px; white-space:nowrap; }
body.page-pr-print table.info { margin-bottom:8px; }
body.page-pr-print table.info td { font-size:11px; }
body.page-pr-print table.info td.label { background:#eef1f4; color:#555; width:14%; }
body.page-pr-print .enLabel { display:block; font-style:italic; color:#999; font-size:9px; font-weight:normal; }
body.page-pr-print .jenisWrap { border:1px solid #ccc; padding:6px 12px; margin-bottom:8px; }
body.page-pr-print .jenisWrap .headLabel { font-size:11.5px; font-weight:bold; margin-bottom:6px; }
body.page-pr-print .jenisGrid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:0 10px; }
body.page-pr-print .jenisCell { font-size:11px; padding:2px 0; }
body.page-pr-print .jenisCellActive { font-weight:bold; color:#0a2e6b; }
body.page-pr-print .subCat { font-size:10px; font-weight:bold; color:#0a2e6b; margin-top:2px; margin-left:21px; }
body.page-pr-print .jbox { display:inline-block; width:16px; height:16px; border:1.5px solid #333; text-align:center; line-height:15px; font-weight:bold; font-size:10px; margin-right:5px; }
body.page-pr-print .jactive { background:#0a2e6b; color:#fff; border-color:#0a2e6b; }
body.page-pr-print table.items,
body.page-pr-print table:not(.info):not(.sig) {  }
body.page-pr-print th { background:#0a2e6b; color:#fff; font-size:10px; text-align:left; }
body.page-pr-print th.c,
body.page-pr-print td.c { text-align:center; }
body.page-pr-print th.r,
body.page-pr-print td.r { text-align:right; }
body.page-pr-print td.r,
body.page-pr-print th.r { text-align:right; }
body.page-pr-print .muted { color:#777; font-size:9.5px; }
body.page-pr-print .totalRow td { background:#eef1f4; font-weight:bold; }
body.page-pr-print .penjelasan { border:1px solid #ccc; padding:7px 10px; margin:10px 0 14px; font-size:11px; }
body.page-pr-print .penjelasan .en { display:inline; font-style:italic; color:#999; font-size:9.5px; font-weight:normal; }
body.page-pr-print table.sig { table-layout:fixed; page-break-inside:avoid; }
body.page-pr-print table.sig td { border:1px solid #333; padding:9px 6px; text-align:center; }
body.page-pr-print .siglabel { font-size:10.5px; font-weight:bold; }
body.page-pr-print .siglabel .en { display:block; font-weight:normal; font-style:italic; font-size:9px; color:#555; }
body.page-pr-print .jabatan { font-size:10.5px; font-weight:bold; margin-top:2px; }
body.page-pr-print .sig-badge { display:inline-block; font-size:8.5px; font-weight:bold; padding:3px 9px; border-radius:3px; margin-top:6px; letter-spacing:.2px; }
body.page-pr-print .sig-badge-approved { background:#e6f4ea; color:#1a7d3a; border:1px solid #b7dfc4; }
body.page-pr-print .sig-badge-pending { background:#f2f2f2; color:#888; border:1px solid #ddd; }
body.page-pr-print .sig-timestamp { font-size:8px; color:#888; margin-top:4px; }
body.page-pr-print .signame { border-top:1px solid #333; padding-top:5px; margin-top:10px; white-space:normal; word-wrap:break-word; overflow-wrap:break-word; line-height:1.25; }
body.page-pr-print .sigatasnama { min-height:10px; font-size:8.5px; font-weight:normal; color:#777; margin-top:2px; line-height:1.2; white-space:normal; word-wrap:break-word; overflow-wrap:break-word; }
body.page-pr-print .headLabel { font-size:11.5px; font-weight:bold; color:#0a2e6b; }
body.page-pr-print .page-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:9px; padding-top:5px; border-top:1px solid #ddd; }
body.page-pr-print .page-footer .footer-brand { text-align:left; line-height:1.35; }
body.page-pr-print .page-footer .footer-brand .sys-name { font-size:8.5px; font-weight:600; color:#555; }
body.page-pr-print .page-footer .footer-brand .copyright { font-size:7.5px; color:#999; }
body.page-pr-print .page-footer .footer-page { font-size:8px; color:#999; white-space:nowrap; }
/* ==== GENERATED:pr-print END ==== */

/* ==== GENERATED:hub BEGIN ==== */
/* Approval Hub - renderAppShell() approval_hub_suitelet.js */
body.page-hub, body.page-hub * { box-sizing: border-box; }
body.page-hub { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background: linear-gradient(135deg, #0a2e6b 0%, #0a3d8f 45%, #eef4ff 100%); background-attachment: fixed; min-height: 100vh; margin: 0; color: #222; -webkit-font-smoothing: antialiased; }
body.page-hub .hidden { display: none !important; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
body.page-hub .fade-in { animation: fadeInUp .32s cubic-bezier(.2,.7,.3,1) both; }
body.page-hub .login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
body.page-hub .login-card { background: #fff; border-radius: 18px; padding: 42px 36px 34px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(10,46,107,.3), 0 2px 8px rgba(10,46,107,.08); animation: fadeInUp .4s cubic-bezier(.2,.7,.3,1) both; }
body.page-hub .login-badge { width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 16px; background: linear-gradient(135deg, #0a2e6b, #0a3d8f); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .5px; box-shadow: 0 8px 20px rgba(10,46,107,.35); }
body.page-hub .login-title { font-size: 21px; font-weight: 700; text-align: center; margin: 4px 0 3px; color: #0a2e6b; letter-spacing: -.2px; }
body.page-hub .login-sub { font-size: 12.5px; text-align: center; color: #97a0b3; margin: 0 0 28px; }
body.page-hub .login-card label { display: block; font-size: 12px; font-weight: 700; color: #4a5568; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
body.page-hub .login-card input { width: 100%; padding: 11px 13px; border: 1.5px solid #e3e8f0; border-radius: 9px; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; background: #fbfcfe; }
body.page-hub .login-card input:focus { border-color: #0a2e6b; box-shadow: 0 0 0 3px rgba(10,46,107,.08); background: #fff; }
body.page-hub .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 9px; padding: 11px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
body.page-hub .btn:active { transform: scale(.97); }
body.page-hub .btn-primary { background: linear-gradient(135deg, #0a2e6b, #0a3d8f); color: #fff; width: 100%; box-shadow: 0 6px 16px rgba(10,46,107,.25); }
body.page-hub #loginBtn { margin-top: 22px; }
body.page-hub .btn-primary:hover { box-shadow: 0 8px 22px rgba(10,46,107,.35); transform: translateY(-1px); }
body.page-hub .btn-secondary { background: #f1f4f9; color: #333; }
body.page-hub .btn-secondary:hover { background: #e4e9f2; }
body.page-hub .btn-sm { padding: 6.5px 13px; font-size: 12px; }
body.page-hub .btn:disabled { opacity: .55; cursor: not-allowed; }
body.page-hub .login-err { color: #c0392b; font-size: 12.5px; margin-top: 12px; text-align: center; min-height: 16px; }
body.page-hub #appShell { max-width: 1440px; margin: 0 auto; padding: 24px 20px 60px; }
body.page-hub .topbar { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.98); border-radius: 18px; padding: 18px 26px; margin-bottom: 16px; box-shadow: 0 10px 30px rgba(10,46,107,.15), 0 1px 3px rgba(10,46,107,.06); animation: fadeInUp .35s cubic-bezier(.2,.7,.3,1) both; }
body.page-hub .topbar-brand { display: flex; align-items: center; gap: 13px; }
body.page-hub .topbar-badge { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, #0a2e6b, #0a3d8f); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 17px; box-shadow: 0 6px 14px rgba(10,46,107,.3); }
body.page-hub .topbar-title { font-size: 16.5px; font-weight: 700; color: #0a2e6b; margin: 0; letter-spacing: -.2px; }
body.page-hub .topbar-sub { font-size: 11.5px; color: #9aa3b5; margin: 0; }
body.page-hub .topbar-user { text-align: right; display: flex; align-items: center; gap: 12px; }
body.page-hub .topbar-user .name { font-weight: 700; font-size: 13.5px; color: #222; }
body.page-hub .topbar-user .role { font-size: 11px; color: #9aa3b5; }
body.page-hub .avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: .2px; }
body.page-hub .avatar-sm { width: 26px; height: 26px; font-size: 10.5px; }
body.page-hub .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
body.page-hub .stat-card { background: rgba(255,255,255,.97); border-radius: 14px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(10,46,107,.1); animation: fadeInUp .4s cubic-bezier(.2,.7,.3,1) both; position: relative; overflow: hidden; }
body.page-hub .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent, #0a2e6b); }
body.page-hub .stat-card .num { font-size: 26px; font-weight: 700; color: #1a2744; line-height: 1.1; letter-spacing: -.5px; }
body.page-hub .stat-card .lbl { font-size: 11.5px; color: #97a0b3; margin-top: 4px; font-weight: 600; }
body.page-hub .stat-card.total .num { color: #0a2e6b; }
body.page-hub .card { background: #fff; border-radius: 18px; padding: 26px; box-shadow: 0 10px 30px rgba(10,46,107,.1), 0 1px 3px rgba(10,46,107,.04); }
body.page-hub .tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
body.page-hub .tab-btn { background: rgba(255,255,255,.88); border: none; border-radius: 11px; padding: 11px 20px; font-size: 13.5px; font-weight: 600; color: #556; cursor: pointer; transition: all .18s ease; display: flex; align-items: center; gap: 7px; }
body.page-hub .tab-btn:hover { background: #fff; color: #0a2e6b; transform: translateY(-1px); }
body.page-hub .tab-btn.active { background: linear-gradient(135deg, #0a2e6b, #0a3d8f); color: #fff; box-shadow: 0 6px 16px rgba(10,46,107,.3); }
body.page-hub .badge-count { background: #c0392b; color: #fff; border-radius: 10px; padding: 1.5px 7px; font-size: 10.5px; font-weight: 700; }
body.page-hub .tab-btn.active .badge-count { background: rgba(255,255,255,.25); }
body.page-hub .subtabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid #f0f2f7; }
body.page-hub .subtab-btn { background: transparent; border: none; padding: 10px 16px; font-size: 13px; font-weight: 600; color: #97a0b3; cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -2px; transition: all .18s ease; }
body.page-hub .subtab-btn:hover { color: #0a2e6b; }
body.page-hub .subtab-btn.active { color: #0a2e6b; border-bottom-color: #c5a059; }
body.page-hub select.jenis-filter { padding: 9px 14px; border: 1.5px solid #e3e8f0; border-radius: 9px; font-size: 13px; color: #333; background: #fbfcfe; font-weight: 500; }
body.page-hub .jenis-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
body.page-hub .jenis-tab-btn { background: rgba(10,46,107,.05); border: 1.5px solid transparent; border-radius: 20px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; color: #556; cursor: pointer; transition: all .15s ease; }
body.page-hub .jenis-tab-btn:hover { background: rgba(10,46,107,.1); color: #0a2e6b; }
body.page-hub .jenis-tab-btn.active { background: #0a2e6b; color: #fff; }
body.page-hub .toolbar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
body.page-hub .search-box { flex: 1; min-width: 200px; padding: 9px 14px; border: 1.5px solid #e3e8f0; border-radius: 9px; font-size: 13px; color: #333; background: #fbfcfe; transition: border-color .15s, box-shadow .15s; }
body.page-hub .search-box:focus { outline: none; border-color: #0a2e6b; box-shadow: 0 0 0 3px rgba(10,46,107,.08); background: #fff; }
body.page-hub .action-btn-group { display: flex; flex-direction: column; gap: 4px; min-width: 92px; }
body.page-hub .action-btn-group .btn { width: 100%; justify-content: center; white-space: nowrap; padding: 5px 8px; font-size: 11px; margin-top: 0; }
body.page-hub table { width: 100%; border-collapse: collapse; font-size: 12px; }
body.page-hub thead th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: #a3aabb; padding: 8px 7px; border-bottom: 2px solid #f0f2f7; white-space: nowrap; font-weight: 700; position: sticky; top: 0; background: #fdfdfe; z-index: 3; box-shadow: 0 1px 0 #eef1f6; }
body.page-hub tbody td { padding: 7px 7px; border-bottom: 1px solid #f4f5f9; vertical-align: middle; }
body.page-hub tbody tr { transition: background .12s ease; }
body.page-hub tbody tr:nth-child(even) { background: rgba(10,46,107,.028); }
body.page-hub tbody tr:hover { background: rgba(197,160,89,.09); }
body.page-hub .name-cell { display: flex; align-items: center; gap: 7px; }
body.page-hub .table-wrap { overflow: auto; max-height: 58vh; border-radius: 10px; }
body.page-hub .truncate-cell { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
body.page-hub .status-badge { display: inline-block; padding: 3px 8px; border-radius: 20px; font-size: 10px; background: #eef1f6; color: #556; font-weight: 700; letter-spacing: .01em; }
body.page-hub .empty-state { text-align: center; padding: 56px 20px; animation: fadeIn .4s ease both; }
body.page-hub .empty-state .icon-wrap { width: 56px; height: 56px; border-radius: 16px; background: #f1f4f9; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 24px; }
body.page-hub .empty-state .title { font-size: 15px; font-weight: 700; color: #444; margin-bottom: 4px; }
body.page-hub .empty-state .sub { font-size: 12.5px; color: #9aa3b5; }
body.page-hub .loading-row { padding: 20px; text-align: center; color: #9aa3b5; font-size: 13px; }
body.page-hub .skeleton-wrap { padding: 10px 4px; }
body.page-hub .skeleton-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f4f5f9; }
body.page-hub .skeleton-bar { height: 12px; border-radius: 6px; margin-bottom: 8px; background: linear-gradient(90deg, #eef1f6 25%, #f6f8fb 37%, #eef1f6 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
body.page-hub .spinner { display: inline-block; width: 16px; height: 16px; border: 2.5px solid #e3e8f0; border-top-color: #0a2e6b; border-radius: 50%; animation: spin .8s linear infinite; margin-right: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
body.page-hub .confirm-overlay { position: fixed; inset: 0; background: rgba(8,16,32,.62); z-index: 700; backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .16s ease both; }
body.page-hub .confirm-card { background: #fff; border-radius: 18px; max-width: 430px; width: 100%; overflow: hidden; box-shadow: 0 26px 80px rgba(0,0,0,.42); animation: fadeInUp .24s cubic-bezier(.2,.7,.3,1) both; }
body.page-hub .confirm-body { padding: 28px 28px 20px; text-align: center; }
body.page-hub .confirm-badge { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
body.page-hub .confirm-title { font-size: 17px; font-weight: 700; color: #0a2e6b; margin: 0 0 5px; letter-spacing: -.01em; }
body.page-hub .confirm-sub { font-size: 11.5px; color: #9aa3b5; font-style: italic; margin-bottom: 18px; }
body.page-hub .decision-strip { border: 1px solid #eef1f6; border-radius: 12px; padding: 14px 16px; text-align: left; background: #fbfcfe; margin-bottom: 16px; }
body.page-hub .decision-row { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; padding: 3px 0; }
body.page-hub .decision-row .k { color: #7a8699; white-space: nowrap; }
body.page-hub .decision-row .v { color: #1f2937; font-weight: 600; text-align: right; }
body.page-hub .decision-amount { border-top: 1px dashed #e3e8f0; margin-top: 11px; padding-top: 11px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
body.page-hub .decision-amount .k { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #9aa3b5; }
body.page-hub .decision-amount .v { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
body.page-hub .confirm-note { font-size: 12px; color: #7a8699; line-height: 1.55; text-align: left; }
body.page-hub .confirm-actions { display: flex; gap: 8px; padding: 4px 28px 26px; }
body.page-hub .confirm-actions .btn { flex: 1; margin-top: 0; }
body.page-hub .process-overlay { position: fixed; inset: 0; background: rgba(8,16,32,.72); z-index: 800; backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .16s ease both; }
body.page-hub .process-card { background: #fff; border-radius: 16px; padding: 30px 40px; text-align: center; min-width: 250px; box-shadow: 0 24px 70px rgba(0,0,0,.38); }
body.page-hub .process-ring { width: 42px; height: 42px; border: 3px solid #e8ecf3; border-top-color: #0a2e6b; border-radius: 50%; animation: spin .75s linear infinite; margin: 0 auto 16px; }
body.page-hub .process-label { font-size: 14px; font-weight: 600; color: #0a2e6b; }
body.page-hub .process-hint { font-size: 11.5px; color: #9aa3b5; margin-top: 6px; }
body.page-hub .process-check circle { stroke-dasharray: 166; stroke-dashoffset: 166; animation: drawRing .42s ease forwards; }
body.page-hub .process-check path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: drawTick .28s .34s ease forwards; }
@keyframes drawRing { to { stroke-dashoffset: 0; } }
@keyframes drawTick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.page-hub .confirm-overlay,
  body.page-hub .confirm-card,
  body.page-hub .process-overlay { animation: none; }
  body.page-hub .process-ring { animation-duration: 2.4s; }
  body.page-hub .process-check circle,
  body.page-hub .process-check path { animation: none; stroke-dashoffset: 0; }
}
body.page-hub .modal-overlay { position: fixed; inset: 0; background: rgba(8,16,32,.55); z-index: 500; backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .18s ease both; }
body.page-hub .modal-box { background: #fff; border-radius: 18px; padding: 30px; max-width: 460px; width: 100%; box-shadow: 0 24px 70px rgba(0,0,0,.35); animation: fadeInUp .25s cubic-bezier(.2,.7,.3,1) both; }
body.page-hub .modal-box textarea,
body.page-hub .modal-box input[type="password"] { width: 100%; padding: 11px 13px; border: 1.5px solid #e3e8f0; border-radius: 9px; font-size: 13.5px; margin-bottom: 14px; box-sizing: border-box; font-family: inherit; transition: border-color .15s; }
body.page-hub .modal-box textarea:focus,
body.page-hub .modal-box input:focus { outline: none; border-color: #0a2e6b; }
body.page-hub .modal-box textarea { min-height: 76px; resize: vertical; }
body.page-hub .modal-box label { font-size: 12.5px; font-weight: 700; display: block; margin-bottom: 6px; color: #4a5568; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 640px) {
  body.page-hub .topbar { flex-direction: column; gap: 10px; text-align: center; }
  body.page-hub .topbar-user { flex-direction: column; text-align: center; }
  body.page-hub .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  body.page-hub .stat-card .num { font-size: 20px; }
  body.page-hub #appShell { padding: 12px 8px 40px; }
  body.page-hub .tabs { gap: 4px; }
  body.page-hub .tab-btn { padding: 8px 12px; font-size: 12px; }
  body.page-hub .card { padding: 14px; }
  body.page-hub .table-wrap { max-height: 62vh; -webkit-overflow-scrolling: touch; }
  body.page-hub table { font-size: 11px; }
  body.page-hub thead th { padding: 6px 5px; font-size: 8.5px; }
  body.page-hub tbody td { padding: 6px 5px; }
  body.page-hub .action-btn-group { min-width: 74px; }
  body.page-hub .action-btn-group .btn { font-size: 10px; padding: 4px 6px; }
  body.page-hub .modal-box { padding: 20px 16px; max-width: 94vw !important; }
  body.page-hub .toolbar { flex-direction: column; align-items: stretch; }
  body.page-hub .search-box { min-width: 0; }
  body.page-hub .jenis-tabs { gap: 4px; }
  body.page-hub .jenis-tab-btn { padding: 5px 10px; font-size: 11px; }
}
body.page-hub .md-sorotan { display:grid; gap:9px; margin:15px 0 4px; }
body.page-hub .md-sorotan-1 { grid-template-columns:1fr; }
body.page-hub .md-sorotan-2 { grid-template-columns:1fr 1fr; }
body.page-hub .md-sorotan-3 { grid-template-columns:1fr 1fr 1fr; }
body.page-hub .md-kv { display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; }
body.page-hub .md-kv-lebar { grid-column:1 / -1; }
@media (max-width: 720px) {
  body.page-hub .wrap { padding:12px; }
  body.page-hub .card { padding:16px; border-radius:12px; }
  body.page-hub .sticky-top-bar { margin:-16px -16px 12px; padding:14px 16px 10px; border-radius:12px 12px 0 0; }
  body.page-hub .login-card { margin:24px auto 12px; padding:28px 22px 24px; }
  body.page-hub h1 { font-size:17px; }
  body.page-hub .sub { font-size:13px; margin-bottom:14px; }
  body.page-hub .grid2,
  body.page-hub .grid3,
  body.page-hub .form-grid,
  body.page-hub .md-kv { grid-template-columns:1fr; }
  body.page-hub .jenis-grid { grid-template-columns:1fr; }
  body.page-hub .md-sorotan-2,
  body.page-hub .md-sorotan-3 { grid-template-columns:1fr; }
  body.page-hub .jenis-btn { padding:14px 12px; font-size:14px; }
  body.page-hub table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.page-hub th,
  body.page-hub td { padding:8px 9px; }
  body.page-hub th { font-size:10px; }
  body.page-hub .btn { padding:12px 18px; }
  body.page-hub .btn-sm { padding:9px 14px; font-size:13px; }
  body.page-hub .btn-xs { padding:8px 12px; font-size:12px; }
  body.page-hub .row-actions { gap:6px; }
  body.page-hub .tabs { gap:5px; }
  body.page-hub .tab-btn { padding:9px 13px; font-size:13.5px; }
  body.page-hub input,
  body.page-hub select,
  body.page-hub textarea { font-size:16px; }
}
@media (max-width: 420px) {
  body.page-hub .wrap { padding:8px; }
  body.page-hub .card { padding:13px; }
  body.page-hub .sticky-top-bar { margin:-13px -13px 10px; padding:12px 13px 9px; }
  body.page-hub .md-sorotan-1,
  body.page-hub .md-sorotan-2,
  body.page-hub .md-sorotan-3 { grid-template-columns:1fr; }
  body.page-hub .tab-btn { padding:8px 11px; font-size:13px; }
}
body.page-hub .hub-backlink { display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none; font-size:13px; font-weight:600; margin:0 0 12px 4px; }
body.page-hub .hub-backlink:hover { color:#98beff; }
body.page-hub .card { border-radius: 14px; padding: 24px; }
body.page-hub .fat-tab-bar { position:sticky; top:0; background:#fff; z-index:40; margin:-24px -24px 16px; padding:20px 24px 12px; border-bottom:1px solid #eef1f6; border-radius:14px 14px 0 0; }
body.page-hub .fat-tab-bar .tabs { margin-bottom:16px; }
body.page-hub .fat-tab-bar .tab-btn { padding:9px 16px; border-radius:9px; border:1px solid #e3e8f0; background:#fff; font-size:14px; color:#4a5568; transform:none; }
body.page-hub .fat-tab-bar .tab-btn:hover { border-color:#c8d3e6; color:#4a5568; background:#fff; transform:none; }
body.page-hub .fat-tab-bar .tab-btn.active { background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; border-color:#0a2e6b; box-shadow:0 6px 16px rgba(10,46,107,.25); }
/* ==== GENERATED:hub END ==== */

/* ==== AKHIR CSS SUITELET (DIBANGKITKAN) ==== */

/* ============================================================
   KEPALA & LATAR HALAMAN HASIL PORT SUITELET
   (Tiket & Akomodasi, Purchase Requisition, Master Data Request)

   Disamakan dengan Pengajuan Kas: latar wave.svg + gradasi navy, kepala
   (logo, judul, subsidiary, nama, avatar dengan menu Profil/Keluar), tautan
   "Kembali Ke Dashboard", lalu kartu putih dengan tab di bagian atasnya.
   Dipasang oleh tools/<modul>/build-template.js lewat <body class="fat-shell">.
   Semua kelas berawalan fat- supaya tidak bertabrakan dengan CSS suitelet.
   ============================================================ */
@keyframes fatNapasWave {
  0%,100% { background-position:center top, 0% 0%, 0% 100%, 0% 0%; }
  50%     { background-position:center top, 6% 4%, 4% 96%, 0% 0%; }
}
body.fat-shell,
body.fat-shell.app-mode {
  background:
    url('../img/wave.svg') center top / cover no-repeat,
    radial-gradient(1100px 620px at 90% -14%, rgba(197,160,89,.20), transparent 58%),
    radial-gradient(880px 540px at 2% 112%, rgba(20,74,158,.34), transparent 60%),
    linear-gradient(168deg, #05173a 0%, #072250 46%, #030e26 100%);
  background-attachment: fixed;
  animation: fatNapasWave 22s ease-in-out infinite;
  padding: 46px 26px;
  box-sizing: border-box;
}
/* Lebar isi sama dengan Pengajuan Kas (1200px); 20px = padding .wrap suitelet. */
body.fat-shell .wrap { max-width: 1240px; padding-top: 0 !important; }
body.fat-shell .card { box-shadow: 0 20px 54px rgba(0,0,0,.28); }

.fat-top { max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.fat-head { display:flex; align-items:center; flex-wrap:wrap; gap:17px; margin-bottom:24px; }
.fat-brand { display:flex; align-items:center; gap:17px; min-width:0; }
.fat-logo {
  width:52px; height:52px; border-radius:15px; flex:0 0 52px;
  background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; font-weight:800; font-size:16px;
  display:flex; align-items:center; justify-content:center; letter-spacing:.5px;
  box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.1);
}
.fat-apptitle { font-size:19px; font-weight:700; color:#fff; letter-spacing:-.1px; }
.fat-appsub { font-size:12px; color:rgba(255,255,255,.55); margin-top:3px; }
.fat-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.fat-userinfo { text-align:right; }
.fat-uname { font-size:13.5px; font-weight:700; color:#fff; }
.fat-urole { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
.fat-avatarMenu { position:relative; }
.fat-avatar {
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0; letter-spacing:.2px;
  background:linear-gradient(135deg,#0a2e6b,#0a3d8f);
  box-shadow:0 6px 14px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.14);
  border:none; cursor:pointer; padding:0; font-family:inherit;
}
.fat-avatar:hover { box-shadow:0 6px 14px rgba(0,0,0,.35), 0 0 0 2px rgba(197,160,89,.6); }
.fat-avatarDropdown {
  position:absolute; top:calc(100% + 10px); right:0; min-width:170px; background:#fff; border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.28); padding:6px; z-index:60; text-align:left;
}
.fat-avatarDropdown a {
  display:block; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600;
  color:#333; text-decoration:none; cursor:pointer;
}
.fat-avatarDropdown a:hover { background:#f1f4f9; }
.fat-avatarDropdown a.danger { color:#c0392b; }
.fat-backlink {
  display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none;
  font-size:13px; font-weight:600; margin-bottom:14px;
}
.fat-backlink:hover { color:#98beff; }

/* BAR TAB STANDAR - persis .sticky-top-bar di Purchase Requisition: di dalam kartu putih,
   menempel di atas saat digulir, latar putih, garis bawah tipis, sudut atas membulat.
   Ditarik ke tepi kartu lewat margin negatif = padding kartu (24px). Dipakai juga oleh
   Pengajuan Kas (site.css .tabs-bar) dan Approval Hub (gaya disisipkan build-template). */
.fat-tab-bar {
  position:sticky; top:0; background:#fff; z-index:40;
  margin:-24px -24px 16px; padding:20px 24px 12px;
  border-bottom:1px solid #eef1f6; border-radius:14px 14px 0 0;
}
.fat-tab-bar .tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }

/* Tiket & Akomodasi: isi tiap tab adalah .card terpisah. #mainApp dijadikan SATU kartu putih
   (bar tab + isi tab), kartu-kartu tab di dalamnya dipolos-kan. */
body.fat-shell #mainApp.fat-card {
  background:#fff; border-radius:14px; padding:24px; margin-bottom:16px;
  box-shadow:0 20px 54px rgba(0,0,0,.28);
}
body.fat-shell #mainApp.fat-card > .card {
  background:transparent; box-shadow:none; border-radius:0; padding:0; margin:0; animation:none;
}

/* Tombol tab (sama dengan Purchase Requisition / Pengajuan Kas). */
body.fat-shell .tab-btn {
  padding:9px 16px; border-radius:9px; border:1px solid #e3e8f0; background:#fff; cursor:pointer;
  font-size:14px; font-weight:600; color:#4a5568;
}
body.fat-shell .tab-btn:hover { border-color:#c8d3e6; }
body.fat-shell .tab-btn.active {
  background:linear-gradient(135deg,#0a2e6b,#0a3d8f); color:#fff; border-color:#0a2e6b;
  box-shadow:0 6px 16px rgba(10,46,107,.25);
}

@media (max-width: 720px) {
  body.fat-shell { padding:32px 0; }
  .fat-right { width:100%; justify-content:space-between; margin-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  body.fat-shell { animation:none; }
}

/* ============================================================
   KOMPONEN BERSAMA - netsuite-app.js (kelas nsapp-*)
   Loading, toast, modal (konfirmasi / validasi / sukses / info / detail),
   overlay proses, paging tabel, dan bantuan field. Dipakai semua halaman,
   jadi tidak di-scope. Selector diberi induk (.nsapp-overlay, .nsapp-pager,
   .nsapp-help-pop) supaya tidak kalah oleh gaya elemen milik halaman.
   ============================================================ */
@keyframes nsapp-spin { to { transform:rotate(360deg); } }

.nsapp-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.nsapp-overlay.nsapp-overlay-brand { background:rgba(10,46,107,.55); }
.nsapp-overlay.nsapp-pad { padding:20px; }
.nsapp-z-detail { z-index:220; }
.nsapp-z-confirm { z-index:250; }
.nsapp-z-modal { z-index:260; }
.nsapp-z-loading { z-index:300; }
.nsapp-z-process { z-index:500; }

.nsapp-overlay .nsapp-modal {
  background:#fff; border-radius:16px; padding:26px; max-height:92vh; overflow-y:auto;
  box-shadow:0 24px 70px rgba(10,46,107,.35);
}
.nsapp-overlay .nsapp-modal-kecil  { max-width:440px;  width:92%; }
.nsapp-overlay .nsapp-modal-sedang { max-width:640px;  width:94%; }
.nsapp-overlay .nsapp-modal-besar  { max-width:900px;  width:96%; }
.nsapp-overlay .nsapp-modal-lebar  { max-width:1100px; width:97%; }
.nsapp-overlay .nsapp-modal.nsapp-center { text-align:center; max-width:420px; }

.nsapp-overlay .nsapp-spinner {
  width:40px; height:40px; border:4px solid #e0e7ff; border-top-color:#0a2e6b; border-radius:50%;
  margin:0 auto 16px; animation:nsapp-spin .8s linear infinite;
}
.nsapp-overlay .nsapp-spinner.nsapp-spinner-lg { width:46px; height:46px; margin:0 auto 14px; border-color:#dfe6f5; border-top-color:#0a2e6b; }
.nsapp-overlay .nsapp-loading-text { font-size:14px; color:#333; font-weight:600; }

.nsapp-overlay .nsapp-icon { font-size:34px; text-align:center; margin-bottom:6px; }
.nsapp-overlay .nsapp-icon.nsapp-icon-lg { font-size:36px; }
.nsapp-overlay .nsapp-icon.nsapp-icon-xl { font-size:38px; }
.nsapp-overlay .nsapp-title { text-align:center; color:#0a2e6b; margin:0 0 4px; }
.nsapp-overlay .nsapp-title.nsapp-title-sm { font-size:18px; }
.nsapp-overlay .nsapp-title.nsapp-title-left { text-align:left; }
.nsapp-overlay .nsapp-title.nsapp-title-error { color:#c0392b; }
.nsapp-overlay .nsapp-subtitle { font-size:12px; color:#888; margin-bottom:14px; }
.nsapp-overlay .nsapp-text { font-size:14px; line-height:1.6; color:#333; margin-bottom:20px; }
.nsapp-overlay .nsapp-text.nsapp-text-left { font-size:13.5px; line-height:1.65; text-align:left; }
.nsapp-overlay .nsapp-text.nsapp-text-center { text-align:center; line-height:normal; }
.nsapp-overlay .nsapp-text.nsapp-text-intro { margin-bottom:8px; line-height:normal; }
.nsapp-overlay .nsapp-missing { font-size:14px; color:#c0392b; padding-left:20px; margin-bottom:16px; }
.nsapp-overlay .nsapp-missing li { margin-bottom:4px; }
.nsapp-overlay .nsapp-actions { display:flex; gap:8px; }
.nsapp-overlay .nsapp-actions.nsapp-actions-gap { margin-top:10px; }
.nsapp-overlay .nsapp-actions .btn { flex:1; }
.nsapp-overlay .nsapp-btn-full { width:100%; }

.nsapp-overlay .nsapp-detail-rows { margin-bottom:16px; }
.nsapp-overlay .nsapp-detail-row { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid #f0f2f6; font-size:13px; }
.nsapp-overlay .nsapp-detail-label { flex:0 0 40%; color:#6b7280; font-weight:600; }
.nsapp-overlay .nsapp-detail-value { flex:1; color:#333; }

.nsapp-overlay .nsapp-process-box {
  background:#fff; border-radius:18px; padding:34px 30px; text-align:center; min-width:220px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.nsapp-overlay .nsapp-process-label { font-size:14px; font-weight:600; color:#0a2e6b; }
.nsapp-overlay .nsapp-process-label.nsapp-process-done { color:#1a7d3a; }
.nsapp-overlay .nsapp-process-hint { font-size:11.5px; color:#999; margin-top:4px; }
.nsapp-overlay .nsapp-process-check { display:block; margin:0 auto 14px; }

.nsapp-toast {
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:400;
  color:#fff; padding:12px 22px; border-radius:11px; font-size:14px;
  box-shadow:0 16px 44px rgba(10,46,107,.28); max-width:90%; text-align:center;
}
.nsapp-toast.nsapp-toast-info { background:#0a2e6b; }
.nsapp-toast.nsapp-toast-success { background:#1e7e34; }
.nsapp-toast.nsapp-toast-error { background:#c0392b; }

.nsapp-pager {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; font-size:12.5px; color:#555;
}
.nsapp-pager.nsapp-pager-top { padding:2px 2px 12px; }
.nsapp-pager.nsapp-pager-bottom { padding:12px 2px 2px; }
.nsapp-pager .nsapp-pager-nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nsapp-pager .nsapp-page-btn {
  margin:0; width:auto; min-width:30px; padding:4px 9px; font-size:12px; line-height:1.4; border-radius:8px;
  background:#fff; border:1px solid #c9ced6; color:#0a2e6b; cursor:pointer;
}
.nsapp-pager .nsapp-page-btn.is-active { background:#0a2e6b; border-color:#0a2e6b; color:#fff; font-weight:700; cursor:default; }
.nsapp-pager .nsapp-page-btn.is-disabled { background:#f4f5f7; border-color:#e4e6ea; color:#bbb; cursor:default; }

.nsapp-help-pop {
  position:fixed; z-index:600; background:#fff; border:1px solid #dde3ee; border-radius:10px;
  padding:12px 14px; max-width:280px; font-size:12.5px; box-shadow:0 12px 32px rgba(10,46,107,.25);
}
.nsapp-help-pop .nsapp-help-title { font-weight:700; color:#0a2e6b; margin-bottom:4px; }
.nsapp-help-pop .nsapp-help-text { color:#444; }
.nsapp-help-pop .nsapp-help-close {
  position:absolute; top:6px; right:8px; border:none; background:none; cursor:pointer; color:#999;
  width:auto; margin:0; padding:0;
}
body label.nsapp-help-label { cursor:help; border-bottom:1px dashed #9aa3b5; }