/* Minerva Motor Club Photo Portal — dark automotive theme */

:root {
    --mmc-bg: #101114;
    --mmc-surface: #1a1c21;
    --mmc-surface-2: #22252c;
    --mmc-border: #2e323b;
    --mmc-text: #e8e9eb;
    --mmc-muted: #9aa0ab;
    --mmc-accent: #FEC942;      /* club gold */
    --mmc-accent-hover: #E3AF2D;
    --mmc-on-accent: #16171b;   /* text on gold needs to be dark */
}

body {
    background-color: var(--mmc-bg);
    color: var(--mmc-text);
}

a { color: #c9ccd2; }
a:hover { color: #ffffff; }

.text-muted, .form-text { color: var(--mmc-muted) !important; }

/* ---- Navigation ---- */
.app-navbar {
    background: linear-gradient(180deg, #0b0c0e 0%, #14161a 100%);
    border-bottom: 1px solid var(--mmc-border);
}
.brand-title { letter-spacing: 0.14em; font-weight: 700; }
.brand-sub { color: var(--mmc-muted); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.72rem; }
.brand-mark { font-size: 2.4rem; color: var(--mmc-accent); }
.nav-logo { max-height: 34px; }
.auth-logo { max-height: 72px; max-width: 240px; }

/* ---- Cards & surfaces ---- */
.card.content-card,
.card.auth-panel {
    background-color: var(--mmc-surface);
    border: 1px solid var(--mmc-border);
    color: var(--mmc-text);
}
.card.content-card .card-footer { border-top: none; }

.auth-body { background: radial-gradient(1200px 600px at 50% -10%, #23262d 0%, var(--mmc-bg) 60%); }
.auth-card { max-width: 460px; }
.auth-card:has(form .row) { max-width: 560px; }

/* ---- Forms ---- */
.form-control, .form-select, .input-group-text {
    background-color: var(--mmc-surface-2);
    border-color: var(--mmc-border);
    color: var(--mmc-text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--mmc-surface-2);
    color: var(--mmc-text);
    border-color: #6b7280;
    box-shadow: 0 0 0 0.2rem rgba(254, 201, 66, 0.2);
}
.form-control::placeholder { color: #6c727d; }
.form-control::file-selector-button {
    background-color: var(--mmc-surface);
    color: var(--mmc-text);
    border-color: var(--mmc-border);
}
.form-check-input { background-color: var(--mmc-surface-2); border-color: var(--mmc-border); }
.form-check-input:checked { background-color: var(--mmc-accent); border-color: var(--mmc-accent); }

/* ---- Buttons ---- */
.btn-accent {
    background-color: var(--mmc-accent);
    border-color: var(--mmc-accent);
    color: var(--mmc-on-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.btn-accent:hover, .btn-accent:focus {
    background-color: var(--mmc-accent-hover);
    border-color: var(--mmc-accent-hover);
    color: var(--mmc-on-accent);
}
.btn { border-radius: 0.4rem; }
.btn, .form-control-lg { min-height: 44px; } /* touch targets */

/* ---- Dashboard cards ---- */
.submission-card { overflow: hidden; }
.submission-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background-color: var(--mmc-surface-2);
}
.placeholder-thumb { aspect-ratio: 4 / 5; }
.final-preview { max-height: 70vh; }

/* ---- Crop page ---- */
.crop-stage {
    position: relative;
    width: 100%;
    max-height: 65vh;
    overflow: hidden;
    background: #0b0c0e;
}
.crop-stage img#crop-image { display: block; max-width: 100%; }
#overlay-on-crop {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    opacity: 0.95;
}
.crop-controls .btn { min-width: 44px; }

.crop-preview-frame {
    position: relative;
    width: 216px;
    height: 270px;
    overflow: hidden;
    border: 1px solid var(--mmc-border);
    border-radius: 0.4rem;
}
.crop-preview { width: 100%; height: 100%; overflow: hidden; }
#overlay-on-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Checkerboard behind transparent PNGs */
.checkerboard {
    background-image:
        linear-gradient(45deg, #2a2d34 25%, transparent 25%),
        linear-gradient(-45deg, #2a2d34 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2a2d34 75%),
        linear-gradient(-45deg, transparent 75%, #2a2d34 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-color: #383c45;
}

/* ---- Overlay picker ---- */
.overlay-option {
    border: 1px solid var(--mmc-border);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.overlay-option:hover { border-color: #6b7280; }
.overlay-option:has(input:checked) { border-color: var(--mmc-accent); background-color: rgba(254, 201, 66, 0.08); }
.overlay-thumb { width: 56px; height: 70px; object-fit: cover; }

/* ---- Admin queue ---- */
.queue-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background-color: var(--mmc-surface-2);
}
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; }
.stat-card .stat-label { color: var(--mmc-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- Tables ---- */
.table { color: var(--mmc-text); }
.table > :not(caption) > * > * {
    background-color: var(--mmc-surface);
    color: var(--mmc-text);
    border-bottom-color: var(--mmc-border);
}
.table-hover > tbody > tr:hover > * { background-color: var(--mmc-surface-2); color: var(--mmc-text); }

/* ---- Footer ---- */
.app-footer { border-top: 1px solid var(--mmc-border); }

/* ---- Alerts keep bootstrap colors but soften on dark ---- */
.alert { border-width: 0; }

/* ---- Cropper dark adjustments ---- */
.cropper-view-box { outline-color: var(--mmc-accent); }
.cropper-line, .cropper-point { background-color: var(--mmc-accent); }

@media (max-width: 575.98px) {
    .crop-preview-frame { width: 172px; height: 215px; }
    .stat-card .stat-value { font-size: 1.4rem; }
}