﻿:root{
  --bg:#f4f7fb;
  --text:#172033;
  --muted:rgba(23,32,51,0.68);

  /* Accent colors (RGB triplets) */
  --accent-rgb: 99 102 241;   /* indigo */
  --accent2-rgb: 34 211 238;  /* cyan */
  --purple-rgb: 168 85 247;

  --danger:#ff4d6d;
  --ok:#22c55e;

  --border:rgba(15,23,42,0.12);
  --shadow:0 18px 40px rgba(15,23,42,0.10);
  --radius:14px;
}

/* Role accents */
.theme-admin{--accent-rgb: 99 102 241; --accent2-rgb: 34 211 238;}
.theme-driver{--accent-rgb: 34 197 94; --accent2-rgb: 16 185 129;}
.theme-auth{--accent-rgb: 34 211 238; --accent2-rgb: 168 85 247;}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:
    radial-gradient(1200px 800px at 15% 10%, rgb(var(--accent-rgb) / 0.12), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgb(var(--accent2-rgb) / 0.10), transparent 55%),
    radial-gradient(900px 700px at 55% 120%, rgb(var(--purple-rgb) / 0.06), transparent 60%),
    var(--bg);
  color:var(--text);
}

a{color:inherit}

.container{width:min(100%,980px);max-width:980px;margin:0 auto;padding:clamp(12px,2vw,22px)}
.container.wide{width:min(100%,1320px);max-width:1320px}
img,video,canvas,svg{max-width:100%}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
  position:sticky;top:0;
  background:rgb(255 255 255 / 0.84);
  backdrop-filter:blur(12px);
  z-index:60;
}

