/* SkyOps Companion - In-Game Panel Styles
 *
 * Chrome frame integration: rules below mirror bymaximus/msfs2020-toolbar-window-template
 * which renders a complete native chrome (frame + title bar + window buttons all
 * inside the translucent rounded border) in MSFS 2024. Key invariants:
 *   - DO NOT set width/height on the <skyops-companion-panel> wrapper -
 *     MSFS sizes that element as the OUTER chrome box (frame + title bar +
 *     content). Forcing 100% on it pushes our content over the title-bar
 *     region, which is why the title used to float outside the frame.
 *   - DO size <ingame-ui> 100% with !important - this is the CONTENT box
 *     (already inside the chrome's frame, below the chrome's title bar).
 *   - #skyops-container inherits that 100% and supplies the panel body
 *     background. Background uses transparency-aware tones so the chrome
 *     frame's translucent edge stays visible.
 */
skyops-companion-panel {
    display: block;
    font-family: 'Roboto', sans-serif;
    color: #e0e0e0;
}

ingame-ui#SkyOpsCompanion {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

/* bymaximus chrome wrappers - these are the flex rules the template applies so
   MSFS's injected content boxes (.ingameUiContent / .ingameUiWrapper) and our
   #SkyOpsCompanionWrap fill the chrome frame correctly. Missing these is what
   left the old structure chromeless. The iframe is part of the proven shell but
   we don't use it (our UI is native HTML in #skyops-container), so it's hidden. */
ingame-ui#SkyOpsCompanion #SkyOpsCompanionWrap {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    align-items: stretch !important;
    flex: 1 1 auto !important;
}
ingame-ui#SkyOpsCompanion #SkyOpsCompanionWrap #SkyOpsCompanionIframe {
    display: none;
}
ingame-ui#SkyOpsCompanion #MainDisplay.hidden { display: none; }
ingame-ui#SkyOpsCompanion #Footer.hidden { display: none; }
ingame-ui#SkyOpsCompanion .ingameUiContent {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
}
ingame-ui#SkyOpsCompanion .ingameUiWrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
}

#skyops-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 12px;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.92) 0%, rgba(22, 27, 34, 0.92) 100%);
    box-sizing: border-box;
    gap: 10px;
    position: relative;
}

/* Status strip - sits right under the native MSFS title bar. We don't
   re-render the panel title here (the native bar already shows
   "SkyOps Companion"), only the live connection state + version pill. */
#skyops-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    font-size: 11px;
}

#skyops-version {
    margin-left: auto;
    font-size: 10px;
    color: #8b949e;
    letter-spacing: 0.4px;
}

#skyops-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

#status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

#status-dot.connected {
    background: #3fb950;
    box-shadow: 0 0 6px rgba(63, 185, 80, 0.5);
}

#status-dot.disconnected {
    background: #8b949e;
}

#status-text {
    color: #8b949e;
}

/* Tabs - INFOS / CARTE */
#skyops-tabs {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}
.sk-tab {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #8b949e;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}
.sk-tab:hover { color: #c9d1d9; }
.sk-tab.active {
    color: #0b0f17;
    background: #d4af37;
    border-color: #d4af37;
}

/* Panes - info scrolls with the container, map fills remaining height */
.sk-pane { display: none; }
.sk-pane[data-pane="info"].active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
}
.sk-pane[data-pane="map"].active {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}
#skyops-map-frame {
    width: 100%;
    height: 100%;
    min-height: 260px;
    border: 0;
    border-radius: 6px;
    background: #0e1320;
}

/* Panel sections */
.panel-section {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #d4af37;
    margin-bottom: 8px;
}

/* Info grid */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label {
    font-size: 10px;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 15px;
    font-weight: 500;
    color: #e6edf3;
    font-variant-numeric: tabular-nums;
}

/* Mission section */
.placeholder-text {
    font-size: 12px;
    color: #484f58;
    text-align: center;
    padding: 16px 0;
    font-style: italic;
}

.hidden {
    display: none;
}

/* Sprint 2 - Mission active block */
.next-wp {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(56, 139, 253, 0.08);
    border-left: 2px solid #388bfd;
    border-radius: 3px;
}
.next-wp .info-label {
    flex: 0 0 auto;
}
.next-wp .info-value {
    flex: 1 1 auto;
}
.info-value-secondary {
    font-size: 12px;
    color: #8b949e;
    font-variant-numeric: tabular-nums;
}
#mission-progress-bar-wrap {
    margin-top: 8px;
    height: 4px;
    background: #21262d;
    border-radius: 2px;
    overflow: hidden;
}
#mission-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #388bfd 0%, #3fb950 100%);
    transition: width 0.5s ease;
}

