/* ============================================
   CSS VARIABLES (Design Tokens)
   ============================================ */
:root {
    /* Purple Color Palette */
    --color-primary: #4a1a6b;        /* Dark purple */
    --color-primary-light: #6b2d8f;  /* Medium purple */
    --color-primary-dark: #2d0f42;   /* Darker purple */
    --color-accent: #9b59b6;         /* Light purple accent */
    
    /* Text Colors */
    --color-text-light: #f0f0f0;     /* Light text for dark backgrounds */
    --color-text-dark: #333;         /* Dark text for light backgrounds */
    --color-text-muted: #b8b8b8;     /* Muted text */
    
    /* Background Colors */
    --color-bg-light: #f9f9f9;
    --color-bg-white: #ffffff;
    
    /* Utility Colors */
    --color-border: #ddd;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #fd7e14;
    --color-info: #17a2b8;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    
    /* Layout */
    --max-width-content: 600px;
    --header-height: 60px;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
header {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-text-light);
}

.menu {
    display: flex;
    gap: var(--spacing-sm);
}

.menu a {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 1rem;
    padding: 0.5rem;
    transition: background-color 0.2s ease;
    border-radius: 4px;
}

.menu a:hover {
    background-color: var(--color-primary-light);
}

/* Hamburger Menu (Hidden on Desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: var(--color-text-light);
}

/* ============================================
   MOBILE STYLES (Mobile-First Approach)
   ============================================ */
@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        background-color: var(--color-primary-dark);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 0;
    }

    .menu.active {
        display: flex;
        padding: var(--spacing-sm);
    }

    .hamburger {
        display: flex;
    }
}

/* ============================================
   MAIN CONTENT
   ============================================ */
main {
    flex: 1;
    padding: var(--spacing-sm);
    text-align: left;
}

main p {
    margin: var(--spacing-sm) 0;
}

main ul {
    margin-left: var(--spacing-md);
    padding-left: var(--spacing-md);
}

main ul li {
    margin-bottom: var(--spacing-xs);
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-align: center;
    padding: var(--spacing-sm);
    position: relative;
}

footer a {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 1rem;
}

footer a:hover {
    text-decoration: underline;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}

h2 {
    text-align: center;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
.form-row,
.form-group {
    margin-bottom: var(--spacing-sm);
}

.form-row label,
.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
    color: var(--color-text-dark);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="date"],
.form-row input[type="number"],
.form-row select,
.form-row textarea,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: var(--color-bg-white);
    transition: border-color 0.2s ease;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.form-group input[readonly] {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* ============================================
   BUTTONS
   ============================================ */
button,
.btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

button:hover:not(:disabled),
.btn:hover {
    background-color: var(--color-primary-light);
}

button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}

/* Button variants */
.btn-primary,
a.btn-primary {
    background-color: var(--color-success);
    color: var(--color-text-light) !important;
}

.btn-primary:hover,
a.btn-primary:hover {
    background-color: #218838;
}

.btn-secondary {
    background-color: var(--color-info);
}

.btn-secondary:hover:not(:disabled) {
    background-color: #138496;
}

.btn-danger {
    background-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
    background-color: #c82333;
}

/* Ensure button links don't get underlined */
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-danger {
    text-decoration: none !important;
}

/* ============================================
   CONTAINERS & CARDS
   ============================================ */
