/* ===== Khangouloot Capitaliste — layout du marché ===== */

/* variables utilisées par les modales (non définies dans balec.css) */
:root {
    --color-background-primary: var(--card-bg);
    --color-background-secondary: var(--header-bg);
    --color-text-primary: var(--text);
    --color-text-secondary: #6b5440;
    --color-border-secondary: var(--border);
    --color-border-tertiary: rgba(141, 110, 80, 0.4);
    --border-radius-md: 6px;
    --border-radius-lg: 10px;
}

.mk { max-width: 1600px; overflow-x: visible; }
.mk h2 { margin: 0; font-size: 1.25rem; }

/* --- barre d'outils --- */
.mk-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px; margin: 12px 0;
}
.mk-seasons { display: flex; gap: 4px; }
.mk-seasons button { background: var(--card-bg); color: var(--text); }
.mk-seasons button.active { background: var(--accent); color: #fff; }
.mk-active-ship { font-size: 0.95rem; }
.mk-active-ship a { color: var(--accent); }

/* --- grille 3 colonnes --- */
.mk-layout {
    display: grid;
    grid-template-columns: minmax(300px, 1.1fr) minmax(220px, 0.8fr) minmax(360px, 1.6fr);
    gap: 14px;
    align-items: start;
}
@media (max-width: 1100px) {
    .mk-layout { grid-template-columns: 1fr 1fr; }
    .mk-market { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .mk-layout { grid-template-columns: 1fr; }
}

.mk-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    padding: 12px;
    min-width: 0;
}
.mk-fleet, .mk-places { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; }
.mk-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border-bottom: 1px solid var(--color-border-tertiary); padding-bottom: 8px; margin-bottom: 10px;
}

/* --- boutons --- */
.mk-btn-small { padding: 3px 9px; font-size: 0.85rem; border-radius: 5px; }
.mk-btn-small:hover { transform: none; }
.mk-btn-accent { background: var(--accent); }
.mk button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.mk-close { cursor: pointer; padding: 0 4px; }
.mk-close:hover { color: var(--error); }

.mk-muted { font-size: 0.82rem; color: var(--color-text-secondary); }
.mk-empty { font-style: italic; color: var(--color-text-secondary); padding: 8px 0; }
.mk-empty-big { text-align: center; padding: 60px 10px; }
.mk-badge {
    display: inline-block; font-size: 0.72rem; padding: 1px 7px; border-radius: 10px;
    background: #F1EFE8; color: #444441; margin-right: 4px; vertical-align: middle;
}

/* --- carte navire --- */
.mk-ship {
    border: 1px solid var(--color-border-tertiary);
    border-radius: 8px; margin-bottom: 10px; background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.mk-ship.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.25); }