.brand{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.brand-title{font-size:18px;font-weight:900;letter-spacing:0.2px;color:var(--text)}
.brand-subtitle{font-size:13px;font-weight:800;letter-spacing:0.2px}
.mobile-menu-btn{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px !important;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-direction:column;
  flex:0 0 44px;
}
.mobile-menu-btn span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
}
.right{display:flex;gap:10px;align-items:center}
.notif-shell{position:relative}
.header-user-shell{position:relative}
.notif-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:14px}
.notif-bell{font-size:18px;line-height:1}
.notif-count{position:absolute;top:-4px;right:-4px;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:linear-gradient(180deg, rgb(239 68 68 / 0.96), rgb(220 38 38 / 0.82));color:#fff;font-size:11px;font-weight:900}
.header-user-btn{
  width:44px;
  height:44px;
  padding:0;
  border-radius:999px !important;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  background:linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(241 245 249 / 0.95)) !important;
  border:1px solid rgba(148,163,184,0.24) !important;
  box-shadow:0 10px 24px rgba(15,23,42,0.10);
}
.header-user-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(15,23,42,0.14);
}
.header-user-avatar,
.header-user-initials{
  width:100%;
  height:100%;
}
.header-user-avatar{
  display:block;
  object-fit:cover;
}
.header-user-initials{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  color:#fff;
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.22), transparent 38%),
    linear-gradient(180deg, rgb(var(--accent-rgb) / 0.96), rgb(var(--accent2-rgb) / 0.84));
}
.header-user-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(240px,calc(100vw - 32px));
  padding:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgb(255 255 255 / 0.98);
  box-shadow:var(--shadow);
  z-index:30;
}
.header-user-menu-head{
  padding:2px 4px 12px 4px;
  margin-bottom:10px;
  border-bottom:1px solid rgba(148,163,184,0.18);
}
.header-user-menu-name{
  font-size:14px;
  font-weight:900;
  color:var(--text);
}
.header-user-menu-role{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}
.header-user-menu-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px;
  border-radius:12px;
  margin-top:8px;
}
.header-user-menu-btn-danger{
  color:rgb(185 28 28) !important;
  border-color:rgba(248,113,113,0.28) !important;
  background:rgb(254 242 242 / 0.92) !important;
}
.notif-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(420px,calc(100vw - 32px));max-height:70vh;overflow:auto;padding:12px;border:1px solid var(--border);border-radius:18px;background:rgb(255 255 255 / 0.98);box-shadow:var(--shadow);z-index:30}
.notif-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(148,163,184,0.18)}
.notif-title{font-size:15px;font-weight:900}
.notif-sub{margin:4px 0 0 0;font-size:12px}
.notif-list{display:grid;gap:10px;padding-top:10px}
.notif-item{padding:10px 12px;border-radius:14px;border:1px solid rgba(148,163,184,0.18);background:rgb(248 250 252 / 0.9)}
.notif-item-read{opacity:0.72}
.notif-item-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.notif-item-title{font-size:13px;font-weight:900;line-height:1.35}
.notif-item-tag{padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:0.4px;border:1px solid rgba(148,163,184,0.22);background:#fff}
.notif-item-desc{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.45}
.notif-item-meta{margin-top:8px;font-size:11px;color:var(--muted)}
.notif-item-actions{margin-top:10px;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.notif-link-btn,.notif-read-btn,.notif-delete-btn{padding:7px 10px;border-radius:10px;font-size:12px}
.notif-item-warning{background:rgb(255 247 237 / 0.96);border-color:rgb(251 146 60 / 0.28)}
.notif-item-warning .notif-item-tag{background:rgb(255 237 213 / 1);color:rgb(154 52 18);border-color:rgb(251 146 60 / 0.2)}
.notif-item-danger{background:rgb(254 242 242 / 0.96);border-color:rgb(248 113 113 / 0.28)}
.notif-item-danger .notif-item-tag{background:rgb(254 226 226 / 1);color:rgb(153 27 27);border-color:rgb(248 113 113 / 0.2)}
.notif-item-info{background:rgb(239 246 255 / 0.96);border-color:rgb(96 165 250 / 0.24)}
.notif-item-info .notif-item-tag{background:rgb(219 234 254 / 1);color:rgb(30 64 175);border-color:rgb(96 165 250 / 0.18)}

.pill{padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px}

.card{
  background:linear-gradient(180deg, rgb(255 255 255 / 0.96), rgb(248 250 252 / 0.92));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(14px,1.7vw,18px);
  margin:16px 0;
  max-width:100%;
  overflow:hidden;
}

h1,h2,h3{margin:0 0 10px 0}
.muted{color:var(--muted);margin:0 0 12px 0}

.grid{display:grid;gap:12px;min-width:0}
.grid > *{min-width:0}
label{display:grid;gap:6px;color:var(--muted);font-size:13px}
.trip-tax-toggle{align-content:start}
.trip-tax-toggle-row{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgb(255 255 255 / 0.96);
  color:var(--text);
  font-size:14px;
  font-weight:600;
}
.trip-tax-toggle-row input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:rgb(var(--accent-rgb) / 1);
}

input,select,textarea,button{
  border-radius:12px;
  border:1px solid var(--border);
  padding:10px 12px;
  background:rgb(255 255 255 / 0.96);
  color:var(--text);
  outline:none;
  max-width:100%;
}

input:focus,select:focus,textarea:focus{
  border-color:rgb(var(--accent-rgb) / 0.70);
  box-shadow:0 0 0 4px rgb(var(--accent-rgb) / 0.18);
}

button{
  background:linear-gradient(180deg, rgb(var(--accent-rgb) / 0.98), rgb(var(--accent-rgb) / 0.72));
  border:none;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

button:disabled{
  opacity:0.55;
  cursor:not-allowed;
  filter:saturate(0.7);
}

button.ghost{background:transparent;border:1px solid var(--border);font-weight:700;color:var(--text)}

.msg{min-height:18px;color:var(--muted)}
.msg.error{color:var(--danger)}
.msg.ok{color:var(--ok)}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.tab{background:transparent;border:1px solid var(--border);padding:8px 10px;border-radius:999px;cursor:pointer}
.tab.active{border-color:rgb(var(--accent-rgb) / 0.70);background:rgb(var(--accent-rgb) / 0.14)}

.panel{background:rgb(255 255 255 / 0.72);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(12px,1.6vw,16px);box-shadow:var(--shadow);max-width:100%;overflow:hidden}

.table{display:grid;gap:8px;max-width:100%;overflow-x:auto;padding-bottom:4px}
.row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:8px;align-items:center;border:1px solid var(--border);padding:10px;border-radius:12px;background:rgb(255 255 255 / 0.92);width:max-content;min-width:100%}
.row.header{background:rgb(241 245 249 / 0.96);color:var(--muted);font-size:12px}
.row > div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#myTrips .row{grid-template-columns:1.3fr 1fr 0.95fr 0.95fr 0.95fr 0.8fr;}
#myTrips .row.header{grid-template-columns:1.3fr 1fr 0.95fr 0.95fr 0.95fr 0.8fr;}
#myTrips .act-select{width:100%;min-width:86px;}
.table-users .row{
  grid-template-columns:minmax(88px, 96px) minmax(150px, 1.2fr) minmax(140px, 1fr) minmax(120px, 0.9fr) minmax(110px, 0.8fr) minmax(70px, 80px) minmax(100px, 110px);
  column-gap:18px;
}
.table-users .row > div{
  white-space:nowrap;
}
.table-users .row > div:first-child{
  display:flex;
  align-items:center;
}
.table-users .row > div:last-child{
  overflow:visible;
}
.table-users .act-select{
  width:100%;
  min-width:86px;
}
.table-ar-ledger .row{
  grid-template-columns:minmax(150px,0.95fr) minmax(160px,0.95fr) minmax(280px,1.45fr) minmax(260px,1.2fr) minmax(150px,0.85fr) minmax(150px,0.9fr) minmax(130px,0.8fr) minmax(120px,0.75fr) minmax(180px,0.95fr) minmax(180px,1fr) minmax(110px,0.7fr);
  column-gap:14px;
}
.table-ar-ledger{
  width:max-content;
  min-width:1970px;
}
.table-ar-ledger .row > div:nth-child(3),
.table-ar-ledger .row > div:nth-child(4),
.table-ar-ledger .row > div:nth-child(9),
.table-ar-ledger .row > div:nth-child(10){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.table-ar-ledger .row > div:last-child{
  overflow:visible;
}
.table-ar-ledger .row.header > div{
  align-self:start;
}
.table-ar-ledger .act-select{
  width:100%;
  min-width:96px;
}
.table-shell-ar{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  max-width:100%;
  min-width:0;
}
.table-shell-ar > .table{
  overflow-x:visible;
  padding-bottom:0;
}
.ar-ledger-pane{
  min-width:0;
  overflow:hidden;
}
.rowline > .muted{
  max-width:100%;
  overflow-wrap:anywhere;
  text-align:right;
}
.table-shell{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  max-width:100%;
  min-width:0;
}
.table-shell > .table{
  overflow-x:visible;
  padding-bottom:0;
}
.ppn-ledger-pane{
  min-width:0;
  overflow:hidden;
}
.table-shell-ppn{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  max-width:100%;
  min-width:0;
}
.table-shell-ppn > .table{
  overflow-x:visible;
  padding-bottom:0;
}
.vehicle-ledger-pane{
  min-width:0;
  overflow:hidden;
}
.table-shell-vehicles{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  max-width:100%;
  min-width:0;
}
.table-shell-vehicles > .table{
  overflow-x:visible;
  padding-bottom:0;
}
.table-vehicles .vehicle-status-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.table-vehicles{
  width:max-content;
  min-width:1100px;
}
.table-vehicles .row{
  grid-template-columns:minmax(130px,0.95fr) minmax(110px,0.8fr) minmax(120px,0.8fr) minmax(170px,1fr) minmax(90px,0.6fr) minmax(120px,0.8fr) minmax(70px,0.45fr) minmax(90px,0.55fr);
  column-gap:12px;
}
.table-vehicles .row > div:nth-child(4){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.table-vehicles .row > div:last-child{
  overflow:visible;
}
.table-vehicles .act-select{
  width:100%;
  min-width:86px;
}
#driverSubmissionSummary,
#managementSubmissionSummary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
#driverSubmissionSummary > div,
#managementSubmissionSummary > div{
  display:grid;
  gap:4px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgb(255 255 255 / 0.92);
}
.submission-metric span{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.45px;
  text-transform:uppercase;
  color:var(--muted);
}
.submission-metric strong{
  font-size:16px;
  line-height:1.3;
  color:var(--text);
}
.table-shell-submissions{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 8px 0;
  border:1px solid rgba(148,163,184,0.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(248 250 252 / 0.54));
}
.table-shell-submissions > .table{
  max-width:none;
  overflow:visible;
  padding:10px;
}
.table-shell-submissions .row{
  align-items:stretch;
}
.table-shell-submissions .row > div{
  line-height:1.4;
  padding-top:10px;
  padding-bottom:10px;
}
.table-submissions-driver{
  width:max-content;
  min-width:1820px;
}
.table-submissions-fuel{
  width:max-content;
  min-width:1560px;
}
.table-submissions-driver .row{
  grid-template-columns:
    minmax(140px,0.95fr)
    minmax(160px,1fr)
    minmax(240px,1.2fr)
    minmax(130px,0.8fr)
    minmax(130px,0.8fr)
    minmax(340px,1.7fr)
    minmax(130px,0.8fr)
    minmax(230px,1.15fr)
    minmax(120px,0.75fr);
  column-gap:14px;
}
.table-submissions-fuel .row{
  grid-template-columns:
    minmax(150px,1fr)
    minmax(170px,1fr)
    minmax(240px,1.25fr)
    minmax(340px,1.7fr)
    minmax(120px,0.75fr)
    minmax(110px,0.7fr)
    minmax(130px,0.8fr)
    minmax(220px,1.15fr)
    minmax(110px,0.7fr);
  column-gap:14px;
}
.table-submissions-driver .row > div:nth-child(1),
.table-submissions-driver .row > div:nth-child(3),
.table-submissions-driver .row > div:nth-child(6),
.table-submissions-driver .row > div:nth-child(8){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.table-submissions-fuel .row > div:nth-child(1),
.table-submissions-fuel .row > div:nth-child(3),
.table-submissions-fuel .row > div:nth-child(4),
.table-submissions-fuel .row > div:nth-child(8){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.table-submissions-fuel .row > div:last-child{
  overflow:visible;
}
.table-submissions-driver .row > div:last-child{
  overflow:visible;
}
.table-submissions-driver .row.header > div{
  font-size:12px;
  line-height:1.3;
}
.table-submissions-fuel .row.header > div{
  font-size:12px;
  line-height:1.3;
}
.table-submissions-driver .act-select{
  width:100%;
  min-width:96px;
}
.table-submissions-fuel .act-select{
  width:100%;
  min-width:96px;
}
.table-submissions-management{
  width:max-content;
  min-width:2040px;
}
.table-submissions-management .row{
  grid-template-columns:minmax(100px,0.6fr) minmax(145px,0.9fr) minmax(210px,1.1fr) minmax(120px,0.75fr) minmax(290px,1.45fr) minmax(130px,0.8fr) minmax(100px,0.6fr) minmax(230px,1.2fr) minmax(120px,0.75fr) minmax(140px,0.85fr) minmax(210px,1.05fr) minmax(110px,0.7fr);
  column-gap:14px;
}
.table-submissions-management .row > div:nth-child(3),
.table-submissions-management .row > div:nth-child(5),
.table-submissions-management .row > div:nth-child(8),
.table-submissions-management .row > div:nth-child(11){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.table-submissions-management .row > div:last-child{
  overflow:visible;
}
.table-submissions-management .row.header > div{
  font-size:12px;
  line-height:1.3;
}
.table-submissions-management .act-select{
  width:100%;
  min-width:84px;
}

.summary{border:1px dashed rgba(15,23,42,0.18);border-radius:12px;padding:10px;color:var(--muted);font-size:13px;background:rgb(255 255 255 / 0.72)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.submission-print-only{display:none}

.theme-driver .brand{color:rgb(var(--accent-rgb) / 1)}
.theme-admin .brand{color:rgb(var(--accent-rgb) / 1)}

/* Auth (Login) */
.theme-auth{min-height:100vh}
.auth-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 16%, rgb(255 255 255 / 0.88) 0 54px, transparent 55px),
    radial-gradient(circle at 42% 10%, rgb(255 255 255 / 0.76) 0 38px, transparent 39px),
    linear-gradient(180deg, #c7dcff 0%, #bfe6fb 34%, #86d0ea 68%, #2b6279 100%);
}
.auth-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgb(15 23 42 / 0.20), rgb(15 23 42 / 0.54)),
    url("/login-bus-photo.jpg");
  background-repeat:no-repeat,no-repeat;
  background-position:center center,center center;
  background-size:cover,cover;
  opacity:0.96;
  transform:scale(1.02);
}
.auth-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 50% 42%, rgb(255 255 255 / 0.20), transparent 60%),
    linear-gradient(180deg, rgb(15 23 42 / 0.08), rgb(15 23 42 / 0.34));
  pointer-events:none;
}
.auth-card{
  width:min(520px, 100%);
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-radius:28px;
  position:relative;
  overflow:hidden;
  border:1px solid rgb(255 255 255 / 0.28);
  box-shadow:0 26px 80px rgba(15,23,42,0.34);
  background:linear-gradient(180deg, rgb(255 255 255 / 0.30), rgb(255 255 255 / 0.14));
  backdrop-filter:blur(20px);
}
.auth-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.08)),
    radial-gradient(360px 220px at 50% 0%, rgb(var(--accent-rgb) / 0.18), transparent 72%);
  pointer-events:none;
}
.auth-hero,.auth-form{position:relative;z-index:1}
.auth-hero{
  padding:30px 30px 16px 30px;
  text-align:center;
  background:transparent;
}
.logo-badge{
  width:56px;
  height:56px;
  margin:0 auto;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#0f172a;
  background:linear-gradient(180deg, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.46));
  border:1px solid rgb(255 255 255 / 0.32);
  box-shadow:0 16px 40px rgba(15,23,42,0.14);
}
.auth-hero h1{
  font-size:28px;
  line-height:1.18;
  letter-spacing:0.2px;
  margin-top:16px;
  color:#0f172a;
  text-shadow:0 2px 12px rgb(255 255 255 / 0.28);
}
.auth-hero .muted{
  margin:10px auto 0;
  max-width:420px;
  color:rgba(15,23,42,0.68);
  text-shadow:0 1px 10px rgb(255 255 255 / 0.24);
}
.auth-points{
  list-style:none;
  padding:0;
  margin:18px 0 0 0;
  display:grid;
  gap:10px;
  color:rgba(15,23,42,0.74);
  text-shadow:0 1px 10px rgb(255 255 255 / 0.22);
}
.auth-points li{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 0 0 4px rgb(255 255 255 / 0.04)}
.dot-blue{background:rgb(var(--accent-rgb) / 0.95)}
.dot-green{background:rgb(var(--accent2-rgb) / 0.95)}
.dot-purple{background:rgb(var(--purple-rgb) / 0.95)}
.auth-hint{
  margin-top:18px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgb(255 255 255 / 0.26);
  background:rgb(255 255 255 / 0.36);
  color:rgba(15,23,42,0.78);
  font-size:13px;
}

