/* Import Google Fonts (ensure this matches base.html) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* Define CSS Variables */
:root {
    /* Dark Theme (Default) */
    --bg-color: #121212; /* Slightly lighter than pure black */
    --bg-gradient-start: #1A1A1A;
    --bg-gradient-end: #2A2A2A;
    --sidebar-bg: #1A1A1A;
    --card-bg: #242424;
    --text-color: #E0E0E0;
    --text-muted-color: #888888;
    --accent-primary: #00D4FF; /* Neon Blue/Cyan */
    --accent-secondary: #FF007A; /* Neon Pink/Magenta */
    --border-color: #333333;
    --link-color: var(--accent-primary);
    --link-hover-color: #ffffff;
    --active-link-bg: rgba(0, 212, 255, 0.1); /* Subtle background for active link */
    --gradient-primary: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    --box-shadow-glow: 0 0 15px rgba(0, 212, 255, 0.3), 0 0 5px rgba(255, 0, 122, 0.2);
    --font-family-base: 'Poppins', sans-serif;
    --font-family-heading: 'Poppins', sans-serif; /* Explicit heading font */
}

/* Light Theme Variables (applied via data attribute) */
[data-bs-theme="light"] {
    --bg-color: #f8f9fa;
    --bg-gradient-start: #f8f9fa; /* Lighter gradient for light theme */
    --bg-gradient-end: #e9ecef;
    --sidebar-bg: #e9ecef;
    --card-bg: #ffffff;
    --text-color: #212529;
    --text-muted-color: #6c757d;
    --accent-primary: #007bff; /* Standard Blue */
    --accent-secondary: #dc3545; /* Standard Red */
    --border-color: #dee2e6;
    --link-color: var(--accent-primary);
    --link-hover-color: #0056b3;
    --active-link-bg: rgba(0, 123, 255, 0.1);
    --gradient-primary: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    --box-shadow-glow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --font-family-heading: 'Poppins', sans-serif;
}

/* Apply base styles */
body {
    background-color: var(--bg-color); /* Fallback */
    /* Apply gradient to body */
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    color: var(--text-color);
    font-family: var(--font-family-base);
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Ensure flex layout from base.html is respected */
    display: flex;
    min-height: 100vh;
    position: relative; /* Ensure body creates a stacking context */
    z-index: 0; /* Ensure body doesn’t block modal */
}

main {
    flex-grow: 1;
    padding: 2rem; /* More padding */
    height: 100vh;
    overflow-y: auto;
    background-color: transparent; /* Let body gradient show through */
    z-index: 1; /* Ensure main content doesn’t overlap modal */
    width: 100%; /* Ensure main takes full width */
}

/* --- ORIGINAL Sidebar Styling --- */
#sidebar {
    width: 280px;
    background-color: var(--sidebar-bg);
    color: var(--text-color);
    border-right: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /* NOTE: Removed position:fixed, height, overflow from the new styles */
}

#sidebar .sidebar-brand-text {
    font-weight: 600;
}

#sidebar hr {
    border-top: 1px solid var(--border-color);
    opacity: 0.5;
}

#sidebar .nav-link {
    color: var(--text-muted-color);
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 0.375rem; /* Original Bootstrap radius */
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    text-decoration: none; /* Ensure no underline */
    /* NOTE: Removed new border-radius, transition: all, color: var(--text-color) */
}

#sidebar .nav-link i {
    font-size: 1.1rem; /* Original icon size */
    width: 25px; /* Original alignment */
    text-align: center;
    margin-right: 0.75rem; /* Original margin */
}

#sidebar .nav-link:hover {
    color: var(--link-hover-color);
    background-color: rgba(255, 255, 255, 0.05); /* Original subtle hover */
}

#sidebar .nav-link.active {
    color: var(--accent-primary);
    background-color: var(--active-link-bg);
    font-weight: 600;
    /* NOTE: Removed new box-shadow */
}

#sidebar .dropdown-toggle {
    color: var(--text-color);
}

#sidebar .dropdown-menu {
    background-color: var(--card-bg); /* Match card background */
    border: 1px solid var(--border-color);
}

#sidebar .dropdown-item {
    color: var(--text-muted-color);
}

#sidebar .dropdown-item:hover,
#sidebar .dropdown-item:focus {
    color: var(--link-hover-color);
    background-color: rgba(255, 255, 255, 0.05);
}
/* --- END ORIGINAL Sidebar Styling --- */


/* General element styling */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
    font-weight: 600;
    font-family: var(--font-family-heading); /* Use Poppins for headings */
}

/* Dashboard Specific Heading */
.dashboard-heading {
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover-color);
}

/* Basic Card Styling (will be enhanced later) */
/* Keep original basic .card style for compatibility, new styles use more specific classes or context */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Base shadow */
}

.card-header, .card-footer {
    background-color: rgba(0,0,0,0.1); /* Slightly different shade */
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    font-weight: 600; /* Make headers bolder */
    font-family: var(--font-family-heading);
}

