/* =====================================================================
   GA REQUEST PORTAL ENTERPRISE - Tema utama
   Palet : Navy #0B1B3A · Biru #1E5EFF · Putih · Abu #F5F7FB
   ===================================================================== */
:root{
  --ink:#0B1B3A; --ink-2:#132B57; --blue:#1E5EFF; --blue-600:#1747C7; --blue-100:#EAF1FF;
  --gray-50:#F5F7FB; --gray-100:#EEF1F7; --gray-200:#E3E8F2; --gray-300:#CFD7E6;
  --text:#1A2233; --muted:#6B7891; --white:#fff;
  --ok:#12B76A; --warn:#F79009; --danger:#F04438; --info:#0BA5EC; --purple:#7A5AF8;
  --radius:14px; --radius-sm:10px;
  --shadow-xs:0 1px 2px rgba(11,27,58,.06);
  --shadow-sm:0 2px 8px rgba(11,27,58,.07);
  --shadow-md:0 6px 20px rgba(11,27,58,.10);
  --shadow-lg:0 14px 40px rgba(11,27,58,.16);
  --sidebar-w:262px;
  --header-h:62px;
}

*{ -webkit-tap-highlight-color:transparent }
body{
  font-family:"Segoe UI",Inter,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--gray-50); color:var(--text); font-size:14px; margin:0;
}
a{ text-decoration:none }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
::-webkit-scrollbar{ width:9px;height:9px } ::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:var(--gray-300); border-radius:9px }