.auth-form{
  padding:10px 30px 28px 30px;
  background:transparent;
  backdrop-filter:none;
}
.auth-form-head{
  margin-bottom:14px;
  text-align:center;
}
.auth-form-head h2{
  margin:0 0 6px 0;
  font-size:22px;
  color:#0f172a;
}
.auth-form .muted{
  color:rgba(15,23,42,0.70);
}
.auth-grid{display:grid;gap:12px}
.input-wrap{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
  padding:0 10px;
  border-radius:16px;
  border:1px solid rgb(255 255 255 / 0.28);
  background:rgb(255 255 255 / 0.42);
  backdrop-filter:blur(10px);
}
.input-wrap.has-action{grid-template-columns:auto 1fr auto}
.input-wrap input{border:none;background:transparent;padding:12px 0}
.input-wrap input:focus{box-shadow:none}
.input-wrap:focus-within{border-color:rgb(var(--accent-rgb) / 0.62);box-shadow:0 0 0 4px rgb(var(--accent-rgb) / 0.16)}
.input-ico{
  display:inline-grid;
  place-items:center;
  min-width:32px;
  height:32px;
  border-radius:12px;
  border:1px solid rgb(255 255 255 / 0.24);
  background:rgb(255 255 255 / 0.48);
  color:rgba(23,32,51,0.84);
  font-weight:800;
  font-size:12px;
}
.pw-toggle{
  background:rgb(255 255 255 / 0.56);
  border:1px solid rgb(255 255 255 / 0.26);
  color:rgba(23,32,51,0.88);
  padding:8px 10px;
  border-radius:12px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
}
.pw-toggle:hover{border-color:rgba(99,102,241,0.28);background:rgb(248 250 252 / 0.98)}
.pw-toggle:focus-visible{outline:none;box-shadow:0 0 0 4px rgb(var(--accent-rgb) / 0.18);border-color:rgb(var(--accent-rgb) / 0.60)}
.btn-primary{
  width:100%;
  padding:13px 14px;
  border-radius:16px;
  transition:filter 160ms ease, transform 160ms ease;
  box-shadow:0 16px 28px rgb(var(--accent-rgb) / 0.22);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:translateY(1px)}
.auth-foot{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:rgba(15,23,42,0.68);
}
.auth-foot .sep{opacity:0.6}

@media (prefers-reduced-motion: no-preference){
  .auth-card{transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease}
  .auth-card:hover{transform:translateY(-2px);box-shadow:0 30px 90px rgba(15,23,42,0.38);border-color:rgb(255 255 255 / 0.22)}
}

@media (max-width: 900px){
  .auth-shell{padding:20px 14px}
  .auth-card{width:min(100%, 520px)}
  .auth-hero{padding:24px 20px 12px 20px}
  .auth-form{padding:8px 20px 22px 20px}
  .auth-hero h1{font-size:24px}
  .auth-points li{justify-content:flex-start}
}

/* App Shell (Sidebar Layout) */
.app-shell{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:calc(100vh - 58px)}
.sidebar{border-right:1px solid var(--border);padding:16px 14px;background:rgb(255 255 255 / 0.78);position:sticky;top:58px;align-self:start;height:calc(100vh - 58px);overflow:auto}
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:58px 0 0;
  background:rgb(15 23 42 / 0.42);
  z-index:44;
}
.sidebar-head{display:grid;gap:4px;padding:8px 10px 12px 10px}
.sidebar-title{font-weight:900;letter-spacing:0.2px}
.sidebar-sub{font-size:12px}

.nav{display:flex;flex-direction:column;gap:8px;padding:6px;min-height:calc(100% - 12px)}
.nav-item{width:100%;text-align:left;background:transparent;border:1px solid var(--border);padding:10px 12px;border-radius:14px;cursor:pointer;color:var(--text)}
.nav-item:hover{border-color:rgba(99,102,241,0.22);background:rgb(99 102 241 / 0.05)}
.nav-item.active{border-color:rgb(var(--accent-rgb) / 0.70);background:linear-gradient(180deg, rgb(var(--accent-rgb) / 0.18), rgb(var(--accent-rgb) / 0.08))}
.theme-driver .nav-item.active{border-color:rgb(var(--accent-rgb) / 0.70);background:linear-gradient(180deg, rgb(var(--accent-rgb) / 0.16), rgb(var(--accent-rgb) / 0.07))}
.nav-spacer{flex:1}
.nav-item-secondary{opacity:0.92}
.nav-group{padding:4px 12px 0 12px;font-size:12px;font-weight:800;letter-spacing:0.2px}
.nav-item-sub{padding-left:26px}

.app-main{min-width:0}
.view.hidden{display:none}

