/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    /* BRAND COLOURS */
    --primary-green: #053b06;
    --primary-light: #0dab76;
    --accent-gold: #c2a83e;
    --accent-hover: #b7791f;
    --accent-rose: #c53030;

    /* NEUTRALS */
    --text-dark: #1a202c;
    --text-light: #f0fff4;
    --bg-body: #f7fafc;
    --white: #ffffff;
    
    /* UTILITIES */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-dark);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 { font-family: 'Cinzel', serif; color: var(--primary-green); margin-bottom: 0.5rem; }
a { text-decoration: none; color: inherit; transition: var(--transition-base); }
ul { list-style: none; }

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */
header {
    background-color: var(--primary-green);
    color: var(--text-light);
    padding: 0.5rem 0;
    position: sticky; top: 0; z-index: 1000;
    box-shadow: var(--shadow);
    border-bottom: 3px solid var(--accent-gold);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
}

/* Branding */
.brand-wrapper { display: flex; align-items: center; gap: 15px; }

/* Fix for links adding extra space under images */
.brand-wrapper a {
    display: flex;           
    align-items: center;     
    text-decoration: none;   
    color: inherit;          
}

.logo-img { height: 55px; width: auto; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3)); }
.logo-text { 
    font-family: 'Cinzel', serif; 
    font-size: 1.4rem; 
    font-weight: 700; 
    color: var(--accent-gold); 
    letter-spacing: 1px; 
    line-height: 1.2;
    white-space: nowrap; /* Prevents wrapping on desktop */
}

/* Nav Menu */
nav ul { display: flex; gap: 1.2rem; align-items: center; }
nav a { 
    color: var(--text-light); 
    font-weight: 700; 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    white-space: nowrap; 
}
nav a:hover { color: var(--accent-gold); }

/* Mobile Menu Toggle */
.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; color: var(--white); }

/* Login Button */
.login-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--accent-gold); border-radius: 50px;
    padding: 0.4rem 1.2rem;
    color: var(--accent-gold); transition: var(--transition-base);
}
.login-btn:hover { background-color: var(--accent-gold); color: var(--primary-green); }
.login-icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; display: block; }

/* =========================================
   HYBRID DATE PICKER STYLES
   ========================================= */

    /* Styling for the hybrid date input */
    .date-wrapper .auth-input {
        width: 100%;
        flex-grow: 1;
    }
    .picker-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--border-light);
        border: 1px solid var(--border-mid);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        width: 45px;
        cursor: pointer;
        position: relative;
        font-size: 1.2rem;
    }
    .picker-btn:hover {
        background: var(--border-light);
    }
    .picker-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0; /* Invisible but clickable */
        cursor: pointer;
        z-index: 10;
    }



/* =========================================
   3. HERO SECTIONS (HOME vs PAGE)
   ========================================= */
/* Common Hero Styles */
.hero, .page-hero {
    position: relative;
    /* Hero background options (swap URL to change image):
       - /template/images/protectorate-rose-altered-v1.png  (Altered Rose)
       - /template/images/stone_archway_reduced.jpg          (Archway 1)
       - /template/images/fantasy_arch_2_reduced.png         (Archway 2)
       - /template/images/hero_party_stylised_2.png          (Stylised Party)
       - /template/images/scotland_forest_background.png     (Forest)
    */
        background: linear-gradient(rgba(10, 30, 20, 0.9), rgba(27, 77, 62, 0.8)),
                url('/template/images/trees-background.jpg'); /* Current: Trees */        
    background-size: cover; background-position: center;
    color: var(--white);
    text-align: center;
    overflow: hidden;
}

/* FORCE HERO HEADINGS TO BE WHITE */
.hero h1,
.page-hero h1 {
    color: var(--white);
    text-shadow: 0 4px 15px rgba(0,0,0,0.9); /* Strong drop shadow to lift it off the trees */
}

/* Home Hero (Tall, Large Watermark) */
.hero { padding: 8rem 1.5rem; }
/**.hero::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background-image: url('protectorate-symbol.png'); 
    background-repeat: no-repeat; background-position: center; background-size: contain;
    opacity: 0.15; pointer-events: none; mix-blend-mode: overlay;**/
}
.hero h1 { font-size: 3rem; margin-bottom: 1rem; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); }
.hero p { font-size: 1.25rem; max-width: 600px; margin: 0 auto 2.5rem auto; color: #e2e8f0; font-weight: 400; text-shadow: 1px 1px 4px rgba(0,0,0,0.8); }

/* Page Hero (Short, Small Watermark) */
.page-hero { padding: 4rem 1.5rem; }
/**.page-hero::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    background-image: url('protectorate-symbol.png');
    background-repeat: no-repeat; background-position: center; background-size: contain;
    opacity: 0.1; pointer-events: none; mix-blend-mode: overlay;
} **/
.page-hero h1 { font-size: 2.5rem; margin: 0; text-shadow: 2px 2px 8px rgba(0,0,0,0.6); }

/* CTA Buttons */
.cta-button {
    background-color: var(--accent-gold); color: var(--text-dark);
    padding: 0.85rem 2.5rem; border-radius: 4px;
    font-weight: 700; text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); border: 1px solid var(--accent-hover); display: inline-block;
}
.cta-button:hover { background-color: var(--accent-hover); color: var(--white); transform: translateY(-2px); }

/* =========================================
   TWEAK: ACTION ROW BUTTONS (Make them smaller)
   ========================================= */
.action-row .cta-button {
    padding: 0.6rem 1.2rem;  /* Reduced from 0.85rem 2.5rem */
    font-size: 0.9rem;       /* Slightly smaller text */
    min-width: auto;         /* Allow them to shrink to fit text */
}

/* Optional: Ensure the flex container handles wrapping nicely */
.action-row > div {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* =========================================
   4. HOME PAGE COMPONENTS
   ========================================= */
/* Next Event Banner */
.next-event-banner {
    background-color: var(--white);
    border-left: 6px solid var(--accent-rose);
    padding: 1.5rem; margin: -2.5rem auto 3rem auto;
    width: 90%; max-width: 900px;
    border-radius: 4px; box-shadow: var(--shadow);
    display: flex; justify-content: space-between; align-items: center;
    position: relative; z-index: 10;
}
.event-info h3 { font-size: 1.1rem; color: var(--primary-green); margin-bottom: 0.25rem; }
.event-date { color: var(--accent-rose); font-weight: 700; }
.text-link { color: var(--primary-green); font-weight: 700; font-size: 0.9rem; }
.text-link:hover { color: var(--accent-rose); }

/* Content Grid (Home) */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px; margin: 0 auto 5rem auto; padding: 0 1.5rem;
}