/* ---------- Utilitas warna lembut ---------- */
.bg-primary-soft{background:#EAF1FF!important}   .text-primary{color:var(--blue)!important}
.bg-success-soft{background:#E6F7EF!important}   .text-success{color:#0E9F63!important}
.bg-warning-soft{background:#FFF4E5!important}   .text-warning{color:#B25E00!important}
.bg-danger-soft{background:#FEECEB!important}    .text-danger{color:#D92D20!important}
.bg-info-soft{background:#E5F6FE!important}      .text-info{color:#0284A8!important}
.bg-secondary-soft{background:#EEF1F7!important} .text-secondary{color:#5A6580!important}
.bg-dark-soft{background:#E4E7EE!important}      .text-dark{color:#233!important}
.text-muted{color:var(--muted)!important}

/* =====================  SIDEBAR  ===================== */
.app-sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:1040;
  background:linear-gradient(178deg,var(--ink) 0%,var(--ink-2) 100%);
  display:flex; flex-direction:column; transition:transform .25s ease;
}
.app-sidebar .brand{
  height:var(--header-h); display:flex; align-items:center; gap:10px; padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.09); flex-shrink:0;
}
.app-sidebar .brand .mark{
  width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),#59A5FF);
  display:grid;place-items:center;color:#fff;font-size:17px;box-shadow:0 3px 10px rgba(30,94,255,.5);
}
.app-sidebar .brand b{ color:#fff; font-size:15px; letter-spacing:.2px; line-height:1.1 }
.app-sidebar .brand span{ color:#8FA6D4; font-size:10.5px; letter-spacing:.9px; text-transform:uppercase }

.sidebar-scroll{ overflow-y:auto; padding:12px 10px 22px; flex:1 }
.sidebar-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18) }
.nav-label{
  color:#7F94C0; font-size:10.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  padding:16px 12px 7px;
}
.nav-item-link{
  display:flex; align-items:center; gap:11px; padding:9.5px 12px; border-radius:var(--radius-sm);
  color:#C7D4EC; font-size:13.5px; font-weight:500; margin-bottom:2px; position:relative;
  transition:background .16s,color .16s;
}
.nav-item-link i{ font-size:16px; width:20px; text-align:center; flex-shrink:0 }
.nav-item-link:hover{ background:rgba(255,255,255,.08); color:#fff }
.nav-item-link.active{ background:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(30,94,255,.4) }
.nav-item-link .badge{ margin-left:auto; font-size:10px; padding:3px 7px }
.nav-toggle:after{
  content:"\F282"; font-family:"bootstrap-icons"; margin-left:auto; font-size:11px; transition:transform .2s;
}
.nav-toggle[aria-expanded="true"]:after{ transform:rotate(180deg) }
.nav-sub{ margin:2px 0 4px 14px; padding-left:14px; border-left:1px solid rgba(255,255,255,.14) }
.nav-sub .nav-item-link{ font-size:12.8px; padding:7.5px 11px; color:#A9BBDD }

/* =====================  TOPBAR & KONTEN  ===================== */
.app-main{ margin-left:var(--sidebar-w); min-height:100vh; transition:margin .25s ease }
.app-header{
  height:var(--header-h); background:#fff; border-bottom:1px solid var(--gray-200);
  position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:12px; padding:0 18px;
}
.btn-hamburger{ display:none; border:0; background:transparent; font-size:22px; color:var(--ink) }
.global-search{ position:relative; max-width:390px; flex:1 }
.global-search input{
  height:38px; border-radius:19px; border:1px solid var(--gray-200); background:var(--gray-50);
  padding-left:38px; font-size:13.5px;
}
.global-search input:focus{ background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,94,255,.12) }
.global-search .bi-search{ position:absolute; left:14px; top:11px; color:var(--muted); font-size:14px }
.search-result{
  position:absolute; top:44px; left:0; right:0; background:#fff; border:1px solid var(--gray-200);
  border-radius:12px; box-shadow:var(--shadow-md); max-height:380px; overflow:auto; display:none; z-index:1050;
}
.search-result a{ display:block; padding:9px 14px; color:var(--text); font-size:13px; border-bottom:1px solid var(--gray-100) }
.search-result a:hover{ background:var(--blue-100) }

.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--gray-200);background:#fff;
  display:grid;place-items:center;color:var(--ink);font-size:17px;position:relative;
}
.icon-btn:hover{ background:var(--gray-50) }
.icon-btn .dot{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--danger); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center;
}
.avatar-sm{ width:34px;height:34px;border-radius:50%;object-fit:cover }
.avatar-ini{
  width:34px;height:34px;border-radius:50%;background:var(--blue-100);color:var(--blue);
  display:grid;place-items:center;font-weight:700;font-size:13px;
}
.notif-item{ display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--gray-100) }
.notif-item.unread{ background:#F7FAFF }
.notif-item .ic{ width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0 }

.page-wrap{ padding:22px }
.page-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:18px }
.page-head h1{ font-size:20px; font-weight:700; margin:0; letter-spacing:-.2px }
.page-head .sub{ color:var(--muted); font-size:13px; margin-top:2px }
.breadcrumb{ font-size:12.5px; margin:0 } .breadcrumb-item a{ color:var(--muted) }

/* =====================  KARTU  ===================== */
.card{ border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow-xs); background:#fff }
.card-header{ background:#fff; border-bottom:1px solid var(--gray-100); padding:14px 18px; font-weight:600 }
.card-body{ padding:18px }

/* Kartu menu utama dashboard */
.menu-card{
  display:block; background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:20px 18px; height:100%; position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.menu-card:before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--blue); opacity:.9;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.menu-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gray-300) }
.menu-card:hover:before{ transform:scaleX(1) }
.menu-card .ic{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:25px;margin-bottom:14px;
  transition:transform .25s ease;
}
.menu-card:hover .ic{ transform:scale(1.08) rotate(-4deg) }
.menu-card h6{ font-size:14.5px; font-weight:700; color:var(--text); margin:0 0 3px }
.menu-card p{ font-size:12.3px; color:var(--muted); margin:0; line-height:1.45 }
.menu-card .cnt{
  position:absolute; top:16px; right:16px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px;
}

/* Kartu statistik */
.stat-card{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); padding:16px 18px; height:100% }
.stat-card .lbl{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; font-weight:600 }
.stat-card .val{ font-size:27px; font-weight:700; line-height:1.15; margin:6px 0 2px; letter-spacing:-.6px }
.stat-card .ic{ width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px }
.stat-card .trend{ font-size:11.5px; font-weight:600 }

