/* Persaja Fleet Ops mockup - Filament v4 light look. Tokens: DESIGN.md */
:root {
  --gray-50:#fafafa; --gray-100:#f4f4f5; --gray-200:#e4e4e7; --gray-300:#d4d4d8; --gray-400:#a1a1aa;
  --gray-500:#71717a; --gray-600:#52525b; --gray-700:#3f3f46; --gray-800:#27272a; --gray-900:#18181b; --gray-950:#09090b;
  --primary-50:#fffbeb; --primary-100:#fef3c7; --primary-500:#f59e0b; --primary-600:#d97706; --primary-700:#b45309;
  --success-50:#f0fdf4; --success-600:#16a34a; --success-700:#15803d;
  --warning-50:#fffbeb; --warning-600:#d97706; --warning-700:#b45309;
  --danger-50:#fef2f2; --danger-600:#dc2626; --danger-700:#b91c1c;
  --info-50:#eff6ff; --info-600:#2563eb; --info-700:#1d4ed8;
  --white:#fff;
  --ring:0 0 0 1px rgba(9,9,11,.05); --ring-input:0 0 0 1px rgba(9,9,11,.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --sidebar-w:20rem; --topbar-h:4rem; --radius:.75rem; --radius-sm:.5rem;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.5;color:var(--gray-950);background:var(--gray-50)}
a{color:var(--primary-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit}
svg{display:block}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:.01em}
.muted{color:var(--gray-500)}
.small{font-size:12px}
.hidden{display:none!important}
.text-right{text-align:right}
.nowrap{white-space:nowrap}
.flex{display:flex;align-items:center;gap:.5rem}
.grow{flex:1;min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.grid-23{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem}
.grid-32{display:grid;grid-template-columns:3fr 2fr;gap:1.5rem}
.stack{display:grid;gap:1rem}
.icon{width:1.5rem;height:1.5rem;flex:none}
.icon-sm{width:1.25rem;height:1.25rem;flex:none}
.icon-xs{width:1rem;height:1rem;flex:none}

/* Layout */
.fi-layout{display:flex;min-height:100vh}
.fi-sidebar{width:var(--sidebar-w);flex:none;background:var(--white);border-right:1px solid var(--gray-200);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:30}
.fi-brand{height:var(--topbar-h);display:flex;align-items:center;gap:.75rem;padding:0 1.5rem;font-weight:600;font-size:16px;color:var(--gray-950);border-bottom:1px solid transparent}
.fi-brand .icon{color:var(--primary-600)}
.fi-nav{padding:.5rem 1rem 1.5rem;display:grid;gap:1.5rem;align-content:start}
.fi-nav-group{display:grid;gap:.25rem}
.fi-nav-group-label{font-size:12px;font-weight:500;color:var(--gray-500);padding:.25rem .5rem}
.fi-nav-item{display:flex;align-items:center;gap:.75rem;height:2.5rem;padding:0 .5rem;border-radius:var(--radius-sm);color:var(--gray-700);font-weight:500;font-size:14px;text-decoration:none}
.fi-nav-item:hover{background:var(--gray-100);text-decoration:none}
.fi-nav-item .icon{color:var(--gray-400)}
.fi-nav-item.is-active{background:var(--gray-100);color:var(--primary-600)}
.fi-nav-item.is-active .icon{color:var(--primary-600)}
.fi-nav-badge{margin-left:auto;background:var(--primary-50);color:var(--primary-700);font-size:12px;font-weight:500;padding:0 .5rem;border-radius:999px;min-width:1.5rem;text-align:center}
.fi-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fi-topbar{height:var(--topbar-h);position:sticky;top:0;background:var(--white);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;gap:1rem;z-index:20}
.fi-topbar-left,.fi-topbar-right{display:flex;align-items:center;gap:.75rem}
.fi-crumbs{display:flex;align-items:center;gap:.5rem;font-size:14px;color:var(--gray-500)}
.fi-crumbs a{color:var(--gray-500)}
.fi-crumbs .sep{color:var(--gray-300)}
.fi-crumbs .cur{color:var(--gray-950);font-weight:500}
.fi-topbar-search{display:flex;align-items:center;gap:.5rem;background:var(--white);box-shadow:var(--ring-input);border-radius:var(--radius-sm);height:2.25rem;padding:0 .75rem;width:20rem;color:var(--gray-400)}
.fi-topbar-search input{border:0;outline:0;background:transparent;flex:1;font:inherit;color:var(--gray-950)}
.fi-topbar-search kbd{font-size:11px;background:var(--gray-100);border-radius:4px;padding:1px 5px;color:var(--gray-500);font-family:inherit}
.fi-icon-btn{width:2.25rem;height:2.25rem;border:0;background:transparent;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--gray-400);cursor:pointer;position:relative}
.fi-icon-btn:hover{background:var(--gray-100);color:var(--gray-600)}
.fi-icon-btn .dot{position:absolute;top:4px;right:4px;background:var(--primary-600);color:#fff;font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:999px;padding:0 4px;display:flex;align-items:center;justify-content:center}
.fi-user{display:flex;align-items:center;gap:.75rem;border:0;background:transparent;cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-sm);text-align:left}
.fi-user:hover{background:var(--gray-100)}
.fi-avatar{width:2.25rem;height:2.25rem;border-radius:999px;background:var(--primary-100);color:var(--primary-700);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.fi-avatar.sm{width:1.75rem;height:1.75rem;font-size:11px}
.fi-user-name{font-weight:500;font-size:14px;line-height:1.2}
.fi-user-role{font-size:12px;color:var(--gray-500)}
.fi-menu{position:absolute;right:0;top:calc(100% + .25rem);background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg),var(--ring);min-width:16rem;padding:.5rem;display:none;z-index:40}
.fi-menu.is-open{display:block}
.fi-menu-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:var(--radius-sm);width:100%;border:0;background:transparent;cursor:pointer;color:var(--gray-700);font-size:14px;text-decoration:none}
.fi-menu-item:hover{background:var(--gray-100);text-decoration:none}
.fi-menu-item .icon-sm{color:var(--gray-400)}
.fi-menu-label{font-size:12px;color:var(--gray-500);padding:.5rem .75rem .25rem}
.fi-menu-sep{height:1px;background:var(--gray-200);margin:.5rem 0}
.rel{position:relative}
.fi-page{padding:2rem;display:grid;gap:2rem;align-content:start;flex:1}
.fi-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fi-page-header h1{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.fi-page-header .sub{color:var(--gray-500);margin-top:.25rem}
.fi-page-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}

