/* =========================================================================
   PyTube shared styles (dark theme)
   Consolidated from the four app base templates + responsive improvements
   ========================================================================= */

body {
    background-color: #0f172a;
    color: #e2e8f0;
    margin: 0;
    padding-top: 70px; /* Space for fixed navbar */
}

/* ---- Navbar ---- */
header .navbar {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

.navbar-brand {
    font-weight: bold;
    color: #ffffff !important;
}

.navbar-logo {
    height: 50px;
    max-width: 100%;
}

.nav-link {
    color: #e2e8f0 !important;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: #3b82f6 !important;
}

/* ---- Progress bars (custom gradient variant) ---- */
.progress-bar {
    width: var(--progress);
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.6s ease;
}

/* ---- Footer ---- */
footer {
    background: #1e293b;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    color: #94a3b8;
    padding: 40px 0;
    margin-top: 50px;
}

footer h5 {
    color: #3b82f6;
}

footer a {
    color: #94a3b8;
    text-decoration: none;
}

footer a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

/* =========================================================================
   Responsive improvements
   ========================================================================= */

/* Media elements never overflow their containers */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Responsive YouTube embeds: only matched to the `#player` element itself;
   pages keep their own container CSS (fixed heights, placeholders, etc.) */
#player {
    max-width: 100%;
}

/* Long URLs, IDs, email addresses etc. */
.card-body, .table td, p, li {
    overflow-wrap: anywhere;
}

/* Code blocks wrap instead of overflowing */
pre, code, kbd, samp {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
}

/* Ensure content never escapes its container */
main .container, .row {
    max-width: 100%;
}

/* Bootstrap .card on the dark theme (roadmaps, generic lists) */
.card {
    background-color: #1e293b;
    color: #e2e8f0;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.card-title {
    color: #e2e8f0;
}
.card-header, .card-footer {
    border-color: rgba(59, 130, 246, 0.2);
    background-color: rgba(30, 41, 59, 0.8) !important;
    color: #cbd5e1;
}
/* Override Bootstrap !important white-ish classes on dark theme */
.bg-light {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}
.bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}
.list-group-item {
    background-color: transparent;
    color: #e2e8f0;
    border-color: rgba(59, 130, 246, 0.15);
}
.text-dark {
    color: #e2e8f0 !important;
}
/* keep explicit accent/toggle colors on badges & progress bars */
.badge, .progress-bar {
    color: #fff;
}

/* ===== Readability fixes (strong contrast) ===== */
/* Force readable text on every dark surface */
.bg-dark, .bg-secondary, .bg-slate-800,
.card, .roadmap-card, .video-card, .list-group-item,
.feature-card, .channel-card, .stat-card {
    color: #e6edf7 !important;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5,
.card h1, .card h2, .card h3, .card h4, .card h5,
.list-group-item h6, .list-group-item h5,
.feature-card h4, .channel-card h1, .channel-card h2, .channel-card h5 {
    color: #f3f8ff !important;
}
/* Links visible on dark bg */
.card a, .list-group-item a {
    color: #7cb3fb !important;
}
    /* Row highlights stay readable on dark mode */
.list-group-item-action:hover {
    color: #fff !important;
}
.small, small, .text-secondary {
    color: #9fb3cd !important;
}
.form-control, .form-select {
    color-scheme: dark;
    background-color: #0b1424 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
.form-control::placeholder {
    color: #64748b !important;
}
.form-control:focus, .form-select:focus {
    background-color: #0b1424 !important;
    border-color: #3b82f6 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

/* Muted text on dark surfaces must remain readable */
.text-muted {
    color: #94a3b8 !important;
}
.bg-dark .text-muted, .bg-slate-800 .text-muted, .video-card .text-muted,
.roadmap-card .text-muted, .list-group-item .text-muted {
    color: #7c93ad !important;
}

/* Small screens */
@media (max-width: 767.98px) {
    body {
        padding-top: 62px;
    }

    .navbar-logo {
        height: 38px;
    }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.15rem; }

    main.container {
        margin-top: 1rem !important;
    }

    footer {
        padding: 24px 0;
        text-align: center;
    }

    /* Tables scroll horizontally instead of breaking layout */
    .table-responsive, table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Extra small screens */
@media (max-width: 575.98px) {
    .display-4 { font-size: 2rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }

    /* Inline fixed-size media shrinks to fit */
    img[style*="width"], img[style*="height"],
    video[style*="width"], video[style*="height"] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Padding in dense components */
    .list-group-item, .card-body {
        padding: 0.75rem;
    }

    /* Buttons become full width so they're tappable */
    main .btn-lg {
        width: 100%;
        margin-top: 0.4rem;
    }
}

/* Touch devices: bigger tap targets for nav buttons */
@media (hover: none) {
    .navbar .btn-sm {
        padding: 0.4rem 0.8rem;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none;
    }
}