/* ships.css - Ship Codex (ship_codex.php) and Org Fleet (org_fleet.php).
   Sits on top of supply_chain.css, which both pages already load, so cards,
   badges, buttons and tables look like the rest of the members area. Only
   the ship grid, the detail panel and the org fleet table are new here. */

.ship-page .ship-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 1rem;
}

.ship-page .ship-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--label-size);
    font-weight: bold;
    color: var(--muted);
    text-align: left;
    min-width: 150px;
    flex: 1 1 150px;
    max-width: 240px;
}

/* The Member filter starts hidden (members only); label's display:flex
   above would otherwise beat the hidden attribute. */
.ship-page .ship-toolbar label[hidden] {
    display: none;
}

.ship-page .ship-toolbar input,
.ship-page .ship-toolbar select {
    width: 100%;
}

.ship-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.ship-bar .sc-dim {
    font-size: 0.8rem;
}

.sc-btn.active {
    border-color: var(--highlight-colour);
    box-shadow: 0 0 8px var(--glow-colour);
}

/* ------------------------------------------------------------- codex grid */
.ship-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.ship-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    overflow: hidden;
    background: var(--background-mid);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.ship-card:hover,
.ship-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--highlight-colour);
    box-shadow: 0 0 12px var(--glow-colour);
}

.ship-card-img {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--gradient-main);
}

.ship-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ship-card-img.noimg::after {
    content: "No picture";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: 0.5;
    font-size: 0.8rem;
}

.ship-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: 0.5;
    font-size: 0.8rem;
}

.ship-owned-flag {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius1);
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid var(--highlight-colour);
    color: var(--highlight-colour);
    font-size: 0.75rem;
}

.ship-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem;
}

.ship-card-name {
    font-weight: bold;
    color: var(--highlight-colour);
}

.ship-card-mfr,
.ship-card-meta {
    font-size: 0.8rem;
    opacity: 0.75;
}

.ship-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.15rem 0;
}

/* ------------------------------------------------------------ detail modal */
.ship-backdrop[hidden] {
    display: none;
}

.ship-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;          /* above the site nav (1000), like the Supply Chain modals */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3vh 1rem;
    overflow-y: auto;
    background: rgba(2, 8, 14, 0.82);
    backdrop-filter: blur(3px);
}

body.ship-modal-open {
    overflow: hidden;
}

.ship-modal {
    position: relative;
    width: min(1100px, 100%);
    margin: auto;
    background: var(--background-dark);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius2);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), 0 0 14px var(--glow-colour);
    overflow: hidden;
    animation: ship-modal-in 0.18s ease-out;
}

@keyframes ship-modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ship-modal { animation: none; }
}

.ship-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--border-colour);
    background: rgba(2, 8, 14, 0.7);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ship-modal-close:hover {
    border-color: var(--highlight-colour);
    box-shadow: 0 0 10px var(--glow-colour);
}

.sc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ship-modal-body {
    display: block;
}

.ship-modal-body > *:not(.ship-modal-hero) {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.ship-modal-body > *:last-child {
    margin-bottom: 1.5rem;
}

.ship-modal-body .sc-table-wrap {
    width: auto;            /* the margins above set the width inside the card */
}

.ship-modal-body h4 {
    margin: 1.4rem 1.5rem 0.5rem;
    color: var(--highlight-colour);
}

/* Hero picture with the name over it, like the rest of the site's banners. */
.ship-modal-hero {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    background: var(--gradient-main);
}

.ship-modal-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ship-modal-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 8, 14, 0.15) 30%, rgba(2, 8, 14, 0.92) 100%);
}

.ship-modal-hero.noimg {
    min-height: 150px;
}

.ship-modal-hero-text {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
}

.ship-modal-hero-text h3 {
    margin: 0.2rem 0 0.6rem;
    font-size: 2.2rem;
    line-height: 1.1;
    color: #fff;
}

.ship-modal-mfr {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--highlight-colour);
}

.ship-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.ship-modal-actions .sc-btn {
    margin: 0;
}

/* Quantity stepper + Remove, the same height as the buttons beside them. */
/* Fleet control in the ship popup (Ship Codex and Org Fleet). The quantity
   is the Supply Chain warehouse control (.sc-qty-edit, styled in
   supply_chain.css) so the two read the same; the Remove button is a standard
   40px button rather than stretching to the old 58px stepper. */
.ship-fleet-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.ship-fleet-label {
    font-size: var(--label-size);
    font-weight: bold;
    color: var(--muted);
    white-space: nowrap;
}

.ship-page .ship-fleet-remove {
    margin: 0;
}

.sc-qty-edit button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Spec tiles */
.ship-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.ship-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    background: var(--background-mid);
}

.ship-tile-k {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
}

.ship-tile-v {
    font-size: 1.05rem;
}

.ship-desc {
    margin-top: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.ship-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

.ship-owner {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    margin: 0 0.3rem 0.3rem 0;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    font-size: 0.85rem;
}

@media (max-width: 700px) {
    .ship-backdrop {
        padding: 0;
    }

    .ship-modal {
        border-radius: 0;
        min-height: 100%;
    }

    .ship-modal-hero-text h3 {
        font-size: 1.6rem;
    }

    .ship-modal-body > *:not(.ship-modal-hero),
    .ship-modal-body .sc-table-wrap {
    width: auto;            /* the margins above set the width inside the card */
}

.ship-modal-body h4 {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .ship-fleet-group {
        margin-left: 0;
        flex-wrap: wrap;
    }
}

/* --------------------------------------------------------------- org fleet */
.ship-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* ships.js writes <span class=ship-stat-n>number</span><span>label</span>;
   flex order puts the label on top to match the Supply Chain tiles. The
   .sc-card class it also carries would otherwise add a heavier card frame. */
.sc-card.ship-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    background: var(--background-dark);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ship-stat-n {
    order: 2;
    font-family: var(--font-display);
    font-size: 1.45rem;
    letter-spacing: normal;
    color: var(--highlight-colour);
    font-variant-numeric: tabular-nums;
}

.sc-card.ship-stat > span:not(.ship-stat-n) {
    order: 1;
}

.ship-org-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ship-org-name img {
    width: 72px;
    height: 41px;
    object-fit: cover;
    border-radius: var(--radius1);
    border: 1px solid var(--border-colour);
}

.ship-org-total {
    font-size: 1.1rem;
    color: var(--highlight-colour);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .ship-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .ship-org-name img {
        display: none;
    }

    .ship-panel {
        width: 100%;
    }
}