/* Sections */
.fi-section{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm),var(--ring);padding:1.5rem;min-width:0}
.fi-section.tight{padding:0}
.fi-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.fi-section.tight .fi-section-header{padding:1.5rem 1.5rem 0}
.fi-section-header h3{font-size:16px;font-weight:600;line-height:1.5}
.fi-section-header p{color:var(--gray-500);font-size:14px}
.fi-section-header .flex{gap:.75rem}
.fi-section-header .icon{color:var(--gray-400)}

/* Stats */
.fi-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem}
.fi-stat{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm),var(--ring);padding:1.5rem;display:grid;gap:.5rem}
.fi-stat-label{font-size:14px;font-weight:500;color:var(--gray-500);display:flex;align-items:center;gap:.5rem}
.fi-stat-label .icon-sm{color:var(--gray-400)}
.fi-stat-value{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.fi-stat-desc{font-size:14px;color:var(--gray-500);display:flex;align-items:center;gap:.25rem}
.fi-stat-desc.is-up{color:var(--success-600)}
.fi-stat-desc.is-down{color:var(--danger-600)}
.fi-stat-desc.is-warn{color:var(--warning-600)}
.fi-stat-desc .icon-xs{flex:none}

/* Tables */
.fi-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;flex-wrap:wrap;border-bottom:1px solid var(--gray-200)}
.fi-tabs{display:flex;gap:.25rem;overflow-x:auto}
.fi-tab{border:0;background:transparent;padding:.5rem .75rem;font-size:14px;font-weight:500;color:var(--gray-500);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.fi-tab:hover{background:var(--gray-50);color:var(--gray-700)}
.fi-tab.is-active{background:var(--gray-100);color:var(--primary-600)}
.fi-tab-count{font-size:12px;background:var(--gray-100);color:var(--gray-700);border-radius:999px;padding:0 .5rem;min-width:1.25rem;text-align:center}
.fi-tab.is-active .fi-tab-count{background:var(--primary-50);color:var(--primary-700)}
.fi-tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.fi-search{display:flex;align-items:center;gap:.5rem;background:var(--white);box-shadow:var(--ring-input);border-radius:var(--radius-sm);height:2.25rem;padding:0 .75rem;color:var(--gray-400);min-width:14rem}
.fi-search input{border:0;outline:0;flex:1;font:inherit;color:var(--gray-950);background:transparent;min-width:0}
.fi-search:focus-within{box-shadow:0 0 0 2px var(--primary-500)}
.fi-tbl-wrap{overflow-x:auto}
table.fi-tbl{width:100%;border-collapse:collapse}
.fi-tbl th{font-size:14px;font-weight:600;color:var(--gray-950);text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--gray-200);white-space:nowrap;background:var(--white);cursor:default;user-select:none}
.fi-tbl th.sortable{cursor:pointer}
.fi-tbl th.sortable:hover{background:var(--gray-50)}
.fi-tbl th .sort{display:inline-block;width:.9rem;height:.9rem;vertical-align:-2px;margin-left:.25rem;color:var(--gray-400)}
.fi-tbl td{padding:.75rem 1rem;border-bottom:1px solid var(--gray-200);color:var(--gray-700);vertical-align:middle;font-size:14px;white-space:nowrap}
.fi-tbl td.wrap{white-space:normal}
.fi-tbl tbody tr:last-child td{border-bottom:0}
.fi-tbl tbody tr:hover td{background:var(--gray-50)}
.fi-tbl tbody tr.is-selected td{background:var(--primary-50)}
.fi-tbl .col-check{width:2.5rem;padding-right:0}
.fi-tbl-link{color:var(--primary-600);font-weight:600}
.fi-tbl-link:hover{text-decoration:underline}
.fi-tbl .actions{white-space:nowrap;text-align:right}
.fi-tbl .actions .fi-btn-link{margin-left:.75rem}
.fi-tbl .sub{display:block;font-size:12px;color:var(--gray-500)}
.fi-pagination{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-top:1px solid var(--gray-200);color:var(--gray-500);font-size:14px;flex-wrap:wrap}
.fi-pages{display:flex;gap:.25rem}
.fi-page-btn{min-width:2.25rem;height:2.25rem;border:0;background:transparent;border-radius:var(--radius-sm);color:var(--gray-700);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 .5rem;font-weight:500}
.fi-page-btn:hover{background:var(--gray-100)}
.fi-page-btn.is-active{background:var(--primary-50);color:var(--primary-700)}
.fi-bulk{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;background:var(--primary-50);border-bottom:1px solid var(--gray-200);font-size:14px;color:var(--primary-700)}
.fi-progress{display:inline-flex;align-items:center;gap:.5rem;font-size:12px;color:var(--gray-700)}
.fi-progress i{display:inline-block;width:4rem;height:.375rem;border-radius:999px;background:var(--gray-200);overflow:hidden;position:relative}
.fi-progress i::after{content:"";position:absolute;inset:0;width:var(--p,50%);background:var(--success-600);border-radius:999px}
.fi-progress.is-low i::after{background:var(--danger-600)}
.fi-progress.is-mid i::after{background:var(--warning-600)}