@media (max-width: 900px){
  .topbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:12px 14px;
  }
  .mobile-menu-btn{display:inline-flex}
  .brand{min-width:0}
  .brand-title{
    font-size:15px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .brand-subtitle{font-size:12px}
  .right{
    gap:8px;
    justify-self:end;
  }
  .app-shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;
    top:69px;
    left:0;
    width:min(320px,86vw);
    height:calc(100dvh - 69px);
    border-right:1px solid var(--border);
    border-bottom:none;
    box-shadow:var(--shadow);
    z-index:50;
    transform:translateX(-104%);
    transition:transform 180ms ease;
  }
  body.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-overlay{display:block}
  .sidebar-overlay.hidden{display:none}
  .nav{
    flex-direction:column;
    overflow:auto;
    gap:8px;
    padding:6px;
    min-height:auto;
  }
  .nav-spacer{display:none}
  .nav-item{white-space:normal}
  .app-main{min-width:0}
  body.sidebar-open{overflow:hidden}
}

/* Small UI Helpers */
.btn-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hidden{display:none !important}
.actions{display:flex;gap:8px;justify-content:flex-end}
.btn-small{padding:8px 10px;border-radius:12px;font-weight:900;font-size:12px}
.btn-icon{width:38px;padding:8px 0;line-height:1;text-align:center}
.btn-danger{background:linear-gradient(180deg, rgb(255 77 109 / 0.95), rgb(255 77 109 / 0.70));border:none}
.rowline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.rowline > *{min-width:0}

.table-vehicles .row{
  grid-template-columns:minmax(130px,0.9fr) minmax(110px,0.75fr) minmax(120px,0.75fr) minmax(150px,0.9fr) minmax(170px,1fr) minmax(90px,0.55fr) minmax(120px,0.75fr) minmax(70px,0.4fr) minmax(110px,0.7fr);
}
.vehicle-status-wrap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;white-space:normal}
.vehicle-debt-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(148,163,184,0.24);background:rgb(255 255 255 / 0.96);font-size:11px;font-weight:800;color:var(--text)}
.vehicle-debt-badge-sewa{background:rgb(14 165 233 / 0.12);border-color:rgb(14 165 233 / 0.22);color:rgb(3 105 161)}
.vehicle-debt-badge-angsuran{background:rgb(249 115 22 / 0.12);border-color:rgb(249 115 22 / 0.24);color:rgb(194 65 12)}
.route-toolbar{display:flex;gap:8px;align-items:end;justify-content:flex-end;flex-wrap:wrap}
.route-toolbar-field{min-width:132px;margin:0;font-size:12px}
.route-toolbar-field select{padding:8px 10px}
.table-shell-routes{width:100%;max-width:100%;min-width:0;border:1px solid rgba(148,163,184,0.22);border-radius:18px;padding:8px;background:linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(248 250 252 / 0.54))}
.route-compact-list{display:grid;gap:8px}
.route-compact-head,.route-compact-row{display:grid;grid-template-columns:minmax(150px,0.85fr) minmax(220px,1.05fr) minmax(0,1.8fr) 88px;gap:12px;align-items:start}
.route-compact-head{padding:8px 10px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.4px}
.route-compact-row{padding:12px;border:1px solid rgba(148,163,184,0.22);border-radius:16px;background:rgb(255 255 255 / 0.94)}
.route-compact-main{min-width:0}
.route-compact-title{font-size:15px;font-weight:900;line-height:1.2}
.route-compact-sub{margin-top:4px;color:rgb(var(--accent-rgb) / 1);font-size:12px;font-weight:800}
.route-compact-destination{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.35;word-break:break-word}
.route-compact-metrics{display:flex;flex-wrap:wrap;gap:8px}
.route-pill{display:grid;gap:2px;min-width:120px;padding:8px 10px;border-radius:14px;border:1px solid rgba(148,163,184,0.18);background:rgb(248 250 252 / 0.95)}
.route-pill span{font-size:10px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;color:var(--muted)}
.route-pill strong{font-size:12px;line-height:1.3;word-break:break-word}
.route-pill-accent{background:linear-gradient(180deg, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0.06));border-color:rgb(var(--accent-rgb) / 0.18)}
.route-compact-actions{display:flex;justify-content:flex-end}
.route-compact-actions .act-select{min-width:78px;padding:8px 10px;font-size:12px}
.route-empty-row{padding:14px 12px;border:1px dashed rgba(148,163,184,0.32);border-radius:16px;color:var(--muted);text-align:center;background:rgb(255 255 255 / 0.82)}
.table-traffics .row{grid-template-columns:1.35fr 1.1fr 0.75fr 0.45fr 0.9fr 0.55fr}
.table-shell-employees{overflow-x:auto;padding-bottom:4px}
.maint-grid > div{
  min-width:0;
}
.tax-grid > div{
  min-width:0;
}
.maint-table-pane{
  min-width:0;
  overflow:hidden;
}
.table-shell-maint{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 8px 0;
  border:1px solid rgba(148,163,184,0.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(248 250 252 / 0.54));
}
.table-shell-maint > .table{
  max-width:none;
  overflow:visible;
  padding:8px;
}
.tax-table-pane{
  min-width:0;
  overflow:hidden;
}
.table-shell-tax{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 8px 0;
  border:1px solid rgba(148,163,184,0.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(248 250 252 / 0.54));
}
.table-shell-tax > .table{
  max-width:none;
  overflow:visible;
  padding:8px;
}
.table-employees .row{grid-template-columns:minmax(180px,1.2fr) minmax(140px,0.95fr) minmax(120px,0.8fr) minmax(150px,0.95fr) minmax(180px,1.1fr) minmax(110px,0.7fr)}
.table-employees .row > div:last-child{overflow:visible;white-space:normal}
.employee-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.employee-summary-grid div{display:grid;gap:4px;padding:10px 12px;border-radius:14px;border:1px solid rgba(148,163,184,0.18);background:rgb(255 255 255 / 0.9)}
.employee-summary-grid span{font-size:11px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;color:var(--muted)}
.employee-summary-grid strong{font-size:16px;line-height:1.2}
.table-bank-accounts{
  width:max-content;
  min-width:980px;
}
.table-bank-accounts .row{
  grid-template-columns:minmax(220px,1.05fr) minmax(220px,1.05fr) minmax(180px,0.9fr) minmax(110px,0.6fr);
  column-gap:14px;
}
.table-bank-accounts .row > div:last-child{
  overflow:visible;
}
.table-bank-accounts .act-select{
  width:100%;
  min-width:80px;
}
.table-attendance .row{grid-template-columns:minmax(120px,0.8fr) minmax(90px,0.6fr) minmax(150px,0.95fr) minmax(150px,0.95fr) minmax(150px,0.95fr) minmax(110px,0.7fr) minmax(120px,0.75fr) minmax(120px,0.75fr) minmax(150px,0.95fr) minmax(150px,0.95fr) minmax(150px,0.95fr) minmax(90px,0.55fr)}
.table-attendance-driver .row{grid-template-columns:minmax(150px,0.95fr) minmax(150px,0.95fr) minmax(150px,0.95fr) minmax(110px,0.7fr) minmax(120px,0.75fr) minmax(120px,0.75fr) minmax(150px,1fr) minmax(150px,1fr) minmax(150px,1fr)}
.table-fees .row{grid-template-columns:0.9fr 1fr 0.8fr 1fr 1fr 0.55fr}
.table-contracts{
  width:max-content;
  min-width:1380px;
}
.table-contracts .row{
  grid-template-columns:minmax(120px,0.85fr) minmax(180px,1fr) minmax(220px,1.2fr) minmax(140px,0.9fr) minmax(120px,0.75fr) minmax(120px,0.85fr) minmax(180px,1fr) minmax(220px,1.2fr) minmax(90px,0.65fr);
  column-gap:14px;
}
.table-contracts .row > div:nth-child(2),
.table-contracts .row > div:nth-child(3),
.table-contracts .row > div:nth-child(7),
.table-contracts .row > div:nth-child(8),
.table-contracts .row > div:last-child{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.table-contracts .act-select{
  width:100%;
  min-width:80px;
}
.contract-doc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.contract-doc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  padding:8px 10px;
  border-radius:12px;
  text-decoration:none;
}
.contract-doc-name{
  width:100%;
  font-size:12px;
  color:var(--muted);
  word-break:break-word;
}
.table-finance-ledger{
  width:max-content;
  min-width:1280px;
}
.table-finance-ledger .row{
  grid-template-columns:minmax(150px,0.95fr) minmax(220px,1.2fr) minmax(180px,1fr) minmax(200px,1.15fr) minmax(140px,0.85fr) minmax(140px,0.85fr) minmax(140px,0.85fr) minmax(90px,0.7fr);
  column-gap:14px;
}
.table-finance-ledger .row > div:nth-child(2),
.table-finance-ledger .row > div:nth-child(3),
.table-finance-ledger .row > div:nth-child(4){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.table-finance-ledger .row > div:last-child{
  overflow:visible;
}
.table-finance-ledger .act-select{
  width:100%;
  min-width:80px;
}
.table-finance-ledger.fin-out .row{
  grid-template-columns:minmax(150px,0.95fr) minmax(220px,1.2fr) minmax(190px,1fr) minmax(180px,0.95fr) minmax(220px,1.2fr) minmax(140px,0.85fr) minmax(140px,0.85fr) minmax(140px,0.85fr) minmax(90px,0.7fr);
}
.table-finance-ledger.fin-out{
  min-width:1500px;
}
.table-maint-vehicles{
  width:max-content;
  min-width:1550px;
}
.table-maint-vehicles .row{
  grid-template-columns:150px 140px 220px 120px 100px 120px 100px 150px 170px 90px;
  column-gap:12px;
}
.table-maint-office{
  width:max-content;
  min-width:1590px;
}
.table-maint-office .row{
  grid-template-columns:150px 180px 240px 120px 170px 120px 100px 150px 170px 90px;
  column-gap:12px;
}
.table-maint-vehicles .row > div:last-child,
.table-maint-office .row > div:last-child{
  overflow:visible;
}
.table-maint-vehicles .act-select,
.table-maint-office .act-select{
  width:100%;
  min-width:80px;
}
.table-tax-vehicles{
  width:max-content;
  min-width:1320px;
}
.table-tax-vehicles .row{
  grid-template-columns:170px 150px 130px 150px 120px 170px 170px 90px;
  column-gap:12px;
}
.table-tax-vehicles .row > div:last-child{
  overflow:visible;
}
.table-tax-vehicles .act-select{
  width:100%;
  min-width:80px;
}
.table-assets{
  width:max-content;
  min-width:1250px;
}
.table-assets .row{
  grid-template-columns:minmax(180px,1.15fr) minmax(150px,0.95fr) minmax(110px,0.75fr) minmax(120px,0.8fr) minmax(120px,0.8fr) minmax(140px,0.85fr) minmax(160px,1fr) minmax(80px,0.55fr) minmax(90px,0.65fr);
  column-gap:12px;
}
.table-assets .row > div:first-child,
.table-assets .row > div:nth-child(7){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.table-assets .row > div:last-child{
  overflow:visible;
}
.table-assets .act-select{
  width:100%;
  min-width:80px;
}
.table-tax-ppn{
  width:max-content;
  min-width:1280px;
}
.table-tax-ppn .row{
  grid-template-columns:minmax(160px,1fr) minmax(90px,0.7fr) minmax(90px,0.7fr) minmax(140px,0.95fr) minmax(240px,1.35fr) minmax(120px,0.8fr) minmax(70px,0.5fr) minmax(120px,0.8fr) minmax(120px,0.8fr);
  column-gap:12px;
}
.table-tax-ppn .row > div:nth-child(5){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.invoice-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.invoice-section-card{margin:0}
.invoice-section-title{margin-bottom:10px;font-size:12px;font-weight:900;letter-spacing:0.4px;text-transform:uppercase;color:var(--muted)}
.invoice-totals-box{padding:12px 14px}
.invoice-totals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.invoice-totals-grid div,
.invoice-summary-grid div{display:grid;gap:4px}
.invoice-totals-grid span,
.invoice-summary-grid span,
.invoice-item-label,
.invoice-metric span{font-size:11px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;color:var(--muted)}
.invoice-totals-grid strong,
.invoice-summary-grid strong,
.invoice-item-number,
.invoice-metric strong{font-size:15px}
.invoice-list-summary{margin-top:12px}
.invoice-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.invoice-ledger{display:grid;gap:12px;margin-top:12px}
.invoice-item-card{border:1px solid rgba(148,163,184,0.22);border-radius:18px;padding:16px;background:linear-gradient(180deg, rgb(255 255 255 / 0.96), rgb(248 250 252 / 0.92));box-shadow:0 10px 28px rgba(15,23,42,0.06)}
.invoice-item-head{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-bottom:14px}
.invoice-item-number{font-weight:900}
.invoice-item-date{margin-top:4px;color:var(--muted);font-size:13px}
.invoice-item-actions .act-select{min-width:88px;padding:8px 10px}
.invoice-item-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:14px}
.invoice-item-block{display:grid;gap:6px;padding:12px;border-radius:16px;border:1px solid rgba(148,163,184,0.18);background:rgb(255 255 255 / 0.82)}
.invoice-item-text{font-size:13px;line-height:1.5;white-space:normal;word-break:break-word}
.invoice-item-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.invoice-metric{display:grid;gap:4px;padding:12px;border-radius:16px;border:1px solid rgba(148,163,184,0.18);background:rgb(248 250 252 / 0.95)}
.invoice-metric-total{background:linear-gradient(180deg, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0.06));border-color:rgb(var(--accent-rgb) / 0.22)}
.invoice-item-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.invoice-item-chip{padding:8px 10px;border-radius:999px;border:1px solid rgba(148,163,184,0.22);background:rgb(255 255 255 / 0.92);font-size:12px;color:var(--text)}

@media (max-width: 900px){
  .invoice-form-grid,
  .invoice-item-grid,
  .invoice-item-metrics,
  .invoice-summary-grid,
  .invoice-totals-grid{grid-template-columns:1fr}
}
.thumb{width:56px;height:36px;object-fit:cover;border-radius:10px;border:1px solid var(--border);display:block}
.thumb-selfie{width:72px;height:72px;border-radius:16px}

.selfie-box{padding:14px;border:1px solid var(--border);border-radius:18px;background:rgb(255 255 255 / 0.55)}
.selfie-stage{position:relative;min-height:220px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg, rgb(15 23 42 / 0.9), rgb(30 41 59 / 0.96));border:1px solid rgb(148 163 184 / 0.2)}
.selfie-video,.selfie-preview{width:100%;height:220px;display:block;object-fit:cover}
.selfie-preview{position:absolute;inset:0}
.selfie-placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;color:rgb(226 232 240);font-weight:700;background:rgb(15 23 42 / 0.3)}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.kpi{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgb(0 0 0 / 0.12)}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-weight:900;font-size:18px;margin-top:6px}

