/* Casino module (Routes::Casino / views/casino/*.tt) - a distinct,
   data-dense "quick status check" visual language (light cards on a dark
   navy page), separate from the rest of the app's Tailwind slate/teal
   theme by original design intent. Originally built with Gemini and never
   revisited - heavy use of dead Bootstrap class names (btn/form-control/
   card/d-flex) with the *real* styling coming from inline style="..."
   attributes layered on top. This file extracts those inline styles,
   preserving the exact existing appearance - not a redesign.
   See project memory "casino session rework" for the planned future UX
   simplification pass (separate, later, live-tested during real casino
   play) - this extraction doesn't block or duplicate that work. */

.casino-page {
    background-color: #0d1b2a;
    min-height: 100vh;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.casino-back-link {
    color: #118ab2;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

.casino-eyebrow {
    color: #4a5568;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.casino-title {
    color: #ffffff;
    font-weight: 700;
    margin: 0;
    font-size: 1.8rem;
}

.casino-card {
    border-radius: 6px;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.casino-card--tight { padding: 15px; height: 100%; }
.casino-card--compact { padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.casino-card--wide { padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }

.casino-btn-primary {
    background-color: #118ab2;
    border-radius: 4px;
}

.casino-form-label {
    text-transform: uppercase;
}

.casino-input {
    border-radius: 4px;
    font-size: 1rem;
}

.casino-input-dark {
    border-radius: 6px;
    flex: 1;
}

.casino-btn-secondary {
    border-radius: 4px;
    background-color: #6c757d;
    border: none;
}

.casino-flex-gap { gap: 12px; }
.casino-flex-gap-sm { gap: 8px; }
.casino-flex-1 { flex: 1; }
.casino-flex-2 { flex: 2; }

.casino-empty-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 10px;
}
.casino-empty-icon--sm {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

.casino-empty-text {
    color: #a0aec0;
    font-size: 0.9rem;
    margin: 0;
}

.casino-empty-hint { color: #4a5568; }

.casino-card-title {
    color: #1a202c;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Volatility badges */
.casino-badge {
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
}
.casino-badge--high { background-color: #fde8e8; color: #e53e3e; }
.casino-badge--med { background-color: #fef3c7; color: #b7791f; }
.casino-badge--low { background-color: #e6fffa; color: #319795; }

.casino-machine-icon { font-size: 1.5rem; margin-right: 15px; }
.casino-machine-name { color: #1a202c; font-weight: 700; font-size: 1.1rem; margin: 0; }
.casino-machine-meta { color: #718096; font-size: 0.8rem; text-transform: uppercase; font-weight: 500; }

.casino-royale-cta { margin: 10px 0 0 0; }
.casino-royale-cta a {
    color: #118ab2;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.casino-link-plain { text-decoration: none; }
.casino-flex-gap-lg { gap: 15px; }

.casino-voyage-badge {
    background-color: #000000;
    color: #ffffff;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 4px;
}

.casino-active-session {
    border-radius: 6px;
    background-color: #ffb703;
    padding: 15px;
}
.casino-active-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.casino-active-label { display: block; font-size: 0.9rem; }
.casino-active-desc { font-size: 0.85rem; }
.casino-active-return-btn { border-radius: 4px; }

/* Home portal menu cards (icon + title + description, colored left border) */
.casino-menu-card {
    border-radius: 6px;
    background-color: #ffffff;
    padding: 20px;
    border-left: 5px solid transparent !important;
}
.casino-menu-card--teal { border-left-color: #118ab2 !important; }
.casino-menu-card--gray { border-left-color: #6c757d !important; }
.casino-menu-card--red { border-left-color: #e53e3e !important; }
.casino-menu-card--green { border-left-color: #10b981 !important; }

.casino-menu-icon {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 15px;
}
.casino-menu-icon--teal { background-color: #e0f2fe; }
.casino-menu-icon--gray { background-color: #e2e8f0; }
.casino-menu-icon--red { background-color: #fde8e8; }
.casino-menu-icon--green { background-color: #d1fae5; }

.casino-menu-title { color: #1a202c; font-weight: 700; font-size: 1.2rem; margin: 0; }
.casino-menu-desc { color: #718096; font-size: 0.8rem; margin: 0; margin-top: 2px; }

/* Analytics / target-pacing page */
.casino-target-heading { color: #1a202c; font-weight: 700; margin: 0; font-size: 0.95rem; }
.casino-target-points-display { font-size: 0.8rem; font-weight: 700; color: #718096; }

.casino-progress-track { border-radius: 999px; height: 14px; overflow: hidden; }
.casino-progress-track--achieved { background-color: #d1fae5; }
.casino-progress-track--pending { background-color: #fef3c7; }
.casino-progress-fill { height: 100%; border-radius: 999px; }
.casino-progress-fill--achieved { background-color: #10b981; }
.casino-progress-fill--pending { background-color: #ffb703; }

.casino-achieved-text { color: #10b981; font-weight: 800; margin: 10px 0 0 0; font-size: 0.9rem; }
.casino-remaining-text { color: #718096; margin: 10px 0 0 0; font-size: 0.8rem; }
.casino-stat-strong { color: #1a202c; }

.casino-input-rounded { border-radius: 4px; }
.casino-btn-update {
    background-color: #118ab2;
    color: #fff;
    border-radius: 4px;
    border: none;
    padding: 0 14px;
}

.casino-stats-row-gap { gap: 12px 0; }
.casino-stat-label { font-size: 0.65rem; text-transform: uppercase; color: #718096; }
.casino-stat-value { font-size: 1.4rem; font-weight: 800; }
.casino-stat-value--teal { color: #118ab2; }
.casino-stat-value--danger { color: #e53e3e; }
.casino-stat-value--dark { color: #1a202c; }
.casino-stat-suffix { font-size: 0.8rem; font-weight: 400; color: #718096; }
.casino-stat-suffix--sm { font-size: 0.75rem; font-weight: 400; color: #718096; }

.casino-table { font-size: 0.85rem; }
.casino-table-head-row { text-transform: uppercase; font-size: 0.7rem; border-top: none; letter-spacing: 0.5px; color: #718096; }
.casino-no-border-top { border-top: none; }
.casino-valign-mid { vertical-align: middle; }

/* Quick contrast fix, 2026-07-23 - these views lean on dead Bootstrap
   utility class names (text-muted/text-dark/text-secondary/text-success/
   badge-light) for their actual text color, same "no Bootstrap loaded"
   gap documented at the top of this file - with nothing here to back
   them up, those cells silently inherited the app's global near-white
   body text straight onto these WHITE casino cards, reading as
   practically invisible. Scoped to .casino-card/.casino-table
   specifically (not a bare .text-dark {} etc.) so this doesn't touch
   the same class names used elsewhere in the app (catalog.tt,
   ship_culture, login), which get their real color from their own
   separate inline styles - a global rule here would have bled into
   those unrelated pages. A real UX pass on this whole module is planned
   separately later; this is deliberately just the color fix, nothing
   restructured. */
.casino-card .text-muted { color: #718096; }
.casino-table td.text-dark { color: #1a202c; }
.casino-table td.text-secondary { color: #718096; }
.casino-table td.text-success { color: #10b981; }
.casino-table .badge.badge-light {
    background-color: #edf2f7;
    color: #1a202c;
}
.casino-sittings-badge { padding: 5px 8px; font-weight: 600; }
.casino-cost-high { color: #e53e3e; }
.casino-cost-normal { color: #118ab2; }
.casino-empty-hint-light { color: #a0aec0; }

.casino-target-heading--loose { color: #1a202c; font-weight: 700; margin-bottom: 10px; font-size: 0.95rem; }
.casino-target-subtext { color: #718096; font-size: 0.8rem; margin-bottom: 12px; }

/* casino/session.tt - the live floor tracker cockpit. A dark (black, not
   the navy used elsewhere in this module) full-bleed page with 5 repeated
   "fund type" sections (Cash/SeaPass/Coin-In/Coin-Out/Freeplay), each its
   own accent color. Extracted as-is (same colors/layout) - see the
   separate "casino session rework" memory for the planned future UX
   simplification, which is a different job from this pure CSS move. */
.casino-session-page {
    background-color: #000000;
    min-height: 100vh;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    color: #ffffff;
}

.casino-session-header { border-bottom: 2px solid #1a1a1a; }
.casino-session-label { color: #ffb703; font-weight: 800; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; }
.casino-session-title { font-weight: 800; font-size: 2rem; margin: 5px 0 0 0; color: #ffffff; }

.casino-stat-box { background-color: #1a1a1a; border-radius: 8px; }
.casino-stat-box-label { display: block; text-transform: uppercase; }
.casino-stat-box-value { font-weight: 900; }
.casino-stat-box-value--gold { font-size: 2.2rem; color: #ffb703; }
.casino-stat-box-value--green { font-size: 1.6rem; color: #06d6a0; }

.casino-fund-label { text-transform: uppercase; }
.casino-running-total { opacity: 0.6; }

.casino-quick-btn { border-radius: 10px; width: 100%; padding: 14px 4px; font-size: 1.1rem; border: none; }
.casino-quick-btn--cash { background-color: #ffb703; }
.casino-quick-btn--room { background-color: #118ab2; }
.casino-quick-btn--coinin { background-color: #06d6a0; }
.casino-quick-btn--coinout { background-color: #073b4c; }
.casino-quick-btn--freeplay { background-color: #adb5bd; }

.casino-custom-input { border-radius: 6px; flex: 1; }

.casino-add-btn { border-radius: 6px; padding: 0 18px; border: none; }
.casino-add-btn--cash { background-color: #ffb703; color: #1a1a1a; }
.casino-add-btn--room { background-color: #118ab2; color: #ffffff; }
.casino-add-btn--coinin { background-color: #06d6a0; color: #1a1a1a; }
.casino-add-btn--coinout { background-color: #073b4c; color: #ffffff; }
.casino-add-btn--freeplay { background-color: #adb5bd; color: #1a1a1a; }

.casino-close-box { background-color: #121212; border-radius: 8px; border: 1px solid #222222; }
.casino-close-title { font-size: 1rem; }
.casino-form-label-upper { text-transform: uppercase; }
.casino-final-points-input { font-size: 1.5rem; font-weight: 700; border-radius: 6px; }
.casino-notes-input { border-radius: 6px; }
.casino-end-session-btn { border-radius: 6px; font-size: 1.1rem; font-weight: 700; background-color: #e53e3e; border: none; }

.casino-quickstart-input { border-radius: 6px; }
.casino-favorites-label { text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
.casino-start-btn { font-size: 1.1rem; border-radius: 6px; border: none; }
.casino-start-btn--gold { background-color: #ffb703; color: #1a1a1a; }
.casino-start-btn--teal { background-color: #118ab2; color: #ffffff; }