/* PutraKop shared refinement: Inter, blue/yellow identity, slate surfaces. */
:root{--bg:#f3f6fb;--muted:#52637a;--line:#dce4ef;--radius:14px;--ui-shadow:0 2px 5px #15328704,0 10px 24px #15328704}
body{font-size:14px;line-height:1.65}
h1{font-size:30px;letter-spacing:-.9px;font-weight:800}h2{font-size:20px;letter-spacing:-.4px}h3{font-size:16px}
.sidebar{width:232px;padding:28px 16px}.workspace{margin-left:232px}.brand{font-size:24px;gap:10px}.brand-icon{border-radius:11px}.brand small{font-size:11px;letter-spacing:0;margin-top:0}.nav-caption{font-size:12px;margin:34px 14px 12px;color:#65758b}
.nav-button{font-size:14px;padding:12px 14px;margin:5px 0;min-height:46px;border-radius:9px;color:#52637a}.nav-button svg{width:20px;height:20px}.nav-button.active{background:#eaf0ff;box-shadow:inset 3px 0 #1e40af}.sidebar-foot{border:1px solid #e6ecf4;font-size:12px;padding:16px}.sidebar-foot small{font-size:11px}
.topbar{height:82px;padding:17px 32px;background:white}.breadcrumb{font-size:13px}.topbar p{font-size:12px;color:#65758b}.account strong{font-size:13px}.account small{font-size:12px}.avatar{width:40px;height:40px;border:1px solid #dbe5ff}.icon-button{height:42px;width:42px;border-radius:9px;background:white}.icon-button:hover{background:#eff4ff;color:#1e40af}.mobile-menu-button{display:none}
main{padding:32px;max-width:1560px}.page-heading{margin-bottom:26px;align-items:center}.page-title{display:flex;gap:14px;align-items:flex-start;min-width:0}.page-title>div{min-width:0}.page-title h1{margin-bottom:7px}.page-title p{font-size:14px;line-height:1.7}.page-symbol{width:46px;height:46px;display:grid;place-items:center;flex-shrink:0;border-radius:12px;border:1px solid #dbe5fa;background:#eaf0ff;color:#1e40af}.page-symbol svg{width:23px;height:23px}
.button{font-size:13px;border-radius:9px;min-height:44px;padding:11px 17px;transition:background-color .12s,border-color .12s}.button.small{font-size:12px;min-height:42px;padding:9px 12px}.button.secondary{border-color:#d5deeb;color:#334155}.button.secondary:hover{background:#f5f8ff;border-color:#aebfdd}.button.danger{border:1px solid #fecdd3;background:#fff5f6;color:#b91c1c}.button.yellow{color:#30210b}.button:active:not(:disabled){filter:brightness(.97)}.actions{gap:10px}.icon-button:disabled,.button:disabled{cursor:wait}
.panel{border-radius:14px;border-color:var(--line);box-shadow:var(--ui-shadow)}.panel-head{padding:20px 24px;gap:14px}.panel-head h2{font-size:18px;margin:0}.panel-head>svg{color:#6b7e99;width:21px;height:21px}.panel-body{padding:24px}.section-title{margin:28px 0 18px;gap:16px}.section-title h2{margin:0;font-size:21px}
.stats{gap:16px;margin-bottom:28px}.stat{padding:20px;border-radius:12px;box-shadow:var(--ui-shadow)}.stat-label{font-size:12px;color:#52637a;line-height:1.5;min-height:36px;align-items:flex-start}.stat-label svg{height:19px;width:19px}.stat-value{font-size:32px;margin-top:4px;line-height:1.4;font-variant-numeric:tabular-nums}.stat-note{font-size:12px;line-height:1.5;margin-top:4px}
.badge{font-size:12px;font-weight:600;line-height:1.4;padding:5px 9px;border-radius:6px;white-space:normal;max-width:100%}.badge.available,.badge.normal,.badge.completed{background:#eaf8ef;color:#146335}.badge.pending,.badge.upcoming,.badge.inuse,.badge.in-progress{background:#fff4d6;color:#805000}.badge.maintenance,.badge.overdue,.badge.due,.badge.rejected{background:#fff0f0;color:#b42323}.badge.stale,.badge.cancelled{background:#edf1f6;color:#52637a}
.notice{font-size:13px;line-height:1.7;padding:14px 17px;border-radius:9px}.notice.info{background:#f0f5ff;border-color:#d5e3fc;color:#1e40af}.notice.error{background:#fff3f3;border-color:#fecaca;color:#991b1b}.form-error{font-size:13px;line-height:1.65}.form-error:empty{display:none}.muted{color:#52637a}
.field .field-error{color:#b42323;font-size:12px}.field [aria-invalid=true],.login-box [aria-invalid=true]{border-color:#dc2626;background:#fff9f9}
.form-shell{max-width:900px}.form-shell .panel-head{background:#fbfcff;border-radius:14px 14px 0 0}.field{margin-bottom:22px}label{font-size:13px;margin-bottom:8px;color:#34445a}input,select,textarea{font-size:14px;min-height:46px;padding:12px 13px;border-radius:9px;border-color:#c6d1e0;line-height:1.5}input::placeholder,textarea::placeholder{color:#738298}input:hover,select:hover,textarea:hover{border-color:#93a8c7}input:focus,select:focus,textarea:focus{border-color:#1e40af}input[readonly]{color:#52637a;background:#f4f7fb}.field small{font-size:12px;line-height:1.6;margin-top:7px}.form-grid{gap:0 24px}textarea{min-height:116px}.check-label{font-size:13px;align-items:flex-start;line-height:1.65}.check-label input{flex-shrink:0;min-height:20px;margin-top:2px;accent-color:#1e40af}.form-shell form>.button[type=submit]{min-width:170px}.form-shell .notice{margin-bottom:20px}
input[type=file]{padding:10px;background:#f8faff;border-style:dashed;line-height:1.7}input[type=file]::file-selector-button{font:600 12px Inter,system-ui,sans-serif;border:1px solid #ccd8ee;border-radius:6px;padding:7px 10px;background:white;color:#1e40af;margin-right:10px;cursor:pointer}.photo-preview{border:1px solid #dce4ef;max-height:280px;width:auto;object-fit:contain}.summary{background:#f1f5fc;border-color:#d9e3f3;font-size:14px;line-height:1.7}.summary strong{font-size:24px}
.fleet-section .section-title p,.fleet-result-count{font-size:13px}.fleet-section{margin-bottom:32px}.fleet-filter{font-size:13px;min-height:44px}.fleet-filter span{font-size:12px}.fleet-filter.active{background:#1e40af;color:#fff}.fleet-filter.active span{background:#ffffff24;color:white}.fleet-footnote{font-size:12px;line-height:1.7}.fleet-controls{gap:12px}.fleet-search{max-width:340px}.fleet-search input{font-size:14px}.fleet-card{border-radius:12px;padding:18px;box-shadow:var(--ui-shadow)}.fleet-card .vehicle-photo{aspect-ratio:16/8;max-height:160px;margin-bottom:16px}.vehicle-photo{border-radius:8px;background:#f0f4fc}.vehicle-illustration{background:#edf3ff}.vehicle-illustration small{font-size:11px;line-height:1.5;color:#52637a}.vehicle-illustration svg{width:60px;height:60px}.fleet-identity{flex-direction:column;gap:9px}.fleet-identity .badge{max-width:none;white-space:normal}.fleet-card h3{font-size:22px;letter-spacing:-.4px}.fleet-card .fleet-identity p{font-size:13px}.vehicle-details{font-size:12px;padding-top:12px}.fleet-reminders{gap:0;margin:14px 0}.fleet-reminder{padding:12px 0;background:transparent;border:0;border-radius:0;border-bottom:1px solid #e7edf5}.fleet-reminder:last-child{border-bottom:0}.fleet-reminder-title strong{font-size:13px}.fleet-reminder-title .badge{font-size:11px}.fleet-reminder.upcoming,.fleet-reminder.due,.fleet-reminder.overdue{background:transparent;border-color:#e7edf5}.fleet-card .fleet-remaining{font-size:14px;margin-top:8px}.fleet-reminder small,.fleet-card .fleet-reminder>p:not(.fleet-remaining){font-size:12px;line-height:1.6}.fleet-card .fleet-availability{font-size:13px;padding:12px 0}.fleet-my-trip{border:1px solid #d7e4fe;border-left:4px solid #1e40af}.fleet-my-trip strong{font-size:14px}
.trip-spotlight{border-radius:14px}.trip-spotlight::after{display:none}.trip-spotlight p,.trip-meta{font-size:13px}.trip-meta small{font-size:12px;color:inherit;opacity:.8}.trip-card{border-radius:12px;padding:24px;box-shadow:var(--ui-shadow)}.trip-card h3{font-size:22px}.trip-card p{font-size:14px;line-height:1.75}.trip-card .trip-head{align-items:flex-start}.trip-card .trip-head h3 small{font-size:13px}.trip-card .actions{gap:10px}.photo-links{font-size:13px}.photo-links a{padding:4px 0;text-underline-offset:3px}.mini-list{padding:0 24px}.mini-row{padding:17px 0;align-items:flex-start}.mini-row strong{font-size:14px}.mini-row small{font-size:12px;line-height:1.6;margin-top:4px}.reminder-row{padding:18px 24px}.reminder-row strong{font-size:13px}.reminder-row p{font-size:12px;line-height:1.6}.reminder-icon{border-radius:8px}.reminder-row .badge{margin-top:6px}
.toolbar{padding:16px;border:1px solid #dce4ef;background:#fff;border-radius:12px;gap:12px}.toolbar input{min-width:180px}.table-wrap{border-radius:12px;border-color:#dce4ef;box-shadow:var(--ui-shadow)}table{font-size:13px}th{font-size:12px;font-weight:600;color:#52637a;padding:14px 18px;background:#f0f4fa}td{padding:17px 18px;line-height:1.65}td strong{font-size:13px}td small{font-size:12px;line-height:1.6;margin-top:4px}.record-purpose{max-width:300px;min-width:0}.record-purpose .actions{margin-top:8px}.audit-details{margin-top:8px}.audit-details summary{cursor:pointer;color:#1e40af;font-size:12px;font-weight:600}.audit-details pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 ui-monospace,monospace;max-height:230px;overflow:auto;background:#f5f7fb;padding:12px;border:1px solid #e2e8f0;border-radius:6px;max-width:360px}code{font:12px ui-monospace,monospace;overflow-wrap:anywhere}
.tabs{position:relative;gap:6px;background:#fff;border:1px solid #dce4ef;border-radius:11px;padding:6px;margin-bottom:24px}.tabs button{font-size:13px;min-height:42px;padding:10px 14px;border-radius:7px}.tabs button.active{background:#1e40af;color:#fff}.tab-hint{display:none}.admin-section-heading{margin:4px 0 20px}.admin-section-heading h2{font-size:20px;margin:0 0 5px}.admin-section-heading p{font-size:13px;color:#52637a;margin:0}.section-loading{padding:32px;border:1px solid #dce4ef;border-radius:12px;background:#fff;color:#52637a;font-size:14px}
.empty{padding:44px 24px;border:1px dashed #d7e0ee;border-radius:12px;background:#fff;line-height:1.7}.empty svg{width:38px;height:38px;padding:9px;box-sizing:content-box;border-radius:12px;background:#eef3ff;color:#1e40af}.empty h3{font-size:18px;margin-bottom:8px}.empty p{font-size:13px;max-width:48ch}.empty.compact{padding:25px 18px}.empty.compact p{font-size:12px}.panel>.empty,.panel .empty{border:0;box-shadow:none}.vehicle-grid>.empty{grid-column:1/-1}.empty .button{margin-top:4px}
.vehicle-card:not(.fleet-card) p{font-size:13px;line-height:1.8}.map-caption,.gps-controls p{font-size:12px}.live-map-heading{font-size:13px}.map-caption{gap:12px}.map-caption .badge{font-size:11px}#map{border:1px solid #dce4ef;border-radius:12px}.map-plate{font-size:12px}.notification-item{padding:18px 0;align-items:flex-start}.notification-item strong{font-size:14px}.notification-item p,.notification-item small{font-size:13px}.notification-count{min-width:21px;height:21px;font-size:11px}
dialog{border:1px solid #d5deeb;border-radius:16px;padding:26px;box-shadow:0 24px 100px #0f172a35;max-width:620px}dialog::backdrop{background:#14233a88;backdrop-filter:blur(2px)}.dialog-head{padding-bottom:17px;border-bottom:1px solid #e2e8f0;margin-bottom:22px}.dialog-head h2{font-size:21px}.dialog-head .icon-button{flex-shrink:0}#dialog-body>p{font-size:14px}#dialog-body .actions{justify-content:flex-start;margin-top:20px}#dialog-body form>.button[type=submit]{min-width:160px}.menu-links{display:grid;gap:7px}.menu-links button{display:flex;align-items:center;gap:13px;text-align:left;padding:14px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#334155;font-weight:600}.menu-links button.active{background:#eef3ff;color:#1e40af;border-color:#d3e0ff}.menu-links svg{width:20px;height:20px}
#toast{font-size:13px;line-height:1.6;border:1px solid #ffffff30;border-radius:10px;box-shadow:0 8px 30px #15328720;padding:14px 20px}footer{font-size:12px;padding:20px 32px}.profile-summary{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid #e2e8f0}.profile-summary .avatar{width:48px;height:48px;font-size:20px}.profile-summary strong{display:block;font-size:16px}.profile-summary small{display:block;font-size:12px;color:#52637a}.profile-links{padding:18px;background:white;border:1px solid #dce4ef;border-radius:12px}.profile-links .button{min-height:44px}
.login-page{background:#f3f6fb;grid-template-columns:minmax(360px,1fr) minmax(450px,1fr)}.login-story{padding:44px 56px;background:#1e40af;position:relative}.login-story h1{font-size:44px;max-width:13ch;line-height:1.2}.login-story p{font-size:15px;line-height:1.85}.login-story>small{font-size:12px}.login-story .brand-icon{border:1px solid #ffffff35}.login-story .brand small{font-size:11px}.login-main{padding:48px}.login-box{max-width:430px;padding:32px;border:1px solid #dce4ef;border-radius:16px;background:#fff;box-shadow:var(--ui-shadow)}.login-box h2{font-size:29px;margin-bottom:10px}.login-box>p{font-size:14px;line-height:1.75;margin-bottom:24px}.login-box .field{margin-bottom:20px}.login-box .button{min-height:48px;font-size:14px}.login-note{font-size:12px!important;line-height:1.8!important;margin-bottom:0!important}.login-box #auth-status{margin:16px 0 0}.login-box .brand{font-size:24px;margin-bottom:28px}.login-box #register-form-container h3{font-size:18px}.login-badge{display:inline-flex;gap:8px;align-items:center;border:1px solid #ffffff50;border-radius:30px;padding:7px 12px;font-size:12px;color:#fff;margin-bottom:22px}.login-badge svg{width:16px;height:16px}.road-art{margin:22px 0;height:130px}.road-art svg{width:130px;height:130px}.road-art:before{top:100px}
@media(min-width:1600px){main{padding:36px 40px}}
@media(max-width:1200px){.sidebar{width:212px}.workspace{margin-left:212px}main{padding:28px 24px}.topbar{padding:16px 24px}.stats{gap:12px}.stat{padding:17px}.stat-label{font-size:12px}.stat-note{font-size:12px}.page-title h1{font-size:28px}.brand{font-size:22px}.nav-button{font-size:13px}}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.login-story{padding:36px}.login-story h1{font-size:36px}.login-main{padding:24px}.login-box{padding:26px}.page-heading{flex-wrap:wrap}.page-heading>.actions{width:100%}.account small{font-size:11px}.fleet-search{max-width:none}.tabs{gap:4px}.tabs button{padding:10px}}
@media(max-width:700px),(max-width:1000px) and (max-height:500px){
  .sidebar{display:none}.workspace{margin-left:0}.topbar{height:76px;padding:13px 18px;gap:10px}.breadcrumb{font-size:12px}.topbar p{font-size:11px}.account{gap:8px}.account strong{font-size:12px;max-width:125px!important}.account small{font-size:10px}.account>.avatar{display:none}.account .icon-button{width:38px;height:40px}.mobile-menu-button{display:grid}.mobile-topbar-start{display:flex;align-items:center;gap:10px}.mobile-topbar-start>.icon-button{flex-shrink:0}.topbar .account #logout{display:none}
  main{padding:24px 18px;min-height:calc(100dvh - 150px)}.page-heading{margin-bottom:22px;align-items:flex-start;flex-direction:column;gap:16px}.page-title{gap:11px}.page-symbol{height:40px;width:40px;border-radius:10px}.page-symbol svg{height:20px;width:20px}.page-title h1{font-size:25px;line-height:1.25;margin-bottom:6px}.page-title p{font-size:13px;line-height:1.7}.page-heading>.button{font-size:13px;min-height:44px;align-self:flex-start}.page-heading .actions{width:100%}.page-heading .actions .button{flex:1}
  .mobile-nav{box-shadow:0 -3px 20px #15328708;padding-top:7px}.mobile-nav .nav-button{font-size:11px;min-height:52px;margin:0;padding:7px 2px;border-radius:9px}.mobile-nav .nav-button.active{background:#eaf0ff}.mobile-nav svg{height:21px;width:21px}.workspace{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .stats{gap:10px;margin-bottom:24px}.stat{padding:15px;border-radius:11px}.stat-label{font-size:12px;gap:7px;min-height:36px}.stat-label svg{height:17px;width:17px}.stat-value{font-size:29px}.stat-note{font-size:12px;line-height:1.6}.section-title h2{font-size:20px}.section-title{gap:12px;flex-wrap:wrap}.panel-head{padding:18px}.panel-head h2{font-size:18px}.panel-body{padding:20px 18px}.dashboard-grid{gap:20px}.button,.button.small{font-size:12px;min-height:44px}.button{padding:11px 14px}
  input,select,textarea{font-size:16px;min-height:48px}.field small{font-size:12px}.form-grid{grid-template-columns:1fr}.field{margin-bottom:20px}.form-shell form>.button[type=submit]{width:100%}.notice{font-size:12px;line-height:1.75}.check-label{font-size:13px}.check-label input{min-height:20px}.toolbar{padding:12px;gap:10px}.toolbar input,.toolbar select{width:100%;flex-basis:100%;min-width:0}.toolbar select{font-size:16px}
  .vehicle-grid{grid-template-columns:1fr;gap:16px}.fleet-card{padding:18px}.fleet-card .vehicle-photo{aspect-ratio:16/7;max-height:170px}.fleet-card h3{font-size:22px}.fleet-identity{flex-direction:row}.fleet-identity .badge{max-width:48%;font-size:11px}.fleet-card .fleet-identity p{font-size:13px}.fleet-reminder-title strong{font-size:13px}.fleet-card .fleet-reminder-title .badge{font-size:11px}.fleet-result-count{font-size:12px}.fleet-filter{font-size:12px}.fleet-search input{font-size:16px}.fleet-section .section-title p{font-size:13px}.fleet-footnote{font-size:12px}.fleet-card .fleet-availability{font-size:12px}
  .trip-card{padding:20px 18px}.trip-card h3{font-size:21px}.trip-card p{font-size:13px}.trip-card .actions{gap:9px}.trip-card .actions .button{flex:1 1 140px}.trip-spotlight{padding:22px}.trip-spotlight h2{font-size:23px}.trip-spotlight p{font-size:13px}.trip-meta small{font-size:12px}.mini-list{padding:0 18px}.mini-row{gap:10px}.mini-row strong{font-size:13px}.mini-row small{font-size:12px}.mini-row .badge{font-size:11px;flex-shrink:0;max-width:42%}.reminder-row{padding:18px}.reminder-row strong{font-size:13px}.reminder-row p{font-size:12px}
  .table-wrap{background:transparent;border:0;box-shadow:none;overflow:visible}.responsive-table tr{border-radius:12px;padding:12px 16px;margin-bottom:14px;box-shadow:var(--ui-shadow)}.responsive-table td{padding:8px 0;font-size:13px;gap:14px}.responsive-table td:before{font-size:12px;flex:0 0 30%;line-height:1.7;max-width:30%;overflow-wrap:anywhere}.responsive-table td>.record-purpose{flex:1;min-width:0;max-width:70%;text-align:right}.record-purpose .actions{justify-content:flex-end;gap:7px}.record-purpose .button.small{font-size:12px}.responsive-table td small{font-size:12px}td strong{font-size:13px}.audit-details pre{max-width:100%;text-align:left}.audit-details summary{font-size:12px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:6px;gap:5px;scrollbar-width:thin;margin-bottom:8px;-webkit-overflow-scrolling:touch}.tabs button{white-space:nowrap;flex:0 0 auto;font-size:13px;min-height:44px;padding:10px 13px}.tab-hint{display:block;font-size:12px;color:#52637a;margin:0 0 22px}.admin-section-heading{margin-bottom:18px}.admin-section-heading h2{font-size:20px}.admin-section-heading p{font-size:13px}.notification-item{flex-wrap:wrap}.notification-item .button{min-height:44px}
  dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:20px 18px;border-radius:14px;padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}.dialog-head{gap:12px;margin-bottom:20px}.dialog-head h2{font-size:20px}.dialog-head .icon-button{width:40px;height:40px}.empty{padding:32px 20px}.empty h3{font-size:18px}.empty p{font-size:13px}.profile-summary{padding:18px}.profile-links{padding:14px}.profile-links .button{flex:1 1 130px}.map-caption{font-size:12px}.gps-controls h3{font-size:16px}.gps-controls .button{width:100%}#map{height:360px}.photo-links{font-size:13px}#toast{left:50%;bottom:calc(94px + env(safe-area-inset-bottom,0px));font-size:13px;width:max-content;max-width:calc(100% - 28px)}footer{font-size:11px;padding:18px}
  .login-page{display:block;background:#f3f6fb}.login-story{display:none}.login-main{min-height:100dvh;padding:24px 18px;max-width:none}.login-box{width:100%;max-width:430px;padding:26px 22px;border-radius:14px}.login-box .brand{display:flex;font-size:25px}.login-box h2{font-size:28px}.login-box>p{font-size:14px}.login-note{font-size:12px!important}.login-main .brand-icon{width:42px;height:42px}.login-box .button{font-size:14px;min-height:48px}
}
@media(max-width:360px){.topbar{padding-left:14px;padding-right:14px}.account strong{max-width:92px!important}.account small{max-width:95px}.page-title h1{font-size:23px}.stat{padding:13px}.stat-label{font-size:11px;min-height:36px}.stat-value{font-size:28px}.stat-note{font-size:12px}.fleet-filter{font-size:11px}.login-box{padding:24px 18px}.fleet-identity{flex-wrap:wrap}.fleet-identity .badge{max-width:100%}}
@media(max-width:700px),(max-width:1000px) and (max-height:500px){
  #page-content[data-view=dashboard] .stat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;padding:13px}
  #page-content[data-view=dashboard] .stat-label{min-height:0;align-items:center;font-size:12px;line-height:1.5}
  #page-content[data-view=dashboard] .stat-value{font-size:25px;line-height:1.2;margin:0}
  #page-content[data-view=dashboard] .stat-note{display:none}
  .fleet-my-trip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px}
  .fleet-my-trip>div{display:grid;gap:6px}.fleet-my-trip strong{font-size:12px}.fleet-my-trip .badge{justify-self:start;font-size:11px}
  .fleet-my-trip .button{font-size:11px;padding:9px;min-width:0}
}
@media(prefers-reduced-motion:reduce){.button,.icon-button{transition:none}.brand-intro{display:none}}