/* Badges */
.fi-badge{display:inline-flex;align-items:center;gap:.375rem;border-radius:var(--radius-sm);padding:.25rem .5rem;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;background:var(--gray-100);color:var(--gray-700)}
.fi-badge::before{content:"";width:.375rem;height:.375rem;border-radius:999px;background:currentColor;opacity:.7}
.fi-badge.no-dot::before{display:none}
.fi-badge-success{background:var(--success-50);color:var(--success-700)}
.fi-badge-warning{background:var(--warning-50);color:var(--warning-700)}
.fi-badge-danger{background:var(--danger-50);color:var(--danger-700)}
.fi-badge-info{background:var(--info-50);color:var(--info-700)}
.fi-badge-primary{background:var(--primary-50);color:var(--primary-700)}
.fi-badge-gray{background:var(--gray-100);color:var(--gray-700)}

/* Buttons */
.fi-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border-radius:var(--radius-sm);font-size:14px;font-weight:600;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .1s}
.fi-btn:hover{text-decoration:none}
.fi-btn .icon-sm{flex:none}
.fi-btn-primary{background:var(--primary-600);color:#fff}
.fi-btn-primary:hover{background:var(--primary-700)}
.fi-btn-secondary{background:var(--white);color:var(--gray-950);box-shadow:var(--ring-input)}
.fi-btn-secondary:hover{background:var(--gray-50)}
.fi-btn-danger{background:var(--danger-600);color:#fff}
.fi-btn-danger:hover{background:var(--danger-700)}
.fi-btn-success{background:var(--success-600);color:#fff}
.fi-btn-link{background:transparent;color:var(--primary-600);padding:0;height:auto}
.fi-btn-link:hover{text-decoration:underline}
.fi-btn-link.danger{color:var(--danger-600)}
.fi-btn-link.gray{color:var(--gray-600)}
.fi-btn-sm{height:2rem;padding:0 .625rem;font-size:13px}
.fi-btn-lg{height:3rem;padding:0 1.25rem;font-size:15px;width:100%}
.fi-btn:disabled{opacity:.5;cursor:not-allowed}
.fi-btn-dashed{background:transparent;border:1px dashed var(--gray-300);color:var(--gray-600);font-weight:500}
.fi-btn-dashed:hover{background:var(--gray-50)}

/* Forms */
.fi-field{display:grid;gap:.375rem}
.fi-label{font-size:14px;font-weight:500;color:var(--gray-950)}
.fi-label .req{color:var(--danger-600);margin-left:2px}
.fi-input,.fi-select,.fi-textarea{width:100%;background:var(--white);border:0;box-shadow:var(--ring-input);border-radius:var(--radius-sm);height:2.25rem;padding:0 .75rem;font:inherit;color:var(--gray-950);outline:0}
.fi-textarea{height:auto;min-height:5rem;padding:.5rem .75rem;resize:vertical}
.fi-input:focus,.fi-select:focus,.fi-textarea:focus{box-shadow:0 0 0 2px var(--primary-500)}
.fi-input::placeholder{color:var(--gray-400)}
.fi-input[readonly]{background:var(--gray-50);color:var(--gray-500)}
.fi-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:1.25rem;padding-right:2.25rem}
.fi-helper{font-size:14px;color:var(--gray-500)}
.fi-helper.danger{color:var(--danger-600)}
.fi-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.fi-form-grid .span-2{grid-column:span 2}
.fi-fieldset{border:1px solid var(--gray-200);border-radius:var(--radius);padding:1.5rem;display:grid;gap:1.5rem;margin:0;min-width:0}
.fi-fieldset legend{font-size:14px;font-weight:600;padding:0 .5rem;color:var(--gray-950)}
.fi-check{display:flex;align-items:flex-start;gap:.5rem;font-size:14px;color:var(--gray-700);cursor:pointer}
.fi-check input{width:1rem;height:1rem;margin-top:.2rem;accent-color:var(--primary-600)}
.fi-input-group{display:flex}
.fi-input-group .fi-input{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.fi-input-group .prefix{display:flex;align-items:center;padding:0 .75rem;background:var(--gray-50);box-shadow:var(--ring-input);border-radius:var(--radius-sm) 0 0 var(--radius-sm);color:var(--gray-500);font-size:14px;white-space:nowrap}
.fi-toggle{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:14px}
.fi-toggle i{width:2.5rem;height:1.5rem;border-radius:999px;background:var(--gray-300);position:relative;transition:background .15s;flex:none}
.fi-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:1.25rem;height:1.25rem;background:#fff;border-radius:999px;transition:left .15s;box-shadow:var(--shadow-sm)}
.fi-toggle input{display:none}
.fi-toggle input:checked+i{background:var(--primary-600)}
.fi-toggle input:checked+i::after{left:1.125rem}
.fi-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.fi-chip{border:0;background:var(--white);box-shadow:var(--ring-input);border-radius:999px;padding:.375rem .75rem;font-size:13px;font-weight:500;color:var(--gray-700);cursor:pointer;display:inline-flex;align-items:center;gap:.375rem}
.fi-chip.is-active{background:var(--primary-50);color:var(--primary-700);box-shadow:0 0 0 1px var(--primary-500)}
.fi-chip .cnt{font-size:11px;color:var(--gray-500)}
.fi-chip.is-active .cnt{color:var(--primary-700)}

/* Modal */
.fi-modal-backdrop{position:fixed;inset:0;background:rgba(9,9,11,.5);display:none;align-items:center;justify-content:center;padding:1rem;z-index:50}
.fi-modal-backdrop.is-open{display:flex}
.fi-modal{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:28rem;max-height:calc(100vh - 2rem);overflow:auto;display:grid}
.fi-modal.is-wide{max-width:42rem}
.fi-modal.is-xl{max-width:60rem}
.fi-modal-body{padding:1.5rem;display:grid;gap:1rem}
.fi-modal-body.center{text-align:center;justify-items:center}
.fi-modal-icon{width:3rem;height:3rem;border-radius:999px;display:flex;align-items:center;justify-content:center}
.fi-modal-icon.danger{background:var(--danger-50);color:var(--danger-600)}
.fi-modal-icon.success{background:var(--success-50);color:var(--success-600)}
.fi-modal-icon.warning{background:var(--warning-50);color:var(--warning-600)}
.fi-modal-icon.info{background:var(--info-50);color:var(--info-600)}
.fi-modal h3{font-size:18px;font-weight:600}
.fi-modal p.desc{color:var(--gray-500)}
.fi-modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--gray-200);flex-wrap:wrap}
.fi-modal-footer.grid{display:grid;grid-template-columns:1fr 1fr}
.fi-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--gray-200)}
.fi-modal-header h3{font-size:18px;font-weight:600}
.fi-modal-close{border:0;background:transparent;color:var(--gray-400);cursor:pointer;padding:.25rem;border-radius:var(--radius-sm)}
.fi-modal-close:hover{background:var(--gray-100);color:var(--gray-700)}

