/* ===========================================================================
   portal/assets/css/style.css
   ===========================================================================
   TFI portal theme. Light palette pulled from the logo:
     - Brand cyan      : #1ea1d6 (primary)
     - Brand deep blue : #0b4f7a (dark accents, hover)
     - Off-white bg    : #f6f9fc
     - Card white      : #ffffff
     - Body text       : #1a2733
     - Muted text      : #6c7a87
     - Hairline grey   : #e3e8ee
     - Maple red accent: #d62b2b
   =========================================================================== */

:root {
    --tfi-cyan:    #1ea1d6;
    --tfi-cyan-2:  #1789b8;
    --tfi-blue:    #0b4f7a;
    --tfi-blue-2:  #073a5c;
    --tfi-bg:      #f6f9fc;
    --tfi-card:    #ffffff;
    --tfi-text:    #1a2733;
    --tfi-muted:   #6c7a87;
    --tfi-hair:    #e3e8ee;
    --tfi-red:     #d62b2b;
    --tfi-shadow:  0 2px 12px rgba(11, 79, 122, 0.08);
    --tfi-radius:  10px;
}

html, body { height: 100%; }
body.tfi-body {
    margin: 0;
    background: var(--tfi-bg);
    color: var(--tfi-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
a { color: var(--tfi-blue); text-decoration: none; }
a:hover { color: var(--tfi-cyan-2); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
    color: var(--tfi-text);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tfi-main { flex: 1 0 auto; }

/* Top nav */
.tfi-nav {
    background: var(--tfi-card);
    border-bottom: 1px solid var(--tfi-hair);
    box-shadow: 0 1px 0 rgba(11, 79, 122, 0.03);
    position: sticky;
    top: 0;
    z-index: 100;
}
.tfi-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--tfi-text);
    text-decoration: none;
}
.tfi-brand:hover { text-decoration: none; color: var(--tfi-blue); }
.tfi-brand-text { font-size: 1.1rem; letter-spacing: -0.01em; }
.tfi-brand-text strong { color: var(--tfi-cyan); font-weight: 800; }

.tfi-mainnav {
    display: flex;
    align-items: center;
    gap: 18px;
    font-weight: 500;
}
.tfi-mainnav a {
    color: var(--tfi-text);
    padding: 6px 4px;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    text-decoration: none;
}
.tfi-mainnav a:hover { color: var(--tfi-cyan); }
.tfi-mainnav a.active {
    color: var(--tfi-cyan);
    border-bottom-color: var(--tfi-cyan);
}

/* Buttons */
.tfi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--tfi-radius);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.tfi-btn-primary {
    background: var(--tfi-cyan);
    color: #fff;
    border-color: var(--tfi-cyan);
}
.tfi-btn-primary:hover {
    background: var(--tfi-cyan-2);
    border-color: var(--tfi-cyan-2);
    color: #fff;
    box-shadow: var(--tfi-shadow);
}
.tfi-btn-outline {
    background: transparent;
    color: var(--tfi-blue);
    border-color: var(--tfi-hair);
}
.tfi-btn-outline:hover {
    border-color: var(--tfi-cyan);
    color: var(--tfi-cyan);
    background: rgba(30, 161, 214, .05);
}
.tfi-btn-block { width: 100%; }
.tfi-btn-lg { padding: 12px 28px; font-size: 1.05rem; }

/* OAuth provider buttons — each in its own brand color so they're
   instantly recognizable AND visible against the white auth card. */

/* Google — use Google's official brand blue (#4285F4) so the button
   actually stands out on a white card. White-on-white was invisible. */
