/* ============================================================
   The Fish Hub — Brand Stylesheet
   Mobile-first, dark/light mode, Bootstrap 5 override layer
   ============================================================ */

/* ── Brand Tokens ─────────────────────────────────────────── */
:root {
    --tfh-green:        #2D6A4F;
    --tfh-green-light:  #52B788;
    --tfh-green-dark:   #1B4332;
    --tfh-gold:         #F0A500;
    --tfh-gold-light:   #FFD166;
    --tfh-water:        #0A3D62;
    --tfh-water-light:  #1E6FA8;

    /* Light mode (default) */
    --tfh-bg:           #F8FAF9;
    --tfh-bg-card:      #FFFFFF;
    --tfh-bg-nav:       #FFFFFF;
    --tfh-text:         #1A2E22;
    --tfh-text-muted:   #6B7C72;
    --tfh-border:       #DEE8E2;
    --tfh-shadow:       0 2px 12px rgba(45,106,79,.10);
    --tfh-shadow-lg:    0 8px 32px rgba(45,106,79,.15);

    --bs-primary:        var(--tfh-green);
    --bs-primary-rgb:    45, 106, 79;
    --bs-link-color:     var(--tfh-green);
    --bs-border-radius:  0.5rem;
}

[data-theme="dark"] {
    --tfh-bg:           #0D1F17;
    --tfh-bg-card:      #132619;
    --tfh-bg-nav:       #0A1810;
    --tfh-text:         #E8F5EE;
    --tfh-text-muted:   #8AAF97;
    --tfh-border:       #243B2D;
    --tfh-shadow:       0 2px 12px rgba(0,0,0,.40);
    --tfh-shadow-lg:    0 8px 32px rgba(0,0,0,.60);
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--tfh-bg);
    color: var(--tfh-text);
    line-height: 1.6;
    transition: background-color .3s ease, color .3s ease;
    min-height: 100vh;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--tfh-text);
    line-height: 1.2;
}

.text-muted  { color: var(--tfh-text-muted) !important; }
.text-brand  { color: var(--tfh-green) !important; }
.text-gold   { color: var(--tfh-gold) !important; }

/* ── Navbar ───────────────────────────────────────────────── */
.tfh-navbar {
    background: var(--tfh-bg-nav);
    border-bottom: 1px solid var(--tfh-border);
    box-shadow: var(--tfh-shadow);
    padding: .75rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: background .3s ease;
}

.tfh-navbar .navbar-brand img {
    height: 36px;
}

.tfh-navbar .nav-link {
    color: var(--tfh-text) !important;
    font-weight: 500;
    padding: .5rem .85rem !important;
    border-radius: .375rem;
    transition: background .2s ease, color .2s ease;
}

.tfh-navbar .nav-link:hover,
.tfh-navbar .nav-link.active {
    background: rgba(45,106,79,.1);
    color: var(--tfh-green) !important;
}

/* ── Cards ────────────────────────────────────────────────── */
.tfh-card {
    background: var(--tfh-bg-card);
    border: 1px solid var(--tfh-border);
    border-radius: 1rem;
    box-shadow: var(--tfh-shadow);
    padding: 1.5rem;
    transition: box-shadow .2s ease, transform .2s ease;
}

.tfh-card:hover { box-shadow: var(--tfh-shadow-lg); }