/* Toasts */
.fi-toasts{position:fixed;top:1rem;right:1rem;display:grid;gap:.75rem;z-index:60;width:22rem;max-width:calc(100vw - 2rem);pointer-events:none}
.fi-toast{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg),var(--ring);padding:1rem;display:flex;gap:.75rem;align-items:flex-start;animation:fi-in .15s ease-out;pointer-events:auto}
.fi-toast .icon{flex:none}
.fi-toast.success .icon{color:var(--success-600)}
.fi-toast.danger .icon{color:var(--danger-600)}
.fi-toast.warning .icon{color:var(--warning-600)}
.fi-toast.info .icon{color:var(--info-600)}
.fi-toast-title{font-weight:600;font-size:14px}
.fi-toast-body{font-size:14px;color:var(--gray-500);margin-top:.125rem}
.fi-toast.is-leaving{animation:fi-out .15s ease-in forwards}
@keyframes fi-in{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
@keyframes fi-out{to{opacity:0;transform:translateX(1rem)}}

/* Slide-over */
.fi-slideover-backdrop{position:fixed;inset:0;background:rgba(9,9,11,.4);display:none;z-index:45}
.fi-slideover-backdrop.is-open{display:block}
.fi-slideover{position:fixed;top:0;right:0;bottom:0;width:24rem;max-width:100vw;background:var(--white);box-shadow:var(--shadow-lg);z-index:46;transform:translateX(100%);transition:transform .2s ease;display:flex;flex-direction:column}
.fi-slideover.is-open{transform:none}
.fi-slideover-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--gray-200)}
.fi-slideover-header h3{font-size:18px;font-weight:600}
.fi-slideover-body{flex:1;overflow-y:auto;padding:1rem 1.5rem}
.fi-notif{display:flex;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--gray-200);cursor:pointer;text-decoration:none;color:inherit}
.fi-notif:hover{text-decoration:none;background:var(--gray-50)}
.fi-notif:last-child{border-bottom:0}
.fi-notif .icon-sm{margin-top:.125rem;color:var(--gray-400)}
.fi-notif.info .icon-sm{color:var(--info-600)}
.fi-notif.danger .icon-sm{color:var(--danger-600)}
.fi-notif.success .icon-sm{color:var(--success-600)}
.fi-notif.warning .icon-sm{color:var(--warning-600)}
.fi-notif-title{font-size:14px;color:var(--gray-700)}
.fi-notif.is-unread .fi-notif-title{font-weight:600;color:var(--gray-950)}
.fi-notif-body{font-size:13px;color:var(--gray-500)}
.fi-notif-time{font-size:12px;color:var(--gray-400);margin-top:.125rem}

