/* LadAlert UI System · V12.09
   This file is the final visual authority. styles.css retains feature-specific
   layout; shared color, type, surfaces, controls, and responsive shells live here. */
:root{
 --ui-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 --ui-ink:#17384a;
 --ui-text:#315366;
 --ui-muted:#627987;
 --ui-action:#1677a4;
 --ui-action-strong:#0f648c;
 --ui-success:#209653;
 --ui-caution:#d4a900;
 --ui-danger:#c83d34;
 --ui-surface:rgba(252,254,254,.98);
 --ui-surface-soft:#f1f6f8;
 --ui-border:#b7cbd4;
 --ui-border-strong:#8faeba;
 --ui-shadow:0 12px 32px rgba(18,52,72,.14);
 --ui-radius-control:8px;
 --ui-radius-card:15px;
 --ui-touch:44px;
 --ui-s1:4px;
 --ui-s2:8px;
 --ui-s3:12px;
 --ui-s4:16px;
 --ui-s5:24px;
}

html,body,button,input,select,textarea{font-family:var(--ui-font)}
body{color:var(--ui-ink)}
button,input,select,textarea{font-size:14px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:3px solid rgba(22,119,164,.22);outline-offset:2px;
}

/* Shared application surfaces */
.fleet-panel,.fleet-panel.panel-collapsed{
 gap:var(--ui-s2)!important;padding:0!important;border:0!important;border-radius:0!important;
 background:transparent!important;box-shadow:none!important;overflow:visible!important;
}
.side-brand,#vesselsWorkspace,.selected-vessel-workspace,.geofence-panel.side-workspace{
 box-sizing:border-box;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-card)!important;
 background:var(--ui-surface)!important;box-shadow:var(--ui-shadow)!important;overflow:hidden;
}
.side-brand{position:relative;z-index:90;flex:0 0 auto;overflow:visible!important;background:#e6f0f5!important}
.fleet-panel.panel-collapsed>.side-brand{border-radius:var(--ui-radius-card)!important}
#vesselsWorkspace{max-height:calc(100dvh - 92px)!important}
.selected-vessel-workspace{max-height:calc(100dvh - 94px)!important;padding:0 12px 12px!important}
.geofence-panel.side-workspace{background:var(--ui-surface)!important}

/* Consistent controls */
.primary,.primary-action,.modal-card button.primary{
 border:1px solid var(--ui-action-strong)!important;border-radius:var(--ui-radius-control)!important;
 background:var(--ui-action)!important;color:#fff!important;font-weight:750;
}
.secondary,.secondary-action,.modal-card button.secondary{
 border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-control)!important;
 background:#fff!important;color:var(--ui-ink)!important;font-weight:700;
}
.text-action,.account-back{
 border:0;background:transparent;color:var(--ui-action-strong);font-weight:750;
}
.primary,.secondary,.primary-action,.secondary-action{min-height:40px;padding:8px 13px}
.panel-close,.modal-close{
 display:grid;place-items:center;border:1px solid var(--ui-border)!important;border-radius:50%!important;
 background:#fff!important;color:var(--ui-ink)!important;box-shadow:0 2px 7px rgba(18,52,72,.12)!important;
}
.panel-close:hover,.modal-close:hover{border-color:var(--ui-action)!important;color:var(--ui-action)!important}

