html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* site.css - Global styles */

:root {
    /* Color palette */
    --primary-color: #0052cc; /* Deep blue */
    --secondary-color: #ffffff; /* White */
    --accent-color: #ff6600; /* Vibrant orange */
    --light-bg: #f5f7fa; /* Light background */
    --dark-text: #333333; /* Dark grey for text */
    --muted-text: #666666; /* Medium grey for secondary text */
}

/* Reset and base */
body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-bg);
    color: var(--dark-text);
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

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

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-md-6, .col-md-4 {
    box-sizing: border-box;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-md-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

/* Sidebar (admin portal) */
.sidebar {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    min-height: 100vh;
    padding-top: 2rem;
}

    .sidebar .nav-link {
        color: var(--secondary-color);
        padding: 0.75rem 1rem;
        display: block;
    }

        .sidebar .nav-link.active,
        .sidebar .nav-link:hover {
            background-color: var(--accent-color);
            color: var(--secondary-color);
        }

/* Main content area */
.main-content {
    padding: 2rem;
    background: var(--secondary-color);
}

/* Buttons */
.btn {
    font-weight: 500;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
}

.btn-secondary {
    background-color: var(--accent-color);
    color: var(--secondary-color);
    border: none;
}

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


/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

    .table th,
    .table td {
        padding: 0.75rem;
        border: 1px solid #dee2e6;
    }

    .table thead th {
        background-color: var(--primary-color);
        color: var(--secondary-color);
    }

    .table tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }

/* Index page columns */
.index-header {
    text-align: center;
    margin-bottom: 2rem;
}

    .index-header h1 {
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .index-header p.lead {
        color: var(--muted-text);
    }

.index-section .card {
    background-color: var(--secondary-color);
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Login page */
.login-container {
    max-width: 400px;
    margin: 5rem auto;
    padding: 2rem;
    background-color: var(--secondary-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

    .login-container h2 {
        text-align: center;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
    }

    .login-container .form-control {
        margin-bottom: 1rem;
        padding: 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }

/* Utility */
.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

    .btn-outline-danger:hover {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }




/*
- Define your color variables at the top for easy theming.
- The sidebar uses `.sidebar` and `.nav-link` for left‑hand navigation.
- Buttons adopt `.btn-primary`, `.btn-secondary`, and `.btn-outline-primary`.
- Tables get a clean header and zebra‑striping.
- Index page cards (`.index-section .card`) add a subtle shadow.
- Login page centered via `.login-container`.

Add this CSS to your project (e.g. `wwwroot/css/site.css`) and reference it in your `_Layout.cshtml`:
    */

/* Custom Logout button style */

/* Base App Button Style (Figma-inspired) */
/* Global pill button (used anywhere) */
.btn.btn-app {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    user-select: none;
    background: #fff !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 2rem !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    transition: all .2s ease;
    min-width: 90px;
}

    .btn.btn-app:hover {
        background: var(--primary-color) !important;
        color: #fff !important;
        transform: translateY(-1px);
    }

    .btn.btn-app:active {
        background: #003d99 !important;
        color: #fff !important;
        transform: translateY(0);
    }

/* Sidebar-specific tweaks */
.sidebar .btn.btn-app {
    display: block;
    width: 100%;
    text-align: center; /* make them look like proper nav items */
    margin-bottom: .5rem;
    background-color: transparent !important; /* transparent by default */
}

    .sidebar .btn.btn-app.active,
    .sidebar .btn.btn-app:hover {
        background: var(--primary-color) !important;
        color: #fff !important;
    }

/* Sidebar user name */
.sidebar h6 {
    color: #000 !important; /* black text */
    font-weight: 600;
    margin-bottom: 1rem;
}

.sidebar-logo {
    max-width: 100%; /* never overflow the sidebar */
    height: auto; /* keep correct proportions */
    display: block;
    margin: 0 auto; /* center horizontally */
}

/* Logout (red outline) */
.btn.btn-app.btn-danger {
    background: #fff !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    border-radius: 2rem !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.9rem !important;
}

    .btn.btn-app.btn-danger:hover {
        background: #dc3545 !important;
        color: #fff !important;
    }

    .btn.btn-app.btn-danger:active {
        background: #bd2130 !important;
        color: #fff !important;
    }


.description-section {
    width: 100%;
    padding: 3rem 2rem; /* breathing space */
}

.description-wrapper {
    max-width: 100%; /* remove Bootstrap .container constraint */
}

.description-text {
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: center; /* or left if you prefer */
    margin: 0 auto;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
}

main.container {
    flex: 1 0 auto; /* take the remaining height */
}

/* footer styles */
.site-footer {
    margin-top: auto; /* key: sticks to bottom when content is short */
    text-align: center; /* center text */
    padding: 12px 16px;
    background: #fff; /* nuke gradient/backgrounds */
    box-shadow: none; /* nuke shadow */
    border-top: 1px solid #e5e7eb;
}

/* optional: constrain to your main content width */
.footer-inner {
    max-width: 1200px; /* match your main container */
    margin: 0 auto; /* center within page */
}

.center-text {
    text-align: center;
}