/* ============================================================
   Compass Virtual Airlines — phpVMS Theme v1.0
   Visual identity integrated with the main Grav site.
   All rules scoped under .compass-theme body class.
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */

.compass-theme {
    --cv-teal: #6d97a8;
    --cv-teal-dark: #4a7a8a;
    --cv-teal-light: #e8f0f3;
    --cv-gold: #c8962e;
    --cv-gold-dark: #b07820;
    --cv-wordmark: #FFFDF9;
    --cv-body: #1a2530;
    --cv-body-dim: rgba(26, 37, 48, 0.7);
    --cv-border: rgba(109, 151, 168, 0.25);
    --cv-bg: #fdfdfd;
    --cv-panel: #ffffff;
    --cv-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --cv-shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

.compass-theme {
    background: var(--cv-bg);
    color: var(--cv-body);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

.compass-theme h1,
.compass-theme h2,
.compass-theme h3,
.compass-theme h4,
.compass-theme h5,
.compass-theme h6 {
    font-family: "athelas", Georgia, "Times New Roman", serif;
    font-weight: 700;
    color: var(--cv-body);
    letter-spacing: 0.01em;
}

.compass-theme h1 { font-size: 1.875rem; }
.compass-theme h2 { font-size: 1.5rem; }
.compass-theme h3 { font-size: 1.25rem; }
.compass-theme h4 { font-size: 1.1rem; }
.compass-theme h5 { font-size: 1rem; }

.compass-theme a {
    color: var(--cv-teal-dark);
    text-decoration: none;
    transition: color 0.15s ease;
}

.compass-theme a:hover {
    color: var(--cv-gold);
    text-decoration: none;
}


/* ============================================================
   3. HEADER / NAVBAR
   ============================================================ */

.compass-theme .compass-navbar {
    background: var(--cv-teal) !important;
    padding: 0;
    border: none;
    box-shadow: none;
    min-height: 60px;
}

.compass-theme .compass-navbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 24px;
}

.compass-theme .compass-wordmark-link {
    color: var(--cv-wordmark) !important;
    text-decoration: none !important;
    margin-right: 32px;
    padding: 14px 0;
}

.compass-theme .compass-wordmark {
    font-family: "athelas", Georgia, serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.35em;
    color: var(--cv-wordmark);
    text-transform: uppercase;
}

.compass-theme .compass-wordmark-star {
    color: var(--cv-gold);
    margin-left: 0.2em;
    letter-spacing: 0;
    display: inline-block;
}

/* Gold accent line under header */
.compass-theme .compass-gold-accent {
    height: 2px;
    background: var(--cv-gold);
    width: 100%;
    margin: 0;
}

/* Nav items styling */
.compass-theme .compass-nav .nav-item .nav-link {
    color: var(--cv-wordmark) !important;
    padding: 18px 14px;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.compass-theme .compass-nav .nav-item .nav-link:hover,
.compass-theme .compass-nav .nav-item .nav-link:focus {
    color: var(--cv-gold) !important;
    background: transparent;
}

.compass-theme .compass-nav .nav-item .nav-link i {
    font-size: 0.85rem;
}

.compass-theme .compass-nav .nav-item .nav-link p {
    margin: 0;
    display: inline;
}

/* Mobile hamburger button */
.compass-theme .compass-navbar .navbar-toggler {
    border-color: rgba(255, 253, 249, 0.3);
    color: var(--cv-wordmark);
}

.compass-theme .compass-navbar .navbar-toggler i {
    color: var(--cv-wordmark);
}

/* User avatar dropdown — smaller than Disposable's 38px */
.compass-theme .compass-user-dropdown .compass-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 253, 249, 0.3);
    /* flex-shrink: a flex parent may otherwise compress the avatar
     *      horizontally at narrow viewports (seen on Android tablets), giving an
     *      oval rather than a circle. object-fit keeps a non-square uploaded
     *      avatar filling the circle instead of distorting. */
    flex-shrink: 0;
    object-fit: cover;
}

.compass-theme .compass-user-dropdown .nav-link.dropdown-toggle::after {
    color: var(--cv-wordmark);
    opacity: 0.6;
}

.compass-theme .compass-user-menu {
    background: var(--cv-panel);
    border: 1px solid var(--cv-border);
    border-radius: 6px;
    padding: 8px 0;
    box-shadow: var(--cv-shadow-elevated);
    margin-top: 4px;
}

.compass-theme .compass-user-menu .dropdown-item {
    color: var(--cv-body);
    padding: 8px 16px;
    font-size: 0.875rem;
}

.compass-theme .compass-user-menu .dropdown-item:hover {
    background: var(--cv-teal-light);
    color: var(--cv-teal-dark);
}

.compass-theme .compass-user-menu .dropdown-divider {
    border-color: var(--cv-border);
    margin: 4px 0;
}


/* ============================================================
   4. UTC CLOCK
   ============================================================ */

.compass-theme .compass-utc-clock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    color: var(--cv-wordmark);
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    border-left: 1px solid rgba(255, 253, 249, 0.2);
    margin-left: 16px;
    height: 36px;
}

.compass-theme .compass-utc-clock-icon {
    color: var(--cv-gold);
    opacity: 0.9;
    font-size: 0.8rem;
}