/* Account Card Styling */
.account-card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem; /* Slightly more rounded */
    overflow: hidden; /* Ensure gradients/shadows stay contained */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Needed for pseudo-elements if used */
}

.account-card:hover {
    transform: translateY(-5px); /* Subtle lift effect */
    box-shadow: var(--box-shadow-glow);
}

.account-card .card-body {
    padding: 1.5rem;
}

.account-card img {
    border: 3px solid var(--accent-primary); /* Neon border for profile pic */
}

.account-card .badge {
    font-size: 0.8rem;
    padding: 0.4em 0.7em;
}

/* Style the connect button */
.btn-success { /* Targeting the connect button specifically */
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #000; /* Black text for contrast on bright cyan */
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-success:hover {
    background-color: #00f0ff; /* Slightly brighter cyan */
    border-color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Modal Styling (Optional Enhancements) */
/* Keep original basic modal styles for compatibility */
.modal-content {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
}

/* Ensure standard Bootstrap backdrop is below the modal */
.modal-backdrop {
    z-index: 1040 !important; /* Below standard modal (1050) and custom video modal (1055) */
}


/* Animation Keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0; /* Start hidden */
}

/* Add delays for staggered effect */
#metricsRow .col-lg-2:nth-child(1) .metric-card { animation-delay: 0.1s; }
#metricsRow .col-lg-2:nth-child(2) .metric-card { animation-delay: 0.15s; }
#metricsRow .col-lg-2:nth-child(3) .metric-card { animation-delay: 0.2s; }
#metricsRow .col-lg-2:nth-child(4) .metric-card { animation-delay: 0.25s; }
#metricsRow .col-lg-2:nth-child(5) .metric-card { animation-delay: 0.3s; }
#metricsRow .col-lg-2:nth-child(6) .metric-card { animation-delay: 0.35s; }
.row.g-4.mb-4 > .col-lg-6:nth-child(1) .chart-card { animation-delay: 0.4s; }
.row.g-4.mb-4 > .col-lg-6:nth-child(2) .chart-card { animation-delay: 0.45s; }
.row.g-4.mb-4 > .col-lg-7 .activity-card { animation-delay: 0.5s; }
.row.g-4.mb-4 > .col-lg-5 .activity-card { animation-delay: 0.55s; }
.row.g-4.mb-4 > .col-lg-6.offset-lg-3 .chart-card { animation-delay: 0.6s; }


/* Dashboard Metric Card Styling - Updated */
.metric-card {
    border: none;
    border-radius: 0.75rem;
    background: var(--gradient-primary); /* Apply gradient background */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 2px; /* Space for the inner content background */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.metric-card:hover {
    transform: translateY(-6px) scale(1.02); /* Slightly more pronounced hover */
    box-shadow: var(--box-shadow-glow);
}

.metric-card .card-body {
    background: var(--card-bg); /* Inner background to overlay gradient */
    border-radius: calc(0.75rem - 2px); /* Inner radius */
    padding: 1.25rem; /* Adjust padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 160px; /* Ensure consistent height */
    text-align: center;
}

.metric-card .metric-icon {
    font-size: 2.5rem; /* Larger icon */
    margin-bottom: 0.75rem;
    color: var(--accent-primary); /* Use primary accent for icon */
}

.metric-card .card-title {
    color: var(--text-muted-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.metric-card .metric-value { /* Target the number specifically */
    color: var(--text-color);
    font-size: 2.2rem; /* Adjust size */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.metric-card small {
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

/* Period Selector Buttons */
.period-selector .btn {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    transition: all 0.3s ease;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
}

.period-selector .btn:hover {
    background: var(--gradient-primary);
    color: var(--bg-color); /* Contrast text on gradient */
    border-color: transparent;
    box-shadow: var(--box-shadow-glow);
}

.period-selector .btn.active {
    background: var(--gradient-primary);
    color: var(--bg-color); /* Contrast text on gradient */
    border-color: transparent;
    font-weight: 600;
    box-shadow: var(--box-shadow-glow), 0 0 0 3px rgba(0, 212, 255, 0.2); /* Neon glow effect */
}

/* Chart Card Styling */
.chart-card {
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.chart-card .chart-header { /* Use class for consistency */
    font-weight: 600;
    background-color: rgba(0,0,0,0.2); /* Slightly darker header */
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1.25rem;
    font-family: var(--font-family-heading);
}

.chart-card .card-body {
    padding: 1.5rem;
    min-height: 350px; /* Give chart space */
    position: relative; /* Needed for chart responsiveness */
}

/* Activity Card Styling (Recent Activity & Top Users) */
.activity-card {
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.activity-card .activity-header { /* Use class for consistency */
    font-weight: 600;
    background-color: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1.25rem;
    font-family: var(--font-family-heading);
}

.activity-card .card-body {
    padding: 0; /* Remove padding for table/list */
}

/* Recent Activity Table */
.activity-table {
    background-color: transparent; /* Make table transparent */
    color: var(--text-color);
    margin-bottom: 0; /* Remove default margin */
}

.activity-table thead th {
    border-bottom: 2px solid var(--border-color);
    color: var(--text-muted-color);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: transparent;
}

.activity-table tbody tr {
    transition: background-color 0.2s ease;
}

.activity-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Subtle hover */
}

.activity-table td {
    border-top: 1px solid var(--border-color);
    padding: 0.85rem 1.25rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

/* Top Users List */
.top-user-item {
    background-color: transparent !important; /* Override BS */
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1rem 1.25rem;
    color: var(--text-color);
    transition: background-color 0.2s ease;
}

.top-user-item:last-child {
    border-bottom: none !important;
}

.top-user-item:hover {
     background-color: rgba(255, 255, 255, 0.05) !important;
}

.avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary); /* Gradient background */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bg-color); /* Contrast icon color */
    font-size: 1.2rem;
    border: 2px solid var(--accent-primary); /* Neon border */
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.4); /* Neon glow */
}

.top-user-item .badge {
    background-color: var(--accent-primary) !important; /* Ensure badge color */
    color: var(--bg-color) !important;
}


/* Settings Page Card Styling */
.settings-card {
     border-radius: 0.75rem;
}

/* Theme Switcher Styling */
.form-switch .form-check-input {
    width: 3em; /* Make switch larger */
    height: 1.5em;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}
.form-switch .form-check-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.25); /* Neon focus */
}
.form-switch .form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Hide/show theme labels/icons based on theme */
[data-bs-theme="dark"] .theme-label-light,
[data-bs-theme="dark"] .theme-icon-light {
    display: none;
}
[data-bs-theme="light"] .theme-label-dark,
[data-bs-theme="light"] .theme-icon-dark {
    display: none;
}
.form-switch .form-check-label {
    cursor: pointer;
}


/* Responsive adjustments for sidebar and main content */
/* Medium screens and up (>= 768px) - Static sidebar is shown */
@media (min-width: 768px) {
    main.main-content {
        /* Ensure main content doesn't overlap static sidebar */
        /* Padding was already set, this confirms structure */
    }
    /* Hide mobile navbar */
    .navbar.d-md-none {
        display: none !important;
    }
}

/* Small screens and below (< 768px) - Offcanvas sidebar is used */
@media (max-width: 767.98px) {
    body {
        /* Keep flex, but main content will handle its own scrolling */
         /* flex-direction: column; /* No longer needed with offcanvas */
    }

    /* Hide the static sidebar container */
    .d-none.d-md-flex {
        display: none !important;
    }

    /* Adjust main content padding to account for fixed mobile navbar */
    main.main-content {
        padding: 1rem; /* Reduce padding for smaller screens */
        /* The spacer div in base.html handles the top padding */
        height: calc(100vh - 56px); /* Adjust height considering navbar (approx 56px) */
    }

    /* Ensure offcanvas takes full height if needed */
    .offcanvas-body #sidebar {
        width: 100%; /* Ensure sidebar inside offcanvas takes full width */
        height: 100%;
        border-right: none; /* No border needed inside offcanvas */
    }

    /* Stack metric cards on smaller screens */
    #metricsRow .col-lg-2 {
        flex: 0 0 auto;
        width: 50%; /* Two cards per row on small screens */
    }
    .metric-card .card-body {
        min-height: 140px; /* Slightly reduce height */
    }
     .metric-card .metric-value {
        font-size: 1.8rem; /* Reduce font size */
    }
     .metric-card .metric-icon {
        font-size: 2rem;
    }

    /* Stack charts and activity sections */
    .row.g-4.mb-4 > [class*="col-lg-"] {
         flex: 0 0 auto;
         width: 100%; /* Full width */
    }
}