/* Empty state */
.fi-empty{display:grid;justify-items:center;text-align:center;gap:.5rem;padding:3rem 1.5rem;color:var(--gray-500)}
.fi-empty-icon{width:3rem;height:3rem;border-radius:999px;background:var(--gray-100);color:var(--gray-400);display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}
.fi-empty-icon.success{background:var(--success-50);color:var(--success-600)}
.fi-empty h4{font-size:16px;font-weight:600;color:var(--gray-950)}
.fi-empty p{max-width:28rem}

/* Infolist */
.fi-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem 1.5rem}
.fi-info{display:grid;gap:.25rem;min-width:0}
.fi-info-label{font-size:12px;font-weight:500;color:var(--gray-500)}
.fi-info-value{font-size:14px;color:var(--gray-950);word-break:break-word}
.fi-info-value.big{font-size:20px;font-weight:600}
.fi-info.span-2{grid-column:span 2}
.fi-timeline{display:grid;gap:0;position:relative;padding-left:1.75rem}
.fi-timeline::before{content:"";position:absolute;left:.6875rem;top:.5rem;bottom:.5rem;width:2px;background:var(--gray-200)}
.fi-tl{position:relative;padding:.25rem 0 1rem}
.fi-tl::before{content:"";position:absolute;left:-1.75rem;top:.45rem;width:1.5rem;height:1.5rem;border-radius:999px;background:var(--white);border:2px solid var(--gray-300);box-sizing:border-box}
.fi-tl.done::before{background:var(--success-600);border-color:var(--success-600)}
.fi-tl.now::before{background:var(--white);border-color:var(--primary-600);box-shadow:0 0 0 4px var(--primary-100)}
.fi-tl.danger::before{background:var(--danger-600);border-color:var(--danger-600)}
.fi-tl-title{font-size:14px;font-weight:500;color:var(--gray-950)}
.fi-tl.pending .fi-tl-title{color:var(--gray-500);font-weight:400}
.fi-tl-time{font-size:12px;color:var(--gray-500)}
.fi-list{display:grid;gap:0}
.fi-list-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--gray-200)}
.fi-list-item:last-child{border-bottom:0}
.fi-list-item .icon-sm{color:var(--gray-400);flex:none}
.fi-kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--gray-200);font-size:14px}
.fi-kv:last-child{border-bottom:0}
.fi-kv b{font-weight:600}

