/* ===========================================
 * ENHANCED DARK THEME FOR SURVEYS LIST
 * ===========================================
 * A GitHub-inspired dark theme for survey listings
 * with gradient backgrounds, modern card designs,
 * and smooth interactive elements
 */

/* Base body styles - Dark background with light text */
.surveys-page {
    background: #0d1117; /* GitHub dark theme primary background */
    color: #e6edf3;      /* High contrast text color for readability */
    min-height: 100vh;
}

/* ===========================================
 * MAIN CONTAINER
 * ===========================================
 */
 
/* Primary container for all survey listings */
.surveys-container {
    max-width: 1200px;         /* Constrain width on larger screens */
    margin: 2rem auto;         /* Center container with consistent spacing */
    padding: 2rem;             /* Internal spacing for content */
    background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #21262d 100%); /* Subtle gradient for depth */
    border-radius: 20px;       /* Rounded corners for modern look */
    box-shadow: 0 8px 32px rgba(0,0,0,0.5); /* Depth shadow */
    min-height: 70vh;          /* Ensure minimum vertical space */
    border: 1px solid #30363d; /* Subtle border definition */
    position: relative;        /* For absolute positioning of children */
    overflow: hidden;          /* Prevent content overflow */
}

/* Background gradient effect with multiple radial circles */
.surveys-container::before {
    content: '';
    position: absolute;        /* Position over the entire container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Blue glow in top-left */
        radial-gradient(circle at 20% 20%, rgba(58, 123, 213, 0.1) 0%, transparent 50%),
        /* Purple glow in bottom-right */
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        /* Green glow in middle-left */
        radial-gradient(circle at 40% 60%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
    pointer-events: none;      /* Allow clicks to pass through */
    z-index: 0;                /* Position behind content */
}

/* Ensure all direct children appear above the background */
.surveys-container > * {
    position: relative;
    z-index: 1;                /* Higher than the ::before element */
}

/* ===========================================
 * HEADER SECTION
 * ===========================================
 */

/* Container for title and description */
.surveys-header {
    text-align: center;        /* Center-align all content */
    margin-bottom: 3rem;       /* Spacing between header and content */
    padding: 2rem 0;           /* Vertical padding */
}

/* Main title with gradient text effect */
.surveys-header h1 {
    color: #f0f6fc;            /* Fallback color if gradient not supported */
    font-size: 3rem;           /* Large, attention-grabbing size */
    margin-bottom: 1rem;       /* Space between title and description */
    text-shadow: 0 0 30px rgba(58, 123, 213, 0.3); /* Soft glow effect */
    /* Multi-color gradient text effect */
    background: linear-gradient(135deg, #58a6ff 0%, #bc8cff 50%, #7ee787 100%);
    -webkit-background-clip: text;         /* Clip background to text (Safari) */
    -webkit-text-fill-color: transparent;  /* Make text transparent (Safari) */
    background-clip: text;                 /* Standard property */
    font-weight: 700;          /* Bold text */
}

/* Subtitle/description text */
.surveys-header p {
    color: #8b949e;            /* Muted gray text for secondary information */
    font-size: 1.2rem;         /* Comfortable reading size */
    max-width: 600px;          /* Limit width for better readability */
    margin: 0 auto;            /* Center horizontally */
    line-height: 1.6;          /* Increased line height for readability */
}

/* ===========================================
 * SURVEYS GRID LAYOUT
 * ===========================================
 */

/* Responsive grid for survey cards */
.surveys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 400px)); /* Fixed max width cards */
    gap: 2rem;                 /* Spacing between cards */
    margin-bottom: 2rem;       /* Bottom margin for section */
    justify-content: center;   /* Center cards in grid */
}

/* ===========================================
 * SURVEY CARD COMPONENTS
 * ===========================================
 */

/* Individual survey card */
.survey-card {
    background-color: #1a1f29; /* Dark background for card */
    border-radius: 16px;       /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    overflow: hidden;          /* Ensures content stays within rounded corners */
    transition: transform 150ms ease, border-color 150ms ease; /* Smooth hover effects */
    border: 1px solid #30363d; /* Subtle border */
    position: relative;        /* For absolute positioning of children */
}

/* Hover animation for cards */
.survey-card:hover {
    transform: translateY(-4px); /* Slight upward movement */
    border-color: #58a6ff;      /* Highlight border with blue */
}

/* Active state (when clicked) */
.survey-card:active {
    transform: translateY(-2px); /* Slightly less movement when pressed */
}

/* Styling for completed survey cards */
.survey-card.completed {
    border-color: #238636;     /* Green border for completion */
    background-color: #0d1a12; /* Slightly green-tinted background */
}

/* Hover state for completed cards */
.survey-card.completed:hover {
    border-color: #7ee787;     /* Brighter green on hover */
}