/* Card Styling */
.card {
    background: var(--white); border-radius: 8px; overflow: hidden;
    box-shadow: var(--shadow); transition: transform 0.3s ease;
    display: flex; flex-direction: column; border: 1px solid var(--border-light);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.card-header { background-color: var(--primary-green); color: var(--white); padding: 1.25rem 1.5rem; font-family: 'Cinzel', serif; font-weight: 700; }
.card-body { padding: 1.5rem; flex-grow: 1; color: var(--text-subtle); }
.card-footer { padding: 1rem 1.5rem; background-color: var(--bg-light); border-top: 1px solid var(--border-faint); text-align: right; }

/* =========================================
   5. STANDARD PAGE LAYOUTS
   ========================================= */
.page-container {
    max-width: 1200px; margin: 3rem auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: 250px minmax(0, 1fr); /* Sidebar 250px, Content rest */
    gap: 3rem; align-items: start;
}

/* Sidebar (Compact Mode) */
.sidebar {
    background: var(--white); 
    padding: 1.25rem; /* Slightly reduced container padding */
    border-radius: 8px; box-shadow: var(--shadow);
    border-top: 4px solid var(--primary-green);
    position: sticky; top: 100px;
}
.sidebar h3 { 
    font-size: 1.1rem; 
    border-bottom: 1px solid var(--border-light); 
    padding-bottom: 0.5rem; 
    margin-bottom: 0.75rem; 
}

/* Tighter List Spacing */
.sidebar ul { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; /* Much smaller gap between items */
}

/* Compact Links */
.sidebar li a { 
    display: block; 
    padding: 6px 10px; /* Reduced vertical padding */
    border-radius: 4px; 
    color: var(--text-subtle); 
    font-size: 0.9rem; /* Slightly smaller font */
    line-height: 1.3;
    transition: all 0.1s ease;
}

.sidebar li a:hover, .sidebar li a.active { 
    background-color: var(--bg-green-tint); 
    color: var(--primary-green); 
    font-weight: 700; 
}
.sidebar-toggle { display: none; width: 100%; background: none; border: none; color: var(--primary-green); font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.1rem; text-align: left; cursor: pointer; padding: 0; align-items: center; justify-content: space-between; }

/* Content Area Typography */
.content-area {
    background: var(--white); padding: 2rem;
    border-radius: 8px; box-shadow: var(--shadow);
    font-size: 1.05rem; color: var(--text-body);
	width: 100%; 
	min-width: 0; /* Critical for nested grids to calculate width correctly */
    box-sizing: border-box;
}

/* Only applies to screens wider than 768px (Tablets and Desktops) */
@media (min-width: 768px) {
  .content-area {
    min-width: 700px;
  }
}

/* Reduced from 2rem to 0.5rem or 0 */
.content-area h2 { 
    font-size: 1.8rem; 
    margin-top: 0; /* Changed */
    margin-bottom: 1rem; /* Add bottom spacing instead */
    border-bottom: 2px solid var(--accent-gold); 
    padding-bottom: 0.5rem; 
    display: inline-block; 
}
.content-area h3 { font-size: 1.4rem; margin-top: 1.5rem; color: var(--primary-light); }
.content-area p { margin-bottom: 1.5rem; text-align: justify; }
.content-area ul, .content-area ol { margin-bottom: 1.5rem; margin-left: 2rem; list-style: disc; }
.content-area li { margin-bottom: 0.5rem; }
.content-area blockquote { border-left: 4px solid var(--accent-gold); margin: 1.5rem 0; padding: 1rem; background: var(--bg-gold-tint); font-style: italic; }

/* Content Images & Floats */
.content-image { max-width: 100%; height: auto; border-radius: 4px; margin: 1rem 0; box-shadow: var(--shadow); border: 1px solid var(--border-light); }
.align-right { float: right; margin: 0 0 1rem 1.5rem; max-width: 40%; }
.align-left { float: left; margin: 0 1.5rem 1rem 0; max-width: 40%; }
.full-width { width: 100%; display: block; }
.clearfix::after { content: ""; clear: both; display: table; }

.back-link {
  display: inline-flex;     /* Aligns icon and text side-by-side */
  align-items: center;      /* Vertically centers the icon with text */
  gap: 8px;                 /* Spacing between arrow and text */
  text-decoration: none;    /* Removes standard underline (optional) */
  color: #333;              /* Set your desired text color here */
  font-weight: 500;         /* Optional: makes text slightly bolder */
  transition: var(--transition-fast); /* Smooth hover effect */
}

/* Optional: Hover state */
.back-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Ensure the SVG scales with text if you change font-size */
.back-link svg {
  width: 1.2em;
  height: 1.2em;
}

/* File Upload field Styling */
.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 25px;
    border: 2px dashed var(--accent-gold);
    border-radius: 6px;
    transition: var(--transition-fast);
    background-color: #fffdf5; /* Light gold tint */
    text-align: center;
    cursor: pointer;
}

.file-drop-area.is-active {
    background-color: var(--white);
    border-color: var(--primary-green);
}

.fake-btn {
    flex-shrink: 0;
    background-color: var(--accent-gold);
    color: var(--text-body);
    padding: 8px 15px;
    border-radius: 4px;
    margin-right: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
}