.compass-theme .compass-utc-clock-value {
    font-weight: 500;
    color: var(--cv-wordmark);
}

.compass-theme .compass-utc-clock-label {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--cv-wordmark);
    opacity: 0.6;
}


/* ============================================================
   5. MAIN CONTENT WRAPPER
   ============================================================ */

.compass-theme .compass-wrapper {
    min-height: calc(100vh - 60px - 2px - 220px);  /* viewport minus header minus accent minus footer */
    background: var(--cv-bg);
    padding: 32px 0;
}

.compass-theme .compass-content {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}


/* ============================================================
   6. CARDS — replacing Now UI Kit's blue card styling
   ============================================================ */

.compass-theme .card {
    background: var(--cv-panel);
    border: 1px solid var(--cv-border);
    border-radius: 8px;
    box-shadow: var(--cv-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.compass-theme .card .header {
    background: var(--cv-teal);
    color: var(--cv-wordmark);
    padding: 14px 18px;
    border-bottom: 1px solid var(--cv-border);
}

.compass-theme .card .header h1,
.compass-theme .card .header h2,
.compass-theme .card .header h3,
.compass-theme .card .header h4,
.compass-theme .card .header h5 {
    color: var(--cv-wordmark);
    margin: 0;
}

.compass-theme .card .content {
    padding: 18px;
}

.compass-theme .card .footer {
    padding: 12px 18px;
    background: var(--cv-teal-light);
    border-top: 1px solid var(--cv-border);
}

/* Override Now UI Kit's blue-bg card class */
.compass-theme .card.blue-bg,
.compass-theme .card .header.blue-bg {
    background: var(--cv-teal) !important;
}

.compass-theme .card.card-signup {
    background: var(--cv-panel);
}

.compass-theme .card.card-signup .header.header-primary {
    background: var(--cv-teal);
    color: var(--cv-wordmark);
}

.compass-theme .card.card-signup .header h3.title a {
    color: var(--cv-wordmark) !important;
}

.compass-theme .card.card-signup .content {
    background: var(--cv-panel);
}

.compass-theme .card.card-signup .content .text-white {
    color: var(--cv-body) !important;
}

.compass-theme .card.card-signup .footer {
    background: var(--cv-teal-light);
}


/* ============================================================
   7. BUTTONS — replacing Now UI Kit's button styling
   ============================================================ */

.compass-theme .btn {
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    padding: 8px 18px;
    text-transform: none;
}

.compass-theme .btn-primary,
.compass-theme .btn-info,
.compass-theme .btn-default {
    background: var(--cv-teal);
    border-color: var(--cv-teal-dark);
    color: var(--cv-wordmark);
}

.compass-theme .btn-primary:hover,
.compass-theme .btn-info:hover,
.compass-theme .btn-default:hover,
.compass-theme .btn-primary:focus,
.compass-theme .btn-info:focus,
.compass-theme .btn-default:focus {
    background: var(--cv-teal-dark);
    border-color: var(--cv-teal-dark);
    color: var(--cv-wordmark);
}

.compass-theme .btn-neutral {
    background: var(--cv-panel);
    border-color: var(--cv-border);
    color: var(--cv-body);
}

.compass-theme .btn-neutral:hover {
    background: var(--cv-teal-light);
    color: var(--cv-teal-dark);
    border-color: var(--cv-teal);
}

.compass-theme .btn-success {
    background: var(--cv-gold);
    border-color: var(--cv-gold-dark);
    color: var(--cv-wordmark);
}

.compass-theme .btn-success:hover {
    background: var(--cv-gold-dark);
    border-color: var(--cv-gold-dark);
    color: var(--cv-wordmark);
}

.compass-theme .btn-danger {
    background: #c45050;
    border-color: #a83a3a;
    color: var(--cv-wordmark);
}

.compass-theme .btn-sm {
    padding: 5px 12px;
    font-size: 0.85rem;
}

.compass-theme .btn-lg {
    padding: 12px 28px;
    font-size: 1.05rem;
}


/* ============================================================
   8. FORM INPUTS
   ============================================================ */

.compass-theme .form-control,
.compass-theme input[type="text"],
.compass-theme input[type="email"],
.compass-theme input[type="password"],
.compass-theme input[type="number"],
.compass-theme textarea,
.compass-theme select {
    background: var(--cv-panel);
    border: 1px solid var(--cv-border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--cv-body);
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.compass-theme .form-control:focus,
.compass-theme input:focus,
.compass-theme textarea:focus,
.compass-theme select:focus {
    border-color: var(--cv-teal);
    box-shadow: 0 0 0 2px rgba(109, 151, 168, 0.15);
    outline: none;
}

.compass-theme label {
    color: var(--cv-body);
    font-weight: 500;
    margin-bottom: 6px;
}


/* ============================================================
   9. TABLES
   ============================================================ */

.compass-theme table {
    background: var(--cv-panel);
    border: 1px solid var(--cv-border);
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.compass-theme table thead th {
    background: var(--cv-teal-light);
    color: var(--cv-teal-dark);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cv-border);
    text-align: left;
}

.compass-theme table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cv-border);
    color: var(--cv-body);
}

.compass-theme table tbody tr:last-child td {
    border-bottom: none;
}

.compass-theme table tbody tr:hover {
    background: var(--cv-teal-light);
}


/* ============================================================
   10. PAGINATION
   ============================================================ */

.compass-theme .pagination {
    margin: 24px 0;
}

.compass-theme .pagination .page-item .page-link {
    color: var(--cv-teal-dark);
    border-color: var(--cv-border);
    background: var(--cv-panel);
}

.compass-theme .pagination .page-item.active .page-link {
    background: var(--cv-teal);
    border-color: var(--cv-teal-dark);
    color: var(--cv-wordmark);
}

.compass-theme .pagination .page-item .page-link:hover {
    background: var(--cv-teal-light);
    color: var(--cv-teal-dark);
}


/* ============================================================
   11. ROSTER / PILOTS PAGE
   ============================================================ */

.compass-theme .pilot-avatar,
.compass-theme img.rounded-circle {
    width: 32px;  /* smaller than Disposable */
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--cv-border);
}

