/**
 * Shadowrun Gamemaster - Main Stylesheet
 * Cyberpunk/Neon theme for dark mode
 */

/* =============================================================================
   CSS Variables
   ============================================================================= */
:root {
    --sr-primary: #00ff9f;
    --sr-secondary: #ff00ff;
    --sr-dark: #0a0a0f;
    --sr-darker: #050508;
    --sr-card: #12121a;
    --sr-border: #2a2a3a;
    --sr-text: #e0e0e0;
    --sr-card-hover: #1a1a25;
}

/* =============================================================================
   Base Styles
   ============================================================================= */
body {
    background: linear-gradient(135deg, var(--sr-darker) 0%, var(--sr-dark) 100%);
    color: var(--sr-text);
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* =============================================================================
   Navbar
   ============================================================================= */
.navbar {
    background: rgba(10, 10, 15, 0.95) !important;
    border-bottom: 1px solid var(--sr-border);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    color: var(--sr-primary) !important;
    font-weight: bold;
    text-shadow: 0 0 10px var(--sr-primary);
}

.nav-link {
    color: var(--sr-text) !important;
    transition: all 0.3s;
}

.nav-link:hover,
.nav-link.active {
    color: var(--sr-primary) !important;
    text-shadow: 0 0 8px var(--sr-primary);
}

/* =============================================================================
   Cards
   ============================================================================= */
.card {
    background: var(--sr-card);
    border: 1px solid var(--sr-border);
    border-radius: 8px;
    transition: all 0.3s;
}

.card:hover {
    border-color: var(--sr-primary);
    box-shadow: 0 0 20px rgba(0, 255, 159, 0.1);
}

.card-clickable {
    cursor: pointer;
}

.card-header {
    background: rgba(0, 255, 159, 0.1);
    border-bottom: 1px solid var(--sr-border);
}

/* =============================================================================
   Buttons
   ============================================================================= */
.btn-sr {
    background: linear-gradient(135deg, var(--sr-primary), #00cc7f);
    color: var(--sr-dark);
    border: none;
    font-weight: 600;
}

.btn-sr:hover {
    background: var(--sr-primary);
    color: var(--sr-dark);
    box-shadow: 0 0 15px var(--sr-primary);
}

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

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

/* =============================================================================
   Tables
   ============================================================================= */
.table {
    color: var(--sr-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--sr-text);
    --bs-table-border-color: var(--sr-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--sr-text);
    --bs-table-hover-bg: rgba(0, 255, 159, 0.08);
    --bs-table-hover-color: var(--sr-text);
}

.table thead th {
    background: rgba(0, 255, 159, 0.1);
    border-color: var(--sr-border);
    color: var(--sr-primary);
}

.table tbody {
    background: var(--sr-card);
}

.table tbody tr {
    background: var(--sr-card);
}

.table td,
.table th {
    border-color: var(--sr-border);
    background: inherit;
}

.table-hover tbody tr:hover {
    background: rgba(0, 255, 159, 0.08) !important;
}

.table-hover tbody tr:hover td {
    background: transparent;
}

/* =============================================================================
   Badges
   ============================================================================= */
.badge-sr {
    background: var(--sr-primary);
    color: var(--sr-dark);
}

.badge.bg-secondary,
.badge.bg-dark {
    color: #f0f0f0 !important;
}

.badge.bg-dark {
    border: 1px solid var(--sr-border);
}

/* =============================================================================
   Forms
   ============================================================================= */
.form-control,
.form-select {
    background: var(--sr-darker);
    border: 1px solid var(--sr-border);
    color: var(--sr-text);
}

.form-control:focus,
.form-select:focus {
    background: var(--sr-darker);
    border-color: var(--sr-primary);
    color: var(--sr-text);
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 159, 0.25);
}

.form-label,
.form-check-label,
.input-group-text {
    color: var(--sr-text) !important;
}

input,
textarea,
select,
.form-control,
.form-select {
    color: #e8e8f0 !important;
}

::placeholder {
    color: #8888a0 !important;
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
    background-color: #1a1a25;
    color: #888 !important;
    opacity: 0.7;
}

/* =============================================================================
   Pagination
   ============================================================================= */
.pagination .page-link {
    background: var(--sr-card);
    border-color: var(--sr-border);
    color: var(--sr-text);
}

.pagination .page-link:hover {
    background: rgba(0, 255, 159, 0.1);
    border-color: var(--sr-primary);
    color: var(--sr-primary);
}

.pagination .active .page-link {
    background: var(--sr-primary);
    border-color: var(--sr-primary);
    color: var(--sr-dark);
}

/* =============================================================================
   Module Cards (Dashboard)
   ============================================================================= */
.module-card {
    cursor: pointer;
    text-decoration: none;
}

.module-card .icon {
    font-size: 3rem;
    color: var(--sr-primary);
}

.module-card:hover .icon {
    text-shadow: 0 0 20px var(--sr-primary);
}

/* =============================================================================
   Stat Badges
   ============================================================================= */
.stat-badge {
    background: var(--sr-darker);
    border: 1px solid var(--sr-border);
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

/* =============================================================================
   Utility Classes
   ============================================================================= */
.glow-text {
    text-shadow: 0 0 10px var(--sr-primary);
}

/* =============================================================================
   Global Dark Theme Text Color Override
   Forces all text to be readable on dark bg.
   ============================================================================= */

/* Base: Everything inherits light text */
body,
.card,
.card-body,
.card-header,
.card-footer,
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.list-group-item,
.dropdown-menu,
.popover,
.tooltip-inner,
.offcanvas,
.accordion-body,
.tab-content,
.alert {
    color: var(--sr-text) !important;
}

/* All headings - slightly brighter */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #f0f0f5 !important;
}

/* Paragraphs, divs, spans, labels */
p, div, span, label, li, td, th, dt, dd, figcaption, legend {
    color: inherit;
}

/* Strong/Bold - brightest */
strong, b, .fw-bold {
    color: #f8f8fc !important;
}

/* Muted text - readable but dimmer (WCAG AA 4.5:1) */
.text-muted,
.text-secondary,
small,
.small,
.form-text,
figcaption {
    color: #a8a8be !important;
}

/* Status colors - bright versions for dark bg */
.text-primary { color: var(--sr-primary) !important; }
.text-success { color: #4ade80 !important; }
.text-warning { color: #fbbf24 !important; }
.text-danger { color: #f87171 !important; }
.text-info { color: #38bdf8 !important; }
.text-light { color: #f0f0f5 !important; }

/* Links */
a:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: var(--sr-primary);
}

a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: #33ffb3;
}

/* Dropdowns */
.dropdown-item,
.form-select option,
select option {
    color: #e0e0e0 !important;
    background-color: #1a1a25;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 255, 159, 0.1);
    color: var(--sr-primary) !important;
}

/* Breadcrumbs */
.breadcrumb-item.active {
    color: var(--sr-text) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #666 !important;
}

/* Alerts */
.alert {
    background-color: rgba(20, 20, 30, 0.9);
    border-color: var(--sr-border);
}

/* Modals */
.modal-content {
    background-color: var(--sr-card);
    border: 1px solid var(--sr-border);
}

.modal-header,
.modal-footer {
    border-color: var(--sr-border);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Spinners */
.spinner-border.text-primary {
    color: var(--sr-primary) !important;
}

/* Blockquotes */
blockquote,
.blockquote {
    color: var(--sr-text) !important;
}

/* =============================================================================
   Auth Pages (Login, Password Reset, etc.)
   ============================================================================= */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    background: var(--sr-card);
    border: 1px solid var(--sr-border);
    border-radius: 12px;
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 0 40px rgba(0, 255, 159, 0.1);
}

.auth-title {
    color: var(--sr-primary);
    text-shadow: 0 0 10px var(--sr-primary);
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    color: #888;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.auth-icon {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-icon i {
    font-size: 3rem;
    color: var(--sr-primary);
    text-shadow: 0 0 20px var(--sr-primary);
}

.auth-link {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    color: #888;
    text-decoration: none;
    font-size: 0.85rem;
}

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

.auth-btn {
    background: linear-gradient(90deg, var(--sr-primary), #00cc7f);
    border: none;
    color: #000;
    font-weight: 600;
    padding: 0.75rem;
    width: 100%;
    margin-top: 1rem;
    transition: all 0.3s;
}

.auth-btn:hover {
    background: linear-gradient(90deg, #00cc7f, var(--sr-primary));
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 159, 0.4);
}

/* Error list in forms */
.errorlist {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    color: #ff6b6b;
    font-size: 0.85rem;
}

/* =============================================================================
   Dev Mode (DEBUG=True)
   Rotes Logo zur Unterscheidung von Production
   ============================================================================= */
.dev-mode .navbar-brand {
    color: #ff4444 !important;
    text-shadow: 0 0 10px #ff4444;
}

.dev-mode .navbar-brand::after {
    content: " [DEV]";
    font-size: 0.7em;
    opacity: 0.8;
}