/* --- Orizon App Core Styles --- */
:root {
    --accent: #F37021;
    /* Orizon Orange */
    --bg-dark: #0f0f0f;
    --card-bg: #181818;
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --input-bg: #1a1a1a;
}

/* Reset specific to App context if needed, but inheriting mainly from main.css */
.app-body {
    background-color: var(--bg-dark);
    font-family: 'Outfit', sans-serif;
    margin: 0;
    padding: 0;
}

/* --- Login View Styles --- */
.login-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left Side - Brand (Photo) */
.login-brand-side {
    flex: 1.5;
    background-image: url('../images/gala1.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: none;
    /* Hidden on mobile default */
}

/* Overlay for text readability */
.brand-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(18, 18, 18, 1));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text at bottom */
    align-items: flex-start;
    padding: 4rem;
}

.brand-text h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: #fff;
}

.brand-text p {
    color: #ccc;
    font-size: 1.1rem;
    max-width: 500px;
}

/* Right Side - Form */
.login-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    /* White background as per screenshot */
    padding: 1rem;
    /* Minimized padding */
    position: relative;
}

/* Form Styles */
.form-wrapper {
    width: 100%;
    max-width: 380px;
    /* Slightly narrower */
    text-align: center;
    z-index: 10;
}

.form-header {
    margin-bottom: 1rem;
    /* Tight header */
}

.form-logo-display img {
    max-width: 140px;
    /* Smaller Logo */
    margin-bottom: 0.5rem;
    /* Minimal gap */
}

.form-header h2 {
    font-size: 1.5rem;
    /* Smaller Title */
    color: #000;
    font-weight: 700;
    margin-bottom: 0;
    text-transform: uppercase;
}

.form-header p {
    color: #666;
    margin-top: 0;
    font-size: 0.9rem;
}

/* Inputs */
.app-form .form-group {
    position: relative;
    margin-bottom: 0.8rem;
    /* Very tight inputs */
}

.input-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    display: flex;
}

.app-form input {
    width: 100%;
    padding: 0.8rem 0.8rem 0.8rem 2.8rem;
    /* Adjusted padding */
    background-color: var(--input-bg);
    border: 1px solid #333;
    border-radius: 50px;
    /* Rounded inputs */
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s;
    box-sizing: border-box !important;
    /* Fix overflow */
}

.app-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.1);
}

/* Actions & Buttons */
.form-actions {
    display: flex;
    justify-content: center;
    /* Center forgot password */
    margin-bottom: 1.5rem;
}

.forgot-password {
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--accent);
    color: #fff;
    border: none;
    padding: 0.8rem 3rem;
    border-radius: 50px;
    font-weight: 700;
    width: auto;
    /* Not full width */
    min-width: 200px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
    display: block;
    margin: 0 auto;
    /* Center button */
}

.btn-primary:hover {
    background-color: #d65a12;
}

.form-footer p {
    color: #666;
}

.form-footer a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

/* Desktop Query */
@media (min-width: 900px) {
    .login-brand-side {
        display: block;
    }
}


/* --- Dashboard Core Styles (Dark Mode) --- */
/* These apply when inside .dashboard-container which wraps dashboard.html */

.dashboard-container {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-dark);
    color: var(--text-primary);
}

/* Sidebar */
.app-sidebar {
    width: 280px;
    /* Expanded Width */
    background-color: #000;
    border-right: 1px solid #333;
    display: flex;
    flex-direction: column;
    padding: 2rem;

    /* Sticky Magic */
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1000;
    flex-shrink: 0;
    /* Don't shrink */
    transition: width 0.3s ease;
    overflow-x: hidden;
    /* Hide text when collapsed */
}

/* Collapsed State */
.app-sidebar.collapsed {
    width: 90px;
    /* Mini Width */
    padding: 2rem 1rem;
}

.sidebar-logo {
    display: block;
    margin: 0 auto 2rem;
    transition: all 0.3s;
    max-width: 120px;
}

.app-sidebar.collapsed .sidebar-logo {
    max-width: 40px;
    /* Mini Logo */
    content: url('../images/icon-custom.png');
    /* Swapping to icon if possible, or just shrink */
    /* If icon-custom doesn't exist, it will just shrink the text logo which might look bad, 
       so simple scaling is safer if no icon is guaranteed. 
       Let's stick to simple scaling or hiding for now to be safe. */
    opacity: 0.8;
}