.file-msg {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

   /* Simple styles to make the accordion layout look like the theme */
    .year-group {
        margin-bottom: 15px;
        border: 1px solid var(--border-light);
        border-radius: 6px;
        overflow: hidden;
    }
    .year-header {
        background: var(--bg-light);
        padding: 15px;
        font-family: 'Cinzel', serif;
        font-size: 1.2rem;
        color: var(--primary-green);
        cursor: pointer;
        font-weight: bold;
        list-style: none; /* Hides default triangle in some browsers */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .year-header:hover {
        background: var(--border-faint);
        color: var(--accent-gold);
    }
    /* Custom Indicator */
    .year-header::after {
        content: '+'; 
        font-weight: bold;
        float: right;
    }
    details[open] .year-header::after {
        content: '-';
    }
    .count-badge {
        background: var(--border-light);
        color: var(--text-subtle);
        font-family: 'Lato', sans-serif;
        font-size: 0.8rem;
        padding: 2px 8px;
        border-radius: 10px;
        vertical-align: middle;
        margin-left: 10px;
    }
    .year-content {
        padding: 0;
        border-top: 1px solid var(--border-light);
    }
    .year-content table tr:last-child td {
        border-bottom: none;
    }

/* =========================================
   CMS CONTENT LINK STYLING
   ========================================= */
.cms-content a {
    color: var(--primary-green);      /* Brand Green */
    font-weight: 700;                 /* Make it bold */
    border-bottom: 2px solid var(--border-mid); /* Subtle grey underline by default */
    transition: var(--transition-fast);
    text-decoration: none;            /* Remove default browser underline */
}

.cms-content a:hover {
    color: var(--accent-hover);       /* Darker Gold/Bronze on hover */
    border-bottom-color: var(--accent-gold); /* Gold underline on hover */
    background-color: var(--bg-gold-tint);        /* Very faint gold background highlight */
}

/* =========================================
   SCRYING BOX (Renamed to avoid Ad-Blockers)
   ========================================= */
.scry-box {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--primary-green);
    color: var(--text-light);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--accent-gold);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    z-index: 10000;
    max-width: 400px;
    font-family: 'Lato', sans-serif;
    
    /* Visibility Settings */
    opacity: 1;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.scry-content p {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.scry-btn {
    background: var(--accent-gold);
    color: var(--primary-green);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: 'Cinzel', serif;
    transition: var(--transition-fast);
    margin-top: 5px;
}

.scry-btn:hover {
    background: var(--white);
}

@media (max-width: 600px) {
    .scry-box {
        left: 10px; 
        right: 10px;
        bottom: 10px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* =========================================
   6. SHARE BAR COMPONENT
   ========================================= */
.share-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem;
    background-color: var(--bg-green-tint); border: 1px solid var(--success-border);
    padding: 0.75rem 1rem; border-radius: 6px; margin: 1.5rem 0;
    font-size: 0.9rem;
}
.share-label { font-family: 'Cinzel', serif; font-weight: 700; color: var(--primary-green); display: flex; align-items: center; gap: 5px; }
.short-link-display { background: var(--white); border: 1px solid var(--border-mid); color: var(--text-muted); padding: 0.25rem 0.75rem; border-radius: 4px; font-family: monospace; font-size: 0.9rem; letter-spacing: -0.5px; user-select: all; word-break: break-all; white-space: normal; }
.share-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.share-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 4px; border: 1px solid transparent; background-color: var(--white); color: var(--primary-green);
    transition: var(--transition-fast); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.share-btn:hover { background-color: var(--accent-gold); color: var(--white); transform: translateY(-1px); }
.copy-btn { width: auto; padding: 0 0.8rem; font-weight: 700; font-size: 0.8rem; gap: 5px; border-color: #e2e8f0; }


/* =========================================
   7. FOOTER
   ========================================= */
footer {
    background-color: var(--primary-green); color: var(--border-mid); text-align: center;
    padding: 3rem 1.5rem; margin-top: auto; border-top: 5px solid var(--accent-gold);
}
.social-links { display: flex; justify-content: center; gap: 1.5rem; margin: 1.5rem 0; }
.social-icon { width: 28px; height: 28px; fill: var(--accent-gold); transition: var(--transition-base); }
.social-link:hover .social-icon { fill: var(--white); transform: scale(1.1); }

/* =========================================
   8. RESPONSIVE / MOBILE
   ========================================= */
@media (max-width: 992px) {
    /* Header & Nav */
    .menu-toggle { display: block; }
    nav ul {
        display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%;
        background-color: var(--primary-green); padding: 1rem 0; text-align: center; border-bottom: 2px solid var(--accent-gold);
    }
    nav ul.active { display: flex; }
    nav a { 
        white-space: nowrap; /* Forces text to stay on one line */
        padding: 0.5rem 0; 
    }
    .login-btn { margin: 0.25rem auto; 
		width: 80%; 
		display: flex;
		/* NEW: Enforce centering and color on mobile */
        justify-content: center;
        align-items: center;
        color: var(--accent-gold) !important; /* Force Gold color to persist */
		/* NEW: Force text to stay on one line */
    	white-space: nowrap;
	}
    
    /* Allow logo wrap on small screens */
    .logo-text { white-space: normal; font-size: 1.2rem; }

    /* Home Layouts */
    .hero h1 { font-size: 2rem; }
    .hero::before { width: 300px; height: 300px; }
    .next-event-banner { flex-direction: column; text-align: center; gap: 1rem; }
    
    /* Card visibility logic */
    .card:nth-child(3) { display: none; } /* Tablet hides card 3 */
    
    /* Page Layouts */
    .page-container { grid-template-columns: 1fr; gap: 2rem; }
    .sidebar { position: static; padding: 1rem; }
    .sidebar-toggle { display: flex; }
    .sidebar ul { display: none; margin-top: 1rem; border-top: 1px solid var(--border-light); padding-top: 0.5rem; }
    .sidebar ul.active { display: flex; }
    .sidebar h3.desktop-title { display: none; }
    
    /* Content Floats disable */
    .align-right, .align-left { float: none; max-width: 100%; width: 100%; margin: 1rem 0; }
}

@media (max-width: 600px) {
    /* Phone Specifics */
    .card:nth-child(2), .card:nth-child(3) { display: none; } /* Phone hides 2 & 3 */
    .logo-img { height: 40px; }
    
    /* Share Bar Stack */
    .share-bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .share-actions { margin-left: 0; width: 100%; justify-content: space-between; }
    .short-link-display { width: 100%; text-align: center; }
}

/* =========================================
   9. AUTHENTICATION PAGES (Login/Register)
   ========================================= */

/* Center the auth form and remove the sidebar grid layout for this page */
.auth-container {
    max-width: 600px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

/* The card look */
.auth-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--accent-gold);
}

.auth-form-group {
    margin-bottom: 1.5rem;
}

.auth-label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary-green);
    font-family: 'Cinzel', serif;
}

.auth-input {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid var(--text-muted); /* 2px and darker grey — unmissable on white */
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    background-color: var(--bg-body); /* #f7fafc — slightly off-white against the white card */
    color: var(--text-body);
    transition: var(--transition-fast);
}

.auth-input:hover {
    border-color: var(--text-body);
}

.auth-input:focus {
    outline: none;
    border-color: var(--primary-light);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(13, 171, 118, 0.1);
}

/* Button Stack */
.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.auth-btn {
    width: 100%;
    text-align: center;
    cursor: pointer;
    border: none;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
}

.google-btn {
    background-color: var(--white);
    color: #757575;
    border: 1px solid var(--border-bare);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-base);
}

.google-btn:hover {
    background-color: #f1f1f1;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Links below the form */
.auth-links {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    border-top: 1px solid var(--border-light);
    padding-top: 1.5rem;
}

.auth-links a {
    color: var(--primary-light);
    font-weight: 700;
}
.auth-links a:hover {
    color: var(--accent-rose);
    text-decoration: underline;
}

/* =========================================
   10. TOAST NOTIFICATIONS (Flyouts)
   ========================================= */
.toast-container {
    position: fixed;
    top: 80px; /* Below the header */
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Let clicks pass through empty space */
}

.toast {
    min-width: 300px;
    max-width: 400px;
    padding: 1rem 1.5rem;
    background-color: var(--white);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: var(--text-dark);
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    
    /* Animation setup */
    opacity: 0;
    transform: translateX(100%);
    animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    
    pointer-events: auto; /* Re-enable clicks on the box itself */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Toast Variants */
.toast.error {
    border-left: 5px solid var(--accent-rose);
}
.toast.success {
    border-left: 5px solid var(--primary-green);
}

/* Animations */
@keyframes slideIn {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateX(100%); }
}

/* VERIFICATION NAG (Sticky Bottom Toast) */
.verify-nag-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--accent-rose); /* Brand Red */
    color: var(--white);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 350px;
    font-family: 'Lato', sans-serif;
    
    /* Animation: Slide Up from bottom */
    opacity: 0;
    transform: translateY(100px);
    animation: slideUp 0.5s ease-out forwards;
}

.verify-nag-content {
    display: flex; 
    flex-direction: column;
}

.verify-nag-btn {
    background: var(--white);
    color: var(--accent-rose);
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    margin-top: 5px;
    display: inline-block;
    width: fit-content;
}

.verify-nag-btn:hover {
    background-color: #ffeaea;
}

.verify-nag-close {
    cursor: pointer;
    opacity: 0.8;
    font-size: 1.5rem;
    line-height: 1;
    transition: var(--transition-fast);
}

.verify-nag-close:hover {
    opacity: 1;
}

/* Specific Animation for Bottom Toast */
@keyframes slideUp {
    to { transform: translateY(0); opacity: 1; }
}

/* Mobile Tweak for Nag */
@media (max-width: 600px) {
    .verify-nag-toast {
        left: 20px; /* Full width minus margins */
        right: 20px;
        bottom: 10px;
        flex-direction: row;
    }
}

/* =========================================
   11. USER DASHBOARD
   ========================================= */
.dashboard-grid {
    display: grid;
    /* 1. Use auto-fill (keeps cards from stretching too wide if there's only 1) */
    /* 2. Increase min-width to 300px (Forces 2 columns instead of 3 on standard screens) */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.dash-card {
    background-color: var(--white); /* Cards sit on white against the bg-body page background */
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.dash-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-light);
}

