/* ============================================================================
   GMT (Group Mission Trips, team 49807) Customer Portal
   Self-contained chrome + form styles, scoped to .gmt-portal-layout so nothing
   leaks into the admin app or other interfaces. Brand from interfaces/gmt/_gmt.css:
   primary blue #3E55FF, accent red #EB4149, dark sidebar #2F3035, Inter body / Anton headings.
   Layered under /api/team-brand/49807.css (which supplies the :root color vars too).
   ============================================================================ */

.gmt-portal-layout {
    --gmtp-primary: #3E55FF;
    --gmtp-accent: #EB4149;
    --gmtp-dark: #2F3035;
    --gmtp-bg: #F4F6FB;
    --gmtp-surface: #FFFFFF;
    --gmtp-border: #E3E7F0;
    --gmtp-text: #2F3035;
    --gmtp-muted: #7D8D98;
    --gmtp-radius: 10px;
    min-height: 100vh;
    background: var(--gmtp-bg);
    color: var(--gmtp-text);
    font-family: 'Inter', sans-serif;
}

.gmt-portal-layout h1,
.gmt-portal-layout h3 { font-family: 'Anton', sans-serif; color: var(--gmtp-primary); }
.gmt-portal-layout h2 { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--gmtp-primary); }

/* ----- Public (pre-login) chrome ----- */
.gmtp-public { min-height: 100vh; display: flex; flex-direction: column; background: #2F3035 url('/images/interfaces/gmt-portal/bg-min.jpg') center center / cover no-repeat; }
.gmtp-public-header { display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem 1rem; }
.gmtp-public-logo { max-width: 240px; height: auto; }
.gmtp-public-tag { margin-top: .5rem; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gmtp-muted); }
.gmtp-public-main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 1rem; }

/* ----- Auth card ----- */
.gmtp-card {
    background: var(--gmtp-surface);
    border: 1px solid var(--gmtp-border);
    border-radius: var(--gmtp-radius);
    box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 16px 40px rgba(62,85,255,.06);
    padding: 2rem 2rem 2.25rem;
    width: 100%;
    max-width: 460px;
    margin: 2rem auto;
}
.gmtp-card h1 { font-size: 34px; margin: 0 0 .25rem; }
.gmtp-lead { color: var(--gmtp-muted); margin: 0 0 1.5rem; }
.gmtp-form-row { margin-bottom: 1rem; }
.gmtp-form-row .form-label { display: block; font-weight: 600; color: var(--gmtp-text); margin-bottom: .35rem; }
.gmtp-form-actions { margin-top: 1.5rem; }
.gmtp-secondary-action { margin-top: .9rem; text-align: center; font-size: 14px; color: var(--gmtp-muted); }
.gmtp-secondary-action a { color: var(--gmtp-primary); font-weight: 600; text-decoration: none; }
.gmtp-secondary-action a:hover { text-decoration: underline; }

/* ----- Form controls (48px height, matching the interface standard) ----- */
.gmt-portal-layout .form-control,
.gmt-portal-layout .form-select {
    height: 48px; min-height: 48px;
    border: 1px solid #ced4da; border-radius: 6px;
    font-family: 'Inter', sans-serif; font-size: 14px;
    padding: 0 .75rem;
}
.gmt-portal-layout textarea.form-control { height: auto; min-height: 96px; padding: .6rem .75rem; }
.gmt-portal-layout .form-control:focus,
.gmt-portal-layout .form-select:focus {
    border-color: var(--gmtp-primary);
    box-shadow: 0 0 0 .2rem rgba(62,85,255,.15);
    outline: none;
}

