/* BARORO — shared visual system for every operational menu */
:root{--bar-navy:#0b2545;--bar-blue:#1769e8;--bar-blue2:#0d54c6;--bar-bg:#f3f6fb;--bar-line:#e1e9f3;--bar-text:#18324f;--bar-muted:#73839a;--bar-shadow:0 8px 28px rgba(24,50,79,.055)}
html{background:var(--bar-bg)} body{background:var(--bar-bg)!important;color:var(--bar-text)!important;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:14px!important;line-height:1.5!important}
.sidebar{background:linear-gradient(165deg,#102f55,#081d36)!important;border:1px solid #ffffff12!important;border-radius:18px!important;box-shadow:0 12px 35px #0b25451a!important;padding:18px 12px!important}
.brand{padding:7px 10px 25px!important;letter-spacing:.1px}.brand .logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#ffffff16;font-size:23px!important}.brand small{color:#c6d7eb!important;letter-spacing:.6px;margin-top:3px}
.nav{gap:5px!important}.nav a{display:flex!important;align-items:center;min-height:42px;padding:11px 13px!important;border-radius:11px!important;font-size:13px!important;font-weight:600!important;transition:background .18s,transform .18s}.nav a:hover{background:#ffffff12!important;transform:translateX(2px)}.nav a.active{background:linear-gradient(100deg,#267af2,#1763d8)!important;box-shadow:0 5px 15px #1769e833!important}
.topbar{min-height:62px!important;background:rgba(255,255,255,.88)!important;border:1px solid var(--bar-line)!important;border-radius:15px!important;box-shadow:0 4px 20px #19345208!important;backdrop-filter:blur(12px);padding:0 18px!important;gap:12px!important}
.main{padding-top:20px!important}.pagehead{margin:4px 0 20px!important}.pageicon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#e8f1ff;font-size:25px!important;color:var(--bar-blue)!important}h1{font-size:23px!important;letter-spacing:-.45px;font-weight:800!important;color:var(--bar-navy)!important}h2{font-size:17px!important;font-weight:750!important;color:var(--bar-navy)!important}h3{color:var(--bar-navy)!important}.subtitle{color:var(--bar-muted)!important;font-size:12px!important}
.card,.panel,.stat,.hero{border:1px solid var(--bar-line)!important;border-radius:17px!important;box-shadow:var(--bar-shadow)!important}.card{padding:19px!important;margin-bottom:16px!important;background:#fff!important}.panel{background:#fff!important}.tabs{background:#e9eff8!important;border-radius:12px!important;padding:4px!important;gap:4px}.tabs a{border-radius:9px!important;padding:11px!important;font-size:13px!important}.tabs a.active{background:var(--bar-blue)!important;box-shadow:0 4px 12px #1769e82b}
input,select,textarea{border:1px solid #d9e3ef!important;border-radius:10px!important;background:#fff!important;padding:11px 12px!important;min-height:41px;color:var(--bar-text)!important;outline:none;transition:border .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:#70a5f6!important;box-shadow:0 0 0 3px #1769e817!important;outline:0!important}button,.btn{border-radius:10px!important;padding:10px 14px!important;font-size:13px!important;font-weight:700!important;transition:transform .15s,filter .15s;cursor:pointer}button:hover,.btn:hover{filter:brightness(.98);transform:translateY(-1px)}.primary{background:linear-gradient(100deg,#267af2,#155fd1)!important;color:#fff!important}.muted{background:#eaf1fb!important;color:#214d83!important}.danger,.no{background:#fff0f0!important;color:#b42332!important}.yes{background:#e7f8f0!important;color:#087653!important}
table{border-collapse:separate!important;border-spacing:0!important;width:100%!important;min-width:760px}th{background:#f3f7fc!important;color:#50647d!important;text-transform:uppercase;letter-spacing:.35px;font-size:10px!important;font-weight:800!important;padding:13px 12px!important;border-bottom:1px solid #e3ebf5!important}td{font-size:12px!important;padding:13px 12px!important;border-bottom:1px solid #edf1f6!important;color:#304760}tbody tr:hover td{background:#f8fbff}table th:first-child{border-radius:9px 0 0 0}table th:last-child{border-radius:0 9px 0 0}.status,.badge{border-radius:999px!important;font-weight:750!important;padding:5px 10px!important}.note,.msg{border:1px solid #dceaff!important;border-radius:11px!important;padding:12px 14px!important;background:#eff6ff!important;color:#1d4e89!important}.err{background:#fff1f1!important;color:#b42332!important;border-radius:10px!important;padding:12px!important}
.hamb{display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--bar-line)!important;border-radius:12px!important;background:#fff!important;color:#174b8c!important;cursor:pointer;font-size:21px!important;flex:0 0 auto}.topbar .user{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.menu-backdrop{display:none}.menu-open .menu-backdrop{display:block;position:fixed;inset:0;background:#071a2e99;border:0;z-index:25;padding:0}.sidebar{transition:transform .22s ease!important;z-index:30!important}body.menu-collapsed .sidebar{transform:translateX(calc(-100% - 24px))}body.menu-collapsed .topbar,body.menu-collapsed .main{margin-left:17px!important}
@media(max-width:760px){.sidebar{position:fixed!important;top:8px!important;left:8px!important;bottom:8px!important;inset-inline:auto!important;width:min(290px,calc(100vw - 42px))!important;margin:0!important;border-radius:18px!important;transform:translateX(calc(-100% - 18px));box-shadow:0 15px 45px #071a2e50!important;overflow-y:auto}.menu-open .sidebar{transform:translateX(0)!important}.topbar{margin:8px!important;height:56px!important;min-height:56px!important;position:sticky;top:8px;z-index:15;padding:0 11px!important}.main{margin:0 9px 18px!important;padding:12px 0 24px!important}.pagehead{gap:11px!important;align-items:flex-start}.pageicon{width:42px;height:42px;flex:0 0 auto}.main h1{font-size:20px!important}.nav{display:flex!important;flex-direction:column!important}.nav a{padding:12px!important}.grid{grid-template-columns:1fr!important}.tabs{width:100%!important}.card{padding:13px!important}.toolbar,.filter{align-items:stretch}.search{min-width:0;width:100%;flex-wrap:wrap}.search input{width:100%;min-width:0}.tablewrap,.card{max-width:100%}table{min-width:680px}.topbar .user{font-size:12px}}
@media(min-width:761px){body.menu-collapsed .sidebar{transform:translateX(calc(-100% - 24px))}}

/* Final alignment: operational pages use the same frame as Dashboard */
body{margin:0!important;background:#f3f6fb!important;color:#18324f!important}
.sidebar{position:fixed!important;inset:14px auto 14px 14px!important;width:246px!important;background:linear-gradient(165deg,#12375f 0%,#0a203c 100%)!important;border:1px solid #ffffff12!important;border-radius:22px!important;padding:22px 15px!important;color:#fff!important;box-shadow:0 16px 42px #0c28451c!important;overflow-y:auto!important}
.brand{display:flex!important;align-items:center!important;gap:10px!important;padding:7px 10px 25px!important;color:#fff!important;font-size:14px!important;font-weight:800!important}
.brand .logo{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:14px!important;background:#ffffff16!important;font-size:23px!important}
.brand small{display:block!important;color:#c6d7eb!important;font-size:10px!important;font-weight:400!important;letter-spacing:.6px!important;margin-top:3px!important;opacity:1!important}
.nav{display:flex!important;flex-direction:column!important;gap:5px!important}
.nav a{display:flex!important;align-items:center!important;min-height:42px!important;padding:11px 13px!important;border-radius:11px!important;color:#eaf3ff!important;text-decoration:none!important;font-size:13px!important;font-weight:600!important;transition:background .18s,transform .18s!important}
.nav a:hover{background:#ffffff12!important;transform:translateX(2px)!important}.nav a.active{background:linear-gradient(100deg,#267af2,#1763d8)!important;color:#fff!important;box-shadow:0 5px 15px #1769e833!important}
.topbar{height:62px!important;min-height:62px!important;margin:14px 20px 0 278px!important;padding:0 20px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;background:rgba(255,255,255,.92)!important;border:1px solid #e1e9f3!important;border-radius:16px!important;box-shadow:0 4px 20px #19345208!important;backdrop-filter:blur(12px)!important}
.main{margin:0 20px 24px 278px!important;padding:22px 0 28px!important;min-width:0!important}
.pagehead{display:flex!important;align-items:center!important;gap:14px!important;margin:4px 0 20px!important}.pageicon{display:grid!important;place-items:center!important;width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:15px!important;background:#e8f1ff!important;color:#1769e8!important;font-size:25px!important}
h1{font-size:23px!important;letter-spacing:-.45px!important;font-weight:800!important;color:#0b2545!important;margin:0!important}h2{font-size:17px!important;font-weight:750!important;color:#0b2545!important}
.card{padding:20px!important;margin-bottom:16px!important;background:#fff!important;border:1px solid #e1e9f3!important;border-radius:17px!important;box-shadow:0 8px 28px rgba(24,50,79,.055)!important;overflow:auto!important}
.tabs{width:min(100%,440px)!important;margin-bottom:14px!important;background:#e9eff8!important;border-radius:12px!important;padding:4px!important}.tabs a{flex:1!important;width:auto!important;border-radius:9px!important;padding:11px!important;font-size:13px!important}.tabs a.active{background:linear-gradient(100deg,#267af2,#155fd1)!important;color:#fff!important}
.grid{gap:15px!important}.field{gap:6px!important}.field label{font-size:12px!important;font-weight:700!important;color:#465f78!important}
input,select,textarea{border:1px solid #d9e3ef!important;border-radius:10px!important;background:#fff!important;padding:11px 12px!important;min-height:41px!important;color:#18324f!important;font:inherit!important;box-sizing:border-box!important}input:focus,select:focus,textarea:focus{border-color:#70a5f6!important;box-shadow:0 0 0 3px #1769e817!important;outline:0!important}
button,.btn{border-radius:10px!important;padding:10px 14px!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;text-decoration:none!important;transition:transform .15s,filter .15s!important}.primary{background:linear-gradient(100deg,#267af2,#155fd1)!important;color:#fff!important}.muted{background:#eaf1fb!important;color:#214d83!important}.danger,.no{background:#fff0f0!important;color:#b42332!important}.yes{background:#e7f8f0!important;color:#087653!important}
table{border-collapse:separate!important;border-spacing:0!important;width:100%!important;min-width:760px!important}th{background:#f3f7fc!important;color:#50647d!important;text-transform:uppercase!important;letter-spacing:.35px!important;font-size:10px!important;font-weight:800!important;padding:13px 12px!important;border-bottom:1px solid #e3ebf5!important}td{font-size:12px!important;padding:13px 12px!important;border-bottom:1px solid #edf1f6!important;color:#304760!important}tbody tr:hover td{background:#f8fbff!important}table th:first-child{border-radius:9px 0 0 0!important}table th:last-child{border-radius:0 9px 0 0!important}
.hamb{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;border:1px solid #e1e9f3!important;border-radius:12px!important;background:#fff!important;color:#174b8c!important;font-size:21px!important;flex:0 0 auto!important}.topbar .user{margin-left:auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-weight:650!important}
@media(max-width:760px){.sidebar{position:fixed!important;top:8px!important;left:8px!important;bottom:8px!important;inset-inline:auto!important;width:min(290px,calc(100vw - 42px))!important;margin:0!important;border-radius:18px!important;transform:translateX(calc(-100% - 18px))!important;box-shadow:0 15px 45px #071a2e50!important;overflow-y:auto!important;z-index:30!important}.menu-open .sidebar{transform:translateX(0)!important}.topbar{margin:8px!important;height:56px!important;min-height:56px!important;position:sticky!important;top:8px!important;z-index:15!important;padding:0 11px!important}.main{margin:0 9px 18px!important;padding:12px 0 24px!important}.pagehead{gap:11px!important;align-items:flex-start!important}.pageicon{width:42px!important;height:42px!important;flex-basis:42px!important}.main h1{font-size:20px!important}.nav{display:flex!important;flex-direction:column!important}.nav a{padding:12px!important}.grid{grid-template-columns:1fr!important}.tabs{width:100%!important}.card{padding:13px!important}.toolbar,.filter{align-items:stretch!important}.search{min-width:0!important;width:100%!important;flex-wrap:wrap!important}.search input{width:100%!important;min-width:0!important}.tablewrap,.card{max-width:100%!important}table{min-width:680px!important}.topbar .user{font-size:12px!important}}
@media(min-width:761px){body.menu-collapsed .sidebar{transform:translateX(calc(-100% - 24px))!important}.menu-open .sidebar{transform:translateX(0)!important}}

/* V3: samakan frame menu operasional dengan Dashboard modern */
:root{--bar-bg:#f3f6fb;--bar-navy:#102b4e;--bar-blue:#1769e8;--bar-line:#e3eaf3;--bar-muted:#73839a}
html,body{min-height:100%;background:#f3f6fb!important}
body{font-family:"Segoe UI",Arial,sans-serif!important;font-size:13px!important;line-height:1.5!important}
.sidebar{inset:14px auto 14px 14px!important;width:246px!important;padding:22px 15px!important;border-radius:22px!important;background:linear-gradient(165deg,#12375f 0%,#0a203c 100%)!important;box-shadow:0 16px 42px #0c28451c!important}
.brand{padding:7px 10px 25px!important;gap:10px!important;font-size:14px!important}
.brand .logo{width:42px!important;height:42px!important;border-radius:14px!important;background:#ffffff16!important}
.brand small{font-size:10px!important;color:#c6d7eb!important;letter-spacing:.6px!important}
.nav{display:flex!important;flex-direction:column!important;gap:6px!important}
.nav a{display:flex!important;align-items:center!important;gap:10px!important;min-height:44px!important;padding:12px 13px!important;border-radius:12px!important;color:#d8e5f4!important;font-size:13px!important;font-weight:600!important}
.nav a:hover{background:#ffffff12!important;color:#fff!important;transform:translateX(1px)!important}
.nav a.active{background:linear-gradient(110deg,#287df1,#1761d6)!important;color:#fff!important;box-shadow:0 8px 20px #0b59ca40!important}
.topbar{height:62px!important;min-height:62px!important;margin:14px 20px 0 278px!important;padding:0 20px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;border:1px solid #e8edf4!important;border-radius:16px!important;background:#ffffffd9!important;box-shadow:none!important}
.topbar .user{margin-left:auto!important;font-size:12px!important;font-weight:700!important}
.main{margin:0 20px 24px 278px!important;padding:22px 0 32px!important;max-width:none!important;min-width:0!important}
.pagehead{display:flex!important;align-items:center!important;gap:14px!important;margin:4px 0 20px!important}
.pageicon{width:48px!important;height:48px!important;flex:0 0 48px!important;display:grid!important;place-items:center!important;border-radius:15px!important;background:#e8f1ff!important;color:#1769e8!important;font-size:25px!important}
h1{margin:0!important;font-size:23px!important;line-height:1.25!important;letter-spacing:-.45px!important;font-weight:800!important;color:#102b4e!important}
h2{font-size:17px!important;line-height:1.35!important;font-weight:750!important;color:#102b4e!important}
.subtitle{margin:5px 0 0!important;color:#73839a!important;font-size:12px!important}
.card{padding:20px!important;margin-bottom:16px!important;border:1px solid #e3eaf3!important;border-radius:17px!important;background:#fff!important;box-shadow:0 8px 28px rgba(24,50,79,.055)!important}
.tabs{width:min(100%,440px)!important;margin-bottom:14px!important;padding:4px!important;gap:4px!important;border-radius:12px!important;background:#e9eff8!important}
.tabs a{flex:1!important;width:auto!important;padding:11px!important;border-radius:9px!important;font-size:13px!important}
input,select,textarea{box-sizing:border-box!important;min-height:41px!important;padding:11px 12px!important;border:1px solid #d9e3ef!important;border-radius:10px!important;background:#fff!important;color:#18324f!important;font:inherit!important}
button,.btn{padding:10px 14px!important;border-radius:10px!important;font-size:13px!important;font-weight:700!important}
table{width:100%!important;min-width:760px!important;border-collapse:separate!important;border-spacing:0!important}
th{padding:13px 12px!important;background:#f3f7fc!important;color:#50647d!important;font-size:10px!important;font-weight:800!important;letter-spacing:.35px!important;text-transform:uppercase!important;border-bottom:1px solid #e3ebf5!important}
td{padding:13px 12px!important;color:#304760!important;font-size:12px!important;border-bottom:1px solid #edf1f6!important}
tbody tr:hover td{background:#f8fbff!important}
@media(max-width:760px){
 .sidebar{position:fixed!important;inset:8px auto 8px 8px!important;width:min(290px,calc(100vw - 45px))!important;padding:18px 13px!important;transform:translateX(calc(-100% - 18px))!important;border-radius:18px!important;z-index:40!important}
 body.menu-open .sidebar{transform:translateX(0)!important}
 .topbar{height:56px!important;min-height:56px!important;margin:8px!important;padding:0 13px!important;position:sticky!important;top:8px!important;z-index:20!important}
 .main{margin:0 14px 24px!important;padding:20px 0 28px!important}
 .pagehead{align-items:flex-start!important;gap:11px!important}
 .pageicon{width:42px!important;height:42px!important;flex-basis:42px!important}
 h1{font-size:20px!important}
 .card{padding:15px!important}
 .grid{grid-template-columns:1fr!important}
 .tabs{width:100%!important}
 .nav{display:flex!important;flex-direction:column!important}
}


/* V4: samakan ikon dan jarak navigasi dengan sidebar Dashboard */
.sidebar .nav{display:flex!important;flex-direction:column!important;gap:6px!important;margin:0!important;padding:0!important}
.sidebar .nav a{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;box-sizing:border-box!important;width:100%!important;min-height:42px!important;height:42px!important;padding:0 13px!important;margin:0!important;border:0!important;border-radius:12px!important;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:13px!important;font-weight:600!important;line-height:1!important;letter-spacing:0!important;text-align:left!important;white-space:nowrap!important}
.sidebar .nav a .ico{display:inline-flex!important;flex:0 0 23px!important;align-items:center!important;justify-content:center!important;width:23px!important;min-width:23px!important;height:23px!important;margin:0!important;padding:0!important;font-size:17px!important;line-height:1!important;text-align:center!important}
.sidebar .nav a:hover{background:#ffffff12!important;color:#fff!important;transform:translateX(0)!important}
.sidebar .nav a.active{background:linear-gradient(110deg,#287df1,#1761d6)!important;color:#fff!important;box-shadow:0 8px 20px #0b59ca40!important}
@media(max-width:700px){.sidebar .nav{display:flex!important;grid-template-columns:none!important;gap:6px!important}.sidebar .nav a{padding:0 13px!important}}


/* V5 — konsistensi visual menu operasional dengan Dashboard BARORO */
:root{--bar-bg:#f1f6fc;--bar-navy:#102f55;--bar-blue:#1769e8;--bar-line:#e2eaf4;--bar-muted:#71839a}
html,body{min-height:100%;background:linear-gradient(135deg,#f4f8fd 0%,#edf4fc 100%)!important}
body{font-family:Inter,"Segoe UI",Arial,sans-serif!important}
.sidebar{background:linear-gradient(165deg,#12375f 0%,#0a203c 100%)!important;border-radius:22px!important;box-shadow:0 16px 42px #0c28451c!important}
.topbar{background:rgba(255,255,255,.94)!important;border:1px solid #e2eaf4!important;border-radius:16px!important;box-shadow:0 6px 24px #15395c0b!important}
.main{min-height:calc(100vh - 90px)!important}
.pagehead{padding:0 2px!important}
.pageicon{background:linear-gradient(145deg,#e7f1ff,#dceaff)!important;box-shadow:inset 0 0 0 1px #d4e5ff!important}
.card{background:rgba(255,255,255,.97)!important;border:1px solid #e2eaf4!important;border-radius:18px!important;box-shadow:0 8px 26px rgba(18,55,95,.055)!important}
.card h2{display:flex;align-items:center;gap:8px}
.tabs{box-shadow:inset 0 0 0 1px #e4ebf5!important}
.toolbar,.filter{gap:10px!important}
.field label{color:#425a76!important}
.note,.msg{background:linear-gradient(100deg,#eff6ff,#f7faff)!important}
.tablewrap{width:100%;overflow-x:auto;border-radius:12px}
@media(max-width:760px){
 body{overflow-x:hidden!important}
 .menu-backdrop{display:none!important}
 body.menu-open .menu-backdrop{display:block!important;position:fixed!important;inset:0!important;background:#071a2e99!important;border:0!important;z-index:35!important}
 .sidebar{z-index:40!important}
 .topbar{z-index:20!important}
 .main{width:auto!important;min-width:0!important}
 .card{border-radius:15px!important}
 .tablewrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}

/* Logo BA RORO */
.brand .logo{display:block!important;width:42px!important;height:42px!important;object-fit:contain!important;border-radius:10px!important;background:transparent!important}

/* Logo resmi BA RORO */
.brand-logo,.logo,.logo-pelindo{object-fit:contain!important;}