/* --- Custom additions (April 10, 2025) --- */

/* Equal height for Recent Activity and Top Users cards */
.activity-card {
    min-height: 420px; /* Adjust this value as needed for visual balance */
    display: flex; /* Enable flex properties */
    flex-direction: column; /* Stack card elements vertically */
}

.activity-card .card-body {
    flex-grow: 1; /* Allow card body to expand */
    display: flex; /* Use flex for inner content */
    flex-direction: column; /* Stack inner content */
}

.activity-card .table-responsive,
.activity-card .list-group {
    flex-grow: 1; /* Allow table/list to take available space */
}

/* --- Moderation Page Styles --- */

.video-carousel {
    width: 100%;
    max-width: 1200px; /* Максимальная ширина контейнера */
    margin: auto; /* Центрируем */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px; /* Расстояние между видео и правой частью */
    min-height: 0; /* Предотвращаем переполнение */
}

.video-player-container {
    position: relative; /* Для возможных оверлеев (хотя их убрали) */
    display: flex; /* Используем flex для управления дочерними элементами */
    justify-content: center; /* Центрируем видео */
    align-items: center; /* Выравниваем по центру */
    width: auto; /* Ширина подстраивается под видео */
    max-width: 70%; /* Максимальная ширина контейнера */
    aspect-ratio: 9 / 16; /* Соотношение сторон совпадает с видео */
    max-height: calc(100vh - 150px); /* Учитываем меньше отступов (без заголовка) */
}