.container {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.container-wide {
    max-width: 2000px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--spacing-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-container {
    max-width: 600px;
    margin: var(--spacing-lg) auto;
    padding: var(--spacing-lg);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .container,
    .form-container {
        padding: var(--spacing-sm);
        margin: var(--spacing-sm) auto;
    }
}

/* ============================================
   ALERTS & MESSAGES
   ============================================ */
.alert {
    padding: var(--spacing-sm);
    border-radius: 4px;
    margin-bottom: var(--spacing-sm);
}

.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }






/* ============================================
   TABLES
   ============================================ */
.table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.table thead {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

.table th {
    padding: var(--spacing-sm);
    text-align: left;
    font-weight: bold;
}

.table td {
    padding: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.table tbody tr:hover {
    background-color: var(--color-bg-light);
}

.table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* Table actions - inline forms and buttons */
.table td form {
    display: inline;
    margin: 0;
}

.table td .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

/* Mobile responsiveness for tables */
@media (max-width: 768px) {
    .table {
        font-size: 0.9rem;
    }
    
    .table th,
    .table td {
        padding: var(--spacing-xs);
    }
    
    .table td .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }
}
/* Table action buttons - better spacing and wrapping */
.table td.actions {
    white-space: nowrap;
    min-width: 350px;
}

.table td .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.table td form {
    display: inline-block;
    margin: 0;
}
/* Specific column widths */
.table td.venue-name,
.table th.venue-name {
    min-width: 250px;
    width: 35%;
}





/* ============================================
   ADMIN DASHBOARD BUTTONS
   ============================================ */
.admin-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-sm);
    max-width: 400px;
    margin: 0 auto;
}

.admin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 90px;
    padding: 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

/* Start the Show - Light Purple gradient (ready state) */
.btn-start-show {
    background: linear-gradient(135deg, #8b5fc7 0%, #b589e0 100%);
}

.btn-start-show:hover {
    background: linear-gradient(135deg, #a07dd6 0%, #c9a3ed 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(139, 95, 199, 0.3);
}

.btn-start-show:active {
    background: linear-gradient(135deg, #b589e0 0%, #d9bcf5 100%);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(139, 95, 199, 0.2);
}

/* Upload Files - Light Teal/Purple (ready state) */
.btn-upload {
    background: linear-gradient(135deg, #5dcddf 0%, #8fa9d8 100%);
}

.btn-upload:hover {
    background: linear-gradient(135deg, #7dd9e8 0%, #a9c0e8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(93, 205, 223, 0.3);
}

.btn-upload:active {
    background: linear-gradient(135deg, #9de5f0 0%, #c3d7f5 100%);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(93, 205, 223, 0.2);
}

/* Print Claim Checks - Light Orange/Pink (ready state) */
.btn-print-checks {
    background: linear-gradient(135deg, #ffab5e 0%, #f4a4d0 100%);
}

.btn-print-checks:hover {
    background: linear-gradient(135deg, #ffc180 0%, #f7bbe0 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 171, 94, 0.3);
}

.btn-print-checks:active {
    background: linear-gradient(135deg, #ffd5a0 0%, #fad2ed 100%);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 171, 94, 0.2);
}

/* Data Maintenance - Medium Purple (ready state) */
.btn-maintenance {
    background: linear-gradient(135deg, #7251a3 0%, #9b76c8 100%);
}

.btn-maintenance:hover {
    background: linear-gradient(135deg, #8b6bb8 0%, #b48fd8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(114, 81, 163, 0.3);
}

.btn-maintenance:active {
    background: linear-gradient(135deg, #9b76c8 0%, #c9a8e8 100%);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(114, 81, 163, 0.2);
}

/* Disabled state - works for any button */
.admin-btn.disabled {
    background: linear-gradient(135deg, #a0a8b0 0%, #8a9199 100%);
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.admin-btn.disabled:hover {
    transform: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .admin-btn {
        width: 100%;
        max-width: 320px;
    }
}

/* Past Events - Teal/Blue gradient */
.btn-past-events {
    background: linear-gradient(135deg, #26a69a 0%, #5c6bc0 100%);
}

.btn-past-events:hover {
    background: linear-gradient(135deg, #4db6ac 0%, #7986cb 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(38, 166, 154, 0.3);
}

.btn-past-events:active {
    background: linear-gradient(135deg, #80cbc4 0%, #9fa8da 100%);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(38, 166, 154, 0.2);
}