/* =========================================================
   FocusQuality – Manage UI Rules (v0.2.1 LIGHT)
   White background, dark-grey text, red accent
   ========================================================= */
:root {
    /* Palette */
    --bg: #f5f3ef;
    --bg-raised: #ffffff;
    --bg-surface: #ede9e3;
    --bg-hover: #e8e4dd;
    --bg-active: #dedad2;
    --border: #d0cbc2;
    --border-soft: #e0dbd3;
    /* Text */
    --text: #0f1117;
    --text-muted: #6b6660;
    --text-faint: #a09b94;
    /* Brand */
    --red: #892523;
    --red-hover: #a82f2c;
    --red-glow: rgba(137, 37, 35, 0.18);
    --red-subtle: rgba(137, 37, 35, 0.08);
    /* Semantic */
    --green: #16a34a;
    --green-subtle: rgba(22, 163, 74, 0.1);
    --amber: #d97706;
    --amber-subtle: rgba(217, 119, 6, 0.1);
    --blue: #2563eb;
    --blue-subtle: rgba(37, 99, 235, 0.1);
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.18);
    /* Typography */
    --font-mono: 'DM Mono', 'Cascadia Code', monospace;
    /* Sizing */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    /* FQ aliases */
    --fq-maxw: 1680px;
    --fq-bg: #f5f3ef;
    --fq-surface: #ffffff;
    --fq-surface-2: #ede9e3;
    --fq-border: #d0cbc2;
    --fq-border-2: #c4bfb8;
    --fq-text: #0f1117;
    --fq-text-2: #6b6660;
    --fq-accent: #892523;
    --fq-accent-hover: #a82f2c;
    --fq-danger: #b3001b;
    --fq-success: #16a34a;
    --fq-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --fq-shadow: 0 4px 16px rgba(0,0,0,0.12);
    --fq-radius: 6px;
    --fq-radius-sm: 4px;
    --fq-gap: 10px;
    --fq-gap-lg: 16px;
    --fq-pad-lg: 16px;
    --fq-control-h: 40px;
    --fq-fast: 120ms;
    --fq-ease: ease;
    --fq-font: system-ui, -apple-system, sans-serif;
    --fq-font-size: 15px;
    --fq-line: 1.5;
}

/* ===================== Base ===================== */

html, body {
    background: #f5f3ef;
    color: #0f1117;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: #892523;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* Smooth transitions (respect reduced motion) */
.fq-btn,
.fq-input,
.fq-select,
.fq-card,
.fq-section,
.fq-listrow,
.fq-tablewrap,
.fq-modal {
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .fq-btn,
    .fq-input,
    .fq-select,
    .fq-card,
    .fq-section,
    .fq-listrow,
    .fq-tablewrap,
    .fq-modal {
        transition: none !important;
    }
}

/* ===================== Layout ===================== */

.fq-page {
    width: min(100%);
    margin-inline: auto;
    padding-inline: clamp(14px, 2.4vw, 28px);
    padding-block: clamp(10px, 1.6vw, 22px);
}

/* Header */
.fq-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 10px 0;
}

.fq-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    line-height: 1.15;
}

.fq-subtitle {
    margin: 6px 0 0 0;
    color: #6b6660;
    font-size: 14px;
}

/* ===================== Surfaces / Cards ===================== */

.fq-surface-card {
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 12px;
    margin-bottom: 16px;
}

.fq-card {
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 16px;
}

    .fq-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        transform: translateY(-1px);
    }

.fq-card-title {
    font-weight: 900;
    margin: 0 0 8px 0;
}

.fq-card-meta {
    color: #6b6660;
    font-size: 14px;
    margin: 0 0 10px 0;
}

.fq-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* Cards grid */
.fq-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 720px) {
    .fq-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1150px) {
    .fq-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================== Controls ===================== */

.fq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}

.fq-label {
    font-size: 13px;
    color: #6b6660;
}

.fq-label-inline {
    font-size: 13px;
    color: #6b6660;
    margin-right: 8px;
}

.fq-input,
.fq-select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d0cbc2;
    border-radius: 4px;
    background: #ffffff;
    color: #0f1117;
    outline: none;
}

    .fq-input:focus,
    .fq-select:focus {
        border-color: #892523;
        box-shadow: 0 0 0 4px rgba(137,37,35,0.14);
    }

    .fq-input:focus-visible,
    .fq-select:focus-visible,
    .fq-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(137,37,35,0.14);
    }

.fq-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 6px;
}

/* ===================== Buttons ===================== */