#moderation-video {
    display: block; /* Предотвращаем лишнее пространство */
    width: 100%; /* Полная ширина контейнера */
    height: 100%; /* Полная высота контейнера */
    max-width: 100%; /* Не превышаем ширину контейнера */
    max-height: 100%; /* Не превышаем высоту контейнера */
    aspect-ratio: 9 / 16; /* Соотношение сторон для вертикального видео */
    object-fit: contain; /* Видео отображается полностью без обрезки */
    border-radius: 12px; /* Оставляем рамку */
    background-color: transparent; /* Убираем черный фон, чтобы не было полос */
    box-shadow: none !important; /* Убираем тень */
}

.video-meta-buttons {
    max-width: 30%; /* Ограничиваем ширину правой части */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* Выравниваем текст и кнопки по левому краю */
}

.video-metadata {
    margin-bottom: 30px; /* Больше пространства между текстом и кнопками */
}

#video-caption {
    font-size: 1.2rem; /* Увеличиваем размер текста */
    line-height: 1.6; /* Улучшаем читаемость */
    color: var(--text-color); /* Используем основной цвет текста */
    margin-bottom: 10px;
}

.video-info {
    font-size: 0.95rem; /* Чуть крупнее для читаемости */
    color: var(--text-muted-color);
}

.moderation-buttons {
    display: flex;
    justify-content: flex-start; /* Кнопки выравниваем по левому краю */
    gap: 15px; /* Увеличиваем расстояние между кнопками */
}

.nav-button, .approve-button, .reject-button {
    font-size: 1.1rem;
    padding: 10px 20px;
}

.nav-button {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.nav-button:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    transform: scale(1.05);
}

.nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-button:active {
    transform: scale(0.95);
}

.approve-button {
    background-color: #28a745; /* Зеленый */
    border-color: #28a745;
    color: #fff;
    transition: filter 0.2s ease-in-out, transform 0.1s ease;
}

.approve-button:hover {
    filter: brightness(90%);
    color: #fff;
    transform: scale(1.03);
}

.approve-button:active {
    transform: scale(0.98);
}

.reject-button {
    background-color: #dc3545; /* Красный */
    border-color: #dc3545;
    color: #fff;
    transition: filter 0.2s ease-in-out, transform 0.1s ease;
}

.reject-button:hover {
    filter: brightness(90%);
    color: #fff;
    transform: scale(1.03);
}

.reject-button:active {
    transform: scale(0.98);
}

#moderation-video.moderated {
    opacity: 0.6;
    border: 3px solid var(--bs-secondary);
    transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Responsive стили для маленьких экранов */
@media (max-width: 768px) {
    .video-carousel {
        flex-direction: column;
        align-items: center;
        max-width: 100%; /* Убираем ограничение ширины */
    }

    .video-player-container {
        max-width: 100%; /* Полная ширина на маленьких экранах */
        max-height: calc(100vh - 250px); /* Уменьшаем высоту с учетом большего количества элементов */
    }

    #moderation-video {
        max-height: calc(100vh - 250px); /* Уменьшаем высоту с учетом большего количества элементов */
        height: 100%;
    }

    .video-meta-buttons {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .moderation-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .video-metadata {
        margin-bottom: 20px;
    }

    #video-caption {
        font-size: 1rem;
    }

    .video-info {
        font-size: 0.85rem;
    }
}

/* Учитываем 4K экраны */
@media (min-width: 2560px) {
    .video-carousel {
        max-width: 1600px; /* Увеличиваем ширину контейнера для 4K */
    }

    .video-player-container {
        max-width: 65%; /* Уменьшаем долю видео, чтобы текст не терялся */
        max-height: calc(100vh - 200px); /* Учитываем большее пространство на 4K */
    }

    .video-meta-buttons {
        max-width: 35%; /* Увеличиваем пространство для текста и кнопок */
    }

    #moderation-video {
        max-height: calc(100vh - 200px); /* Учитываем большее пространство на 4K */
    }

    #video-caption {
        font-size: 1.5rem; /* Увеличиваем текст для лучшей читаемости */
    }

    .video-info {
        font-size: 1.2rem;
    }

    .nav-button, .approve-button, .reject-button {
        font-size: 1.3rem; /* Увеличиваем кнопки */
        padding: 12px 24px;
    }

    .nav-button {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Animations for Scheduler Slots */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-in-out;
}

.animate-fade-out {
    animation: fade-out 0.3s ease-in-out forwards; /* Use forwards to keep final state */
}