/* =====================  TABEL  ===================== */
.table{ font-size:13.2px; margin:0 }
.table > :not(caption) > * > *{ padding:11px 12px }
.table thead th{
  background:var(--gray-50); color:var(--muted); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--gray-200); white-space:nowrap;
}
.table tbody tr:hover{ background:#F9FBFF }
.table-hover > tbody > tr:hover > *{ --bs-table-accent-bg:transparent }
.req-no{ font-family:"Consolas","SF Mono",monospace; font-size:12.4px; font-weight:600; color:var(--blue) }
.badge{ font-weight:600; padding:5px 10px; border-radius:7px; font-size:11.2px; letter-spacing:.2px }

/* DataTables */
.dataTables_wrapper .row:first-child{ padding:0 4px 12px }
.dataTables_filter input, .dataTables_length select{
  border:1px solid var(--gray-200); border-radius:8px; padding:5px 10px; font-size:13px;
}
.dataTables_filter input:focus, .dataTables_length select:focus{ outline:none; border-color:var(--blue) }
.page-link{ border-radius:8px!important; margin:0 2px; border-color:var(--gray-200); color:var(--text); font-size:13px }
.page-item.active .page-link{ background:var(--blue); border-color:var(--blue) }
.dataTables_info{ font-size:12.5px; color:var(--muted) }

/* =====================  FORM  ===================== */
.form-label{ font-size:12.6px; font-weight:600; color:#3A4459; margin-bottom:5px }
.form-label .req{ color:var(--danger) }
.form-control,.form-select{
  border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:13.6px; padding:9px 12px;
  background:#fff; transition:border-color .15s, box-shadow .15s;
}
.form-control:focus,.form-select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,94,255,.12) }
.form-control.is-invalid,.form-select.is-invalid{ border-color:var(--danger) }
.form-text{ font-size:11.6px; color:var(--muted) }
.input-group-text{ background:var(--gray-50); border-color:var(--gray-200); font-size:13px; color:var(--muted) }
.btn{ border-radius:var(--radius-sm); font-size:13.4px; font-weight:600; padding:9px 16px }
.btn-sm{ padding:5.5px 11px; font-size:12.4px; border-radius:8px }
.btn-primary{ background:var(--blue); border-color:var(--blue) }
.btn-primary:hover{ background:var(--blue-600); border-color:var(--blue-600) }
.btn-light{ background:#fff; border-color:var(--gray-200) } .btn-light:hover{ background:var(--gray-50) }
.form-section{ border-left:3px solid var(--blue); padding-left:12px; margin:22px 0 14px }
.form-section h6{ font-size:13.5px; font-weight:700; margin:0 } .form-section small{ color:var(--muted); font-size:11.8px }

/* Area unggah berkas */
.dropzone{
  border:2px dashed var(--gray-300); border-radius:var(--radius); padding:26px; text-align:center;
  background:var(--gray-50); cursor:pointer; transition:.18s;
}
.dropzone:hover,.dropzone.drag{ border-color:var(--blue); background:var(--blue-100) }
.file-chip{
  display:flex; align-items:center; gap:9px; padding:8px 11px; border:1px solid var(--gray-200);
  border-radius:9px; background:#fff; margin-top:7px; font-size:12.6px;
}

/* =====================  TIMELINE APPROVAL  ===================== */
.timeline{ position:relative; padding-left:30px }
.timeline:before{ content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--gray-200) }
.tl-item{ position:relative; padding-bottom:20px }
.tl-item:last-child{ padding-bottom:0 }
.tl-dot{
  position:absolute; left:-30px; top:1px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; background:#fff; border:2px solid var(--gray-300); color:var(--muted);
}
.tl-dot.done{ background:var(--ok); border-color:var(--ok); color:#fff }
.tl-dot.wait{ background:#fff; border-color:var(--warn); color:var(--warn) }
.tl-dot.rej{ background:var(--danger); border-color:var(--danger); color:#fff }
.tl-title{ font-size:13.4px; font-weight:600; margin:0 }
.tl-meta{ font-size:11.8px; color:var(--muted) }
.tl-body{ font-size:12.8px; background:var(--gray-50); border-radius:9px; padding:8px 11px; margin-top:6px }

/* =====================  PAPAN STATUS ARMADA  ===================== */
.fleet-card{ border:1px solid var(--gray-200); border-radius:var(--radius); background:#fff; overflow:hidden; height:100% }
.fleet-card .top{ padding:14px 16px; display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--gray-100) }
.fleet-plate{
  font-family:"Consolas",monospace; font-weight:700; font-size:13.5px; background:var(--ink); color:#fff;
  padding:4px 9px; border-radius:6px; letter-spacing:.6px;
}
.fleet-card .body{ padding:13px 16px; font-size:12.6px }
.fleet-card .row-i{ display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--gray-100) }
.fleet-card .row-i:last-child{ border:0 }
.pulse{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-right:6px }
.pulse.on{ background:var(--info); animation:pulse 1.6s infinite }
.pulse.mt{ background:var(--warn) } .pulse.bd{ background:var(--danger) }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(11,165,236,.55)} 70%{box-shadow:0 0 0 8px rgba(11,165,236,0)} 100%{box-shadow:0 0 0 0 rgba(11,165,236,0)} }

