/* ============================================

   TABLE OF CONTENTS:
   1. CSS Variables & Reset
   2. Global Styles
   3. Header & Navigation
   4. Hero Section
   5. Announcements Panel
   6. Cards Grid (Origin, Documents, Events)
   7. Footer Section
   8. Intro Animation Styles
   9. Admin Panel Styles
   10. Events Page Styles
   11. Documents Page Styles
   12. Responsive Media Queries
   
   ============================================ */


/* ============================================
   1. CSS VARIABLES & RESET
   ============================================ */
:root {
    /* Color Palette */
    --color-bg-dark: #141517;
    --color-bg-medium: #1a1d1f;
    --color-bg-light: #23272a;
    --color-card-bg: #909398;
    --color-card-dark: #2a2f33;
    --color-panel: #1f2326;
    --color-text-primary: #e6e9eb;
    --color-text-muted: #9aa1a6;
    --color-text-dark: #0f181d;
    --color-accent-blue: #2f7bfe;
    --color-white: #ffffff;
    --color-border: rgba(255, 255, 255, 0.1);
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 18px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border Radius (standardized to 20px for cards) */
    --radius-sm: 12px;
    --radius-md: 15px;
    --radius-lg: 15px;
    --radius-card: 20px;  /* Primary card/image radius */
    --radius-xl: 18px;
    --radius-pill: 999px;
    
    /* Container Width */
    --container-max-width: 1300px;
}

/* Reset & Box Sizing */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   Unified Layout System (reusable across pages)
   ============================================ */
.page-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg);
    padding-top: 90px;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    min-height: calc(100vh - 60px);
}

/* Ensure origin pages place main content and sidebar side-by-side */
.origin-page-container .inner-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    width: 100%;
}

/* Align sidebar panel top with origin content on larger screens */
@media (min-width: 1024px) {
    .origin-page-container .page-sidebar {
        align-self: flex-start;
    }

    .origin-page-container .page-sidebar .sidebar-panel {
        margin-top: 0; /* remove any top offset */
        padding-top: 0.5rem; /* keep small inner padding but align top */
    }

    /* If origin content has extra top offset, nudge sidebar up to match */
    .origin-page-container .page-main { /* ensure main doesn't stretch */
        align-self: flex-start;
    }
}

.page-main {
    flex: 1 1 auto;
    min-width: 0; /* allow flex children to shrink */
}

.page-sidebar {
    width: 371px;
    flex: 0 0 371px;
}

.panel {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    min-height: 500px;
    position: relative;
}

.panel-inner {
    background: #F1F1F1;
    border-radius: var(--radius-lg);
    padding: 32px 40px 40px 40px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: var(--spacing-lg);
    justify-items: center;
}

/* Utility Resets */
.w-full { width: 100%; }
.h-full { height: 100%; }
.overflow-hidden { overflow: hidden; }



/* ============================================
   2. GLOBAL STYLES
   ============================================ */
body {
    font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(145deg, #141517 57.43%, #6D727D 92.92%);
    background-attachment: fixed;
    color: var(--color-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Main Container */
.main-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-sm);
    padding-top: 70px;
    padding-bottom: 32px; /* consistent gap above footer across pages */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Page Transition */
@keyframes pageTransitionIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.page-transition-out {
    animation: pageTransitionOut 0.25s ease-in forwards;
}

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


/* ============================================
   3. HEADER & NAVIGATION
   ============================================ */
.site-header {
    background: rgba(15, 17, 18, 0.95);
    backdrop-filter: blur(10px);
    padding: 0 var(--spacing-lg);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
    height: 70px;
    display: flex;
    align-items: center;
}

.header-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: var(--spacing-md);
    height: 100%;
    width: 100%;
}

/* Ensure logo stays on left, search in middle, nav on right */
.header-container .brand {
    order: 1;
    flex-shrink: 0;
}

.header-container .search-form {
    order: 2;
    flex: 1 1 auto;
    margin: 0 var(--spacing-md);
    max-width: 500px;
}

.header-container .main-nav {
    order: 3;
    flex-shrink: 0;
    margin-left: 0;
}

/* Page Indicator */
.page-indicator {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
    padding-right: var(--spacing-sm);
    border-right: 1px solid var(--color-border);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
}

/* Logo/Brand */
.brand {
    display: flex;
    align-items: center; /* Vertically center align logo and text */
    gap: 0; /* No gap for overlap */
    text-decoration: none;
    position: relative;
    z-index: 1;
    height: 100%;
    flex-shrink: 0;
}

.logo-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 2; /* Logo on top */
    margin-right: 8px; /* Add small space to the right */
}

.logo-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-white);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7),
                 0 0 20px rgba(255, 255, 255, 0.5),
                 0 0 30px rgba(255, 255, 255, 0.3);
    position: relative;
    left: -10px; /* Overlap with logo */
    z-index: 1;
    line-height: 1.2;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Navigation Links */
.main-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    height: 100%;
}

.nav-link {
    color: var(--color-white);
    text-decoration: none;
    padding: 8px var(--spacing-md);
    border: 1.5px solid var(--color-white);
    border-radius: var(--radius-pill);
    background: transparent;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    height: fit-content;
    line-height: 1.2;
}

/* Match Figma: active "Home" pill filled, others outlined */
.main-nav .nav-link:first-child {
    background: #F1F1F1;
    border-color: #F1F1F1;
    color: #080808;
}

.main-nav .nav-link:first-child:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #080808;
}

.nav-link:hover {
    background: rgb(255, 255, 255);
    border-color: #e6e9eb;
    transform: translateY(-2px);
    color: #11161b;
}

.nav-icon {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pageFadeIn 0.5s ease-out;
}

/* Search Form */
.search-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    max-width: 500px;
    margin: 0 var(--spacing-md);
    min-width: 200px;
    height: 100%;
    justify-content: center;
}

.search-input {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: var(--color-text-primary);
    font-size: 13px;
    width: 100%;
    min-width: 0;
    transition: all 0.3s ease;
    font-family: inherit;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* Style the clear button (x) for search inputs - HIDDEN on mobile */
.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.search-input::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* For Firefox */
.search-input[type="search"]::-moz-search-clear-button {
    cursor: pointer;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.search-input[type="search"]::-moz-search-clear-button:hover {
    opacity: 1;
}

/* Mobile: Hide clear button completely */
@media (max-width: 768px) {
    /* Hide WebKit clear button */
    .search-input::-webkit-search-cancel-button,
    .mobile-search-input::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Hide Firefox clear button */
    .search-input[type="search"]::-moz-search-clear-button,
    .mobile-search-input[type="search"]::-moz-search-clear-button,
    input[type="search"]::-moz-search-clear-button {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Hide IE/Edge clear button */
    .search-input::-ms-clear,
    .mobile-search-input::-ms-clear,
    input[type="search"]::-ms-clear {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

.search-button {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-card);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-button svg {
    stroke: #ffffff;
    fill: none;
}

.search-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
    color: #ffffff;
}

.search-button:hover svg {
    stroke: #ffffff;
}

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

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 31px;
    height: 2.5px;
    background: var(--color-white);
    border-radius: 999px;
    transition: all 0.2s ease;
}


/* ============================================
   4. HERO SECTION
   ============================================ */
.hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--spacing-md);
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    justify-content: start;
    align-items: stretch;
}

/* Hero Banner */
.hero-banner {
    background: transparent;
    border-radius: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 370px;
    min-height: 370px;
    max-height: 370px;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.hero-banner-picture {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 30px;
}

/* Banner Pattern Background */
.banner-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);
    opacity: 0.5;
    z-index: 0;
}

.banner-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    gap: var(--spacing-xl);
}

/* Banner Left Side */
.banner-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    gap: var(--spacing-sm);
}

.icdisg-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: 2px;
    line-height: 1.2;
}

/* Banner Right Side */
.banner-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.icdisg-logo-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a2f33 0%, #1a1d1f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.icdisg-logo-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.icdisg-full-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.4;
    max-width: 200px;
    letter-spacing: 0.5px;
}

.banner-content {
    text-align: center;
    z-index: 1;
}

/* ICDISG Badge */
.icdisg-badge {
    margin-bottom: var(--spacing-xs);
}

.badge-icon {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #cfd5d9;
    background: linear-gradient(180deg, #111 0%, #2b2f33 100%);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Hero Tagline */
.hero-tagline {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
}

.hero-tagline p {
    margin: 2px 0;
}

/* Hero Meta Info */
.hero-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
    color: var(--color-text-muted);
}

.meta-item {
    display: block;
}


/* ============================================
   5. ANNOUNCEMENTS PANEL
   ============================================ */
.announcements-panel {
    background: var(--color-card-bg);
    border-radius: 30px;
    padding: var(--spacing-md);
    width: 320px;
    height: 370px;
    min-height: 370px;
    max-height: 370px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

.announcements-panel .scroll-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.panel-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.5px;
    flex-shrink: 0;
    text-align: center;
    z-index: 2;
}

/* Scroll Wrapper */
.scroll-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* Announcement Card */
.announcement-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.announcement-card {
    background: #11161b;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.announcement-card-link:hover .announcement-card {
    background: #1a1f26;
}

.announcement-image-wrapper {
    width: 100%;
    margin-bottom: var(--spacing-xs);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.announcement-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}

.announcement-card::after {
    content: "";
    clear: both;
    display: table;
}

.announcement-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.announcement-date {
    font-size: 8px;
    color: #8b929a;
    margin-bottom: var(--spacing-xs);
}

.card-divider {
    height: 1px;
    background-color: #2c333a;
    width: 100%;
    margin-bottom: var(--spacing-xs);
}

.announcement-desc {
    font-size: 8px;
    line-height: 1.5;
    color: #c5c7ca;
    margin: 0 0 var(--spacing-sm) 0;
}

.btn-read-more {
    background: #d9d9d9;
    color: #11161b;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
    float: right;
    transition: background 0.2s, transform 0.3s ease;
    transform-origin: center center;
    text-decoration: none;
}

.announcement-card-link .btn-read-more {
    pointer-events: none;
}

.announcement-card-link:hover .btn-read-more {
    background: var(--color-white);
}

.announcement-card-link:hover .btn-read-more.hover-zoom {
    transform: scale(1.1);
}

/* Fade Overlay */
.fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, var(--color-card-bg) 20%, transparent 100%);
    pointer-events: none;
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    z-index: 5;
}


/* ============================================
   6. CARDS GRID (Origin, Documents, Events)
   ============================================ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
    justify-content: start;
}

/* Base Card Styling */
.card {
    background: var(--color-card-bg);
    border-radius: 30px;
    padding: var(--spacing-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-self: stretch;
}

.card.origin-card {
    width: 100%;
    height: 436px;
    overflow: hidden;
    background: var(--color-card-bg);
}

.card.documents-card {
    width: 100%;
    height: auto;
    overflow: hidden;
    background: var(--color-card-bg);
}

.card.events-card {
    width: 100%;
    height: 436px;
    border-radius: 30px;
    overflow: hidden;
}

/* Desktop: Smooth rounded corners for event carousel - HIGH SPECIFICITY */
@media (min-width: 1025px) {
    .card.events-card {
        border-radius: 30px !important;
        overflow: hidden !important;
    }
    
    .card.events-card .events-carousel {
        border-radius: 30px !important;
        overflow: hidden !important;
    }
    
    .card.events-card .events-carousel .carousel-track {
        border-radius: 30px !important;
        overflow: hidden !important;
    }
    
    .card.events-card .events-carousel .event-slide-link {
        border-radius: 30px !important;
        overflow: hidden !important;
        display: block;
    }
    
    .card.events-card .events-carousel .event-slide {
        border-radius: 30px !important;
        overflow: hidden !important;
        width: 64.35% !important;
        max-width: 64.35% !important;
        max-height: 84.15% !important;
    }
    
    .card.events-card .events-carousel .event-image {
        border-radius: 30px !important;
        overflow: hidden !important;
    }
    
    .card.events-card .events-carousel .event-image img {
        border-radius: 30px !important;
    }
    
    /* Documents grid: Match origin grid alignment for consistency */
    .documents-grid {
        align-items: start !important;
        justify-items: start !important;
    }
    
    .documents-grid:has(.folder-item:only-child) {
        align-items: start !important;
        justify-items: start !important;
    }
    
    .documents-grid:has(.folder-item:only-child) .folder-item {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    .folder-item {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
}

.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
    letter-spacing: 1px;
    text-align: center;
}

/* ORIGIN CARD - Carousel (like events) with 2x2 grid per slide */
.origin-carousel {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.origin-track {
    background: transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    flex: 1;
}

.origin-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    pointer-events: none;
    padding: 0;
    overflow: hidden;
}

.origin-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.origin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(120px, 1fr));
    gap: var(--spacing-sm);
    width: 100%;
    height: 100%;
    padding: var(--spacing-sm);
    align-items: center;
    justify-items: center;
}

/* Position single item at top-left in grid when there's only 1 item in a slide */
/* Keep 2x2 grid structure, position the single item at top-left */
.origin-grid:has(.logo-item:only-child) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    align-items: start;
    justify-items: start;
}

.origin-grid:has(.logo-item:only-child) .logo-item {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 1;
}

.origin-logos {
    display: none;
}

.logo-item {
    aspect-ratio: 3 / 1;
    width: 100%;
    height: 100%;
    min-height: 100px;
    overflow: hidden;
    flex: 1;
}

.logo-badge {
    background: transparent;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-shadow: none;
    padding: 8px;
    border: none;
    position: relative;
}

/* Transparent logos: no bg/border so PNG transparency shows through */
.logo-transparent .logo-badge {
    background: transparent;
    border: none;
    box-shadow: none;
}

.logo-transparent .logo-badge-link .logo-badge:hover {
    background: transparent;
    border: none;
    box-shadow: none; /* Remove shadow */
    transform: scale(1.05); /* Zoom effect */
}

.logo-badge-link {
    display: block;
}

.logo-badge-link .logo-badge {
    transition: transform 0.3s ease; /* Only transform, no box-shadow */
    cursor: pointer;
}

.logo-badge-link .logo-badge:hover {
    transform: scale(1.05); /* Zoom effect instead of translateY */
    box-shadow: none; /* Remove shadow */
}

.logo-image {
    max-width: 95%;
    max-height: 95%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.logo-image.loaded {
    opacity: 1;
}

/* Loading skeleton for logo images */
.logo-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.logo-badge:has(.logo-image.loaded)::before,
.logo-badge.image-loaded::before {
    opacity: 0;
    animation: none;
}

.logo-badge:has(.logo-image.loaded)::before,
.logo-badge .logo-image.loaded ~ ::before {
    display: none;
}


@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Ensure header logo has no background box */
.logo-icon {
    background: transparent !important;
}

/* DOCUMENTS CARD - Carousel (like events) with 2x2 grid per slide */
.documents-carousel {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.documents-track {
    background: transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    flex: 1;
}

.document-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    pointer-events: none;
    padding: 0;
    overflow: hidden;
}

.document-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(80px, 1fr));
    gap: 30px 28px;
    width: 100%;
    height: 100%;
    padding: var(--spacing-md);
    align-items: start;
    justify-items: start;
}

/* Documents card grid - ensure top-left alignment for all screen sizes */
.documents-card .documents-grid {
    align-items: start !important;
    justify-items: start !important;
    align-content: start !important;
    justify-content: start !important;
}

/* Force all folder items in documents card to top-left */
.documents-card .documents-grid .folder-item:not(:only-child) {
    align-self: start !important;
    justify-self: start !important;
}

/* Position single item at top-left in grid when there's only 1 item in a slide */
/* Keep 2x2 grid structure, position the single item at top-left with same size as first slide items */
.documents-grid:has(.folder-item:only-child),
.documents-card .documents-grid:has(.folder-item:only-child) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, minmax(80px, 1fr)) !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 30px 28px !important;
}

.documents-grid:has(.folder-item:only-child) .folder-item,
.documents-card .documents-grid:has(.folder-item:only-child) .folder-item {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    align-self: start !important;
    justify-self: start !important;
}

.folder-item {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: transparent;
    color: white;
    border-radius: var(--radius-md);
    position: relative;
    padding: 0;
    height: 100%;
    width: 100%;
    box-shadow: none;
    transition: transform 0.3s ease;
    cursor: pointer;
    transform-origin: center center;
    overflow: visible;
}

.folder-item.active {
    background: var(--color-card-dark);
    border: 2px solid var(--color-text-primary);
}

.folder-item:hover {
    transform: scale(1.1);
    z-index: 10;
}

.folder-item.hover-zoom:hover {
    transform: scale(1.15) !important;
    z-index: 10;
}

.folder-icon-wrapper {
    display: none;
}

.folder-icon {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease, opacity 0.4s ease-in-out;
    pointer-events: none;
    opacity: 0;
    align-self: flex-start !important;
}

/* Ensure folder icon in documents card aligns to top-left */
.documents-card .folder-item .folder-icon {
    align-self: flex-start !important;
    margin: 0 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Single item folder icon - match size of normal folders (constrain to grid cell size) */
.documents-card .documents-grid:has(.folder-item:only-child) .folder-item .folder-icon {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
}

.folder-icon.loaded {
    opacity: 1;
}

/* Loading skeleton for folder icons */
.folder-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.folder-item:has(.folder-icon.loaded)::before,
.folder-item.image-loaded::before {
    opacity: 0;
    animation: none;
}

.folder-item {
    position: relative;
}

.folder-item:hover .folder-icon {
    transform: scale(1.05);
}

.folder-info {
    display: none;
}

.folder-category {
    display: none;
}

.folder-count {
    display: none;
}

.folder-item img {
    transition: transform 0.3s ease;
    pointer-events: none;
}

.folder-item::before {
    display: none;
}

.folder-number {
    display: none;
}

.folder-docs {
    display: none;
}

/* EVENTS CARD */
.events-carousel {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border-radius: 30px;
    overflow: hidden;
}

/* Carousel track - specifically for events carousel */
.events-carousel .carousel-track {
    background: transparent;
    border-radius: 30px !important;
    overflow: hidden !important;
    position: relative;
    flex: 1;
    isolation: isolate;
    width: 100%;
    height: 100%;
}

/* Carousel-specific event-slide (homepage) */
.events-carousel .event-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 77%;
    max-width: 77%;
    aspect-ratio: 3 / 4;
    max-height: 99%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border-radius: 30px !important;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: opacity;
}