.dashboard-page{display:grid;gap:20px}
.dashboard-hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,0.65fr);
  gap:18px;
  align-items:stretch;
  padding:24px 26px;
  border-radius:28px;
  border:1px solid rgba(148,163,184,0.20);
  background:
    radial-gradient(960px 280px at 0% 0%, rgb(var(--accent-rgb) / 0.16), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.99), rgb(248 250 252 / 0.95));
  box-shadow:0 20px 50px rgba(15,23,42,0.08);
}
.dashboard-hero-main{display:grid;align-content:start;gap:12px;min-width:0}
.dashboard-eyebrow{text-transform:uppercase;letter-spacing:1.4px;font-size:11px;color:var(--muted);font-weight:800}
.dashboard-hero-main h2{margin:0;font-size:clamp(1.65rem,1.25rem + 1vw,2.4rem);line-height:1.1}
.dashboard-hero-copy{max-width:720px;line-height:1.6;margin:0}
.dashboard-hero-tags{display:flex;flex-wrap:wrap;gap:8px}
.dashboard-hero-tag{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.20);
  background:rgb(255 255 255 / 0.85);
  color:var(--text);
  font-size:12px;
  font-weight:800;
}
.dashboard-clock{
  min-width:0;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,0.24);
  background:linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(241 245 249 / 0.96));
  display:grid;
  align-content:start;
  gap:8px;
}
.dashboard-clock .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:0.8px}
.dashboard-clock .value{margin-top:0;font-size:30px;font-weight:900;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
.dashboard-clock .meta{font-size:12px;color:var(--muted);line-height:1.5}
.dashboard-section{
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,0.18);
  background:linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(248 250 252 / 0.94));
  box-shadow:0 16px 38px rgba(15,23,42,0.05);
}
.dashboard-section-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
.dashboard-section-head h3{margin:0;font-size:18px}
.dashboard-card-grid{display:grid;gap:14px}
.dashboard-card-grid-ops{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-card-grid-finance{grid-template-columns:repeat(4,minmax(0,1fr))}
.dashboard-card{
  position:relative;
  min-width:0;
  min-height:140px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,0.18);
  background:linear-gradient(180deg, rgb(255 255 255 / 0.99), rgb(248 250 252 / 0.95));
  display:grid;
  align-content:space-between;
  gap:12px;
  overflow:hidden;
}
.dashboard-card-accent{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, rgb(var(--accent-rgb) / 0.95), rgb(var(--accent2-rgb) / 0.85));
}
.dashboard-card-income{background:linear-gradient(180deg, rgb(34 197 94 / 0.16), rgb(255 255 255 / 0.98))}
.dashboard-card-expense{background:linear-gradient(180deg, rgb(255 77 109 / 0.14), rgb(255 255 255 / 0.98))}
.dashboard-card .label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:0.75px;font-weight:800}
.dashboard-card .value{margin-top:0;font-size:clamp(1.6rem, 1.1rem + 0.95vw, 2.25rem);font-weight:900;line-height:1.08;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.dashboard-card .meta{margin-top:0;color:var(--muted);font-size:12px;line-height:1.5}
.dashboard-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dashboard-mini-card{
  min-width:0;
  padding:16px 16px 14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,0.18);
  background:linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(248 250 252 / 0.94));
  display:grid;
  gap:8px;
}
.dashboard-mini-card .label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:0.75px;font-weight:800}
.dashboard-mini-card .value{font-size:clamp(1.1rem, 0.9rem + 0.8vw, 1.7rem);font-weight:900;line-height:1.15;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.dashboard-mini-card .meta{color:var(--muted);font-size:12px;line-height:1.5}
.dashboard-mini-card-accent{background:linear-gradient(180deg, rgb(var(--accent-rgb) / 0.16), rgb(255 255 255 / 0.98))}
.dashboard-mini-card-income{background:linear-gradient(180deg, rgb(34 197 94 / 0.16), rgb(255 255 255 / 0.98))}
.dashboard-mini-card-expense{background:linear-gradient(180deg, rgb(255 77 109 / 0.14), rgb(255 255 255 / 0.98))}
.dashboard-mini-card-warn{background:linear-gradient(180deg, rgb(245 158 11 / 0.18), rgb(255 255 255 / 0.98))}
.dashboard-trend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dashboard-trend-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
.dashboard-trend-card{
  min-width:0;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,0.18);
  background:
    radial-gradient(180px 80px at 100% 0%, rgb(var(--accent-rgb) / 0.10), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.99), rgb(248 250 252 / 0.94));
  display:grid;
  gap:14px;
}
.dashboard-trend-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dashboard-trend-title{font-size:15px;font-weight:900;line-height:1.3}
.dashboard-trend-subtitle{font-size:12px;color:var(--muted);line-height:1.4}
.dashboard-trend-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(148,163,184,0.22);
  background:rgb(255 255 255 / 0.9);
  white-space:nowrap;
}
.dashboard-trend-up{color:#166534;background:rgb(220 252 231 / 0.95);border-color:rgb(34 197 94 / 0.25)}
.dashboard-trend-down{color:#b91c1c;background:rgb(254 226 226 / 0.95);border-color:rgb(239 68 68 / 0.25)}
.dashboard-trend-flat{color:#334155;background:rgb(241 245 249 / 0.95);border-color:rgb(148 163 184 / 0.25)}
.dashboard-trend-chart-svg{width:100%;height:auto;display:block;overflow:visible}
.dashboard-trend-axis text{font-size:10px;fill:#64748b;font-weight:700}
.dashboard-trend-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dashboard-trend-metric{
  min-width:0;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgb(255 255 255 / 0.78);
  display:grid;
  gap:5px;
}
.dashboard-trend-metric span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;font-weight:800}
.dashboard-trend-metric strong{font-size:15px;font-weight:900;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.dashboard-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.dashboard-nested-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.dashboard-list-shell{
  border:1px solid rgba(148,163,184,0.18);
  border-radius:18px;
  padding:10px;
  background:rgb(255 255 255 / 0.74);
  overflow-x:auto;
  overflow-y:hidden;
}
.dashboard-list-shell .table{
  gap:10px;
  overflow-x:visible;
  padding-bottom:0;
}
.dashboard-list-shell .row{border-radius:14px}
.dashboard-stack{display:grid;gap:12px}
.dashboard-stack-item{
  min-width:0;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgb(255 255 255 / 0.88);
  display:grid;
  gap:10px;
}
.dashboard-stack-item-warn{border-color:rgba(245,158,11,0.35);background:linear-gradient(180deg, rgb(245 158 11 / 0.10), rgb(255 255 255 / 0.98))}
.dashboard-stack-item-danger{border-color:rgba(239,68,68,0.35);background:linear-gradient(180deg, rgb(239 68 68 / 0.12), rgb(255 255 255 / 0.98))}
.dashboard-stack-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dashboard-stack-side{display:grid;justify-items:end;gap:6px;text-align:right}
.dashboard-stack-title{font-weight:800;line-height:1.35}
.dashboard-stack-meta{color:var(--muted);font-size:12px;line-height:1.5}
.dashboard-stack-date{font-size:12px;color:var(--muted)}
.dashboard-stack-amount{font-size:18px;font-weight:900;line-height:1.2}
.dashboard-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.22);
  background:rgb(255 255 255 / 0.92);
  font-size:11px;
  font-weight:800;
}
.dashboard-empty{
  padding:16px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,0.28);
  color:var(--muted);
  background:rgb(255 255 255 / 0.55);
}
.tracking-summary{margin-top:12px}
.tracking-map{
  width:100%;
  min-height:420px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,0.22);
  overflow:hidden;
  background:linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(248 250 252 / 0.82));
}
.tracking-latest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tracking-card{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgb(255 255 255 / 0.9);
  display:grid;
  gap:6px;
}
.tracking-card-title{font-weight:900;line-height:1.3}
.tracking-card-meta{font-size:12px;color:var(--muted);line-height:1.5}
.tracking-card-coords{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.tracking-state-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(148,163,184,0.24);
  background:rgb(255 255 255 / 0.92);
  color:var(--text);
}
.tracking-state-badge-idle{
  background:rgb(245 158 11 / 0.14);
  border-color:rgb(245 158 11 / 0.28);
  color:rgb(180 83 9);
}
.tracking-state-badge-off{
  background:rgb(239 68 68 / 0.12);
  border-color:rgb(239 68 68 / 0.24);
  color:rgb(185 28 28);
}