/* Flag icons in roster — keep them subtle */
.compass-theme .flag-icon {
    width: 1.2em;
    line-height: 1em;
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}


/* ============================================================
   12. HOMEPAGE — hero section + newest pilots
   ============================================================ */

.compass-theme .compass-hero {
    background: linear-gradient(135deg, var(--cv-teal) 0%, var(--cv-teal-dark) 100%);
    color: var(--cv-wordmark);
    padding: 64px 32px;
    text-align: center;
    margin-bottom: 32px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.compass-theme .compass-hero h1 {
    font-family: "athelas", Georgia, serif;
    font-size: 2.5rem;
    color: var(--cv-wordmark) !important;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.compass-theme .compass-hero .compass-hero-subtitle {
    font-size: 1.15rem;
    color: var(--cv-wordmark);
    opacity: 0.92;
    margin-bottom: 1.5rem;
}

.compass-theme .compass-hero .compass-hero-tagline {
    font-size: 0.95rem;
    color: var(--cv-wordmark);
    opacity: 0.8;
    font-style: italic;
    margin-bottom: 2rem;
}

.compass-theme .compass-hero .btn {
    margin: 0 8px;
}

.compass-theme .compass-hero .btn-primary {
    background: var(--cv-gold);
    border-color: var(--cv-gold-dark);
    color: var(--cv-wordmark);
}

.compass-theme .compass-hero .btn-primary:hover {
    background: var(--cv-gold-dark);
}

.compass-theme .compass-hero .btn-outline {
    background: transparent;
    border-color: var(--cv-wordmark);
    color: var(--cv-wordmark);
}

.compass-theme .compass-hero .btn-outline:hover {
    background: rgba(255, 253, 249, 0.1);
    color: var(--cv-wordmark);
}

/* Newest pilots heading */
.compass-theme h2.description {
    font-family: "athelas", Georgia, serif;
    color: var(--cv-teal-dark);
    margin-bottom: 24px;
    font-size: 1.5rem;
}


/* ============================================================
   13. LOGIN / REGISTER PAGES
   ============================================================ */

.compass-theme.compass-auth-page {
    background: linear-gradient(135deg, var(--cv-teal) 0%, var(--cv-teal-dark) 100%);
    min-height: 100vh;
}

.compass-theme .compass-auth-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 32px 16px;
}

.compass-theme .compass-auth-wordmark {
    color: var(--cv-wordmark);
    font-family: "athelas", Georgia, serif;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-bottom: 32px;
    text-align: center;
}

.compass-theme .compass-auth-wordmark .compass-wordmark-star {
    color: var(--cv-gold);
    letter-spacing: 0;
}

.compass-theme .compass-auth-card {
    background: var(--cv-panel);
    border-radius: 10px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--cv-shadow-elevated);
}

.compass-theme .compass-auth-card h2 {
    color: var(--cv-teal-dark);
    margin-bottom: 24px;
    text-align: center;
    font-size: 1.5rem;
}


/* ============================================================
   14. STABLE APPROACH WIDGET
   ============================================================ */