/* ----- Buttons ----- */
.gmt-portal-layout .btn-primary,
.gmt-portal-layout .gmtp-btn {
    display: inline-block; width: 100%;
    background: var(--gmtp-primary); border: none; color: #FFF;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
    padding: 13px 18px; border-radius: 6px; cursor: pointer; text-align: center;
}
.gmt-portal-layout .btn-primary:hover,
.gmt-portal-layout .gmtp-btn:hover { background: #5C6FFD; color: #FFF; }
.gmt-portal-layout .gmtp-btn-accent { background: var(--gmtp-accent); }
.gmt-portal-layout .gmtp-btn-accent:hover { background: #f15b62; }
.gmt-portal-layout .gmtp-btn-inline { width: auto; padding: 11px 22px; }
.gmt-portal-layout .gmtp-btn-secondary { background: #6c757d; }
.gmt-portal-layout .gmtp-btn-secondary:hover { background: #5a6268; }

/* ----- Authed chrome: header + sidebar + main ----- */
.gmtp-authed { min-height: 100vh; display: flex; flex-direction: column; }
.gmtp-header {
    display: flex; align-items: center; gap: 1rem;
    background: var(--gmtp-surface); border-bottom: 1px solid var(--gmtp-border);
    padding: .65rem 1.25rem;
}
.gmtp-header-logo { max-height: 52px; width: auto; }
.gmtp-header-user { margin-left: auto; text-align: right; line-height: 1.25; }
.gmtp-header-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gmtp-muted); }
.gmtp-header-account { font-weight: 700; color: var(--gmtp-text); }
.gmtp-header-email { font-size: 13px; color: var(--gmtp-muted); }

/* enrollment switcher in the header */
.gmtp-enroll-switch { display: flex; align-items: center; gap: .5rem; }
.gmtp-enroll-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gmtp-muted); }
.gmtp-enroll-single { font-weight: 600; color: var(--gmtp-primary); }
.gmtp-enroll-select {
    height: 42px; min-width: 220px; max-width: 360px;
    border: 1px solid #ced4da; border-radius: 6px; background: #FFF;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--gmtp-text);
    padding: 0 .65rem; cursor: pointer;
}
.gmtp-enroll-select:focus { border-color: var(--gmtp-primary); outline: none; box-shadow: 0 0 0 .2rem rgba(62,85,255,.15); }