.report-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.report-filter{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:10px;align-items:end;min-width:0}
.report-filter .btn-row{grid-column:1 / -1;flex-wrap:wrap;justify-content:flex-start}
.report-filter .btn-row > *{flex:0 0 auto}
.report-sheet{border:1px solid var(--border);border-radius:24px;padding:24px;background:linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(248 250 252 / 0.94)), radial-gradient(700px 240px at 0% 0%, rgb(var(--accent-rgb) / 0.12), transparent 70%);box-shadow:var(--shadow)}
.report-sheet-head{display:flex;justify-content:space-between;gap:16px;align-items:start;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid rgb(255 255 255 / 0.10)}
.report-eyebrow{text-transform:uppercase;letter-spacing:1.4px;font-size:11px;color:var(--muted);font-weight:800}
.report-period{color:var(--muted);font-size:13px}
.report-badge{min-width:160px;padding:14px 16px;border-radius:18px;border:1px solid rgba(148,163,184,0.28);background:rgb(255 255 255 / 0.98)}
.report-badge .label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.report-badge .value{margin-top:6px;font-size:18px;font-weight:900}
.report-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:18px}
.report-kpi{min-width:0;padding:16px;border-radius:18px;border:1px solid rgba(148,163,184,0.22);background:rgb(255 255 255 / 0.98);overflow:hidden}
.report-kpi-income{background:linear-gradient(180deg, rgb(34 197 94 / 0.18), rgb(34 197 94 / 0.06))}
.report-kpi-expense{background:linear-gradient(180deg, rgb(255 77 109 / 0.18), rgb(255 77 109 / 0.06))}
.report-kpi .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.7px}
.report-kpi .value{margin-top:8px;font-size:clamp(1.55rem, 1.1rem + 1vw, 2.1rem);font-weight:900;line-height:1.15;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.report-kpi .meta{margin-top:6px;font-size:12px;color:var(--muted)}
.report-section{margin-top:18px;padding:18px;border-radius:20px;border:1px solid rgba(148,163,184,0.22);background:rgb(255 255 255 / 0.94)}
.report-section-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
.report-section-head h4{margin:0}
.report-section-subgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:14px}
.report-mini-stat{padding:12px 14px;border-radius:16px;border:1px solid rgba(148,163,184,0.18);background:rgb(248 250 252 / 0.95)}
.report-mini-stat .label{font-size:11px;text-transform:uppercase;letter-spacing:0.8px;color:var(--muted)}
.report-mini-stat .value{margin-top:6px;font-size:1.15rem;font-weight:900;line-height:1.2}
.report-data-table{border:1px solid rgba(148,163,184,0.22);border-radius:18px;overflow:hidden;background:rgb(255 255 255 / 0.98)}
.report-data-head,.report-data-row{display:grid;gap:12px;align-items:center}
.report-data-head{padding:12px 16px;background:rgb(241 245 249 / 0.95);border-bottom:1px solid rgba(148,163,184,0.18);font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.7px}
.report-data-row{padding:14px 16px;border-top:1px solid rgba(148,163,184,0.14)}
.report-data-row:first-child{border-top:none}
.report-data-col-4{grid-template-columns:minmax(180px,1.5fr) minmax(120px,1fr) minmax(100px,0.8fr) minmax(140px,1fr)}
.report-data-col-5{grid-template-columns:minmax(160px,1.4fr) minmax(90px,0.8fr) minmax(90px,0.8fr) minmax(110px,0.9fr) minmax(140px,1fr)}
.report-data-col-6{grid-template-columns:minmax(150px,1fr) minmax(100px,0.8fr) minmax(220px,2fr) minmax(120px,1fr) minmax(120px,1fr) minmax(140px,1fr)}
.report-data-cell{min-width:0}
.report-data-cell strong{display:block;font-weight:800}
.report-data-cell.muted{color:var(--muted)}
.report-data-cell.amount{font-weight:900;text-align:right}
.report-data-row-accent{background:linear-gradient(180deg, rgb(var(--accent-rgb) / 0.12), rgb(255 255 255 / 0.98))}
.report-progress{height:10px;border-radius:999px;background:rgb(226 232 240 / 0.95);overflow:hidden;border:1px solid rgba(148,163,184,0.16)}
.report-progress > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg, rgb(var(--accent-rgb) / 0.95), rgb(34 197 94 / 0.75))}
.report-data-empty{padding:18px;border:1px dashed rgba(148,163,184,0.24);border-radius:16px;background:rgb(248 250 252 / 0.72);color:var(--muted)}
.statement-list{display:grid;gap:10px}
.statement-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid rgba(148,163,184,0.22);background:rgb(255 255 255 / 0.98)}
.statement-row .name{font-weight:700}
.statement-row .amount{font-weight:900}
.statement-row .amount.positive{color:#86efac}
.statement-row .amount.negative{color:#fda4af}
.statement-row-grand{background:linear-gradient(180deg, rgb(var(--accent-rgb) / 0.22), rgb(var(--accent-rgb) / 0.08));border-color:rgb(var(--accent-rgb) / 0.35)}
.statement-card{
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,0.20);
  background:
    radial-gradient(220px 90px at 100% 0%, rgb(var(--accent-rgb) / 0.10), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.99), rgb(248 250 252 / 0.95));
  box-shadow:0 14px 34px rgba(15,23,42,0.05);
}
.statement-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.statement-card-title{font-size:17px;font-weight:900;line-height:1.2;color:var(--text)}
.statement-card-accent-driver{
  background:
    radial-gradient(240px 90px at 100% 0%, rgb(56 189 248 / 0.14), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.99), rgb(240 249 255 / 0.96));
  border-color:rgba(56,189,248,0.22);
}
.statement-card-accent-management{
  background:
    radial-gradient(240px 90px at 100% 0%, rgb(249 115 22 / 0.14), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.99), rgb(255 247 237 / 0.96));
  border-color:rgba(249,115,22,0.22);
}
.statement-card .table{margin-top:10px}
.statement-card .table .row.header{background:rgb(15 23 42 / 0.06);border-style:solid}
.statement-card .table .row:not(.header){background:rgb(255 255 255 / 0.82)}
.report-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px dashed rgb(255 255 255 / 0.16);color:var(--muted);font-size:12px}