.events-carousel .event-slide.active {
    opacity: 1;
    pointer-events: auto; /* Allow interaction with active slide */
    z-index: 1;
}

/* Carousel-specific event-image (homepage) */
.events-carousel .event-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px !important;
    overflow: hidden !important;
    transform-origin: center center;
}

.events-carousel .event-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 30px !important;
}
    
/* .event-caption intentionally hidden */

/* Carousel Navigation Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: var(--spacing-xs);
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(8, 8, 10, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: #050607;
    width: 18px;
    border-radius: 3px;
}

.dot:hover {
    background: rgba(5, 5, 7, 0.9);
}


/* ============================================
   7. FOOTER SECTION
   ============================================ */
/* ============================================
   CONTACT / GET IN TOUCH PAGE
   ============================================ */
body.contact-page .contact-page-container {
    padding-top: 90px;
    min-height: 100vh;
    animation: pageFadeIn 0.5s ease-out;
}

/* Contact page: Tech Care only */
.contact-techcare-only {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(140deg, #141517 0%, #10131b 100%);
    border-radius: 16px;
    padding: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-techcare-only .contact-page-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.2;
}
.contact-techcare-only .techcare-links-page {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.contact-techcare-only .techcare-links-page a {
    color: #fff;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    display: inline-block;
    transition: color 0.2s, opacity 0.2s;
}
.contact-techcare-only .techcare-links-page a:hover {
    color: rgba(255, 255, 255, 0.9);
    opacity: 0.9;
}


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

/* ============================================
   IMAGE PRELOADING STYLES
   ============================================ */
@keyframes imageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

img.img-preload {
    background-color: transparent;
    opacity: 0;
    animation: imageFadeIn 0.6s ease-in-out forwards;
}

img.img-preload[loading="eager"] {
    opacity: 0;
}

img.img-loaded {
    opacity: 1;
}

/* ============================================
   UNIVERSAL IMAGE LOADING EFFECT
   Apply shimmer skeleton to all images on the website
   ============================================ */

/* Base styles for all images - start hidden, fade in when loaded */
/* Exclude: no-load-effect class, logo-icon, images inside SVG, and already processed images */
img:not(.no-load-effect):not(.logo-icon):not(.img-loaded):not(.loaded) {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    position: relative;
}

/* Show images when loaded */
img.img-loaded,
img.loaded {
    opacity: 1 !important;
}

/* Universal shimmer skeleton - applies to images with loading effect */
img:not(.no-load-effect):not(.logo-icon):not(.img-loaded):not(.loaded)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hide shimmer when image is loaded */
img.img-loaded::before,
img.loaded::before {
    opacity: 0 !important;
    animation: none !important;
}

/* Exclude SVG images from loading effect */
svg img {
    opacity: 1 !important;
}

svg img::before {
    display: none !important;
}

/* Container-based shimmer for specific image containers */
.image-container,
.image-wrapper,
.event-image,
.announcement-image-wrapper,
.batch-grid-image-frame,
.photo-gallery-item,
.gallery-item,
.event-card-image-wrapper,
.origin-hero-banner,
.institute-hero-banner {
    position: relative;
}

.image-container::before,
.image-wrapper::before,
.event-image::before,
.announcement-image-wrapper::before,
.batch-grid-image-frame::before,
.photo-gallery-item::before,
.gallery-item::before,
.event-card-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.image-container:has(img.img-loaded)::before,
.image-container:has(img.loaded)::before,
.image-wrapper:has(img.img-loaded)::before,
.image-wrapper:has(img.loaded)::before,
.event-image:has(img.img-loaded)::before,
.event-image:has(img.loaded)::before,
.announcement-image-wrapper:has(img.img-loaded)::before,
.announcement-image-wrapper:has(img.loaded)::before,
.batch-grid-image-frame:has(img.img-loaded)::before,
.batch-grid-image-frame:has(img.loaded)::before,
.photo-gallery-item:has(img.img-loaded)::before,
.photo-gallery-item:has(img.loaded)::before,
.gallery-item:has(img.img-loaded)::before,
.gallery-item:has(img.loaded)::before,
.event-card-image-wrapper:has(img.img-loaded)::before,
.event-card-image-wrapper:has(img.loaded)::before {
    opacity: 0;
    animation: none;
}

.image-placeholder {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Remove badge/background for logos and folder icons so images appear without boxed backgrounds */
.origin-card .logo-badge,
.documents-card .folder-item .folder-icon,
.documents-card .folder-item,
.card .logo-badge,
.card .folder-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.origin-card .logo-badge-link .logo-badge:hover {
    transform: none !important;
}

.logo-image,
.folder-icon,
.event-image img {
    background: transparent !important;
}

.contact-section {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}
.contact-page-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}
.contact-page-intro {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-xl) 0;
    line-height: 1.5;
}
/* Contact layout: center Tech Care card on page */
.contact-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.contact-form-wrap {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}
.contact-info {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-info-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}
.contact-email {
    margin: 0 0 var(--spacing-sm) 0;
}
.contact-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.contact-email a {
    color: var(--color-accent, #909398);
    text-decoration: none;
    font-weight: 600;
}
.contact-email a:hover {
    text-decoration: underline;
}
.contact-org-room {
    margin: 0 0 var(--spacing-sm) 0;
    font-weight: 600;
    color: var(--color-text-primary);
}
.contact-note {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: var(--spacing-md) 0 0 0;
}
.contact-form-wrap {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.contact-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}
.contact-field .required {
    color: #ef4444;
}
.contact-field input,
.contact-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-size: 1rem;
    font-family: inherit;
}

/* Contact select styling (scoped to contact page, desktop & mobile) */
body.contact-page .contact-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08); /* same as inputs for a calmer look */
    color: var(--color-text-primary);
    font-size: 1rem;
    font-family: inherit;
    appearance: none;
}

body.contact-page .contact-field select option {
    background: #050816;
    color: #e5e7eb;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.8;
}
.contact-field textarea {
    resize: vertical;
    min-height: 120px;
}
.contact-submit {
    padding: 14px 24px;
    border-radius: 10px;
    border: none;
    background: #ffffff; /* Pure white button for strong contrast */
    color: #111827;      /* Dark, readable text */
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    margin-top: 8px;
}
.contact-submit:hover {
    background: #f3f4f6;
    transform: translateY(-1px);
}
.contact-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-bottom: var(--spacing-md);
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 8px;
}
.contact-success {
    padding: var(--spacing-lg);
    background: rgba(34, 197, 94, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    font-weight: 600;
}

@media (max-width: 768px) {
    .contact-layout {
        flex-direction: column;
        align-items: stretch;
    }
    
    .contact-page-title {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    
    .contact-info-title {
        font-size: 18px !important;
    }
    
    .contact-form-wrap {
        width: 100%;
    }
}

/* ============================================
   7. FOOTER SECTION
   ============================================ */
.footer-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(140deg, #141517 0%, #10131b 100%);
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px rgba(3, 5, 8, 0.55);
    min-height: 0;
    height: auto;
    overflow: visible;
    position: relative;
}

.footer-section-content {
    display: block;
    width: 100%;
}

.footer-section .footer-copy {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    order: 999; /* Ensure it's at the bottom */
}

/* Footer Left: About & Social */
.footer-about {
    background: transparent;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding-right: var(--spacing-lg);
    gap: var(--spacing-xs);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-bottom: 0;
    position: relative;
}

.footer-logo-icon {
    width: 65px;
    height: 65px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    position: relative;
    left: 0px; /* Overlap forward */
    z-index: 2;
    align-self: center; /* Align vertically with text */
}

.footer-logo-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-white);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7),
                 0 0 20px rgba(255, 255, 255, 0.5),
                 0 0 30px rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 3;
    margin-left: -10px;
}

.footer-description {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 460px;
}

/* Social Links */
.social-links {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: 4px;
}

.social-icon {
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-white);
}

.social-icon:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.2);
}

.social-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: var(--spacing-sm) 0 0 0;
    margin-top: auto;
}

.footer-copy {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: center;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    grid-column: 1 / -1; /* Span full width on desktop */
    width: 100%;
    order: 999; /* Ensure it's at the bottom */
}

/* Footer Right: Tech Care Platform */
.footer-techcare {
    background: linear-gradient(160deg, #07090f 0%, #0f131c 100%);
    border-radius: 30px;
    padding: var(--spacing-lg);
    overflow: visible; /* Changed from hidden to visible so outreach link is visible */
    min-height: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 30px rgba(0, 0, 0, 0.55);
    height: auto; /* Allow content to expand */
    max-height: none; /* Remove any height restrictions */
}

.techcare-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
    text-align: left;
    letter-spacing: 1px;
}

.techcare-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.techcare-links li {
    margin-bottom: 4px;
}

.techcare-links a {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    transition: color 0.3s ease;
}

.techcare-links a:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Contact page Tech Care: white text */
.contact-techcare .techcare-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #fff !important;
}
.contact-techcare .techcare-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-techcare .techcare-links a {
    color: #fff !important;
}
.contact-techcare .techcare-links a:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}


/* ============================================
   8. INTRO ANIMATION STYLES
   ============================================ */
.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #0f1112;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1s ease;
}

.intro-screen.fade-out {
    opacity: 0;
}

.intro-screen.hidden {
    display: none;
}

.intro-text {
    font-size: 4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.intro-text span {
    display: inline-block;
    filter: blur(10px);
    opacity: 0;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.intro-text span.revealed {
    filter: blur(0px);
    opacity: 1;
}

/* Hide main content initially */
body.intro-active {
    overflow: hidden;
}

body.intro-active .main-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Ensure intro screen is visible when it exists and body has intro-active */
body.intro-active .intro-screen {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Also ensure intro screen is visible by default (before JS runs) */
.intro-screen:not(.hidden):not(.fade-out) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.main-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.main-content.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Fallback: if intro screen is hidden, always show content */
.intro-screen.hidden ~ .main-content,
body:not(.intro-active) .main-content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Emergency fallback: show content after 10 seconds regardless (gives animation time to complete) */
body.intro-active .main-content {
    animation: forceShowContent 10s forwards;
}

@keyframes forceShowContent {
    0%, 98% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Additional emergency: if JavaScript fails, hide intro after 10 seconds */
body.intro-active .intro-screen {
    animation: forceHideIntro 10s forwards;
}

@keyframes forceHideIntro {
    0%, 98% {
        opacity: 1;
        display: flex;
    }
    100% {
        opacity: 0 !important;
        display: none !important;
        visibility: hidden !important;
    }
}


/* ============================================
   9. ADMIN PANEL STYLES (Light Theme)
   ============================================ */
body:has(.admin-container) {
    background: #f5f7fa;
    min-height: 100vh;
}

.admin-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    max-width: 1400px;
    width: 100%;
    overflow: hidden;
    margin: 40px auto;
}

.admin-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 32px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
}

.admin-header-content {
    text-align: left;
}

.admin-header h1 {
    font-size: 28px;
    margin-bottom: 8px;
    font-weight: 700;
    color: #ffffff;
}

.admin-header p {
    opacity: 0.95;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.header-actions {
    display: none;
    gap: 12px;
}

.header-actions.show {
    display: flex;
}

.btn-goto {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.btn-goto:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.admin-content {
    padding: 40px;
    background: #ffffff;
    color: #1a202c;
}

.login-section, .dashboard-section {
    display: none;
}

.login-section.active, .dashboard-section.active {
    display: block;
}

.login-section {
    max-width: 400px;
    margin: 0 auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.login-section h2 {
    color: #1a202c;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 700;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2d3748;
    font-size: 14px;
}

.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #1a202c;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-helper {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #718096;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-logout {
    background: #ef4444;
    color: #ffffff;
    float: right;
}

.btn-logout:hover {
    background: #dc2626;
    transform: translateY(-2px);
}

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.tab {
    padding: 12px 24px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #718096;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.tab:hover {
    color: #667eea;
}

.tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content[style*="display: none"] {
    display: none !important;
}

.alert {
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    border-left: 4px solid;
    font-size: 14px;
}

.alert-success {
    background: #f0fdf4;
    color: #166534;
    border-left-color: #22c55e;
}

.alert-error {
    background: #fef2f2;
    color: #991b1b;
    border-left-color: #ef4444;
}

.user-info {
    background: #f7fafc;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    color: #2d3748;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-info strong {
    color: #1a202c;
}

.user-info span {
    color: #4a5568;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
    background: #ffffff;
    color: #1a202c;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.data-table thead {
    background: #f7fafc;
    color: #2d3748;
}

.data-table th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a5568;
    border-bottom: 2px solid #e2e8f0;
}

.data-table td {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}

.data-table tbody tr:hover {
    background: #f7fafc;
}

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

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    margin-right: 6px;
}

.btn-edit {
    background: #667eea;
    color: #ffffff;
}

.btn-edit:hover {
    background: #5568d3;
    transform: translateY(-1px);
}

.btn-delete {
    background: #ef4444;
    color: #ffffff;
}

.btn-delete:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.section-title h2 {
    color: #1a202c;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.btn-toggle {
    background: #e2e8f0;
    color: #4a5568;
    border: 1px solid #cbd5e0;
}

.btn-toggle:hover {
    background: #cbd5e0;
    color: #2d3748;
}

.form-section {
    background: #f7fafc;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
}

.form-section h3 {
    color: #1a202c;
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 700;
}

.hidden {
    display: none !important;
}

.badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-pinned {
    background: #fef3c7;
    color: #92400e;
}

.badge-active {
    background: #d1fae5;
    color: #065f46;
}

.badge-inactive {
    background: #fee2e2;
    color: #991b1b;
}

/* Progress Bar Styles */
#upload-progress {
    display: none;
    margin-top: 0.5rem;
}

#progress-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 100%;
    width: 0%;
    transition: width 0.3s;
    border-radius: 4px;
}

#progress-text {
    color: #4a5568;
    margin-top: 0.3rem;
    display: block;
    font-size: 12px;
}


/* ============================================
   10. EVENTS PAGE STYLES
   ============================================ */
/* Main Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    padding-top: 75px;
}

/* Page Header */
.page-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    color: var(--color-white);
}

.page-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Filter Bar */
.filter-bar {
    background: var(--color-card-dark);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1.2rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid var(--color-border);
}

.filter-group {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.filter-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.filter-btn {
    background: var(--color-bg-medium);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 0.35rem 0.7rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.8rem;
    transition: all 0.3s;
}

.filter-btn:hover {
    background: var(--color-card-dark);
    border-color: var(--color-white);
}

.filter-btn.active {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-bg-dark);
}

/* Events Grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 100%;
}

/* Event Card */
.event-card {
    background: var(--color-card-dark);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
    cursor: pointer;
    position: relative;
    height: 420px;
    will-change: transform, box-shadow;
}



.event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-card-dark);
    overflow: hidden;
    position: relative;
    transform-origin: center center;
    border-radius: var(--radius-card);
}
.event-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
    border-radius: var(--radius-card);
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(1);
    transform-origin: center center;
    will-change: transform;
    border-radius: var(--radius-card);
}

.event-slide-link:hover .event-image img {
    transform: scale(1.08);
}



.event-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    gap: 0.5rem;
    pointer-events: none;
}

.event-category {
    display: inline-block;
    background: rgba(0, 0, 0, 0.5);
    color: var(--color-white);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
}

.event-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
    margin: 0;
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--color-white);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.meta-item.meta-heading {
    gap: 0.5rem;
    align-items: flex-start;
}

.btn-view {
    pointer-events: auto;
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-view:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.28);
}

.event-info-block {
    background: rgba(0, 0, 0, 0.82);
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    backdrop-filter: blur(2px);
    width: 100%;
    pointer-events: none;
}

.event-info-block + .btn-view {
    align-self: flex-end;
    margin: 0.4rem 0.9rem 0.6rem;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    padding: 1rem;
    overflow-y: auto;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--color-bg-medium);
    border-radius: 18px;
    width: min(960px, 96vw);
    max-height: calc(100vh - 2rem);
    position: relative;
    border: 1px solid var(--color-border);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--color-card-dark);
    border: none;
    color: var(--color-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}

.modal-close:hover {
    background: var(--color-white);
    color: var(--color-bg-dark);
    transform: rotate(90deg);
}

.modal-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    overflow-y: auto;
}

@media (min-width: 900px) {
    .modal-layout {
        flex-direction: row;
        gap: 1.25rem;
        height: 100%;
    }
}

.modal-image-panel {
    width: 100%;
    background: var(--color-bg-dark);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    aspect-ratio: 3 / 4;
}

@media (min-width: 900px) {
    .modal-image-panel {
        flex: 0 0 280px;
    }
}

.modal-image-panel .modal-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
    padding: 0.6rem 0.9rem;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    color: var(--color-white);
}

