/* Flag-rules builder page (/flags, Phase 5). Loaded only on that page.
   Follows flights.css: base.css keeps body { height:100vh; overflow:hidden },
   so the page scrolls internally in #flags-page, never at body level. */

body { display: flex; flex-direction: column; background: #eef1f5; }

#flags-page { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); }
.fg-container { max-width: 980px; margin: 0 auto; }

.fg-card { background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ── Toolbar ── */
#fg-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.fg-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #667; }
.fg-field select, .fg-field input { padding: 5px 8px; border: 1px solid #ccc; border-radius: var(--radius-md); font-size: 13px; background: #fff; color: #223; }
.fg-field input:focus, .fg-field select:focus { outline: none; border-color: var(--color-accent); }
#fg-count { font-size: 12px; color: #889; margin-left: auto; padding-bottom: 6px; }

.fg-btn { padding: 6px 14px; border: 1px solid #ccc; border-radius: var(--radius-md); background: #f4f6fb; color: #223; font-size: 13px; cursor: pointer; }
.fg-btn:hover { background: #e7ecf6; }
.fg-btn-primary { border: none; background: var(--color-accent); color: #fff; }
.fg-btn-primary:hover { background: var(--color-accent-hover); }
.fg-btn-danger { color: var(--color-severity-red); border-color: #e5b6b6; background: #fdf4f4; }
.fg-btn-danger:hover { background: #f9e3e3; }
.fg-btn:disabled { opacity: 0.5; cursor: default; }

#fg-loading, #fg-empty { text-align: center; color: #889; padding: 40px 0; font-size: 14px; }

/* ── Group sections ── */
.fg-group-header { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-4) 2px var(--space-2); }
.fg-group-label { font-weight: 700; font-size: 13px; color: #223; text-transform: uppercase; letter-spacing: 0.4px; }
.fg-group-count { font-size: 12px; color: #889; }
.fg-group-card { overflow: hidden; }

/* ── Rule rows ── */
.fg-rule { border-bottom: 1px solid #f0f1f5; }
.fg-rule:last-child { border-bottom: none; }
.fg-rule-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
.fg-rule-disabled .fg-rule-main, .fg-rule-disabled .fg-sev { opacity: 0.45; }
.fg-sev { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.fg-sev-caution { color: var(--color-severity-amber); }
.fg-sev-warning { color: var(--color-severity-red); }
.fg-rule-main { flex: 1; min-width: 0; }
.fg-rule-name { font-size: 13px; font-weight: 600; color: #223; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fg-rule-sentence { font-size: 12px; color: #667; margin-top: 1px; }
.fg-rule-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.fg-rule-actions .fg-btn { padding: 3px 10px; font-size: 12px; }

.fg-badge { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.fg-badge-builtin { background: #e7eefb; color: #1a4f9c; }
.fg-badge-fleet { background: #ececec; color: #667; }

/* ── Enabled toggle switch ── */
.fg-switch { position: relative; display: inline-block; width: 34px; height: 18px; flex-shrink: 0; }
.fg-switch input { opacity: 0; width: 0; height: 0; }
.fg-switch-slider { position: absolute; inset: 0; background: #ccc; border-radius: 9px; transition: background 0.15s; cursor: pointer; }
.fg-switch-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 0.15s; }
.fg-switch input:checked + .fg-switch-slider { background: var(--color-severity-green); }
.fg-switch input:checked + .fg-switch-slider::before { transform: translateX(16px); }
.fg-switch input:disabled + .fg-switch-slider { opacity: 0.5; cursor: default; }
.fg-switch input:focus-visible + .fg-switch-slider { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ── Inline editor ── */
.fg-editor { padding: var(--space-3) var(--space-4) var(--space-4); background: #f8fafd; border-top: 1px solid #e4e7ee; }
.fg-new-card .fg-editor { border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.fg-new-card > .fg-group-label { padding: var(--space-3) var(--space-4) 0; }
#fg-new-editor .fg-new-card { margin-bottom: var(--space-4); }
.fg-editor-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); align-items: flex-start; }
.fg-editor .fg-grow { flex: 1; min-width: 180px; }
.fg-editor select[multiple] { min-width: 180px; font-size: 12px; }
.fg-hint { font-size: 10px; color: #99a; margin-top: 2px; }
.fg-editor-error { color: var(--color-severity-red); font-size: 12px; margin-bottom: var(--space-2); }
.fg-editor-btns { display: flex; gap: var(--space-2); }

/* ── Toast ── */
#fg-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #223; color: #fff; padding: 10px 18px; border-radius: var(--radius-lg); font-size: 13px; box-shadow: 0 3px 12px rgba(0,0,0,0.3); z-index: 950; max-width: calc(100vw - 32px); }
#fg-toast.fg-toast-error { background: var(--color-severity-red); }

/* ── Mobile ── */
@media (max-width: 768px) {
    #flags-page { padding: var(--space-2); }
    #fg-toolbar { gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
    #fg-count { display: none; }
    .fg-rule-head { flex-wrap: wrap; padding: var(--space-2) var(--space-3); }
    .fg-rule-actions { margin-left: auto; }
}