@media (max-width: 900px){
  .dashboard-hero{
    grid-template-columns:1fr;
    padding:18px;
  }
  .dashboard-clock{min-width:0;width:100%}
  .dashboard-mini-grid,
  .dashboard-trend-grid,
  .dashboard-card-grid-ops,
  .dashboard-card-grid-finance{grid-template-columns:1fr}
  .dashboard-trend-actions{align-items:stretch}
  .dashboard-trend-metrics{grid-template-columns:1fr}
  .dashboard-split{grid-template-columns:1fr}
  .dashboard-stack-head{grid-template-columns:1fr;display:grid}
  .dashboard-stack-side{justify-items:start;text-align:left}
  .tracking-map{min-height:320px}
  .tracking-latest-grid{grid-template-columns:1fr}
  .report-filter{grid-template-columns:1fr}
  .report-sheet{padding:18px}
  .report-kpis{grid-template-columns:1fr}
  .report-section-subgrid{grid-template-columns:1fr}
  .report-data-head{display:none}
  .report-data-col-4,
  .report-data-col-5,
  .report-data-col-6,
  .report-data-row{grid-template-columns:1fr}
  .report-data-row{gap:8px}
  .report-data-cell.amount{text-align:left}
  .statement-row{grid-template-columns:1fr}
  .statement-card{padding:15px}
  .statement-card-head{margin-bottom:10px}
  .route-toolbar{justify-content:stretch}
  .route-toolbar-field{min-width:0;flex:1 1 160px}
  .table-shell-routes{margin-inline:-4px;padding:8px}
  .route-compact-head{display:none}
  .route-compact-row{grid-template-columns:1fr}
  .route-compact-actions{justify-content:stretch}
  .route-compact-actions .act-select{width:100%}
  .container,
  .container.wide{padding:14px}
  .card{padding:14px}
  .panel{padding:12px}
  .two{grid-template-columns:1fr}
  .brand,
  .right,
  .notif-shell,
  .header-user-shell{min-width:0}
  .rowline{
    flex-direction:column;
    align-items:flex-start;
  }
  .rowline > .muted{text-align:left}
  .btn-row > *{
    flex:1 1 100%;
    min-width:0;
  }
  .btn-small.btn-icon{
    flex:0 0 38px;
  }
  .header-user-menu,
  .notif-panel{
    right:auto;
    left:50%;
    transform:translateX(-50%);
    width:min(420px,calc(100vw - 24px));
  }
  .table-users .row > div,
  .table-bank-accounts .row > div,
  .table-contracts .row > div,
  .table-finance-ledger .row > div,
  .table-assets .row > div,
  .table-ar-ledger .row > div,
  .table-attendance .row > div,
  .table-attendance-driver .row > div,
  .table-fees .row > div,
  .table-maint-vehicles .row > div,
  .table-maint-office .row > div,
  .table-tax-vehicles .row > div,
  .table-tax-ppn .row > div,
  .table-vehicles .row > div,
  .table-traffics .row > div,
  .table-employees .row > div,
  .table-submissions-driver .row > div,
  .table-submissions-management .row > div{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:break-word;
  }
}