/* Responsive adjustments for Scheduler Slots */
@media (max-width: 640px) { /* Tailwind's sm breakpoint */
    .schedule-slot {
        flex-direction: column;
        align-items: stretch; /* Make children full width */
        gap: 0.5rem; /* Add space between stacked items */
    }
    /* Ensure select/input take full width in column layout */
    .schedule-slot select,
    .schedule-slot input[type="time"] {
        width: 100%;
    }
    /* Adjust delete button position in column layout */
    .schedule-slot .delete-slot {
        align-self: flex-end; /* Move to the right */
        margin-top: 0.25rem; /* Add some space above */
    }
}

/* --- Appended Styles for Posting Pages (Media List & Scheduler) --- */
/* --- From new_frontend_posting_pages/static/css/styles.css --- */
/* --- Excluding :root, body, .main-container, .content-wrapper, .sidebar, .logo, .nav-item, .nav-link --- */

/* Page Titles (Specific to Posting Pages) */
.page-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
}
.page-title i.material-symbols-outlined { /* Target only material symbols */
  margin-right: 1rem;
  color: var(--accent-primary);
}

/* Cards (Specific to Posting Pages) */
/* Apply new card styles only within a container specific to these pages if possible, */
/* or rely on the fact that other pages might use Bootstrap's default .card */
/* For now, apply globally but be aware of potential conflicts if other pages use these exact classes */
.card { /* This might override the basic .card style above, accept this for now */
  background-color: var(--card-bg);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--border-color);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--box-shadow-glow);
}
.card-header { /* This will override the basic .card-header */
  padding: 1.25rem;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  background-color: transparent; /* Remove the darker background from original */
}
.card-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: var(--gradient-primary);
}
.card-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.card-title i.material-symbols-outlined { /* Target only material symbols */
  margin-right: 0.75rem;
  color: var(--accent-primary);
}
.card-body {
  padding: 1.5rem;
}

/* Tables (Specific to Media List) */
.media-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--card-bg);
}
.media-table thead th {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--text-muted-color);
  font-weight: 600;
  text-align: left;
  padding: 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border-color);
  /* Apply center alignment to specific headers */
  text-align: center;
}

.media-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
  vertical-align: middle;
  /* Apply center alignment to specific data cells */
  text-align: center;
}

