/* ==========================================================================
   window-common.css

   Shared design tokens and reusable components for the light-themed
   `.app-window` content panels (Settings, Account, Profile, My Flight,
   Pilot, Customize Pilot, Subscribe, Flight Planner, Download, etc).

   This is NOT used by the taskbar/app-launcher chrome, the Airports map
   HUD, or modal dialogs - those use their own (intentionally dark)
   `--container-*` tokens defined in common.css/index.css.

   Pages opt in to a token by using `var(--win-*)` instead of a literal
   color, and opt in to a component by adding the relevant `.win-*` class
   alongside (or instead of) their own page-specific class.
   ========================================================================== */

:root {
	/* Surfaces */
	--win-bg:           rgb(246, 248, 250);
	--win-card-bg:       white;
	--win-input-bg:      rgb(242, 244, 247);
	--win-chip-bg:       rgb(238, 240, 243);
	--win-subtle-bg:     rgb(245, 247, 249);

	/* Borders */
	--win-border:        rgb(230, 233, 238);
	--win-border-strong: rgb(220, 224, 230);

	/* Text */
	--win-text:          rgb(20, 20, 25);
	--win-text-soft:     rgb(40, 40, 45);
	--win-text-secondary: rgb(110, 118, 130);
	--win-text-muted:    rgb(150, 158, 166);
	--win-text-faint:    rgb(180, 186, 195);

	/* Brand accent (purple) */
	--win-accent:        rgb(150, 105, 230);
	--win-accent-strong:  rgb(120, 80, 200);
	--win-accent-hover:   rgb(140, 95, 220);
	--win-accent-active:  rgb(110, 70, 180);
	--win-accent-text:    rgb(115, 65, 200);
	--win-accent-tint:    rgba(150, 105, 230, 0.1);
	--win-accent-tint-strong: rgba(150, 105, 230, 0.18);

	/* Status colors (text-safe on a light surface) */
	--win-success:       rgb(20, 140, 70);
	--win-success-tint:  rgba(40, 160, 90, 0.12);
	--win-success-border: rgba(40, 160, 90, 0.25);

	--win-danger:        rgb(200, 50, 50);
	--win-danger-tint:   rgba(255, 100, 100, 0.1);
	--win-danger-border:  rgba(255, 100, 100, 0.25);

	--win-warning:       rgb(165, 110, 10);
	--win-warning-tint:  rgba(255, 160, 50, 0.1);
	--win-warning-border: rgba(255, 160, 50, 0.2);

	--win-info:          rgb(50, 100, 190);
	--win-info-tint:     rgba(120, 150, 220, 0.12);
	--win-info-border:    rgba(120, 150, 220, 0.3);

	--win-radius:        8px;
	--win-radius-sm:     6px;
}

/* ── Root container ───────────────────────────────────────────────────────
   Every window's outermost element should set this background/text/font
   combo. Add `.win-root` alongside the page's own root class. */
.win-root {
	background: var(--win-bg);
	color: var(--win-text);
	font-size: 0.9em;
}

/* ── Card ─────────────────────────────────────────────────────────────────
   A bordered, white surface with an optional header/body split. */
.win-card,
.gs-card,
.as-card,
.mp-card {
	border: 1px solid var(--win-border);
	border-radius: var(--win-radius);
	background: var(--win-card-bg);
	overflow: hidden;
}
.win-card-head,
.as-card-head,
.mp-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--win-border);
	font-size: 1em;
	font-weight: 700;
	color: var(--win-text);
}
.win-card-head i,
.as-card-head i,
.mp-card-head i,
.bank-card-head i,
.cp-head i,
.gs-account-link i.fa-user-shield {
	color: var(--win-accent);
}
.win-card-body,
.as-card-body,
.mp-card-body {
	padding: 14px 16px;
}
.win-card-desc,
.as-card-desc,
.cp-preview-meta {
	color: var(--win-text-muted);
	font-size: 0.85em;
}

/* ── Form labels ──────────────────────────────────────────────────────────*/
.win-label,
.as-label,
.cp-label {
	display: block;
	font-size: 0.78em;
	color: var(--win-text-muted);
	margin-bottom: 4px;
}

/* ── Inputs / selects / textareas ─────────────────────────────────────────*/
.win-input,
.as-input,
.cp-input,
.cp-select,
.cp-textarea,
.mf-pos-maxnm,
.mf-pos-input,
.fp-wp-input,
.fp-maxnm-input,
.fp-mode-select {
	width: 100%;
	background: var(--win-input-bg);
	border: 1px solid var(--win-border-strong);
	border-radius: var(--win-radius-sm);
	color: var(--win-text);
	padding: 7px 10px;
	font-size: 0.95em;
	transition: border-color 0.15s;
}
.win-input:focus,
.as-input:focus,
.cp-input:focus, .cp-select:focus, .cp-textarea:focus,
.mf-pos-maxnm:focus,
.mf-pos-input:focus,
.fp-wp-input:focus,
.fp-maxnm-input:focus,
.fp-mode-select:focus {
	outline: none;
	border-color: rgba(150, 105, 230, 0.6);
}
/* Native <select> dropdown option lists ignore the page's color scheme
   on most platforms - force a light option list to match. */
.win-input option,
.cp-select option,
.fp-mode-select option {
	background: white;
	color: var(--win-text);
}