.tfh-card-elevated {
    box-shadow: var(--tfh-shadow-lg);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-tfh {
    background: var(--tfh-green);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding: .625rem 1.5rem;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}

.btn-tfh:hover {
    background: var(--tfh-green-dark);
    color: #fff;
    box-shadow: 0 4px 16px rgba(45,106,79,.35);
    transform: translateY(-1px);
}

.btn-tfh:active { transform: translateY(0); }

.btn-tfh-outline {
    background: transparent;
    color: var(--tfh-green);
    border: 2px solid var(--tfh-green);
    border-radius: .5rem;
    padding: .5rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.btn-tfh-outline:hover {
    background: var(--tfh-green);
    color: #fff;
}

.btn-gold {
    background: var(--tfh-gold);
    color: #1A2E22;
    border: none;
    border-radius: .5rem;
    padding: .625rem 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

.btn-gold:hover { background: var(--tfh-gold-light); transform: translateY(-1px); }

/* ── Forms ────────────────────────────────────────────────── */
.tfh-input {
    background: var(--tfh-bg);
    border: 1.5px solid var(--tfh-border);
    border-radius: .5rem;
    color: var(--tfh-text);
    padding: .65rem 1rem;
    width: 100%;
    font-size: .95rem;
    transition: border-color .2s ease, box-shadow .2s ease;
    outline: none;
}

.tfh-input:focus {
    border-color: var(--tfh-green);
    box-shadow: 0 0 0 3px rgba(45,106,79,.18);
}

.tfh-input::placeholder { color: var(--tfh-text-muted); }

.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--tfh-text);
    margin-bottom: .35rem;
}

/* ── Hero Section ─────────────────────────────────────────── */
.tfh-hero {
    background: linear-gradient(135deg, var(--tfh-green-dark) 0%, var(--tfh-water) 100%);
    color: #fff;
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.tfh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/brand/main_logo.png') center/contain no-repeat;
    opacity: .04;
    pointer-events: none;
}

.tfh-hero h1  { color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); }
.tfh-hero p   { color: rgba(255,255,255,.85); font-size: 1.15rem; }

/* ── Feature Icons ────────────────────────────────────────── */
.feature-icon {
    width: 56px;
    height: 56px;
    background: rgba(45,106,79,.12);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* ── Stats ────────────────────────────────────────────────── */
.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--tfh-green);
    line-height: 1;
}

.stat-label {
    font-size: .85rem;
    color: var(--tfh-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Auth pages ───────────────────────────────────────────── */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(150deg, var(--tfh-green-dark) 0%, var(--tfh-water) 100%);
    padding: 2rem 1rem;
}

.auth-card {
    background: var(--tfh-bg-card);
    border-radius: 1.25rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.auth-logo {
    display: block;
    height: 48px;
    margin: 0 auto 1.5rem;
}

/* ── Dashboard ────────────────────────────────────────────── */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.stat-card {
    background: var(--tfh-bg-card);
    border: 1px solid var(--tfh-border);
    border-radius: .875rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-card .icon {
    font-size: 2rem;
    line-height: 1;
}

/* ── Footer ───────────────────────────────────────────────── */
.tfh-footer {
    background: var(--tfh-green-dark);
    color: rgba(255,255,255,.75);
    padding: 3rem 0 1.5rem;
    margin-top: auto;
}

.tfh-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.tfh-footer a:hover { color: var(--tfh-gold); }
.tfh-footer .footer-brand img { height: 32px; filter: brightness(10); }

/* ── Alert / Validation ───────────────────────────────────── */
.tfh-alert {
    border-radius: .625rem;
    padding: .875rem 1.125rem;
    font-size: .9rem;
    border: none;
}

.tfh-alert-error   { background: rgba(220,53,69,.12);  color: #DC3545; }
.tfh-alert-success { background: rgba(45,106,79,.12);  color: var(--tfh-green); }
.tfh-alert-info    { background: rgba(30,111,168,.12); color: var(--tfh-water-light); }

/* ── Dark mode toggle ─────────────────────────────────────── */
.theme-toggle {
    background: none;
    border: 1.5px solid var(--tfh-border);
    border-radius: 2rem;
    padding: .35rem .75rem;
    color: var(--tfh-text);
    cursor: pointer;
    font-size: .85rem;
    transition: all .2s ease;
}

.theme-toggle:hover { border-color: var(--tfh-green); color: var(--tfh-green); }

/* ── Badge ────────────────────────────────────────────────── */
.badge-premium {
    background: linear-gradient(135deg, var(--tfh-gold), #FF8C00);
    color: #1A2E22;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.badge-member {
    background: rgba(45,106,79,.15);
    color: var(--tfh-green);
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 2rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .tfh-hero { padding: 3rem 0 2.5rem; }
    .tfh-card { padding: 1.25rem; }
    .auth-card { padding: 1.75rem; }
}

/* ── Loading Spinner ──────────────────────────────────────── */
.tfh-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--tfh-border);
    border-top-color: var(--tfh-green);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* ── Blazor error UI ──────────────────────────────────────── */
#blazor-error-ui {
    background: #DC3545;
    color: #fff;
    padding: .75rem 1.25rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: none;
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; font-weight: bold; }