.modal-sheet-card {
    width: 100%;
    background: linear-gradient(180deg, #0f1014 0%, #1b1f24 100%);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

@media (min-width: 900px) {
    .modal-sheet-card {
        flex: 1;
    }
}

.sheet-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.8rem;
}

.sheet-label {
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.sheet-title {
    font-size: 1.25rem;
    color: var(--color-white);
    font-weight: 800;
    margin: 0;
}

.sheet-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.sheet-badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sheet-date {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.modal-sheet {
    width: 100%;
    border-collapse: collapse;
    background: #111419;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.modal-sheet thead th {
    background: linear-gradient(90deg, #1f6130 0%, #2d7a42 100%);
    color: var(--color-white);
    padding: 0.65rem;
    font-size: 0.75rem;
    letter-spacing: 0.8px;
    text-align: left;
}

.modal-sheet tbody th,
.modal-sheet tbody td {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
}

.modal-sheet tbody th {
    width: 35%;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.015);
    font-weight: 600;
    letter-spacing: 0.6px;
}

.modal-sheet tbody td {
    color: var(--color-text-primary);
}

.sheet-notes {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sheet-notes-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 0.5px;
}

.modal-description {
    line-height: 1.6;
    color: var(--color-text-primary);
    white-space: pre-line;
    font-size: 0.9rem;
}

/* Announcement Modal */
.announcement-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
    z-index: 10001;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    justify-content: stretch;
}

.announcement-modal.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.announcement-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.announcement-modal-content {
    position: relative;
    background: var(--color-bg-medium);
    border-radius: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
    margin: 0;
}

.announcement-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--color-card-dark);
    border: none;
    color: var(--color-white);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-modal-close:hover {
    background: var(--color-white);
    color: var(--color-bg-dark);
    transform: rotate(90deg);
}

.announcement-modal-header {
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.announcement-modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-white);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.announcement-modal-date {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.announcement-modal-meeting-info {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.meeting-detail-item {
    font-size: 0.9rem;
    color: #c0c0c0;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.meeting-detail-item:last-child {
    margin-bottom: 0;
}

.announcement-modal-content-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.announcement-modal-left-panel {
    width: 50%;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border);
    overflow: hidden;
    max-height: 100vh;
}

.announcement-modal-content-wrapper:has(.announcement-modal-image[style*="display: none"]) .announcement-modal-body {
    width: 100%;
}

.announcement-modal-image {
    width: 50%;
    min-width: 400px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-card-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border);
}

.announcement-modal-pdf {
    padding: 1rem;
    background: var(--color-card-dark);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.announcement-modal-pdf iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: none;
    border-radius: 8px;
    background: white;
    flex: 1;
}

.announcement-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.announcement-modal-body {
    padding: 1.5rem 2rem 2rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.announcement-modal-content-full {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.announcement-modal-content-full p {
    margin: 0 0 1rem 0;
}

.announcement-modal-content-full p:last-child {
    margin-bottom: 0;
}

/* Announcement Detail Page */
/* Prevent body scrolling on announcement detail page - Desktop only */
@media (min-width: 769px) {
    body.announcement-detail-page {
        overflow: hidden;
        height: 100vh;
    }

    body.announcement-detail-page html {
        overflow: hidden;
        height: 100vh;
    }
}

.announcement-detail-container {
    min-height: 100vh;
    background: #000000;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Desktop: Fixed full-screen layout */
@media (min-width: 769px) {
    .announcement-detail-container {
        height: 100vh;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.announcement-detail-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem 2rem;
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    height: 80px;
    box-sizing: border-box;
}

.announcement-back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--color-card-dark);
    color: var(--color-white);
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.announcement-back-button:hover {
    background-color: var(--color-white);
    color: var(--color-bg-dark);
    transform: scale(1.05);
}

.announcement-close-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.announcement-close-button:hover {
    background: var(--color-white);
    color: #000000;
    transform: rotate(90deg);
    border-color: var(--color-white);
}

.announcement-detail-content-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
}

/* Desktop: Prevent scrolling on wrapper */
@media (min-width: 769px) {
    .announcement-detail-content-wrapper {
        overflow: hidden;
    }
}

.announcement-detail-left-panel {
    width: 400px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    height: 100%;
    background: #000000;
    position: relative;
}

.announcement-detail-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Image always takes full height and width of left panel */
.announcement-detail-left-panel .announcement-detail-image {
    flex: 1 1 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.announcement-detail-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}

.announcement-detail-pdf-section {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
}

.announcement-pdf-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.announcement-pdf-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
}

.announcement-pdf-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-white);
    color: #000000;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.announcement-pdf-download-btn:hover {
    background: #e5e7eb;
    transform: scale(1.05);
}

.announcement-detail-body {
    padding: 2rem;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #000000;
}

.announcement-detail-header-content {
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.announcement-detail-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-white);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.announcement-detail-date {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 1rem;
}

.announcement-detail-meeting-info {
    margin-top: 1rem;
    padding-top: 1rem;
}

.announcement-detail-content-full {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    margin-top: 0.5rem;
    padding-right: 0.5rem;
}

/* Hide scrollbar on desktop but keep scrolling functionality */
@media (min-width: 769px) {
    .announcement-detail-content-full {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .announcement-detail-content-full::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
        width: 0;
        height: 0;
    }
}

.announcement-content-truncated {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.announcement-detail-content-full p {
    margin: 0 0 1rem 0;
}

.announcement-detail-content-full p:last-child {
    margin-bottom: 0;
}

/* Responsive - Mobile Only */
@media (max-width: 768px) {
    .announcement-detail-container {
        position: relative;
        min-height: 100vh;
    }
    
    .announcement-detail-content-wrapper {
        flex-direction: column;
        min-height: calc(100vh - 70px);
    }
    
    .announcement-detail-left-panel {
        width: 100%;
        min-width: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        height: auto;
        min-height: 300px;
        max-height: 50vh;
        flex-shrink: 0;
        position: relative;
    }
    
    .announcement-detail-image {
        width: 100%;
        aspect-ratio: 3 / 4;
        min-height: unset;
    }
    
    .announcement-detail-body {
        width: 100%;
        flex: 1;
        min-height: auto;
        overflow: visible;
        padding-bottom: 2rem;
    }
    
    .announcement-detail-header {
        padding: 1rem;
        height: auto;
        min-height: 70px;
    }
    
    .announcement-detail-title {
        font-size: 1.5rem;
    }
    
    .announcement-detail-content-full {
        overflow: visible;
        padding-right: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .announcement-modal-content {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
    }
    
    .announcement-modal-header {
        padding: 1.5rem 1.5rem 1rem;
    }
    
    .announcement-modal-title {
        font-size: 1.25rem;
        padding-right: 2rem;
    }
    
    .announcement-modal-content-wrapper {
        flex-direction: column;
    }
    
    .announcement-modal-image {
        width: 100%;
        min-width: auto;
        aspect-ratio: 3 / 4;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    
    .announcement-modal-body {
        padding: 1.25rem 1.5rem 1.5rem;
        width: 100%;
    }
    
    .announcement-modal-description,
    .announcement-modal-content-full {
        font-size: 0.9rem;
    }
}

.sheet-summary,
.sheet-gallery {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sheet-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 0.45px;
}

.sheet-summary-text {
    color: var(--color-text-primary);
    line-height: 1.5;
    font-size: 0.9rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.65rem;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0f1116;
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.gallery-item::after {
    content: attr(data-label);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
    color: var(--color-white);
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

/* Loading State */
.loading {
    text-align: center;
    padding: 2rem;
    font-size: 1rem;
    color: var(--color-text-muted);
}

.loading::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2.5rem 1.2rem;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 0.6rem;
    opacity: 0.5;
}

.empty-text {
    font-size: 1rem;
    color: var(--color-text-muted);
}


/* ============================================
   11. DOCUMENTS PAGE STYLES
   ============================================ */
/* Search and Filter Bar */
.toolbar {
    background: var(--color-card-dark);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-box .search-input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.85rem;
}

.search-box .search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-box .search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* Style the clear button (x) for search-box inputs */
.search-box .search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.search-box .search-input::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* For Firefox */
.search-box .search-input[type="search"]::-moz-search-clear-button {
    cursor: pointer;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.search-box .search-input[type="search"]::-moz-search-clear-button:hover {
    opacity: 1;
}

.search-box .search-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-primary);
    opacity: 0.7;
    font-size: 0.9rem;
    pointer-events: none;
}

.view-toggle {
    display: flex;
    gap: 0.5rem;
}

.view-btn {
    padding: 0.6rem 1rem;
    background: var(--color-bg-medium);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.view-btn:hover,
.view-btn.active {
    background: var(--color-white);
    color: var(--color-bg-dark);
    border-color: var(--color-white);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb-link:hover {
    color: var(--color-white);
}

/* Breadcrumb color override for Documents page */
.documents-page .breadcrumb {
    color: #000000;
}

.documents-page .breadcrumb-link,
.documents-page .breadcrumb-link:hover {
    color: #000000;
}

.documents-page .breadcrumb-separator {
    color: #000000;
    margin: 0 0.5rem;
}

.documents-page .breadcrumb .breadcrumb-item,
.documents-page .breadcrumb .breadcrumb-item span,
.documents-page .breadcrumb-current {
    color: #000000;
}

/* Folder Path Style Breadcrumb */
.breadcrumb-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breadcrumb-link {
    color: #1f2937; /* gray-800 - match documents styling */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    transform-origin: center center;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}

.breadcrumb-link:hover {
    color: #111827 !important; /* gray-900 */
    transform: scale(1.1);
    background: none !important;
    box-shadow: none !important;
}

.breadcrumb-arrow {
    display: inline-flex;
    align-items: center;
    color: #6b7280; /* gray-500 */
    margin: 0 0.25rem;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

.breadcrumb-arrow:hover {
    transform: scale(1.2);
}

.breadcrumb-arrow svg {
    flex-shrink: 0;
}

.breadcrumb-current {
    color: #1f2937; /* gray-800 - match documents styling */
    font-weight: 700;
}

/* Documents page specific breadcrumb styles */
.documents-page .breadcrumb-path {
    color: #000000;
}

.documents-page .breadcrumb-link {
    color: #1f2937; /* gray-800 - match documents styling */
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}

.documents-page .breadcrumb-link:hover {
    color: #111827 !important; /* gray-900 */
    transform: scale(1.1);
    background: none !important;
    box-shadow: none !important;
}

/* Override hover-zoom class for breadcrumb links */
.breadcrumb-link.hover-zoom:hover {
    box-shadow: none !important;
    background: none !important;
}

.documents-page .breadcrumb-arrow {
    color: #6b7280;
}

.documents-page .breadcrumb-current {
    color: #000000;
}

.breadcrumb-separator {
    color: var(--color-text-muted);
}

/* Folders Grid */
.folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.folder-card {
    background: var(--color-card-bg);
    border-radius: 8px;
    padding: 1.2rem;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.folder-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    border-color: var(--color-white);
}

.folder-icon {
    font-size: 2.5rem;
}

.folder-info {
    flex: 1;
    color: var(--color-white);
}

.folder-name {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: var(--color-white);
}

.folder-count {
    font-size: 0.75rem;
    color: var(--color-white);
}

/* Documents Section */
.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Documents List */
.documents-list {
    background: var(--color-card-dark);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.document-item {
    display: grid;
    grid-template-columns: 40px 1fr auto auto auto;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    transition: all 0.3s;
    cursor: pointer;
}

/* Desktop: doc-meta-row acts as transparent wrapper */
.doc-meta-row {
    display: contents;
}

/* Ensure children of meta-row are positioned correctly on desktop */
.doc-meta-row > .doc-size-display {
    grid-column: 3;
    grid-row: 1;
}

.doc-meta-row > .doc-actions {
    grid-column: 4 / 6;
    grid-row: 1;
}

.doc-size-display {
    font-size: 0.85rem;
    color: var(--color-white);
    font-weight: 500;
    white-space: nowrap;
}

.document-item:last-child {
    border-bottom: none;
}

.document-item:hover {
    background: var(--color-bg-medium);
}

.doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-info {
    flex: 1;
}

.doc-title {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    color: var(--color-white);
}

.doc-description {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.doc-name {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
    color: var(--color-white);
}

.doc-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

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

.doc-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.doc-preview-btn,
.doc-download-btn {
    flex: 1 1 0;
    min-width: 90px;
    max-width: 120px;
    text-align: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover zoom effect for all clickable elements */
.hover-zoom {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-origin: center center;
}

.hover-zoom:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Back button styles */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #f3f4f6;
    color: #374151;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.back-button:hover {
    background-color: #e5e7eb;
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.back-button svg {
    flex-shrink: 0;
}

/* Enhanced hover effects for document items */
.document-item.hover-zoom:hover {
    transform: scale(1.02);
    background: var(--color-bg-medium);
}

.document-card.hover-zoom:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Enhanced hover for buttons */
.doc-preview-btn.hover-zoom:hover,
.doc-download-btn.hover-zoom:hover,
.doc-card-preview-btn.hover-zoom:hover,
.doc-card-download.hover-zoom:hover {
    transform: scale(1.08);
}

/* Subcategory name link hover */
.documents-page .hover-zoom[style*="color: inherit"]:hover {
    color: #4f46e5 !important; /* indigo-600 */
}

.action-btn {
    padding: 0.4rem 0.8rem;
    background: var(--color-white);
    color: var(--color-bg-dark);
    border: none;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.action-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.3);
}

/* Grid View */
.documents-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

/* ============================================
   DOCUMENTS PAGE (Figma layout)
   ============================================ */
.documents-page .container {
    max-width: 1243px;
    margin: 80px auto 60px auto;
    padding: 0;
    background: transparent;
}

.documents-outer-panel {
    background: transparent;
    border-radius: 30px;
    padding: 45px 55px 55px 55px;
}

.documents-inner-panel {
    background: #D9D9D9;
    border-radius: 30px;
    padding: 45px 55px 80px 55px;
}

.documents-page .page-header {
    text-align: center;
    margin-bottom: 40px;
}

.documents-page .page-title {
    font-family: 'Sora', sans-serif;
    font-size: 96px;
    font-weight: 600;
    line-height: 116px;
    color: #0F181D;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.documents-divider {
    width: 1004px;
    max-width: 100%;
    height: 0;
    margin: 0 auto;
    border-top: 2px solid #000000;
}

.documents-page .toolbar {
    margin-top: 40px;
}

.documents-page .section-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0F181D;
}

.documents-page #foldersSection {
    margin-top: 32px;
    margin-bottom: 32px;
}

/* Folder cards for documents page - single row */
.documents-page .documents-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 30px;
    padding: 0;
    overflow: visible;
}

/* For smaller screens, allow wrapping */
@media (max-width: 1200px) {
    .documents-page .documents-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .documents-page .documents-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    /* Ensure folder section stays 2 columns on mobile */
    .documents-page #foldersGrid,
    .documents-page #foldersSection .documents-grid,
    .documents-page #subcategoriesSection .documents-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Mobile: Make subcategory folder containers responsive - override inline styles */
    #subcategoriesSection .documents-grid > div {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Mobile: Make subcategory folder items responsive - override inline styles with higher specificity */
    .documents-page #subcategoriesSection .folder-item,
    #subcategoriesSection .documents-grid .folder-item {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 202 / 141 !important; /* Maintain original aspect ratio (202px / 141px ≈ 1.43) */
        min-height: 0 !important;
        min-width: 0 !important;
        /* Override inline display: block */
        display: block !important;
    }
    
    /* Mobile: Ensure folder image container scales properly */
    #subcategoriesSection .folder-item > div {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Mobile: Ensure folder image scales properly */
    #subcategoriesSection .folder-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        position: relative !important;
    }
    
    /* Mobile: Ensure folder number overlay scales properly */
    #subcategoriesSection .folder-item > div:last-child {
        width: 100% !important;
        height: 100% !important;
    }
    
    .documents-outer-panel,
    .events-outer-panel,
    .event-detail-outer-panel {
        padding: 16px;
        border-radius: 20px;
    }
    
    .documents-inner-panel,
    .events-inner-panel,
    .event-detail-inner-panel {
        padding: 20px 16px !important;
    }
    
    .org-inner-panel {
        padding: 20px 16px !important;
        border-radius: 20px !important; /* Smooth rounded corners for mobile */
    }
    
    .origin-inner-panel {
        border-radius: 20px !important; /* Smooth rounded corners for mobile */
    }
    
    .institute-content-panel {
        padding: 20px 16px !important;
    }
    
    .institute-inner-panel {
        padding: 20px 16px 24px !important;
        border-radius: 20px !important;
    }
    
    .origin-hero-banner img,
    .institute-hero-banner img {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }
    
    .org-core-values-list {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .org-core-item {
        align-items: center; /* Center align items in the row */
    }
    
    .org-core-icon {
        align-self: flex-start; /* Icon starts from top */
        margin-top: 28px; /* Lower by 40% (20px * 1.4 = 28px) */
    }
    
    .institute-list {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .institute-item {
        flex-direction: column;
    }
    
    .institute-item-image {
        width: 100%;
        max-width: 100%;
        height: 200px;
    }
}

/* Folder card styling for documents page */
.documents-page .folder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background-color: #2b2f33;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    min-height: 180px;
    text-decoration: none;
    color: inherit;
    pointer-events: auto;
}

.documents-page .folder-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    background-color: #33373b;
}

.documents-page .folder-card * {
    pointer-events: none;
}

/* Folder items with icons - use images as-is, remove all custom folder styling */
.documents-page .folder-item {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    min-height: 0;
    max-height: none;
    position: static;
}

.documents-page .folder-item::before {
    display: none;
}

.documents-page .folder-item:hover {
    transform: none;
    box-shadow: none;
}

.documents-page .folder-item.active {
    background: transparent;
    border: none;
}

.documents-page .folder-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Remove custom folder styling for home page documents section */
.documents-card .folder-item {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    position: static;
    display: flex;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100%;
    transition: transform 0.3s ease; /* Add transition for zoom effect */
    transform-origin: center center;
    overflow: visible; /* Allow zoom to be visible */
}

.documents-card .folder-item::before {
    display: none;
}

.documents-card .folder-item:hover {
    transform: scale(1.05); /* Zoom effect */
    box-shadow: none;
}

.documents-card .folder-item.active {
    background: transparent;
    border: none;
}

.documents-card .folder-item img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Home page DOCUMENTS: adjust position for each folder (margin, transform, etc.) */
/* Equal spacing for the 2x2+ carousel grid */
.documents-card .folder-item-01,
.documents-card .folder-item-02,
.documents-card .folder-item-03,
.documents-card .folder-item-04,
.documents-card .folder-item-05 {
    margin: 0;
}

/* No Documents Found State */
.documents-page .no-documents {
    text-align: center;
    padding: 4rem 2rem;
    margin: 2rem 0;
}

.documents-page .no-documents-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 50%;
    opacity: 0.6;
}

.documents-page .no-documents-icon svg {
    width: 48px;
    height: 48px;
    stroke: #8a8f99;
    stroke-width: 1.5;
}

.documents-page .no-documents-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.documents-page .no-documents-text {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.document-card {
    background: var(--color-card-bg);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.document-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    border-color: var(--color-white);
}

.doc-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.doc-card-name {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
    color: var(--color-white);
    word-break: break-word;
}

.doc-card-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

/* Icon styles (Documents page) */
.documents-page .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.documents-page .search-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--color-text-primary);
    display: block;
    opacity: 0.7;
}

.documents-page .doc-icon svg,
.documents-page .doc-card-icon svg {
    width: 28px;
    height: 28px;
    fill: #ffffff;
}

/* Consistent search field styling (Documents page matches header) */
.documents-page .search-box .search-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--color-text-primary) !important;
}

