@layer reset,tokens,base,layout,components,pages,utilities,responsive;@layer reset{*,*:before,*:after{box-sizing:border-box}html{color-scheme:light}body,h1,h2,h3,p,dl,dd{margin:0}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}img,svg{max-width:100%}table{border-collapse:collapse;border-spacing:0}}@layer tokens{:root{--brand-950: #431426;--brand-900: #5f1c35;--brand-800: #7c2d4b;--brand-700: #963b5d;--brand-100: #f8e9ef;--brand-50: #fcf5f7;--blue-800: #1d4ed8;--blue-100: #e9efff;--red-800: #b4233f;--red-100: #fdecef;--teal-800: #0f766e;--teal-100: #e6f6f3;--amber-800: #a15c00;--amber-100: #fff4d8;--green-800: #18794e;--green-100: #e8f6ef;--danger-800: #a51d2d;--danger-100: #fdebed;--ink-950: #172126;--ink-800: #2f3b42;--ink-600: #52636b;--ink-500: #687981;--line-300: #d9e1e5;--line-200: #e7ecef;--surface: #ffffff;--surface-soft: #f7f9fa;--canvas: #f1f5f6;--shadow-sm: 0 4px 14px rgba(26, 38, 44, .07);--shadow-md: 0 16px 38px rgba(39, 28, 33, .12);--radius-sm: 9px;--radius-md: 14px;--radius-lg: 20px;--sidebar-width: 264px;--topbar-height: 76px;--content-max: 1560px;--transition: .16s ease}}@layer base{html{min-height:100%;scroll-behavior:smooth}body{min-height:100vh;background:var(--canvas);color:var(--ink-950);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55}a{color:inherit;text-decoration:none}button{color:inherit}:focus-visible{outline:3px solid rgba(29,78,216,.28);outline-offset:2px}::selection{background:var(--brand-100);color:var(--brand-950)}}@layer layout{.app-shell{min-height:100vh}.app-sidebar{position:fixed;inset:0 auto 0 0;z-index:40;display:flex;width:var(--sidebar-width);flex-direction:column;border-right:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,var(--brand-950),#38111f);color:#fff;box-shadow:10px 0 34px #2a121b21}.app-main{min-height:100vh;margin-left:var(--sidebar-width)}.topbar{position:sticky;top:0;z-index:25;display:flex;min-height:var(--topbar-height);align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line-200);background:#fffffff0;padding:12px clamp(18px,3vw,38px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.topbar__left,.topbar__right{display:flex;align-items:center;gap:12px}.content-area{width:min(100%,var(--content-max));margin:0 auto;padding:clamp(18px,2.6vw,34px)}.mobile-nav,.drawer-overlay{display:none}.page-title{font-size:clamp(20px,2vw,26px);line-height:1.15}.page-subtitle{margin-top:3px;color:var(--ink-600);font-size:13px}.topbar-user{color:var(--ink-800);font-weight:700}.mobile-menu-button{display:none}@media(max-width:860px){:root{--sidebar-width: 278px}.app-main{margin-left:0;padding-bottom:72px}.app-sidebar{transform:translate(-102%);transition:transform .19s ease}.app-shell.is-drawer-open .app-sidebar{transform:translate(0)}.drawer-overlay{position:fixed;inset:0;z-index:35;border:0;background:#1215197a}.app-shell.is-drawer-open .drawer-overlay{display:block}.mobile-menu-button{display:inline-flex}.topbar__right{display:none}.mobile-nav{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-200);background:#fffffff7;box-shadow:0 -8px 24px #222c3214;padding:7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mobile-nav__link{display:grid;min-width:0;place-items:center;gap:1px;border:0;border-radius:9px;background:transparent;padding:4px 2px;color:var(--ink-500)}.mobile-nav__link span{font-size:20px;line-height:1}.mobile-nav__link small{font-size:9px;font-weight:800}.mobile-nav__link.is-active{background:var(--brand-50);color:var(--brand-800)}.content-area{padding:18px 14px}.topbar{padding:10px 14px}}@media(max-width:620px){body{font-size:14px}}}@layer components{.brand-block{display:flex;align-items:center;gap:12px;min-height:88px;padding:20px;border-bottom:1px solid rgba(255,255,255,.1)}.brand-mark{display:grid;width:44px;height:44px;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:13px;background:#ffffff1c;font-size:22px}.brand-title,.brand-subtitle{display:block}.brand-title{font-size:17px;letter-spacing:.01em}.brand-subtitle{margin-top:2px;color:#ffffffb3;font-size:12px}.side-nav{flex:1;overflow-y:auto;padding:14px 12px}.side-nav__section{display:block;padding:16px 10px 7px;color:#ffffff80;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.side-nav__link{display:flex;width:100%;min-height:42px;align-items:center;gap:10px;border:0;border-radius:10px;background:transparent;padding:9px 11px;color:#ffffffc7;cursor:pointer;text-align:left;transition:background var(--transition),color var(--transition),transform var(--transition)}.side-nav__link:hover{background:#ffffff14;color:#fff}.side-nav__link.is-active{background:#ffffff24;color:#fff;box-shadow:inset 3px 0 #fff}.side-nav__link span{width:20px;text-align:center;font-size:17px}.side-nav__button{font-size:14px}.sidebar-footer{display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.1);padding:14px 12px 18px}.sidebar-footer form{margin:0}.user-chip{padding:8px 10px}.user-chip__name{display:block;overflow:hidden;color:#fff;font-weight:700;text-overflow:ellipsis;white-space:nowrap}}@layer components{.role-badge,.status-badge,.type-badge,.volume-chip,.eyebrow{display:inline-flex;width:fit-content;align-items:center;justify-content:center;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1;text-transform:uppercase}.role-badge{margin-top:5px;background:#ffffff21;padding:6px 8px;color:#fff}.role-badge--surface{margin:0;background:var(--brand-100);color:var(--brand-800)}.status-badge{padding:7px 9px}.status-badge--active{background:var(--green-100);color:var(--green-800)}.status-badge--closed{background:#eceff1;color:var(--ink-600)}.type-badge{padding:7px 9px;white-space:nowrap}.type-badge--masuk{background:var(--red-100);color:var(--red-800)}.type-badge--keluar{background:var(--blue-100);color:var(--blue-800)}.volume-chip{margin-left:8px;background:var(--brand-100);padding:6px 9px;color:var(--brand-800);vertical-align:middle}.eyebrow{margin-bottom:8px;background:var(--green-100);padding:7px 9px;color:var(--green-800)}}@layer components{.narrow-panel{max-width:720px;margin-inline:auto}.panel{overflow:hidden;border:1px solid var(--line-200);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}.panel+.panel{margin-top:20px}.panel-header{display:flex;min-height:74px;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line-200);padding:16px 20px}.panel-title{font-size:17px;line-height:1.25}.panel-subtitle{margin-top:4px;color:var(--ink-600);font-size:12px}.panel-body{padding:22px}.panel-actions{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line-200);padding:16px 20px}@media(max-width:620px){.panel{border-radius:15px}.panel-header{align-items:flex-start;flex-direction:column;padding:15px}.panel-body{padding:16px}}}@layer components{.button,.icon-button,.page-button{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:800;line-height:1.1;transition:transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}.button:hover,.icon-button:hover,.page-button:hover{transform:translateY(-1px)}.button--primary{background:var(--brand-800);color:#fff;box-shadow:0 6px 14px #7c2d4b2e}.button--primary:hover{background:var(--brand-900)}.button--incoming{background:var(--red-800);color:#fff}.button--outgoing{background:var(--blue-800);color:#fff}.button--soft{border-color:#e6cbd6;background:var(--brand-50);color:var(--brand-800)}.button--light{border-color:var(--line-300);background:#fff;color:var(--ink-800)}.button--danger{border-color:#efbdc4;background:var(--danger-100);color:var(--danger-800)}.button--inverse{border-color:#ffffff4d;background:#ffffff1a;color:#fff}.button--inverse:hover{background:#ffffff2e}.button--small{min-height:34px;padding:7px 10px;font-size:12px}.button--block{width:100%}.icon-button{width:40px;padding:0;border-color:var(--line-300);background:#fff;font-size:21px}}@layer components{.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-field--full{grid-column:1 / -1}.control{width:100%;min-height:43px;border:1px solid var(--line-300);border-radius:10px;background:#fff;padding:9px 11px;color:var(--ink-950);transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}.control:hover{border-color:#b8c5ca}.control:focus{border-color:var(--brand-700);outline:0;box-shadow:0 0 0 3px #7c2d4b1a}.control[readonly]{background:var(--surface-soft);color:var(--ink-600)}.control--textarea{min-height:112px;resize:vertical}.form-field{min-width:0}.form-field label{display:block;margin-bottom:7px;color:var(--ink-800);font-size:12px;font-weight:800}.field-help,.field-help-inline{color:var(--ink-500);font-size:11px;font-weight:500}.field-help{margin-top:6px}.field-help-inline{margin-left:6px}.required{color:var(--danger-800)}.select-stack{display:grid;gap:8px}.check-row{display:flex;align-items:center;gap:8px;color:var(--ink-600);font-size:13px}.form-stack{display:grid;gap:16px}.form-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid var(--line-200);margin-top:22px;padding-top:18px}.form-footer--compact{margin-top:14px}.upload-box{border:1px dashed #b8c5ca;border-radius:12px;background:var(--surface-soft);padding:16px}.upload-box p{margin-top:8px;color:var(--ink-600);font-size:11px}@media(max-width:620px){.form-grid{grid-template-columns:1fr}.form-field--full{grid-column:auto}.form-footer{align-items:stretch;flex-direction:column-reverse}.form-footer .button{width:100%}}}@layer components{.table-wrap{width:100%;overflow-x:auto}.data-table{width:100%;min-width:880px}.data-table--wide{min-width:1180px}.data-table th{background:#f7f9fa;color:var(--ink-600);font-size:10px;letter-spacing:.05em;text-align:left;text-transform:uppercase}.data-table th,.data-table td{border-bottom:1px solid var(--line-200);padding:12px 14px;vertical-align:top}.data-table tbody tr:hover{background:#fbfcfc}.data-table tbody tr:last-child td{border-bottom:0}.cell-wrap{min-width:240px;max-width:480px;white-space:normal}.table-actions{display:flex;flex-wrap:wrap;gap:6px}.table-actions form{margin:0}}@layer components{.table-footer{display:flex;min-height:62px;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line-200);padding:12px 20px}.pagination{display:flex;align-items:center;gap:8px}.page-button{min-height:34px;border-color:var(--line-300);background:#fff;padding:7px 10px;color:var(--ink-800);font-size:12px}.page-button.is-disabled{cursor:default;opacity:.45;transform:none}.page-indicator{color:var(--ink-600);font-size:12px}@media(max-width:620px){.table-footer{align-items:flex-start;flex-direction:column}.pagination{width:100%;justify-content:space-between}.page-indicator{text-align:center}}}@layer components{.modal-dialog{width:min(96vw,760px);max-height:92vh;border:0;border-radius:var(--radius-lg);background:transparent;padding:0;box-shadow:var(--shadow-md)}.modal-dialog::backdrop{background:#12151994;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-card{max-height:92vh;overflow:auto;border:1px solid var(--line-200);border-radius:var(--radius-lg);background:#fff}.modal-header,.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px}.modal-header{border-bottom:1px solid var(--line-200)}.modal-header h2{font-size:19px}.modal-header p{margin-top:3px;color:var(--ink-600);font-size:12px}.modal-body{padding:20px}.modal-footer{justify-content:flex-end;border-top:1px solid var(--line-200)}@media(max-width:620px){.modal-dialog{width:calc(100vw - 18px)}.modal-header,.modal-body,.modal-footer{padding:15px}.modal-footer{align-items:stretch;flex-direction:column-reverse}.modal-footer .button{width:100%}}}@layer components{.alert{border:1px solid;border-radius:12px;margin-bottom:18px;padding:13px 15px}.alert--success{border-color:#b8dfca;background:var(--green-100);color:#145e3e}.alert--danger{border-color:#edbbc3;background:var(--danger-100);color:#81202e}.alert-list{margin:8px 0 0;padding-left:20px}.empty-state{padding:34px 18px;color:var(--ink-500);text-align:center}.empty-state--card{grid-column:1 / -1}.muted-text{color:var(--ink-500)}}@layer components{.file-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:20px}.file-card{display:block;min-width:0;border:1px solid var(--line-200);border-radius:var(--radius-md);background:#fff;padding:18px;box-shadow:0 3px 10px #1b252a0a;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}.file-card:hover{border-color:#c7a3b1;transform:translateY(-2px);box-shadow:var(--shadow-sm)}.file-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink-600);font-size:11px}.file-card__number{display:block;margin-top:15px;color:var(--brand-800);font-size:13px}.file-card h3{margin-top:6px;font-size:17px;line-height:1.3}.file-card__meta{display:grid;gap:8px;margin-top:16px}.file-card__meta div{display:grid;grid-template-columns:82px 1fr;gap:8px}.file-card__meta dt{color:var(--ink-500);font-size:10px;text-transform:uppercase}.file-card__meta dd{overflow:hidden;color:var(--ink-800);font-size:12px;text-overflow:ellipsis}@media(max-width:1180px){.file-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.file-card-grid{grid-template-columns:1fr;padding:16px}}}@layer components{.file-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) auto auto max-content;align-items:center;gap:10px;border-bottom:1px solid var(--line-200);padding:16px 20px}.result-summary{color:var(--ink-600);font-size:12px;font-weight:700}@media(max-width:860px){.file-toolbar{grid-template-columns:1fr auto}.file-toolbar .result-summary{grid-column:1 / -1}}@media(max-width:620px){.file-toolbar{grid-template-columns:1fr;padding:14px}.file-toolbar .button{width:100%}}}@layer utilities{.is-hidden{display:none}}