/* ROOT & PAGE STYLES */
:root {
    --bg-color: #085b65;
    --nb-bg-color: #043237;
    --card-bg: #ffffff;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --secondary: #4b5563;
    --secondary-hover: #374151;
    --toggle-on: #c513e6;
    --toggle-on-hover: #a40bc1;
    --toggle-off: #810d97;
    --toggle-off-hover: #550863;
    --text: #1f2937;
    --text-muted: #6b7280;
    --border: #e5e7eb;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text);
    animation: colorCycle 20s infinite ease-in-out;
}
@keyframes colorCycle {
    /* Background Animation */
    0% { background-color: #660000; }
    16% { background-color: #666600; }
    33% { background-color: #006600; }
    50% { background-color: #006666; }
    66% { background-color: #000066; }
    83% { background-color: #660066; }
    100% { background-color: #660000; }
}

/* HEADER STYLES */
.navbar {
    background-color: var(--nb-bg-color);
    color: white;
    padding: 0.75rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;
}
.nav-brand-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand-link {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.brand-title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 5rem);
    letter-spacing: -0.02em;
    /* glitch animation, because nothing is ever perfect */
    position: relative;
    display: inline-block;
}
.brand-title::after {
    content: 'Crimany!';
    position: absolute;
    left: 4px;
    top: 0;
    color: var(--nb-bg-color);
    clip-path: polygon(0 30%, 100% 30%, 100% 70%, 0 70%);
    pointer-events: none;
    opacity: 0.5;
    animation: glitch 3s infinite;
}
@keyframes glitch {
    /* Glitch Animation */
    0%, 90%, 100% { transform: translateX(0); opacity: 0; }
    92% { transform: translateX(-4px); opacity: 0.5; }
    94% { transform: translateX(3px); opacity: 0.5; }
    96% { transform: translateX(0); opacity: 0; }
}
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    padding: 6px 5px;
    cursor: pointer;
    width: 36px;
    height: 32px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
}
.nav-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
}
.hamburger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin-left: 2rem;
    gap: 1.5rem;
}
.nav-links-pages {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.nav-item {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: inline-block;
}
.nav-item:hover, .nav-item:focus-visible {
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    outline: none;
}
.nav-auth {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-wrap: wrap;
}
.user-badge {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
}
.nav-btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.nav-btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}
.nav-btn-logout {
    border-color: rgba(220, 38, 38, 0.6);
    color: #fee2e2;
}
.nav-btn-logout:hover {
    background-color: rgba(220, 38, 38, 0.25);
    border-color: var(--danger);
    color: #ffffff;
}
@media (max-width: 768px) {
    /* Reactive Mobile Breakpoint */
    .navbar {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1.25rem;
    }

    .nav-brand-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        margin-left: 0;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        gap: 0.75rem;
    }

    .nav-menu.nav-menu-open {
        display: flex;
    }

    .nav-links-pages {
        flex-direction: column;
        width: 100%;
        gap: 0.25rem;
    }

    .nav-item {
        width: 100%;
        box-sizing: border-box;
        padding: 0.65rem 0.75rem;
    }

    .nav-auth {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-left: 0;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .user-badge {
        text-align: center;
        margin-bottom: 0.25rem;
        word-break: break-all;
    }

    .nav-btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 0.65rem;
    }
}

/* MAIN STYLES */
.container {
    max-width: 820px;
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 8px;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)),
        url('../images/crimany.png');
    background-size: 820px;
    background-position: center;
    background-position-y: top;
    background-repeat: no-repeat;
    color: #ffffff;
}
.card {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mt {
    margin-top: 1.5rem;
}
.form {
    margin-bottom: 0rem;
}
.form-group {
    margin-bottom: 1rem;
}
.blank {
    background-color: rgba(255, 255, 255, 0.0);
    max-width: 820px;
    min-height: 500px;
}
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
input[type="text"], input[type="email"], textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
}
select {
    /* Remove default arrow and box styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Basic layout reset */
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    /*width: 100%;*/
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    /* Ensure it sits above custom pseudo-elements if needed */
    z-index: 1;
    /* Remove default focus outline */
    outline: none;
}
.select-container {
    position: relative;
    display: inline-block;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 8px 35px 8px 12px;
    font-size: 1rem;
}
.empty-state {
    color: var(--text-muted);
    font-style: italic;
}

/* BUTTON STYLES */
.btn {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 2px;
}
.btn:hover {
    background-color: var(--primary-hover);
}
.btn-danger {
    background-color: var(--danger);
}
.btn-danger:hover {
    background-color: var(--danger-hover);
}
.btn-secondary {
    background-color: var(--secondary);
}
.btn-secondary:hover {
    background-color: var(--secondary-hover);
}
.btn-toggle-on {
    background-color: var(--toggle-on);
}
.btn-toggle-on:hover {
    background-color: var(--toggle-on-hover);
}
.btn-toggle-off {
    background-color: var(--toggle-off);
}
.btn-toggle-off:hover {
    background-color: var(--toggle-off-hover);
}

