/* ============================================================================
   LOGPOSE V2 — Application Styles
   Production-grade premium mobile navigation UI.
   ============================================================================ */

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:var(--leading-normal);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--color-baltic);text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
ul,ol{list-style:none}

/* ─── App Shell ─── */
.app{min-height:100dvh;display:flex;flex-direction:column;background:var(--color-bg)}
.app-shell{display:flex;flex-direction:column;min-height:100dvh;max-width:var(--max-content);margin:0 auto;width:100%}
.app-main{flex:1;padding:var(--space-5) var(--space-5) calc(var(--bottom-nav-height) + var(--space-10));padding-bottom:calc(var(--bottom-nav-height) + var(--space-8))}

/* ─── Splash ─── */
.splash{position:fixed;inset:0;z-index:var(--z-splash);display:flex;align-items:center;justify-content:center;background:var(--color-bg)}
.splash-logo{animation:splash-enter 0.6s var(--ease-out) both}
@keyframes splash-enter{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}

/* ─── Header ─── */
.app-header{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--space-5);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border)}
.header-brand{display:flex;align-items:center;gap:var(--space-3)}
.brand-name{font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}
.brand-name b{color:var(--color-baltic)}
.header-actions{display:flex;gap:var(--space-2)}

/* ─── Icon Button ─── */
.icon-btn{display:flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);border-radius:var(--radius);color:var(--color-text-secondary);transition:background var(--duration-fast),color var(--duration-fast)}
.icon-btn:hover{background:var(--glass-border);color:var(--color-text)}
.icon-btn:focus-visible{outline:2px solid var(--color-baltic);outline-offset:2px}

/* ─── Bottom Navigation ─── */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:var(--z-header);display:flex;width:100%;max-width:var(--max-content);height:var(--bottom-nav-height);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-top:1px solid var(--glass-border);padding-bottom:var(--safe-inset-bottom)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--touch-min);padding:var(--space-2) var(--space-3);color:var(--color-nav-inactive);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);transition:color var(--duration-normal),transform var(--duration-fast)}
.nav-item[data-active="true"]{color:var(--color-nav-active)}
.nav-item:active{transform:scale(0.92)}
.nav-item:focus-visible{outline:2px solid var(--color-baltic);outline-offset:-2px}
.nav-item svg{width:var(--icon-md);height:var(--icon-md);transition:transform var(--duration-normal)}
.nav-item[data-active="true"] svg{transform:scale(1.1)}

/* ─── Screen Container ─── */
.screen{padding:0;animation:screen-enter var(--duration-slow) var(--ease-out) both}
.screen-enter{animation:screen-enter var(--duration-slow) var(--ease-out) both}
.screen-exit{animation:screen-exit var(--duration-normal) var(--ease-in-out) both}
@keyframes screen-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes screen-exit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}

/* ─── Section Header ─── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);min-height:var(--touch-min)}
.section-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);display:flex;align-items:center;gap:var(--space-2)}
.section-action{font-size:var(--text-sm);color:var(--color-baltic);font-weight:var(--weight-medium);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);transition:background var(--duration-fast)}
.section-action:hover{background:rgba(44,200,255,0.08)}

/* ─── Cards ─── */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow);transition:transform var(--duration-fast),box-shadow var(--duration-fast)}
.card:active{transform:scale(0.98)}
.card-interactive{cursor:pointer}
.card-interactive:hover{box-shadow:var(--shadow-lg)}
.card-interactive:focus-visible{outline:2px solid var(--color-baltic);outline-offset:2px}
.card-hover{transition:transform var(--duration-normal),box-shadow var(--duration-normal)}
.card-hover:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}

/* ─── Compact Card ─── */
.card-compact{padding:var(--space-3) var(--space-4);border-radius:var(--radius)}

/* ─── Hero ─── */
.hero{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-2)}
.hero-image{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.2) 50%,transparent 100%)}
.hero-content{position:absolute;bottom:0;left:0;right:0;padding:var(--space-5)}
.hero-type{display:inline-block;padding:3px 9px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:0.5px;text-transform:uppercase;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);color:#fff}
.hero-fallback{display:flex;align-items:center;justify-content:center;background:var(--color-surface-3)}

/* ─── Quick Facts ─── */
.quick-facts{display:flex;gap:var(--space-2);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:var(--space-3) 0;scroll-snap-type:x mandatory}
.quick-facts::-webkit-scrollbar{display:none}
.fact-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 12px;border-radius:var(--radius-pill);background:var(--color-surface-2);font-size:var(--text-sm);white-space:nowrap;flex-shrink:0;scroll-snap-align:start}
.fact-chip-icon{width:var(--icon-sm);height:var(--icon-sm);flex-shrink:0;color:var(--color-text-secondary)}
.fact-chip-value{font-weight:var(--weight-medium);color:var(--color-text)}
.fact-chip-label{color:var(--color-text-muted);font-size:var(--text-xs)}
.fact-chip--accent{background:rgba(44,200,255,0.1);border:1px solid rgba(44,200,255,0.2)}