.media-table tbody tr:last-child td {
  border-bottom: none;
}
.media-table tbody tr {
  transition: background-color 0.2s ease;
}
.media-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Buttons (Specific to Posting Pages) */
.action-btn {
  /* background: var(--gradient-primary); REMOVED default fill */
  background: transparent; /* Default to transparent */
  color: var(--text-color); /* Default text color */
  border: none; /* Base border */
  /* border-radius: 0.625rem; /* REMOVED - Make corners sharp by default */
  padding: 0.75rem 1.5rem; /* Consistent padding */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5; /* Consistent height */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Ensure visibility for base action buttons */
  visibility: visible;
  opacity: 1;
  white-space: nowrap;
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-glow);
}
.action-btn.post { background: linear-gradient(90deg, #4F46E5, #8B5CF6); color: white; border: none;} /* Keep specific styles */
.action-btn.reels { background: linear-gradient(90deg, #0EA5E9, #22D3EE); color: white; border: none;} /* Keep specific styles */
.action-btn.story { background: linear-gradient(90deg, #EC4899, #F472B6); color: white; border: none;} /* Keep specific styles */

/* Specific styles for Save, Apply, Reset */
.action-btn.save { /* Keep Save as is */
  background: transparent;
  border: 1px solid; /* Fallback */
  border-image: var(--gradient-primary) 1;
  color: var(--text-color);
}
.action-btn.reset { /* Style Reset differently */
  background: transparent;
  border: 1px solid var(--text-muted-color); /* Gray border */
  color: var(--text-muted-color); /* Gray text */
}
.action-btn.save:hover { /* Keep Save hover */
   background-color: rgba(0, 212, 255, 0.1);
   /* Inherit transform/shadow */
}
.action-btn.reset:hover { /* Different Reset hover */
   background-color: rgba(136, 136, 136, 0.1); /* Subtle gray background */
   /* Do not inherit bright shadow */
   transform: translateY(-2px); /* Keep lift */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.action-btn.save:disabled { /* Keep Save disabled */
   border-image: none;
   border: 1px solid var(--border-color);
   color: var(--text-muted-color);
   background-color: transparent;
}
.action-btn.reset:disabled { /* Keep Reset disabled */
   border-image: none; /* Ensure no gradient */
   border: 1px solid var(--border-color); /* Standard disabled border */
   color: var(--text-muted-color);
   background-color: transparent;
}

.action-btn.apply { /* Make Apply match Save/Add Slot */
  background: transparent; /* Transparent background */
  color: var(--text-color); /* Standard text color */
  border: 1px solid; /* Fallback border */
  border-image: var(--gradient-primary) 1; /* Gradient border */
  /* border-radius is inherited */
}
.action-btn.apply:hover { /* Make Apply hover match Save/Add Slot */
   background-color: rgba(0, 212, 255, 0.1); /* Subtle background */
   /* Inherit transform/shadow */
   filter: none; /* Remove brightness filter */
}
.action-btn.apply:disabled { /* Make Apply disabled match Save/Add Slot */
   border-image: none;
   border: 1px solid var(--border-color);
   background: transparent; /* Ensure transparent background */
   color: var(--text-muted-color);
   border-color: var(--border-color);
   filter: none;
}

/* Commenting out old specific background overrides for save/apply */
/*
.action-btn.save {
  background: linear-gradient(90deg, #10B981, #059669);
  display: inline-flex;
  visibility: visible;
  opacity: 1;
}
.action-btn.apply {
  background: linear-gradient(90deg, #3B82F6, #2563EB);
  display: inline-flex;
  visibility: visible;
  opacity: 1;
}
*/
.action-btn.btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; }

.view-btn {
  background-color: transparent;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  gap: 0.25rem;
}
.view-btn:hover {
  background-color: rgba(0, 212, 255, 0.1);
  box-shadow: var(--box-shadow-glow);
}
.view-btn {
  /* Ensure button is above other elements and clickable */
  position: relative;
  z-index: 1;
}
.view-btn i.material-symbols-outlined { font-size: 1rem; }

/* Form Elements (Specific to Posting Pages) */
.project-selector { margin-bottom: 1.5rem; }
/* Ensure consistent styling for all select labels */
.select-label { display: block; margin-bottom: 0.5rem; color: var(--text-muted-color); font-size: 0.875rem; font-weight: 500; }
/* Style custom select like btn-outline-secondary */
.custom-select { position: relative; width: 100%; max-width: 300px; }
.select-wrapper { position: relative; width: 100%; }
.select-input {
  width: 100%;
  /* Adjust padding to look more like btn-sm, accounting for arrow */
  padding: 0.4rem 2.5rem 0.4rem 0.8rem; /* Slightly reduced vertical padding */
  font-size: 0.875rem; /* Match btn-sm font size */
  background-color: var(--card-bg); /* Keep background */
  color: var(--text-color); /* Keep text color */
  border: 1px solid var(--border-color); /* Match btn-outline border */
  border-radius: 0.375rem; /* Match Bootstrap button radius */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  font-family: var(--font-family-base);
  line-height: 1.5; /* Match button line height */
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; /* Match button transition */
}
.select-input:hover {
    border-color: var(--text-muted-color); /* Subtle hover border like btn-outline */
}
.select-input:focus {
  outline: 0;
  border-color: var(--accent-primary); /* Match focus color */
  box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.25); /* Match neon focus */
}
.select-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted-color);
  /* Use a character that looks like Bootstrap's caret */
  /* content: '▼'; /* Alternative if icon doesn't work well */
}
.select-arrow i.material-symbols-outlined {
  font-size: 1.25rem; /* Slightly smaller arrow */
  display: block;
}

/* Status Filter Dropdown (Using existing custom-select styles) */
.status-filter-selector {
  /* No specific styles needed here, relies on .custom-select */
}


/* Status Badges (Specific to Media List) */
.status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; line-height: 1.2; }
.status-badge.published { background-color: rgba(16, 185, 129, 0.2); color: #10B981; }
.status-badge.completed { background-color: rgba(108, 117, 125, 0.2); color: #6c757d; }
.status-badge.pending { background-color: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.status-badge.failed { background-color: rgba(220, 53, 69, 0.2); color: #dc3545; }

/* Modals (Specific to Media List Video Preview) */
/* Corrected selector to target element with both classes */
.modal-overlay.media-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1049; /* Below Bootstrap modals */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease; /* Removed visibility transition delay */
}
.modal-overlay.media-preview-modal.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}
/* Apply specificity to the custom modal content, not the standard Bootstrap one */
.media-preview-modal .modal-content {
    background-color: var(--card-bg);
    border-radius: 0.75rem;
    width: auto; /* Changed from 90% to auto to fit content */
    max-width: none; /* Remove max-width constraint */
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: var(--box-shadow-glow);
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal-overlay.media-preview-modal.active .modal-content { transform: scale(1) translateY(0); opacity: 1; }
.media-preview-modal .modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; background-color: transparent; }
.media-preview-modal .modal-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.media-preview-modal .modal-close { background: transparent; color: var(--text-muted-color); border: none; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 0.5rem; transition: color 0.2s ease, background-color 0.2s ease; }
.media-preview-modal .modal-close:hover { color: var(--text-color); background-color: rgba(255, 255, 255, 0.1); }
.media-preview-modal .modal-body { padding: 1.5rem; overflow-y: auto; }
.media-preview-modal .video-container {
    background-color: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    border: none; /* Remove the red border, make it transparent */
}
.media-preview-modal #previewVideo { display: block; width: 100%; max-height: calc(90vh - 150px); }

/* Scheduler Specifics */
/* Adjusted flex properties to rely on Tailwind width classes in HTML */
.section-container {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    width: 100%; /* Ensure section-container takes full width */
    max-width: 1400px; /* Add max-width for ultra-widescreen */
    margin-left: auto; /* Center the container */
    margin-right: auto; /* Center the container */
}
/* Removed specific flex-basis/flex-grow on child cards to avoid conflict with Tailwind w-* classes */
/* .section-container > .card { flex: 1; } */
/* .section-container > .card:first-child { flex: 2; min-width: 300px; } */
/* .section-container > .card:last-child { min-width: 250px; } */
.slots-container { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.5rem; }
.slot { background-color: rgba(0, 0, 0, 0.2); border-radius: 0.5rem; padding: 1rem 1.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; position: relative; border: 1px solid var(--border-color); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.slot:hover { border-color: rgba(0, 212, 255, 0.3); box-shadow: 0 0 10px rgba(0, 212, 255, 0.1); }
.slot .slot-type { flex: 1 1 100px; }
.slot .slot-time { flex: 2 1 180px; display: flex; align-items: center; gap: 0.5rem; }
.slot .slot-actions { flex: 0 0 auto; }
.slot .custom-select { max-width: none; }
.slot .select-input { font-size: 0.8rem; padding: 0.5rem 2rem 0.5rem 0.75rem; }
.slot .select-arrow { right: 0.5rem; }
.slot .select-arrow i.material-symbols-outlined { font-size: 1.25rem; }

/* Restore original Add Slot button style - Using more specific selector AND rounding */
.add-slot-btn { /* Increased specificity */
  background: transparent;
  border: 1px solid; /* Fallback */
  border-image: var(--gradient-primary) 1; /* Original gradient border */
  color: var(--text-color);
  /* border-radius: 0.625rem; /* REMOVED - Make corners sharp */
  padding: 0.75rem 1.5rem; /* Consistent padding */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5; /* Consistent height */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  margin-top: 0; /* Remove margin-top to align with others */
  white-space: nowrap;
}
div.actions-row > button.add-slot-btn:hover { /* Increased specificity */
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-glow);
  background-color: rgba(0, 212, 255, 0.1);
}
div.actions-row > button.add-slot-btn:disabled { /* Increased specificity */
  border-image: none; /* Remove gradient on disabled */
  border: 1px solid var(--border-color); /* Use solid border on disabled */
  color: var(--text-muted-color);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.5;
  background-color: transparent; /* Ensure no hover background when disabled */
}


.delete-btn { background-color: transparent; color: var(--text-muted-color); border: none; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.delete-btn:hover { background-color: rgba(255, 255, 255, 0.1); color: #F87171; }
.delete-btn i.material-symbols-outlined { font-size: 1.25rem; }

.note { font-size: 0.8rem; color: var(--text-muted-color); margin-top: 1rem; display: flex; align-items: center; }
.note i.material-symbols-outlined { font-size: 1rem; vertical-align: middle; margin-right: 0.25rem; }

/* New style for the row containing Add Slot and Button Group */
.actions-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; }

.button-group { /* Modified: Removed margin/padding/border */ display: flex; gap: 1rem; flex-wrap: wrap; }

.tooltip { position: relative; }
.tooltip .tooltip-text { visibility: hidden; width: 200px; background-color: rgba(0, 0, 0, 0.85); color: white; text-align: center; border-radius: 0.5rem; padding: 0.75rem; position: absolute; z-index: 10; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease; font-size: 0.75rem; pointer-events: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
.tooltip .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent; }
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }

/* Current Schedule Display */
.empty-schedule { text-align: center; color: var(--text-muted-color); padding: 2rem 1rem; border: 2px dashed var(--border-color); border-radius: 0.5rem; }
.empty-schedule i.material-symbols-outlined { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }

/* Style the schedule table like media-table */
.schedule-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 0.75rem; background: var(--card-bg); }
.schedule-table thead th { color: var(--text-muted-color); font-weight: 600; text-align: left; padding: 1rem; font-size: 0.85rem; border-bottom: 2px solid var(--border-color); text-transform: uppercase; letter-spacing: 0.5px; background-color: transparent; }
.schedule-table tbody td { padding: 1rem; border-bottom: 1px solid var(--border-color); font-size: 0.875rem; border-top: none; }
.schedule-table tbody tr:last-child td { border-bottom: none; }
.schedule-table tbody tr { transition: background-color 0.2s ease; }
.schedule-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); }

/* Style the upload media table like schedule-table */
.upload-media-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--card-bg);
  /* Ensure table takes full width of its container */
  display: block; /* Ensure it behaves like a block element */
}
.upload-media-table thead th {
  color: var(--text-muted-color);
  font-weight: 600;
  text-align: left;
  padding: 1rem;
  font-size: 0.85rem;
  border-bottom: 2px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: transparent;
}
.upload-media-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
  border-top: none;
  vertical-align: middle; /* Vertically align content in cells */
}
.upload-media-table tbody tr:last-child td {
  border-bottom: none;
}
.upload-media-table tbody tr {
  transition: background-color 0.2s ease;
}
.upload-media-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Add padding to the card body containing the table */
#file-list-container .card-body {
    padding: 1.5rem; /* Ensure consistent padding around the table */
}