/* NOTES STYLES */
.item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}
.item-card:last-child {
    border-bottom: none;
}
.item-card h3 {
    margin: 0 0 0.25rem 0;
}
.item-card p {
    margin: 0;
    color: var(--text-muted);
    background-color: #ffffff;
}

/* TODO STYLES */
.todo-item {
    justify-content: flex-start;
    gap: 1rem;
}
.todo-title-completed {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* AUTH STYLES */
.auth-card {
    max-width: 400px;
    margin: 2rem auto;
}
.auth-footer {
    margin-top: 1rem;
    font-size: 0.9rem;
    text-align: center;
}

/* FLASH STYLES */
.flash-wrapper {
    margin-bottom: 1rem;
}
.alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.alert-success {
    background-color: #d1fae5;
    color: #065f46;
}
.alert-danger {
    background-color: #fee2e2;
    color: #991b1b;
}
.alert-info {
    background-color: #e0f2fe;
    color: #075985;
}
.alert-warning {
    background-color: #fef3c7;
    color: #92400e;
}

/* GUIDES STYLES */
.guides-card {
    padding: 2rem 1.5rem;
}
.guides-header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.guides-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.6rem;
}
.guides-subtitle {
    color: var(--text-muted);
    margin: 0 0 1.25rem 0;
    font-size: 0.95rem;
}
.guides-dropdown-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.guides-select {
    width: 100%;
    max-width: 480px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    border: 2px solid var(--border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.guides-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.video-playback-section {
    margin-top: 1.5rem;
}
.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.video-caption {
    margin-top: 1rem;
    text-align: center;
}
.video-caption h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text);
}

/* TV STYLES */
.tv-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tv-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border: 1px solid var(--text);
    border-radius: 20px;
    margin-bottom: 2px;
}
.tv-item {
    /* TV rows span the full width of the card: the toggle and delete buttons keep
    their natural size at either end while the details block absorbs the slack. */
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}
.tv-item form {
    /* Buttons keep their intrinsic width rather than being squeezed by the title */
    flex: 0 0 auto;
    margin: 0;
}
.tv-details {
    /* flex: 1 is what actually fills the row. min-width: 0 is required alongside it:
    flex items default to min-width: auto, which refuses to shrink below the
    content's intrinsic width and would push a long title past the card edge. */
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    padding-left: 5px;
    text-align: left;
}
.tv-title {
    justify-content: flex-start;
    gap: 1rem;
}
.tv-title-watched {
    text-decoration: line-through;
    color: var(--text-muted);
}
.tv-action {
    /* Matches the sibling forms in .tv-buttons so the three buttons align */
    flex: 0 0 auto;
    margin: 0;
}
.tv-buttons {
    /* flex-shrink: 0 is the point here: the action column holds its natural
       width however long the note is, and .tv-details (which keeps min-width: 0)
       absorbs the loss and wraps its text instead. No min-width: 0 on this
       side, or the column could collapse below its own buttons again. */
    flex: 0 0 auto;
    padding-right: 5px;
    text-align: right;
}
.tv-buttons .btn {
    /* One line per label, and all three sized to the widest so the stack
       lines up rather than stepping in and out */
    white-space: nowrap;
    width: 100%;
}
@media (max-width: 768px) {
    /* On narrow screens a three-across row leaves each button too cramped to tap,
    so the details move to their own line and the two buttons split the width
    beneath them. Matches the 768px breakpoint the navbar already uses. */
    .tv-item {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.75rem;
    }

    .tv-details {
        flex: 1 1 100%;
        order: -1;
    }

    .tv-buttons {
        flex: 1 1 100%;
        order: -1;
    }

    .tv-item form {
        flex: 1 1 0;
    }

    .tv-item .btn {
        width: 100%;
        box-sizing: border-box;
        /* 44px is the usual minimum comfortable touch target */
        min-height: 44px;
        padding: 0.6rem 0.5rem;
    }
}

/* MODAL / SPLASH DIALOG STYLES */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    /* Must clear the navbar, which sits at z-index 100 */
    z-index: 200;
    overflow-y: auto;
}
.modal-overlay[hidden] {
    /* The hidden attribute only sets display: none via the UA stylesheet, which
       the display: flex above would otherwise override. Without this rule the
       dialog is permanently visible. */
    display: none;
}
.modal-dialog {
    background-color: var(--card-bg);
    color: var(--text);
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    /* Keeps a long form reachable on short screens */
    max-height: 90vh;
    overflow-y: auto;
}
.modal-dialog h2 {
    margin-top: 0;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
body.modal-open {
    /* Stops the page behind the dialog from scrolling */
    overflow: hidden;
}
@media (max-width: 768px) {
    .modal-actions {
        /* column-reverse puts Save above Cancel, matching the usual phone
           convention of the primary action sitting closest to the thumb */
        flex-direction: column-reverse;
    }

    .modal-actions .btn {
        width: 100%;
        box-sizing: border-box;
        min-height: 44px;
    }

    .tv-item .tv-action {
        flex: 1 1 0;
    }
}

/* FOOTER STYLES */

/* Accessibility helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}