.tfi-btn-google {
    background: #4285F4;
    color: #ffffff !important;
    border: 1px solid #4285F4;
}
.tfi-btn-google:hover {
    background: #3367D6;
    border-color: #3367D6;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(66, 133, 244, .35);
}
.tfi-btn-google i { color: #ffffff; }

.tfi-btn-facebook {
    background: #1877F2;
    color: #ffffff !important;
    border: 1px solid #1877F2;
}
.tfi-btn-facebook:hover {
    background: #166FE5;
    border-color: #166FE5;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(24, 119, 242, .30);
}
.tfi-btn-facebook i { color: #ffffff; }

.tfi-btn-linkedin {
    background: #0A66C2;
    color: #ffffff !important;
    border: 1px solid #0A66C2;
}
.tfi-btn-linkedin:hover {
    background: #084d96;
    border-color: #084d96;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(10, 102, 194, .30);
}
.tfi-btn-linkedin i { color: #ffffff; }

/* Cards / panels */
.tfi-card {
    background: var(--tfi-card);
    border: 1px solid var(--tfi-hair);
    border-radius: var(--tfi-radius);
    box-shadow: var(--tfi-shadow);
    padding: 28px;
}

/* Hero */
.tfi-hero {
    background: linear-gradient(135deg, #ffffff 0%, #eaf6fc 100%);
    border-bottom: 1px solid var(--tfi-hair);
    padding: 80px 0 90px;
    position: relative;
    overflow: hidden;
}
.tfi-hero::before {
    content: '';
    position: absolute;
    right: -10%;
    top: -30%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(30, 161, 214, .12) 0%, rgba(30, 161, 214, 0) 70%);
    z-index: 0;
}
.tfi-hero > .container { position: relative; z-index: 1; }
.tfi-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1rem;
}
.tfi-hero h1 .tfi-accent { color: var(--tfi-cyan); }
.tfi-hero p.lead {
    font-size: 1.2rem;
    color: var(--tfi-muted);
    margin-bottom: 2rem;
    max-width: 640px;
}
.tfi-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Feature row */
.tfi-feature { text-align: center; padding: 24px 16px; }
.tfi-feature .tfi-feature-icon {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(30, 161, 214, .1);
    color: var(--tfi-cyan);
    border-radius: 50%;
    font-size: 1.4rem;
    margin-bottom: 16px;
}
.tfi-feature h3 { font-size: 1.15rem; margin-bottom: 8px; }
.tfi-feature p { font-size: .95rem; color: var(--tfi-muted); margin: 0; }

/* Forms */
.tfi-form-label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    color: var(--tfi-text);
    margin-bottom: 6px;
}
.tfi-form-input,
.tfi-form-select,
.tfi-form-textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--tfi-hair);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tfi-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.tfi-form-input:focus,
.tfi-form-select:focus,
.tfi-form-textarea:focus {
    outline: none;
    border-color: var(--tfi-cyan);
    box-shadow: 0 0 0 3px rgba(30, 161, 214, .15);
}
.tfi-form-help {
    display: block;
    font-size: .82rem;
    color: var(--tfi-muted);
    margin-top: 4px;
}

/* Auth pages (narrow centred card) */
.tfi-auth-wrap {
    max-width: 460px;
    margin: 60px auto;
    padding: 0 16px;
}
.tfi-auth-wrap h1 {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 8px;
}
.tfi-auth-wrap .tfi-auth-sub {
    text-align: center;
    color: var(--tfi-muted);
    margin-bottom: 28px;
}

/* Alerts */
.tfi-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: .95rem;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.tfi-alert-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.tfi-alert-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.tfi-alert-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* Role-picker grid */
.tfi-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 24px 0;
}
.tfi-role-card {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--tfi-hair);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
}
.tfi-role-card:hover {
    border-color: var(--tfi-cyan);
    box-shadow: var(--tfi-shadow);
}
.tfi-role-card input { margin-right: 8px; accent-color: var(--tfi-cyan); }
.tfi-role-card-label { font-weight: 600; }
.tfi-role-card-desc {
    display: block;
    font-size: .82rem;
    color: var(--tfi-muted);
    margin-top: 4px;
    margin-left: 24px;
}
.tfi-role-card.is-checked {
    border-color: var(--tfi-cyan);
    background: rgba(30, 161, 214, .05);
}

/* Profile header */
.tfi-profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
}
.tfi-profile-photo {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tfi-cyan), var(--tfi-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
}
.tfi-profile-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.tfi-profile-meta h1 { margin: 0 0 4px; font-size: 1.8rem; }
.tfi-profile-headline { color: var(--tfi-muted); font-size: 1rem; margin: 0; }

/* Role badges */
.tfi-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(30, 161, 214, .1);
    color: var(--tfi-blue);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    margin: 4px 4px 0 0;
}
.tfi-role-badge.primary { background: var(--tfi-cyan); color: #fff; }

/* Footer */
.tfi-footer {
    background: var(--tfi-card);
    border-top: 1px solid var(--tfi-hair);
    margin-top: 60px;
}
.tfi-footer-links a { color: var(--tfi-muted); margin-left: 16px; }
.tfi-footer-links a:hover { color: var(--tfi-cyan); }

/* Responsive */
@media (max-width: 768px) {
    .tfi-mainnav { gap: 10px; font-size: .92rem; }
    .tfi-mainnav .tfi-btn { padding: 7px 14px; }
    .tfi-hero { padding: 50px 0 60px; }
    .tfi-profile-header { flex-direction: column; text-align: center; }
}