.documents-page .search-box .search-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.documents-page .search-box .search-input:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text-primary) !important;
}

.documents-page .doc-download-btn,
.documents-page .doc-card-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: #ffffff;
    color: #11161b;
    font-family: 'Sora', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #d0d3da;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    min-width: 90px;
    text-align: center;
}

.documents-page .doc-download-btn:hover,
.documents-page .doc-card-download:hover {
    background: #f2f4f7;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}


/* ============================================
   12. RESPONSIVE MEDIA QUERIES
   ============================================ */

/* Large Tablets & Small Desktops: 1024px - 1200px */
@media (max-width: 1200px) {
    .main-container {
        padding: var(--spacing-sm);
        padding-bottom: 28px;
        gap: 15px;
    }
    
    .hero-banner {
        width: 100%;
        max-width: 850px;
        height: auto;
        min-height: 300px;
    }
    
    .announcements-panel {
        width: 100%;
        max-width: 306px;
        overflow: visible;
    }
    
    .card.origin-card {
        width: 100%;
        max-width: 100%;
        min-height: 450px;
        height: auto;
    }
    
    .card.documents-card {
        width: 100%;
        max-width: 464px;
    }
    
    .card.events-card {
        width: 100%;
        max-width: 100%;
        min-height: 450px;
        height: auto;
    }
}

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
    .search-form {
        max-width: 300px;
        margin: 0 var(--spacing-sm);
    }
    
    .search-input {
        font-size: 12px;
        padding: 7px 12px;
    }
    
    body {
        overflow-y: auto;
    }
    
    html {
        overflow-y: auto;
    }
    
    .main-container {
        height: auto;
        min-height: 100vh;
        gap: var(--spacing-md);
    }
    
    /* ===== MOBILE LAYOUT (max-width: 768px) ===== */
    /* Single column layout for all content */
    .hero-section {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        min-height: auto;
        overflow: visible;
        align-items: start;
    }
    
    .hero-banner,
    .announcements-panel {
        width: 100%;
        max-width: 100%;
        height: 380px;
        max-height: 380px;
        border-radius: 30px;
        padding: var(--spacing-md);
        background: var(--color-card-bg);
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    
    .hero-banner {
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
        min-height: unset;
        border-radius: 20px;
        display: block;
    }
    
    .announcements-panel .scroll-wrapper {
        flex: 1;
        min-height: 0;
        padding-bottom: 4px;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }
    
    .cards-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .card {
        width: 100%;
        max-width: 100%;
        border-radius: 30px;
        padding: var(--spacing-md);
    }
    
    .card.origin-card {
        min-height: 400px;
        height: 400px;
    }

    /* Match Documents card height to Origin card on tablet/mobile */
    .card.documents-card {
        min-height: 400px;
        height: 400px;
    }

    .card.events-card {
        height: auto;
        min-height: auto;
        max-height: none;
        border-radius: 20px;
    }

    .origin-carousel {
        height: 100%;
        flex: 1;
    }

    .origin-carousel,
    .origin-track {
        height: 100%;
    }

    .origin-track {
        flex: 1;
        position: relative;
    }

    .origin-slide {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100% !important;
        min-height: auto !important;
    }

    .origin-grid {
        padding: var(--spacing-md);
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, minmax(100px, 1fr)) !important;
        height: 100% !important;
        gap: 12px;
        align-items: start !important;
        justify-items: start !important;
    }
    
    /* Position single item at top-left in mobile grid when there's only 1 item */
    /* Keep 2x2 grid structure, position the single item at top-left */
    .origin-grid:has(.logo-item:only-child) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        align-items: start !important;
        justify-items: start !important;
    }
    
    .origin-grid:has(.logo-item:only-child) .logo-item {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 3 / 1;
    }

    .logo-item {
        aspect-ratio: 3 / 1;
        height: 100%;
        min-height: 80px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .events-carousel,
    .events-carousel .carousel-track {
        height: 100%;
    }

    .events-carousel .event-slide {
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .events-carousel .event-image {
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .events-carousel .event-image img {
        border-radius: 20px !important;
    }

    .events-grid {
        grid-template-columns: 1fr !important;
    }
    
    .footer-section {
        display: flex; /* Change to flex for mobile stacking */
        flex-direction: column;
        height: auto;
        gap: var(--spacing-md);
    }
    
    .footer-section-content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .footer-about {
        order: 1;
    }
    
    .footer-techcare {
        order: 2;
        height: auto;
        max-height: none; /* Remove max-height restriction so outreach link is visible */
        overflow: visible; /* Ensure outreach link is visible */
    }
    
    .footer-copy {
        order: 3; /* Copyright at the bottom */
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Mobile Landscape & Small Tablet: 600px - 768px */
@media (max-width: 768px) {
    .site-header {
        height: auto;
        min-height: 60px;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .header-container {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .search-form {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin: var(--spacing-sm) 0 0 0;
    }
    
    .search-input {
        font-size: 13px;
    }
    
    .main-container {
        padding-top: 80px;
        padding-bottom: 24px;
        gap: var(--spacing-sm);
    }
    
    .main-nav {
        display: none;
        order: 4;
    }
    
    .mobile-menu-toggle {
        display: flex;
        order: 2;
    }
    
    .main-nav.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(15, 17, 18, 0.98);
        padding: var(--spacing-lg);
        gap: var(--spacing-xs);
        z-index: 999;
    }
    
    .hero-banner {
        padding: 0;
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
        min-height: unset;
    }
    
    .hero-banner-image {
        border-radius: 20px;
        aspect-ratio: 4 / 3;
    }
    
    .badge-icon {
        font-size: clamp(20px, 5vw, 36px);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .hero-tagline {
        font-size: clamp(8px, 2vw, 12px);
    }
    
    .hero-meta {
        font-size: clamp(7px, 1.8vw, 10px);
    }
    
    .announcements-panel {
        min-height: 250px;
        width: 100%;
        max-width: 100%;
        height: 420px;
        max-height: 420px;
        padding: var(--spacing-md);
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        background: var(--color-card-bg);
        overflow: visible;
    }

    .panel-title {
        font-size: clamp(12px, 3vw, 16px);
        text-align: left;
    }

    .scroll-wrapper {
        padding-bottom: 4px;
    }

    .announcement-card {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-xs);
    }

    .announcement-image {
        aspect-ratio: 3 / 4;
    }

    .announcement-title {
        font-size: clamp(11px, 2.5vw, 12px);
    }

    .announcement-desc {
        font-size: clamp(10px, 2vw, 11px);
    }

    .btn-read-more {
        font-size: clamp(9px, 2vw, 10px);
    }
    
    .card-title {
        font-size: clamp(12px, 3vw, 14px);
        text-align: center;
    }
    
    .folder-title {
        font-size: clamp(7px, 1.8vw, 9.8px);
    }
    
    .folder-number {
        font-size: clamp(20px, 5vw, 28px);
    }
    
    .carousel-track {
        height: auto;
        min-height: 200px;
    }
    
    .intro-text {
        font-size: 2.5rem;
        padding: 0 20px;
    }
    
    .container {
        padding: 1.2rem 0.75rem;
        padding-top: 70px;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .page-subtitle {
        font-size: 0.85rem;
    }
    
    .events-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 0.6rem;
    }
    
    .filter-group {
        flex-wrap: wrap;
    }
    
    .modal-content {
        margin: 0.75rem;
    }
    
    .modal-image {
        aspect-ratio: 3 / 4;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-title {
        font-size: 1.2rem;
    }
    
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        min-width: 100%;
    }
    
    .folders-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .document-item {
        grid-template-columns: 35px 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem 0.75rem;
        padding: 0.75rem;
        align-items: start;
    }
    
    .doc-icon {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: start;
    }
    
    .doc-info {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .doc-title {
        text-align: left;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
    }
    
    .doc-description {
        text-align: left;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
    }
    
    /* Meta row container for size and actions */
    .doc-meta-row {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 0.25rem;
    }
    
    .doc-size-display {
        font-size: 0.75rem;
        color: var(--color-white);
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .doc-actions {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        margin-left: auto;
    }
    
    .doc-preview-btn,
    .doc-download-btn {
        flex: 1 1 0;
        min-width: 80px;
        max-width: 120px;
        font-size: 0.7rem;
        padding: 0.4rem 0.65rem;
        white-space: nowrap;
        text-align: center;
        width: 100%;
    }
    
    .documents-grid-view {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Mobile Portrait: Up to 600px - MAIN HOME PAGE STYLES */
@media (max-width: 600px) {
    :root {
        --spacing-xs: 6px;
        --spacing-sm: 10px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 20px;
    }
    
    /* CRITICAL: Force all homepage grids to single column */
    /* BUT: Keep 2x2 grid for carousel slides (origin and documents) */
    .hero-section,
    .cards-grid,
    .events-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
        width: 100% !important;
    }
    
    /* Origin and Documents carousels maintain 2x2 grid structure */
    .origin-grid,
    .documents-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        gap: var(--spacing-md) !important;
        width: 100% !important;
        align-items: start !important;
        justify-items: start !important;
    }
    
    /* Origin and Documents carousel mobile fixes */
    .origin-carousel,
    .origin-track,
    .origin-slide {
        height: 100%;
    }
    
    .origin-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .origin-grid {
        height: 100%;
        grid-template-rows: repeat(2, 1fr) !important;
        grid-template-columns: repeat(2, 1fr) !important;
        align-items: start !important;
        justify-items: start !important;
    }
    
    .logo-item {
        aspect-ratio: 3 / 1;
        height: 100%;
        min-height: 100px;
    }
    
    .documents-carousel,
    .documents-track,
    .document-slide {
        height: 100%;
    }
    
    .document-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .documents-grid {
        height: 100%;
        grid-template-rows: repeat(2, 1fr) !important;
        grid-template-columns: repeat(2, 1fr) !important;
        align-items: start !important;
        justify-items: start !important;
    }
    
    .folder-item {
        height: auto;
        min-height: 100px;
        display: flex;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    /* Ensure all card types stack */
    .card,
    .card.origin-card,
    .card.documents-card,
    .card.events-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Hero banner and announcements full width */
    .hero-banner,
    .announcements-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix document item layout on small mobile */
    .document-item {
        grid-template-columns: 30px 1fr;
        grid-template-rows: auto auto;
        gap: 0.4rem 0.5rem;
        padding: 0.75rem 0.5rem;
    }
    
    .doc-meta-row {
        gap: 0.4rem;
    }
    
    .doc-size-display {
        font-size: 0.65rem;
    }
    
    .doc-actions {
        gap: 0.35rem;
    }
    
    .doc-preview-btn,
    .doc-download-btn {
        flex: 1 1 0;
        min-width: 70px;
        max-width: 100px;
        font-size: 0.65rem;
        padding: 0.35rem 0.55rem;
        text-align: center;
    }
    
    .site-header {
        padding: 8px var(--spacing-md);
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        display: flex;
        align-items: center;
    }
    
    .header-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    
    .brand {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        height: 100%;
        gap: 0;
    }
    
    .page-indicator {
        font-size: 10px;
        padding-right: var(--spacing-xs);
        border-right: none;
    }
    
    .header-left {
        gap: var(--spacing-xs);
    }
    
    .main-container {
        padding: var(--spacing-xs);
        padding-top: 70px;
    }
    
    .logo-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    .logo-text {
        font-size: 16px;
        letter-spacing: 1px;
        left: -8px;
        line-height: 1.2;
    }
    
    /* HERO SECTION - HOME PAGE */
    .hero-section {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        min-height: auto;
        overflow: visible;
        align-items: start;
    }

    .hero-banner {
        padding: 0;
        border-radius: 18px;
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
        min-height: unset;
    }
    
    .hero-banner-image {
        border-radius: 18px;
        aspect-ratio: 4 / 3;
    }

    /* ANNOUNCEMENTS PANEL - HOME PAGE */
    .announcements-panel {
        width: 100%;
        aspect-ratio: 2 / 3;
        padding: var(--spacing-md);
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        background: var(--color-card-bg);
        overflow: visible !important;
    }

    .announcements-panel .panel-title {
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 6px;
        flex-shrink: 0;
        text-align: center;
    }

    .announcements-panel .scroll-wrapper {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 4px;
    }

    .announcements-panel .announcement-card {
        background: #11161b;
        border-radius: var(--radius-md);
        padding: 6px;
        margin-bottom: 4px;
        position: relative;
        cursor: pointer;
        transition: background 0.2s;
    }

    .announcements-panel .announcement-image {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        display: block;
    }

    .announcements-panel .announcement-title {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .announcements-panel .announcement-date {
        font-size: 8px;
        color: #8b929a;
        margin-bottom: 4px;
    }

    .announcements-panel .card-divider {
        height: 1px;
        background-color: #2c333a;
        margin-bottom: 4px;
    }

    .announcements-panel .announcement-desc {
        font-size: 8px;
        line-height: 1.5;
        color: #c5c7ca;
        margin-bottom: 4px;
    }

    .announcements-panel .btn-read-more {
        background: #d9d9d9;
        color: #11161b;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 8px;
        font-weight: 700;
        float: right;
    }
    
    /* CARDS GRID */
    .cards-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .card {
        width: 100%;
        max-width: 100%;
        border-radius: 30px;
        padding: var(--spacing-md);
        height: 420px;
        min-height: 420px;
    }
    
    /* Ensure mobile buttons are visible and properly aligned */
    .header-container > div[style*="order: 999"] {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-left: auto;
    }
    
    .hero-banner {
        padding: 0;
        height: auto;
        max-height: none;
        flex-direction: column;
        aspect-ratio: 4 / 3;
        min-height: unset;
    }
    
    .hero-banner-image {
        border-radius: 16px;
        aspect-ratio: 4 / 3;
    }
    
    .banner-content-wrapper {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .banner-left {
        align-items: center;
        text-align: center;
    }
    
    .icdisg-title {
        font-size: clamp(24px, 6vw, 36px);
    }
    
    .icdisg-logo-circle {
        width: 80px;
        height: 80px;
    }
    
    .icdisg-full-name {
        font-size: clamp(8px, 2vw, 10px);
        max-width: 150px;
    }
    
    .badge-icon {
        font-size: clamp(18px, 4.5vw, 28px);
        letter-spacing: 2px;
    }
    
    .hero-tagline {
        font-size: clamp(7px, 1.8vw, 10px);
    }
    
    .announcement-title {
        font-size: clamp(8px, 2vw, 10px);
    }
    
    .announcement-desc {
        font-size: clamp(7px, 1.8vw, 9px);
    }
    
    .origin-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs);
    }
    
    .documents-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .logo-badge {
        font-size: clamp(20px, 5vw, 32px);
    }
    
    .card {
        padding: var(--spacing-sm);
    }
    
    .footer-description {
        font-size: clamp(8px, 2vw, 10px);
    }
    
    .footer-brand {
        margin-bottom: 6px;
    }
    
    .social-icon {
        font-size: 14px;
    }
    
    .techcare-title {
        font-size: clamp(12px, 3.5vw, 16px);
    }
    
    .techcare-links a {
        font-size: clamp(8px, 2vw, 10px);
    }
    
    .intro-text {
        font-size: 1.8rem;
    }

    /* Mobile Carousel Specific Styles */
    .card-title {
        font-size: clamp(12px, 3vw, 14px);
        text-align: center;
    }

    .origin-carousel,
    .documents-carousel,
    .events-carousel {
        width: 100%;
    }

    .carousel-dots {
        gap: 6px;
        margin-top: 12px;
    }

    .dot {
        width: 8px;
        height: 8px;
    }

    .dot.active {
        width: 20px;
    }

    .origin-grid,
    .documents-grid {
        gap: 15px 12px;
        padding: var(--spacing-sm);
    }

    .folder-item {
        min-height: 80px;
    }

    .logo-item {
        aspect-ratio: 3 / 1;
        min-height: 80px;
    }

    .logo-badge {
        padding: 6px;
    }

    .announcement-card {
        padding: var(--spacing-sm);
    }

    .scroll-wrapper {
        max-height: 200px;
    }
    
    .badge-icon {
        font-size: 16px;
        padding: var(--spacing-xs) var(--spacing-sm);
        letter-spacing: 1px;
    }
    
    .hero-tagline p {
        font-size: 7px;
    }
    
    .folder-title {
        font-size: 7px;
    }
    
    .folder-number {
        font-size: 18px;
    }
    
    .folder-docs {
        font-size: 7px;
    }
}

/* ============================================
   13. ORIGIN / BATCH PAGE STYLES
   ============================================ */

.origin-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    padding-top: 90px;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    min-height: calc(100vh - 60px);
}

/* Layout: main content grows, sidebar fixed width to avoid wrapping */
.origin-main-content {
    flex: 1 1 auto;
    min-width: 0; /* allow flex children to shrink properly */
}

.origin-sidebar {
    width: 371px;
    flex: 0 0 371px;
}

.origin-main-content {
    min-width: 0;
}

.origin-content-panel {
    background: var(--color-card-bg);
    border-radius: 30px;
    padding: var(--spacing-xl);
    min-height: 500px;
    position: relative;
}

/* Ensure images inside origin/main content do not force layout expansion */
.origin-content-panel img,
.batches-inner-panel img,
.origin-inner-panel img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure images inside institute content do not force layout expansion */
.institute-content-panel img,
.institute-inner-panel img {
    max-width: 100%;
    height: auto;
    display: block;
}

.origin-page-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Inner white panel to mirror Figma origin layout */
.origin-inner-panel {
    background: #F1F1F1;
    border-radius: 30px; /* Smooth rounded corners on all sides */
    padding: 32px 40px 40px 40px;
}

/* Organization detail variant reuses origin layout */
.org-inner-panel {
    padding-top: 32px;
}

.org-section-about .origin-text {
    color: #0F181D;
}

.org-section-mission-vision .origin-text {
    color: #000000;
}

.org-section-core-values .origin-section-title,
.org-section-logo .origin-section-title {
    margin-bottom: 16px;
    color: #000000;
}

.org-core-values-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.org-core-item {
    display: grid;
    grid-template-columns: 63px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* 1:1 icon – dark grey square, white icon/letter */
.org-core-icon {
    width: 63px;
    height: 63px;
    min-width: 63px;
    min-height: 63px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: #0F181D;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.org-core-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.org-core-icon-letter {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
}

.org-core-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    align-items: flex-start;
}

.org-core-title {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    color: #000000;
}

.org-core-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    text-align: justify !important;
    text-transform: none;
    color: #000000;
    width: 100%;
}

/* Mobile: tighten core values layout and align icon/text more professionally */
@media (max-width: 768px) {
    .org-core-values-list {
        gap: 16px;
    }

    .org-core-item {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        align-items: flex-start;
    }

    .org-core-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
    }

    .org-core-title {
        font-size: 15px;
    }

    .org-core-text {
        font-size: 12px;
    }
}

/* Logo section: text next to logo – black, paragraph style (match reference) */
.org-section-logo .origin-logo-text {
    font-size: 12px;
    line-height: 1.6;
    color: #000000;
    text-align: justify;
}

.org-section-logo .origin-logo-text p {
    margin: 0 0 0.75em 0;
}

.org-section-logo .origin-logo-text p:last-child {
    margin-bottom: 0;
}

/* ============================================
   BATCHES PAGE (ORIGIN: ICDISG - BATCH)
   ============================================ */
.batches-inner-panel {
    background: #F1F1F1;
    border-radius: 30px;
    padding: 32px 40px 40px 40px;
}

@media (max-width: 768px) {
    .batches-inner-panel {
        padding: 20px 16px 24px !important;
        border-radius: 20px;
    }
    
    .institute-inner-panel {
        padding: 20px 16px 24px !important;
        border-radius: 20px;
    }
}

.batches-grid-header {
    margin-bottom: 24px;
}

.batches-grid-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
}

@media (max-width: 768px) {
    .batches-grid-cards {
        grid-template-columns: 1fr;
        gap: 20px;
        justify-items: center;
    }
    
    .batch-grid-card-inner {
        width: 100%;
        max-width: 280px;
        height: auto;
        min-height: 320px;
        padding: 16px 12px 20px;
    }
    
    .batch-grid-image-frame {
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }
    
    .batch-grid-year {
        font-size: 14px;
        margin-top: 12px;
    }
    
    .batch-grid-view-btn {
        width: 120px;
        height: 28px;
        font-size: 16px;
        margin-top: 12px;
    }
    
    .batches-grid-header {
        margin-bottom: 20px;
    }
    
    .origin-page-title {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    
    .batch-detail-inner-panel {
        padding: 20px 16px 24px !important;
        min-height: auto !important;
    }
    
}

.batch-grid-card {
    display: flex;
    justify-content: center;
    align-items: center;
}

.batch-grid-card-link {
    text-decoration: none;
    color: inherit;
}

.batch-grid-card-inner {
    box-sizing: border-box;
    width: 239.86px;
    height: 288px;
    background: #F1F1F1;
    border: 1px solid #000000;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 18px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.batch-grid-card-inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.batch-grid-image-frame {
    width: 175.23px;
    height: 175.23px;
    border-radius: 15px;
    overflow: hidden;
    background: #D9D9D9;
}

.batch-grid-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.batch-placeholder {
    width: 100%;
    height: 100%;
    background: #D9D9D9;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.batch-logo-placeholder {
    font-size: 48px;
}

.batch-grid-year {
    margin-top: 18px;
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-transform: capitalize;
    color: #0F181D;
    text-align: center;
}

.batch-grid-view-btn {
    margin-top: 16px;
    width: 143.43px;
    height: 32.82px;
    border-radius: 5px;
    background: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    text-transform: capitalize;
    color: #0F181D;
}

/* Batch Detail Layout (Advisers, Officers, Associates) */
.batch-detail-inner-panel {
    border-radius: 30px;
}

@media (max-width: 640px) {
    .batch-section-heading {
        font-size: 20px !important;
        line-height: 28px !important;
        margin-bottom: 20px !important;
    }
    
    .batch-detail-section {
        margin-bottom: 32px !important;
        padding: 0 !important;
    }
    
    .advisers-section {
        margin-bottom: 24px !important;
    }
    
    /* Responsive grid for member cards on mobile */
    .grid.grid-cols-1,
    .grid.sm\:grid-cols-2,
    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
        width: 100%;
        max-width: 100%;
    }
    
    /* Ensure member card max-widths don't break responsive */
    .grid > div {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Ensure text within member cards is readable */
    .text-center {
        text-align: center;
        width: 100%;
    }
}

.batch-detail-hero {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.batch-detail-section {
    margin-bottom: 60px;
}

.batch-section-heading {
    font-family: 'Sora', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    text-transform: capitalize;
    color: #0F181D;
    margin-bottom: 24px;
}

.batch-section-empty {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    text-align: center;
    color: #0F181D;
}

/* Program Card Static Styles with Hover Tooltip */
.program-card-static {
    cursor: default;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.program-card-static:hover {
    transform: translateY(-5px);
}

.program-hover-tooltip {
    pointer-events: auto;
}

.program-hover-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
    margin-bottom: 10px;
}

.program-card-static:hover .program-hover-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tooltip-content {
    background: rgba(15, 24, 29, 0.95);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
}

.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(15, 24, 29, 0.95);
}

.tooltip-content strong {
    font-weight: 700;
    color: #ffffff;
}

.batch-members-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.batch-member-card {
    width: 205px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.batch-member-avatar {
    width: 196px;
    height: 182px;
    border-radius: 30px;
    background: #D9D9D9;
    overflow: hidden;
    margin-bottom: 8px;
}

.batch-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.batch-member-name {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    text-transform: capitalize;
    color: #0F181D;
}

.batch-member-position {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    text-transform: capitalize;
    color: #0F181D;
}

.origin-hero {
    width: 100%;
    max-width: 700px;
    margin: 0 auto 32px auto;
}

/* Organization page: banner above About – landscape only (different from logo) */
.origin-hero-banner {
    max-width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 180px;
    margin-bottom: 32px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-card-dark);
}

.origin-hero-banner .org-banner-link {
    display: block;
    width: 100%;
    height: 100%;
}

.origin-hero-banner .origin-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
    display: block;
}

.origin-hero-image {
    width: 100%;
    height: auto;
    border-radius: 30px;
    display: block;
}

.origin-section {
    margin-bottom: 32px;
}

.origin-section-title {
    font-family: 'Sora', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #0F181D;
    margin-bottom: 12px;
    text-transform: capitalize;
}

.origin-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: justify;
    color: #000000;
}

/* Mobile: make organization banner fully fluid and avoid over-constraining height */
@media (max-width: 768px) {
    .origin-hero-banner {
        width: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
    }

    .origin-hero-banner .origin-hero-image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

.origin-divider {
    width: 100%;
    margin: 0 0 32px 0;
    border-top: 0.5px solid #000000;
}

/* Mission & Vision: two equal columns, full-width text */
.origin-section-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
    align-items: start;
}

.origin-split-column {
    min-width: 0;
}

.origin-split-column .origin-section-title {
    margin-bottom: 12px;
}

.origin-split-column .origin-text {
    max-width: none;
    width: 100%;
    min-width: 0;
}

.origin-section-logo {
    margin-top: 16px;
}

/* Logo section: logo left, text right – aligned to start */
.origin-logo-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Desktop: Logo on left, text on right */
@media (min-width: 768px) {
    .origin-logo-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
    }
}

.origin-logo-block {
    min-width: 0;
}

.origin-logo-frame {
    box-sizing: border-box;
    width: 191px;
    height: 191px;
    background: #F1F1F1;
    border: 0.5px solid #000000;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.origin-logo-image {
    width: 171px;
    height: 171px;
    object-fit: contain;
}

/* Text below logo: centered and justified */
.origin-logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    text-align: justify;
    text-transform: none;
    color: #000000;
    color: #0F181D;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

/* Desktop: Text aligned left, flex grow to fill space */
@media (min-width: 768px) {
    .origin-logo-text {
        text-align: justify;
        flex: 1;
        width: auto;
    }
    
    .origin-logo-frame {
        flex-shrink: 0;
    }
}

.origin-logo-text p {
    margin: 0 0 0.75em 0;
}

.origin-logo-text p:last-child {
    margin-bottom: 0;
}

.batch-view-btn {
    background: var(--color-card-bg);
    color: var(--color-text-dark);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
}

.batch-view-btn:hover {
    background: var(--color-text-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}

.no-batches {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-muted);
}

/* Sidebar Styles */
.origin-sidebar,
.institute-sidebar {
    min-width: 0;
}

/* Hide sidebar on mobile, show on desktop */
@media (max-width: 1023px) {
    .institute-sidebar,
    .origin-sidebar {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .institute-sidebar,
    .origin-sidebar {
        display: block !important;
    }
}

.sidebar-panel {
    background: var(--color-card-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    position: sticky;
    top: 90px;
}

.sidebar-section {
    margin-bottom: var(--spacing-xl);
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.5px;
}

.sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-links li {
    margin-bottom: 0;
    position: relative;
}

.sidebar-links a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    display: block;
    padding: 8px 0;
    margin-bottom: 4px;
    transition: all 0.3s ease;
    text-align: left;
}

.sidebar-links a:hover {
    color: var(--color-white);
    font-weight: 500;
    transform: translateX(8px);
}

.sidebar-links a.active {
    color: var(--color-white);
    font-weight: 600;
    position: relative;
}

/* Faculty Unit label - not a link, hover shows subcategories */
.sidebar-links .sidebar-label {
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    margin-bottom: 4px;
    cursor: default;
    text-align: left;
    position: relative;
}

/* Mobile: Make labels clickable with indicator */
@media (max-width: 1023px) {
    .sidebar-links .sidebar-label {
        cursor: pointer !important;
        user-select: none !important;
        padding: 8px 8px !important;
        margin: 0 -8px 4px -8px !important;
        border-radius: 4px;
        transition: background 0.2s ease;
    }
    
    .sidebar-links .sidebar-label:active {
        background: rgba(255, 255, 255, 0.08);
    }
    
    /* Add chevron indicator to batch/faculty items - VISIBLE! */
    .org-item-with-batch .sidebar-label::before,
    .faculty-item-with-unit .sidebar-label::before {
        content: '›';
        font-size: 22px;
        font-weight: bold;
        margin-right: 8px;
        transition: transform 0.3s ease;
        display: inline-block;
        flex-shrink: 0;
        color: var(--color-white);
    }
    
    /* Rotate chevron when menu is open */
    .org-item-with-batch.active .sidebar-label::before,
    .faculty-item-with-unit.active .sidebar-label::before {
        transform: rotate(90deg);
    }
}

.org-item-with-batch:hover .sidebar-label {
    color: var(--color-text-primary);
}

/* Sidebar sublinks (for subcategories like BATCH) */
.sidebar-sublinks {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 0.25rem;
    padding-left: 0;
    position: relative;
}

.sidebar-sublinks li {
    margin-bottom: 0;
}

.sidebar-sublink {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    display: block;
    padding: 8px 0;
    margin-bottom: 4px;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
    text-transform: uppercase;
}

.sublink-arrow {
    display: none;
}

.sidebar-sublink:hover {
    color: var(--color-white);
    font-weight: 400;
    transform: translateX(8px);
}

.sidebar-sublink.active {
    color: var(--color-white);
    font-weight: 400;
}

/* BATCH Hover Menu - Show below organization on hover */
.org-item-with-batch {
    position: relative;
}

.batch-hover-menu {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 0;
    padding-left: 1rem;
}

.org-item-with-batch:hover .batch-hover-menu {
    opacity: 1;
    visibility: visible;
    max-height: 200px;
    overflow: visible;
    margin-top: 0.25rem;
}

/* Mobile: Show on .active class with click */
@media (max-width: 1023px) {
    .org-item-with-batch:hover .batch-hover-menu {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
    }
    
    .org-item-with-batch.active .batch-hover-menu {
        opacity: 1;
        visibility: visible;
        max-height: none;
        overflow: visible;
        margin-top: 0.25rem;
    }
    
    .org-item-with-batch .batch-hover-menu.expanded {
        opacity: 1;
        visibility: visible;
        max-height: none;
        overflow: visible;
        margin-top: 0.25rem;
    }
}

/* Faculty Unit Hover Menu - Show below faculty member on hover */
.faculty-item-with-unit {
    position: relative;
}

.faculty-unit-hover-menu {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 0;
    padding-left: 1rem;
    text-align: center;
}

.faculty-item-with-unit:hover .faculty-unit-hover-menu {
    opacity: 1;
    visibility: visible;
    max-height: 200px;
    overflow: visible;
    margin-top: 0.25rem;
}

/* Mobile: Show on .active class with click */
@media (max-width: 1023px) {
    .faculty-item-with-unit:hover .faculty-unit-hover-menu {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
    }
    
    .faculty-item-with-unit.active .faculty-unit-hover-menu {
        opacity: 1;
        visibility: visible;
        max-height: none;
        overflow: visible;
        margin-top: 0.25rem;
    }
    
    .faculty-item-with-unit .faculty-unit-hover-menu.expanded {
        opacity: 1;
        visibility: visible;
        max-height: none;
        overflow: visible;
        margin-top: 0.25rem;
    }
}

.faculty-unit-hover-menu .sidebar-sublink {
    display: block;
    color: #0F181D;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.35rem 0.5rem;
    transition: color 0.2s ease;
    line-height: 1.5;
}

.faculty-unit-hover-menu .sidebar-sublink:hover {
    color: #4F46E5;
}

/* Admin Panel - Faculty Unit and Program Category Groups */
.faculty-unit-group,
.program-category-group {
    position: relative;
}

.faculty-unit-header,
.program-category-header {
    transition: all 0.3s ease;
}

.faculty-unit-header:hover,
.program-category-header:hover {
    background-color: #f9fafb;
}

.faculty-unit-members,
.program-category-items {
    transition: all 0.3s ease;
}

.faculty-unit-members.hidden,
.program-category-items.hidden {
    display: none;
}

.faculty-unit-header svg,
.program-category-header svg {
    transition: transform 0.3s ease;
}

.institute-sidebar-calendar-btn {
    display: block;
    margin-top: var(--spacing-md);
    padding: 10px 16px;
    background: var(--color-card-bg);
    color: var(--color-text-primary);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.institute-sidebar-calendar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ============================================
   14. INSTITUTE PAGE STYLES
   ============================================ */

.institute-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    padding-top: 90px;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    min-height: calc(100vh - 60px);
}

.institute-main-content {
    flex: 1 1 auto;
    min-width: 0;
}

.institute-sidebar {
    width: 371px;
    flex: 0 0 371px;
}

/* Desktop (1025px+) - grid centering for member cards */
@media (min-width: 1025px) {
    .institute-inner-panel .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-lg);
        width: 100%;
        margin: 0 auto;
    }
    
    .institute-inner-panel .grid > div {
        flex: 0 1 auto;
    }
}

/* Tablet (769px-1024px) - responsive grids */
@media (min-width: 769px) and (max-width: 1024px) {
    .institute-inner-panel {
        padding: var(--spacing-lg) !important;
    }
    
    .institute-inner-panel .grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: var(--spacing-md) !important;
        width: 100%;
        margin: 0 auto;
    }
}