/* Vessel lens identity and state */
.vessel-header-standard{margin:0 -12px 6px!important;padding:6px 12px 5px!important;border-radius:14px 14px 0 0}
.vessel-header-topline{display:flex;align-items:flex-start!important;justify-content:space-between;gap:8px;min-height:28px}
.vessel-back-text{
 min-height:28px!important;margin:0!important;padding:4px 8px 4px 6px!important;border:1px solid var(--ui-border-strong)!important;
 border-radius:var(--ui-radius-control)!important;background:#fff!important;color:#225d78!important;
 font-size:9px!important;font-weight:850!important;line-height:1!important;text-decoration:none!important;
}
.vessel-back-text span:first-child{font-size:15px!important;transform:none!important}
.vessel-header-status{display:grid;justify-items:end;gap:2px;min-width:0;padding-top:1px;text-align:right}
.vessel-header-status .state,.vessel-header-status .header-alert-label{
 margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
 font-size:8px!important;font-weight:900!important;letter-spacing:.05em;line-height:1.05!important;white-space:nowrap;
}
.vessel-header-status .state.normal{color:var(--ui-success)!important}
.header-report-age{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;color:var(--ui-muted);font-size:7.5px;white-space:nowrap}
.header-report-age strong{color:var(--ui-ink);font-size:8.5px;font-variant-numeric:tabular-nums}
.vessel-header-standard .compact-vessel-title{display:flex!important;align-items:center!important;gap:7px!important;padding:3px 0 4px!important}
.vessel-identity-center{
 display:flex;align-items:center;gap:9px;min-width:0;flex:1;margin:0;padding:2px 5px 2px 2px;
 border:1px solid transparent;border-radius:9px;background:transparent;color:inherit;text-align:left;cursor:pointer;
}
.vessel-identity-center:hover,.vessel-identity-center:focus-visible{border-color:#a9c5d1;background:#fff;outline:0}
.vessel-identity-center .lens-thumb{width:62px!important;height:47px!important;margin:0!important;border-radius:8px!important}
.vessel-identity-center h2{min-width:0!important;margin:0!important;overflow:hidden;color:#162f42!important;font-size:21px!important;line-height:1.06!important;text-overflow:ellipsis;white-space:nowrap}
.vessel-glance-row{display:block!important;min-height:30px!important;padding-top:2px}
.vessel-glance-row .compact-health-strip{width:100%!important;grid-template-columns:minmax(58px,1.15fr) minmax(38px,.72fr) minmax(48px,.9fr) minmax(52px,1fr)!important}
.vessel-assurance{padding:3px 0 2px!important;border-top:0!important}
.vessel-assurance .alert-message{padding:6px 8px!important}
.vessel-assurance .alert-title{font-size:12px!important;line-height:1.12!important}
.vessel-assurance .lens-actions{margin-top:5px!important}
.vessel-assurance .lens-actions button{min-height:34px!important}

/* Alert is a standard action. Only its icon and status text carry state. */
.vessel-tool.alert-system,.vessel-tool.alert-system.green,.vessel-tool.alert-system.yellow,.vessel-tool.alert-system.red{
 border:1px solid var(--ui-border)!important;background:#fff!important;color:var(--ui-ink)!important;box-shadow:none!important;animation:none!important;
}
.vessel-tool.alert-system strong{color:var(--ui-ink)!important}
.vessel-tool.alert-system.green .tool-icon,.vessel-tool.alert-system.green>span{color:var(--ui-success)!important}
.vessel-tool.alert-system.yellow .tool-icon,.vessel-tool.alert-system.yellow>span{color:#ad8600!important}
.vessel-tool.alert-system.red .tool-icon,.vessel-tool.alert-system.red>span{color:var(--ui-danger)!important}
.vessel-tool.alert-system .tool-icon{fill:none!important;animation:uiAlertBell 4.8s ease-in-out infinite!important;transform-origin:50% 50%}
@keyframes uiAlertBell{0%,72%,100%{transform:scale(1);opacity:1}82%{transform:scale(.84);opacity:.55}91%{transform:scale(1.08);opacity:1}}
@media(prefers-reduced-motion:reduce){.vessel-tool.alert-system .tool-icon{animation:none!important}}

/* Account and demo responsibilities are separate. */
.account-chip{min-width:76px;min-height:38px;border-color:var(--ui-border-strong)!important;background:#fff!important;color:var(--ui-ink)!important}
.demo-live-control{overflow:visible!important}
.demo-account-menu{
 position:absolute!important;top:calc(100% + 8px)!important;right:0!important;left:auto!important;z-index:180!important;
 width:245px;padding:8px;border:1px solid var(--ui-border)!important;border-radius:12px!important;background:var(--ui-surface)!important;box-shadow:var(--ui-shadow)!important;
}
.demo-account-menu .account-head{padding:7px 8px 8px}
.demo-account-menu>button{width:100%;min-height:44px;text-align:left}

/* Modal shell and account workflow */
.modal{box-sizing:border-box;padding:24px}
.modal-card{box-sizing:border-box;max-width:calc(100vw - 48px);border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-card)!important;background:var(--ui-surface)!important;box-shadow:0 22px 60px rgba(10,35,50,.25)!important}
.modal-card>.eyebrow{color:var(--ui-muted);font-size:12px;letter-spacing:.1em}
.modal-card>h2{color:var(--ui-ink)}
#modalBody{overscroll-behavior:contain}
.account-back{display:inline-flex;align-items:center;min-height:36px;margin:0 0 10px;padding:4px 4px 4px 0;font-size:14px;cursor:pointer}
.preference-nav-list{display:grid;gap:10px}
.preference-nav-list>button,.vessel-profile-list>button{
 display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 12px;
 border:1px solid var(--ui-border);border-radius:10px;background:#fff;color:var(--ui-ink);text-align:left;
}
.preference-nav-list>button:hover,.vessel-profile-list>button:hover{border-color:var(--ui-action);background:#f7fbfd}
.preference-nav-list small,.vessel-profile-list small{display:block;margin-top:2px;color:var(--ui-muted);font-size:13px}
.account-compact-section,.optional-account-section{border-color:var(--ui-border)!important;background:#fff!important}
.account-compact-section input,.account-compact-section select,.optional-account-section input,.optional-account-section select,.asset-type-preview select{
 min-height:42px;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-control)!important;background:#fff;color:var(--ui-ink);font-size:14px;
}
.account-wide-field input#profileUsername{width:min(100%,32ch)!important;max-width:32ch!important}
.personal-save-row,.asset-save-row{position:sticky;bottom:0;z-index:3;background:linear-gradient(to bottom,rgba(252,254,254,.88),var(--ui-surface) 28%)}

/* Geofence launcher: obvious actions are compact and self-explanatory. */
.gf-direct-create{border-color:var(--ui-border)!important;background:#fff!important}
.gf-launch-card,.gf-map-visibility{
 box-sizing:border-box;min-height:48px!important;margin-top:8px!important;padding:9px 11px!important;
 border:1px solid var(--ui-border)!important;border-radius:10px!important;background:#fff!important;color:var(--ui-ink)!important;
}
.gf-launch-card{display:flex;align-items:center;gap:10px;width:100%;text-align:left}
.gf-launch-card small,.gf-map-visibility small{display:none!important}
.gf-map-visibility{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gf-map-visibility strong,.gf-launch-card strong{font-size:13px!important}

/* Notice placement and large reports use the same viewport-safe spacing. */
.map-notice{top:56px!important;left:50%!important;max-width:min(440px,calc(100vw - 24px));text-align:center;white-space:normal;transform:translateX(-50%)!important}
.modal-card:has(.watch-dashboard){width:min(820px,calc(100vw - 48px))!important;max-height:calc(100dvh - 48px)!important;margin:auto!important}

@media(max-width:720px){
 .modal{align-items:stretch!important;padding:10px!important}
 .modal-card{align-self:stretch;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important}
 .modal-card:has(.watch-dashboard){width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important}
}

@media(max-width:600px),(max-height:500px) and (max-width:950px){
 .fleet-panel,.fleet-panel.panel-collapsed{gap:6px!important}
 #vesselsWorkspace,.selected-vessel-workspace{max-height:calc(var(--lad-visual-height,100dvh) - 62px)!important}
 #app.vessel-focused:not(.geofence-task-mode) .side-brand{grid-template-columns:96px!important;justify-self:start;width:108px!important;min-height:44px!important;padding:4px 6px!important;gap:0!important}
 #app.vessel-focused:not(.geofence-task-mode) .side-brand .fleet-alert-indicator,#app.vessel-focused:not(.geofence-task-mode) .side-brand #sideAccountMount{display:none!important}
 #app.vessel-focused:not(.geofence-task-mode) .brand-panel-control{display:grid!important;grid-template-columns:auto 1fr;align-items:center;width:96px!important;min-height:36px!important;padding:3px 6px!important}
 #app.vessel-focused:not(.geofence-task-mode) .brand-panel-control .side-brand-id>span{display:none!important}
 #app.vessel-focused:not(.geofence-task-mode) .brand-panel-control .brand-mark{width:27px!important;height:24px!important}
 #app.vessel-focused:not(.geofence-task-mode) .brand-panel-hint{margin:0 0 0 5px!important;font-size:9px!important}
 .selected-vessel-workspace .vessel-header-standard{display:block!important;margin:0 -12px 4px!important;padding:5px 10px 4px!important}
 .selected-vessel-workspace .vessel-header-topline{display:flex!important;min-height:26px!important}
 .selected-vessel-workspace .vessel-header-standard .vessel-back-text{margin:0!important;padding:3px 7px 3px 5px!important}
 .selected-vessel-workspace .vessel-header-standard .compact-vessel-title{display:flex!important;flex-wrap:nowrap!important;padding:3px 0 2px!important}
 .selected-vessel-workspace .vessel-header-standard .vessel-identity-center{display:flex!important;gap:7px!important;min-width:0!important;padding:1px 4px 1px 1px!important}
 .selected-vessel-workspace .vessel-header-standard .vessel-identity-center .lens-thumb{display:block!important;width:50px!important;height:38px!important}
 .selected-vessel-workspace .vessel-header-standard .vessel-identity-center h2{min-width:0!important;font-size:18px!important}
 .selected-vessel-workspace .vessel-header-status{gap:1px!important}
 .selected-vessel-workspace .vessel-header-status .state,.selected-vessel-workspace .vessel-header-status .header-alert-label{font-size:7px!important}
 .selected-vessel-workspace .header-report-age,.selected-vessel-workspace .header-report-age strong{font-size:7px!important}
 .selected-vessel-workspace .vessel-header-standard .vessel-glance-row{display:block!important;margin:0!important;padding:1px 0 0!important}
 .selected-vessel-workspace:not(.mobile-sheet-expanded) .vessel-assurance .alert-message{grid-template-areas:"title action"!important;padding:5px 7px!important}
 .map-notice{top:max(10px,env(safe-area-inset-top))!important}
 #app:not(.vessel-focused):not(.geofence-task-mode) .map-notice{top:68px!important}
 .demo-account-menu{position:fixed!important;left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important;top:auto!important;bottom:54px!important;width:auto!important;max-height:calc(100dvh - 74px);overflow-y:auto}
 .account-wide-field input#profileUsername{width:100%!important;max-width:none!important}
}

@media(max-height:500px) and (min-width:601px) and (max-width:950px){
 #app:not(.geofence-task-mode) .map-top{top:auto!important;right:112px!important;bottom:9px!important;left:auto!important;width:auto!important;display:flex!important;flex-direction:row!important;gap:4px!important}
 #app:not(.geofence-task-mode) .v9-zoom{right:43px!important;bottom:9px!important;display:flex!important;flex-direction:row!important;width:62px!important;height:31px!important}
}