/* Style for the remove file button in the table */
.upload-media-table .remove-file-btn {
  background-color: transparent;
  color: var(--text-muted-color);
  border: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 0; /* Remove padding */
}
.upload-media-table .remove-file-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #F87171; /* Red color on hover */
}
.upload-media-table .remove-file-btn i.material-symbols-outlined {
  font-size: 1.25rem;
}

/* Adjust column widths if needed - can be done with CSS or inline styles */
/* For example, to make the remove button column narrow: */
.upload-media-table th:last-child,
.upload-media-table td:last-child {
    width: 50px; /* Fixed width for the remove button column */
    text-align: center; /* Center the button */
}

/* Animations (Keep fadeIn, add spin) */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: none; width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s linear infinite; }
.action-btn:disabled .spinner { display: inline-block; }

/* Timezone Selector Styling */
.timezone-selector { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }

/* Moderation Page - No Media State */
#moderation-container.no-media-active {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    min-height: calc(100vh - 100px); /* Adjust height as needed to center within viewport */
    text-align: center; /* Center text within the message block */
}

#moderation-container.no-media-active #video-carousel,
#moderation-container.no-media-active .progress,
#moderation-container.no-media-active #progress-text {
    display: none !important; /* Ensure these elements are hidden */
}

#moderation-container.no-media-active #no-media-message {
    margin-top: 0; /* Remove top margin if any */
    margin-bottom: 0; /* Remove bottom margin if any */
    /* Additional styling for the message block itself if needed */
}


