/*
* ============================================================================
* PISTOLSKYTTE.NET - KOMPLETT TEMA CSS
* Version: 1.0
* ============================================================================
*
* Innehåller:
* - CSS-variabler (ljust + mörkt tema)
* - Sticky navbar
* - Mobile bottom navigation
* - Alla sidkomponenter (Startsida, Tävlingar, Information, Anmälan, Skjutlag, Resultat)
* - Bootstrap overrides
* - Responsiv design
*
* Användning:
* 1. Inkludera efter Bootstrap CSS
* 2. Lägg till data-theme="dark" på för mörkt tema
*
*
*
*
*/
/* ============================================================================
CSS VARIABLES - THEME COLORS
============================================================================ */
:root {
/* === LAYOUT === */
--navbar-height: 56px;
--bottom-nav-height: 4rem;
/* === LIGHT THEME (Default) === */
--bg-body: #f3f4f6;
--bg-card: #ffffff;
--bg-card-hover: #f9fafb;
--bg-section-header: #374151;
--bg-selected: #dbeafe;
--bg-card-alt: #fafafa;
--bg-input: #ffffff;
--bg-table-header: #f9fafb;
--bg-table-row-hover: #f9fafb;
--bg-badge-light: #fafafa;
--bg-navbar: #ffffff;
--border-color: #e5e7eb;
--border-color-light: #f3f4f6;
--border-dashed: #d1d5db;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--text-muted: #9ca3af;
--text-inverse: #ffffff;
--comp-content-bg: #ffffff;
--comp-content-text: #000000;
/* Brand colors */
--primary: #2563eb;
--primary-hover: #1d4ed8;
--primary-light: #dbeafe;
--primary-gradient: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
--success: #10b981;
--success-hover: #059669;
--success-light: #dcfce7;
--success-dark: #166534;
--warning: #f59e0b;
--warning-hover: #d97706;
--warning-light: #fef3c7;
--warning-dark: #92400e;
--danger: #dc2626;
--danger-hover: #b91c1c;
--danger-light: #fef2f2;
--danger-dark: #991b1b;
--info: #0891b2;
--info-light: #cffafe;
--purple: #7c3aed;
--purple-hover: #6d28d9;
--purple-light: #ede9fe;
--pink: #ec4899;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
--shadow-bottom-nav: 0 -4px 20px rgba(0,0,0,0.1);
/* Transitions */
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
/* Border radius */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--type-nationell: #2196f3;
--type-kretst: #000000;
--type-onlykretst: #795548;
--type-krets: #005722;
--type-klubb: #E91E63;
--type-landsdel: #673AB7;
--type-sm: #9C27B0;
--type-mina: #ff9800;
}
/* === DARK THEME === */
[data-theme="dark"] {
--bg-body: #0f172a;
--bg-card: #1e293b;
--bg-card-hover: #334155;
--bg-section-header: #0f172a;
--bg-selected: #1e3a5f;
--bg-card-alt: #1e293b;
--bg-input: #334155;
--bg-table-header: #0f172a;
--bg-table-row-hover: #334155;
--bg-badge-light: #334155;
--bg-navbar: #1e293b;
--border-color: #334155;
--border-color-light: #1e293b;
--border-dashed: #475569;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--text-inverse: #0f172a;
--primary: #3b82f6;
--primary-hover: #2563eb;
--primary-light: #1e3a5f;
--primary-gradient: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%);
--success: #22c55e;
--success-hover: #16a34a;
--success-light: #14532d;
--success-dark: #86efac;
--warning: #fbbf24;
--warning-hover: #f59e0b;
--warning-light: #78350f;
--warning-dark: #fef3c7;
--danger: #ef4444;
--danger-hover: #dc2626;
--danger-light: #7f1d1d;
--danger-dark: #fecaca;
--info: #22d3ee;
--info-light: #164e63;
--purple: #a78bfa;
--purple-hover: #8b5cf6;
--purple-light: #4c1d95;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.5);
--shadow-bottom-nav: 0 -4px 20px rgba(0,0,0,0.4);
--comp-content-bg: #25436d;
--comp-content-text: #c3c3c3
}
/* ============================================================================
BASE STYLES
============================================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
}
body {
background: var(--bg-body);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page-wrapper {
flex: 1 0 auto;
}
/* Desktop header */
.desktop-header {
background: #007ACC;
color: white;
padding: 20px;
}
.content {
flex: 1;
padding: 20px;
/* background: var(--bg-body);*/
/*background-color: var(--bg-body);*/
}
#mainContent {
flex: 1; /* DETTA är nyckeln */
display: flex;
background-color: var(--bg-body);
}
.footer22 {
flex-shrink: 0;
height: 100px;
background: var(--bg-section-header);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.app-width {
max-width: 1600px;
margin: 0 auto;
width: 100%;
padding: 0 0rem;
}
/* --------- MOBIL NAVBAR --------- */
.mobile-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #000;
justify-content: space-around;
align-items: center;
z-index: 1000;
}
.mobile-nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
/* --------- RESPONSIVITET --------- */
@media (max-width: 768px) {
body {
padding-bottom: calc(60px + env(safe-area-inset-bottom));
}
.desktop-header {
/*display: none;*/
height:55px;
}
.mobile-nav {
display: flex;
height: 60px;
}
.content {
padding: 16px;
}
.footer22 {
height: 0px;
}
}
@media (max-width: 576px) {
.app-width {
padding-left: 0.0rem;
padding-right: 0.0rem;
}
}
/* Små skärmar */
@media (max-width: 480px) {
.content {
padding: 0px 0px 0px 0px; /* bottom padding = navbar höjd */
}
.mobile-nav {
height: 50px;
}
.footer22 {
height: 70px;
font-size: 0.9rem;
}
}
/* ============================================================================
SITE FOOTER
============================================================================ */
.footer {
background: var(--bg-section-header);
color: rgba(255,255,255,0.8);
position: absolute;
bottom: 60px;
width: 100%;
white-space: nowrap;
line-height: 60px;
z-index: 2;
}
a {
color: var(--primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-hover);
text-decoration: underline;
}
hr {
border-color: var(--border-color);
opacity: 1;
}
/* ==================== */
/* TEST BOX */
/* ==================== */
.test-box {
background: var(--bg-badge-light);
border-radius: 0.5rem;
padding: 1rem;
margin-top: 1rem;
}
.test-box-title {
font-weight: 600;
font-size: 0.9rem;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.test-box p {
margin-bottom: 0.25rem !important;
font-size: 0.85rem;
}
/* ============================================================================
STICKY NAVBAR
============================================================================ */
.navbar {
background: var(--bg-navbar) !important;
border-bottom: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
height: var(--navbar-height);
padding: 0 1rem;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
transition: background-color var(--transition-normal), border-color var(--transition-normal);
}
.navbar-brand {
font-weight: 700;
font-size: 1.25rem;
color: var(--text-primary) !important;
display: flex;
align-items: center;
gap: 0.125rem;
padding: 0;
text-decoration: none;
}
.navbar-brand .brand-icon {
color: #f59e0b;
font-size: 0.9rem;
}
.navbar-brand:hover {
color: var(--primary) !important;
text-decoration: none;
}
.navbar-toggler {
border: none;
padding: 0.5rem;
color: var(--text-primary);
background: transparent;
}
.navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.navbar-toggler i {
font-size: 1.5rem;
}
.navbar-nav .nav-link {
color: var(--text-secondary) !important;
font-weight: 500;
font-size: 0.875rem;
padding: 0.5rem 0.875rem !important;
display: flex;
align-items: center;
gap: 0.375rem;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
text-decoration: none;
}
.navbar-nav .nav-link:hover {
color: var(--text-primary) !important;
background: var(--bg-badge-light);
}
.navbar-nav .nav-link.active {
color: var(--primary) !important;
background: var(--primary-light);
}
.navbar-nav .nav-link i {
font-size: 1rem;
}
.navbar-user {
display: flex;
align-items: center;
gap: 1rem;
}
.user-info {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-primary);
font-weight: 500;
font-size: 0.875rem;
}
.user-info i {
color: var(--primary);
}
.btn-logout {
color: var(--text-secondary);
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.375rem;
text-decoration: none;
padding: 0.375rem 0.75rem;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
background: transparent;
border: none;
cursor: pointer;
}
.btn-logout:hover {
color: var(--danger);
background: rgba(220, 38, 38, 0.1);
text-decoration: none;
}
/* ============================================================================
MOBILE BOTTOM NAVIGATION
============================================================================ */
.bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--bottom-nav-height);
background: var(--bg-card);
border-top: 1px solid var(--border-color);
box-shadow: var(--shadow-bottom-nav);
z-index: 1040;
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-inner {
display: flex;
justify-content: space-around;
align-items: stretch;
height: 100%;
max-width: 600px;
margin: 0 auto;
padding: 0 0.5rem;
}
.bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.375rem 0.25rem;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.2s ease;
position: relative;
gap: 0.2rem;
min-width: 0;
}
.bottom-nav-item i {
font-size: 1.35rem;
line-height: 1;
transition: transform 0.2s ease, color 0.2s ease;
}
.bottom-nav-item span {
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.bottom-nav-item:hover {
color: var(--text-secondary);
text-decoration: none;
}
.bottom-nav-item.active {
color: var(--primary);
}
.bottom-nav-item.active i {
transform: scale(1.15);
}
.bottom-nav-item.active::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2.5rem;
height: 3px;
background: var(--primary);
border-radius: 0 0 3px 3px;
}
.bottom-nav-item .nav-badge {
position: absolute;
top: 0.125rem;
left: 50%;
margin-left: 0.5rem;
min-width: 1.125rem;
height: 1.125rem;
padding: 0 0.3rem;
background: #ef4444;
color: white;
font-size: 0.6rem;
font-weight: 700;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ============================================================================
PAGE HEADER
============================================================================ */
.page-header {
background: var(--primary-gradient);
color: #ffffff;
padding: 1.5rem 0;
margin-bottom: 0.5rem;
}
.page-header h1 {
font-size: 1.75rem;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.page-header-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.status-tabs {
display: inline-flex;
background: rgba(255,255,255,0.1);
border-radius: var(--radius-lg);
padding: 0.25rem;
}
.status-tabs .btn {
border: none;
padding: 0.5rem 1rem;
font-size: 1.0rem;
font-weight: 500;
border-radius: var(--radius-md);
color: rgba(255,255,255,0.8);
background: transparent;
transition: all var(--transition-fast);
}
.status-tabs .btn:hover {
color: white;
background: rgba(255,255,255,0.1);
}
.status-tabs .btn.active {
background: white;
color: #1e3a5f;
}
/* ============================================================================
CARDS
============================================================================ */
.card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
overflow: hidden;
}
.card:hover.card-hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card-header {
background-color: var(--bg-card);
border-bottom: 1px solid var(--border-color);
padding: 0.75rem 1rem;
}
.card-header.bg-primary {
background: var(--primary-gradient) !important;
color: white;
border-bottom: none;
}
.card-body {
background-color: var(--bg-card);
padding: 1rem;
}
.card-footer {
background-color: var(--bg-card);
border-top: 1px solid var(--border-color);
}
/* ============================================================================
TAB NAVIGATION
============================================================================ */
.nav-competition-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 -1rem;
padding: 0 1rem;
}
.nav-competition-wrapper::-webkit-scrollbar {
display: none;
}
.nav-competition {
background: var(--bg-badge-light);
border-radius: var(--radius-lg);
padding: 0.25rem;
gap: 0.25rem;
display: inline-flex;
min-width: max-content;
}
.nav-competition .nav-link {
border-radius: var(--radius-md);
color: var(--text-secondary);
padding: 0.625rem 1rem;
font-weight: 500;
font-size: 0.85rem;
transition: all var(--transition-fast);
border: none;
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.375rem;
}
.nav-competition .nav-link:hover {
background: var(--bg-card-hover);
color: var(--text-primary);
text-decoration: none;
}
.nav-competition .nav-link.active {
background: var(--primary);
color: white;
}
.nav-competition .nav-link i {
font-size: 1.1rem;
}
.nav-subtabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.nav-subtabs .nav-link {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 0.5rem 1rem;
color: var(--text-primary);
font-weight: 500;
font-size: 0.85rem;
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-subtabs .nav-link:hover {
border-color: var(--primary);
color: var(--primary);
text-decoration: none;
}
.nav-subtabs .nav-link.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.nav-subtabs .nav-link .badge {
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
}
.nav-subtabs .nav-link.active .badge {
background: rgba(255,255,255,0.2) !important;
color: white !important;
}
/* ============================================================================
SECTION HEADERS
============================================================================ */
.section-header {
background: var(--bg-section-header);
color: white;
padding: 0.75rem 1rem;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.section-header h6 {
margin: 0;
font-weight: 600;
font-size: 1.2rem;
}
.section-header .btn {
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
}
.section-header.purple {
background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}
.section-header.success {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}
.section-header.warning {
background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}
.section-content {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-top: none;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
padding: 0.75rem;
}
/* ============================================================================
REGISTRATION CARDS
============================================================================ */
.registration-card {
background: var(--bg-badge-light);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
margin-bottom: 0.75rem;
transition: all var(--transition-fast);
}
.registration-card:last-child {
margin-bottom: 0;
}
.registration-card:hover {
border-color: var(--primary);
}
.registration-header {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color);
}
.registration-header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.registration-header-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px dashed var(--border-dashed);
}
.registration-body {
padding: 0.75rem;
}
.shooter-name {
font-weight: 600;
font-size: 0.95rem;
color: var(--text-primary);
}
.shooter-club {
font-size: 0.8rem;
color: var(--text-secondary);
}
/* ============================================================================
START LIST
============================================================================ */
.start-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.start-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 0.75rem;
background: var(--bg-badge-light);
border-radius: var(--radius-md);
gap: 0.5rem;
transition: background var(--transition-fast);
}
.start-item:hover {
background: var(--bg-card-hover);
}
.start-item-info {
flex: 1;
min-width: 0;
}
.start-item-squad {
font-weight: 500;
font-size: 0.85rem;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.start-item-fee {
font-weight: 600;
font-size: 0.85rem;
color: var(--text-primary);
white-space: nowrap;
}
.start-item-actions {
display: flex;
gap: 0.25rem;
}
.start-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 0.75rem;
background: var(--bg-section-header);
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.85rem;
color: white;
}
.start-total-amount {
color: var(--success);
}
[data-theme="dark"] .start-total-amount {
color: var(--success-dark);
}
/* ============================================================================
STARTS INDICATOR
============================================================================ */
.starts-indicator {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.625rem;
background: var(--success-light);
border-radius: var(--radius-md);
font-size: 0.75rem;
color: var(--success-dark);
}
[data-theme="dark"] .starts-indicator {
color: var(--success);
}
.starts-indicator.warning {
background: var(--warning-light);
color: var(--warning-dark);
}
[data-theme="dark"] .starts-indicator.warning {
color: var(--warning);
}
.starts-indicator .progress {
width: 50px;
height: 5px;
background: var(--bg-badge-light);
border-radius: 3px;
overflow: hidden;
}
.starts-indicator .progress-bar {
border-radius: 3px;
}
/* ============================================================================
ADD START BUTTON
============================================================================ */
.btn-add-start {
border: 2px dashed var(--border-dashed);
color: var(--text-secondary);
background: transparent;
width: 100%;
padding: 0.75rem;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
font-size: 0.85rem;
cursor: pointer;
}
.btn-add-start:hover {
border-color: var(--success);
color: var(--success);
background: var(--success-light);
}
/* ============================================================================
TEAM MEMBERS
============================================================================ */
/*.team-members {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.team-member {
display: flex;
align-items: center;
background: var(--bg-badge-light);
border-radius: var(--radius-md);
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
transition: background var(--transition-fast);
}
.team-member:hover {
background: var(--bg-card-hover);
}
.team-member .position {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.7rem;
margin-right: 0.625rem;
flex-shrink: 0;
}
.team-member .position.pos-1 { background: #fbbf24; color: #78350f; }
.team-member .position.pos-2 { background: #a3a3a3; color: #1f2937; }
.team-member .position.pos-3 { background: #d97706; color: white; }
.team-member .position.pos-r { background: var(--border-color); color: var(--text-muted); }
.team-member .name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-primary);
}
.team-member .status {
font-size: 0.7rem;
color: var(--text-muted);
background: var(--border-color);
padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm);
margin-left: 0.5rem;
}*/
/* ============================================================================
SIDEBAR CARDS
============================================================================ */
.sidebar-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
/*margin-bottom: 1rem;*/
}
.sidebar-card .card-header {
background: var(--primary-gradient);
color: white;
padding: 0.625rem 1rem;
font-weight: 600;
font-size: 1.0rem;
border-bottom: none;
}
.sidebar-card .card-header.success {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}
.sidebar-card .card-header.dark {
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}
.sidebar-card .card-body {
padding: 1rem;
}
.sidebar-info dt {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 0.125rem;
font-weight: 600;
}
.sidebar-info dd {
margin-bottom: 0.875rem;
color: var(--text-primary);
font-size: 0.875rem;
}
.sidebar-info dd:last-child {
margin-bottom: 0;
}
/* ============================================================================
STAT CARDS
============================================================================ */
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1rem;
text-align: center;
transition: all var(--transition-fast);
}
.stat-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-sm);
}
.stat-card .stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
line-height: 1.2;
}
.stat-card .stat-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ============================================================================
INFO TABLE
============================================================================ */
.info-table {
width: 100%;
}
.info-table tr {
border-bottom: 1px solid var(--border-color-light);
}
.info-table tr:last-child {
border-bottom: none;
}
.info-table th {
padding: 0.75rem 1rem;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--text-secondary);
width: 140px;
vertical-align: top;
background: var(--bg-badge-light);
}
.info-table td {
padding: 0.75rem 1rem;
color: var(--text-primary);
}
.info-table td a {
color: var(--primary);
}
.info-table td a:hover {
text-decoration: underline;
}
/* ============================================================================
CONTACT ITEMS
============================================================================ */
.contact-item {
display: flex;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-color-light);
}
.contact-item:last-child {
border-bottom: none;
}
.contact-item i {
width: 2rem;
height: 2rem;
background: var(--primary-light);
color: var(--primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.75rem;
flex-shrink: 0;
}
.contact-item-content {
min-width: 0;
}
.contact-item-label {
font-size: 0.7rem;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.025em;
}
.contact-item-value {
color: var(--text-primary);
font-size: 0.875rem;
font-weight: 500;
}
.contact-item-value a {
color: var(--primary);
}
/* ============================================================================
SQUAD LIST
============================================================================ */
.squad-list {
background: var(--bg-card);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
border: 1px solid var(--border-color);
border-top: none;
}
.squad-header {
display: grid;
grid-template-columns: 3rem 1fr 1fr auto;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--bg-table-header);
border-bottom: 1px solid var(--border-color);
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.025em;
}
.squad-row {
display: grid;
grid-template-columns: 3rem 1fr 1fr auto;
gap: 0.5rem;
padding: 0.625rem 1rem;
border-bottom: 1px solid var(--border-color-light);
align-items: center;
transition: background var(--transition-fast);
}
.squad-row:hover {
background: var(--bg-table-row-hover);
}
.squad-row:last-child {
border-bottom: none;
}
.squad-row.empty {
color: var(--text-muted);
}
.squad-row.empty .position {
background: var(--border-color);
color: var(--text-muted);
}
.position {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.8rem;
background: var(--primary-light);
color: var(--primary);
}
.empty-slot {
color: var(--text-muted);
font-style: italic;
font-size: 0.8rem;
}
/* ============================================================================
RESULTS TABLE
============================================================================ */
.results-container {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.results-table {
width: 100%;
font-size: 0.85rem;
border-collapse: collapse;
color: var(--text-primary);
}
.results-table thead {
background: var(--bg-section-header);
color: white;
position: sticky;
top: 0;
z-index: 10;
}
.results-table thead th {
padding: 0.625rem 0.5rem;
font-weight: 600;
font-size: 0.75rem;
text-align: center;
white-space: nowrap;
}
.results-table thead th:first-child,
.results-table thead th:nth-child(2),
.results-table thead th:nth-child(3) {
text-align: left;
}
.results-table tbody tr {
border-bottom: 1px solid var(--border-color-light);
transition: background var(--transition-fast);
}
.results-table tbody tr:hover {
background: var(--bg-table-row-hover);
}
.results-table td {
padding: 0.5rem;
text-align: center;
vertical-align: middle;
}
.results-table td:first-child,
.results-table td:nth-child(2),
.results-table td:nth-child(3) {
text-align: left;
}
.class-header {
background: var(--bg-section-header) !important;
color: white;
}
.class-header td {
padding: 0.5rem 0.75rem !important;
font-size: 0.85rem;
font-weight: 600;
}
.placement {
width: 2rem;
font-weight: 700;
color: var(--text-primary);
}
.placement-1 { color: #ca8a04; }
.placement-2 { color: #6b7280; }
.placement-3 { color: #b45309; }
.score {
font-variant-numeric: tabular-nums;
min-width: 1.75rem;
}
.score-sum {
font-weight: 700;
color: var(--text-primary);
}
.score-x {
color: var(--text-secondary);
font-size: 0.8rem;
}
.score-total {
font-weight: 700;
background: var(--success-light);
color: var(--success-dark);
border-radius: var(--radius-sm);
padding: 0.25rem 0.5rem !important;
}
[data-theme="dark"] .score-total {
color: var(--success);
}
.score-highlight {
background: var(--danger-light);
color: var(--danger);
font-weight: 600;
border-radius: var(--radius-sm);
}
.medal {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
font-weight: 700;
font-size: 0.7rem;
}
.medal-gold {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #78350f;
box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4);
}
.medal-silver {
background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
color: #1f2937;
box-shadow: 0 1px 3px rgba(156, 163, 175, 0.4);
}
.medal-bronze {
background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
color: white;
box-shadow: 0 1px 3px rgba(180, 83, 9, 0.4);
}
/* ============================================================================
COMPETITION CARDS
============================================================================ */
.competition-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.competition-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
display: grid;
grid-template-columns: auto 1fr auto;
overflow: hidden;
transition: all var(--transition-fast);
}
.competition-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
border-color: var(--primary);
}
.competition-date {
width: 6rem;
padding: 1rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
}
.competition-date {
position: relative;
}
.competition-date .day {
font-size: 2rem;
font-weight: 700;
line-height: 1;
}
.competition-date .month {
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.05em;
}
.competition-date .year {
font-size: 0.7rem;
opacity: 0.8;
}
.competition-card.draft .competition-date {
background: linear-gradient(135deg, var(--danger) 0%, var(--danger-hover) 100%);
}
.competition-card.draft .competition-title {
color: var(--danger);
}
.competition-card.krets .competition-date {
background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
}
.competition-card.sm .competition-date {
background: linear-gradient(135deg, var(--purple) 0%, var(--purple-hover) 100%);
}
.competition-content {
padding: 0rem 1.25rem;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
background-color: var(--bg-card);
color: var(--comp-content-text);
}
.competition-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.competition-title a {
color: inherit;
text-decoration: none;
}
.competition-title a:hover {
color: var(--primary);
}
.competition-meta {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.competition-tags {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
align-items: center;
/*margin-bottom: 0.5rem;*/
}
.competition-details {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.8rem;
color: var(--text-secondary);
}
.competition-details span {
display: flex;
align-items: center;
gap: 0.375rem;
}
.competition-details i {
color: var(--text-muted);
}
.competition-actions {
padding: 1rem;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 0.5rem;
border-left: 1px solid var(--border-color);
background: var(--bg-card-alt);
}
.registration-count {
font-size: 0.8rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.375rem;
}
/* ============================================================================
HOMEPAGE NAV CARDS
============================================================================ */
.nav-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.nav-card {
position: relative;
border-radius: var(--radius-xl);
padding: 2rem 1.5rem;
text-align: center;
text-decoration: none;
color: white;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 130px;
}
.nav-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
opacity: 0;
transition: opacity 0.3s;
}
.nav-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
color: white;
text-decoration: none;
}
.nav-card:hover::before {
opacity: 1;
}
.nav-card-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.nav-card-title {
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
}
.nav-card-badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(4px);
padding: 0.25rem 0.625rem;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 600;
}
.nav-card.tavlingar {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}
.nav-card.loggbok {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}
.nav-card.klubbstugan {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.nav-card.premium {
background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}
/* ============================================================================
INFO CARDS
============================================================================ */
.info-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
height: 100%;
transition: all var(--transition-normal);
}
.info-card:hover {
box-shadow: var(--shadow-md);
}
.info-card-header {
padding: 0.875rem 1.25rem;
font-weight: 600;
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.info-card-header.primary {
background: var(--primary-gradient);
color: white;
}
.info-card-header.purple {
background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
color: white;
}
.info-card-header.success {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: white;
}
.info-card-body {
padding: 1.25rem;
}
.info-card-body p {
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.6;
}
.info-card-body strong {
color: var(--text-primary);
}
/* ============================================================================
QUICK LINKS
============================================================================ */
.quick-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: var(--bg-badge-light);
border-radius: var(--radius-lg);
color: var(--text-primary);
text-decoration: none;
transition: all 0.2s;
margin-bottom: 0.5rem;
}
.quick-link:last-child {
margin-bottom: 0;
}
.quick-link:hover {
background: var(--primary-light);
color: var(--primary);
text-decoration: none;
}
.quick-link i {
font-size: 1.25rem;
color: var(--primary);
width: 2rem;
text-align: center;
}
.quick-link span {
font-weight: 500;
}
.quick-link .bi-chevron-right {
margin-left: auto;
font-size: 0.875rem;
color: var(--text-muted);
}
/* ==================== */
/* DOWNLOAD BUTTON */
/* ==================== */
.btn-download {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
color: #374151;
text-decoration: none;
font-size: 0.85rem;
transition: all 0.15s;
}
.btn-download:hover {
background: #e5e7eb;
color: #1f2937;
}
.btn-download i {
color: #dc2626;
}
/* ============================================================================
CTA BUTTON
============================================================================ */
.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--primary);
color: white;
border: none;
border-radius: var(--radius-lg);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
}
.btn-cta:hover {
background: var(--primary-hover);
color: white;
text-decoration: none;
transform: translateY(-1px);
}
/* ============================================================================
FEATURE LIST
============================================================================ */
.feature-list {
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.625rem 0;
border-bottom: 1px solid var(--border-color-light);
color: var(--text-secondary);
}
.feature-list li:last-child {
border-bottom: none;
}
.feature-list li i {
color: var(--success);
font-size: 1rem;
margin-top: 0.125rem;
flex-shrink: 0;
}
/* ============================================================================
FILTER SECTION
============================================================================ */
.filter-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin-bottom: 1rem;
overflow: visible;
}
.filter-toggle {
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
border-bottom: 1px solid var(--border-color);
background: var(--bg-card-alt);
color: var(--text-primary);
transition: background var(--transition-fast);
}
.filter-toggle:hover {
background: var(--bg-card-hover);
}
.filter-content {
padding: 1rem;
}
.category-tabs {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
margin-bottom: 1rem;
background: var(--bg-badge-light);
padding: 0.25rem;
border-radius: var(--radius-lg);
}
.category-tabs .btn {
border: none;
padding: 0.5rem 0.875rem;
font-size: 0.8rem;
font-weight: 500;
border-radius: var(--radius-md);
color: var(--text-secondary);
background: transparent;
transition: all var(--transition-fast);
}
.category-tabs .btn:hover {
color: var(--text-primary);
background: var(--bg-card);
}
.category-tabs .btn.active {
background: var(--primary);
color: white;
}
.region-pills {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.region-pills .btn {
border-radius: var(--radius-full);
padding: 0.375rem 0.875rem;
font-size: 0.8rem;
font-weight: 500;
}
.filter-row {
display: grid;
grid-template-columns: 1fr 1fr 2fr auto;
gap: 0.75rem;
align-items: end;
}
.filter-row label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.025em;
margin-bottom: 0.25rem;
display: block;
}
.view-toggle {
display: flex;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
}
.view-toggle .btn {
border: none;
border-radius: 0;
padding: 0.5rem 0.75rem;
color: var(--text-secondary);
background: var(--bg-card);
}
.view-toggle .btn:hover {
background: var(--bg-card-hover);
}
.view-toggle .btn.active {
background: var(--primary);
color: white;
}
.view-toggle .btn:not(:last-child) {
border-right: 1px solid var(--border-color);
}
/* ============================================================================
SEARCH BOX
============================================================================ */
.search-box {
position: relative;
}
.search-box input {
padding-left: 2.5rem;
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
color: var(--text-primary);
font-size: 0.85rem;
}
.search-box input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.search-box input::placeholder {
color: var(--text-muted);
}
.search-box i {
position: absolute;
left: 0.875rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
}
/* ============================================================================
CLASS BADGES
============================================================================ */
.class-badges {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.badge-class {
font-size: 0.75rem;
padding: 0.3rem 0.6rem;
border-radius: var(--radius-md);
font-weight: 500;
}
.badge-oppen-c { background: #3b82f6; color: white; }
.badge-oppen-b { background: #06b6d4; color: white; }
.badge-oppen-a { background: #10b981; color: white; }
.badge-dam-c { background: #ec4899; color: white; }
.badge-junior-c { background: #8b5cf6; color: white; }
.badge-vet-y { background: #f59e0b; color: white; }
.badge-vet-a { background: #f97316; color: white; }
.badge-a1 { background: #6366f1; color: white; }
.class-badge {
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
color: white;
}
.class-badge.c { background: #10b981; }
.class-badge.a { background: #3b82f6; }
.class-badge.b { background: #8b5cf6; }
.class-badge.o { background: #f59e0b; }
.badge-nationell { background: #2563eb; }
.badge-klubb { background: #f59e0b; }
.badge-krets { background: #dc2626; }
.badge-sm { background: #7c3aed; }
.badge-landsdel { background: #0891b2; }
/* 🖥️ Visa bara på desktop (från 768px och uppåt) */
.desktop {
display: none;
}
@media (min-width: 768px) {
.desktop {
display: inline;
}
}
.mobile {
display: inline;
}
@media (min-width: 768px) {
.mobile {
display: none;
}
}
/* Alias för d-none d-md-table-cell */
.desktop-cell {
display: none; /* Dölj som standard */
}
@media (min-width: 768px) {
.desktop-cell {
display: table-cell; /* Visa som tabellcell från medium-skärmar och uppåt */
}
}
/* Alias för mobilceller: syns på små skärmar, döljs på medium och uppåt */
.mobile-cell {
display: table-cell; /* Visa som tabellcell som standard (mobil) */
}
@media (min-width: 768px) {
.mobile-cell {
display: none; /* Dölj från medium och uppåt */
}
}
/*.site-footer a {
color: rgba(255,255,255,0.8);
}
*/
.cursor-pointer {
cursor: pointer;
}
.site-footer a {
color: rgba(255,255,255,0.8);
}
.social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.social-link {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-lg);
background: rgba(255,255,255,0.1);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: all 0.2s;
text-decoration: none;
}
.social-link:hover {
transform: translateY(-2px);
color: white;
}
.social-link.facebook:hover {
background: #1877f2;
}
.social-link.youtube:hover {
background: #ff0000;
}
/* ============================================================================
THEME TOGGLE
============================================================================ */
.theme-toggle {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 1050;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--bg-card);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-normal);
}
.theme-toggle:hover {
transform: scale(1.1);
}
.theme-toggle i {
font-size: 1.25rem;
}
.theme-toggle .bi-sun-fill {
color: #fbbf24;
}
.theme-toggle .bi-moon-fill {
color: #6366f1;
}
[data-theme="dark"] .theme-toggle .bi-moon-fill {
display: none;
}
[data-theme="light"] .theme-toggle .bi-sun-fill,
:root:not([data-theme="dark"]) .theme-toggle .bi-sun-fill {
display: none;
}
/* ============================================================================
BOOTSTRAP OVERRIDES
============================================================================ */
.form-control,
.form-select {
background-color: var(--bg-input);
border-color: var(--border-color);
color: var(--text-primary);
transition: all var(--transition-fast);
}
.form-control:focus,
.form-select:focus {
background-color: var(--bg-input);
border-color: var(--primary);
color: var(--text-primary);
box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.2);
}
.form-control::placeholder {
color: var(--text-muted);
}
.form-control:disabled,
.form-select:disabled {
background-color: var(--bg-badge-light);
color: var(--text-muted);
}
.input-group-text {
background-color: var(--bg-badge-light);
border-color: var(--border-color);
color: var(--text-secondary);
}
.form-label {
color: var(--text-primary);
}
.form-text {
color: var(--text-muted);
}
.btn-light {
background-color: var(--bg-badge-light);
border-color: var(--border-color);
color: var(--text-primary);
text-decoration: none;
}
.btn-light:hover {
background-color: var(--success-light);
border-color: var(--border-color);
color: var(--text-primary);
text-decoration: none;
}
.btn-outline-secondary {
border-color: var(--border-color);
color: #d0d0d0;
text-decoration: none;
}
.btn-outline-secondary:hover {
background-color: var(--bg-card-hover);
border-color: var(--border-color);
color: var(--text-primary);
text-decoration: none;
}
.btn-link {
color: var(--primary);
}
.table {
color: var(--text-primary);
border-color: var(--border-color);
}
.table > thead {
background-color: var(--bg-table-header);
}
.table > thead > tr > th {
color: var(--text-secondary);
border-bottom-color: var(--border-color);
}
.table > tbody > tr {
border-bottom-color: var(--border-color-light);
}
.table > tbody > tr:hover {
background-color: var(--bg-table-row-hover);
}
.table-light {
background-color: var(--bg-table-header) !important;
color: var(--text-primary);
}
.list-group-item {
background-color: var(--bg-card);
border-color: var(--border-color);
color: var(--text-primary);
}
.dropdown-menu {
background-color: var(--bg-card);
border-color: var(--border-color);
box-shadow: var(--shadow-md);
}
.dropdown-item {
color: var(--text-primary);
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--bg-card-hover);
color: var(--text-primary);
}
.dropdown-item.active {
background-color: var(--primary);
color: white;
}
.dropdown-divider {
border-color: var(--border-color);
}
.modal-content {
background-color: var(--bg-card);
border-color: var(--border-color);
}
.modal-header {
border-bottom-color: var(--border-color);
}
.modal-footer {
border-top-color: var(--border-color);
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
.page-link {
background-color: var(--bg-card);
border-color: var(--border-color);
color: var(--text-primary);
}
.page-link:hover {
background-color: var(--bg-card-hover);
border-color: var(--border-color);
color: var(--text-primary);
}
.page-item.active .page-link {
background-color: var(--primary);
border-color: var(--primary);
}
.page-item.disabled .page-link {
background-color: var(--bg-badge-light);
border-color: var(--border-color);
color: var(--text-muted);
}
.alert-primary {
background-color: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
}
.alert-success {
background-color: var(--success-light);
border-color: var(--success);
color: var(--success-dark);
}
.alert-warning {
background-color: var(--warning-light);
border-color: var(--warning);
color: var(--warning-dark);
}
.alert-danger {
background-color: var(--danger-light);
border-color: var(--danger);
color: var(--danger-dark);
}
.badge.bg-light {
background-color: var(--bg-badge-light) !important;
color: var(--text-primary) !important;
}
.progress {
background-color: var(--bg-badge-light);
}
.nav-tabs {
border-bottom-color: var(--border-color);
}
.nav-tabs .nav-link {
color: var(--text-secondary);
}
.nav-tabs .nav-link:hover {
border-color: var(--border-color);
color: var(--text-primary);
}
.nav-tabs .nav-link.active {
background-color: var(--bg-card);
border-color: var(--border-color) var(--border-color) var(--bg-card);
color: var(--text-primary);
}
/* ============================================================================
RESPONSIVE
============================================================================ */
/*@media (min-width: 768px) {
.team-members {
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
}
.team-member {
flex: 0 0 auto;
padding: 0.375rem 0.75rem 0.375rem 0.375rem;
border-radius: var(--radius-full);
}
}*/
@media (max-width: 576px) {
.competition-card {
grid-template-columns: 1fr;
}
.competition-mobile {
display: block !important;
}
.competition-date,
.competition-actions {
display: none !important;
}
}
@media (max-width: 767.98px) {
.bottom-nav {
display: block;
}
body {
padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
}
.desktop-nav-card {
display: none !important;
}
.theme-toggle {
bottom: calc(var(--bottom-nav-height) + 1rem + env(safe-area-inset-bottom));
}
.page-header {
padding: 1rem 0;
}
.page-header h1 {
font-size: 1.25rem;
}
.nav-cards {
gap: 0.75rem;
}
.nav-card {
padding: 1.25rem 1rem;
min-height: 110px;
}
.nav-card-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.nav-card-title {
font-size: 0.9rem;
}
.nav-card-badge {
top: 0.5rem;
right: 0.5rem;
font-size: 0.6rem;
padding: 0.2rem 0.5rem;
}
.competition-card {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
}
.competition-date {
width: 4rem;
grid-row: span 2;
}
.competition-date .day {
font-size: 1.5rem;
}
.competition-content {
padding: 0.75rem;
}
.competition-title {
font-size: 1rem;
}
.competition-actions {
grid-column: 2;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-left: none;
border-top: 1px solid var(--border-color);
padding: 0.75rem;
}
.competition-mobile {
display: none;
}
.competition-details {
flex-direction: column;
gap: 0.25rem;
}
.squad-header {
display: none;
}
.squad-row {
grid-template-columns: 2.5rem 1fr;
grid-template-rows: auto auto;
}
.squad-row .position {
grid-row: span 2;
align-self: center;
}
/* ==================== */
/* MOBILE RESPONSIVE */
/* ==================== */
@media (max-width: 991.98px) {
.info-table th {
width: 120px;
font-size: 0.7rem;
}
}
@media (max-width: 767.98px) {
/* Stack table rows on mobile */
.info-table,
.info-table tbody,
.info-table tr,
.info-table th,
.info-table td {
display: block;
width: 100%;
}
.info-table tr {
padding: 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
.info-table th {
padding: 0 0 0.25rem 0;
background: transparent;
border-bottom: none;
}
.info-table td {
padding: 0;
}
/* Sidebar goes to bottom */
.sidebar-section {
margin-top: 1rem;
}
}
.section-header {
flex-direction: column;
align-items: flex-start;
}
.section-header > div:last-child {
width: 100%;
justify-content: space-between;
}
.category-tabs {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 0.25rem;
}
.category-tabs .btn {
flex-shrink: 0;
}
.nav-subtabs {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 0.5rem;
margin: 0 -0.75rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.nav-subtabs::-webkit-scrollbar {
display: none;
}
.nav-subtabs .nav-link {
flex-shrink: 0;
}
.filter-row {
grid-template-columns: 1fr;
}
.info-card-body {
padding: 1rem;
}
}
@media (max-width: 991.98px) {
.navbar-collapse {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-navbar);
border-bottom: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
padding: 1rem;
max-height: calc(100vh - var(--navbar-height));
overflow-y: auto;
}
.navbar-nav {
gap: 0.25rem;
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem !important;
}
.navbar-user {
border-top: 1px solid var(--border-color);
padding-top: 1rem;
margin-top: 0.75rem;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.filter-row {
grid-template-columns: 1fr 1fr;
}
.filter-row .search-group {
grid-column: span 2;
}
.filter-row .view-group {
grid-column: span 2;
justify-self: start;
}
/* .info-table th {
width: 120px;
font-size: 0.7rem;
}*/
}
.container-custom {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
padding-left: 5px; /* Bootstrap default padding */
padding-right: 5px;
}
@media (max-width: 575.98px) {
.container-fluid {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.nav-competition .nav-link .nav-text {
display: none;
}
.nav-competition .nav-link {
padding: 0.5rem 0.75rem;
}
.navbar-brand {
font-size: 1.1rem;
}
.navbar {
padding: 0 0.75rem;
}
.status-tabs .btn {
padding: 0.375rem 0.75rem;
font-size: 0.8rem;
}
}
@media (min-width: 414px) and (max-width: 767.98px) {
:root {
--bottom-nav-height: 4.25rem;
}
.bottom-nav-item i {
font-size: 1.5rem;
}
.bottom-nav-item span {
font-size: 0.65rem;
}
}
/* ============================================================================
SCROLLBAR (Dark theme)
============================================================================ */
[data-theme="dark"] ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--bg-body);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* ============================================================================
PRINT STYLES
============================================================================ */
@media print {
body {
background-color: white !important;
color: black !important;
padding-top: 0;
}
.navbar,
.bottom-nav,
.theme-toggle,
.page-header,
.filter-card,
.btn {
display: none !important;
}
.card {
box-shadow: none !important;
border: 1px solid #ccc !important;
}
}
/* ============================================================================
UTILITY CLASSES
============================================================================ */
.text-theme-primary { color: var(--text-primary) !important; }
.text-theme-secondary { color: var(--text-secondary) !important; }
.text-theme-muted { color: var(--text-muted) !important; }
.bg-theme-body { background-color: var(--bg-body) !important; }
.bg-theme-card { background-color: var(--bg-card) !important; }
.bg-theme-input { background-color: var(--bg-input) !important; }
.border-theme { border-color: var(--border-color) !important; }
.border-theme-light { border-color: var(--border-color-light) !important; }
.shadow-theme-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-theme-md { box-shadow: var(--shadow-md) !important; }
.shadow-theme-lg { box-shadow: var(--shadow-lg) !important; }
/* ============================================================================
SAFE AREA (Notch support)
============================================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.bottom-nav {
padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 767.98px) {
body {
padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
}
}
}
@keyframes pulseGlow {
0% {
box-shadow: 0 0 0 0 rgba(13,110,253,.4);
background-color: burlywood;
border-width: 1px;
}
70% {
box-shadow: 0 0 0 18px rgba(13,110,253,0);
border-width: 1px;
}
100% {
box-shadow: 0 0 0 0 rgba(13,110,253,0);
}
}
.btn-attention {
animation: pulseGlow 2s infinite;
}
/* Native disabled buttons */
.btn-attention:disabled {
animation: none;
}
/* Bootstrap disabled state (links & buttons) */
.btn-attention.disabled {
animation: none;
}
@media (max-width: 1575.98px) {
.starts-indicator {
display: none;
}
}
.slot-info-text {
color: var(--text-primary);
}
/* Type Badge Colors */
.badge-type-kretst {
background: var(--type-kretst);
}
/* Type Badge Colors */
.badge-type-onlykretst {
background: var(--type-onlykretst);
}
.badge-type-krets {
background: var(--type-krets);
}
.badge-type-nationell {
background: var(--type-nationell);
}
.badge-type-klubb {
background: var(--type-klubb);
}
.badge-type-landsdel {
background: var(--type-landsdel);
}
.badge-type-sm {
background: var(--type-sm);
}
.badge-type-privat {
background: var(--type-sm);
}
.btn-primary-submit {
background: linear-gradient(135deg, #007F46 0%, #28a745 100%);
border: none;
color: #fff; /* Vit text */
}
.btn-primary-submit:hover {
background: linear-gradient(135deg, #28a745 0%, #28a745 100%);
color: #fff; /* Vit text */
}
.text-nowrap {
white-space: nowrap;
}