/* Risma Smart Finance — RC3 · Natural backoffice, mobile-first refinements */
:root { --rsf-primary:#2f5fe1; --rsf-text:#1d304e; --rsf-muted:#60738e; --rsf-line:#e4eaf4; }
html { -webkit-text-size-adjust:100%; }
body { overflow-x:hidden; }
body, button, input, select, textarea { -webkit-tap-highlight-color:transparent; }
:where(button,a,input,select,textarea):focus-visible { outline:3px solid #86a7ff; outline-offset:2px; }
:where(input,select,textarea) { max-width:100%; }
.rsf-mobile-nav,.rsf-mobile-brand,.rsf-tenant-header-brand { display:none; }
/* Comfortable controls and clearer hierarchy on desktop and mobile. */
input[type="checkbox"],input[type="radio"] { accent-color:var(--rsf-primary); }
.vision-checkbox { display:flex;align-items:flex-start;gap:9px;line-height:1.55; }
.vision-checkbox input[type="checkbox"] { width:19px;height:19px;flex:none;margin-top:1px; }
#receipt-upload-consent { min-width:19px;min-height:19px; }

.p-btn,.btn { font-size:13px; min-height:42px; }
.p-form>input,.p-form select,.p-filter-bar select { font-size:14px; }
.p-form label,.p-filter-bar label { font-size:12px; }
.p-form small,.p-form-tip { font-size:12px; }
.p-page-header p,.p-panel-header p { font-size:13px; }
.p-sidebar .p-menu-item { font-size:13px; }
.p-panel,.card { overflow-wrap:anywhere; }
/* Login is a simple sign-in screen, without a marketing banner. */
body.rsf-login-simple { background:#f4f7fc; min-height:100vh; color:var(--rsf-text); }
.rsf-login-page { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 18px; }
.rsf-login-card { background:#fff; width:100%; max-width:440px; border:1px solid #e7edf5; border-radius:20px; padding:36px; box-shadow:0 20px 65px rgba(32,53,90,.075); }
.rsf-login-header { display:flex; align-items:center; gap:12px; margin:0 0 36px; }
.rsf-login-mark { width:46px;height:46px;border-radius:13px;background:#325fe2;color:white;display:grid;place-items:center; }
.rsf-login-mark .icon { width:26px;height:26px; }
.rsf-login-brand { display:grid;gap:2px; }
.rsf-login-brand strong { font-size:23px;font-weight:830;letter-spacing:-.65px;line-height:1; }
.rsf-login-brand span { font-size:13px;font-weight:650;color:#667c9c; }
.rsf-login-card h1 { margin:0 0 7px; font-size:29px; letter-spacing:-.85px; line-height:1.2; }
.rsf-login-intro { font-size:14px; color:#6d7e95; line-height:1.5; margin:0 0 28px; }
.rsf-login-form { display:grid; gap:18px; }
.rsf-field { display:grid;gap:8px; }
.rsf-field label { font-size:13px;font-weight:700;color:#354a68; }
.rsf-field>input,.rsf-password input { width:100%; height:50px; border:1px solid #dbe4f0; border-radius:11px; padding:0 14px; background:#fff; color:var(--rsf-text);font-size:16px; outline:none; }
.rsf-field>input:focus,.rsf-password input:focus { border-color:#6c93ee;box-shadow:0 0 0 3px rgba(47,95,225,.12); }
.rsf-password { position:relative; }
.rsf-password input { padding-right:56px; }
.rsf-password button { position:absolute;right:4px;top:4px; width:44px;height:42px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:#647a98; }
.rsf-password button:hover { background:#f0f4fa; }
.rsf-login-submit { height:50px;margin-top:4px;font-size:15px;justify-content:center;position:relative; }
.rsf-login-submit .icon { position:absolute;right:16px; }
.rsf-login-help { margin:23px 0 0; font-size:12px;color:#70809a;text-align:center; }
.rsf-login-footer { color:#9eabc0;font-size:11px;text-align:center;margin:24px 0 0; }
/* Keep date, icon and button styling consistent for the admin area. */
.p-content { min-width:0; }
.p-workspace { min-width:0; }
.p-topbar .rsf-mobile-brand { color:#244caa; }
.p-table-wrap { max-width:100%; }
.p-privacy-note { line-height:1.6; }
/* Buttons in forms should be easy to identify */
.receipt-upload-form .mobile-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:540px;width:100%; }
.receipt-upload-form .mobile-actions button, .receipt-upload-form .mobile-actions .rsf-file-picker { white-space:normal;min-height:48px;font-size:13px; }
.receipt-upload-form .receipt-actions .btn { min-height:48px; }
@media (max-width: 860px) {
  html { scroll-padding-top:75px; }
  :root { --rsf-mobile-nav-height:68px; }
  /* Super Admin — compact header + fixed five-item menu. */
  body.platform-body .p-shell { display:block; min-height:100vh; }
  body.platform-body .p-sidebar { display:none !important; }
  body.platform-body .p-workspace { display:block;width:100%; }
  body.platform-body .p-topbar { height:auto; min-height:63px; position:sticky; top:0; z-index:25; padding:11px 16px;box-shadow:0 3px 12px rgba(24,48,87,.035); }
  body.platform-body .rsf-mobile-brand { display:flex;flex-direction:column;gap:0;font-weight:830;font-size:19px;line-height:1;color:#244caa;letter-spacing:-.45px; }
  body.platform-body .rsf-mobile-brand span { font-size:10px;font-weight:650;letter-spacing:0;color:#7183a0; margin-top:3px; }
  body.platform-body .p-breadcrumb { display:none; }
  body.platform-body .p-top-actions { gap:8px; }
  body.platform-body .p-top-date { display:none; }
  body.platform-body .p-logout { min-height:44px; padding:10px 12px;font-size:12px; }
  body.platform-body .p-content { padding:18px 14px calc(var(--rsf-mobile-nav-height) + 44px + env(safe-area-inset-bottom)); max-width:100%; }
  body.platform-body .p-page-header { display:flex;flex-wrap:wrap;align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:19px; }
  body.platform-body .p-page-header h1 { font-size:25px;line-height:1.15;letter-spacing:-.6px; }
  body.platform-body .p-page-header p { font-size:13px; }
  body.platform-body .p-page-header>.p-btn { min-height:44px;justify-content:center; }
  body.platform-body .p-stat-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  body.platform-body .p-stat { padding:15px 13px;min-width:0;min-height:140px;border-radius:14px; }
  body.platform-body .p-stat strong { font-size:25px;line-height:1.25; }
  body.platform-body .p-stat-label { font-size:12px; }
  body.platform-body .p-stat-foot { font-size:11px;line-height:1.4; }
  body.platform-body .p-dashboard-grid,.p-split-grid,.p-settings-grid { display:grid;grid-template-columns:minmax(0,1fr);gap:13px; }
  body.platform-body .p-panel { border-radius:15px; }
  body.platform-body .p-panel-header { padding:18px 16px 13px; flex-wrap:wrap; }
  body.platform-body .p-panel-header h2 { font-size:16px; }
  body.platform-body .p-feed-row { padding:13px 15px; align-items:flex-start;gap:10px; }
  body.platform-body .p-feed-row time { font-size:11px;white-space:normal;text-align:right;max-width:86px; }
  body.platform-body .p-quick-list { padding:0 12px 12px; }
  body.platform-body .p-quick-list>a { min-height:59px; }
  body.platform-body .p-form { padding:3px 16px 20px;gap:10px; }
  body.platform-body .p-form>input,body.platform-body .p-form select,body.platform-body .p-filter-bar select { height:48px;font-size:16px; }
  body.platform-body .p-form label { font-size:13px; }
  body.platform-body .p-filter-bar { display:grid;grid-template-columns:1fr;gap:12px;padding:16px; }
  body.platform-body .p-filter-bar>div { min-width:0;width:100%; }
  body.platform-body .p-filter-bar .p-btn { min-height:46px;width:100%; }
  body.platform-body .p-footer { padding:22px 0; font-size:11px; }
  body.platform-body .p-inline-actions { display:flex;gap:7px;flex-wrap:wrap; }
  body.platform-body .p-action { min-height:40px; }
  body.platform-body .p-form-panel { scroll-margin-top:85px; }
  body.platform-body .p-pagination { overflow-x:auto;padding:14px; }
  /* Tenant mobile UI; old desktop sidebar collapses to a bottom navigation. */
  body .shell { display:block!important; min-height:100vh; }
  body .sidebar { display:none!important; }
  body .app-main { display:block;width:100%;min-width:0; }
  body .rsf-tenant-header-brand { display:flex; flex-direction:column;color:#2856bd;font-size:17px;font-weight:850;line-height:1; }
  body .rsf-tenant-header-brand small { font-size:10px;font-weight:650;color:#72849f;margin-top:3px; }
  body .topbar { position:sticky;top:0;z-index:24;background:#fff;border-bottom:1px solid var(--rsf-line);padding:9px 15px!important;min-height:64px;height:auto;display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:nowrap; }
  body .topbar h1 { font-size:15px!important;line-height:1.2;margin:0;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  body .topbar-right { flex:0 0 auto; gap:6px; }
  body .topbar .topbar-create,body .topbar .period,body .topbar .account-chip { display:none!important; }
  body .topbar .logout-form .btn { min-height:42px;font-size:12px;padding:9px 11px!important; }
  body .content { padding:16px 13px calc(var(--rsf-mobile-nav-height) + 42px + env(safe-area-inset-bottom))!important;min-width:0; }
  body .content .card { min-width:0;margin-bottom:13px;border-radius:15px; }
  body .content .card-inner { padding:17px 15px; }
  body .content .grid.kpis,body .content .kpis { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
  body .content .dashboard-columns,body .content .dashboard-bottom,body .content .upload-layout,body .content .upload-grid,body .content .reports-mid,body .content .reports-bottom,body .content .form-layout { display:grid!important;grid-template-columns:1fr!important;gap:12px!important; }
  body .content .filters { display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch;width:100%; }
  body .content .filter-input,body .content .field-inline,body .content .field-inline input,body .content .field-inline select,body .content .filters>button { width:100%;max-width:100%; }
  body .content .actionbar { padding:14px; }
  body .content .form-row,body .content .stacked-form { min-width:0; }
  body .content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),body .content select,body .content textarea { font-size:16px!important;max-width:100%; }
  body .content .btn { min-height:45px;font-size:13px; }
  body .content .form-footer,body .content .report-export-buttons { display:flex; flex-direction:column;gap:9px;align-items:stretch;width:100%; }
  body .content .form-footer .btn,body .content .report-export-buttons .btn { width:100%;justify-content:center; }
  body .content .report-export-bar { display:flex;flex-direction:column;gap:12px;align-items:stretch; }
  body .content .monthly-row { gap:12px; }
  body .content .monthly-row b { text-align:right;white-space:nowrap; }
  body .content .receipt-upload-form .mobile-actions { grid-template-columns:1fr; }
  body .content .receipt-upload-form .mobile-actions button, body .content .receipt-upload-form .mobile-actions .rsf-file-picker { width:100%; }
  body .content .mobile-receipt.dropzone { padding:18px 14px;min-height:210px; }
  body .content .receipt-upload-options .receipt-actions .btn { width:100%; }
  body .content .manual-entry-option .btn { width:100%; }
  body .content .mini-chart.annual-chart { min-width:0; max-width:100%; }
  body .content .page-intro,body .content .section-heading { flex-wrap:wrap; }
  body .content .footer-note { padding-top:12px; }
  /* Shared fixed bottom nav for both account types. */
  .rsf-mobile-nav { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid #e1e8f2;box-shadow:0 -8px 25px rgba(28,52,99,.06);padding:6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right)); min-height:var(--rsf-mobile-nav-height); }
  .rsf-mobile-nav a { display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:52px;gap:4px;color:#65768f;font-size:10px;font-weight:650;text-align:center;border-radius:10px;line-height:1.15; }
  .rsf-mobile-nav a .icon { width:22px;height:22px; }
  .rsf-mobile-nav a.is-active { color:#2a59d7;background:#eef3ff; }
  .rsf-mobile-nav a:hover { background:#f0f4fb; }
  /* Native table becomes labelled cards on phones: no horizontal scrolling. */
  .p-table-wrap,.table-scroll { overflow-x:auto;max-width:100%; }
  .p-table-wrap.rsf-mobile-table-container,.table-scroll.rsf-mobile-table-container { overflow:visible!important; }
  .rsf-mobile-table { display:block!important;border:0!important;min-width:0!important;width:100%!important; }
  .rsf-mobile-table thead { display:none!important; }
  .rsf-mobile-table tbody { display:grid;gap:10px;padding:0 12px 13px; }
  .rsf-mobile-table tbody tr { display:block;background:#fff;border:1px solid #e7edf5;border-radius:12px;overflow:hidden;box-shadow:0 3px 9px rgba(26,57,96,.025); }
  .rsf-mobile-table tbody td { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px!important;border-bottom:1px solid #f0f3f8;text-align:right!important;font-size:13px;min-width:0;max-width:100%;white-space:normal!important; }
  .rsf-mobile-table tbody td:last-child { border-bottom:0; }
  .rsf-mobile-table tbody td::before { content:attr(data-label);font-size:11px;font-weight:700;min-width:78px;max-width:42%;flex-shrink:0;color:#71819a;text-align:left; }
  .rsf-mobile-table tbody td>form,.rsf-mobile-table tbody td>.p-inline-actions,.rsf-mobile-table tbody td>.row-actions { max-width:calc(100% - 90px); }
  .rsf-mobile-table tbody td .p-secondary-line { display:block;line-height:1.5; }
  .rsf-mobile-table tbody .rsf-empty-row td { display:block;text-align:center!important;padding:22px 14px!important; }
  .rsf-mobile-table tbody .rsf-empty-row td::before { display:none; }
  .rsf-mobile-table tbody td.rsf-blank-cell { display:none; }
  .rsf-mobile-table tbody td .row-actions { display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end; }
  .rsf-mobile-table tbody td .btn { min-height:40px; }
  .rsf-mobile-table tbody td .description-cell { min-width:0; }
  /* On mobile, format status/pill text without wrapping each word. */
  .p-pill,.tag { white-space:normal; }
  .quick-category-dialog { max-width:calc(100vw - 24px); max-height:calc(100dvh - 40px);overflow:auto; }
  .p-settings-aside { min-width:0; }
}
@media (max-width: 380px) {
  .rsf-mobile-nav a { font-size:9px; }
  body.platform-body .p-stat { min-height:133px;padding:12px 10px; }
  body.platform-body .p-stat strong { font-size:22px; }
  body.platform-body .p-content { padding-left:10px;padding-right:10px; }
  body .content { padding-left:10px!important;padding-right:10px!important; }
  body .content .kpi-amount { font-size:16px; }
}
@media (max-width: 520px) {
  .rsf-login-page { justify-content:flex-start;padding:48px 14px 20px; }
  .rsf-login-card { border-radius:16px;padding:27px 21px;box-shadow:0 12px 40px rgba(32,53,90,.045); }
  .rsf-login-header { margin-bottom:29px; }
  .rsf-login-card h1 { font-size:27px; }
  .password-shell { padding:20px 14px; }
  .password-card { padding:24px 18px;border-radius:16px; }
  .password-form>input { height:48px;font-size:16px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important; } }

/* RC4 — password management: clear controls on both desktop and phones. */
.p-password-grid { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(280px, .8fr); gap:18px; align-items:start; }
.p-user-detail { display:flex; justify-content:space-between; gap:18px; padding:13px 24px 19px; font-size:13px; color:#71829c; }
.p-user-detail strong { color:#263d5e; text-align:right; }
.p-password-aside { padding:0 24px 24px; }
.p-password-aside>p { font-size:13px; line-height:1.65; color:#677b98; }
.p-user-filter { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:2px 22px 16px; }
.p-user-filter label { font-size:12px; font-weight:750; color:#53637c; }
.p-user-filter select { min-height:44px; max-width:100%; min-width:190px; border:1px solid #dae3f1; border-radius:10px; padding:9px 12px; background:white; color:#293d5c; }
.p-action--password { background:#e9efff; color:#244eaa; }
.p-account-password { font-size:12px; color:#365dba; font-weight:700; border:1px solid #d9e5ff; background:#f4f7ff; border-radius:10px; padding:10px 13px; white-space:nowrap; text-decoration:none; }
.p-account-password:hover { background:#eaf0ff; }
.p-inline-actions .p-action { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; min-height:38px; }
@media (max-width:860px) {
  .p-password-grid { grid-template-columns:1fr; }
  .p-user-filter { display:grid; padding:3px 16px 16px; gap:8px; }
  .p-user-filter select { width:100%; font-size:16px; }
  .p-password-aside { padding:0 16px 22px; }
  .p-account-password { font-size:11px; min-height:43px; display:inline-flex; align-items:center; }
  .p-inline-actions .p-action { min-height:44px; font-size:12px; padding:10px 13px; }
  .p-user-detail { padding:12px 16px 16px; }
}
@media (max-width:400px) { .p-account-password { font-size:10px; padding:8px 9px; } }

.p-account-password-short { display:none; }
@media(max-width:860px){ .p-account-password-long { display:none; } .p-account-password-short { display:inline; } }

/* RC4.1: password controls directly available on the Instansi page. */
.p-tenant-admin-cell{min-width:250px;vertical-align:top}
.p-tenant-admin-count{font-size:12px;color:#7285a0;margin-bottom:8px}
.p-tenant-admin-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #edf1f8}
.p-tenant-admin-identity{min-width:0;text-align:left}
.p-tenant-admin-identity strong{font-size:12px;display:block;color:#223a5b;overflow-wrap:anywhere}
.p-tenant-admin-identity small{font-size:11px;display:block;color:#71839d;margin-top:2px;overflow-wrap:anywhere}
.p-tenant-password-link{flex-shrink:0;white-space:nowrap;text-align:center!important}
@media(max-width:820px){
  .rsf-mobile-table tbody td.p-tenant-admin-cell{display:block;min-width:0;text-align:left!important}
  .rsf-mobile-table tbody td.p-tenant-admin-cell:before{display:block;margin-bottom:6px}
  .p-tenant-admin-line{align-items:flex-start;flex-wrap:wrap;gap:6px}
  .p-tenant-password-link{min-height:44px!important;flex:0 0 auto}
  .p-tenant-admin-identity{flex:1 1 150px}
}

/* RC4.5: User administration controls, touch-friendly on phones */
.p-btn--danger{background:#fff4f4;color:#b4232b;border:1px solid #f3c4c8}
.p-btn--danger:hover{background:#ffe6e8;border-color:#ec9ca3}
.p-form input[readonly]{background:#f5f7fb;color:#64748b;cursor:default}
.p-inline-actions .p-action{min-height:42px}
@media(max-width:760px){.p-password-grid .p-btn{min-height:48px}.p-inline-actions{align-items:stretch}.p-inline-actions .p-action{min-height:44px}}