/* Mobile (0-768px) - full width responsive */
@media (max-width: 768px) {
    .institute-inner-panel {
        padding: var(--spacing-md) !important;
    }
    
    .institute-inner-panel .grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .institute-inner-panel .grid > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Ensure image containers scale properly */
    .institute-inner-panel .aspect-\[196\/182\],
    .institute-inner-panel [class*="aspect-"] {
        width: 100%;
        max-width: 196px;
        margin: 0 auto;
    }
}

.institute-main-content {
    min-width: 0;
}

.institute-content-panel {
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    min-height: 500px;
    width: 100%;
    margin: 0 auto;
}

.institute-inner-panel {
    background: #F1F1F1;
    border-radius: 30px;
    padding: 32px 40px 40px 40px;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
}

/* Center content within inner panels */
.institute-inner-panel > * {
    margin-left: auto;
    margin-right: auto;
}

/* Ensure text content doesn't overflow */
.institute-inner-panel .text-center,
.institute-inner-panel .batch-section-heading {
    width: 100%;
}

/* Increase gap between member cards in grids */
.institute-inner-panel .grid {
    gap: var(--spacing-xl) !important;
}

/* Responsive gap adjustments */
@media (min-width: 1024px) {
    .institute-inner-panel .grid {
        gap: calc(var(--spacing-xl) * 1.5) !important;
    }
}

