/* RUgolok Turnier — Mobile-first CSS */
body { background-color: #f8f9fa; font-size: 0.95rem; }

.game-card {
    border: 1px solid #dee2e6; border-radius: 8px;
    padding: 12px; margin-bottom: 10px;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.game-card.past { opacity: 0.7; background: #f0f0f0; }
.game-card.today { border-left: 4px solid #ffc107; }

.bet-input {
    width: 40px; height: 36px; text-align: center;
    font-weight: bold; font-size: 1.1rem;
    border: 2px solid #dee2e6; border-radius: 6px;
}
.bet-input:focus { border-color: #0d6efd; outline: none; }

.group-table { font-size: 0.85rem; }
.group-table th { background: #343a40; color: #fff; white-space: nowrap; }
.group-table .my-row { background: #e8f0fe !important; font-weight: 600; }

.duel-card {
    border: 1px solid #dee2e6; border-radius: 10px;
    margin-bottom: 16px; background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
/* .duel-header { background: #343a40; color: #fff; padding: 8px 12px; font-weight: 600; } */
.duel-body { padding: 12px; }
/* .duel-score { font-size: 1.5rem; font-weight: bold; text-align: center; } */

.admin-card { border-left: 4px solid #ffc107; }

@media (max-width: 576px) {
    .game-card { padding: 8px; font-size: 0.9rem; }
    .bet-input { width: 36px; height: 32px; font-size: 1rem; }
    .group-table { font-size: 0.75rem; }
    main { padding-left: 8px !important; padding-right: 8px !important; }
}%%writefile /content/drive/MyDrive/turnier/app/static/css/turnier.css


/* RUgolok Turnier — Mobile-first CSS */
body { background-color: #f8f9fa; font-size: 0.95rem; }

.game-card {
    border: 1px solid #dee2e6; border-radius: 8px;
    padding: 12px; margin-bottom: 10px;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.game-card.past { opacity: 0.7; background: #f0f0f0; }
.game-card.today { border-left: 4px solid #ffc107; }

.bet-input {
    width: 40px; height: 36px; text-align: center;
    font-weight: bold; font-size: 1.1rem;
    border: 2px solid #dee2e6; border-radius: 6px;
}
.bet-input:focus { border-color: #0d6efd; outline: none; }

.group-table { font-size: 0.85rem; }
.group-table th { background: #343a40; color: #fff; white-space: nowrap; }
.group-table .my-row { background: #e8f0fe !important; font-weight: 600; }

.duel-card {
    border: 1px solid #dee2e6; border-radius: 10px;
    margin-bottom: 16px; background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.duel-header { background: #343a40; color: #fff; padding: 8px 12px; font-weight: 600; }
.duel-body { padding: 12px; }
.duel-score { font-size: 1.5rem; font-weight: bold; text-align: center; }

.admin-card { border-left: 4px solid #ffc107; }

@media (max-width: 576px) {
    .game-card { padding: 8px; font-size: 0.9rem; }
    .bet-input { width: 36px; height: 32px; font-size: 1rem; }
    .group-table { font-size: 0.75rem; }
    main { padding-left: 8px !important; padding-right: 8px !important; }
}


/* ============================================================
   PLAYER LINKS — einheitliches Styling für alle User-Links
   Gleicher Stil wie auf /turnier/allplayers
   ============================================================ */

/* Player-Link auf dunklem Hintergrund (z.B. Duell-Header) */
.player-link-light {
    color: #ffd700 !important;
    text-decoration: none !important;
    font-weight: 700;
    transition: color 0.2s, opacity 0.2s;
}
.player-link-light:hover {
    color: #fff !important;
    opacity: 0.9;
}

/* Player-Stats-Link (📊 Icon) */
.player-stats-link {
    text-decoration: none !important;
    margin-left: 6px;
    font-size: 0.85rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.player-stats-link:hover {
    opacity: 1;
}

/* Player-Link auf hellem Hintergrund (z.B. Tabellen, Gruppenlisten) */
.player-link {
    color: #ff6600 !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.2s;
}
.player-link:hover {
    color: #cc5200 !important;
    text-decoration: underline !important;
}

/* Bet-Col: Speichern-Button zentrieren */
.bet-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   RUGOLOK NAVBAR + LOGO + CSS-VARIABLEN
   Aus style.css (PROD) übernommen
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Roboto+Condensed:wght@400;700&display=swap');

:root {
    --color-text: #333333;
    --color-bg: #ffffff;
    --color-link: #4682B4;
    --color-link-hover: #2F4F4F;
    --color-orange: #ff6600;
    --color-orange-hover: #C43C03;
    --color-orange-dark: #993300;
    --color-header-gold: #FFCC00;
    --color-header-green: #99FF33;
    --color-header-cyan: #1a7f7f;
    --color-header-sandy: #F4A460;
    --color-header-text: #666666;
    --color-module-bg: #FFEEA0;
    --color-table-header: #F5DEB3;
    --color-table-active: #FFF8DC;
    --color-table-past: #efefef;
    --color-list-header: #ADD8E6;
    --color-list-row1: #FFFFFF;
    --color-list-row2: #ECF3F7;
    --color-catbg: #FFCC66;
    --color-border: #cccccc;
    --color-border-dark: #999999;
    --color-message: #ff6600;
    --color-message-bg: #FFF8DC;
    --gradient-navbar: linear-gradient(90deg, #E85D00, #FF6600 30%, #FF8533 70%, #FFCC00);
    --font-body: 'Roboto', Tahoma, Verdana, Arial, sans-serif;
    --font-condensed: 'Roboto Condensed', Tahoma, Arial, sans-serif;
    --font-xs: 0.65rem;
    --font-sm: 0.75rem;
    --font-base: 0.85rem;
    --font-md: 1rem;
    --font-lg: 1.2rem;
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
}

/* === LOGO === */
.rugolok-logo { display: inline-flex; align-items: center; gap: var(--sp-sm); text-decoration: none !important; }
.logo-triangle { width: 36px; height: 36px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.logo-triangle svg { width: 100%; height: 100%; }
.logo-text { font-family: var(--font-body); font-weight: 900; font-size: 1.6rem; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); letter-spacing: 1px; }
.logo-subtitle { font-size: var(--font-xs); color: rgba(255,255,255,0.85); font-weight: 400; display: block; }

/* === NAVBAR === */
.navbar-rugolok { background: var(--gradient-navbar); box-shadow: var(--shadow-md); padding: var(--sp-sm) 0; position: sticky; top: 0; z-index: 1050; }
.navbar-rugolok .nav-link { color: #fff !important; font-family: var(--font-condensed); font-weight: 700; font-size: var(--font-base); padding: var(--sp-sm) var(--sp-md) !important; border-radius: var(--radius-sm); text-transform: uppercase; }
.navbar-rugolok .nav-link:hover, .navbar-rugolok .nav-link.active { background: rgba(255,255,255,0.2); }
.navbar-rugolok .nav-link::before { content: '\25B6'; font-size: 0.6em; margin-right: 4px; opacity: 0.7; }
.navbar-rugolok .navbar-toggler { border: 2px solid rgba(255,255,255,0.6); }
.navbar-rugolok .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-rugolok .dropdown-menu { background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.navbar-rugolok .dropdown-item { font-family: var(--font-condensed); font-size: var(--font-sm); }
.navbar-rugolok .dropdown-item:hover { background: var(--color-table-active); color: var(--color-orange); }
.navbar-rugolok .dropdown-item::before { content: '\25B6'; font-size: 0.5em; margin-right: 6px; color: var(--color-orange); }

/* === BOOTSTRAP OVERRIDES === */
.btn-primary { background-color: #ff6600 !important; border-color: #ff6600 !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: #C43C03 !important; border-color: #C43C03 !important; }
.btn-outline-primary { color: #ff6600 !important; border-color: #ff6600 !important; }
.btn-outline-primary:hover { background-color: #ff6600 !important; color: #fff !important; }
.btn-success { background-color: #2d6a4f !important; border-color: #2d6a4f !important; }
.btn-success:hover { background-color: #1a472a !important; border-color: #1a472a !important; }
.btn-info { background-color: #00BFFF !important; border-color: #00BFFF !important; color: #fff !important; }
.btn-info:hover { background-color: #0099CC !important; border-color: #0099CC !important; }
.btn-danger { background-color: #C43C03 !important; border-color: #C43C03 !important; }
.btn-outline-info { color: #00BFFF !important; border-color: #00BFFF !important; }
.btn-outline-info:hover { background-color: #00BFFF !important; color: #fff !important; }

/* === ALERTS === */
.alert-success { background-color: #d4edda !important; border-color: #2d6a4f !important; color: #1a472a !important; border-left: 4px solid #2d6a4f !important; }
.alert-warning { background-color: #FFF8DC !important; border-color: #FFCC00 !important; color: #333 !important; border-left: 4px solid #ff6600 !important; }
.alert-info { background-color: #e0f7ff !important; border-color: #00BFFF !important; color: #333 !important; border-left: 4px solid #00BFFF !important; }

/* === CARDS === */
.card { border: 1px solid #cccccc !important; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.card-header { background-color: #FFEEA0 !important; color: #000 !important; font-weight: bold; border-bottom: 1px solid #cccccc !important; }

/* === TABLES === */
.table > thead > tr > th { background-color: #F5DEB3 !important; color: #000 !important; font-weight: bold; font-size: 0.8rem; border-bottom: 2px solid #ccc !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fff !important; }
.table-striped > tbody > tr:nth-of-type(even) { background-color: #FFF8DC !important; }
.table-hover > tbody > tr:hover { background-color: #FFF0D0 !important; }

/* === BADGES === */
.badge.bg-primary { background-color: #ff6600 !important; }
.badge.bg-success { background-color: #2d6a4f !important; }
.badge.bg-warning { background-color: #FFCC00 !important; color: #333 !important; }
.badge.bg-info { background-color: #00BFFF !important; }

/* === FORMS === */
.form-control:focus, .form-select:focus { border-color: #ff6600 !important; box-shadow: 0 0 0 0.25rem rgba(255, 102, 0, 0.25) !important; }

/* === LINKS === */
a { color: #4682B4; }
a:hover { color: #2F4F4F; }

/* === GENERAL FONT === */
body { font-family: 'Roboto', Tahoma, Verdana, Arial, sans-serif !important; }

/* === RESPONSIVE === */
@media (max-width: 575.98px) {
    .logo-triangle { width: 28px; height: 28px; }
    .logo-text { font-size: 1.2rem; }
    .logo-subtitle { display: none; }
}
@media (min-width: 768px) {
    .logo-triangle { width: 42px; height: 42px; }
    .logo-text { font-size: 1.8rem; }
}