.compass-theme .compass-stable-approach {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.compass-theme .compass-stable-approach.stable {
    background: var(--cv-gold);
    color: var(--cv-wordmark);
}

.compass-theme .compass-stable-approach.acceptable {
    background: #e0a060;
    color: var(--cv-wordmark);
}

.compass-theme .compass-stable-approach.unstable {
    background: #c45050;
    color: var(--cv-wordmark);
}


/* ============================================================
   15. FOOTER
   ============================================================ */

.compass-theme .compass-footer {
    background: var(--cv-teal-dark);
    color: var(--cv-wordmark);
    margin-top: 48px;
    padding: 0;
    position: relative;
}

.compass-theme .compass-gold-accent-footer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.compass-theme .compass-footer-inner {
    padding: 48px 16px 24px 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.compass-theme .compass-footer-columns {
    margin-bottom: 32px;
}

.compass-theme .compass-footer-column {
    margin-bottom: 16px;
}

.compass-theme .compass-footer-heading {
    font-family: "athelas", Georgia, serif;
    font-size: 0.9rem;
    color: var(--cv-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 700;
}

.compass-theme .compass-footer-text {
    color: var(--cv-wordmark);
    opacity: 0.85;
    font-size: 0.9rem;
    line-height: 1.6;
}

.compass-theme .compass-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compass-theme .compass-footer-list li {
    margin-bottom: 6px;
}

.compass-theme .compass-footer-list a {
    color: var(--cv-wordmark);
    opacity: 0.85;
    font-size: 0.9rem;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.compass-theme .compass-footer-list a:hover {
    color: var(--cv-gold);
    opacity: 1;
}

.compass-theme .compass-footer-copyright {
    border-top: 1px solid rgba(255, 253, 249, 0.15);
    padding-top: 20px;
    text-align: center;
    color: var(--cv-wordmark);
    opacity: 0.7;
    font-size: 0.8rem;
}

.compass-theme .compass-footer-copyright p {
    margin: 4px 0;
}

.compass-theme .compass-footer-attribution {
    font-size: 0.75rem;
    opacity: 0.6;
}

.compass-theme .compass-footer-attribution a {
    color: var(--cv-gold);
    opacity: 0.8;
}

.compass-theme .compass-footer-attribution a:hover {
    opacity: 1;
}


/* ============================================================
   16. UTILITY CLASSES
   ============================================================ */

.compass-theme .text-teal { color: var(--cv-teal-dark); }
.compass-theme .text-gold { color: var(--cv-gold); }
.compass-theme .bg-teal { background: var(--cv-teal); color: var(--cv-wordmark); }
.compass-theme .bg-gold { background: var(--cv-gold); color: var(--cv-wordmark); }


/* ============================================================
   17. RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 991px) {
    .compass-theme .compass-utc-clock {
        display: none;  /* hide UTC clock on mobile, real estate too tight */
    }

    .compass-theme .compass-navbar-inner {
        flex-wrap: wrap;
        padding: 0 16px;
    }

    .compass-theme .compass-wordmark {
        font-size: 1.25rem;
        letter-spacing: 0.25em;
    }

    .compass-theme .compass-nav .nav-item .nav-link {
        padding: 12px 14px;
        justify-content: flex-start;
    }

    .compass-theme .compass-hero {
        padding: 40px 20px;
    }

    .compass-theme .compass-hero h1 {
        font-size: 1.85rem;
    }

    .compass-theme .compass-auth-wordmark {
        font-size: 2rem;
        letter-spacing: 0.3em;
    }
}

@media (max-width: 575px) {
    .compass-theme .compass-content {
        width: 95%;
    }

    .compass-theme .compass-auth-card {
        padding: 24px 20px;
    }
}


/* ============================================================
   18. ACCESSIBILITY — reduced motion preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .compass-theme *,
    .compass-theme *::before,
    .compass-theme *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   END OF compass.css v1.0
   ============================================================ */


/* ============================================================
   19. AUTH PAGES — additional rules for login/register forms
   ============================================================ */

/* Login form wrapper inside login_layout */
.compass-theme .compass-auth-form-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.compass-theme .compass-auth-heading {
    color: var(--cv-teal-dark);
    font-family: "athelas", Georgia, serif;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 24px;
}

.compass-theme .compass-auth-field {
    margin-bottom: 16px;
}

.compass-theme .compass-auth-label {
    display: block;
    color: var(--cv-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.compass-theme .compass-auth-icon {
    background: var(--cv-teal-light);
    border: 1px solid var(--cv-border);
    border-right: none;
    color: var(--cv-teal-dark);
    border-radius: 6px 0 0 6px;
    padding: 0 12px;
    display: flex;
    align-items: center;
}

.compass-theme .compass-auth-input {
    border-radius: 0 6px 6px 0;
}

.compass-theme .compass-auth-input:focus {
    box-shadow: 0 0 0 2px rgba(109, 151, 168, 0.15);
}

.compass-theme .compass-auth-error {
    color: #c45050;
    font-size: 0.85rem;
    margin-top: 4px;
    margin-bottom: 0;
}

.compass-theme .compass-auth-submit {
    width: 100%;
    background: var(--cv-teal);
    color: var(--cv-wordmark);
    border: 1px solid var(--cv-teal-dark);
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-top: 8px;
    transition: background 0.15s ease;
}

.compass-theme .compass-auth-submit:hover {
    background: var(--cv-teal-dark);
    color: var(--cv-wordmark);
}

/* OAuth divider */
.compass-theme .compass-auth-divider {
    position: relative;
    text-align: center;
    margin: 24px 0 16px 0;
    color: var(--cv-body-dim);
    font-size: 0.85rem;
}

.compass-theme .compass-auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cv-border);
    z-index: 0;
}

.compass-theme .compass-auth-divider span {
    background: var(--cv-panel);
    padding: 0 12px;
    position: relative;
    z-index: 1;
    text-transform: lowercase;
}

/* OAuth provider buttons */
.compass-theme .compass-auth-oauth {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border-radius: 6px;
    color: var(--cv-wordmark);
    text-align: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: opacity 0.15s ease;
    border: none;
}

.compass-theme .compass-auth-oauth:hover {
    color: var(--cv-wordmark);
    opacity: 0.9;
}

.compass-theme .compass-auth-oauth i {
    margin-right: 6px;
}

.compass-theme .compass-auth-oauth-discord {
    background: #5865F2;
}

.compass-theme .compass-auth-oauth-ivao {
    background: #0d2c99;
}

.compass-theme .compass-auth-oauth-vatsim {
    background: #29B473;
}

/* Bottom links */
.compass-theme .compass-auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 0.85rem;
}

.compass-theme .compass-auth-link-register,
.compass-theme .compass-auth-link-forgot {
    color: var(--cv-teal-dark);
}

.compass-theme .compass-auth-link-register:hover,
.compass-theme .compass-auth-link-forgot:hover {
    color: var(--cv-gold);
}

/* Auth-page footer (minimal, below the form on login_layout) */
.compass-theme .compass-auth-footer {
    padding: 24px 16px 16px 16px;
    text-align: center;
    color: var(--cv-wordmark);
    opacity: 0.7;
    font-size: 0.8rem;
}

.compass-theme .compass-auth-footer-inner p {
    margin: 4px 0;
}

.compass-theme .compass-auth-footer-attribution {
    font-size: 0.75rem;
    opacity: 0.7;
}

.compass-theme .compass-auth-footer-attribution a {
    color: var(--cv-gold);
}

.compass-theme .compass-auth-footer-attribution a:hover {
    color: var(--cv-wordmark);
}


/* ============================================================
   20. REGISTER FORM
   ============================================================ */

.compass-theme .compass-register-form {
    margin: 24px 0;
}

.compass-theme .compass-register-card {
    background: var(--cv-panel);
    border: 1px solid var(--cv-border);
    border-radius: 10px;
    padding: 32px;
    box-shadow: var(--cv-shadow);
}

.compass-theme .compass-register-heading {
    color: var(--cv-teal-dark);
    font-family: "athelas", Georgia, serif;
    font-size: 1.75rem;
    margin-bottom: 4px;
}

.compass-theme .compass-register-subtitle {
    color: var(--cv-body-dim);
    margin-bottom: 24px;
    font-size: 1rem;
}

.compass-theme .compass-register-toc {
    background: var(--cv-teal-light);
    border: 1px solid var(--cv-border);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 20px 0 12px 0;
    font-size: 0.85rem;
    max-height: 200px;
    overflow-y: auto;
}

.compass-theme .compass-register-check {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 8px;
}

.compass-theme .compass-register-check .form-check-input {
    margin-top: 4px;
    margin-left: 0;
    position: static;
}

.compass-theme .compass-register-check .form-check-label {
    margin-left: 0;
    color: var(--cv-body);
}

.compass-theme .compass-register-submit-wrapper {
    text-align: right;
    padding-top: 20px;
    border-top: 1px solid var(--cv-border);
    margin-top: 20px;
}

.compass-theme .compass-register-submit {
    padding: 10px 32px;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.compass-theme .compass-register-submit:disabled {
    background: var(--cv-border);
    border-color: var(--cv-border);
    color: var(--cv-body-dim);
    cursor: not-allowed;
}


/* ============================================================
   END OF compass.css v1.0 — auth additions
   ============================================================ */


/* ============================================================
   21. MAIN SITE LINK — subtle visual differentiation
   ============================================================ */

/* The Main Site link gets a subtle gold tint on its icon
   to signal "this leaves the current site" without being loud about it.
   On hover, the whole link goes gold like other nav items. */

.compass-theme .compass-mainsite-link .nav-link i {
    color: var(--cv-gold);
    opacity: 0.85;
}

.compass-theme .compass-mainsite-link .nav-link:hover i,
.compass-theme .compass-mainsite-link .nav-link:focus i {
    color: var(--cv-gold);
    opacity: 1;
}

/* On mobile, slightly more separation between the Main Site link
   and the rest of the nav, since it's a different category of link */
@media (max-width: 991px) {
    .compass-theme .compass-mainsite-link {
        border-bottom: 1px solid rgba(255, 253, 249, 0.15);
        margin-bottom: 4px;
        padding-bottom: 4px;
    }
}


/* ============================================================
   22. NOW UI KIT PANEL OVERRIDES — kill the blue banners
   ============================================================ */

/* Dashboard and PIREP pages use Now UI Kit's .panel-heading and various
   .bg-primary card-header patterns. The framework hardcodes a bright blue
   that clashes with Compass identity. Override site-wide to teal. */

.compass-theme .panel-heading,
.compass-theme .card-header,
.compass-theme .panel-primary > .panel-heading,
.compass-theme .panel-info > .panel-heading,
.compass-theme .panel-default > .panel-heading {
    background: var(--cv-teal) !important;
    color: var(--cv-wordmark) !important;
    border: none !important;
    padding: 12px 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.compass-theme .panel-heading h1,
.compass-theme .panel-heading h2,
.compass-theme .panel-heading h3,
.compass-theme .panel-heading h4,
.compass-theme .panel-heading h5,
.compass-theme .panel-heading h6,
.compass-theme .panel-heading .panel-title,
.compass-theme .card-header h1,
.compass-theme .card-header h2,
.compass-theme .card-header h3,
.compass-theme .card-header h4,
.compass-theme .card-header h5,
.compass-theme .card-header h6 {
    color: var(--cv-wordmark) !important;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

/* The panel/card body itself */
.compass-theme .panel,
.compass-theme .panel-default,
.compass-theme .panel-primary,
.compass-theme .panel-info {
    background: var(--cv-panel);
    border: 1px solid var(--cv-border);
    border-radius: 8px;
    box-shadow: var(--cv-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.compass-theme .panel-body {
    padding: 16px 18px;
    background: var(--cv-panel);
    color: var(--cv-body);
}

/* Override bg-primary which Now UI Kit uses for various blue elements */
.compass-theme .bg-primary {
    background: var(--cv-teal) !important;
    color: var(--cv-wordmark) !important;
}

/* "File one now" type informational links inside panels */
.compass-theme .panel-body a,
.compass-theme .card-body a {
    color: var(--cv-teal-dark);
}

.compass-theme .panel-body a:hover,
.compass-theme .card-body a:hover {
    color: var(--cv-gold);
}


/* ============================================================
   23. DASHBOARD STAT CARDS — the four big numbers at the top
   ============================================================ */

/* The dashboard's "8 Flights / 6h 52m / $195.00 / YSSY" cards
   inherit Now UI Kit's blue card-signup styling. Override to match
   the Compass card aesthetic. */

.compass-theme .card.card-stats,
.compass-theme .card-signup.card-stats {
    background: var(--cv-teal-light) !important;
    border: 1px solid var(--cv-border);
}

.compass-theme .card-stats .statistics,
.compass-theme .card-stats .stat-number {
    color: var(--cv-teal-dark);
}

.compass-theme .card-stats .statistics .description,
.compass-theme .card-stats .stat-label {
    color: var(--cv-body-dim);
}


/* ============================================================
   24. PIREP STATUS BADGES — keep semantics, refine colour
   ============================================================ */

/* The "ACCEPTED" green badges on PIREPs are fine semantically
   (green = good outcome) but the specific shade can be calibrated
   to feel more like part of the Compass palette */

.compass-theme .badge-success,
.compass-theme .badge.bg-success {
    background: #4a8a5e !important;
    color: var(--cv-wordmark) !important;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
}

.compass-theme .badge-warning {
    background: var(--cv-gold) !important;
    color: var(--cv-wordmark) !important;
}

.compass-theme .badge-danger,
.compass-theme .badge.bg-danger {
    background: #c45050 !important;
    color: var(--cv-wordmark) !important;
}

.compass-theme .badge-info,
.compass-theme .badge.bg-info {
    background: var(--cv-teal) !important;
    color: var(--cv-wordmark) !important;
}


/* ============================================================
   END OF compass.css v1.1 — dashboard refinements
   ============================================================ */


/* ============================================================
   25. NAV-TABS PANEL HEADERS — the real dashboard fix
   ============================================================ */

/* phpVMS uses .nav.nav-tabs as panel header elements with HARDCODED
   inline style="background: #067ec1; color: #FFF;" — not .panel-heading
   or .card-header as the documentation might suggest.
   
   Inline styles always beat external CSS without !important, so these
   rules use !important to forcibly override the snarky bastard's
   hardcoded blue panel banner styling. */

.compass-theme .nav.nav-tabs[role="tablist"] {
    background: var(--cv-teal) !important;
    color: var(--cv-wordmark) !important;
    padding: 12px 18px;
    border: none !important;
    border-radius: 8px 8px 0 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-size: 1rem;
    display: block;
    margin-bottom: 0;
}

/* The card containing the nav-tabs header — soften its border/shadow
   so it matches our other panels */
.compass-theme .card.border-blue-bottom {
    border: 1px solid var(--cv-border) !important;
    border-radius: 8px;
    box-shadow: var(--cv-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.compass-theme .card.border-blue-bottom .card-body {
    background: var(--cv-panel);
}

/* For cards that contain a nav-tabs header followed by a card-body,
   ensure visual continuity (no gap between header and body) */
.compass-theme .card > .nav.nav-tabs[role="tablist"] + .card-body {
    border-top: none;
}


/* ============================================================
   26. DASHBOARD STAT BOXES — correct selector
   ============================================================ */

/* The four dashboard stat cards (Flights / Total Hours / Balance / Current Airport)
   use .card.card-primary.dashboard-box with an inner watermark icon.
   
   Treatment: teal background with cream text, matching the panel banner
   aesthetic across the dashboard. Bootstrap's .text-white class applies
   white text by default but our cream (#FFFDF9) is warmer; we override with
   !important to win against the framework. */

.compass-theme .card.card-primary.dashboard-box {
    background: var(--cv-teal) !important;
    border: 1px solid var(--cv-teal-dark) !important;
    color: var(--cv-wordmark) !important;
    box-shadow: var(--cv-shadow);
    border-radius: 8px;
}

.compass-theme .card.card-primary.dashboard-box .card-body {
    background: transparent;
    text-align: center;
    padding: 20px;
}

.compass-theme .card.card-primary.dashboard-box .header {
    color: var(--cv-wordmark) !important;
    font-family: "athelas", Georgia, serif;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 8px 0 4px 0;
}

.compass-theme .card.card-primary.dashboard-box .description {
    color: var(--cv-wordmark) !important;
    opacity: 0.85;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

.compass-theme .card.card-primary.dashboard-box .icon-background .icon {
    color: var(--cv-wordmark);
    opacity: 0.18;
    font-size: 3rem;
}

/* Tables inside cards — used in Weather/Recent Reports/Newest Pilots */
.compass-theme .card-body table {
    margin-bottom: 0;
    box-shadow: none;
    border: none;
}

.compass-theme .card-body table.table-striped tr:nth-child(odd) {
    background: var(--cv-teal-light);
}

.compass-theme .card-body table.table-striped tr:nth-child(even) {
    background: var(--cv-panel);
}

.compass-theme .card-body table td {
    border-bottom: 1px solid var(--cv-border);
    padding: 10px 14px;
}

.compass-theme .card-body table tr:last-child td {
    border-bottom: none;
}

.compass-theme .card-body table .title {
    color: var(--cv-teal-dark);
    font-weight: 600;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

/* ============================================================
   27. PIREP DETAIL PAGE (compass-v1 v1.5)
   ============================================================ */

/* Page title — Athelas treatment matching dashboard/profile headlines */
.compass-theme .compass-pirep-title {
    font-family: "athelas", Georgia, serif;
    color: var(--cv-teal-dark);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Card containing departure/arrival info + progress bar */
.compass-theme .compass-pirep-card {
    background: var(--cv-card-bg);
    border: 1px solid var(--cv-border);
    border-radius: 8px;
    box-shadow: var(--cv-shadow);
}

/* Airport headings — Athelas, teal */
.compass-theme .compass-pirep-airport {
    font-family: "athelas", Georgia, serif;
    font-weight: 700;
    color: var(--cv-teal-dark);
    margin-bottom: 8px;
}

/* Progress bar — teal fill matching Compass palette */
.compass-theme .compass-pirep-progress {
    height: 12px;
    background: var(--cv-panel);
    border-radius: 6px;
    overflow: hidden;
}
.compass-theme .compass-pirep-progress .progress-bar {
    background-color: var(--cv-teal) !important;
}

/* Sidebar section headers — re-use the nav-tabs banner pattern from dashboard.
   The !important is needed because Bootstrap's .nav.nav-tabs has cascading
   rules that otherwise win. See section 12 for the same pattern. */
.compass-theme .compass-pirep-sidebar-header {
    background: var(--cv-teal) !important;
    color: var(--cv-wordmark) !important;
    font-family: "athelas", Georgia, serif;
    font-weight: 600;
    padding: 8px 14px;
    border: none !important;
    border-radius: 4px 4px 0 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.95rem;
    display: block;
}

/* Details list — under each banner header */
.compass-theme .compass-pirep-details .list-group-item {
    background: var(--cv-card-bg);
    border: 1px solid var(--cv-border);
    border-top: none;
    padding: 8px 14px;
    font-size: 0.9rem;
}
.compass-theme .compass-pirep-details .list-group-item:first-child {
    border-top: 1px solid var(--cv-border);
}
.compass-theme .compass-pirep-details .list-group-item span:first-child {
    color: var(--cv-body-dim);
    font-weight: 500;
}
.compass-theme .compass-pirep-details .list-group-item span:last-child {
    color: var(--cv-teal-dark);
    font-weight: 600;
    text-align: right;
}

/* Flight Log table — timestamped events from SmartCARS */
.compass-theme .compass-pirep-log {
    background: var(--cv-card-bg);
    border: 1px solid var(--cv-border);
    border-radius: 0 0 8px 8px;
    margin-top: 0;
}
.compass-theme .compass-pirep-log td {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--cv-border);
}
.compass-theme .compass-pirep-log tr:last-child td {
    border-bottom: none;
}
.compass-theme .compass-pirep-log-time {
    color: var(--cv-body-dim);
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ============================================================
   28. PILOTS TABLE — DataTables integration (compass-v1 v1.5)
   ============================================================ */

/* The DataTables wrapper that contains the search box, length menu, and
   pagination needs spacing and aesthetic alignment with Compass identity. */
.compass-theme .dataTables_wrapper {
    padding: 0;
    margin-top: 8px;
}

/* Search input — make it look like part of Compass rather than stock DataTables */
.compass-theme .dataTables_filter {
    text-align: right;
    margin-bottom: 12px;
}
.compass-theme .dataTables_filter label {
    color: var(--cv-teal-dark);
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 6px;
}
.compass-theme .dataTables_filter input {
    border: 1px solid var(--cv-border);
    border-radius: 4px;
    padding: 6px 12px;
    margin-left: 8px;
    background: var(--cv-card-bg);
    font-size: 0.9rem;
    min-width: 250px;
}
.compass-theme .dataTables_filter input:focus {
    border-color: var(--cv-teal);
    box-shadow: 0 0 0 3px rgba(109, 151, 168, 0.15);
    outline: none;
}

/* Length menu (number of pilots per page) */
.compass-theme .dataTables_length {
    color: var(--cv-body-dim);
    font-size: 0.85rem;
    margin-bottom: 12px;
}
.compass-theme .dataTables_length select {
    border: 1px solid var(--cv-border);
    border-radius: 4px;
    padding: 3px 8px;
    margin: 0 4px;
    background: var(--cv-card-bg);
}

/* Info text ("Showing X to Y of Z pilots") */
.compass-theme .dataTables_info {
    color: var(--cv-body-dim);
    font-size: 0.85rem;
    padding-top: 12px;
}

/* Pagination — keep stock DataTables Bootstrap 5 styling but accent the active page in teal */
.compass-theme .dataTables_paginate {
    padding-top: 12px;
}
.compass-theme .pagination .page-item.active .page-link {
    background-color: var(--cv-teal);
    border-color: var(--cv-teal);
    color: var(--cv-wordmark);
}
.compass-theme .pagination .page-link {
    color: var(--cv-teal-dark);
}
.compass-theme .pagination .page-link:hover {
    background-color: var(--cv-panel);
    color: var(--cv-teal);
}

/* Sortable column headers — show sort indicators in teal */
.compass-theme table.dataTable thead th {
    border-bottom: 2px solid var(--cv-teal) !important;
    color: var(--cv-teal-dark);
    font-weight: 700;
    padding: 10px 12px;
}
.compass-theme table.dataTable thead th.sorting:hover {
    color: var(--cv-teal);
    cursor: pointer;
}

/* Pilots table — slightly tighter row height than default */
.compass-theme .compass-pilots-table tbody td {
    vertical-align: middle;
    padding: 8px 12px;
}
.compass-theme .compass-pilots-table .photo-container img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Pilot ID column — monospace for that "this is a code" feel */
.compass-theme .compass-pilots-table tbody td:nth-child(2) a {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    color: var(--cv-teal-dark);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Pilot Name column — regular weight, teal-dark on hover */
.compass-theme .compass-pilots-table tbody td:nth-child(3) a {
    color: var(--cv-teal-dark);
    font-weight: 500;
}
.compass-theme .compass-pilots-table tbody td:nth-child(3) a:hover,
.compass-theme .compass-pilots-table tbody td:nth-child(2) a:hover {
    color: var(--cv-teal);
    text-decoration: underline;
}

/* Flight Log table — override inherited overflow:hidden from now-ui-kit/beta theme.
   The base framework applies overflow:hidden to .table elements, which is fine for
   most uses but clips the flight log table whose natural height exceeds whatever
   container is constraining it. Force visible and remove the height constraint. */
.compass-theme .compass-pirep-log {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
}

/* Flight Log table cells — override position/z-index inherited from the Bootstrap
   datepicker plugin (_plugin-datepicker.scss). That plugin's calendar widget is
   ALSO rendered as a <table class="table-condensed"> and sets position:relative;
   z-index:-1 on its cells for internal layering. Our flight log table picks up
   "table-condensed" purely for compact padding and has nothing to do with the
   datepicker, but the plugin's selector isn't scoped to its own widget — it
   targets any .table-condensed table site-wide. The negative z-index sinks our
   cells behind the page's own background (--cv-bg), making the content fully
   invisible (but still selectable/copyable, since paint order ≠ DOM order) while
   every box still measures its correct, full height. Diagnosed 17 June 2026. */
.compass-theme .compass-pirep-log > tbody > tr > td,
.compass-theme .compass-pirep-log > tbody > tr > th,
.compass-theme .compass-pirep-log > thead > tr > td,
.compass-theme .compass-pirep-log > thead > tr > th,
.compass-theme .compass-pirep-log > tfoot > tr > td,
.compass-theme .compass-pirep-log > tfoot > tr > th {
    position: static !important;
    z-index: auto !important;
}

/* Also ensure the table rows display correctly with proper height */
.compass-theme .compass-pirep-log tbody,
.compass-theme .compass-pirep-log tr,
.compass-theme .compass-pirep-log td {
    display: revert;
    overflow: visible !important;
}

.compass-theme .compass-pirep-log {
    display: table !important;
    width: 100% !important;
}

.compass-theme .compass-pirep-log tbody {
    display: table-row-group !important;
}

.compass-theme .compass-pirep-log tr {
    display: table-row !important;
}

.compass-theme .compass-pirep-log td {
    display: table-cell !important;
}

/* ============================================================
   29. PILOTS TABLE — Minimum Hours Filter (compass-v1 v1.6)
   ============================================================ */

.compass-theme .compass-min-hours-label {
    color: var(--cv-teal-dark);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.compass-theme .compass-min-hours-input {
    border: 1px solid var(--cv-border);
    border-radius: 4px;
    padding: 6px 12px;
    background: var(--cv-card-bg);
    font-size: 0.9rem;
    width: 100px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    text-align: right;
}

.compass-theme .compass-min-hours-input:focus {
    border-color: var(--cv-teal);
    box-shadow: 0 0 0 3px rgba(109, 151, 168, 0.15);
    outline: none;
}

/* Hide the number input spinner controls on Webkit for cleaner look — keep on Firefox */
.compass-theme .compass-min-hours-input::-webkit-outer-spin-button,
.compass-theme .compass-min-hours-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   30. PILOTS TABLE — Active/All View Toggle (compass-v1 v1.10)
   ============================================================ */

.compass-theme .compass-view-toggle {
    display: inline-flex;
    border: 1px solid var(--cv-border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--cv-card-bg);
}

.compass-theme .compass-toggle-btn {
    background: transparent;
    border: none;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cv-body-dim);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
}

.compass-theme .compass-toggle-btn:hover:not(.active) {
    background: var(--cv-panel);
    color: var(--cv-teal);
}

.compass-theme .compass-toggle-btn.active {
    background: var(--cv-teal);
    color: var(--cv-wordmark);
    cursor: default;
}

.compass-theme .compass-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--cv-border);
}

/* Ensure focus state is visible for keyboard navigation */
.compass-theme .compass-toggle-btn:focus-visible {
    outline: 2px solid var(--cv-gold);
    outline-offset: 1px;
}