/* ==========================================================================
   DBCS OLD BOYS ASSOCIATION - CORE APPLICATION STYLES (site.css)
   Identity Palette: #999 (Grey), #CCC (Light Grey), #1a1a1a (Deep Charcoal), 
                    #333 (Charcoal), #2e51a2 (Choir Blue)
   Theme: Tactile Modernism (Depth + Clean Data Hierarchy)
   ========================================================================== */

/* --- 1. GLOBAL DESIGN TOKENS --- 
   Defining CSS Variables at the root allows for easy theme adjustments 
   and ensures consistent color usage across all components.
*/
:root {
    /* Legacy Identity Colors */
    --legacy-bg: #999999; /* Main page background */
    --legacy-container: #CCCCCC; /* Content area background */
    --legacy-header: #1a1a1a; /* Branding header background */
    --legacy-nav: #333333; /* Secondary navigation background */
    --legacy-accent: #2e51a2; /* Primary Action / Choir Blue */
    --legacy-accent-hover: #3d66c5;
    /* Modern UI States */
    --danger-color: #dc3545; /* Error / Logout Red */
    --success-color: #28a745; /* Success Green */
    --text-primary: #1a1a1a;
    --text-muted: #555555;
    /* Depth & Effects (Tactile Standards) */
    --radius: 12px; /* Standard corner rounding */
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. BASE RESET & TYPOGRAPHY --- */
body {
    background-color: var(--legacy-accent); /* Drakie Blue Gutters */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- 3. PRIMARY LAYOUT WRAPPERS --- */

/* Main Container: Centered but allows sidebar to push outside */
.main-container {
    width: 100%;
    margin: 0;
    background-color: transparent !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Content Wrapper: Sidebar + Main Area */
.content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0; /* Remove padding to allow flush sidebar */
    gap: 0;
    flex: 1;
}

/* Left Sidebar: Fixed to far-left screen edge */
.left-sidebar {
    width: 320px;
    min-width: 320px;
    padding: 30px 20px;
    position: fixed;
    left: 20px; /* Slight offset from the absolute edge */
    top: 240px; /* Increased to completely clear the header and nav */
    bottom: 20px;
    overflow: hidden;
    z-index: 100;
}

/* Main Content area: Centered with space for future news cards */
.main-content {
    flex: 1;
    margin-left: 320px; /* Space for fixed sidebar */
    margin-right: 0;
    padding: 40px;
    max-width: 1250px; /* Constrained content width */
    margin-left: auto;
    margin-right: auto;
}

/* Adjust wrapper to handle the offset */
.content-wrapper {
    display: block;
    position: relative;
    padding: 0;
}

/* --- 4. NAVIGATION & HEADER --- */

/* Deep Charcoal Branding Header */
.legacy-header {
    background-color: var(--legacy-header);
    color: #fff;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 6px solid #444;
}

/* Modern Horizontal Toolbar */
.legacy-nav {
    background-color: var(--legacy-nav);
    padding: 12px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Standard Nav Buttons (Hover effects included) */
.nav-btn {
    color: #bbb;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    transition: var(--transition-fast);
    text-transform: uppercase;
}

    .nav-btn:hover {
        color: #fff;
        background-color: rgba(255,255,255,0.1);
    }

    .nav-btn.active {
        background-color: var(--legacy-accent);
        color: #fff;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    }

/* Pushes Login/Logout links to the far right */
.auth-section {
    margin-left: auto;
    display: flex;
    gap: 12px;
}

/* --- 5. TACTILE UI COMPONENTS --- */

/* 3D Modern Button (Standard for the whole site) */
.btn-modern {
    background-color: #333;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 0 4px 0px #000; /* Tactile Depth */
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

    .btn-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0px #000;
    }

    .btn-modern:active {
        transform: translateY(2px);
        box-shadow: 0 2px 0px #000;
    }

/* Content Cards: White background for contrast against Blue Page background */
.profile-card, .main-card, .card {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius);
    padding: 40px;
    margin-bottom: 35px;
    border: none;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.profile-card h1, .profile-card h2, .profile-card h3, .profile-card h4, .profile-card h5,
.main-card h1, .main-card h2, .main-card h3, .main-card h4, .main-card h5,
.card h1, .card h2, .card h3, .card h4, .card h5 {
    color: var(--text-primary) !important;
}

.profile-card .text-muted, .main-card .text-muted, .card .text-muted {
    color: #777 !important;
}

/* Background utilities */
.bg-white {
    background-color: #fff !important;
    color: var(--text-primary) !important;
}

.card-header, .card-footer, .card-body {
    background-color: transparent !important;
    border-color: #eee !important;
    color: var(--text-primary) !important;
}

/* Ensure list items inside cards are also transparent */
.list-group-item {
    background-color: transparent !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* --- 6. SYNCFUSION EJ2 OVERRIDES (v32.1.25) --- 
   Ensuring modern Syncfusion components inherit the legacy theme.
*/

/* Global Grid Styling */
.e-grid {
    border-radius: 10px !important;
    overflow: hidden;
    border: 1px solid #bbb !important;
}

    /* Grid Header Branding */
    .e-grid .e-headercell {
        background-color: #f1f1f1 !important;
        color: #333 !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        font-size: 0.75rem !important;
    }

    /* Customizing the Grid Active/Selection Color */
    .e-grid .e-row.e-active, .e-grid .e-selected {
        background-color: rgba(46, 81, 162, 0.1) !important;
    }

/* Input Overrides for EJ2 TextBox/Dropdown */
.e-input-group, .e-input-group.e-control-wrapper {
    border-radius: 8px !important;
    border-color: #bbb !important;
}

    .e-input-group.e-input-focus, .e-input-group.e-control-wrapper.e-input-focus {
        border-color: var(--legacy-accent) !important;
        box-shadow: 0 0 0 3px rgba(46, 81, 162, 0.2) !important;
    }

/* --- 7. FOOTER --- */
.legacy-footer {
    padding: 30px;
    text-align: center;
    font-size: 0.8rem;
    border-top: 2px solid #bbb;
    color: #666;
    background-color: #f4f4f4;
}