/* =====================================================================
   BingoBoard — design tokens
   Palette: indigo (primary) + cyan (accent/"link") + emerald (active)
   + amber (paused) + rose (danger), cool soft-gray surface.
   Type: Sora (headings) + Inter (body/UI)
   ===================================================================== */
:root {
    --bb-primary: #4F46E5;
    --bb-primary-dark: #4338CA;
    --bb-primary-light: #EEF0FF;
    --bb-accent: #06B6D4;
    --bb-success: #10B981;
    --bb-warning: #F59E0B;
    --bb-danger: #F43F5E;
    --bb-bg: #F1F3F9;
    --bb-surface: #FFFFFF;
    --bb-text: #1E1B2E;
    --bb-muted: #6B7280;
    --bb-border: #E6E8F0;
    --bb-radius: 12px;
    --bb-shadow: 0 2px 10px rgba(31, 27, 60, 0.06);
    --bb-shadow-hover: 0 10px 28px rgba(79, 70, 229, 0.16);
}

body {
    background-color: var(--bb-bg);
    color: var(--bb-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---- Navbar ---- */
.app-navbar {
    background: linear-gradient(100deg, #3730A3 0%, var(--bb-primary) 55%, #4C1D95 100%);
    box-shadow: 0 4px 18px rgba(55, 48, 163, 0.28);
}
.app-brand {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}
.app-navbar .nav-link {
    font-weight: 500;
    opacity: 0.88;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.app-navbar .nav-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.role-badge {
    background: linear-gradient(120deg, var(--bb-accent), var(--bb-primary));
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---- Cards ---- */
.card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
}

/* Project cards get a colored accent stripe on the left, denoting status */
.project-box {
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border-left: 4px solid var(--bb-border);
}
.project-box.status-active {
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, var(--bb-accent), var(--bb-primary)) 1;
}
.project-box.status-paused {
    border-left: 4px solid var(--bb-warning);
}
.project-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--bb-shadow-hover);
}

/* ---- Stat tiles (dashboard) ---- */
.stat-tile {
    border: none;
    border-radius: var(--bb-radius);
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--bb-shadow);
}
.stat-tile .fs-3 { font-family: 'Sora', sans-serif; font-weight: 800; }
.stat-tile.tile-indigo { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.stat-tile.tile-cyan   { background: linear-gradient(135deg, #06B6D4, #4F46E5); }
.stat-tile.tile-emerald{ background: linear-gradient(135deg, #10B981, #06B6D4); }
.stat-tile.tile-amber  { background: linear-gradient(135deg, #F59E0B, #F43F5E); }
.stat-tile .text-muted { color: rgba(255,255,255,0.82) !important; }

/* ---- Badges ---- */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.4em 0.7em;
    border-radius: 999px;
}
.badge.bg-success { background: linear-gradient(120deg, #10B981, #06B6D4) !important; }
.badge.bg-secondary { background: linear-gradient(120deg, #F59E0B, #F97316) !important; }

/* ---- Buttons ---- */
.btn-primary {
    background: linear-gradient(120deg, var(--bb-primary), #7C3AED);
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.36);
}
.btn-outline-primary {
    color: var(--bb-primary);
    border-color: var(--bb-primary);
    font-weight: 600;
}
.btn-outline-primary:hover {
    background: var(--bb-primary);
    border-color: var(--bb-primary);
}
.btn-outline-danger:hover { transform: translateY(-1px); }

/* ---- Progress bars ---- */
.progress {
    height: 10px;
    border-radius: 999px;
    background-color: var(--bb-primary-light);
}
.progress-bar {
    background: linear-gradient(90deg, var(--bb-accent), var(--bb-primary));
    border-radius: 999px;
}

/* ---- Section headings ---- */
.section-heading {
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, var(--bb-accent), var(--bb-primary)) 1;
    padding-left: 12px;
    margin: 1.75rem 0 1rem;
    font-family: 'Sora', sans-serif;
}

/* ---- Forms ---- */
.form-control, .form-select {
    border-radius: 8px;
    border-color: var(--bb-border);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}
textarea.url-box {
    font-family: 'Menlo', monospace;
    font-size: 0.9rem;
    border-radius: 8px;
}

/* ---- Tables ---- */
.table thead th {
    background-color: var(--bb-primary-light);
    color: var(--bb-primary-dark);
    font-weight: 700;
    border-bottom: none;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #FAFAFE;
}

/* ---- Compact DataTables styling ---- */
table.dataTable {
    font-size: 0.85rem;
}
table.dataTable thead th {
    padding: 0.55rem 0.6rem;
}
table.dataTable tbody td {
    padding: 0.42rem 0.6rem;
    vertical-align: middle;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.2rem 0.55rem !important;
    border-radius: 6px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(120deg, var(--bb-accent), var(--bb-primary)) !important;
    border: none !important;
    color: #fff !important;
}

/* ---- Custom pagination (render_pagination helper) ---- */
.pagination .page-link {
    color: var(--bb-primary);
    border-color: var(--bb-border);
    border-radius: 8px !important;
    margin: 0 2px;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(120deg, var(--bb-accent), var(--bb-primary));
    border-color: transparent;
}

/* ---- Login card ---- */
.login-shell {
    background: linear-gradient(135deg, #3730A3 0%, var(--bb-primary) 45%, #06B6D4 100%);
}
.login-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(30, 27, 75, 0.35);
}