.fq-btn {
    height: 40px;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid #c4bfb8;
    background: #ffffff;
    color: #0f1117;
    cursor: pointer;
    white-space: nowrap;
}

    .fq-btn:hover {
        background: #ede9e3;
    }

    .fq-btn:active {
        transform: translateY(1px);
    }

    .fq-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.fq-btn-primary {
    background: #892523;
    border-color: #892523;
    color: #fff;
}

    .fq-btn-primary:hover {
        background: #a82f2c;
        border-color: #a82f2c;
    }

.fq-btn-danger {
    background: #fff;
    border-color: #b3001b;
    color: #b3001b;
}

    .fq-btn-danger:hover {
        background: rgba(179,0,27,0.06);
    }

.fq-btn-small {
    height: 36px;
    padding: 0 10px;
    font-size: 0.92rem;
}

.fq-btn-success {
    background: #1f9d55;
    border-color: #1f9d55;
    color: #fff;
}

.fq-btn-warning {
    background: #dd6b20;
    border-color: #dd6b20;
    color: #fff;
}

.fq-btn-ghost {
    background: transparent;
    border: 1px solid #d0cbc2;
}

.fq-btn-big {
    height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    font-weight: 800;
}

/* ===================== Segmented control ===================== */

.fq-seg {
    display: inline-flex;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    background: rgba(0,0,0,.03);
}

    .fq-seg button {
        border: 0;
        background: transparent;
        padding: 8px 12px;
        border-radius: 999px;
        cursor: pointer;
        color: #0f1117;
    }

        .fq-seg button[aria-pressed="true"] {
            background: rgba(0,0,0,.12);
            font-weight: 700;
        }

/* ===================== Sections ===================== */

.fq-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fq-section {
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: clamp(12px, 1.2vw, 18px);
}

.fq-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.fq-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
}

.fq-section-sub {
    margin: 6px 0 0 0;
    color: #6b6660;
    font-size: 14px;
}

/* ===================== Responsive Form Grid ===================== */

.fq-formgrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

    .fq-formgrid > * {
        min-width: 0;
    }

.fq-span-12 {
    grid-column: span 12;
}

.fq-span-6 {
    grid-column: span 6;
}

.fq-span-4 {
    grid-column: span 4;
}

.fq-span-3 {
    grid-column: span 3;
}

@media (max-width: 900px) {
    .fq-span-6, .fq-span-4, .fq-span-3 {
        grid-column: span 12;
    }
}

/* Back-compat grid classes */
.fq-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.fq-col-12 {
    grid-column: span 12;
}

.fq-col-6 {
    grid-column: span 6;
}

.fq-col-3 {
    grid-column: span 3;
}

@media (max-width: 900px) {
    .fq-col-6, .fq-col-3 {
        grid-column: span 12;
    }
}

/* ===================== Inline actions ===================== */

.fq-inline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ===================== Chips ===================== */

.fq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    background: #ede9e3;
    align-items: center;
}

.fq-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
}

.fq-chip-x {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    color: #6b6660;
}

.fq-chip-input {
    flex: 1;
    min-width: 220px;
    height: 38px;
    border: 0;
    outline: none;
    background: transparent;
}

/* ===================== Site assignment ===================== */

.fq-assign {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fq-assign-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    background: #ede9e3;
    min-height: 52px;
}

.fq-assign-empty {
    color: #6b6660;
    font-size: 14px;
}

.fq-assign-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    font-size: 14px;
    line-height: 1;
}

.fq-assign-chip-name {
    white-space: nowrap;
}

.fq-assign-chip-remove {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    color: #6b6660;
}

    .fq-assign-chip-remove:hover {
        color: #b3001b;
    }

