/* ===================================================
   PAGE LAYOUT SYSTEMS - Three Standard Layouts
   =================================================== */

/* ===================================================
   1. ADMIN LAYOUT - Maximum space, minimal chrome
   =================================================== */

.layout-admin {
    margin: 160px auto 20px;
    padding: 0 20px;
    min-height: 500px;
    max-width: 1400px;
}

.layout-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #b61b27;
}

.layout-admin-header h1 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #4a4a4a;
    margin: 0;
    font-family: Roboto, 'sans-serif';
}

.layout-admin-header h1 i {
    color: #b61b27;
    margin-right: 8px;
}

.layout-admin-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.layout-admin-actions .back-link,
.layout-admin-actions a {
    color: #4a4a4a;
    text-decoration: none;
    font-size: 0.95rem;
}

.layout-admin-actions a:hover {
    color: #b61b27;
}

.layout-admin-content {
    /* Content area - no special styling needed */
}

/* Mobile responsive for admin layout */
@media (max-width: 767px) {
    .layout-admin {
        margin-top: 80px;
        padding: 0 15px;
    }
    
    .layout-admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .layout-admin-header h1 {
        font-size: 1.1rem;
    }
}

/* ===================================================
   2. CONTENT LAYOUT - Standard public pages
   =================================================== */

.layout-content {
    margin: 170px auto 50px;
    padding: 0 30px;
    max-width: 1200px;
}

.layout-content-header {
    text-align: center;
    margin-bottom: 50px;
}

.layout-content-title {
    width: 100%;
    text-align: center;
    font-family: leaguespartan-bold, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.83;
    letter-spacing: normal;
    color: #4a4a4a;
    display: inline-block;
    background-color: white;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 35px;
}

.layout-content-separator {
    width: 100px;
    height: 3px;
    padding-top: 0;
    margin: 0 auto;
    background-color: #b61b27;
    display: block;
}

.layout-content-body {
    /* Content area */
}

/* Content layout with sidebar */
.layout-content-with-sidebar {
    display: flex;
    gap: 30px;
}

.layout-content-sidebar {
    flex: 0 0 250px;
    min-width: 250px;
}

.layout-content-main {
    flex: 1;
}

/* Mobile responsive for content layout */
@media (max-width: 767px) {
    .layout-content {
        margin-top: 90px;
        padding: 0 20px;
    }
    
    .layout-content-title {
        font-size: 25px;
        margin-bottom: 10px;
    }
    
    .layout-content-separator {
        width: 100px;
        margin: 0 auto;
    }
    
    .layout-content-header {
        margin-bottom: 30px;
    }
    
    .layout-content-with-sidebar {
        flex-direction: column;
    }
    
    .layout-content-sidebar {
        flex: 1;
        min-width: 100%;
    }
}

@media (min-width: 768px) {
    .layout-content {
        margin-top: 170px;
    }
    
    .layout-content-title {
        font-size: 35px;
        margin-bottom: 10px;
    }
    
    .layout-content-separator {
        width: 100px;
    }
    
    .layout-content-header {
        margin-bottom: 50px;
    }
}

/* ===================================================
   3. RECORDS LAYOUT - List/table-heavy pages
   =================================================== */

.layout-records {
    margin: 120px auto 50px;
    padding: 0 20px;
    max-width: 1400px;
}

.layout-records-header {
    margin-bottom: 30px;
}

.layout-records-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #4a4a4a;
    margin: 0 0 10px 0;
    font-family: leaguespartan-bold, Roboto, sans-serif;
    text-align: center;
}

.layout-records-content {
    /* Content area */
}

.layout-records-section {
    margin-bottom: 50px;
}

.layout-records-section-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #4a4a4a;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #b61b27;
    font-family: leaguespartan-bold, Roboto, sans-serif;
    text-align: center;
}

/* Alternative: left-aligned section titles */
.layout-records-section-title.left-align {
    text-align: left;
}

/* Mobile responsive for records layout */
@media (max-width: 767px) {
    .layout-records {
        margin-top: 70px;
        padding: 0 15px;
    }
    
    .layout-records-title {
        font-size: 1.4rem;
    }
    
    .layout-records-section-title {
        font-size: 1.2rem;
    }
}

/* ===================================================
   LEGACY SUPPORT - Map old classes to new system
   =================================================== */

/* Keep old admin-title working for now */
.admin-title {
    display: none; /* Hide by default */
}

/* Old page wrapper styles */
.page-wrapper {
    margin-top: 120px;
    min-height: 400px;
}

.public-page-wrapper {
    margin-top: 170px;
    min-height: 500px;
}

.public-wrapper {
    margin: 170px 30px 20px 30px;
    min-height: 350px;
}

/* Old admin wrapper */
.admin-wrapper {
    margin: 170px 20px 20px 20px;
    min-height: 500px;
}

/* Old admin container/title (from _layout.css) */
.admin-container {
    margin: 160px auto 10px;
    padding: 0 15px;
    min-height: 500px;
    max-width: 1400px;
    background: transparent;
}

.admin-title-bar {
    border-bottom: none;
    padding-bottom: 10px;
    margin-bottom: 20px;
    background: transparent;
}

.admin-title-bar h1 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #4a4a4a;
    margin: 0;
    font-family: Roboto, 'sans-serif';
}

.admin-title-bar h1 i {
    color: #b61b27;
    margin-right: 8px;
}

/* Old admin-body (from _layout.css) */
.admin-body {
    margin: 160px auto 10px;
    padding: 0 15px;
    min-height: 500px;
    background: transparent;
}

.admin-body h1 {
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: 700;
    color: var(--medium-grey1, #4a4a4a);
}

.admin-body h2 {
    font-size: 1.1rem;
    line-height: 1.5rem;
    font-weight: 400;
    color: var(--medium-grey1, #4a4a4a);
}

/* ===================================================
   UTILITY CLASSES
   =================================================== */

/* Centered content */
.layout-centered {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Wide content */
.layout-wide {
    max-width: 1600px;
}

/* Narrow content */
.layout-narrow {
    max-width: 600px;
}

/* Remove top margin (for when you don't want the standard spacing) */
.layout-no-top-margin {
    margin-top: 0 !important;
}

/* Add extra bottom spacing */
.layout-extra-bottom {
    margin-bottom: 100px;
}

/* Card-style container */
.layout-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 20px;
}

.layout-card h2 {
    margin-top: 0;
    color: #4a4a4a;
    font-size: 1.5rem;
}

/* Section divider */
.layout-divider {
    height: 2px;
    background: #e0e0e0;
    margin: 40px 0;
}

.layout-divider.accent {
    background: #b61b27;
}

/* ===================================================
   RESPONSIVE HELPERS
   =================================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .layout-hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 768px) {
    .layout-hide-desktop {
        display: none !important;
    }
}

/* Stack on mobile */
@media (max-width: 767px) {
    .layout-stack-mobile {
        flex-direction: column !important;
    }
    
    .layout-stack-mobile > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}