/* Header section of the survey card with gradient background */
.survey-card-header {
    padding: 2.5rem 1.75rem 1.75rem 1.75rem; /* Extra top padding for badge */
    position: relative;         /* For positioning child elements */
    overflow: visible;          /* Allow badge to overflow */
    background: linear-gradient(to right, #58a6ff, #bc8cff); /* Blue to purple gradient */
}

/* Modified header gradient for completed surveys */
.survey-card.completed .survey-card-header {
    background: linear-gradient(to right, #7ee787, #238636); /* Green gradient for completed */
}


/* Title styling for survey cards */
.survey-title {
    font-size: 1.4rem;          /* Large, prominent size */
    font-weight: 700;           /* Bold weight */
    margin-bottom: 0.75rem;     /* Space below title */
    position: relative;         /* For z-index stacking */
    z-index: 1;                 /* Ensure text appears above backgrounds */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Shadow for legibility on gradients */
    letter-spacing: -0.02em;    /* Slightly tighter letter spacing for modern look */
}

/* Container for survey metadata (questions count, time, etc.) */
.survey-meta {
    font-size: 0.9rem;          /* Smaller than title text */
    opacity: 0.9;               /* Slightly transparent */
    position: relative;         /* For z-index stacking */
    z-index: 1;                 /* Ensure text appears above backgrounds */
    display: flex;              /* Use flexbox for layout */
    justify-content: space-between; /* Spread items across container */
    align-items: center;        /* Vertically center items */
}

/* Badge displaying question count */
.questions-count {
    background: rgba(255,255,255,0.25); /* Semi-transparent white */
    padding: 0.4rem 1rem;       /* Padding for pill shape */
    border-radius: 20px;        /* Fully rounded ends for pill shape */
    font-size: 0.85rem;         /* Smaller text */
    backdrop-filter: blur(10px); /* Modern glass effect */
    border: 1px solid rgba(255,255,255,0.2); /* Subtle border */
    font-weight: 600;           /* Semi-bold text */
}

/* Badge displaying estimated completion time */
.estimated-time {
    background: rgba(126, 231, 135, 0.25); /* Semi-transparent green */
    padding: 0.4rem 1rem;       /* Padding for pill shape */
    border-radius: 20px;        /* Fully rounded ends for pill shape */
    font-size: 0.85rem;         /* Smaller text */
    backdrop-filter: blur(10px); /* Modern glass effect */
    border: 1px solid rgba(126, 231, 135, 0.3); /* Subtle border */
    font-weight: 600;           /* Semi-bold text */
    color: #7ee787;             /* Light green text */
}

/* Badge for completed surveys */
.completion-badge {
    position: absolute;         /* Position relative to parent card */
    top: 5px;                 /* Position above the card header */
    right: 15px;                /* Distance from right */
    background: linear-gradient(135deg, #7ee787 0%, #238636 100%); /* Green gradient */
    color: white;               /* White text */
    padding: 0.5rem 1.25rem;    /* Padding for pill shape */
    border-radius: 20px;        /* Fully rounded ends for pill shape */
    font-size: 0.8rem;          /* Slightly larger text */
    font-weight: 700;           /* Bold text */
    z-index: 10;                /* Above other elements */
    box-shadow: 0 4px 15px rgba(126, 231, 135, 0.4); /* Green glow effect */
    text-transform: uppercase;  /* All caps for emphasis */
    letter-spacing: 0.5px;      /* Spaced letters for readability */
    border: 2px solid rgba(255,255,255,0.3); /* More visible border */
}

/* Main content area of survey card */
.survey-card-body {
    padding: 2rem;              /* Spacious internal padding */
    background: linear-gradient(135deg, #21262d 0%, #161b22 100%); /* Dark gradient background */
}

/* Survey description text with line clamp for consistent heights */
.survey-description {
    color: #c9d1d9;             /* Light gray text for readability */
    line-height: 1.7;           /* Generous line spacing */
    margin-bottom: 2rem;        /* Space below description */
    display: -webkit-box;       /* Special display for line clamping */
    -webkit-line-clamp: 4;      /* Limit to 4 lines for taller card */
    line-clamp: 4;              /* Standard property for line limiting */
    -webkit-box-orient: vertical; /* Required for webkit line clamp */
    overflow: hidden;           /* Hide text beyond line clamp */
    font-size: 1rem;            /* Standard font size */
    min-height: 6.8rem;         /* Minimum height for consistent card size */
}

/* Container for action buttons */
.survey-actions {
    display: flex;              /* Flexbox layout */
    justify-content: center;    /* Center button by default */
    align-items: center;        /* Center items vertically */
}

/* Centered variant for single button (completed surveys) */
.survey-actions.centered {
    justify-content: center;
}

/* Primary action button for starting a survey */
.start-survey-btn {
    background: linear-gradient(135deg, #7ee787 0%, #238636 100%); /* Green gradient */
    color: white;               /* White text */
    padding: 1rem 2rem;         /* Spacious padding */
    border: none;               /* No border */
    border-radius: 30px;        /* Fully rounded corners */
    text-decoration: none;      /* Remove underline from links */
    display: inline-flex;       /* Inline flex for proper sizing */
    align-items: center;        /* Center items vertically */
    gap: 0.75rem;               /* Space between icon and text */
    font-weight: 600;           /* Semi-bold text */
    transition: all 0.3s ease;  /* Smooth transition */
    cursor: pointer;            /* Hand cursor */
    box-shadow: 0 6px 20px rgba(126, 231, 135, 0.3); /* Green glow shadow */
    text-transform: uppercase;  /* All caps for emphasis */
    letter-spacing: 0.5px;      /* Letter spacing for readability */
    font-size: 0.9rem;          /* Slightly smaller font */
    border: 1px solid rgba(126, 231, 135, 0.3); /* Subtle border */
}

/* Hover state for start button */
.start-survey-btn:hover {
    background: linear-gradient(135deg, #238636 0%, #196127 100%); /* Darker green gradient */
    transform: translateY(-3px); /* Lift effect */
    box-shadow: 0 10px 30px rgba(126, 231, 135, 0.5); /* Enhanced shadow */
    color: white;               /* Ensure text remains white */
    text-decoration: none;      /* Ensure no underline */
}

/* Secondary action button for editing a survey */
.edit-survey-btn {
    background: linear-gradient(135deg, #ffa726 0%, #fb8500 100%); /* Orange gradient */
    color: white;               /* White text */
    padding: 1rem 2rem;         /* Spacious padding */
    border: none;               /* No border */
    border-radius: 30px;        /* Fully rounded corners */
    text-decoration: none;      /* Remove underline from links */
    display: inline-flex;       /* Inline flex for proper sizing */
    align-items: center;        /* Center items vertically */
    gap: 0.75rem;               /* Space between icon and text */
    font-weight: 600;           /* Semi-bold text */
    transition: all 0.3s ease;  /* Smooth transition */
    cursor: pointer;            /* Hand cursor */
    box-shadow: 0 6px 20px rgba(255, 167, 38, 0.3); /* Orange glow shadow */
    text-transform: uppercase;  /* All caps for emphasis */
    letter-spacing: 0.5px;      /* Letter spacing for readability */
    font-size: 0.9rem;          /* Slightly smaller font */
    border: 1px solid rgba(255, 167, 38, 0.3); /* Subtle border */
}

/* Hover state for edit button */
.edit-survey-btn:hover {
    background: linear-gradient(135deg, #fb8500 0%, #e76f00 100%); /* Darker orange gradient */
    transform: translateY(-3px); /* Lift effect */
    box-shadow: 0 10px 30px rgba(255, 167, 38, 0.5); /* Enhanced shadow */
    color: white;               /* Ensure text remains white */
    text-decoration: none;      /* Ensure no underline */
}

/* Container for survey statistics */
.survey-stats {
    display: flex;              /* Flexbox layout */
    gap: 1.5rem;                /* Space between stats */
    font-size: 0.9rem;          /* Smaller text size */
    color: #8b949e;             /* Muted text color */
    flex-wrap: wrap;            /* Allow wrapping on small screens */
}

/* Individual statistic item */
.stat-item {
    display: flex;              /* Flexbox for icon and text */
    align-items: center;        /* Vertical centering */
    gap: 0.5rem;                /* Space between icon and text */
    color: #c9d1d9;             /* Light text for readability */
    background: rgba(88, 166, 255, 0.1); /* Subtle blue background */
    padding: 0.5rem 1rem;       /* Padding for pill shape */
    border-radius: 20px;        /* Rounded corners */
    border: 1px solid rgba(88, 166, 255, 0.2); /* Subtle border */
    font-weight: 500;           /* Medium font weight */
}

/* Empty state message when no surveys are available */
.empty-state {
    text-align: center;         /* Center content */
    padding: 5rem 3rem;         /* Generous padding */
    background: linear-gradient(135deg, #21262d 0%, #161b22 100%); /* Dark gradient */
    border-radius: 20px;        /* Rounded corners */
    box-shadow: 0 8px 32px rgba(0,0,0,0.4); /* Substantial shadow */
    border: 1px solid #30363d;  /* Subtle border */
    backdrop-filter: blur(10px); /* Glass effect */
}

/* Icon styling in empty state */
.empty-state i {
    font-size: 5rem;            /* Large icon */
    color: #58a6ff;             /* Blue color */
    margin-bottom: 2rem;        /* Space below icon */
    opacity: 0.8;               /* Slightly transparent */
}

/* Heading in empty state */
.empty-state h3 {
    color: #f0f6fc;             /* Light text */
    margin-bottom: 1.5rem;      /* Space below heading */
    font-size: 1.8rem;          /* Large font size */
    font-weight: 700;           /* Bold text */
}

/* Paragraph in empty state */
.empty-state p {
    color: #8b949e;             /* Muted text */
    font-size: 1.1rem;          /* Comfortable reading size */
    line-height: 1.6;           /* Generous line height */
}

/* Alert message styling */
.alert {
    padding: 1.5rem;            /* Spacious padding */
    margin-bottom: 2rem;        /* Margin below alert */
    border-radius: 16px;        /* Rounded corners */
    display: flex;              /* Flexbox for icon and content */
    align-items: center;        /* Vertical centering */
    gap: 1rem;                  /* Space between icon and text */
    font-weight: 600;           /* Semi-bold text */
    backdrop-filter: blur(10px); /* Glass effect */
    border: 1px solid transparent; /* Transparent border by default */
}

/* Success alert styling */
.alert-success {
    background: linear-gradient(135deg, rgba(126, 231, 135, 0.15) 0%, rgba(35, 134, 54, 0.15) 100%); /* Green gradient */
    color: #7ee787;             /* Green text */
    border-color: rgba(126, 231, 135, 0.3); /* Green border */
    box-shadow: 0 8px 25px rgba(126, 231, 135, 0.1); /* Subtle green glow */
}

/* Alert icon styling */
.alert i {
    font-size: 1.3rem;          /* Larger icon size */
}

/* Link styling in alerts */
.alert-link {
    color: #58a6ff;             /* Blue link color */
    text-decoration: none;      /* No underline */
    font-weight: 700;           /* Bold text */
    border-bottom: 2px solid transparent; /* Invisible bottom border for hover effect */
    transition: all 0.3s ease;  /* Smooth transition */
    text-transform: uppercase;  /* All caps text */
    letter-spacing: 0.5px;      /* Spaced letters for readability */
    font-size: 0.9rem;          /* Smaller font size */
}

/* Hover state for alert links */
.alert-link:hover {
    color: #79c0ff;             /* Lighter blue on hover */
    border-bottom-color: #58a6ff; /* Show border on hover */
    text-decoration: none;      /* No underline */
    transform: translateY(-1px); /* Slight upward movement */
}

.participation-choice {
    margin-bottom: 2rem;
}

.choice-card {
    background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
    border: 2px solid #30363d;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    backdrop-filter: blur(10px);
}

.choice-card:hover {
    border-color: #58a6ff;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(88, 166, 255, 0.2);
}

.guest-choice {
    border-color: #6e7681;
}

.guest-choice:hover {
    border-color: #8b949e;
    box-shadow: 0 10px 30px rgba(139, 148, 158, 0.2);
}

.member-choice {
    background: linear-gradient(135deg, #0d2818 0%, #0f1419 100%);
    border-color: #238636;
}

.member-choice:hover {
    border-color: #7ee787;
    box-shadow: 0 10px 30px rgba(126, 231, 135, 0.3);
}

.choice-card h6 {
    margin-bottom: 1rem;
    font-weight: 700;
    color: #f0f6fc;
    font-size: 1.2rem;
}

.choice-card p.small {
    color: #8b949e;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.choice-benefits {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.choice-benefits li {
    margin-bottom: 0.5rem;
    color: #c9d1d9;
}

.choice-card .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.choice-card .btn-outline-secondary {
    background: transparent;
    color: #8b949e;
    border: 2px solid #30363d;
}

.choice-card .btn-outline-secondary:hover {
    background: #30363d;
    color: #f0f6fc;
    border-color: #484f58;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(48, 54, 61, 0.3);
}

.choice-card .btn-primary {
    background: linear-gradient(135deg, #7ee787 0%, #238636 100%);
    color: white;
    border: 2px solid transparent;
}

.choice-card .btn-primary:hover {
    background: linear-gradient(135deg, #238636 0%, #196127 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(126, 231, 135, 0.4);
    color: white;
    text-decoration: none;
}

/* Enhanced button styles for consistent theming */
.btn, button, input[type="submit"] {
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.btn:focus, button:focus, input[type="submit"]:focus {
    outline: 2px solid #58a6ff;
    outline-offset: 2px;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .surveys-grid {
        grid-template-columns: 1fr;
    }
    
    .surveys-container {
        padding: 1rem;
        margin: 1rem;
    }
    
    .survey-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .survey-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .participation-choice .row {
        gap: 1rem;
    }
    
    .participation-choice .col-md-6 {
        flex: 1;
        min-width: 250px;
    }
}