/* ── Buttons ──────────────────────────────────────────────────────────────*/
.win-btn,
.win-btn-primary,
.gs-replay-btn,
.as-btn,
.cp-btn-save,
.mf-btn-primary,
.fp-search-btn {
	background: var(--win-accent-strong);
	border: none;
	border-radius: var(--win-radius);
	color: white;
	font-weight: 600;
	padding: 7px 16px;
	cursor: pointer;
	font-size: 0.86em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.15s;
}
.win-btn:hover:not(:disabled),
.win-btn-primary:hover:not(:disabled),
.gs-replay-btn:hover,
.as-btn:hover:not(:disabled),
.cp-btn-save:hover:not(:disabled),
.mf-btn-primary:hover:not(:disabled),
.fp-search-btn:hover:not(:disabled) {
	background: var(--win-accent-hover);
}
.gs-replay-btn:active {
	background: var(--win-accent-active);
}
.win-btn:disabled,
.win-btn-primary:disabled,
.as-btn:disabled,
.cp-btn-save:disabled,
.mf-btn:disabled,
.fp-search-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.win-btn-outline,
.as-btn-outline,
.mp-customize-btn,
.cp-btn-cancel,
.mf-btn-ghost {
	background: var(--win-input-bg);
	border: 1px solid var(--win-border-strong);
	border-radius: var(--win-radius);
	color: var(--win-text-soft);
	font-weight: 600;
	padding: 7px 16px;
	cursor: pointer;
	font-size: 0.86em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.15s, color 0.15s;
}
.win-btn-outline:hover:not(:disabled),
.as-btn-outline:hover:not(:disabled),
.mp-customize-btn:hover,
.cp-btn-cancel:hover,
.mf-btn-ghost:hover:not(:disabled) {
	background: var(--win-chip-bg);
	color: var(--win-text);
}
.win-btn-outline:disabled,
.as-btn-outline:disabled,
.cp-btn-cancel.disabled,
.mf-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.win-btn-danger,
.mf-btn-danger {
	background: var(--win-danger-tint);
	color: var(--win-danger);
	border: 1px solid var(--win-danger-border);
}
.win-btn-danger:hover:not(:disabled),
.mf-btn-danger:hover:not(:disabled) {
	background: rgba(255, 100, 100, 0.2);
}

/* ── Status alerts / badges ───────────────────────────────────────────────*/
.win-alert,
.as-alert,
.cp-status {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: var(--win-radius);
	font-size: 0.85em;
}
.win-alert-success,
.as-alert-success,
.cp-status,
.as-verified-badge.verified,
.fp-status-found,
.mf-pos-status-found {
	background: var(--win-success-tint);
	border: 1px solid var(--win-success-border);
	color: var(--win-success);
}
.win-alert-error,
.as-alert-error,
.cp-status.error {
	background: var(--win-danger-tint);
	border: 1px solid var(--win-danger-border);
	color: var(--win-danger);
}
.win-alert-warning,
.as-verified-badge.unverified,
.cp-premium-notice,
.fp-status-stuck,
.mf-pos-status-stuck {
	background: var(--win-warning-tint);
	border: 1px solid var(--win-warning-border);
	color: var(--win-warning);
}
.win-alert-info,
.sub-banner-info {
	background: var(--win-info-tint);
	border: 1px solid var(--win-info-border);
	color: var(--win-info);
}

/* ── Avatar / suit-color swatches ─────────────────────────────────────────
   Used by Profile (.mp-avatar) and Customize Pilot (.cp-avatar). The suit
   gradient classes were previously duplicated verbatim in both files. */
.win-avatar,
.mp-avatar,
.cp-avatar {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: white;
	font-weight: bold;
	border: 3px solid var(--win-border-strong);
	flex-shrink: 0;
}
.win-avatar img,
.mp-avatar img,
.cp-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.win-suit-navy,    .mp-suit-navy,    .cp-suit-navy    { background: linear-gradient(135deg, rgb(22, 42, 74), rgb(70, 92, 125)); }
.win-suit-teal,    .mp-suit-teal,    .cp-suit-teal    { background: linear-gradient(135deg, rgb(15, 110, 115), rgb(80, 165, 150)); }
.win-suit-violet,  .mp-suit-violet,  .cp-suit-violet  { background: linear-gradient(135deg, rgb(93, 61, 150), rgb(150, 110, 200)); }
.win-suit-amber,   .mp-suit-amber,   .cp-suit-amber   { background: linear-gradient(135deg, rgb(178, 120, 26), rgb(230, 180, 82)); }
.win-suit-white,   .mp-suit-white,   .cp-suit-white   { background: linear-gradient(135deg, rgb(210, 215, 220), rgb(120, 130, 140)); }
.win-suit-charcoal,.mp-suit-charcoal,.cp-suit-charcoal { background: linear-gradient(135deg, rgb(30, 34, 38), rgb(92, 100, 108)); }
.win-suit-green,   .mp-suit-green,   .cp-suit-green   { background: linear-gradient(135deg, rgb(38, 105, 70), rgb(100, 160, 105)); }
.win-suit-red,     .mp-suit-red,     .cp-suit-red     { background: linear-gradient(135deg, rgb(145, 42, 46), rgb(218, 96, 92)); }