/* Waypoint list (bridge-driven, fed by companion.json) */
.wp-list {
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 6px;
}

.waypoint-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 11px;
}

.waypoint-item:last-child {
    border-bottom: none;
}

.waypoint-item.next {
    background: rgba(212, 175, 55, 0.06);
    border-left: 2px solid #d4af37;
    padding-left: 6px;
}

.wp-status {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #484f58;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
}

.wp-status.done {
    border-color: #3fb950;
    background: rgba(63, 185, 80, 0.15);
    color: #3fb950;
}

.wp-status.next {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.15);
    color: #d4af37;
    animation: pulse 2s infinite;
}

.wp-name {
    flex: 1;
    color: #e6edf3;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-name.faded { color: #8b949e; }

.wp-flag {
    flex-shrink: 0;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #8b949e;
    background: rgba(255, 255, 255, 0.06);
}
.wp-flag.req { color: #ff9800; background: rgba(255, 152, 0, 0.12); }
.wp-flag.legstop { color: #58a6ff; background: rgba(88, 166, 255, 0.12); }

/* Mission objectives - in-game scenario points (drop, hot, landing, etc.) */
.objectives-list {
    margin-top: 10px;
    border-top: 1px dashed rgba(212, 175, 55, 0.25);
    padding-top: 8px;
}
.objectives-list .ol-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #d4af37;
    margin-bottom: 6px;
    font-weight: 600;
}
.objective-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
    margin-bottom: 5px;
    border-left: 3px solid #42a5f5;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 3px 3px 0;
    font-size: 11px;
}
.objective-item.type-flyby         { border-left-color: #42a5f5; }
.objective-item.type-overfly_below { border-left-color: #66bb6a; }
.objective-item.type-drop          { border-left-color: #26c6da; }
.objective-item.type-landing       { border-left-color: #ffa726; }
.objective-item.type-hot_zone      {
    border-left-color: #ef5350;
    background: rgba(239, 83, 80, 0.06);
}
.objective-item .oi-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.objective-item .oi-name {
    flex: 1;
    color: #e6edf3;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.objective-item .oi-type {
    font-size: 8px;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    color: #fff;
}
.oi-type.t-flyby         { background: #42a5f5; }
.oi-type.t-overfly_below { background: #66bb6a; }
.oi-type.t-drop          { background: #26c6da; color: #0d1117; }
.oi-type.t-landing       { background: #ffa726; color: #0d1117; }
.oi-type.t-hot_zone      { background: #ef5350; }
.objective-item .oi-desc {
    font-size: 10px;
    color: #b0b8c1;
    line-height: 1.3;
}
.objective-item .oi-conds {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.objective-item .oi-cond {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 2px;
    color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
    letter-spacing: .3px;
}

/* V3 live objectives - status-coloured verdicts from the GraphRunner */
.v3-obj {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
    margin-bottom: 5px;
    border-left: 3px solid #d29922;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 3px 3px 0;
    font-size: 11px;
    transition: border-color .2s ease, background .2s ease;
}
.v3-obj.s-passed  { border-left-color: #3fb950; background: rgba(63, 185, 80, 0.08); }
.v3-obj.s-failed  { border-left-color: #ef5350; background: rgba(239, 83, 80, 0.08); }
.v3-obj.s-pending { border-left-color: #d29922; }
.v3-obj.s-inconclusive { border-left-color: #6e7681; }
.v3-badge {
    font-size: 8px;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    color: #0d1117;
    background: #d29922;
}
.v3-badge.s-passed  { background: #3fb950; color: #0d1117; }
.v3-badge.s-failed  { background: #ef5350; color: #fff; }
.v3-badge.s-pending { background: #d29922; color: #0d1117; }
.v3-badge.s-inconclusive { background: #6e7681; color: #fff; }
.v3-log {
    margin-top: 4px;
    font-size: 9px;
    color: #8b949e;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .2px;
    word-break: break-word;
}

/* Section title row - for sections with a right-aligned control (lang toggle) */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.section-title-row .section-title {
    margin-bottom: 0;
}
.lang-toggle {
    display: inline-flex;
    gap: 2px;
}
.lang-btn {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #8b949e;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .5px;
    text-transform: uppercase;
    user-select: none;
    transition: all .15s ease;
}
.lang-btn.active {
    color: #d4af37;
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.12);
}

/* Briefing blocks */
.briefing-block {
    margin-bottom: 10px;
}
.briefing-block:last-child { margin-bottom: 0; }
.briefing-block .bb-title {
    font-size: 10px;
    font-weight: 600;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 4px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.briefing-block .bb-title::before {
    content: "▾";
    font-size: 9px;
    transition: transform .15s ease;
}
.briefing-block.collapsed .bb-title::before {
    transform: rotate(-90deg);
}
.briefing-block .bb-body {
    font-size: 11px;
    line-height: 1.45;
    color: #c9d1d9;
    white-space: pre-wrap;
    padding: 4px 0 0 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.04);
    margin-left: 3px;
}
.briefing-block.collapsed .bb-body {
    display: none;
}

/* Debrief card */
#debrief-content .dc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin-bottom: 8px;
}
#debrief-content .dc-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#debrief-content .dc-label {
    font-size: 9px;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: .5px;
}
#debrief-content .dc-value {
    font-size: 13px;
    color: #e6edf3;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
#debrief-content .dc-grade {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-weight: 700;
    color: #0d1117;
    background: #3fb950;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
#debrief-content .dc-score-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
#debrief-content .dc-pirep {
    font-size: 10px;
    color: #8b949e;
    margin-top: 4px;
    font-style: italic;
}
#debrief-content .dc-warn {
    font-size: 10px;
    color: #ef5350;
    margin-top: 4px;
    font-weight: 600;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Footer */
#skyops-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #484f58;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Bridge self-diagnostic line - own row, wraps, never touched by update(). */
#bridge-diag {
    font-size: 9px;
    line-height: 1.3;
    color: #6e7681;
    padding-top: 4px;
    word-break: break-word;
}
#bridge-diag.ok   { color: #3fb950; }
#bridge-diag.warn { color: #d29922; }
#bridge-diag.err  { color: #f85149; }
#bridge-diag.hidden { display: none; }

/* Sprint 4 - Cinematic toggle button (Coherent GT-friendly, clickable) */
#cinematic-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #8b949e;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: all .15s ease;
}
#cinematic-toggle:hover {
    background: rgba(212,175,55,.08);
    border-color: rgba(212,175,55,.4);
}
#cinematic-toggle.active {
    color: #d4af37;
    border-color: rgba(212,175,55,.6);
    background: rgba(212,175,55,.1);
}
#cinematic-toggle .ct-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #484f58;
    transition: all .15s ease;
    flex-shrink: 0;
}
#cinematic-toggle.active .ct-dot {
    background: #d4af37;
    box-shadow: 0 0 4px #d4af37;
}

/* Manual cameras toolbar (ChasePlane-style sticky preset buttons) */
#skyops-cams {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 4px;
    border-top: 1px solid rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
#skyops-cams .cam-btn {
    flex: 1 1 0;
    min-width: 52px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8b949e;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    transition: all .15s ease;
}
#skyops-cams .cam-btn:hover {
    background: rgba(212,175,55,.08);
    border-color: rgba(212,175,55,.4);
    color: #d4af37;
}
#skyops-cams .cam-btn.active {
    color: #0d1117;
    background: #d4af37;
    border-color: #d4af37;
    box-shadow: 0 0 6px rgba(212,175,55,.45);
}
#skyops-cams .cam-btn .cb-icon {
    font-size: 13px;
    line-height: 1;
}
#skyops-cams .cam-btn.cam-reset {
    color: #8b949e;
    background: rgba(255,255,255,.02);
}
#skyops-cams .cam-btn.cam-reset:hover {
    background: rgba(63,185,80,.1);
    border-color: rgba(63,185,80,.4);
    color: #3fb950;
}

/* Sprint 5 - Notifications (inline banner under header, always visible) */
#skyops-notifs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}
#skyops-notifs:empty {
    display: none;
}

.skyops-notif {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #e6edf3;
    background: rgba(13, 17, 23, 0.95);
    border-left: 3px solid #388bfd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    letter-spacing: .3px;
}

.skyops-notif.visible {
    opacity: 1;
    transform: translateY(0);
}

.skyops-notif .sn-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.skyops-notif .sn-msg {
    flex: 1 1 auto;
    line-height: 1.25;
}

.skyops-notif.type-success { border-left-color: #3fb950; }
.skyops-notif.type-success .sn-icon { color: #3fb950; }

.skyops-notif.type-warning { border-left-color: #ff9800; }
.skyops-notif.type-warning .sn-icon { color: #ff9800; }

.skyops-notif.type-danger  { border-left-color: #ef5350; }
.skyops-notif.type-danger .sn-icon  { color: #ef5350; }

.skyops-notif.type-info    { border-left-color: #388bfd; }
.skyops-notif.type-info .sn-icon    { color: #388bfd; }

.skyops-notif.type-objective { border-left-color: #d4af37; }
.skyops-notif.type-objective .sn-icon { color: #d4af37; }