/* ─── Location Summary ─── */
.location-summary{padding:var(--space-4) var(--space-5) 0}
.location-name{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}
.location-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--text-md);color:var(--color-text-secondary)}
.location-meta .divider{color:var(--color-border);font-size:var(--text-xs)}
.location-type{color:var(--color-baltic);font-weight:var(--weight-semibold);text-transform:capitalize}

/* ─── Action Bar ─── */
.action-bar{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-5);position:sticky;bottom:0;z-index:var(--z-header);background:var(--glass-bg);backdrop-filter:var(--glass-blur);border-top:1px solid var(--glass-border)}
.action-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:48px;padding:var(--space-2);border-radius:var(--radius);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary);transition:color var(--duration-fast),background var(--duration-fast)}
.action-btn svg{width:var(--icon-lg);height:var(--icon-lg);transition:transform var(--duration-fast)}
.action-btn:active{transform:scale(0.95)}
.action-btn:focus-visible{outline:2px solid var(--color-baltic);outline-offset:2px}
.action-btn[data-active="true"]{color:var(--color-baltic)}
.action-btn--primary{background:rgba(44,200,255,0.1);color:var(--color-baltic);border-radius:var(--radius)}

/* ─── Section List ─── */
.section-list{border-top:1px solid var(--color-border)}
.section-list .section{padding:var(--space-5) var(--space-5)}
.section-list .section+.section{border-top:1px solid var(--color-border)}

/* ─── Expandable Section ─── */
.expand-header{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--touch-min);padding:var(--space-3) 0;gap:var(--space-3)}
.expand-chevron{transition:transform var(--duration-normal);color:var(--color-text-muted);width:var(--icon-md);height:var(--icon-md)}
.expand-header[data-expanded="true"] .expand-chevron{transform:rotate(180deg)}
.expand-body{overflow:hidden;max-height:0;opacity:0;transition:max-height var(--duration-slow) var(--ease-out),opacity var(--duration-normal) var(--ease-in)}
.expand-body[data-expanded="true"]{max-height:2000px;opacity:1}

/* ─── Alert ─── */
.alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius);border-left:3px solid;margin-bottom:var(--space-2);font-size:var(--text-body);line-height:var(--leading-normal)}
.alert-danger{border-color:var(--color-danger);background:rgba(231,76,60,0.06);color:#F5A3A3}
.alert-warn{border-color:var(--color-warning);background:rgba(240,165,0,0.06);color:#FFD06B}
.alert-info{border-color:var(--color-info);background:rgba(52,152,219,0.06);color:#7FB8E8}

/* ─── Facility Grid ─── */
.facility-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.facility-cell{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius);background:var(--color-surface-2);font-size:var(--text-sm)}
.facility-cell-icon{width:var(--icon-md);height:var(--icon-md);color:var(--color-text-secondary);flex-shrink:0}
.facility-cell-name{font-weight:var(--weight-medium);color:var(--color-text)}
.facility-cell-status{width:6px;height:6px;border-radius:var(--radius-circle);flex-shrink:0}
.facility-cell-status--ok{background:var(--color-sea)}
.facility-cell-status--warn{background:var(--color-warning)}
.facility-cell-status--unavailable{background:var(--color-danger)}
.facility-cell-status--unknown{background:var(--color-text-muted)}

/* ─── VHF Channels ─── */
.vhf-channels{display:flex;flex-direction:column;gap:var(--space-2)}
.vhf-channel{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-radius:var(--radius);background:var(--color-surface-2)}
.vhf-label{font-size:var(--text-sm);color:var(--color-text-secondary)}
.vhf-value{font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--color-text)}

/* ─── Chip ─── */
.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--weight-medium);transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast)}
.chip--active{background:rgba(44,200,255,0.12);border:1px solid rgba(44,200,255,0.3);color:var(--color-baltic)}
.chip--inactive{background:var(--color-surface-2);border:1px solid transparent;color:var(--color-text-secondary)}
.chip--inactive:active{background:var(--color-surface-3)}
.chip--sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}

/* ─── Chip Row ─── */
.chip-row{display:flex;gap:var(--space-2);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:var(--space-2)}
.chip-row::-webkit-scrollbar{display:none}