.gmtp-body { display: flex; flex: 1; min-height: 0; }
.gmtp-sidebar { width: 230px; flex: 0 0 230px; background: var(--gmtp-dark); padding-top: 1rem; }
.gmtp-nav { list-style: none; margin: 0; padding: 0; }
.gmtp-nav li a {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem 1.25rem; color: #D5D9DE; text-decoration: none;
    font-family: 'Inter', sans-serif; font-size: 14px;
}
.gmtp-nav li a i { width: 18px; text-align: center; }
.gmtp-nav li a:hover { background: #3A3B40; color: #FFF; }
.gmtp-nav li a.active { background: var(--gmtp-primary); color: #FFF; }
.gmtp-nav-logout { margin-top: .5rem; border-top: 1px solid #45464C; }

.gmtp-main { flex: 1; min-width: 0; padding: 1.5rem; }
.gmtp-main-inner { max-width: 1100px; margin: 0 auto; }

/* page title bar inside the portal */
.gmtp-page-title {
    background: var(--gmtp-primary); color: #FFF;
    font-family: 'Inter', sans-serif; font-size: 130%;
    padding: .55rem 1rem; border-radius: 6px; margin-bottom: 1.25rem;
}

/* content cards */
.gmtp-content-card {
    background: var(--gmtp-surface); border: 1px solid var(--gmtp-border);
    border-radius: var(--gmtp-radius); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.gmtp-content-card .card-header,
.gmt-portal-layout .card-header { background: #F8F9FA; }

/* metric tiles (dashboard) */
.gmtp-metric { border: 1px solid var(--gmtp-border); border-radius: 8px; padding: 1rem 1.1rem; background: #FFF; height: 100%; }
.gmtp-metric-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gmtp-muted); margin-bottom: .25rem; }
.gmtp-metric-value { font-size: 22px; font-weight: 700; color: var(--gmtp-text); }
.gmtp-metric-value.accent { color: var(--gmtp-accent); }

/* dashboard quick-links launchpad (home-screen shortcut tiles) */
.gmtp-launchpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gmtp-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem;
    padding: 1.4rem 1rem; text-decoration: none; text-align: center;
    background: #FFF; border: 1px solid var(--gmtp-border); border-radius: var(--gmtp-radius);
    color: var(--gmtp-text); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.gmtp-tile:hover { transform: translateY(-3px); border-color: var(--gmtp-primary); box-shadow: 0 8px 22px rgba(62,85,255,.14); color: var(--gmtp-primary); }
.gmtp-tile-icon {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(62,85,255,.10); color: var(--gmtp-primary); font-size: 22px;
    transition: background .12s ease, color .12s ease;
}
.gmtp-tile:hover .gmtp-tile-icon { background: var(--gmtp-primary); color: #FFF; }
.gmtp-tile-label { font-weight: 600; font-size: 14px; line-height: 1.2; }
@media (max-width: 900px) { .gmtp-launchpad { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gmtp-launchpad { grid-template-columns: 1fr; } }

/* profile photo avatar (view/upload/remove), modeled on the volunteer portal */
.gmtp-profile-head { display: flex; gap: 1.75rem; align-items: flex-start; flex-wrap: wrap; }
.gmtp-profile-fields { flex: 1; min-width: 240px; }
.gmtp-avatar-upload { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.gmtp-avatar-drop {
    position: relative; width: 140px; height: 140px; border-radius: 50%; overflow: hidden;
    cursor: pointer; border: 3px solid var(--gmtp-border); background: #F4F6FB;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.gmtp-avatar-drop:hover, .gmtp-avatar-drop--active { border-color: var(--gmtp-primary); box-shadow: 0 0 0 .2rem rgba(62,85,255,.15); }
.gmtp-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gmtp-avatar-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    background: rgba(47,48,53,.55); color: #FFF; font-size: 13px; font-weight: 600;
    opacity: 0; transition: opacity .12s ease; text-align: center;
}
.gmtp-avatar-overlay i { font-size: 20px; }
.gmtp-avatar-drop:hover .gmtp-avatar-overlay, .gmtp-avatar-drop--active .gmtp-avatar-overlay { opacity: 1; }
.gmtp-avatar-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gmtp-avatar-remove { background: none; border: none; color: var(--gmtp-accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
.gmtp-avatar-remove:hover { text-decoration: underline; }
@media (max-width: 600px) { .gmtp-profile-head { justify-content: center; } }

/* participant print view */
.gmtp-print-actions { max-width: 800px; margin: 1rem auto .5rem; display: flex; gap: .75rem; }
.gmtp-print-wrap { max-width: 800px; margin: 0 auto 2rem; background: #FFF; border: 1px solid var(--gmtp-border); border-radius: var(--gmtp-radius); padding: 2rem 2.25rem; }
.gmtp-print-head { text-align: center; border-bottom: 2px solid var(--gmtp-primary); padding-bottom: 1rem; margin-bottom: 1.25rem; }
.gmtp-print-logo { max-width: 180px; height: auto; }
.gmtp-print-head h1 { font-family: 'Anton', sans-serif; color: var(--gmtp-primary); margin: .5rem 0 .15rem; font-size: 28px; }
.gmtp-print-name { font-size: 18px; font-weight: 700; color: var(--gmtp-text); }
.gmtp-print-section { margin-bottom: 1.25rem; }
.gmtp-print-section h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--gmtp-primary); border-bottom: 1px solid var(--gmtp-border); padding-bottom: .3rem; margin-bottom: .65rem; }
.gmtp-print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; }
.gmtp-print-field { display: flex; flex-direction: column; padding: .15rem 0; }
.gmtp-print-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gmtp-muted); }
.gmtp-print-value { font-size: 14px; font-weight: 600; color: var(--gmtp-text); }
.gmtp-print-list { display: flex; flex-direction: column; gap: .5rem; }
.gmtp-print-crime-q { font-size: 13px; color: var(--gmtp-text); }
.gmtp-print-crime-desc { font-size: 13px; color: var(--gmtp-muted); padding-left: 1.5rem; margin-top: .15rem; }
@media print {
    .gmtp-public-header, .gmtp-print-actions { display: none !important; }
    .gmt-portal-layout, .gmtp-public, body { background: #FFF !important; }
    .gmtp-print-wrap { border: none; box-shadow: none; max-width: 100%; margin: 0; padding: 0; }
    .gmtp-print-section { page-break-inside: avoid; }
}

/* required-field asterisk */
.gmt-portal-layout .rfv { margin-right: 3px; color: var(--gmtp-accent); }

/* mobile */
.gmtp-hamburger { display: none; background: none; border: none; font-size: 20px; color: var(--gmtp-text); }
@media (max-width: 1024px) {
    .gmtp-sidebar { display: none; }
    .gmtp-hamburger { display: inline-block; }
    .gmtp-sidebar.gmtp-sidebar-open {
        display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 250px; z-index: 10000;
        box-shadow: 4px 0 20px rgba(0,0,0,.25); overflow-y: auto;
    }
    .gmtp-enroll-select { min-width: 150px; max-width: 200px; }
}

/* phones: enrollment switcher drops to its own full-width row below the logo/menu (Christine 2026-06-28) */
@media (max-width: 640px) {
    .gmtp-header { flex-wrap: wrap; row-gap: .5rem; }
    .gmtp-enroll-switch { order: 10; flex: 1 1 100%; }
    .gmtp-enroll-select { min-width: 0; max-width: none; flex: 1; }
}

/* ── Payment page (Stripe Elements) ── */
.gmtp-stripe-frame { padding: 1rem; border: 1px solid #DEE2E6; border-radius: .5rem; background: #FFF; }
.gmtp-paying-as { display: flex; align-items: center; padding: .6rem .9rem; background: #F1F5F9; border-radius: .5rem; color: #27282A; }
.gmtp-thanks-title { color: #00CC78; font-family: var(--font-headings, gotham, sans-serif); margin-bottom: .75rem; }

/* ── Action icon buttons: GMT brand colors (was leaking global green/pink). 2026-06-27 JB ── */
.gmt-portal-layout .grid-action-btn.gmtp-edit { background: var(--gmtp-primary) !important; color: #FFF !important; }
.gmt-portal-layout .grid-action-btn.gmtp-edit:hover { background: #5C6FFD !important; color: #FFF !important; }
.gmt-portal-layout .grid-action-btn.gmtp-delete { background: var(--gmtp-accent) !important; color: #FFF !important; }
.gmt-portal-layout .grid-action-btn.gmtp-delete:hover { background: #f15b62 !important; color: #FFF !important; }

/* ── Resources: native GMT-branded link grid (replaced the external iframe embed) 2026-06-27 ── */
.gmtp-resources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; align-items: start; margin-top: 1rem; }
.gmtp-resource-cat { background: #FFF; border: 1px solid var(--gmtp-border); border-radius: var(--gmtp-radius); padding: 1.1rem 1.25rem; }
.gmt-portal-layout .gmtp-resource-cat-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: var(--gmtp-primary); margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--gmtp-primary); }
.gmtp-resource-links { list-style: none; margin: 0; padding: 0; }
.gmtp-resource-links li a { display: flex; align-items: center; gap: .55rem; padding: .55rem .15rem; color: var(--gmtp-text); text-decoration: none; font-size: 14px; border-bottom: 1px solid #F0F2F7; }
.gmtp-resource-links li:last-child a { border-bottom: none; }
.gmtp-resource-links li a:hover { color: var(--gmtp-primary); }
.gmtp-resource-links li a i { color: var(--gmtp-primary); width: 16px; text-align: center; flex: 0 0 auto; }