.fq-assign-add {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ===================== Tables ===================== */

.fq-tablewrap {
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.fq-table {
    width: 100%;
    border-collapse: collapse;
}

    .fq-table th,
    .fq-table td {
        padding: 12px;
        border-bottom: 1px solid #d0cbc2;
        text-align: left;
        vertical-align: middle;
    }

    .fq-table th {
        background: #ede9e3;
        font-size: 13px;
        color: #6b6660;
        font-weight: 800;
    }

    .fq-table tr:last-child td {
        border-bottom: 0;
    }

    .fq-table tbody tr:hover {
        filter: brightness(0.98);
    }

/* Mission row states */
.fq-row-started {
    background-color: #f3f3f3;
}

.fq-row-opened {
    background-color: #fff8dc;
}

.fq-row-finished {
    background-color: #e8f5e9;
}

.fq-row-cancelled {
    background-color: #fdecea;
}

/* Mobile table scrolling */
@media (max-width: 820px) {
    .fq-tablewrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fq-table {
        min-width: 820px;
    }
}

/* ===================== Messages / hints ===================== */

.fq-error {
    margin-top: 10px;
    color: #b3001b;
    font-weight: 700;
}

.fq-ok {
    margin-top: 6px;
    color: #16a34a;
    font-weight: 700;
}

.fq-hint {
    display: block;
    margin-top: 6px;
    color: #6b6660;
    font-size: 13px;
}

/* ===================== Actions bar ===================== */

.fq-actions {
    position: static;
    z-index: 50;
    margin-top: 16px;
    padding: 12px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: transparent;
    border-top: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 899px) {
    .fq-actions {
        margin-top: 24px;
        padding: 16px 0;
        border-top: 2px solid rgba(0,0,0,0.08);
    }
}

/* Mobile: show bottom actions, hide header actions */
.fq-client-header-actions {
    display: none;
}

.fq-actions {
    display: flex;
}

@media (min-width: 900px) {
    .fq-client-header-actions {
        display: inline-flex;
    }

    .fq-actions {
        display: none;
    }
}

/* ===================== Modal ===================== */

.fq-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    z-index: 9999;
}

.fq-modal {
    width: min(720px, 100%);
    max-height: 85vh;
    overflow: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 12px;
}

.fq-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fq-modal-body {
    padding: 10px 0;
}

.fq-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.fq-preview {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 10px;
    background: rgba(0,0,0,0.02);
}

/* ===================== Controls bar ===================== */

.fq-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.fq-search {
    flex: 1;
    min-width: 240px;
}

.fq-input-search {
    width: 100%;
}

.fq-control-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Empty state */
.fq-empty {
    border: 1px dashed rgba(0,0,0,0.16);
    border-radius: 6px;
    padding: 16px;
    background: rgba(0,0,0,0.02);
}

/* ===================== List rows ===================== */

.fq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fq-listrow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
}

    .fq-listrow:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }

    .fq-listrow:active {
        transform: translateY(0px);
    }

.fq-listrow-main {
    min-width: 0;
}

.fq-listrow-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fq-name {
    font-weight: 900;
    overflow-wrap: anywhere;
}

.fq-muted {
    color: #6b6660;
    overflow-wrap: anywhere;
}

.fq-dot {
    opacity: .55;
    padding: 0 6px;
}

.fq-listrow-sub {
    margin-top: 6px;
    color: #6b6660;
    font-size: 14px;
}

.fq-listrow-actions {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

@media (max-width: 820px) {
    .fq-listrow {
        grid-template-columns: 1fr;
    }

    .fq-listrow-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ===================== Pills / status ===================== */

.fq-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.08);
}

    .fq-pill.ok {
        background: rgba(31,122,31,0.10);
        border-color: rgba(31,122,31,0.25);
    }

    .fq-pill.muted {
        background: rgba(0,0,0,0.04);
    }

    .fq-pill.fq-pill-shift {
        background: rgba(137,37,35,0.08);
        border-color: rgba(137,37,35,0.20);
    }

/* ===================== Chip mini (rate cards etc.) ===================== */

.fq-chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.fq-chip-mini {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
}

    .fq-chip-mini.active {
        background: rgba(137,37,35,0.08);
        border-color: rgba(137,37,35,0.22);
    }

    .fq-chip-mini.inactive {
        background: rgba(0,0,0,0.03);
    }

    .fq-chip-mini.more {
        background: rgba(0,0,0,0.06);
    }

/* ===================== Table vs Cards view ===================== */

.fq-view-table .fq-cards {
    display: none;
}

.fq-view-cards .fq-tablewrap {
    display: none;
}

/* ===================== Page wide ===================== */

.fq-page-wide {
    width: min(100%, 1680px);
    margin-inline: auto;
    padding-inline: clamp(14px, 2.4vw, 28px);
    padding-block: clamp(10px, 1.6vw, 22px);
}

/* ===================== Client header ===================== */

.fq-client-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0 14px 0;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.fq-client-title {
    margin: 0;
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 950;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

@media (max-width: 520px) {
    .fq-client-header {
        flex-direction: column;
        align-items: stretch;
    }

    .fq-client-header-actions .fq-btn {
        width: 100%;
    }
}

/* ===================== Client columns ===================== */

.fq-client-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.fq-client-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

@media (min-width: 1100px) {
    .fq-client-cols {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        align-items: start;
    }

    .fq-client-col {
        gap: 18px;
    }
}

/* ===================== Panels ===================== */

.fq-panel {
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: clamp(12px, 1.1vw, 18px);
}

.fq-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.fq-panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
}

/* ===================== Switch ===================== */

.fq-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    cursor: pointer;
}

    .fq-switch input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

.fq-switch-ui {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.14);
    background: rgba(0,0,0,0.06);
    position: relative;
    transition: background-color 120ms ease, border-color 120ms ease;
}

    .fq-switch-ui::after {
        content: "";
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.10);
        position: absolute;
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        transition: transform 120ms ease;
    }

