:root {
    --primary-color: #0056b3;
    /* Deep Blue from Logo */
    --secondary-color: #00a8e8;
    /* Lighter Blue */
    --accent-color: #ff9800;
    /* Orange for Call to Actions */
    --text-color: #333333;
    --light-text: #666666;
    --background-color: #f4f7f6;
    --white: #ffffff;
    --success: #28a745;
    --danger: #dc3545;
    --font-main: 'Outfit', sans-serif;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
}

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

body {
    font-family: var(--font-main);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 1rem;
    font-weight: 600;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
}

.btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--white);
}

.btn-block {
    display: block;
    width: 100%;
}

/* Header & Nav */
.main-header {
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.logo-text .st {
    background: var(--primary-color);
    color: var(--white);
    padding: 2px 5px;
    border-radius: 4px;
    margin-right: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-link {
    font-weight: 500;
    color: var(--text-color);
}

.nav-link:hover {
    color: var(--primary-color);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--primary-color);
    cursor: pointer;
}

/* User Dropdown */
.user-dropdown {
    position: relative;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--white);
    box-shadow: var(--shadow-hover);
    min-width: 150px;
    border-radius: 8px;
    padding: 10px 0;
    z-index: 1001;
}

.user-dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    display: block;
    padding: 8px 20px;
    color: var(--text-color);
}

.dropdown-content a:hover {
    background: #f8f9fa;
    color: var(--primary-color);
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 40px 0;
}

/* Auth Cards */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.auth-card {
    background: var(--white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 450px;
    text-align: center;
}

.auth-card h2 {
    margin-bottom: 30px;
    color: var(--primary-color);
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-control:focus {
    border-color: var(--secondary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.1);
}

/* Alerts */
.messages {
    margin-bottom: 20px;
}

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: 500;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error,
.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Download App Highlight Section */
.download-app-section {
    padding: 78px 0;
    background:
        radial-gradient(900px circle at -15% 20%, rgba(0, 168, 232, 0.16), transparent 45%),
        radial-gradient(820px circle at 110% 80%, rgba(255, 152, 0, 0.16), transparent 42%),
        linear-gradient(180deg, #f2f8ff 0%, #eef6ff 100%);
}

.download-shell {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 44px;
    border-radius: 28px;
    border: 1px solid rgba(0, 86, 179, 0.12);
    background: linear-gradient(125deg, #ffffff 0%, #f8fcff 55%, #fff8ef 100%);
    box-shadow: 0 20px 55px rgba(0, 61, 112, 0.12);
    overflow: hidden;
}

.download-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: center;
}

.download-copy {
    min-width: 0;
}

.download-shell::before,
.download-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.download-shell::before {
    width: 220px;
    height: 220px;
    top: -110px;
    right: -70px;
    background: radial-gradient(circle, rgba(0, 168, 232, 0.3), rgba(0, 168, 232, 0));
}

.download-shell::after {
    width: 170px;
    height: 170px;
    bottom: -85px;
    left: -45px;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.24), rgba(255, 152, 0, 0));
    animation: downloadFloat 7s ease-in-out infinite;
}

.download-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.download-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.92rem;
    color: #0f4d8a;
    background: rgba(0, 168, 232, 0.14);
    border: 1px solid rgba(0, 86, 179, 0.2);
    border-radius: 999px;
    padding: 8px 14px;
}

.download-version {
    font-size: 0.88rem;
    font-weight: 600;
    color: #8f5800;
    background: rgba(255, 152, 0, 0.17);
    border: 1px solid rgba(255, 152, 0, 0.35);
    border-radius: 999px;
    padding: 8px 13px;
}

.download-shell h2 {
    color: #07396a;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    margin-bottom: 12px;
}

.download-shell p {
    color: #40566c;
    font-size: 1.05rem;
    margin-bottom: 20px;
    max-width: 640px;
}

.download-points {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.download-points li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 86, 179, 0.15);
    border-radius: 12px;
    padding: 12px 10px;
    color: #17406a;
    font-weight: 500;
}

.download-points i {
    color: #0084d8;
}

.download-actions {
    position: relative;
}

.download-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 240px;
    padding: 14px 26px;
    border-radius: 14px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.2px;
    background: linear-gradient(135deg, #006fd6, #00a8e8);
    box-shadow: 0 14px 30px rgba(0, 111, 214, 0.28);
    border: 0;
}

.download-btn i {
    font-size: 1rem;
}

.download-btn-sub {
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.92;
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(0, 111, 214, 0.35);
}