/* .dash-card h3 defined in Section 13 (Card Alignment) below */

.dash-card p {
    font-size: 0.95rem;
    color: var(--text-subtle);
    margin-bottom: 1.5rem;
}

.dash-link {
    display: inline-block;
    color: var(--primary-green);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-link:hover {
    color: var(--accent-rose);
    text-decoration: none;
}

/* =========================================
   12. SINGLE COLUMN LAYOUT (Events, etc)
   ========================================= */
/* .single-column-container: full-width centered layout without sidebar.
   Used on events list, bestiary, etc. No grid — intentionally a plain
   centered block. Shares width/margin with .page-container. */
.single-column-container {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

/* .event-date styles: see Section 4 (.event-info .event-date) and card-header-row section */

.event-location {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Make the linked title change color on hover */
.title-link {
    text-decoration: none;
    color: inherit; /* Keeps it green by default */
    transition: var(--transition-fast);
}

.title-link:hover {
    color: var(--accent-hover); /* Changes to Gold/Bronze on hover */
    text-decoration: underline;
}

/* Cancelled Event Styles */
.badge-cancelled {
    background-color: var(--accent-rose); /* Red */
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: auto; /* Pushes it to the right */
}

.cancelled-card {
    opacity: 0.75; /* Slightly faded */
    background-color: var(--bg-red-tint); /* Very light red tint */
    border: 1px solid var(--error-border);
}

.cancelled-banner {
    background-color: var(--accent-rose);
    color: white;
    text-align: center;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* =========================================
   13. CARD ALIGNMENT FIXES (STRICT MODE)
   ========================================= */

/* 1. The Date/Badge Row */
.card-header-row {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start;
    
    /* STRICT FIX: Use 'height' not 'min-height' */
    /* This forces all headers to be exactly this tall, even if text is short */
    height: auto; 
	min-height: 0;
    
    /* Safety: If text goes to 3 lines, cut it off rather than breaking layout */
    overflow: hidden; 
    margin-bottom: 0.5rem;
}

/* Ensure date text is tight enough to fit 2 lines comfortably */
.event-date {
    line-height: 1.3;
    /* Optional: Ensure it doesn't run into the badge */
    max-width: 80%; 
}

/* 2. The Title (H3) */
.dash-card h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--primary-green);
    
    /* Strict Line Height */
    line-height: 1.4; 
    
    /* Border and Spacing */
    border-bottom: 2px solid var(--accent-gold);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;

    /* STRICT FIX: Use 'height' to force consistent container size */
    /* 2 lines of text + padding + border space */
    height: 3.9rem; 
    
    /* Flex box to handle text alignment inside the fixed box */
    display: flex;
    align-items: flex-start;
    
    /* Cut off extra text */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* =========================================
   GOOGLE CALENDAR EMBED STYLES
   (Matches Protectorate Theme)
   ========================================= */
.calendar-container {
    margin: 2rem 0 3rem 0; /* Spacing from surrounding elements */
    width: 100%;
}

.calendar-frame-wrapper {
    position: relative;
    padding-bottom: 75%; /* 4:3 Aspect Ratio (Good for calendars) */
    height: 0;
    overflow: hidden;
    
    /* THEME STYLING */
    background: var(--white);
    border: 2px solid var(--accent-gold); /* Matches your nav and headers */
    border-radius: 8px;                   /* Matches your .card radius */
    box-shadow: var(--shadow);            /* Matches your global shadow */
}

.calendar-frame-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Header for the calendar section */
.calendar-title {
    font-family: 'Cinzel', serif;      /* Your Brand Font */
    color: var(--primary-green);       /* Your Brand Color */
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Optional: Add a subtle decorative line below the title like the dashboard cards */
.calendar-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--accent-rose); /* Nice contrast color from your vars */
    margin: 5px auto 0 auto;
}

/* Mobile handling: Calendar aspect ratio */
    @media (max-width: 600px) {
        .calendar-frame-wrapper { padding-bottom: 100%; }
        
        /* Default Left Alignment (Good for Location address) */
        .location-tooltip { left: 0; transform: none; width: 250px; }
        .location-wrapper:hover .location-tooltip { transform: none; }
        .location-tooltip::after { left: 20px; } 

        /* NEW: Right Alignment (For badges on the right side of screen) */
        .mobile-align-right .location-tooltip {
            left: auto;     /* Unset left */
            right: 0;       /* Anchor to right */
        }
        .mobile-align-right .location-tooltip::after {
            left: auto;     /* Unset left arrow */
            right: 20px;    /* Move arrow to right */
        }
    }

/* =========================================
   FILTER TOGGLE STYLES
   ========================================= */

.filter-toggle-btn {
    width: 100%;
    background-color: var(--white);
    color: var(--primary-green);
    border: 1px solid var(--border-light);
    padding: 15px 20px;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    transition: var(--transition-fast);
}

.filter-toggle-btn:hover {
    background-color: var(--bg-green-tint); /* Very light green tint */
    border-color: var(--primary-green);
}

.filter-panel {
    background: var(--white);
    padding: 20px;
    border: 1px solid var(--border-light);
    border-top: none; /* Connect visually to button if you want, or keep border for separation */
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    margin-top: -12px; /* Pull it up slightly to sit under the button */
    margin-bottom: 30px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    
    /* Animation (Optional - smooth slide) */
    animation: fadeIn 0.3s ease-in-out;
}

/* Adjust button corners if panel is open */
/* Note: Since we use JS inline styles for display, CSS logic for "open state" 
   is harder without adding a class in JS. 
   Simple version: just keep rounded corners on button always. */

	/* =========================================
       NEW: LOCATION HOVER TOOLTIP STYLES
       ========================================= */
    .location-wrapper {
        position: relative; /* Anchor for the absolute tooltip */
        cursor: help;       /* Shows a '?' cursor to indicate interaction */
        display: inline-block;
    }

    /* The actual box (Hidden by default) */
    .location-tooltip {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 120%; /* Pushes it just below the text */
        left: 50%;
        transform: translateX(-50%); /* Centers it */
        width: 280px; /* Wide enough for addresses */
        
        background-color: var(--white);
        border: 2px solid var(--accent-gold);
        border-top: 4px solid var(--primary-green); /* Nice top accent */
        border-radius: 6px;
        padding: 1rem;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        z-index: 100; /* Sit on top of everything */
        
        text-align: left;
        font-size: 0.9rem;
        line-height: 1.4;
        color: var(--text-dark);
        
        /* Smooth fade in */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Show on hover */
    .location-wrapper:hover .location-tooltip {
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    
    /* Small arrow pointing up to the text */
    .location-tooltip::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -8px;
        border-width: 8px;
        border-style: solid;
        border-color: transparent transparent var(--primary-green) transparent;
    }

    /* Map Link Button inside Tooltip */
    .map-link-btn {
        display: block;
        margin-top: 0.75rem;
        text-align: center;
        background: var(--primary-green);
        color: var(--white) !important;
        padding: 6px 12px;
        border-radius: 4px;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
    }
    .map-link-btn:hover {
        background: var(--accent-gold);
        color: var(--primary-green) !important;
    }

    /* Mobile handling: Calendar aspect ratio */
    

/* =========================================
   14. SINGLE EVENT VIEW STYLES
   ========================================= */

.single-event-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--primary-green);
}

.event-header-large {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border-bare);
    padding-bottom: 2rem;
    align-items: center;
}