/* Nav Items in Collapsed State */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    margin-top: 1rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: #999;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s;
    font-weight: 500;
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* Prevent text wrap */
}

.app-sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 1rem;
}

.app-sidebar.collapsed .nav-item span {
    display: none;
    /* Hide text */
}

.app-sidebar.collapsed .sidebar-footer .logout-link span {
    display: none;
}

.app-sidebar.collapsed .logout-link {
    justify-content: center;
}

.nav-item:hover,
.nav-item.active {
    background-color: var(--accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(243, 112, 33, 0.3);
}

.nav-item i svg {
    stroke-width: 2.5;
    width: 24px;
    height: 24px;
}

.sidebar-footer {
    border-top: 1px solid #222;
    padding-top: 2rem;
    margin-top: auto;
}

.logout-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #666;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.3s;
    white-space: nowrap;
}

.logout-link:hover {
    color: #fff;
}

/* Main Content Area */
.app-main {
    flex: 1;
    /* Removed margin-left because Sticky Sidebar handles space naturally */
    padding: 3rem 4rem;
    /* Adjusted padding */
    background-color: var(--bg-dark);
    position: relative;
    width: 100%;
    /* Ensure full width */
    max-width: 100%;
}

/* Toggle Link Style */
.btn-toggle-menu {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    margin-top: 0.5rem;
    transition: color 0.3s;
}

.btn-toggle-menu:hover {
    color: var(--accent);
}

/* Detailed Header (New) */
.dashboard-header-detailed {
    margin-bottom: 4rem;
}

/* Sticky Header Bar */
.header-top-row {
    position: sticky;
    top: 0;
    z-index: 950;
    /* High Priority but below Sidebar */
    background-color: var(--bg-dark);
    /* Solid to block content */
    border-bottom: 1px solid #222;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    /* Full Width & Spacing Restoration */
    margin: -3rem -4rem 2rem -4rem;
    /* Reduced bottom margin */
    padding: 2rem 4rem 1rem 4rem;
    /* Reduced top/bottom padding */

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
    /* Strong shadow for depth */
}

/* Event Card Section */
.dashboard-header-detailed {
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
    /* Content stays lower */
}

.header-welcome h1 {
    font-size: 2.8rem;
    /* Slightly smaller font */
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    /* Reduced from 2rem */
    line-height: 1.1;
}

.header-welcome .welcome-text {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 1rem;
    /* Added margin top for separation */
    line-height: 1.5;
}

/* Event Info Card (New) */
.event-info-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid #333;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.event-title {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 2rem;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
    font-family: 'Outfit', sans-serif;
}

.event-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
}

.event-detail-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.detail-icon {
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #333;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-item .detail-icon {
    background: rgba(243, 112, 33, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

.detail-text .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #777;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
}

.detail-text .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #eee;
}