/* Gate banner */
.fi-gate{border-radius:var(--radius-sm);border-left:4px solid;padding:1rem 1.25rem;display:flex;gap:.75rem;align-items:flex-start}
.fi-gate .icon{flex:none}
.fi-gate b{display:block;font-weight:600;margin-bottom:.125rem}
.fi-gate p{color:var(--gray-700)}
.fi-gate.is-locked{background:var(--danger-50);border-color:var(--danger-600)}
.fi-gate.is-locked .icon,.fi-gate.is-locked b{color:var(--danger-700)}
.fi-gate.is-approved{background:var(--warning-50);border-color:var(--warning-600)}
.fi-gate.is-approved .icon,.fi-gate.is-approved b{color:var(--warning-700)}
.fi-gate.is-released{background:var(--success-50);border-color:var(--success-600)}
.fi-gate.is-released .icon,.fi-gate.is-released b{color:var(--success-700)}
.fi-gate.is-info{background:var(--info-50);border-color:var(--info-600)}
.fi-gate.is-info .icon,.fi-gate.is-info b{color:var(--info-700)}
.fi-gate.is-gray{background:var(--gray-100);border-color:var(--gray-400)}
.fi-gate.is-gray .icon,.fi-gate.is-gray b{color:var(--gray-700)}
.fi-gate.pulse .icon{animation:fi-pulse 1.2s infinite}
@keyframes fi-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Code tag */
.fi-tag{position:fixed;bottom:8px;right:12px;font-family:var(--mono);font-size:11px;color:var(--gray-400);background:rgba(255,255,255,.8);padding:2px 6px;border-radius:4px;z-index:70;pointer-events:none}