.download-btn.is-disabled,
.download-btn:disabled {
    color: #6d7b89;
    background: linear-gradient(135deg, #e7edf3, #dbe7f1);
    box-shadow: none;
    cursor: not-allowed;
}

.download-preview-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-preview {
    width: 260px;
    border-radius: 34px;
    padding: 12px;
    background: linear-gradient(150deg, #0b2240, #1b4e82 45%, #00a4e5);
    box-shadow: 0 24px 44px rgba(5, 33, 70, 0.34);
    transform: rotate(3deg);
    transition: transform 0.35s ease;
}

.download-shell:hover .phone-preview {
    transform: rotate(0deg) translateY(-4px);
}

.phone-notch {
    width: 92px;
    height: 16px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.phone-screen {
    border-radius: 26px;
    padding: 15px 14px;
    min-height: 425px;
    background:
        linear-gradient(180deg, rgba(4, 28, 54, 0.88) 0%, rgba(8, 48, 86, 0.95) 100%),
        radial-gradient(380px circle at 75% -15%, rgba(0, 168, 232, 0.5), transparent 45%);
    color: #dff4ff;
    display: flex;
    flex-direction: column;
}

.phone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 18px;
}

.phone-header i {
    color: #57c8ff;
}

.phone-pill {
    font-size: 0.7rem;
    color: #95f8ff;
    background: rgba(0, 168, 232, 0.22);
    border: 1px solid rgba(87, 200, 255, 0.45);
    border-radius: 999px;
    padding: 3px 10px;
}

.phone-earnings {
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 168, 232, 0.27), rgba(0, 109, 179, 0.45));
    border: 1px solid rgba(146, 228, 255, 0.28);
    padding: 14px;
    margin-bottom: 14px;
}

.phone-earnings small {
    display: block;
    font-size: 0.72rem;
    opacity: 0.88;
    margin-bottom: 3px;
}

.phone-earnings strong {
    display: block;
    font-size: 1.4rem;
    line-height: 1.1;
    color: #ffffff;
}

.phone-earnings em {
    font-style: normal;
    font-size: 0.74rem;
    color: #88ffb0;
}

.phone-cards {
    display: grid;
    gap: 10px;
    margin-top: 5px;
}

.phone-card {
    border-radius: 12px;
    border: 1px solid rgba(133, 211, 255, 0.2);
    background: rgba(7, 39, 72, 0.6);
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
}

.phone-card span {
    color: #9dc9ea;
}

.phone-card b {
    color: #ffffff;
}

.phone-footer-row {
    margin-top: auto;
    display: flex;
    gap: 8px;
}

.phone-footer-row span {
    height: 8px;
    flex: 1;
    border-radius: 999px;
    background: rgba(164, 226, 255, 0.28);
}