.mk-ship-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.mk-radio {
    width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); flex: none;
}
.mk-ship.active .mk-radio { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px #fff; }
.mk-ship-title { flex: 1; min-width: 0; }
.mk-ship-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ship-sub { font-size: 0.8rem; color: var(--color-text-secondary); }
.mk-cash { font-size: 0.85rem; white-space: nowrap; }
.mk-cash.pos { color: var(--success); }
.mk-cash.neg { color: var(--error); }

.mk-ship-stats { padding: 0 10px 6px; display: grid; gap: 3px; font-size: 0.82rem; }
.mk-gauge { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 6px; }
.mk-bar { height: 6px; background: var(--header-bg); border-radius: 3px; overflow: hidden; }
.mk-bar > div { height: 100%; background: var(--success); }
.mk-bar > div.over { background: var(--error); }

.mk-ship-actions { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 8px; }
.mk-cargo { border-top: 1px dashed var(--color-border-tertiary); padding: 6px 10px; }
.mk-cargo-row {
    display: flex; justify-content: space-between; align-items: center; gap: 6px;
    padding: 5px 0; border-bottom: 1px solid rgba(141, 110, 80, 0.15);
}
.mk-cargo-row:last-child { border-bottom: none; }
.mk-cargo-info { min-width: 0; font-size: 0.88rem; }
.mk-cargo-actions { display: flex; flex-direction: column; gap: 3px; flex: none; }
.mk-cargo-actions .gain { background: #dcefd2; color: #234; border-color: var(--success); }
.mk-cargo-actions .loss { background: #f3d6d6; color: #400; border-color: var(--error); }

/* --- emplacements --- */
.mk-search {
    width: 100%; box-sizing: border-box; padding: 6px 8px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: 5px; font-family: inherit; background: #fff;
}
.mk-places .region-container { width: auto; }
.mk-places .region > .name { cursor: pointer; text-decoration: none; font-weight: bold; padding: 3px 0; }
.mk-places .region > .name:hover { color: var(--accent); }
.mk-places .settlement { margin: 1px 0 1px 12px; padding: 1px 6px; border-radius: 4px; cursor: pointer; }
.mk-places .settlement.visible { display: block; width: auto; }
.mk-places .settlement:hover { background: var(--item-hover); }
.mk-places .settlement.selected { background: var(--accent); color: #fff; }
.mk-docked { font-size: 0.8rem; margin-left: 4px; }

/* --- marché --- */
.mk-settlement-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 4px; }
.mk-docked-ships { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.mk-chip {
    padding: 2px 10px; font-size: 0.85rem; border-radius: 12px;
    background: var(--card-bg); color: var(--text);
}
.mk-chip.away { opacity: 0.65; }
.mk-chip.active { background: var(--accent); color: #fff; opacity: 1; }
.mk-chip:hover { transform: none; }

.mk-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.mk-table th {
    text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-secondary); border-bottom: 1px solid var(--border); padding: 4px 6px;
}
.mk-table td { padding: 5px 6px; border-bottom: 1px solid rgba(141, 110, 80, 0.15); }
.mk-table tbody tr:hover { background: var(--item-hover); }
.mk-table .num { text-align: right; white-space: nowrap; }

/* --- modales --- */
.mk .modal-overlay {
    position: fixed; inset: 0; min-height: 0; width: auto; padding: 1rem;
    background: rgba(44, 24, 16, 0.55); z-index: 100; border-radius: 0;
}
.mk .modal-overlay.hide { display: none; }
.mk .modal {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg);
    width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow);
}
/* le contenu défile, l'en-tête et les boutons d'action restent visibles */
.mk .modal > .modal-header, .mk .modal > .modal-footer { position: sticky; z-index: 1; background: var(--card-bg); }
.mk .modal > .modal-header { top: 0; }
.mk .modal > .modal-footer { bottom: 0; }
.mk .modal-footer button { white-space: nowrap; flex-shrink: 0; }
/* caisse avant → après : le texte passe à la ligne plutôt que de pousser les boutons hors de la fenêtre */
.mk .modal-footer .mk-cash { white-space: normal; flex: 1 1 auto; min-width: 0; }
.mk-field { margin: 10px 0; display: grid; gap: 3px; }
.mk-field input, .mk-field select, .mk-inline input, .mk-inline select {
    padding: 5px 7px; border: 1px solid var(--border); border-radius: 5px; font-family: inherit; background: #fff;
}
.mk-inline { display: flex; gap: 6px; align-items: center; }
.mk-inline input[type=number] { width: 70px; }
.mk-note {
    background: var(--item-hover); border-left: 3px solid var(--accent);
    padding: 6px 10px; margin-bottom: 8px; font-size: 0.9rem;
}
.mk-crew-list { max-height: 220px; overflow-y: auto; }
.mk-crew-row {
    display: flex; justify-content: space-between; font-size: 0.88rem;
    padding: 2px 4px; border-bottom: 1px solid rgba(141, 110, 80, 0.15);
}
.mk-result { padding: 6px 10px; border-radius: 5px; font-weight: bold; }

/* --- compétence & salaires --- */
.mk-skill-row { display: flex; align-items: center; gap: 8px; }
.mk-stepper { display: inline-flex; align-items: center; gap: 4px; }
.mk-stepper .mk-btn-small { padding: 0 7px; line-height: 1.4; }
.mk-stepper strong { min-width: 22px; text-align: center; }
.mk-level[data-tier="1"] { background: #F1EFE8; color: #444441; }
.mk-level[data-tier="2"] { background: #E1F5EE; color: #085041; }
.mk-level[data-tier="3"] { background: #EEEDFE; color: #3C3489; }
.mk-level[data-tier="4"] { background: #FAEEDA; color: #633806; }
.mk-wage-row { font-size: 0.82rem; }
.mk-crew-row select { padding: 1px 4px; font-size: 0.82rem; }
.mk-wages { font-size: 0.82rem; margin-top: 4px; }
.mk-wages tfoot td { padding: 4px 6px; font-weight: bold; }
.mk-wage-total td { border-top: 1px solid var(--border); }
.mk-wages .num { white-space: normal; }
.mk-wages th, .mk-wages td { padding: 3px 4px; }
.mk-wages th { font-size: 0.7rem; }

/* --- traits de navire --- */
.mk-traits { display: grid; gap: 4px; }
.mk-trait-row {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 4px 8px; border: 1px solid var(--color-border-tertiary); border-radius: 5px; background: #fff;
}
.mk-trait-row.on { border-color: var(--accent); background: var(--item-hover); }
.mk-trait-info { min-width: 0; font-size: 0.88rem; }
.mk-ship-traits { font-style: italic; }
.mk-inline { flex-wrap: wrap; }
.mk-field select { max-width: 100%; min-width: 0; }
.mk-note-ko { border-left-color: var(--error); }

/* --- armement --- */
.mk-facings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
@media (max-width: 520px) { .mk-facings { grid-template-columns: 1fr; } }
.mk-facing { border: 1px solid var(--color-border-tertiary); border-radius: 5px; padding: 5px 8px; background: #fff; min-width: 0; }
.mk-facing-1 { border-color: #c98a2b; background: #fdf4e3; }
.mk-facing-2 { border-color: var(--error); background: #f9e3e3; }
.mk-facing-head { display: flex; justify-content: space-between; gap: 6px; }
.mk-bar-facing { margin: 4px 0; background: linear-gradient(to right, transparent calc(var(--mark, 50%) - 0.5%), var(--border) calc(var(--mark, 50%) - 0.5%), var(--border) calc(var(--mark, 50%) + 0.5%), transparent calc(var(--mark, 50%) + 0.5%)), var(--header-bg); }
.mk-warn { color: var(--error); }
.mk-result.gain { background: #dcefd2; }
.mk-result.loss { background: #f3d6d6; }
.mk-volleys { margin: 4px 0; }
.mk-volleys input[type=number] { width: 60px; }

/* --- indicateurs des emplacements --- */
.mk-places .settlement.visible { display: flex; align-items: center; gap: 4px; }
.mk-settlement-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-settlement-tags { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.mk-tag-icon { font-size: 0.85rem; line-height: 1; }
.mk-pips { display: inline-flex; gap: 1px; }
.mk-pips i { width: 5px; height: 7px; border: 1px solid currentColor; opacity: 0.35; }
.mk-pips i.on { background: currentColor; opacity: 1; }
.mk-pips-wealth i { border-radius: 50%; width: 6px; height: 6px; }
.mk-pips-size { color: #6b5440; }
.mk-pips-wealth { color: #b8860b; }
.mk-places .settlement.selected .mk-pips { color: #fff; }
.mk-region-count {
    display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 8px; margin-left: 2px;
    font-size: 0.7rem; font-weight: normal; text-align: center; vertical-align: middle;
    background: var(--header-bg); color: var(--color-text-secondary);
}

/* --- filtres des emplacements --- */
.mk-place-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.mk-place-filters select {
    min-width: 0; padding: 3px 5px; font-size: 0.8rem; font-family: inherit;
    border: 1px solid var(--border); border-radius: 5px; background: #fff;
}
.mk-place-filters button { grid-column: 1 / -1; }

/* --- ajout en cale --- */
.mk-cargo-kind { margin: 8px 0; }
.mk-cargo-kind button { flex: 1; }
#cargo-qty { width: 80px; }
#cargo-price { width: 110px; }
/* --- modale des lots de loot : cartes partagées avec le générateur --- */
.mk .modal.mk-modal-wide { max-width: 900px; }
/* achat de vivres : boutons semaine / mois / unité sur une ligne */
.mk-provision-buy { flex-wrap: nowrap; flex-shrink: 0; }
.mk-provision-stock { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 0; }
.mk-provision-stock .info-card.mk-warn .value { color: var(--accent, #8e1b1b); }
.mk-provision-count { margin: 0 4px; }
.mk-discard input[type=number] { width: 60px; }
/* retrait de navire : la suppression définitive se distingue du masquage */
.mk .modal-footer button.mk-btn-danger { background: var(--error, #8e1b1b); color: #fff; border-color: var(--error, #8e1b1b); }
.mk-ship.mk-ship-hidden { opacity: .6; }
/* fonds et prêts */
.mk-inline.mk-wrap { flex-wrap: wrap; margin: 4px 0; }
.mk-inline .mk-grow { flex: 1; min-width: 140px; }
.mk-loan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-bottom: 6px; }
.mk-loan-form label { display: grid; gap: 2px; font-size: 0.9rem; }
.mk-loan-form input { padding: 5px 7px; border: 1px solid var(--border); border-radius: 5px; font-family: inherit; background: #fff; min-width: 0; }
.mk-badge.mk-badge-ko { background: var(--error); color: #fff; }
.mk-ledger .gain { color: var(--success); }
.mk-ledger .loss { color: var(--error); }
.mk-lot-title { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; }
/* nom du lot modifiable : discret jusqu'au survol ou à l'édition */
.mk-lot-name { font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px dashed var(--border); padding: 0 2px; min-width: 0; width: 18ch; }
.mk-lot-name:hover, .mk-lot-name:focus { background: var(--card-bg); outline: none; border-bottom-style: solid; }
.mk-lot-items.wh-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 8px 0 0; }