/* Kanban maintenance */
.kanban{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px }
.kanban-col{ min-width:270px; flex:1; background:var(--gray-100); border-radius:var(--radius); padding:12px }
.kanban-col h6{ font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); margin-bottom:10px }
.kanban-card{ background:#fff; border-radius:10px; padding:11px 12px; margin-bottom:9px; box-shadow:var(--shadow-xs); font-size:12.6px }

/* =====================  HALAMAN LOGIN  ===================== */
.auth-wrap{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr }
.auth-visual{
  background:linear-gradient(150deg,var(--ink) 0%,#143166 55%,var(--blue-600) 100%);
  color:#fff; padding:52px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.auth-visual:before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(circle at 70% 30%,#000,transparent 72%);
}
.auth-visual > *{ position:relative }
.auth-visual h2{ font-size:31px; font-weight:700; line-height:1.22; letter-spacing:-.5px }
.auth-visual p{ color:#B9CBEC; font-size:14px; max-width:430px; line-height:1.6 }
.auth-feat{ display:flex; gap:11px; align-items:flex-start; margin-bottom:15px }
.auth-feat i{ font-size:17px; color:#7FB0FF; margin-top:2px }
.auth-feat b{ font-size:13.6px; display:block } .auth-feat span{ font-size:12.3px; color:#9FB6DC }
.auth-form{ display:flex; align-items:center; justify-content:center; padding:40px 22px; background:#fff }
.auth-box{ width:100%; max-width:396px }
.captcha-img{ height:46px; border-radius:9px; border:1px solid var(--gray-200); cursor:pointer; background:var(--gray-50) }

/* =====================  RESPONSIVE  ===================== */
@media (max-width:1199.98px){
  .auth-wrap{ grid-template-columns:1fr } .auth-visual{ display:none }
}
@media (max-width:991.98px){
  .app-sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg) }
  .app-sidebar.show{ transform:translateX(0) }
  .app-main{ margin-left:0 }
  .btn-hamburger{ display:block }
  .sidebar-backdrop{ position:fixed; inset:0; background:rgba(11,27,58,.5); z-index:1035; display:none }
  .sidebar-backdrop.show{ display:block }
}
@media (max-width:767.98px){
  .page-wrap{ padding:14px }
  .page-head h1{ font-size:17px }
  .stat-card .val{ font-size:23px }
  .menu-card{ padding:16px 14px }
  .menu-card .ic{ width:46px;height:46px;font-size:21px;margin-bottom:10px }
  .global-search{ display:none }
  .card-body{ padding:14px }
  .table{ font-size:12.6px }
  .dataTables_wrapper .dataTables_filter{ float:none; text-align:left; width:100% }
  .dataTables_wrapper .dataTables_filter input{ width:100% }
}
@media print{
  .app-sidebar,.app-header,.no-print,.btn{ display:none!important }
  .app-main{ margin:0 } .page-wrap{ padding:0 } .card{ border:0; box-shadow:none }
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
}