/* Big Date Box */
.date-badge-large {
    background: var(--primary-green);
    color: var(--accent-gold);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.date-badge-large .month { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.date-badge-large .day { font-size: 2.2rem; font-weight: 700; line-height: 1; margin-top: 5px; }

/* Header Info */
.header-details { flex-grow: 1; }
.meta-tags { display: flex; gap: 10px; margin-bottom: 1rem; }
.large-location { font-size: 1.1rem; color: var(--text-body); display: flex; align-items: center; gap: 8px; }

/* Body Text */
.event-body-large {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-body);
    margin-bottom: 2.5rem;
}

/* Action Row */
.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-bare);
    padding-top: 2rem;
}
.btn-secondary { color: var(--text-muted); font-weight: 700; }
.btn-secondary:hover { color: var(--primary-green); }

/* Badges (If not already present) */
.event-badge {
    padding: 4px 10px; border-radius: 4px; font-weight: 700; font-size: 0.85rem; display: inline-block;
}
.badge-rating { background: var(--border-light); color: var(--text-body); }

/* Rating: TBC */
.rating-tbc { background: var(--border-faint); color: var(--text-muted); font-style: italic; }

/* Specific Rating Colors */
.rating-u  { background: var(--success-border); color: var(--success-green); }
.rating-pg { background: #fefcbf; color: #744210; }
.rating-16 { background: #feebc8; color: #7b341e; }
.rating-18 { background: #fed7d7; color: #822727; }

/* Event Rank Badge colours (badge-level level-*) */
.level-low  { background: var(--bg-green-tint); color: var(--success-green);  border: 1px solid var(--success-border); }
.level-mid  { background: #fefcbf;               color: #744210;               border: 1px solid #f6e05e; }
.level-high { background: #fed7d7;               color: #822727;               border: 1px solid #feb2b2; }
.level-any  { background: var(--border-faint);   color: var(--text-muted);     border: 1px solid var(--border-mid); }

/* Row layout for rank badge + location inside a card */
.event-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Mobile Responsiveness */


/* Ghost style for unpaid bookings seen by Admin */
.row-pending td {
    opacity: 0.6;
    background-color: var(--bg-red-tint); /* Light reddish tint */
}
.row-pending:hover td {
    opacity: 1;
}

/* Event Image Thumbnail */
.event-thumbnail {
    float: right;            /* Pushes image to the right */
    max-width: 300px;        /* Restricts width so it's a thumbnail */
    width: 100%;             /* Responsive on mobile */
    margin: 0 0 1rem 1.5rem; /* Spacing: 0 top, 0 right, 1rem bottom, 1.5rem left */
    border-radius: 8px;
    border: 4px solid #fff;  /* Photo-frame look */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Lifted effect */
    cursor: zoom-in;         /* Icon hint */
    transition: transform 0.2s ease;
}

.event-thumbnail:hover {
    transform: scale(1.02);  /* Subtle pop on hover */
}

/* Mobile: Stack image instead of float */
@media (max-width: 768px) {
    .event-thumbnail {
        float: none;
        display: block;
        margin: 0 auto 1.5rem auto;
        max-width: 100%;
    }
}

/* Lightbox Overlay (Hidden by default) */
.lightbox-overlay {
    display: none; /* Hidden */
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.9); /* Dark background */
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    animation: fadeIn 0.2s;
}

.lightbox-img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 4px;
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================
   NOTE TOOLTIPS (Events Table)
========================================= */

/* --- DESKTOP VIEW (Icon + Hover Popup) --- */
.note-wrapper {
    position: relative;
    display: inline-block;
    cursor: help;
}

/* The actual tooltip box (hidden by default) */
.note-content {
    visibility: hidden;
    width: 240px;
    background-color: var(--text-body); /* Dark grey/blue */
    color: var(--white);
    text-align: left;
    border-radius: 6px;
    padding: 12px;
    
    /* Position formatting */
    position: absolute;
    z-index: 100;
    bottom: 140%; /* Sit above the icon */
    left: 50%;
    margin-left: -120px; /* Center it */
    
    /* Animation */
    opacity: 0;
    transition: var(--transition-fast);
    font-size: 0.85rem;
    line-height: 1.4;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    pointer-events: none; /* Prevents cursor getting stuck on tooltip */
}

/* The little triangle arrow at the bottom of the tooltip */
.note-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--text-body) transparent transparent transparent;
}

/* Show on Hover */
.note-wrapper:hover .note-content {
    visibility: visible;
    opacity: 1;
}

/* --- MOBILE VIEW (Hide Icon, Show Text) --- */
@media (max-width: 768px) {
    /* Treat the Note cell like the Contact cell (stack vertical) */
    .booking-table td[data-label="Notes"] {
        display: block;
        text-align: left;
    }
    
    .booking-table td[data-label="Notes"]::before {
        float: none;
        display: block;
        margin-bottom: 5px;
        color: var(--primary-green);
        border-bottom: 1px dashed var(--border-bare);
        padding-bottom: 3px;
    }

    /* Hide the Icon SVG */
    .note-icon-svg {
        display: none;
    }

    /* Unpack the Tooltip so it's just normal text */
    .note-content {
        visibility: visible;
        opacity: 1;
        position: static;
        width: auto;
        background: transparent;
        color: #444;
        padding: 0;
        margin: 0;
        text-align: left;
        box-shadow: none;
        pointer-events: auto;
        font-size: 0.95rem;
    }
    
    .note-content::after {
        display: none; /* Hide the tooltip arrow */
    }
}

/* --- Booking Table Styles --- */

/* The Container */
.booking-section {
    width: 100%;
    margin-top: 40px;
}

/* Summary Box for Guests */
.booking-summary-grid {
    display: flex;
    flex-wrap: wrap; /* ALLOW WRAPPING: The key fix */
    justify-content: center;
    gap: 15px; /* Slightly tighter gap */
    margin-bottom: 20px;
}

.stat-box {
    background: #f8f9fa;
    border: 1px solid var(--border-bare);
    border-radius: 8px;
    padding: 15px 25px;
    text-align: center;
    min-width: 100px;
    /* Flex grow: ensures boxes stretch nicely if they wrap */
    flex: 1 0 auto; 
}

/* =========================================
   15. BOOKING FORM STYLES
   ========================================= */

/* Main Form Constraint - Prevents "Stretching" */
.booking-form-wrapper {
    max-width: 800px; /* Limits width so inputs look normal size */
    margin: 0 auto;   /* Centers the form in the white box */
    width: 100%;
}

/* The Grid System */
.booking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Desktop: Two equal columns */
    gap: 1.5rem;                    /* Space between columns */
    margin-bottom: 1.5rem;
}

/* Utility to make the Notes field span both columns */
.span-full {
    grid-column: 1 / -1; 
}

/* Input Styling */
.booking-input {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    border: 2px solid var(--text-muted);
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    background: var(--bg-body);
    color: var(--text-body);
    transition: var(--transition-fast);
    height: 48px; /* Fixed height for clean alignment */
}

.booking-input:hover {
    border-color: var(--text-body);
}

.booking-input:focus {
    border-color: var(--primary-light);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 171, 118, 0.1);
}

/* Textarea Specifics */
textarea.booking-input {
    height: auto;       /* Allow it to grow */
    min-height: 120px;  /* Minimum height */
    resize: vertical;   /* User can drag to resize */
}