.fq-switch-text {
    font-size: 13px;
    color: #6b6660;
    font-weight: 700;
}

.fq-switch input:checked + .fq-switch-ui {
    background: rgba(137,37,35,0.18);
    border-color: rgba(137,37,35,0.30);
}

    .fq-switch input:checked + .fq-switch-ui::after {
        transform: translate(18px, -50%);
    }

/* ===================== CS assignment ===================== */

.fq-cs-assign {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: end;
}

    .fq-cs-assign .fq-field {
        flex: 1 1 260px;
        min-width: 0;
    }

/* ===================== Two-pane split ===================== */

.fq-split {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.fq-split-side,
.fq-split-main {
    min-width: 0;
}

@media (min-width: 981px) {
    .fq-split-side {
        position: sticky;
        top: 12px;
        max-height: calc(100vh - 24px);
        overflow: auto;
        padding-right: 4px;
    }
}

@media (max-width: 980px) {
    .fq-split {
        grid-template-columns: 1fr;
    }

    .fq-split-side {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .fq-split-main {
        display: none;
    }

    .fq-inline-details {
        display: block;
    }
}

.fq-inline-details {
    display: none;
}

@media (max-width: 980px) {
    .fq-inline-details .fq-panel {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

/* ===================== Nav list / nav cards ===================== */

.fq-navlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fq-navitem {
    text-align: left;
    width: 100%;
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 12px;
    cursor: pointer;
}

    .fq-navitem:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        transform: translateY(-1px);
    }

    .fq-navitem.is-active {
        border-color: rgba(137,37,35,0.35);
        box-shadow: 0 0 0 4px rgba(137,37,35,0.10);
    }

.fq-navitem-title {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.fq-navitem-sub {
    margin-top: 6px;
    font-size: 14px;
    color: #6b6660;
    overflow-wrap: anywhere;
}

.fq-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.fq-nav-meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.fq-nav-code {
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.fq-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.fq-navcard {
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 14px;
    cursor: pointer;
    min-width: 0;
}

    .fq-navcard:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        transform: translateY(-1px);
    }

    .fq-navcard.is-active {
        border-color: rgba(137,37,35,0.35);
        box-shadow: 0 0 0 4px rgba(137,37,35,0.10);
    }

.fq-navcard-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
}

.fq-navcard .fq-name {
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.fq-navcard-meta {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.fq-navcard-code {
    margin-top: 8px;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .fq-navcard-meta,
    .fq-navcard-code {
        display: none;
    }

    .fq-navcard {
        padding: 12px 14px;
    }
}

/* ===================== Stepper ===================== */

.fq-stepper {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0 16px 0;
}

.fq-step {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid #d0cbc2;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
}

    .fq-step:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .fq-step.is-active {
        border-color: rgba(137,37,35,0.35);
        box-shadow: 0 0 0 4px rgba(137,37,35,0.10);
    }

    .fq-step.is-done {
        border-color: rgba(31,122,31,0.35);
    }

.fq-step-num {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(0,0,0,.04);
}

.fq-step.is-active .fq-step-num {
    background: rgba(137,37,35,0.14);
    border-color: rgba(137,37,35,0.28);
}

.fq-step-text {
    font-weight: 800;
    font-size: 14px;
}

.fq-step-line {
    flex: 1 1 40px;
    height: 2px;
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
}

.fq-step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.fq-textarea {
    height: auto;
    padding: 10px 12px;
}

.fq-review {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 520px) {
    .fq-step {
        width: 100%;
        justify-content: flex-start;
    }

    .fq-step-line {
        display: none;
    }

    .fq-step-actions .fq-btn {
        width: 100%;
    }
}

/* ===================== Header actions / dropdown ===================== */

.fq-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fq-dropdown {
    position: relative;
}

.fq-dropdown-menu {
    position: absolute;
    top: 110%;
    right: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 20;
}

.fq-dropdown-item {
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: #0f1117;
}

    .fq-dropdown-item:hover:not(:disabled) {
        background: #ede9e3;
    }

    .fq-dropdown-item.danger {
        color: #b3001b;
    }

    .fq-dropdown-item:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.fq-dropdown-separator {
    height: 1px;
    background: #d0cbc2;
    margin: 6px 0;
}

/* ===================== Pagination ===================== */

.fq-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

/* ===================== Responsive show/hide ===================== */

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 900px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }
}

/* ===================== Autocomplete ===================== */

.fq-autocomplete {
    position: relative;
}

.fq-autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #d0cbc2;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    max-height: 260px;
    overflow-y: auto;
}

.fq-autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: #0f1117;
}

    .fq-autocomplete-item:hover {
        background: #ede9e3;
    }

.fq-autocomplete-main {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fq-autocomplete-sub {
    font-size: 12px;
    color: #6b6660;
}