/* Map / chart boxes */
.fi-map{width:100%;height:24rem;border-radius:var(--radius-sm);background:var(--gray-100);overflow:hidden;position:relative;z-index:0}
.fi-map .fi-empty{height:100%;align-content:center}
.fi-chart{position:relative;height:16rem}
.leaflet-container{font-family:inherit}
.leaflet-div-icon{background:transparent;border:0}
.truck-pin{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 2px #fff,var(--shadow-sm)}
.truck-pin svg{width:16px;height:16px}
.truck-pin.info{background:var(--info-600)}
.truck-pin.success{background:var(--success-600)}
.truck-pin.warning{background:var(--warning-600)}
.truck-pin.gray{background:var(--gray-400)}
.truck-pin.danger{background:var(--danger-600);animation:fi-pulse 1s infinite}

/* Document mock (Surat Jalan) */
.doc{background:#fff;border:1px solid var(--gray-200);border-radius:4px;padding:1rem;font-size:11px;line-height:1.4;color:var(--gray-800);box-shadow:var(--shadow-sm);font-family:var(--mono);position:relative;overflow:hidden}
.doc.blur{filter:blur(2px)}
.doc-head{display:flex;justify-content:space-between;border-bottom:2px solid var(--gray-800);padding-bottom:.5rem;margin-bottom:.5rem}
.doc-head b{font-size:13px;font-family:Inter,sans-serif}
.doc table{width:100%;border-collapse:collapse;margin:.5rem 0}
.doc td,.doc th{border:1px solid var(--gray-400);padding:3px 5px;text-align:left}
.doc .stamp{position:absolute;right:1rem;bottom:1rem;border:3px solid var(--success-600);color:var(--success-600);font-weight:700;padding:.25rem .75rem;transform:rotate(-12deg);font-family:Inter,sans-serif;font-size:16px;opacity:.85}
.doc .sign{font-family:cursive;font-size:18px;color:var(--info-700);transform:rotate(-4deg);display:inline-block}
.photo-tile{aspect-ratio:4/3;border-radius:var(--radius-sm);background:var(--gray-100);display:flex;align-items:center;justify-content:center;color:var(--gray-400);overflow:hidden;position:relative}
.photo-tile.dashed{border:2px dashed var(--gray-300);background:transparent;flex-direction:column;gap:.25rem;font-size:13px}
.photo-tile img,.photo-tile .doc{width:100%;height:100%;object-fit:cover}
.photo-tile .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(9,9,11,.6);color:#fff;font-size:12px;padding:.25rem .5rem}
.fake-photo{width:100%;height:100%;background:linear-gradient(160deg,#9ca3af 0%,#6b7280 45%,#4b5563 100%);position:relative}
.fake-photo::after{content:"";position:absolute;left:10%;right:10%;bottom:18%;height:32%;background:rgba(255,255,255,.25);border-radius:6px}

/* Tire diagram - a fixed-width chassis, tires sit on the row, rows never overlap */
.axle{display:flex;align-items:center;gap:1.25rem;padding:.875rem 0}
.axle+.axle{border-top:1px solid var(--gray-200)}
.axle-label{width:8.5rem;flex:none;font-size:13px;color:var(--gray-600);white-space:nowrap}
.axle-bar{width:16rem;flex:none;height:8px;background:var(--gray-300);border-radius:4px;position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 .75rem}
.tire{width:1.5rem;height:2.5rem;border-radius:.4rem;background:var(--gray-800);position:relative;display:flex;align-items:flex-end;justify-content:center;color:#fff;font-size:10px;font-weight:600;overflow:hidden;cursor:default;box-shadow:0 0 0 2px var(--white)}
.tire i{position:absolute;left:0;right:0;bottom:0;background:var(--success-600);opacity:.9}
.tire.mid i{background:var(--warning-600)}
.tire.low i{background:var(--danger-600)}
.tire span{position:relative;z-index:1;padding-bottom:3px}
.tire-pair{display:flex;gap:.375rem}
.tire-legend{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}

/* Phone product */
.ph-stage{min-height:100vh;background:var(--gray-100)}
.ph-app{width:100%;min-height:100vh;background:var(--white);position:relative;display:flex;flex-direction:column}
@media (min-width:480px){
  /* desktop: a 430px phone-width column with normal page scroll, no device frame */
  .ph-stage{display:flex;justify-content:center;align-items:flex-start}
  .ph-app{width:430px;min-height:100vh;box-shadow:1px 0 0 var(--gray-200),-1px 0 0 var(--gray-200)}
}
.ph-appbar{height:56px;display:flex;align-items:center;gap:.75rem;padding:0 1rem;border-bottom:1px solid var(--gray-200);background:var(--white);position:sticky;top:0;z-index:5;flex:none}
.ph-appbar h1{font-size:18px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-appbar .fi-icon-btn{margin-left:-.5rem}
.ph-content{padding:1rem;padding-bottom:6.5rem;display:grid;gap:1rem;align-content:start;flex:1}
.ph-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm),var(--ring);padding:1rem;display:grid;gap:.75rem}
.ph-card h3{font-size:15px;font-weight:600}
.ph-tabbar{position:sticky;bottom:0;height:64px;background:var(--white);border-top:1px solid var(--gray-200);display:flex;align-items:stretch;z-index:5;flex:none}
.ph-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:500;color:var(--gray-500);text-decoration:none}
.ph-tab:hover{text-decoration:none}
.ph-tab.is-active{color:var(--primary-600)}
.ph-tab .icon{width:1.375rem;height:1.375rem}
.ph-tab.spacer{flex:.8;pointer-events:none}
.ph-sos{position:absolute;left:50%;transform:translateX(-50%);bottom:6px;width:68px;height:68px;border-radius:999px;background:var(--danger-600);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--white),var(--shadow-lg);z-index:6;text-decoration:none;letter-spacing:.05em}
.ph-sos:hover{background:var(--danger-700);text-decoration:none}
.ph-offline{background:var(--gray-800);color:#fff;font-size:12px;padding:.5rem 1rem;display:none;align-items:center;gap:.5rem}
body.is-offline .ph-offline{display:flex}
.ph-chip-row{display:flex;gap:.5rem;flex-wrap:wrap}
.ph-chip{background:var(--gray-100);border-radius:999px;padding:.25rem .625rem;font-size:12px;color:var(--gray-700);display:inline-flex;align-items:center;gap:.25rem}
.ph-cam{aspect-ratio:4/3;background:var(--gray-900);border-radius:var(--radius);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gray-400)}
.ph-cam .corner{position:absolute;width:24px;height:24px;border:3px solid var(--primary-500)}
.ph-cam .corner.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.ph-cam .corner.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.ph-cam .corner.bl{bottom:12px;left:12px;border-right:0;border-top:0}
.ph-cam .corner.br{bottom:12px;right:12px;border-left:0;border-top:0}
.ph-cam .overlay{position:absolute;inset:0;background:rgba(9,9,11,.75);color:#fff;display:none;align-items:center;justify-content:center;font-weight:500;text-align:center;padding:1rem}
.ph-cam.busy .overlay{display:flex}
.ph-cam .doc{position:absolute;inset:8%;font-size:9px}
.ph-pin{display:flex;justify-content:center;gap:.75rem}
.ph-pin i{width:.875rem;height:.875rem;border-radius:999px;border:2px solid var(--gray-300)}
.ph-pin i.on{background:var(--primary-600);border-color:var(--primary-600)}
.ph-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.ph-pad button{height:3.5rem;border-radius:var(--radius);border:0;background:var(--gray-100);font-size:22px;font-weight:500;cursor:pointer;color:var(--gray-950)}
.ph-pad button:hover{background:var(--gray-200)}
.ph-pad button.ghost{background:transparent;font-size:14px;color:var(--gray-500)}
.ph-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.ph-stat{background:var(--gray-50);border-radius:var(--radius-sm);padding:.5rem;text-align:center}
.ph-stat b{display:block;font-size:16px;font-weight:600}
.ph-stat span{font-size:11px;color:var(--gray-500)}
.ph-fuel{display:flex;gap:4px}
.ph-fuel i{flex:1;height:1.75rem;border-radius:4px;background:var(--gray-200);cursor:pointer}
.ph-fuel i.on{background:var(--info-600)}
.sos-ring{width:200px;height:200px;border-radius:999px;margin:1rem auto;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--danger-700) calc(var(--p,0)*1%),var(--danger-50) 0);padding:12px;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}
.sos-ring div{width:100%;height:100%;border-radius:999px;background:var(--danger-600);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:26px;letter-spacing:.06em;box-shadow:inset 0 -6px 0 rgba(0,0,0,.15)}
.sos-ring div small{font-size:12px;font-weight:500;letter-spacing:0;opacity:.9}
.ph-sheet{position:fixed;left:0;right:0;bottom:0;width:min(430px,100vw);margin:0 auto;background:var(--white);border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow-lg);padding:1rem;display:grid;gap:1rem;transform:translateY(105%);transition:transform .2s;z-index:8}
.ph-sheet.is-open{transform:none}
.ph-sheet-backdrop{position:fixed;inset:0;background:rgba(9,9,11,.5);display:none;z-index:7}
.ph-sheet-backdrop.is-open{display:block}
.ph-sheet .handle{width:2.5rem;height:4px;background:var(--gray-300);border-radius:2px;margin:0 auto}
.log{font-family:var(--mono);font-size:12px;background:var(--gray-900);color:#d4d4d8;border-radius:var(--radius-sm);padding:.75rem;display:grid;gap:.25rem;min-height:6rem}
.log .ok{color:#4ade80}
.log .warn{color:#fbbf24}
.log .cur::after{content:"_";animation:fi-pulse .8s infinite}

/* Entry page */
.entry{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem}
.entry-card{width:100%;max-width:60rem;display:grid;gap:2rem}
.entry-head{text-align:center;display:grid;gap:.5rem;justify-items:center}
.entry-head .icon{width:3rem;height:3rem;color:var(--primary-600)}
.entry-head h1{font-size:30px;font-weight:600;letter-spacing:-.025em}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.role{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm),var(--ring);padding:1.5rem;display:grid;gap:.75rem;text-decoration:none;color:inherit;transition:box-shadow .1s}
.role:hover{box-shadow:var(--shadow-lg),0 0 0 2px var(--primary-500);text-decoration:none}
.role .icon{width:2.5rem;height:2.5rem;color:var(--primary-600)}
.role h3{font-size:18px;font-weight:600}
.role p{color:var(--gray-500)}
.role .who{font-size:13px;color:var(--gray-700)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem}
.login-card{width:100%;max-width:28rem;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm),var(--ring);padding:2rem;display:grid;gap:1.5rem}
.login-card .brand{display:grid;justify-items:center;gap:.5rem;text-align:center}
.login-card .brand .icon{width:2.5rem;height:2.5rem;color:var(--primary-600)}
.login-card h1{font-size:24px;font-weight:600;letter-spacing:-.025em}

/* Responsive */
.fi-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(9,9,11,.4);z-index:29}
@media (max-width:1023px){
  .fi-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s}
  .fi-sidebar.is-open{transform:none}
  .fi-sidebar-backdrop.is-open{display:block}
  .fi-topbar{padding:0 1rem}
  .fi-topbar-search{width:auto;flex:1;max-width:14rem}
  .fi-page{padding:1rem;gap:1.25rem}
  .grid-2,.grid-3,.grid-23,.grid-32{grid-template-columns:1fr}
  .fi-form-grid{grid-template-columns:1fr}
  .fi-form-grid .span-2{grid-column:auto}
  .fi-user-name,.fi-user-role{display:none}
  .fi-crumbs{display:none}
}
@media (min-width:1024px){.fi-sidebar-toggle{display:none}}
@media (max-width:639px){
  .fi-stats{grid-template-columns:1fr}
  .fi-page-header h1{font-size:24px}
  .fi-topbar-search{display:none}
}
@media print{.fi-sidebar,.fi-topbar,.fi-tag,.fi-page-actions,.fi-toasts{display:none!important}.fi-page{padding:0}}