/* Payment Notices */
.booking-notice {
    padding: 1.5rem;
    border-radius: 4px;
    margin-bottom: 2rem;
    border-left-width: 4px;
    border-left-style: solid;
}
.booking-notice h4 { margin: 0 0 0.5rem 0; font-family: 'Cinzel', serif; }
.booking-notice p { margin: 0; line-height: 1.5; color: inherit; }

.notice-warning { background: var(--bg-gold-tint); border-color: var(--accent-gold); color: #744210; }
.notice-success { background: var(--bg-green-tint); border-color: var(--primary-light); color: var(--success-green); }

/* === MOBILE RESPONSIVENESS === */
@media (max-width: 768px) {
    .booking-grid {
        grid-template-columns: 1fr; /* Switch to 1 column on mobile */
        gap: 1rem;
    }
}
/* Mobile Tweaks for Stats */
@media screen and (max-width: 480px) {
    .stat-box {
        padding: 10px 15px; /* Smaller padding on mobile */
        min-width: 80px;    /* Allow them to get smaller */
        flex-basis: 40%;    /* Force roughly 2 per row */
    }
    
    .stat-number {
        font-size: 1.5rem; /* Slightly smaller text */
    }
}
.stat-number {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-green);
}
.stat-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-faint);
}

/* The Table */
.booking-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: var(--white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.booking-table th {
    background: var(--primary-green); /* Use your dark green */
    color: var(--white);
    text-align: left;
    padding: 12px 15px;
    font-family: 'Cinzel', serif;
    font-weight: normal;
}

.booking-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-bare);
    color: #444;
}

.booking-table tr:last-child td {
    border-bottom: none;
}

/* Role Badges */
.role-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}
.role-badge.referee { background: #E9D8FD; color: #553C9A; } /* Purple */
.role-badge.monster { background: #FEEBC8; color: #7B341E; } /* Orange */
.role-badge.player  { background: var(--success-border); color: var(--success-green); } /* Green */

/* Redacted Style for Level 1 */
.redacted {
    background-color: #000;
    color: #000;
    padding: 0 4px;
    border-radius: 2px;
    cursor: help;
    user-select: none;
    opacity: 0.2;
}
.redacted:hover { color: #333; opacity: 0.6; }

.redacted-line {
    display: inline-block;
    width: 80px;
    height: 10px;
    background-color: var(--border-bare);
    border-radius: 2px;
}

/* Admin Buttons */
.icon-btn {
    text-decoration: none;
    margin-right: 5px;
    font-size: 1.1rem;
    filter: grayscale(100%);
    transition: var(--transition-fast);
}
.icon-btn:hover {
    filter: grayscale(0%);
}
/* =========================================
   MOBILE RESPONSIVE BOOKINGS (Card View)
========================================= */
@media (max-width: 768px) {
    
    /* Force table to not behave like a table */
    .booking-table, 
    .booking-table tbody, 
    .booking-table tr, 
    .booking-table td {
        display: block;
        width: 100%;
    }

    /* Hide Headers */
    .booking-table thead {
        display: none;
    }

    /* Card Style for Rows */
    .booking-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-bare);
        border-radius: 8px;
        background: var(--white);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        padding: 10px;
    }

    /* Cell Styles */
    .booking-table td {
        display: flex; /* Flexbox controls alignment */
        justify-content: space-between;
        align-items: center; /* Vertically center */
        text-align: right;
        padding: 10px 5px;
        border-bottom: 1px solid #f0f0f0;
        min-height: 40px;
    }

    .booking-table td:last-child {
        border-bottom: 0;
    }

    /* THE LABEL (Left Side) */
    .booking-table td::before {
        content: attr(data-label);
        float: left; /* Fallback */
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.85rem;
        color: var(--text-faint);
        font-family: 'Cinzel', serif;
        /* Ensure label doesn't get squashed */
        flex-shrink: 0; 
        margin-right: 15px;
    }

    /* --- THE FIX FOR SIDE SCROLLING --- */
    
    /* 1. Target the content inside the cell (Right Side) */
    .booking-table td > * {
        text-align: right;
    }

    /* 2. Force Links to wrap nicely */
    .booking-table td a {
        word-break: normal;        /* Stop splitting normal words mid-word */
        overflow-wrap: break-word; /* Only break really long strings (like emails) */
        display: inline-block;
        line-height: 1.4;
    }

    /* 3. Special handling for the Contact cell specifically */
    .booking-table td[data-label="Contact"] {
        display: block; /* Stack vertical instead of side-by-side for contact */
        text-align: left;
    }

    .booking-table td[data-label="Contact"]::before {
        float: none;
        display: block;
        margin-bottom: 5px;
        color: var(--primary-green);
        border-bottom: 1px dashed var(--border-bare);
        padding-bottom: 3px;
    }
    
    /* Adjust Redacted line width for mobile */
    .redacted-line {
        width: 60px;
    }
}

/* =========================================
   ADMIN TOOLBAR
   ========================================= */
.admin-bar {
    background-color: var(--accent-gold);
    color: var(--primary-green);
    padding: 0.5rem 0;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 900; /* Just below the main header (z-1000) */
}

.admin-bar .container {
    display: flex;
    justify-content: center; /* Center the text */
    align-items: center;
}

.admin-label {
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =========================================
   SECRET / SPOILER REVEAL STYLES
   ========================================= */
.secret-blur-container {
    position: relative;
    cursor: pointer;
    background: var(--white);
    border-radius: 4px;
    overflow: hidden;
    transition: var(--transition-base);
}

/* The actual text content - Blurred by default */
.secret-blur-content {
    filter: blur(8px);
    opacity: 0.3;
    user-select: none; /* Cannot select text while blurred */
    pointer-events: none;
    transition: all 0.5s ease;
}

/* The "Stamp" overlay */
.secret-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--accent-rose);
    color: var(--accent-rose);
    padding: 10px 20px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 10;
}