/* Responsive adjustments for Posting Pages */
@media (max-width: 1024px) {
  .media-table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 767.98px) {
  .page-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
  .section-container { flex-direction: column; gap: 1rem; }
  .section-container > .card { width: 100%; flex-basis: auto !important; }
  .actions-row { justify-content: center; } /* Center buttons when wrapped */
  .button-group { flex-direction: column; width: 100%; } /* Stack save/apply */
  .action-btn { width: 100%; }
  .media-table thead { display: none; }
  .media-table tbody, .media-table tr, .media-table td { display: block; width: 100%; }
  .media-table tr { margin-bottom: 1rem; border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden; }
  .media-table td { text-align: right; padding-left: 50%; position: relative; border-bottom: 1px solid var(--border-color); border-top: none; }
  .media-table td:last-child { border-bottom: none; }
  .media-table td::before { content: attr(data-label); position: absolute; left: 0.75rem; width: 45%; padding-right: 0.75rem; font-weight: 600; text-align: left; color: var(--text-muted-color); }
  .media-table td .d-flex { justify-content: flex-end; gap: 0.5rem !important; }
  .media-table td .action-btn { width: auto; padding: 0.5rem 0.75rem; font-size: 0.7rem; }
  .media-table td .view-btn { width: auto; padding: 0.5rem 0.75rem; font-size: 0.7rem; }
  .slot { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .slot .slot-actions { align-self: flex-end; }
}

/* Custom Create Project Modal Styles */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 1050; /* Above standard content, below Bootstrap modals if they were still used */
}

.custom-modal-content {
    background-color: var(--card-bg);
    border-radius: 0.75rem;
    width: 90%;
    max-width: 500px; /* Max width for the modal content */
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--box-shadow-glow);
    padding: 1.5rem;
}

.custom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.custom-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.custom-modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted-color);
    cursor: pointer;
    transition: color 0.2s ease;
}

.custom-modal-close:hover {
    color: var(--text-color);
}

.custom-modal-body {
    /* Padding is handled by .custom-modal-content */
}

.custom-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1.5rem;
    gap: 0.75rem;
}

.custom-modal-cancel {
    /* Uses Bootstrap btn-secondary styles */
}

/* Ensure the file input is completely hidden, including its default browser text */
#fileInput {
    display: none !important;
}

/* --- Gradient Border Button --- */
.btn-gradient-border {
    background: transparent;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 0.375rem;
    color: var(--accent-primary);
    font-weight: 600;
    position: relative;
    padding: 0.75rem 1.5rem;
    transition: color 0.3s ease, background 0.3s ease;
}

.btn-gradient-border::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -2px; /* Same as border width */
    border-radius: inherit; /* Inherit the border-radius */
    background: var(--gradient-primary, linear-gradient(90deg, #00D4FF, #00A5FF));
}

.btn-gradient-border:hover {
    color: white;
    background: var(--gradient-primary, linear-gradient(90deg, #00D4FF, #00A5FF));
}