@media (max-width: 560px){
  .topbar{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "menu right"
      "brand brand";
    align-items:start;
  }
  .mobile-menu-btn{grid-area:menu}
  .brand{grid-area:brand}
  .right{grid-area:right}
  .notif-panel{max-height:65dvh}
  .header-user-menu{top:calc(100% + 8px)}
  .selfie-stage{min-height:190px}
  .selfie-video,
  .selfie-preview{height:190px}
  .dashboard-section{padding:14px}
  .dashboard-card{
    min-height:128px;
    padding:16px;
  }
  .dashboard-hero-main h2{font-size:1.5rem}
  input,select,textarea,button{font-size:16px}
}

@media print{
  body{background:#fff !important;color:#111 !important}
  .topbar,.sidebar,.report-toolbar,.no-print{display:none !important}
  .app-shell{display:block;min-height:auto}
  .app-main{min-width:auto}
  .container,.container.wide{max-width:none;margin:0;padding:0}
  .panel{background:#fff !important;border:none !important;padding:0 !important}
  .report-sheet{background:#fff !important;color:#111 !important;box-shadow:none !important;border:1px solid #d4d4d8 !important;border-radius:0 !important;padding:20px !important}
  .report-sheet *{color:inherit !important}
  .report-kpi,.report-badge,.report-section,.statement-row,.statement-card{background:#fff !important;border-color:#d4d4d8 !important;box-shadow:none !important}
  .statement-row-grand{background:#f5f5f5 !important}
  .report-kpi .meta,.report-eyebrow,.report-period,.report-foot{color:#52525b !important}
  .statement-card .table .row.header,.statement-card .table .row:not(.header){background:#fff !important}
  .table-shell-submissions{
    overflow:visible !important;
    border:1px solid #d4d4d8 !important;
    background:#fff !important;
    padding:0 !important;
  }
  .table-shell-submissions > .table{
    padding:8px !important;
  }
  .table-submissions-driver .row > div:last-child,
  .table-submissions-management .row > div:last-child{
    display:none !important;
  }
  #submissionPrintSheet > .grid{
    display:none !important;
  }
  .submission-print-only{
    display:block !important;
    margin-top:18px;
  }
  body.print-submissions-driver #submissionPrintFuelBlock,
  body.print-submissions-driver #submissionPrintManagementBlock{
    display:none !important;
  }
  body.print-submissions-fuel #submissionPrintDriverBlock,
  body.print-submissions-fuel #submissionPrintManagementBlock{
    display:none !important;
  }
  body.print-submissions-management #submissionPrintDriverBlock,
  body.print-submissions-management #submissionPrintFuelBlock{
    display:none !important;
  }
  .submission-print-block + .submission-print-block{
    margin-top:22px;
  }
  .submission-print-block h3{
    margin:0 0 10px 0;
    font-size:18px;
    font-weight:700;
  }
  .submission-print-meta{
    margin-bottom:10px;
    font-size:12px;
    line-height:1.5;
    color:#374151 !important;
  }
  .submission-print-table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
    font-size:11px;
  }
  .submission-print-table th,
  .submission-print-table td{
    border:1px solid #9ca3af;
    padding:7px 6px;
    vertical-align:middle;
    text-align:left;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  .submission-print-table thead th{
    background:#f3f4f6 !important;
    font-weight:700;
    line-height:1.25;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
  }
  .submission-print-table-driver th:nth-child(1),
  .submission-print-table-driver td:nth-child(1){
    width:4%;
    min-width:32px;
    text-align:center;
    white-space:nowrap;
  }
  .submission-print-table-driver th:nth-child(2),
  .submission-print-table-driver td:nth-child(2){
    width:10%;
  }
  .submission-print-table-driver th:nth-child(3),
  .submission-print-table-driver td:nth-child(3){
    width:11%;
  }
  .submission-print-table-driver th:nth-child(4),
  .submission-print-table-driver td:nth-child(4){
    width:14%;
  }
  .submission-print-table-driver th:nth-child(5),
  .submission-print-table-driver td:nth-child(5){
    width:8%;
  }
  .submission-print-table-driver th:nth-child(6),
  .submission-print-table-driver td:nth-child(6){
    width:19%;
  }
  .submission-print-table-driver th:nth-child(7),
  .submission-print-table-driver td:nth-child(7){
    width:13%;
  }
  .submission-print-table-driver th:nth-child(8),
  .submission-print-table-driver td:nth-child(8){
    width:10%;
    text-align:center;
  }
  .submission-print-table-driver th:nth-child(9),
  .submission-print-table-driver td:nth-child(9){
    width:11%;
    min-width:78px;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
  }
  .submission-print-table-fuel th:nth-child(1),
  .submission-print-table-fuel td:nth-child(1){
    width:5%;
    text-align:center;
    white-space:nowrap;
  }
  .submission-print-table-fuel th:nth-child(2),
  .submission-print-table-fuel td:nth-child(2){
    width:12%;
  }
  .submission-print-table-fuel th:nth-child(3),
  .submission-print-table-fuel td:nth-child(3){
    width:12%;
  }
  .submission-print-table-fuel th:nth-child(4),
  .submission-print-table-fuel td:nth-child(4){
    width:17%;
  }
  .submission-print-table-fuel th:nth-child(5),
  .submission-print-table-fuel td:nth-child(5){
    width:22%;
  }
  .submission-print-table-fuel th:nth-child(6),
  .submission-print-table-fuel td:nth-child(6){
    width:9%;
    text-align:center;
  }
  .submission-print-table-fuel th:nth-child(7),
  .submission-print-table-fuel td:nth-child(7){
    width:8%;
    text-align:center;
    white-space:nowrap;
  }
  .submission-print-table-fuel th:nth-child(8),
  .submission-print-table-fuel td:nth-child(8){
    width:9%;
    text-align:center;
    white-space:nowrap;
  }
  .submission-print-table-fuel th:nth-child(9),
  .submission-print-table-fuel td:nth-child(9){
    width:12%;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
  }
  .submission-print-table-management th:nth-child(1),
  .submission-print-table-management td:nth-child(1){
    width:4%;
    text-align:center;
  }
  .submission-print-table-management th:nth-child(2),
  .submission-print-table-management td:nth-child(2){
    width:6%;
    text-align:center;
  }
  .submission-print-table-management th:nth-child(3),
  .submission-print-table-management td:nth-child(3){
    width:10%;
  }
  .submission-print-table-management th:nth-child(4),
  .submission-print-table-management td:nth-child(4){
    width:15%;
  }
  .submission-print-table-management th:nth-child(5),
  .submission-print-table-management td:nth-child(5){
    width:7%;
    text-align:center;
  }
  .submission-print-table-management th:nth-child(6),
  .submission-print-table-management td:nth-child(6){
    width:20%;
  }
  .submission-print-table-management th:nth-child(7),
  .submission-print-table-management td:nth-child(7){
    width:7%;
  }
  .submission-print-table-management th:nth-child(8),
  .submission-print-table-management td:nth-child(8){
    width:13%;
  }
  .submission-print-table-management th:nth-child(9),
  .submission-print-table-management td:nth-child(9){
    width:7%;
    text-align:center;
  }
  .submission-print-table-management th:nth-child(10),
  .submission-print-table-management td:nth-child(10){
    width:7%;
    text-align:center;
  }
  .submission-print-table-management th:nth-child(11),
  .submission-print-table-management td:nth-child(11){
    width:10%;
  }
  .submission-print-table-management th:nth-child(12),
  .submission-print-table-management td:nth-child(12){
    width:9%;
  }
  .submission-print-empty{
    text-align:center !important;
    color:#6b7280 !important;
  }
  .submission-print-total{
    margin-top:10px;
    text-align:right;
    font-size:12px;
  }
  body.print-submissions-driver #managementSubmissionSection{
    display:none !important;
  }
  body.print-submissions-management #driverSubmissionSection{
    display:none !important;
  }
  body.print-submissions-driver #submissionPrintManagementBlock{
    display:none !important;
  }
  body.print-submissions-management #submissionPrintDriverBlock{
    display:none !important;
  }
}