@media (max-width: 768px) {
    .institute-inner-panel .grid {
        gap: var(--spacing-lg) !important;
    }
}

.institute-hero-banner {
    width: 100%;
    /* Match organization banner: wide landscape, responsive */
    max-width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 180px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
}

.institute-hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile: relax banner constraints so institute banner scales nicely */
@media (max-width: 768px) {
    .institute-hero-banner {
        width: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
    }

    .institute-hero-banner img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

.institute-section {
    margin-bottom: var(--spacing-xl);
}

.institute-section:last-child {
    margin-bottom: 0;
}

.section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
}

.section-content {
    color: var(--color-text-dark);
    line-height: 1.8;
    font-size: 14px;
    text-align: justify;
    text-justify: inter-word;
}

/* Institute About: numbered list formatting (matches "1. 2. 3." style) */
.institute-about-intro {
    margin-bottom: 14px;
}

.institute-numbered-list {
    margin: 10px 0 0 0;
    padding-left: 22px;
    list-style: decimal;
    color: var(--color-text-dark);
}

.institute-numbered-list li {
    margin: 10px 0;
    padding-left: 6px;
}

.institute-subsection {
    margin-top: var(--spacing-lg);
}

.institute-subsection .subsection-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}

.logo-section-content {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.logo-badge-display {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    background: var(--color-card-dark);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.logo-display-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-description {
    flex: 1;
    color: var(--color-text-dark);
    line-height: 1.8;
    font-size: 14px;
}

.institute-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.institute-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-card-dark);
    border-radius: var(--radius-md);
}

.institute-item-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.institute-item-content {
    flex: 1;
    color: var(--color-text-primary);
}

.institute-item-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.institute-item-content p {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.institute-item-details {
    color: var(--color-text-muted);
    line-height: 1.6;
    font-size: 14px;
}

/* Institute Calendar – real month grid + reminders (Google Calendar style) */
/* Standalone calendar page (header link) – space below fixed header */
body.calendar-page .calendar-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
    padding-top: 90px;
    min-height: 100vh;
}