/* Sections */
.dashboard-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.section-title {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 4px solid var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info Cards */
.info-card {
    background: #151515;
    border: 1px solid #2a2a2a;
    padding: 2rem;
    border-radius: 12px;
    color: #ccc;
    line-height: 1.7;
}

.warning-card {
    background: linear-gradient(to right, rgba(243, 112, 33, 0.08), transparent);
    border-left: 1px solid var(--accent);
}

.warning-card h4 {
    color: var(--accent);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

/* Widgets Grid */
.grid-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.widget-card {
    background: #151515;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 2rem;
}

.widget-title {
    color: #666;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

/* Finance Widget */
.finance-overview {
    display: flex;
    align-items: center;
    gap: 3rem;
    justify-content: center;
}

.progress-circle {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-text {
    position: absolute;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.finance-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.finance-row {
    font-size: 1.1rem;
    color: #888;
    display: flex;
    justify-content: space-between;
    width: 200px;
    border-bottom: 1px solid #222;
    padding-bottom: 0.5rem;
}

.finance-row span:last-child {
    color: #fff;
    font-weight: 600;
}

.finance-row span:last-child.text-gray {
    color: #666;
}

/* Actions Widget */
.actions-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.action-buttons-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.btn-dashboard {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.primary-action {
    background-color: #fff;
    color: #000;
}

.primary-action:hover {
    background-color: #e5e5e5;
    transform: translateY(-2px);
}

.secondary-action {
    background-color: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
}

.secondary-action:hover {
    background-color: var(--accent);
    color: #fff;
}

.icon {
    margin-right: 0.8rem;
    font-size: 1.2rem;
}

/* Tables */
.table-responsive {
    overflow-x: auto;
}

.orizon-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.8rem;
}

.orizon-table th {
    text-align: left;
    color: #555;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 0 1.5rem;
}

.orizon-table td {
    background-color: #1a1a1a;
    color: #ddd;
    padding: 1.5rem;
    border-top: 1px solid #252525;
    border-bottom: 1px solid #252525;
    font-weight: 500;
}

.orizon-table td:first-child {
    border-left: 1px solid #252525;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #fff;
    font-weight: 600;
}

.orizon-table td:last-child {
    border-right: 1px solid #252525;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.status-pill {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-pill.approved {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.status-pill.pending {
    background: rgba(243, 112, 33, 0.15);
    color: var(--accent);
}

.link-download {
    color: #fff;
    text-decoration: underline;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.link-download:hover {
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .login-container {
        flex-direction: column;
    }

    .login-brand-side {
        display: none;
    }

    /* Sidebar Mobile Handling */
    .app-sidebar {
        position: fixed;
        left: -280px;
        /* Hide off-screen by default */
        top: 0;
        bottom: 0;
        z-index: 2000;
        /* Super high to cover everything */
        transition: left 0.3s ease;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.8);
    }

    .app-sidebar.mobile-open {
        left: 0;
        /* Slide in */
    }

    /* Adjust Main Content for Mobile */
    .app-main {
        margin-left: 0;
        padding: 1.5rem;
        width: 100%;
    }

    /* Sticky Header Mobile Adjustments */
    .header-top-row {
        margin: -1.5rem -1.5rem 2rem -1.5rem;
        /* Reset logic for mobile padding */
        padding: 1.5rem 1.5rem 1rem 1.5rem;
        flex-wrap: wrap;
        /* Allow wrapping if needed, but prefer row */
        gap: 1rem;
    }

    .header-welcome h1 {
        font-size: 2rem;
        /* Much smaller for mobile */
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    .header-welcome .welcome-text {
        font-size: 0.9rem;
    }

    .header-logo img {
        max-width: 100px !important;
        /* Smaller logo */
    }

    /* Stack Widgets */
    .grid-section {
        grid-template-columns: 1fr;
    }

    .finance-overview {
        flex-direction: column;
        gap: 1.5rem;
    }

    .event-details-grid {
        grid-template-columns: 1fr;
    }
}

/* --- TopSport Marketing Site Styles --- */
/* These styles are specifically for home.html and product pages */

:root {
    --primary-color: #D32F2F;
    /* Red */
    --secondary-color: #333;
    --text-color: #333;
    --light-bg: #f9f9f9;
}

/* Reset for TopSport Context */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--text-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.main-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.logo {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    letter-spacing: 1px;
}

.logo-red {
    color: #D32F2F;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: #D32F2F;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: #D32F2F;
    color: white !important;
}

.btn-primary:hover {
    background: #b71c1c;
}

.btn-outline {
    border: 2px solid #D32F2F;
    color: #D32F2F;
    background: transparent;
}

.btn-outline:hover {
    background: #D32F2F;
    color: white;
}

/* Hero */
.hero {
    height: 80vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-content h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: white;
}

.text-highlight {
    color: #D32F2F;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    color: #eee;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Products Section */
.products-section {
    padding: 5rem 0;
    background: #f9f9f9;
}

.section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #000;
}

.products-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.product-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Footer */
.main-footer {
    background: #111;
    color: #ccc;
    padding: 4rem 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    color: white;
    margin-bottom: 1.5rem;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    color: #ccc;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #D32F2F;
}

.footer-bottom {
    background: #000;
    padding: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        padding: 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .main-nav.active {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .header-container {
        flex-wrap: wrap;
    }
}

/* --- Orizon App Overrides (Ensure Orange Brand) --- */
.app-body .btn-primary {
    background-color: #F37021 !important;
    color: #fff !important;
    border: none !important;
}

.app-body .btn-primary:hover {
    background-color: #d65a12 !important;
}

.app-body .text-accent {
    color: #F37021 !important;
}