.secret-label-main {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.secret-label-sub {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    margin-top: 4px;
    color: var(--text-muted);
}

/* Hover effect to hint it's clickable */
.secret-blur-container:hover .secret-overlay-text {
    background: var(--accent-rose);
    color: var(--white);
    border-color: #9b2c2c;
}
.secret-blur-container:hover .secret-label-sub {
    color: #fed7d7;
}

/* STATE: REVEALED (Added via JS) */
.secret-revealed .secret-blur-content {
    filter: none;
    opacity: 1;
    user-select: auto;
    pointer-events: auto;
}

.secret-revealed .secret-overlay-text {
    display: none; /* Hide the stamp */
}

/* ================= SECRET NOTES ================= */
.secret-notes-box {
    /* Base styles (moved from inline) */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 15px;
    border-radius: 4px;
    
    /* The "Uniform Size" Fix */
    height: 120px;       /* Fixed height when classified */
    min-height: 120px;   /* Ensures empty notes are also this size */
    transition: height 0.3s ease-out; /* Smooth slide-open effect */
}

/* When revealed (clicked), let it grow to fit the text */
.secret-notes-box.secret-revealed {
    height: auto;
}

/* =========================================
   Admin styles
   ========================================= */

/* =========================================
   Verify Item
   ========================================= */

	.item-verification-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }
    .item-verify-card {
        background: white;
        border: 1px solid var(--border-bare);
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .evidence-box {
        display: flex;
        gap: 10px;
        margin: 10px 0;
    }
    .evidence-img {
        width: 50%;
        height: 150px;
        object-fit: cover;
        border: 1px solid var(--border-mid);
        border-radius: 4px;
        cursor: pointer;
    }
    .btn-row {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }
    .btn-approve { flex: 1; background: #48bb78; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; font-weight: bold; }
    .btn-reject { flex: 1; background: #e53e3e; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; font-weight: bold; }
    
    

	.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; margin-top: 15px; }
    .item-card { background: white; border: 1px solid var(--border-bare); border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .evidence-row { display: flex; gap: 10px; margin: 10px 0; }
    
    /* Updated for Portrait Cards */
    .evidence-thumb { 
        width: 100%; 
        height: 100px; 
        object-fit: contain; 
        background-color: var(--text-body);
        border: 1px solid var(--border-mid); 
        cursor: zoom-in; 
        border-radius: 4px; 
    }

/* =========================================
   CHARACTER STAT BLOCK
   ========================================= */

.char-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 15px;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: var(--white);
        border: 1px solid var(--border-light);
        border-top: 3px solid var(--accent-gold);
        border-radius: 6px;
        padding: 15px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: transform 0.2s ease;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .stat-icon {
        font-size: 1.5rem;
        margin-bottom: 5px;
        display: block;
    }

    .stat-label {
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-muted);
        margin-bottom: 2px;
        font-weight: 600;
    }

    .stat-value {
        display: block;
        font-size: 1.1rem;
        font-weight: bold;
        color: var(--text-body);
        font-family: 'Cinzel', serif; /* Matching your theme */
    }
    
    /* Optional: Specific colors for specific stats */
    .stat-card.dead { border-top-color: var(--accent-rose); }
    .stat-card.active { border-top-color: #2f855a; }

/* ================= GUILD APPLICATION FORM ================= */
.guild-apply-form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2.5rem;
    background: var(--bg-light); /* Light grey contrast against the white page */
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); /* Subtle inner shadow */
}

.guild-apply-form .form-group {
    margin-bottom: 2rem; /* Much more breathing room */
}

.guild-apply-form label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cinzel', serif; /* Brand font */
    color: var(--primary-green);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

/* Chunky Inputs */
.guild-apply-form .booking-input {
    width: 100%;
    border: 2px solid var(--border-mid);
    border-left: 6px solid var(--accent-gold); /* The "Gold Spine" */
    border-radius: 4px;
    padding: 12px 15px;
    height: 55px; /* Taller and easier to click */
    font-size: 1rem;
    background-color: var(--white);
    cursor: pointer;
    transition: var(--transition-fast);
}

.guild-apply-form .booking-input:hover {
    border-color: var(--accent-gold); /* Gold border on hover */
    transform: translateX(2px); /* Slight nudge */
}

.guild-apply-form .booking-input:focus {
    border-color: var(--primary-green);
    border-left-color: var(--primary-green);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    outline: none;
}

/* Mobile Tweak */
@media (max-width: 600px) {
    .guild-apply-form {
        padding: 1.5rem;
    }
}

/* ================= PROFILE ACTIONS ================= */
.profile-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    border-top: 1px solid var(--border-light);
    padding-top: 20px;
}

.profile-actions .save-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* DESKTOP DEFAULTS: Give the "Change Password" link proper button shape */
.profile-actions .btn-secondary {
    padding: 10px 20px;      /* Restores the internal spacing */
    display: inline-block;   /* Essential for padding to work on <a> tags */
    border-radius: 4px;
    text-decoration: none;
    transition: var(--transition-fast);
    font-weight: 700;
}

.profile-actions .btn-secondary:hover {
    background-color: var(--bg-red-tint); /* Light red tint on hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* MOBILE LAYOUT (Screens smaller than 600px) */
@media (max-width: 600px) {
    .profile-actions {
        flex-direction: column-reverse; /* Put Save/Cancel at top, Password at bottom */
        gap: 20px;
    }

    .profile-actions .save-group {
        flex-direction: column-reverse; /* Save on top of Cancel */
        width: 100%;
        gap: 15px;
    }

    /* Force all buttons/links to be full-width blocks */
    .profile-actions a, 
    .profile-actions button {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin: 0;
        display: block;
        padding: 14px; /* Even chunkier for touch targets */
    }
}

/* =========================================
   FANTASY ITEM CARDS
   ========================================= */
.inventory-grid {
    display: grid;
    /* Changed from 280px to 220px to match the tighter look */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-bottom: 2rem;
	width: 100%;
}

.fantasy-card {
    position: relative;
    background-color: #e3eff3; /* Pale Blue-Grey */
    border: 1px solid #b8c2cc;
    border-radius: 2px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 20px 50px 20px 20px; /* Right padding makes room for the strip */
    min-height: 160px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
    overflow: hidden;
    
    /* NEW: Prevent single cards from stretching too wide on large screens */
    max-width: 100%; 
}

.fantasy-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

/* The Vertical Strip on the Right */
.fantasy-card::after {
    content: "ITEM CARD";
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    width: 30px;
    border: 1px solid #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 3px;
    color: var(--text-body);
    background-color: rgba(255,255,255,0.3);
}

.f-card-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border-mid);
    padding-bottom: 5px;
    
    /* Ensure title doesn't overlap the strip */
    padding-right: 10px; 
}