.institute-calendar-section .institute-calendar-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    position: relative;
    z-index: 30;
}
.calendar-year-month-picker,
.calendar-picker-form {
    position: relative;
    z-index: 31;
}
.institute-calendar-section .section-title {
    margin-bottom: 0;
}
.calendar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
}
.calendar-year-month-picker {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.calendar-year-month-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.calendar-picker-form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}
.calendar-select {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-width: 0;
}
.calendar-select:focus {
    outline: 2px solid var(--color-accent, #909398);
    outline-offset: 2px;
}
.calendar-go-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.calendar-go-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.calendar-month-title-large {
    font-size: 1.5rem;
    font-weight: 700;
    min-width: 180px;
    text-align: center;
}
.calendar-year-num {
    font-weight: 800;
    color: var(--color-accent, #909398);
}
.calendar-month-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.calendar-month-title {
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 160px;
    text-align: center;
}
.calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
    transition: background 0.2s ease;
}
.calendar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.institute-calendar-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-xl);
    align-items: start;
}
.calendar-grid-wrap {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: var(--spacing-md);
    overflow: hidden;
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
}
.calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.calendar-day {
    min-height: 90px;
    min-width: 0;
    padding: 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.calendar-day-empty {
    min-height: 60px;
    background: transparent;
}
.calendar-day-today {
    background: rgba(144, 147, 152, 0.35);
    outline: 2px solid var(--color-accent, #909398);
}
.calendar-day-num {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.calendar-day-event-dot {
    display: block;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-accent, #909398);
    color: #0F181D;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
    transition: opacity 0.2s ease;
}
.calendar-day-event-dot:hover {
    opacity: 0.9;
}
.calendar-day-event-dot .calendar-event-type,
.calendar-day-event-dot .calendar-event-text {
    font-weight: 600;
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* What happens this day: Enrollment, School Break, School End, etc. */
.calendar-day-event-dot.schedule-type-enrollment { background: #3b82f6; color: #fff; }
.calendar-day-event-dot.schedule-type-school_break { background: #f59e0b; color: #0F181D; }
.calendar-day-event-dot.schedule-type-school_end { background: #dc2626; color: #fff; }
.calendar-day-event-dot.schedule-type-start_of_classes { background: #059669; color: #fff; }
.calendar-day-event-dot.schedule-type-exam_period { background: #7c3aed; color: #fff; }
.calendar-day-event-dot.schedule-type-meeting { background: #ef4444; color: #fff; font-weight: 700; }
.calendar-day-event-dot.schedule-type-announcement { background: #8b5cf6; color: #fff; }
.calendar-day-event-dot.schedule-type-event { background: var(--color-accent, #909398); color: #0F181D; }

.calendar-day-more {
    font-size: 10px;
    color: var(--color-text-muted);
    padding: 0 4px;
}
.calendar-day-has-events .calendar-day-num {
    color: var(--color-accent, #909398);
}

/* PH & Dasma holiday on calendar day */
.calendar-day-holiday-dot {
    display: block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #b91c1c;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}
.calendar-day-has-holidays {
    cursor: pointer;
}

/* Reminders & Upcoming panel */
.calendar-reminders {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: var(--spacing-lg);
    position: sticky;
    top: 100px;
}
.calendar-reminders-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-text-primary);
}
.calendar-reminders-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}
.calendar-reminders-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.calendar-reminders-subtitle {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0 0 4px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.calendar-reminder-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.calendar-reminder-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
.calendar-reminder-item.reminder-today {
    border-left-color: var(--color-accent, #909398);
    background: rgba(144, 147, 152, 0.15);
}
.calendar-reminder-item .reminder-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent, #909398);
}
.calendar-reminder-item .reminder-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.calendar-reminder-item .reminder-location {
    font-size: 12px;
    color: var(--color-text-muted);
}
.reminder-schedule-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 2px;
    width: fit-content;
}
.calendar-reminder-item.reminder-schedule-enrollment .reminder-schedule-badge { background: #3b82f6; color: #fff; }
.calendar-reminder-item.reminder-schedule-school_break .reminder-schedule-badge { background: #f59e0b; color: #0F181D; }
.calendar-reminder-item.reminder-schedule-school_end .reminder-schedule-badge { background: #dc2626; color: #fff; }
.calendar-reminder-item.reminder-schedule-start_of_classes .reminder-schedule-badge { background: #059669; color: #fff; }
.calendar-reminder-item.reminder-schedule-exam_period .reminder-schedule-badge { background: #7c3aed; color: #fff; }
.calendar-reminder-item.reminder-schedule-meeting .reminder-schedule-badge { background: #9ca3af; color: #fff; font-weight: 700; }
.calendar-reminder-item.reminder-schedule-announcement .reminder-schedule-badge { background: #8b5cf6; color: #fff; }
.calendar-reminder-item.reminder-schedule-event .reminder-schedule-badge { background: var(--color-accent, #909398); color: #0F181D; }

.calendar-reminder-item.calendar-reminder-holiday {
    cursor: default;
    border-left-color: #10b981;
}
.calendar-reminder-item.calendar-reminder-holiday .reminder-schedule-badge { background: #10b981; color: #fff; }
.calendar-reminder-item.calendar-reminder-announcement {
    border-left-color: #8b5cf6;
}
.calendar-reminder-item.calendar-reminder-announcement .reminder-schedule-badge { background: #8b5cf6; color: #fff; }

.calendar-no-events {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

/* Day detail modal: click date to see image & description (e.g. exam date) */
.calendar-day-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s ease, opacity 0.2s ease;
}
.calendar-day-modal.calendar-day-modal-open {
    visibility: visible;
    opacity: 1;
}
.calendar-day-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.calendar-day-modal-content {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: auto;
    background: var(--color-card-dark, #1f2937);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.calendar-day-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 24px;
    line-height: 1;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.calendar-day-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}
.calendar-day-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 36px 16px 0;
    color: var(--color-text-primary);
}
.calendar-day-modal-events {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.calendar-day-modal-empty {
    color: var(--color-text-muted);
    margin: 0;
}
.calendar-day-modal-event {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: start;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border-left: 4px solid transparent;
}
.calendar-day-modal-event.schedule-type-enrollment { border-left-color: #3b82f6; }
.calendar-day-modal-event.schedule-type-school_break { border-left-color: #f59e0b; }
.calendar-day-modal-event.schedule-type-school_end { border-left-color: #dc2626; }
.calendar-day-modal-event.schedule-type-start_of_classes { border-left-color: #059669; }
.calendar-day-modal-event.schedule-type-exam_period { border-left-color: #7c3aed; }
.calendar-day-modal-event.schedule-type-event { border-left-color: var(--color-accent, #909398); }
.calendar-day-modal-event-media {
    width: 140px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}
.calendar-day-modal-event-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.calendar-day-modal-event-body {
    min-width: 0;
}
.calendar-day-modal-event-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
}
.calendar-day-modal-event.schedule-type-enrollment .calendar-day-modal-event-badge { background: #3b82f6; color: #fff; }
.calendar-day-modal-event.schedule-type-school_break .calendar-day-modal-event-badge { background: #f59e0b; color: #0F181D; }
.calendar-day-modal-event.schedule-type-school_end .calendar-day-modal-event-badge { background: #dc2626; color: #fff; }
.calendar-day-modal-event.schedule-type-start_of_classes .calendar-day-modal-event-badge { background: #059669; color: #fff; }
.calendar-day-modal-event.schedule-type-exam_period .calendar-day-modal-event-badge { background: #7c3aed; color: #fff; }
.calendar-day-modal-event.schedule-type-event .calendar-day-modal-event-badge { background: var(--color-accent, #909398); color: #0F181D; }
.calendar-day-modal-event-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--color-text-primary);
}
.calendar-day-modal-event-date,
.calendar-day-modal-event-location {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0 0 6px 0;
}
.calendar-day-modal-event-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}
.calendar-day-modal-event-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent, #909398);
    text-decoration: none;
}
.calendar-day-modal-event-link:hover {
    text-decoration: underline;
}

/* PH & Dasma holidays in day modal */
.calendar-day-modal-holidays {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.calendar-day-modal-holiday {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border-left: 4px solid transparent;
}
.calendar-day-modal-holiday.holiday-regular { border-left-color: #b91c1c; background: rgba(185, 28, 28, 0.15); }
.calendar-day-modal-holiday.holiday-special { border-left-color: #d97706; background: rgba(217, 119, 6, 0.15); }
.calendar-day-modal-holiday.holiday-dasma { border-left-color: #059669; background: rgba(5, 150, 105, 0.15); }
.calendar-day-modal-holiday-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
.calendar-day-modal-holiday.holiday-regular .calendar-day-modal-holiday-badge { background: #b91c1c; color: #fff; }
.calendar-day-modal-holiday.holiday-special .calendar-day-modal-holiday-badge { background: #d97706; color: #0F181D; }
.calendar-day-modal-holiday.holiday-dasma .calendar-day-modal-holiday-badge { background: #059669; color: #fff; }
.calendar-day-modal-holiday-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.calendar-day-modal-holiday-daterange {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 4px 0 0 0;
}
.calendar-day-modal-holiday-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin-top: 8px;
}
.calendar-day-modal-holiday.holiday-type-enrollment { border-left-color: #3b82f6; background: rgba(59, 130, 246, 0.12); }
.calendar-day-modal-holiday.holiday-type-wellness_break { border-left-color: #10b981; background: rgba(16, 185, 129, 0.12); }
.calendar-day-modal-holiday.holiday-type-christmas_break { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.12); }
.calendar-day-modal-holiday.holiday-type-year_end { border-left-color: #7c3aed; background: rgba(124, 58, 237, 0.12); }
.calendar-day-modal-holiday.holiday-type-school_end { border-left-color: #ea580c; background: rgba(234, 88, 12, 0.12); }
.calendar-day-modal-holiday.holiday-type-enrollment .calendar-day-modal-holiday-badge { background: #3b82f6; color: #fff; }
.calendar-day-modal-holiday.holiday-type-wellness_break .calendar-day-modal-holiday-badge { background: #10b981; color: #fff; }
.calendar-day-modal-holiday.holiday-type-christmas_break .calendar-day-modal-holiday-badge { background: #dc2626; color: #fff; }
.calendar-day-modal-holiday.holiday-type-year_end .calendar-day-modal-holiday-badge { background: #7c3aed; color: #fff; }
.calendar-day-modal-holiday.holiday-type-school_end .calendar-day-modal-holiday-badge { background: #ea580c; color: #fff; }
.calendar-day-modal-holiday.holiday-type-start_of_school { border-left-color: #0d9488; background: rgba(13, 148, 136, 0.12); }
.calendar-day-modal-holiday.holiday-type-start_of_school .calendar-day-modal-holiday-badge { background: #0d9488; color: #fff; }
.calendar-day-holiday-dot.calendar-holiday-type-enrollment { background: #3b82f6; }
.calendar-day-holiday-dot.calendar-holiday-type-start_of_school { background: #0d9488; }
.calendar-day-holiday-dot.calendar-holiday-type-wellness_break { background: #10b981; }
.calendar-day-holiday-dot.calendar-holiday-type-christmas_break { background: #dc2626; }
.calendar-day-holiday-dot.calendar-holiday-type-year_end { background: #7c3aed; }
.calendar-day-holiday-dot.calendar-holiday-type-school_end { background: #ea580c; }
.calendar-day-modal-holiday.holiday-type-school { border-left-color: #0d9488; background: rgba(13, 148, 136, 0.12); }
.calendar-day-modal-holiday.holiday-type-school .calendar-day-modal-holiday-badge { background: #0d9488; color: #fff; }
.calendar-day-holiday-dot.calendar-holiday-type-school { background: #0d9488; }

@media (max-width: 500px) {
    .calendar-day-modal-event {
        grid-template-columns: 1fr;
    }
    .calendar-day-modal-event-media {
        width: 100%;
        height: 160px;
    }
    
    .announcements-panel {
        overflow: visible;
    }
}

@media (max-width: 900px) {
    .institute-calendar-layout {
        grid-template-columns: 1fr;
    }
    .calendar-reminders {
        position: static;
    }
}
@media (max-width: 900px) {
    .institute-calendar-section .institute-calendar-header {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-year-month-picker {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-picker-form {
        flex-wrap: wrap;
    }
    .calendar-month-nav {
        justify-content: center;
    }
    .calendar-month-title-large {
        min-width: auto;
    }
}
@media (max-width: 600px) {
    body.calendar-page .calendar-page-container {
        padding-top: 85px;
    }
    .calendar-page-container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    .calendar-grid-wrap {
        padding: var(--spacing-sm);
    }
    .calendar-day {
        min-height: 72px;
        padding: 4px;
        min-width: 0;
    }
    .calendar-day-num {
        font-size: 12px;
    }
    .calendar-day-event-dot {
        font-size: 9px;
        padding: 2px 4px;
    }
    .calendar-day-holiday-dot {
        font-size: 9px;
        padding: 2px 4px;
    }
    .calendar-weekdays span {
        font-size: 10px;
    }
    .calendar-days-grid {
        gap: 1px;
    }
    .calendar-select {
        font-size: 13px;
        padding: 6px 10px;
    }
    .calendar-go-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    .calendar-month-title-large {
        font-size: 1.2rem;
    }
    .calendar-reminders {
        padding: var(--spacing-md);
    }
}

/* ============================================
   15. EVENTS GALLERY PAGE STYLES (Updated)
   ============================================ */

/* ============================================
   EVENTS PAGE (Figma layout)
   ============================================ */
body.events-page {
    background: linear-gradient(144.97deg, #141517 57.43%, #6D727D 92.92%);
}

.events-page .container {
    animation: pageFadeIn 0.5s ease-out;
    max-width: 1243px;
    margin: 80px auto 60px auto;
    padding: 0;
    background: transparent;
}

.events-outer-panel {
    background: transparent;
    border-radius: 30px;
    padding: 45px 55px 55px 55px;
}

.events-inner-panel {
    background: #D9D9D9;
    border-radius: 30px;
    padding: 45px 55px 80px 55px;
}

.events-page .page-header {
    text-align: center;
    margin-bottom: 40px;
}

.events-page .page-title {
    font-family: 'Sora', sans-serif;
    font-size: 96px;
    font-weight: 600;
    line-height: 116px;
    color: #0F181D;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.events-divider {
    width: 1004px;
    max-width: 100%;
    height: 0;
    margin: 0 auto;
    border-top: 2px solid #000000;
}

.events-rows-container {
    margin-top: 0;
    position: relative;
}

.events-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 60px;
}

.events-row:last-child {
    margin-bottom: 0;
}

/* Responsive: 2 columns on tablets */
@media (max-width: 1024px) {
    .events-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: 1 column on mobile */
@media (max-width: 640px) {
    .events-row {
        grid-template-columns: 1fr;
    }
}

.event-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

.event-card {
    width: 100%;
    aspect-ratio: 3 / 4;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
}

.event-card-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.event-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

.event-card-link:hover .event-card-image {
    transform: scale(1.08);
}

.event-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 94.01px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 0px 0px 15px 15px;
    padding: 16.81px 17px 16px 16.81px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event-card-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF !important;
    text-transform: capitalize;
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card-date {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 16px;
    color: #F1F1F1;
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.event-card-location {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 16px;
    color: #F1F1F1;
    text-transform: capitalize;
    margin: 0;
}

.event-card-arrow-button {
    position: absolute;
    width: 37.97px;
    height: 38.81px;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: #D9D9D9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.event-card-arrow-button svg {
    width: 23.37px;
    height: 23.37px;
    stroke: #000000;
    stroke-width: 2;
}

.no-events {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-text-muted);
}

/* Responsive Events Page */
@media (max-width: 1200px) {
    .events-page .container {
        max-width: 95%;
        margin: 80px auto 40px auto;
    }
    
    .events-outer-panel {
        padding: 30px 40px 40px 40px;
    }
    
    .events-inner-panel {
        padding: 30px 40px 60px 40px;
    }
    
    .events-row {
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 40px;
    }
    
    .event-card {
        aspect-ratio: 3 / 4;
    }
}

@media (max-width: 768px) {
    .events-page .container {
        margin: 80px auto 30px auto;
    }
    
    .events-outer-panel {
        padding: 20px 25px 30px 25px;
    }
    
    .events-inner-panel {
        padding: 20px 25px 40px 25px;
    }
    
    .events-page .page-header {
        margin-bottom: 18px;
    }
    
    .events-page .page-title {
        font-size: 48px;
        line-height: 54px;
        letter-spacing: 0.5px;
    }
    
    .events-divider {
        width: 100%;
        max-width: 520px;
    }
    
    .events-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 30px;
        justify-items: center;
    }
    
    .event-card {
        width: 100%;
        max-width: 280px;
        aspect-ratio: auto;
        min-height: 420px;
    }
}

/* Very small mobile (single column) */
@media (max-width: 480px) {
    .events-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 24px;
    }
    
    .event-card {
        aspect-ratio: 3 / 4;
    }
}

.event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card-content {
    padding: var(--spacing-md);
    color: var(--color-text-dark);
}

.event-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: #FFFFFF !important;
}

.event-card-description {
    font-size: 12px;
    color: var(--color-text-dark);
    opacity: 0.8;
    margin-bottom: var(--spacing-sm);
}

.event-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-xs);
}

.event-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-dark);
    opacity: 0.7;
    margin-bottom: var(--spacing-sm);
}

.event-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.event-card-arrow {
    font-size: 18px;
    color: var(--color-text-dark);
    opacity: 0.6;
}

/* Responsive Styles for New Pages */
@media (max-width: 1024px) {
    .origin-page-container,
    .institute-page-container {
        display: flex !important; /* Force flex to override grid */
        flex-direction: column;
        padding: var(--spacing-md);
        padding-top: 80px;
        grid-template-columns: 1fr !important; /* Ensure single column on mobile */
        gap: var(--spacing-md);
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    .origin-main-content,
    .institute-main-content {
        width: 100%;
        flex: 1 1 auto;
        order: 1;
        min-width: 0;
    }
    
    .origin-content-panel,
    .institute-content-panel {
        width: 100%;
        padding: var(--spacing-md) !important;
        margin: 0 !important;
        border-radius: 20px !important;
        min-height: auto !important;
    }
    
    .origin-sidebar,
    .institute-sidebar {
        display: none !important; /* Hide sidebar on mobile */
    }
    
    .sidebar-panel {
        position: static;
    }
    
    .org-inner-panel,
    .institute-inner-panel,
    .batches-inner-panel,
    .batch-detail-inner-panel {
        padding: var(--spacing-md) !important;
        border-radius: 20px !important;
        background: #F1F1F1 !important;
        min-height: auto !important;
        max-height: none !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .batches-grid-cards {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }
    
    .events-grid-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .main-nav {
        display: none;
    }
    
    .search-form {
        display: none;
    }
}

@media (max-width: 600px) {
    .batches-grid {
        grid-template-columns: 1fr;
    }
    
    .events-grid-gallery {
        grid-template-columns: 1fr;
    }
    
    .logo-section-content {
        flex-direction: column;
    }
    
    .institute-item {
        flex-direction: column;
    }
    
    .institute-item-image {
        width: 100%;
        height: 200px;
    }
}

/* ============================================
   16. EVENT DETAIL PAGE STYLES
   ============================================ */

/* ============================================
   EVENT DETAIL PAGE (Figma layout)
   ============================================ */
body.event-detail-page {
    background: linear-gradient(144.97deg, #141517 57.43%, #6D727D 92.92%);
}

.event-detail-page .container {
    max-width: 1243px;
    margin: 80px auto 60px auto;
    padding: 0;
    background: transparent;
}

.event-detail-outer-panel {
    background: transparent;
    border-radius: 30px;
    padding: 45px 55px 55px 55px;
}

.event-detail-inner-panel {
    background: #D9D9D9;
    border-radius: 30px;
    padding: 45px 55px 80px 55px;
}

/* Event Summary Section */
.event-summary-section {
    width: 100%;
    max-width: 897px;
    margin: 0 auto 70px auto;
    position: relative;
}

.event-summary-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 58px;
    color: #0F181D;
    text-transform: capitalize;
    margin: 0 0 70px 0;
    text-align: center;
}

.event-summary-content {
    display: flex;
    flex-direction: row;
    gap: 21px;
    align-items: flex-start;
    margin-bottom: 30px;
}

.event-summary-image {
    width: 315px;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
}

.event-image-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.event-summary-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-summary-heading {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 58px;
    color: #0F181D;
    text-transform: capitalize;
    margin: 0 0 30px 0;
}

.event-description-text {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;
    color: #0F181D;
    text-align: justify;
    text-transform: capitalize;
    margin: 0;
}

.event-summary-text {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;
    color: #0F181D;
    text-align: justify;
    text-transform: capitalize;
    margin: 0;
    width: 897px;
    max-width: 100%;
}

/* Photo Gallery Section */
.photo-gallery-section {
    width: 897px;
    max-width: 100%;
    margin: 0 auto;
}

.photo-gallery-divider {
    width: 897px;
    max-width: 100%;
    height: 0;
    border: 2px solid #000000;
    margin: 0 0 40px 0;
}

.photo-gallery-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 58px;
    color: #0F181D;
    text-transform: capitalize;
    margin: 0 0 47px 0;
}

.photo-gallery-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 30px 21px;
    margin-bottom: 30px;
}

.photo-gallery-item {
    box-sizing: border-box;
    width: calc(25% - 16px);
    height: auto;
    aspect-ratio: 210 / 138;
    flex: none;
}

.photo-gallery-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid #141517;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.photo-gallery-thumbnail:hover {
    transform: scale(1.05);
}

.view-album-button {
    width: 164px;
    height: 47px;
    background: #0F181D;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: auto;
    transition: background 0.2s ease;
}

.view-album-button:hover {
    background: #1a2a3a;
}

.view-album-button span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #F1F1F1;
    text-decoration-line: underline;
    text-transform: capitalize;
}

/* Responsive Event Detail Page */
@media (max-width: 1200px) {
    .event-detail-page .container {
        max-width: 95%;
        margin: 80px auto 40px auto;
    }
    
    .event-detail-outer-panel {
        padding: 30px 40px 40px 40px;
    }
    
    .event-detail-inner-panel {
        padding: 30px 40px 60px 40px;
    }
    
    .event-summary-section {
        max-width: 100%;
    }
    
    .event-summary-content {
        flex-direction: column;
    }
    
    .event-summary-image {
        width: 100%;
        max-width: 315px;
        height: auto;
        margin: 0 auto;
    }
    
    .event-image-main {
        aspect-ratio: 3 / 4;
    }
    
    .event-summary-text {
        width: 100%;
    }
    
    .photo-gallery-section {
        width: 100%;
    }
    
    .photo-gallery-divider {
        width: 100%;
    }
    
    .photo-gallery-grid {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .event-detail-page .container {
        margin: 80px auto 30px auto;
    }
    
    .event-detail-outer-panel {
        padding: 20px 25px 30px 25px;
    }
    
    .event-detail-inner-panel {
        padding: 20px 25px 40px 25px;
    }
    
    .event-summary-title,
    .event-summary-heading,
    .photo-gallery-title {
        font-size: 32px;
        line-height: 40px;
    }
    
    .event-summary-image {
        width: 100%;
        max-width: 100%;
    }
    
    .photo-gallery-item {
        width: calc(50% - 10px);
        height: auto;
        aspect-ratio: 210 / 138;
    }
    
    .view-album-button {
        width: 100%;
        margin-left: 0;
    }
}

.gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-actions {
    text-align: center;
}

.view-album-btn {
    background: var(--color-card-dark);
    color: var(--color-text-primary);
    border: 2px solid var(--color-text-primary);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-album-btn:hover {
    background: var(--color-text-primary);
    color: var(--color-text-dark);
}

/* Gallery Modal */
.gallery-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
}

.gallery-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-modal-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.gallery-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: 40px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.gallery-modal-close:hover {
    transform: rotate(90deg);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid var(--color-white);
    color: var(--color-white);
    font-size: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gallery-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.gallery-nav-prev {
    left: -70px;
}

.gallery-nav-next {
    right: -70px;
}

.gallery-counter {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
}

/* Document Preview Modal (Documents Page) */
.doc-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.doc-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.doc-preview-dialog {
    position: relative;
    background: #0f172a;
    border-radius: 18px;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.7);
    max-width: 960px;
    width: 100%;
    height: 80vh;
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.doc-preview-frame-wrapper {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #020617;
}

.doc-preview-frame-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #020617;
}

.doc-preview-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.85);
    color: #e5e7eb;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.doc-preview-close:hover {
    background: rgba(30, 64, 175, 0.95);
    transform: scale(1.05);
}

.doc-preview-close:active {
    transform: scale(0.97);
}

.doc-preview-modal.hidden {
    display: none;
}

body.no-scroll {
    overflow: hidden;
}

.doc-preview-btn,
.doc-card-preview-btn {
    border-radius: 999px;
    border: 1px solid #0f172a;
    background: #0f172a;
    color: #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    margin-right: 8px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    min-width: 90px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.doc-preview-btn:hover,
.doc-card-preview-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.doc-card-actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-card-gallery-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Responsive Event Detail */
@media (max-width: 1024px) {
    .event-summary-layout {
        grid-template-columns: 1fr;
    }
    
    .event-poster {
        position: static;
        max-width: 400px;
        margin: 0 auto var(--spacing-lg);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-nav {
        position: fixed;
        top: auto;
        bottom: 20px;
    }
    
    .gallery-nav-prev {
        left: 20px;
    }
    
    .gallery-nav-next {
        right: 20px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .event-detail-title,
    .gallery-title {
        font-size: 24px;
    }
}

/* ============================================
   MOBILE MODE - PUBLIC PAGES (Professional)
   Distinct mobile layout; does not mirror desktop Figma.
   ============================================ */

/* ===== CONSOLIDATED MOBILE STYLES (max-width: 768px) - HEADER SECTION ===== */
@media (max-width: 768px) {
    /* Safe area for notched devices */
    .main-container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* ----- Header: compact, clear brand, professional dropdown ----- */
    .site-header {
        padding: 8px max(16px, env(safe-area-inset-left)) 8px max(16px, env(safe-area-inset-right));
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
    }

    .header-container {
        gap: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .brand {
        gap: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .logo-text {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 1px;
        left: -8px;
        line-height: 1.2;
    }
    
    /* Mobile search and menu buttons container */
    .header-container > div[style*="order: 999"] {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-left: auto;
    }
    
    .mobile-search-toggle,
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    /* Hamburger: clearer tap target */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        border-radius: 8px;
        transition: background 0.2s ease;
    }

    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-menu-toggle span {
        width: 31px;
        height: 2.5px;
        background: #e6e9eb;
        border-radius: 2px;
        transition: all 0.3s ease;
        display: block;
    }
    
    .mobile-search-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        border-radius: 8px;
        transition: background 0.2s ease;
        color: #e6e9eb;
    }
    
    .mobile-search-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .mobile-search-toggle svg {
        width: 20px;
        height: 20px;
    }

    /* Dropdown nav: full-width, large tap targets */
    .main-nav.active {
        position: absolute;
        top: 100%;
        left: 12px;
        right: 12px;
        margin: 8px 0 0 0;
        padding: 12px;
        border-radius: 16px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(26, 29, 31, 0.98);
        backdrop-filter: blur(12px);
    }

    .main-nav.active .nav-link {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 16px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 12px;
        margin-bottom: 6px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .main-nav.active .nav-link:last-child {
        margin-bottom: 0;
    }

    .main-nav.active .nav-link:first-child {
        background: rgba(241, 241, 241, 0.95);
        border-color: rgba(241, 241, 241, 0.95);
        color: #080808;
    }

    /* Main container already properly styled in earlier max-width: 768px block */
    
    .hero-banner-image {
        border-radius: 20px;
        aspect-ratio: 4 / 3;
    }

    .banner-content-wrapper {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    /* Banner content area handled in earlier block */

    .icdisg-full-name {
        font-size: 9px;
        max-width: 200px;
        line-height: 1.35;
    }

    /* Announcements panel styling consolidated in earlier section */

    .fade-overlay {
        height: 60px;
    }

    .card-title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 14px;
        text-align: center;
    }

    .origin-logos {
        gap: 12px;
    }

    .logo-badge {
        padding: 12px;
    }

    .documents-grid {
        gap: 16px;
        margin-top: 16px;
        padding: 12px 0 0 0;
    }

    .documents-card .folder-item {
        padding: 8px;
    }

    .folder-title {
        font-size: 10px;
    }

    .events-carousel .carousel-track {
        min-height: 220px;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .event-caption {
        display: none;
    }

    .carousel-dots {
        margin-top: 12px;
    }

    /* ----- Footer: stacked, readable ----- */
    .footer-section {
        padding: 24px 20px;
        border-radius: 0;
        gap: 24px;
    }

    .footer-brand {
        margin-bottom: 8px;
    }

    .footer-logo-text {
        font-size: 18px;
    }

    .footer-description {
        font-size: 13px;
        line-height: 1.6;
    }

    .social-links {
        margin-top: 12px;
    }

    .techcare-title {
        font-size: 18px;
    }

    .techcare-links a {
        font-size: 13px;
    }
}

/* ===== CONSOLIDATED SMALL MOBILE STYLES (max-width: 600px) - SINGLE COLUMN LAYOUT ===== */
@media (max-width: 600px) {
    .main-container {
        padding: 16px 14px 24px;
        padding-top: 64px;
        gap: 20px;
    }

    .hero-section {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        min-height: auto;
        overflow: visible;
        align-items: start;
    }

    .hero-banner {
        padding: 0;
        border-radius: 18px;
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
        min-height: unset;
    }
    
    .hero-banner-image {
        border-radius: 18px;
        aspect-ratio: 4 / 3;
    }

    .announcements-panel {
        width: 100%;
        height: 420px;
        min-height: 420px;
        max-height: 420px;
        padding: var(--spacing-md);
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        background: var(--color-card-bg);
        overflow: visible;
    }

    .announcements-panel .panel-title {
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 6px;
        flex-shrink: 0;
        text-align: center;
    }

    .announcements-panel .scroll-wrapper {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 4px;
    }
    
    .announcement-card {
        background: #11161b;
        border-radius: var(--radius-md);
        padding: 6px;
        margin-bottom: 4px;
        position: relative;
        cursor: pointer;
        transition: background 0.2s;
    }

    .announcement-card:hover {
        background: #1a1f26;
    }

    .announcement-image-wrapper {
        width: 100%;
        margin-bottom: var(--spacing-xs);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }

    .announcement-image {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        display: block;
    }

    .announcement-title {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .announcement-date {
        font-size: 8px;
        color: #8b929a;
        margin-bottom: var(--spacing-xs);
    }

    .card-divider {
        height: 1px;
        background-color: #2c333a;
        margin-bottom: 4px;
    }

    .announcement-desc {
        font-size: 8px;
        line-height: 1.5;
        color: #c5c7ca;
        margin-bottom: 4px;
    }

    .btn-read-more {
        background: #d9d9d9;
        color: #11161b;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 8px;
        font-weight: 700;
        float: right;
    }

    .btn-read-more:hover {
        background: var(--color-white);
    }

    .cards-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .card {
        padding: 20px 16px;
        border-radius: 20px;
        width: 100%;
        max-width: 100%;
    }
    
    .card.origin-card {
        min-height: 420px;
    }
    
    /* Mobile: keep Documents card height consistent with Origin card */
    .card.documents-card {
        min-height: 400px;
        height: 400px;
    }
    
    .card.events-card {
        min-height: 380px;
    }
    
    .origin-track {
        min-height: auto;
    }
    
    .documents-track {
        /* Keep documents carousel compact on mobile; slide 2 has fewer tiles */
        min-height: 240px;
    }
    
    .events-carousel .carousel-track {
        min-height: 360px;
    }
    
    .card-title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 14px;
    }
    /* Announcements: vertical scroll, matching desktop behavior */
    .announcements-panel .scroll-wrapper {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 16px;
        scrollbar-width: none;
    }

    .announcements-panel .scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

    .announcements-panel .announcement-card-link {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .announcements-panel .announcement-card {
        margin-bottom: var(--spacing-sm);
    }

    /* ORIGIN (home): product-like slider, larger logos */
    .origin-card .origin-logos {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 6px;
    }

    .origin-card .origin-logos::-webkit-scrollbar {
        display: none;
    }

    .origin-card .origin-logos .logo-item {
        flex: 0 0 60%;
        max-width: 60%;
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .origin-card .origin-logos .logo-badge {
        width: 100%;
        max-width: 120px;
    }

    .origin-card .origin-logos .logo-image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* DOCUMENTS (home): carousel with 2x2 grid slides like origin */
    .documents-card .documents-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, minmax(80px, 1fr));
        gap: 30px 28px;
        width: 100%;
        height: 100%;
        padding: var(--spacing-md);
        align-items: start !important;
        justify-items: start !important;
    }

    .documents-card .documents-grid::-webkit-scrollbar {
        display: none;
    }

    .documents-card .folder-item {
        flex: none;
        max-width: 100%;
        scroll-snap-align: auto;
        display: flex;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        width: 100%;
        height: auto;
    }
}

/* Mobile: Stack hero-section vertically */
@media (max-width: 768px) {
    .hero-section {
        grid-template-columns: 1fr;
        min-height: auto;
        overflow: visible;
        align-items: start;
    }
}

/* DOCUMENTS page: fix huge title/paddings on mobile */
@media (max-width: 768px) {
    .documents-page .container {
        margin: 80px auto 24px auto;
        padding: 0 12px;
    }

    .documents-outer-panel {
        padding: 16px;
        border-radius: 22px;
    }

    .documents-inner-panel {
        padding: 16px;
        border-radius: 18px;
    }

    .documents-page .page-header {
        margin-bottom: 18px;
    }

    .documents-page .page-title {
        font-size: 48px;
        line-height: 54px;
        letter-spacing: 0.5px;
    }

    .documents-divider {
        width: 100%;
        max-width: 520px;
    }

    .documents-page .toolbar {
        margin-top: 16px;
    }

    .toolbar {
        padding: 12px;
        border-radius: 12px;
    }

    .search-input {
        font-size: 14px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .breadcrumb {
        font-size: 12px;
        line-height: 16px;
        overflow-wrap: anywhere;
    }

    .documents-page #foldersSection {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .documents-page .documents-grid {
        gap: 14px;
        margin-top: 14px;
    }
}

@media (max-width: 600px) {
    .documents-page .page-title {
        font-size: 34px;
        line-height: 40px;
    }

    .documents-outer-panel {
        padding: 12px;
        border-radius: 18px;
    }

    .documents-inner-panel {
        padding: 12px;
        border-radius: 16px;
    }

    .documents-page .documents-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    /* Small mobile: Further adjust subcategory folders - override all inline styles */
    #subcategoriesSection .documents-grid > div {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .documents-page #subcategoriesSection .folder-item,
    #subcategoriesSection .documents-grid .folder-item {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 202 / 141 !important; /* Maintain desktop aspect ratio */
        min-height: 0 !important;
        min-width: 0 !important;
        display: block !important;
    }
    
    /* Override inline styles on folder item inner divs */
    #subcategoriesSection .folder-item > div {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }
    
    /* Override inline styles on folder images - ensure they scale properly */
    #subcategoriesSection .folder-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        max-width: none !important; /* Override the 150px max-width from general rule */
        margin: 0 !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }

    /* Only apply max-width to category folder icons, not subcategory folders */
    .documents-page #foldersSection .folder-item img {
        max-width: 150px;
        margin: 0 auto;
    }
    
    /* Subcategory folders should scale to full width */
    #subcategoriesSection .folder-item img {
        max-width: 100% !important;
        margin: 0 !important;
    }

    .documents-page .no-documents {
        padding: 2.5rem 1rem;
        margin: 1rem 0;
    }
}

/* EVENTS page: better mobile typography + breathing room */
@media (max-width: 600px) {
    .events-page .container {
        margin: 80px auto 24px auto;
        padding: 0 12px;
    }

    .events-outer-panel {
        padding: 14px;
        border-radius: 18px;
    }

    .events-inner-panel {
        padding: 14px;
        border-radius: 16px;
    }

    .events-page .page-header {
        margin-bottom: 18px;
    }
    
    .events-page .page-title {
        font-size: 34px;
        line-height: 40px;
    }
    
    .events-divider {
        width: 100%;
        max-width: 520px;
    }

    .events-row {
        justify-items: center;
    }

    .event-card {
        max-width: 280px;
        width: 100%;
        aspect-ratio: 3 / 4;
        margin: 0 auto;
    }
}

/* ============================================
   ADMIN PANEL OVERRIDES - LIGHT THEME
   Force light theme and ensure Tailwind works
   CRITICAL: These must override the dark body background
   ============================================ */

/* CRITICAL: Override ALL dark styles for admin panel - MUST BE AFTER body rule */
html.admin-panel-page,
body.admin-panel-page,
html body.admin-panel-page {
    background: linear-gradient(to bottom right, #f8fafc, #e0e7ff, #e9d5ff) !important;
    background-attachment: fixed !important;
    background-color: #f8fafc !important;
    color: #1f2937 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override the dark body gradient completely */
body.admin-panel-page {
    background-image: linear-gradient(to bottom right, #f8fafc, #e0e7ff, #e9d5ff) !important;
    background: linear-gradient(to bottom right, #f8fafc, #e0e7ff, #e9d5ff) !important;
}

body.admin-panel-page * {
    box-sizing: border-box;
}

/* Hide old admin container styles and any conflicting containers */
body.admin-panel-page .admin-container,
body.admin-panel-page .admin-header:not(.dashboard-header),
body.admin-panel-page .admin-content,
body.admin-panel-page .container:not(.admin-panel-wrapper):not(.max-w-7xl):not(.max-w-md):not(.w-full),
body.admin-panel-page .header:not(.site-header),
body.admin-panel-page .content:not(.dashboard-content) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure admin panel wrapper is visible and light */
.admin-panel-wrapper {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    background: linear-gradient(to bottom right, #f8fafc, #e0e7ff, #e9d5ff) !important;
    background-color: #f8fafc !important;
    color: #1f2937 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override any dark text - force light colors */
body.admin-panel-page,
body.admin-panel-page .login-page,
body.admin-panel-page .dashboard-page,
body.admin-panel-page p,
body.admin-panel-page span,
body.admin-panel-page div,
body.admin-panel-page h1,
body.admin-panel-page h2,
body.admin-panel-page h3,
body.admin-panel-page h4,
body.admin-panel-page label {
    color: inherit !important;
}

/* Force light backgrounds */
body.admin-panel-page .bg-white {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

body.admin-panel-page .bg-gray-50 {
    background-color: #f9fafb !important;
    background: #f9fafb !important;
}

body.admin-panel-page .bg-gray-100 {
    background-color: #f3f4f6 !important;
    background: #f3f4f6 !important;
}

/* Force proper text colors */
body.admin-panel-page .text-gray-900,
body.admin-panel-page h1.text-gray-900,
body.admin-panel-page h2.text-gray-900,
body.admin-panel-page h3.text-gray-900 {
    color: #111827 !important;
}

body.admin-panel-page .text-gray-700,
body.admin-panel-page label.text-gray-700 {
    color: #374151 !important;
}

body.admin-panel-page .text-gray-600,
body.admin-panel-page p.text-gray-600 {
    color: #4b5563 !important;
}

body.admin-panel-page .text-gray-500,
body.admin-panel-page p.text-gray-500 {
    color: #6b7280 !important;
}

/* Ensure buttons work and are visible */
body.admin-panel-page button,
body.admin-panel-page .btn,
body.admin-panel-page a.btn {
    cursor: pointer !important;
    color: inherit !important;
}

/* Force white text on buttons with colored backgrounds */
body.admin-panel-page .btn-primary,
body.admin-panel-page button.btn-primary,
body.admin-panel-page a.btn-primary,
body.admin-panel-page .btn-edit,
body.admin-panel-page button.btn-edit,
body.admin-panel-page a.btn-edit,
body.admin-panel-page .btn-delete,
body.admin-panel-page button.btn-delete,
body.admin-panel-page a.btn-delete,
body.admin-panel-page button[class*="bg-indigo"],
body.admin-panel-page button[class*="bg-red"],
body.admin-panel-page button[class*="bg-gradient"],
body.admin-panel-page button[class*="bg-blue"],
body.admin-panel-page button[class*="bg-purple"],
body.admin-panel-page button[class*="bg-pink"],
body.admin-panel-page button[class*="bg-green"],
body.admin-panel-page .btn-logout,
body.admin-panel-page button.btn-logout,
body.admin-panel-page a.btn-logout {
    color: #ffffff !important;
}

/* Force white text on buttons with inline colored backgrounds (red, blue, indigo, purple, pink, green, etc.) */
body.admin-panel-page button[style*="background: #dc3545"],
body.admin-panel-page button[style*="background:#dc3545"],
body.admin-panel-page button[style*="background: #ef4444"],
body.admin-panel-page button[style*="background:#ef4444"],
body.admin-panel-page button[style*="background: #667eea"],
body.admin-panel-page button[style*="background:#667eea"],
body.admin-panel-page button[style*="background: linear-gradient"],
body.admin-panel-page button[style*="background:linear-gradient"],
body.admin-panel-page .btn-small[style*="background"],
body.admin-panel-page button.btn-small[style*="background"] {
    color: #ffffff !important;
}

/* Ensure images display properly in admin lists */
body.admin-panel-page img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

body.admin-panel-page .w-24,
body.admin-panel-page .w-36 {
    width: 6rem !important;
    height: 6rem !important;
}

body.admin-panel-page .w-36 {
    width: 9rem !important;
}

body.admin-panel-page .object-cover {
    object-fit: cover !important;
}

body.admin-panel-page .flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* Override any site header if shown */
body.admin-panel-page .site-header,
body.admin-panel-page header.site-header {
    display: none !important;
    visibility: hidden !important;
}

/* Override any dark card backgrounds */
body.admin-panel-page .card,
body.admin-panel-page [class*="card"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Ensure all Tailwind utility classes work */
/* Tailwind utility classes are handled by Tailwind CSS */

/* ========================================
   SEARCH PAGE - LIGHT THEME OVERRIDES
   ======================================== */
body.search-page,
body.search-page .search-page-container {
    background: #ffffff !important;
    color: #000000 !important;
}

body.search-page .search-form-input,
body.search-page .search-form-select {
    background: #ffffff !important;
    border: 1px solid #d0d0d0 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

body.search-page .search-form-input::placeholder {
    color: #666666 !important;
}

body.search-page .search-form-input:focus {
    background: #ffffff !important;
    border-color: #000000 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
}

body.search-page .search-form-input::-webkit-search-cancel-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z'/%3E%3C/svg%3E") !important;
}

body.search-page .search-form-input[type="search"]::-moz-search-clear-button {
    filter: brightness(0) !important;
}

body.search-page .search-form-select option {
    background: #ffffff !important;
    color: #000000 !important;
}

body.search-page .search-form-button {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #d0d0d0 !important;
    font-weight: bold !important;
}

body.search-page .search-form-button:hover {
    background: #f5f5f5 !important;
}

body.search-page .search-form-button svg {
    stroke: #000000 !important;
    fill: none !important;
}

/* Event slide link styling - carousel specific */
.events-carousel .event-slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 30px !important;
    overflow: hidden !important;
}

/* ====== ICDISG page overrides (late-file fixes) ====== */
/* Ensure icdisg wrapper doesn't force horizontal overflow */
.icdisg .inner-wrap {
    width: 100% !important;
    max-width: 1451px !important;
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Target the real classes used in templates (origin-sidebar / page-sidebar / aside)
   and force the intended desktop sidebar width while keeping responsive rules intact. */
.icdisg .origin-sidebar,
.icdisg .page-sidebar,
.icdisg aside {
    width: 371px !important;
    flex: 0 0 371px !important;
    position: sticky !important;
    top: 138px !important;
    right: auto !important;
}

.icdisg .origin-main-content,
.icdisg .page-main,
.icdisg .origin-content-panel {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Defensive: if utility classes (Tailwind-like) set full width on sidebar,
   override them inside the icdisg scope at large sizes */
@media (min-width: 1024px) {
    .icdisg .w-full { width: auto !important; }
    .icdisg .lg\:w-80 { width: 371px !important; }
}

/* Extra small screens (below 500px) - ensure announcements panel scrolls */
@media (max-width: 480px) {
    .announcements-panel {
        overflow: visible !important;
    }
}

/* CRITICAL: Fix for ALL screens 0-600px - ensure full scroll visibility */
@media (max-width: 600px) {
    .announcements-panel {
        height: 420px !important;
        max-height: 420px !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .announcements-panel .panel-title {
        flex-shrink: 0 !important;
    }
    
    .announcements-panel .scroll-wrapper {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* Small tweak: ensure no unexpected horizontal scroll from fixed-width elements */
.icdisg { overflow-x: hidden; }

/*================================================
   COMPREHENSIVE MOBILE-ONLY RESPONSIVE STYLES
   Mobile: 0-768px | Tablet: 769px-1024px | Desktop: 1025px+
   ================================================ */

/* ===== MOBILE: Ultra-small screens (0-480px) ===== */
@media (max-width: 480px) {
    .page-container {
        padding: var(--spacing-sm);
        padding-top: 70px;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .page-main,
    .origin-main-content {
        width: 100%;
        flex: 1 1 auto;
    }
    
    /* Hide sidebar on tiny screens - full width content */
    .page-sidebar,
    .origin-sidebar,
    aside {
        display: none !important;
        width: 100% !important;
        flex: none !important;
    }
    
    /* Full width containers */
    .inner-wrap {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .panel,
    .card {
        padding: var(--spacing-sm) !important;
        border-radius: 16px !important;
        margin: 0 !important;
        min-height: auto !important;
    }
    
    .panel-inner {
        padding: var(--spacing-md) var(--spacing-sm) !important;
    }
    
    /* Flexible images and media */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Responsive type */
    h1 { font-size: clamp(18px, 5vw, 28px) !important; }
    h2 { font-size: clamp(16px, 4.5vw, 24px) !important; }
    h3 { font-size: clamp(14px, 4vw, 20px) !important; }
    p, li { font-size: clamp(12px, 3.5vw, 16px) !important; }
    
    /* Flexible grids */
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-sm) !important;
        justify-items: stretch;
    }
    
    /* Button & form flexibility */
    button, input, select, textarea {
        min-height: 44px; /* touch-friendly */
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: 16px !important; /* prevent zoom on focus */
        width: 100%;
        max-width: 100%;
    }
    
    /* Overflow prevention */
    body { overflow-x: hidden; }
    * { max-width: 100%; }
}

/* ===== MOBILE: Small to medium (481px-768px) ===== */
@media (max-width: 768px) {
    .page-container,
    .origin-page-container {
        padding: var(--spacing-md);
        padding-top: 75px;
        flex-direction: column;
        gap: var(--spacing-md);
        min-height: auto;
    }
    
    .page-container .inner-wrap {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-md);
    }
    
    /* Sidebar: stack below content or hide */
    .page-sidebar,
    .origin-sidebar {
        width: 100% !important;
        flex: 0 0 auto !important;
        position: static !important;
        top: auto !important;
        margin-top: var(--spacing-md);
    }
    
    .page-main,
    .origin-main-content,
    .origin-content-panel {
        width: 100%;
        flex: 1 1 auto;
    }
    
    /* Flexible panels */
    .panel {
        padding: var(--spacing-md) !important;
        margin: 0 !important;
        border-radius: 20px !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    .sidebar-panel,
    .panel-title,
    .panel-content {
        min-height: auto !important;
        max-height: none !important;
    }
    
    .sidebar-panel {
        padding: var(--spacing-md) !important;
    }
    
    /* Responsive typography */
    h1 { font-size: clamp(20px, 6vw, 32px) !important; line-height: 1.3 !important; }
    h2 { font-size: clamp(18px, 5vw, 28px) !important; line-height: 1.4 !important; }
    h3 { font-size: clamp(16px, 4.5vw, 24px) !important; }
    h4 { font-size: clamp(14px, 4vw, 20px) !important; }
    p, li, span { font-size: clamp(13px, 3.5vw, 16px) !important; }
    small { font-size: clamp(11px, 3vw, 13px) !important; }
    
    /* Flexible cards & grids */
    .card {
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-md) !important;
        min-height: auto !important;
        border-radius: 20px !important;
    }
    
    .card-grid,
    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-md) !important;
    }
    
    .origin-grid,
    .documents-grid,
    .events-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: var(--spacing-sm) !important;
        padding: var(--spacing-md) !important;
    }
    
    /* Hero flex */
    .hero-section {
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
    }
    
    .hero-banner,
    .announcements-panel {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 300px;
        border-radius: 20px !important;
        padding: var(--spacing-md) !important;
    }
    
    /* Carousels responsive */
    .carousel,
    .carousel-track {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Footer flex */
    .footer-section {
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
        padding: var(--spacing-md) !important;
    }
    
    /* Forms & inputs - touch friendly */
    button, input, select, textarea {
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: 16px !important;
        width: 100%;
        max-width: 100%;
        border-radius: 12px !important;
    }
    
    /* Flex containers */
    .flex { flex-wrap: wrap; }
    .flex > * { min-width: 0; }
    
    /* Tables responsive */
    table {
        width: 100%;
        overflow-x: auto;
        font-size: clamp(12px, 3vw, 14px);
    }
    
    th, td {
        padding: var(--spacing-sm) !important;
    }
    
    /* Lists flexible */
    ul, ol {
        padding-left: var(--spacing-md) !important;
    }
    
    li {
        margin-bottom: var(--spacing-xs) !important;
    }
    
    /* Prevent overflow */
    body {
        overflow-x: hidden;
        padding: 0;
    }
    
    .container,
    .page-container,
    .main-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
}

/* ===== TABLET: Medium devices (769px-1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .page-sidebar,
    .origin-sidebar {
        width: 300px !important;
        flex: 0 0 300px !important;
    }
    
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    
    h1 { font-size: clamp(24px, 5vw, 36px); }
    h2 { font-size: clamp(20px, 4vw, 28px); }
    p { font-size: clamp(14px, 3.5vw, 17px); }
}

/* ===== DESKTOP: Large screens (1025px+) - Ensure nothing changes ===== */
@media (min-width: 1025px) {
    .page-sidebar,
    .origin-sidebar {
        width: 371px !important;
        flex: 0 0 371px !important;
        position: sticky !important;
    }
}