/* ─── Empty State ─── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16) var(--space-5);text-align:center;gap:var(--space-4)}
.empty-state-icon{width:64px;height:64px;color:var(--color-text-muted);opacity:0.4}
.empty-state-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text)}
.empty-state-desc{font-size:var(--text-body);color:var(--color-text-secondary);max-width:300px}

/* ─── Error State ─── */
.error-state{padding:var(--space-10) var(--space-5);text-align:center}
.error-state-icon{width:48px;height:48px;color:var(--color-danger);margin-bottom:var(--space-4)}
.error-state-title{font-size:var(--text-md);font-weight:var(--weight-semibold);margin-bottom:var(--space-2)}
.error-state-desc{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4)}

/* ─── Skeleton ─── */
.skeleton{background:linear-gradient(90deg,var(--color-surface-2) 25%,var(--color-surface-3) 50%,var(--color-surface-2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton--text{height:14px;border-radius:var(--radius-sm)}
.skeleton--heading{height:24px;border-radius:var(--radius-sm);width:60%}
.skeleton--card{height:120px;border-radius:var(--radius-lg)}
.skeleton--avatar{width:40px;height:40px;border-radius:var(--radius-circle)}

/* ─── Toast ─── */
.toast-container{position:fixed;top:var(--space-5);right:var(--space-5);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);max-width:360px}
.toast{padding:var(--space-3) var(--space-4);border-radius:var(--radius);font-size:var(--text-sm);font-weight:var(--weight-medium);box-shadow:var(--shadow-lg);animation:toast-in var(--duration-normal) var(--ease-spring) both}
.toast--success{background:var(--color-sea);color:#fff}
.toast--error{background:var(--color-danger);color:#fff}
.toast--info{background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border)}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ─── Modal / Bottom Sheet ─── */
.sheet-backdrop{position:fixed;inset:0;z-index:var(--z-sheet);background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);animation:fade-in var(--duration-normal) both}
.sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:var(--z-sheet);width:100%;max-width:var(--max-content);max-height:80dvh;background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-lg);overflow-y:auto;animation:sheet-up var(--duration-slow) var(--ease-out) both}
.sheet-handle{width:36px;height:4px;border-radius:var(--radius-pill);background:var(--color-border-light);margin:var(--space-3) auto;opacity:0.6}
.sheet-handle:active{opacity:1}
@keyframes sheet-up{from{transform:translateX(-50%) translateY(100%)}to{transform:translateX(-50%) translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* ─── Search Overlay ─── */
.search-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--color-bg);display:flex;flex-direction:column;animation:fade-in var(--duration-normal) both}
.search-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);height:var(--header-height);border-bottom:1px solid var(--color-border)}
.search-input{flex:1;height:44px;border-radius:var(--radius-pill);background:var(--color-surface-2);border:1px solid var(--color-border);padding:0 var(--space-4) 0 40px;font-size:var(--text-md);color:var(--color-text);font-family:inherit}
.search-input:focus{outline:none;border-color:var(--color-baltic);box-shadow:0 0 0 3px rgba(44,200,255,0.1)}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.search-results{flex:1;overflow-y:auto;padding:var(--space-3) var(--space-5)}
.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);cursor:pointer;min-height:56px;transition:background var(--duration-fast)}
.search-result-item:active{background:var(--color-surface-2)}
.search-result-name{font-weight:var(--weight-medium)}
.search-result-meta{font-size:var(--text-sm);color:var(--color-text-secondary)}

/* ─── Responsive ─── */
@media(min-width:768px){
  .app-main{padding:var(--space-8) var(--space-8)}
  .action-bar{justify-content:center;gap:var(--space-3)}
  .action-btn{flex:none;min-width:80px;padding:var(--space-3) var(--space-6)}
  .facility-grid{grid-template-columns:repeat(3,1fr)}
  .vhf-channels{flex-direction:row;flex-wrap:wrap;gap:var(--space-2)}
  .vhf-channel{flex:none}
}

@media(min-width:1024px){
  .app-main{max-width:800px;margin:0 auto}
}

/* ─── Reduced Motion ─── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* ─── Accessibility ─── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--color-baltic);outline-offset:2px}
:focus:not(:focus-visible){outline:none}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-pill)}

/* ─── Selection ─── */
::selection{background:rgba(44,200,255,0.25);color:var(--color-text)}

/* Safe bottom for iPhone */
body{padding-bottom:env(safe-area-inset-bottom)}

/* ─── Leaflet map overrides ─── */
.leaflet-container{background:var(--color-bg)!important;font-family:var(--font-body)!important}
.leaflet-tile-pane{filter:saturate(0.7) brightness(0.85)}