.f-card-type {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.f-card-desc {
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-size: 0.95rem; /* Slightly smaller for better fit */
    line-height: 1.4;
    color: var(--text-body);
}

/* =========================================
   HELPER: STACKED GRID (For Inventory List)
   ========================================= */
.inventory-grid.full-stack {
    grid-template-columns: 1fr;
}

/* =========================================
   USER MANAGEMENT DASHBOARD
   ========================================= */

/* List Container */
.user-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-row {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; 
    gap: 15px;       
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.user-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border-color: var(--primary-light);
}

/* Columns */
.u-id {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    color: var(--border-mid);
    font-size: 1.2rem;
    width: 50px;
    text-align: center;
    border-right: 2px solid var(--border-faint);
    padding-right: 15px;
    flex-shrink: 0;
}

.u-info {
    flex: 1 1 250px; 
    min-width: 0;    
}

.u-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.u-email {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.u-role {
    flex: 0 0 auto;
    text-align: center;
}

.u-action {
    flex: 0 0 auto;
    text-align: right;
}

/* Level Badges (Mapped to DB user_level) */
.badge-level {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 100px; /* Uniform width */
    text-align: center;
}

/* Colors based on your SQL table */
.lvl-0 { background: var(--border-light); color: var(--text-muted); border: 1px solid var(--border-mid); } /* Unvalidated (Grey) */
.lvl-1 { background: var(--bg-light); color: var(--text-subtle); border: 1px solid var(--border-mid); } /* Basic User (Light Grey) */
.lvl-4 { background: var(--bg-green-tint); color: var(--success-green); border: 1px solid var(--success-border); } /* Member (Green) */
.lvl-5 { background: #e6fffa; color: #234e52; border: 1px solid #81e6d9; } /* Content Creator (Teal) */
.lvl-6 { background: #e9d8fd; color: #553c9a; border: 1px solid #d6bcfa; } /* Referee (Purple) */
.lvl-7 { background: #bee3f8; color: #2c5282; border: 1px solid #90cdf4; } /* Coordinator (Blue) */
.lvl-8 { background: var(--bg-gold-tint); color: #9c4221; border: 1px solid #fbd38d; } /* Director (Orange) */
.lvl-9 { background: #fffff0; color: #744210; border: 1px solid #f6e05e; } /* Coder (Gold) */

/* Form Elements */
.level-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.level-select {
    padding: 6px 10px;
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: var(--bg-light);
    cursor: pointer;
    max-width: 150px;
}

.level-btn {
    padding: 7px 15px;
    background-color: var(--white);
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.level-btn:hover {
    background-color: var(--accent-gold);
    color: var(--white);
}

.msg-success { background: var(--success-border); color:#22543d; padding:12px; margin-bottom:20px; border-radius:6px; border:1px solid #9ae6b4; }
.msg-error { background: var(--bg-red-tint); color:#822727; padding:12px; margin-bottom:20px; border-radius:6px; border:1px solid #feb2b2; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .user-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .u-id {
        border-right: none;
        border-bottom: 2px solid var(--border-faint);
        width: 100%;
        text-align: left;
        padding-bottom: 10px;
        padding-right: 0;
        font-size: 1rem;
    }

    .u-info {
        width: 100%;
        text-align: left;
        flex: 0 0 auto; 
    }

    .u-role, .u-action {
        width: 100%;
        text-align: left;
        flex: 0 0 auto;
    }
    
    .u-role { margin-bottom: 5px; }
    .level-form { width: 100%; }
    .level-select { flex-grow: 1; max-width: none; }
}

/* --- STUB CHARACTER STYLES --- */

/* Badge for Sidebar/Links */
.stub-badge {
    display: inline-block;
    background-color: #ed8936; /* Warning Orange */
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
    animation: pulse-orange 2s infinite;
}

/* Card Style for XP Audit */
.stub-alert-card {
    border: 2px dashed #ed8936 !important;
    background-color: var(--bg-gold-tint) !important; /* Very pale orange */
    position: relative;
}

.stub-alert-card::before {
    content: "⚠️ INCOMPLETE RECORD";
    position: absolute;
    top: -10px;
    right: 20px;
    background: #ed8936;
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(237, 137, 54, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(237, 137, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(237, 137, 54, 0); }
}

/* =========================================
   MOBILE FIXES (Add to bottom of styles.css)
   ========================================= */

/* 1. Fix Event Header Alignment on Mobile */
@media (max-width: 600px) {
    .event-header-large {
        flex-direction: column;
        /* CHANGE: align-items to flex-start (Left) instead of center */
        align-items: flex-start;
        /* CHANGE: text-align to left instead of center */
        text-align: left;
        gap: 1rem;
    }
    
    /* Ensure the date badge doesn't stretch weirdly */
    .date-badge-large {
        width: 100%;
        flex-direction: row; /* Horizontal date on mobile looks better */
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 10px;
    }
    
    .date-badge-large .day { margin-top: 0; margin-left: 5px; }
}

/* 2. Responsive Booking List Classes (Replaces Inline PHP Styles) */

/* Desktop view (mimics your previous inline styles) */
.booking-list-row {
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 0;
}

.booking-role-col {
    flex: 0 0 100px;
    text-align: center;
    border-right: 2px solid var(--border-faint);
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

/* Mobile View: Break the row so it doesn't overflow */
@media (max-width: 768px) {
    .booking-list-row {
        /* Force vertical stacking so it fits on screen */
        flex-flow: column nowrap;
        align-items: flex-start;
        gap: 10px;
        padding: 15px;
    }

    .booking-role-col {
        /* Make the role bar full width and horizontal on mobile */
        flex: 1 1 auto;
        width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--border-faint);
        padding-right: 0;
        padding-bottom: 10px;
        flex-direction: row; 
        justify-content: flex-start;
    }
    
    /* Adjust badges to sit nicely next to role name */
    .booking-role-col .role-badge {
        width: auto;
        margin-right: 10px;
    }
    
    .u-info {
        padding-left: 0;
        width: 100%;
    }
    
    .u-action {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 0;
        margin-top: 10px;
        border-top: 1px dashed #eee;
        padding-top: 10px;
    }
}

/* =========================================
   CODER JOBS MOBILE TABLE
   ========================================= */
@media (max-width: 768px) {
    /* 1. Force table elements to stack like blocks */
    .coder-table, .coder-table tbody, .coder-table tr, .coder-table td {
        display: block;
        width: 100%;
    }

    /* 2. Hide the desktop header row */
    .coder-table thead { display: none; }

    /* 3. Style the rows as individual "Cards" */
    .coder-table tr {
        margin-bottom: 15px;
        background: var(--white);
        border: 1px solid var(--border-light); /* Grey border */
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        padding: 15px;
    }

    /* 4. Flex the cells so Label is Left, Content is Right */
    .coder-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-faint);
        min-height: 40px;
    }
    
    .coder-table td:last-child { border-bottom: none; }

    /* 5. Inject the Column Name (Purple) */
    .coder-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #805ad5; /* Coder Purple */
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        margin-right: 15px;
    }
    
    /* 6. Fix for Action Buttons wrapping */
    .coder-table td[data-label="Actions"] {
        justify-content: flex-end;
        gap: 5px;
    }
}

/* =========================================
   GLOBAL LOCKS MOBILE TABLE (Warning Red)
   ========================================= */
@media (max-width: 768px) {
    /* Stack elements */
    .locks-table, .locks-table tbody, .locks-table tr, .locks-table td {
        display: block;
        width: 100%;
    }
    
    /* Hide Header */
    .locks-table thead { display: none; }

    /* Card Style (Red Alert Theme) */
    .locks-table tr {
        margin-bottom: 15px;
        background: var(--bg-red-tint);       /* Light Red Background */
        border: 1px solid var(--error-border); /* Red Border */
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Flex Cells */
    .locks-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 10px 0;
        border-bottom: 1px solid #fee2e2;
        min-height: 40px;
    }
    
    .locks-table td:last-child { border-bottom: none; }

    /* Red Labels */
    .locks-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--accent-rose); /* Dark Red Label */
        text-transform: uppercase;
        font-size: 0.75rem;
        margin-right: 15px;
    }
}

/* =========================================
   MOBILE OVERFLOW & WHITESPACE FIXES
   ========================================= */

/* 1. The "Silver Bullet": Prevent horizontal scrolling globally */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* 2. Fix the Single Event Card on Mobile */
@media (max-width: 600px) {
    
    /* Reduce the huge 2.5rem (40px) padding to 1.25rem (20px) 
       This gives you back 40px of width for your content! */
    .single-event-card {
        padding: 1.25rem; 
    }

    /* Ensure long words (like URLs in the description) don't push the width out */
    .single-event-card, 
    .event-body-large {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    /* Action row: stack on mobile, buttons wrap */
    .action-row {
        flex-direction: column-reverse;
        gap: 1.5rem;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
    }
    .cta-button { width: 100%; text-align: center; }

    /* Force images/maps to stay within bounds */
    .event-body-large img,
    .event-body-large iframe {
        max-width: 100% !important;
        height: auto;
    }
}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* =========================================
   MODAL STYLES (Popups)
   ========================================= */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
    backdrop-filter: blur(2px); /* Nice blur effect */
    align-items: center;
    justify-content: center;
}

/* When active, we set display: flex via JS to center it */
.modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 500px; /* Default width */
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
}

/* Larger modal for reading reports */
.modal-content.large {
    max-width: 800px;
}

@keyframes modalSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal h3 {
    margin-top: 0;
    color: var(--primary-green);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
}

.modal textarea {
    width: 100%;
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    padding: 10px;
    font-family: inherit;
    resize: vertical;
}

.modal-footer {
    margin-top: 20px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* .redacted styles defined in Booking Form section above */