@keyframes downloadFloat {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

@media (max-width: 768px) {
    .download-app-section {
        padding: 60px 0;
    }

    .download-shell {
        padding: 30px 22px;
        border-radius: 20px;
    }

    .download-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .download-preview-wrap {
        order: -1;
    }

    .phone-preview {
        width: min(240px, 100%);
        transform: none;
    }

    .download-shell:hover .phone-preview {
        transform: none;
    }

    .phone-screen {
        min-height: 380px;
    }

    .download-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-points {
        grid-template-columns: 1fr;
        margin-bottom: 22px;
    }

    .download-points li {
        justify-content: flex-start;
    }

    .download-btn {
        width: 100%;
        min-width: 0;
    }
}


/* Footer */
.main-footer {
    background: #0d1b2a;
    color: #e0e0e0;
    padding: 60px 0 20px;
}

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

.footer-col h3 {
    color: var(--white);
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col a:hover {
    color: var(--secondary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 992px) {
    .container {
        padding: 0 15px;
    }
}

@media (max-width: 768px) {

    /* Navbar Mobile */
    .nav-links {
        display: none;
        flex-direction: column;
        position: fixed;
        /* Better than absolute for overlays */
        top: 60px;
        /* Approximate header height */
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--white);
        padding: 20px;
        align-items: center;
        /* Center links */
        z-index: 1000;
        overflow-y: auto;
    }

    .nav-links.active {
        display: flex;
    }

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

    .nav-link {
        font-size: 1.2rem;
        padding: 10px 0;
        display: block;
        width: 100%;
        text-align: center;
    }

    .user-dropdown {
        width: 100%;
        text-align: center;
    }

    .dropdown-content {
        position: static;
        box-shadow: none;
        background: #f8f9fa;
        width: 100%;
        display: none;
        /* Keep hidden until toggled or hover logic changed */
        padding: 0;
    }

    /* Make dropdown visible on mobile when "hovered" or active container (simplified for now) */
    .user-dropdown:hover .dropdown-content {
        display: block;
    }

    /* Auth Cards */
    .auth-wrapper {
        min-height: calc(100vh - 140px);
        /* Adjust for header/footer */
        padding: 20px 0;
    }

    .auth-card {
        padding: 30px 20px;
        width: 100%;
        box-shadow: none;
        /* Cleaner on mobile */
        border: 1px solid #eee;
    }

    /* Tables Responsive Wrapper */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    table {
        min-width: 600px;
        /* Force scroll */
    }

    /* Dashboard Layouts - Assuming Grid/Flex is used in pages */
    .row {
        flex-direction: column;
    }

    .col-md-6,
    .col-lg-4 {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .logo-text {
        font-size: 1.2rem;
    }

    .auth-card {
        padding: 20px 15px;
    }
}

/* Prevent dashboard sidebar from overlapping the footer.
   Reserve space at the bottom of the viewport for the footer so the
   fixed sidebar doesn't cover footer content on pages using the
   dashboard layout. Adjust values if your footer height changes. */
.dashboard-sidebar {
    /* If pages define a fixed 100vh sidebar, reduce it slightly here */
    position: fixed;
    top: 0;
    height: calc(100vh - 140px);
    overflow-y: auto;
}

@media (max-width: 1200px) {
    .dashboard-sidebar {
        height: calc(100vh - 140px);
    }
}

@media (max-width: 768px) {
    .dashboard-sidebar {
        height: calc(100vh - 160px);
    }
}

@media (max-width: 600px) {
    .dashboard-sidebar {
        height: calc(100vh - 180px);
    }
}

/* Layout spacing for pages that use the fixed dashboard sidebar */
.dashboard-main {
    margin-left: 280px; /* default for large screens */
    transition: margin-left 0.25s ease, padding 0.25s ease;
}

/* Ensure footer sits above other elements when needed */
.main-footer {
    position: relative;
    z-index: 5;
}

/* Desktop → Slightly smaller screens */
@media (max-width: 1200px) {
    .dashboard-sidebar {
        width: 250px;
    }
    .dashboard-main {
        margin-left: 250px;
    }
}

/* Tablet and small laptops: stack sidebar above content (not fixed) */
@media (max-width: 768px) {
    .dashboard-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        top: auto;
        overflow: visible;
        padding-bottom: 12px;
    }
    .dashboard-main {
        margin-left: 0;
        padding-top: 10px;
    }
}

/* Mobile: compact spacing */
@media (max-width: 600px) {
    .dashboard-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 12px 16px;
    }
    .dashboard-main {
        margin-left: 0;
        padding: 12px;
    }
    .main-footer {
        padding: 40px 0 20px;
    }
}
/* Off-canvas sidebar behavior for mobile/tablet
   This overrides the stacking behavior to present a slide-in sidebar
   overlay when the user toggles the menu on small screens. It only
   applies on screens <= 768px to avoid affecting desktop layout. */
@media (max-width: 768px) {
    .dashboard-sidebar {
        /* Visible by default on small screens */
        transform: none;
        transition: transform 0.25s ease;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        z-index: 1002;
        box-shadow: 2px 0 20px rgba(0,0,0,0.15);
        background: linear-gradient(180deg, #5B4BED 0%, #7C5FF0 100%);
    }

    /* When the body has this class the sidebar is hidden */
    body.sidebar-hidden {
        /* allow page scrolling when sidebar hidden */
        overflow: auto;
    }

    body.sidebar-hidden .dashboard-sidebar {
        transform: translateX(-100%);
    }

    /* A small tweak so main content isn't shifted when overlaying */
    .dashboard-main {
        margin-left: 0;
    }
}

/* Overlay element styling (if created dynamically in JS) */

/* Strong responsive overrides to counter per-page inline CSS and
   prevent horizontal overflow on small screens. These use !important
   because some templates inject their own sidebar/main rules after
   the global stylesheet. */
@media (max-width: 1200px) {
    .dashboard-main {
        margin-left: 250px !important;
    }
    .dashboard-sidebar {
        width: 250px !important;
    }
}

@media (max-width: 768px) {
    /* Force main content to occupy full width on small devices */
    .dashboard-main {
        margin-left: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Ensure the sidebar behaves as an off-canvas panel when hidden
       but is visible by default on small screens. */
    .dashboard-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important; /* visible by default */
        width: 280px !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }

    /* When body has `sidebar-hidden`, move the sidebar off-screen */
    body.sidebar-hidden .dashboard-sidebar {
        transform: translateX(-100%) !important;
    }

    /* Allow tables to shrink or use the responsive wrapper instead of forcing min-width */
    table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    /* Prevent modals or fixed elements from causing overflow */
    #statusModal {
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: calc(100% - 40px) !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 600px) {
    .dashboard-sidebar {
        position: relative !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
    }
    .dashboard-main {
        margin-left: 0 !important;
        padding: 10px !important;
    }
}

/* Close button placed inside the sidebar for small screens */
@media (max-width: 768px) {
    .sidebar-close-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(255,255,255,0.12);
        color: #fff;
        border: none;
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 1003;
        font-weight: 600;
    }
    .sidebar-close-btn i { font-size: 0.95rem; }
}