/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.main-menu .navbar-header .nav-item.nav-toggle,
.main-menu .navbar-header .modern-nav-toggle,
.main-menu .navbar-header .collapse-toggle-icon,
.vertical-layout.vertical-menu-modern
  .main-menu
  .navbar-header
  .modern-nav-toggle,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-header
  .modern-nav-toggle,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .modern-nav-toggle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Toggle icon her zaman görünsün */
.main-menu .navbar-header .collapse-toggle-icon,
.vertical-layout.vertical-menu-modern
  .main-menu
  .navbar-header
  .collapse-toggle-icon,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-header
  .collapse-toggle-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix for sidebar collapsed mode - show menu item texts when expanded (hover) */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navigation
  li
  > a
  > span.menu-title,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navigation
  li
  > a
  > span.menu-item {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navigation
  li
  > a
  > span {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure submenu items are visible when parent is open in collapsed+expanded mode */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navigation
  li.has-sub.open
  ul
  li
  > a
  > span {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix for navigation header text visibility */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navigation-header
  span {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Navbar Brand Logo Styles */
.header-navbar .brand-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 0;
  line-height: 1;
}

.header-navbar .brand-logo img {
  max-height: 45px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: all 0.3s ease;
}

/* Navbar brand container alignment */
.header-navbar .navbar-brand {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.header-navbar .navbar-brand:hover,
.header-navbar .navbar-brand:focus {
  text-decoration: none;
}

/* Horizontal menu logo */
.horizontal-menu
  .header-navbar.navbar-brand-center
  .navbar-header
  .navbar-brand
  .brand-logo
  img {
  max-height: 45px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Responsive logo sizing */
@media (max-width: 991.98px) {
  .header-navbar .brand-logo img {
    max-height: 35px;
    max-width: 140px;
  }
}

/* ============================================
   SIDEBAR LOGO STYLES - BASİT
   ============================================ */

/* VARSAYILAN: Sidebar açık - sportifApp-Logo-renkli.png göster */
.sidebar-logo-full {
  display: block !important;
  max-width: 180px;
  max-height: 50px;
}

/* Measurement Center kare logo için özel boyut */
.sidebar-logo-full.measurement-center-logo {
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
}

/* Icon logo VARSAYILAN olarak GİZLİ */
.sidebar-logo-icon,
.main-menu .sidebar-logo-icon,
.main-menu .navbar-brand .sidebar-logo-icon,
.main-menu .navbar-header .sidebar-logo-icon,
.main-menu .navbar-header .navbar-brand .sidebar-logo-icon,
.main-menu .navbar-header .navbar-brand img.sidebar-logo-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  max-width: 52px;
  max-height: 52px;
}

/* KAPATILDIĞINDA: Full logo GİZLE */
body.vertical-layout.vertical-menu-modern.menu-collapsed .sidebar-logo-full,
.vertical-layout.vertical-menu-modern.menu-collapsed .sidebar-logo-full,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .sidebar-logo-full,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-brand
  .sidebar-logo-full,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-header
  .navbar-brand
  .sidebar-logo-full {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .sidebar-logo-icon,
.vertical-layout.vertical-menu-modern.menu-collapsed .sidebar-logo-icon,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .sidebar-logo-icon,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-brand
  .sidebar-logo-icon,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-header
  .navbar-brand
  .sidebar-logo-icon,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-header
  .navbar-brand
  img.sidebar-logo-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 52px !important;
  max-height: 52px !important;
  margin: 0 auto !important;
}

/* ============================================
   NAVBAR HEADER - GENEL YAPILANDIRMA
   ============================================ */

/* Navbar header container - Her zaman aynı */
.main-menu .navbar-header {
  min-height: 70px;
  display: flex;
  align-items: center;
}

/* Navbar nav - Logo ve toggle yan yana */
.main-menu .navbar-header .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

/* Logo item - Sol tarafta */
.main-menu .navbar-header .nav-item.me-auto {
  flex: 0 0 auto !important;
  margin-right: auto !important;
}

/* Toggle button item - Sağ tarafta */
.main-menu .navbar-header .nav-item.nav-toggle {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* Navbar brand - Her iki modda da aynı padding (kayma olmasın) */
.main-menu .navbar-header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0.75rem 0 0.75rem 1.64rem !important;
  margin: 0 !important;
  transition: none !important;
  min-height: 60px !important;
}

/* Navbar brand img - genel */
.main-menu .navbar-header .navbar-brand img {
  display: block !important;
}

/* Main menu content spacing */
.main-menu .main-menu-content {
  padding-top: 1rem;
}

/* Collapsed modda navbar header - 80px içinde düzenle */
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navbar-header {
  width: 80px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  padding: 1rem 0 !important;
}

/* Collapsed modda navbar nav - 80px içinde ortala */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-header
  .navbar-nav {
  justify-content: center !important;
  align-items: center !important;
  width: 80px !important;
  max-width: 80px !important;
}

/* Collapsed modda logo item - 80px içinde ortala */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-header
  .nav-item.me-auto {
  flex: 1 1 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Collapsed modda navbar brand - 80px içinde ortala */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-header
  .navbar-brand {
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  text-align: center !important;
}

/* Collapsed modda icon logo - 80px içinde ortada */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu
  .navbar-header
  .sidebar-logo-icon {
  margin: 0 auto !important;
  display: block !important;
  width: 52px !important;
  height: 52px !important;
}

/* Collapsed modda toggle buton - GİZLE (anlamsız) */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu:not(.expanded)
  .navbar-header
  .nav-item.nav-toggle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hover (expanded) durumunda toggle göster */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-header
  .nav-item.nav-toggle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  right: 0.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* ============================================
   HOVER DURUMU - Collapsed modda hover (expanded)
   ============================================ */

/* Hover (expanded) - navbar header genişle */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-header {
  width: 260px !important;
}

/* Hover (expanded) - navbar nav genişle */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-header
  .navbar-nav {
  width: 100% !important;
  max-width: 260px !important;
  justify-content: space-between !important;
}

/* Hover (expanded) - logo item sola */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-header
  .nav-item.me-auto {
  justify-content: flex-start !important;
  margin-right: auto !important;
}

/* Hover (expanded) - navbar brand sola */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-header
  .navbar-brand {
  justify-content: flex-start !important;
  padding-left: 1.64rem !important;
  width: auto !important;
  text-align: left !important;
}

/* Hover (expanded) - Full logo GÖSTER (güçlü selector) */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .sidebar-logo-full,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-brand
  .sidebar-logo-full,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-header
  .navbar-brand
  .sidebar-logo-full,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-header
  .navbar-brand
  img.sidebar-logo-full {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 180px !important;
  max-height: 50px !important;
}

/* Hover (expanded) - Measurement Center kare logo için özel boyut */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .sidebar-logo-full.measurement-center-logo {
  max-width: 140px !important;
  max-height: 140px !important;
}

/* Hover (expanded) - Icon logo GİZLE (güçlü selector) */
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .sidebar-logo-icon,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-brand
  .sidebar-logo-icon,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-header
  .navbar-brand
  .sidebar-logo-icon,
.vertical-layout.vertical-menu-modern.menu-collapsed
  .main-menu.expanded
  .navbar-header
  .navbar-brand
  img.sidebar-logo-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
}

/* Collapsed mode - content shifts left (sidebar 80px) */
.vertical-layout.vertical-menu-modern.menu-collapsed .app-content {
  margin-left: 80px !important;
  transition: margin-left 0.3s ease;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .navbar.fixed-top,
.vertical-layout.vertical-menu-modern.menu-collapsed .navbar.floating-nav {
  left: 80px !important;
  transition: left 0.3s ease;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .footer {
  margin-left: 80px !important;
  transition: margin-left 0.3s ease;
}

/* Hover on collapsed sidebar - content shifts back right temporarily */
.vertical-layout.vertical-menu-modern.menu-collapsed.sidebar-hover-active
  .app-content,
.vertical-layout.vertical-menu-modern.menu-collapsed:has(.main-menu.expanded)
  .app-content {
  margin-left: 260px !important;
}

.vertical-layout.vertical-menu-modern.menu-collapsed.sidebar-hover-active
  .navbar.fixed-top,
.vertical-layout.vertical-menu-modern.menu-collapsed.sidebar-hover-active
  .navbar.floating-nav,
.vertical-layout.vertical-menu-modern.menu-collapsed:has(.main-menu.expanded)
  .navbar.fixed-top,
.vertical-layout.vertical-menu-modern.menu-collapsed:has(.main-menu.expanded)
  .navbar.floating-nav {
  left: 260px !important;
}

.vertical-layout.vertical-menu-modern.menu-collapsed.sidebar-hover-active
  .footer,
.vertical-layout.vertical-menu-modern.menu-collapsed:has(.main-menu.expanded)
  .footer {
  margin-left: 260px !important;
}

/* Expanded mode (toggle button) - content stays fixed at 260px */
.vertical-layout.vertical-menu-modern.menu-expanded .app-content {
  margin-left: 260px !important;
}

.vertical-layout.vertical-menu-modern.menu-expanded .navbar.fixed-top,
.vertical-layout.vertical-menu-modern.menu-expanded .navbar.floating-nav {
  left: 260px !important;
}

.vertical-layout.vertical-menu-modern.menu-expanded .footer {
  margin-left: 260px !important;
}

/* ============================================
   GLOBAL MODERN TABLE STYLES
   ============================================ */

/* CSS Variables for Modern Table */
:root {
  --modern-table-header-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --modern-table-border-color: #ebe9f1;
  --modern-table-hover-bg: #f8f8f8;
  --modern-table-text-primary: #5e5873;
  --modern-table-text-secondary: #6e6b7b;
}

.dark-layout {
  --modern-table-header-bg: linear-gradient(135deg, #242b3d 0%, #3b4253 100%);
  --modern-table-border-color: #3b4253;
  --modern-table-hover-bg: #242b3d;
  --modern-table-text-primary: #d0d2d6;
  --modern-table-text-secondary: #b4b7bd;
}

/* Modern Table Base Styles */
.modern-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.modern-table thead th {
  background: var(--modern-table-header-bg);
  padding: 0.875rem 1rem;
  font-weight: 600;
  color: var(--modern-table-text-secondary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  white-space: nowrap;
}

.modern-table thead th:first-child {
  border-radius: 8px 0 0 8px;
}

.modern-table thead th:last-child {
  border-radius: 0 8px 8px 0;
}

.modern-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--modern-table-border-color);
  font-size: 0.875rem;
  color: var(--modern-table-text-secondary);
  vertical-align: middle;
}

.modern-table tbody tr:last-child td {
  border-bottom: none;
}

.modern-table tbody tr:hover {
  background: var(--modern-table-hover-bg);
}

/* Modern Table Action Buttons */
.modern-table .action-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
}

.modern-table .action-buttons .btn {
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
}

.modern-table .action-buttons .btn svg {
  width: 14px;
  height: 14px;
}

.modern-table .action-buttons .badge {
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 6px;
}

/* DataTables integration with Modern Table */
.modern-table.dataTable thead th {
  background: var(--modern-table-header-bg);
}

.modern-table.dataTable.no-footer {
  border-bottom: none;
}

/* DataTables wrapper styling */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: 0.75rem 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: 8px;
  border: 1px solid var(--modern-table-border-color);
  padding: 0.4rem 0.75rem;
}

.dark-layout .dataTables_wrapper .dataTables_length select,
.dark-layout .dataTables_wrapper .dataTables_filter input {
  background-color: #283046;
  border-color: #3b4253;
  color: #b4b7bd;
}

/* Finance Card Styles (Reusable) */
.finance-card {
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
  border: none;
}

.dark-layout .finance-card {
  background: #283046;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25);
}

.finance-card-header {
  border-radius: 18px 18px 0 0;
  border-bottom: none;
  padding: 1rem 1.5rem 0.5rem;
  background: transparent;
}

/* ============================================
   NAVBAR QUICK ACTION BUTTONS - MOBİL RESPONSİVE
   ============================================ */

/* Navbar quick actions container */
.navbar-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Quick button base styles */
.navbar-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.navbar-quick-btn:hover {
  background: rgba(115, 103, 240, 0.1);
}

/* Icon styles */
.navbar-quick-btn .navbar-btn-icon {
  flex-shrink: 0;
}

/* Text styles - default visible */
.navbar-quick-btn .navbar-btn-text {
  margin-left: 0.375rem;
  white-space: nowrap;
}

/* MOBİL GÖRÜNÜM: Yazıları gizle, sadece ikon göster */
@media (max-width: 991.98px) {
  /* Navbar quick actions - make items smaller for mobile */
  .navbar-quick-actions {
    gap: 0.125rem;
  }
  
  .navbar-quick-actions .nav-item {
    display: block !important;
  }
  
  /* Hide text on mobile */
  .navbar-quick-btn .navbar-btn-text {
    display: none !important;
  }
  
  /* Compact button style for mobile */
  .navbar-quick-btn {
    padding: 0.5rem;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
  }
  
  /* Icon sizing for mobile */
  .navbar-quick-btn .navbar-btn-icon {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* Enhanced hover effect for mobile */
  .navbar-quick-btn:hover,
  .navbar-quick-btn:focus {
    background: rgba(115, 103, 240, 0.15);
    transform: scale(1.05);
  }
  
  /* Active state */
  .navbar-quick-btn:active {
    transform: scale(0.95);
  }
}

/* Tablet görünümü (medium) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-quick-btn {
    padding: 0.5rem 0.5rem;
  }
}

/* DESKTOP GÖRÜNÜM: Normal görünüm - yazılar görünsün */
@media (min-width: 992px) {
  .navbar-quick-btn .navbar-btn-text {
    display: inline !important;
  }
  
  .navbar-quick-btn .navbar-btn-icon {
    margin-right: 0.375rem;
  }
}

/* Tooltip styling enhancements for mobile */
.navbar-quick-btn[data-bs-toggle="tooltip"]:hover::after {
  /* Custom tooltip indicator */
}

/* Dark mode support */
.dark-layout .navbar-quick-btn:hover {
  background: rgba(115, 103, 240, 0.2);
}

/* Special styling for accent buttons (like "Hızlı Antrenman") */
.navbar-quick-btn[style*="7367f0"] .navbar-btn-icon {
  color: #7367f0 !important;
}

@media (max-width: 991.98px) {
  .navbar-quick-btn[style*="7367f0"] {
    background: rgba(115, 103, 240, 0.08);
  }
  
  .navbar-quick-btn[style*="7367f0"]:hover {
    background: rgba(115, 103, 240, 0.2);
  }
}

/* ============================================
   Sporcu Admin Sidebar - Modern Gradient Design
   ============================================ */

/* Profile Card */
.sporcu-profile-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 2rem;
  color: white;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sporcu-profile-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: sporcu-pulse 3s ease-in-out infinite;
}

.sporcu-profile-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.sporcu-profile-card h4 {
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 1;
  color: #fff !important;
}

@keyframes sporcu-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Menu List */
.sporcu-menu-list {
  background: white;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.sporcu-menu-list-header {
  font-weight: 700;
  color: #667eea;
  margin-bottom: 1rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sporcu-menu-list-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.35rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  border-left: 3px solid #e9ecef;
  background: #f8f9fa;
  text-decoration: none;
  color: #2c3e50;
  font-size: 0.9rem;
}

.sporcu-menu-list-item:hover {
  background: #e9ecef;
  border-left-color: #667eea;
  transform: translateX(3px);
  color: #2c3e50;
  text-decoration: none;
}

.sporcu-menu-list-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  border-left-color: white;
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.sporcu-menu-list-item.active * {
  color: white !important;
}

.sporcu-menu-list-item i,
.sporcu-menu-list-item svg {
  margin-right: 0.75rem;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .sporcu-profile-card img {
    width: 100px;
    height: 100px;
  }
}

/* Dark Mode */
.dark-layout .sporcu-profile-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dark-layout .sporcu-menu-list {
  background: #283046;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.dark-layout .sporcu-menu-list-header {
  color: #9aa9ec;
}

.dark-layout .sporcu-menu-list-item {
  background: #161d31;
  border-left-color: #3b4253;
  color: #b4b7bd;
}

.dark-layout .sporcu-menu-list-item:hover {
  background: #1e2740;
  border-left-color: #667eea;
  color: #d0d2d6;
}

.dark-layout .sporcu-menu-list-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
}

/* Photo Upload Button */
.sporcu-btn-upload {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.sporcu-btn-upload:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}

/* ============================================
   Sporcu Admin Content Cards
   ============================================ */

/* Info Card */
.sporcu-info-card {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background: white;
  height: 100%;
}

.sporcu-info-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
}

.sporcu-info-card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  font-size: 1.05rem;
}

.sporcu-info-card-body {
  padding: 1.5rem;
}

/* Info Item */
.sporcu-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid #f1f1f1;
}

.sporcu-info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.sporcu-info-item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667eea;
}

.sporcu-info-item-content {
  flex: 1;
}

.sporcu-info-item-label {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.sporcu-info-item-value {
  font-weight: 700;
  color: #2c3e50;
  font-size: 1rem;
}

.sporcu-info-item-value a {
  color: #667eea;
  text-decoration: none;
}

.sporcu-info-item-value a:hover {
  text-decoration: underline;
}

/* Veli Card (green gradient) */
.sporcu-veli-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.sporcu-veli-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
}

.sporcu-veli-card-header-anne {
  background: linear-gradient(135deg, #ea5455 0%, #ff6b6b 100%);
  color: white;
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  font-size: 1.05rem;
}

.sporcu-veli-card-header-baba {
  background: linear-gradient(135deg, #00cfe8 0%, #1e9fc5 100%);
  color: white;
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Dark Mode - Content Cards */
.dark-layout .sporcu-info-card {
  background: #283046;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.dark-layout .sporcu-info-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.dark-layout .sporcu-info-card-body {
  background: #283046;
}

.dark-layout .sporcu-info-item {
  border-bottom-color: #3b4253;
}

.dark-layout .sporcu-info-item-icon {
  background: rgba(102, 126, 234, 0.2);
  color: #9aa9ec;
}

.dark-layout .sporcu-info-item-label {
  color: #b4b7bd;
}

.dark-layout .sporcu-info-item-value {
  color: #d0d2d6;
}

.dark-layout .sporcu-info-item-value a {
  color: #9aa9ec;
}

.dark-layout .sporcu-veli-card {
  background: #283046;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.dark-layout .sporcu-veli-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* ============================================
   Sporcu Admin Content - Form Cards
   ============================================ */

/* Form Card */
.sporcu-form-card {
  border: none;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  background: white;
  margin-bottom: 1.5rem;
}

.sporcu-form-card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 20px 20px 0 0;
}

.sporcu-form-card-header i,
.sporcu-form-card-header svg {
  width: 20px;
  height: 20px;
}

.sporcu-form-card-header.health {
  background: linear-gradient(135deg, #28c76f 0%, #00cfe8 100%);
}

.sporcu-form-card-header.security {
  background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
}

.sporcu-form-card-header.logs {
  background: linear-gradient(135deg, #7367f0 0%, #ce9ffc 100%);
}

.sporcu-form-card-header.notes {
  background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%);
}

.sporcu-form-card-header.messages {
  background: linear-gradient(135deg, #00cfe8 0%, #1e9fff 100%);
}

.sporcu-form-card-header.documents {
  background: linear-gradient(135deg, #ea5455 0%, #f8a5c2 100%);
}

.sporcu-form-card-header.finance {
  background: linear-gradient(135deg, #28c76f 0%, #48dbfb 100%);
}

.sporcu-form-card-body {
  padding: 1.5rem;
}

/* Form Sections */
.sporcu-form-section {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.sporcu-form-section:last-child {
  margin-bottom: 0;
}

.sporcu-form-section-title {
  color: #667eea;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sporcu-form-section-title i,
.sporcu-form-section-title svg {
  width: 18px;
  height: 18px;
}

/* Veli Form Section Colors */
.sporcu-form-section.mother-section .sporcu-form-section-title {
  color: #e83e8c;
}

.sporcu-form-section.mother-section {
  border-left: 4px solid #e83e8c;
}

.sporcu-form-section.father-section .sporcu-form-section-title {
  color: #007bff;
}

.sporcu-form-section.father-section {
  border-left: 4px solid #007bff;
}

.sporcu-form-section.sibling-section .sporcu-form-section-title {
  color: #28c76f;
}

.sporcu-form-section.sibling-section {
  border-left: 4px solid #28c76f;
}

/* ============================================
   Sporcu Admin Content - Health Questions
   ============================================ */

.sporcu-health-question {
  background: #f8f9fa;
  border-left: 4px solid #28c76f;
  border-radius: 0 15px 15px 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.sporcu-health-question:last-of-type {
  margin-bottom: 0;
}

.sporcu-health-question-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #2c3e50;
  margin-bottom: 0.75rem;
}

/* ============================================
   Sporcu Admin Content - Password Section
   ============================================ */

.sporcu-password-section {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
}

.sporcu-password-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
}

.sporcu-password-icon i,
.sporcu-password-icon svg {
  width: 36px;
  height: 36px;
}

.sporcu-alert-warning {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
  border: none;
  border-left: 4px solid #ffc107;
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
  color: #856404;
}

.sporcu-alert-success {
  background: linear-gradient(135deg, rgba(40, 199, 111, 0.1) 0%, rgba(0, 207, 232, 0.1) 100%);
  border: none;
  border-left: 4px solid #28a745;
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
  color: #155724;
}

/* ============================================
   Sporcu Admin Content - Log Table
   ============================================ */

.sporcu-log-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.sporcu-log-table thead th {
  background: #f8f9fa;
  color: #6c757d;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.85rem 1rem;
  border-bottom: 2px solid #e9ecef;
}

.sporcu-log-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: middle;
  font-size: 0.9rem;
}

.sporcu-log-table tbody tr:hover {
  background: #f8f9fa;
}

.sporcu-log-badge {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-block;
}

.sporcu-log-badge.created {
  background: rgba(40, 199, 111, 0.12);
  color: #28c76f;
}

.sporcu-log-badge.updated {
  background: rgba(0, 207, 232, 0.12);
  color: #00cfe8;
}

.sporcu-log-badge.deleted {
  background: rgba(234, 84, 85, 0.12);
  color: #ea5455;
}

.sporcu-log-badge.restored {
  background: rgba(255, 159, 67, 0.12);
  color: #ff9f43;
}

/* ============================================
   Sporcu Admin Content - Note Cards
   ============================================ */

.sporcu-note-card {
  background: white;
  border: none;
  border-left: 4px solid #667eea;
  border-radius: 0 15px 15px 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.sporcu-note-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* ============================================
   Sporcu Admin Content - Message Buttons
   ============================================ */

.sporcu-message-btn {
  border: 2px solid;
  border-radius: 15px;
  padding: 1.25rem 1rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sporcu-message-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.sporcu-message-btn.mail {
  border-color: #ea5455;
  color: #ea5455;
}

.sporcu-message-btn.mail:hover {
  background: #ea5455;
  color: white;
}

.sporcu-message-btn.sms {
  border-color: #00cfe8;
  color: #00cfe8;
}

.sporcu-message-btn.sms:hover {
  background: #00cfe8;
  color: white;
}

.sporcu-message-btn.template {
  border-color: #667eea;
  color: #667eea;
}

.sporcu-message-btn.template:hover {
  background: #667eea;
  color: white;
}

/* ============================================
   Sporcu Admin Content - Document Table
   ============================================ */

.sporcu-document-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.sporcu-document-table thead th {
  background: #f8f9fa;
  color: #6c757d;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.85rem 1rem;
  border-bottom: 2px solid #e9ecef;
}

.sporcu-document-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: middle;
}

.sporcu-document-table tbody tr:hover {
  background: #f8f9fa;
}

.sporcu-document-preview {
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  transition: transform 0.3s ease;
}

.sporcu-document-preview:hover {
  transform: scale(1.05);
}

/* ============================================
   Sporcu Admin Content - Dark Mode
   ============================================ */

.dark-layout .sporcu-form-card {
  background: #283046;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.dark-layout .sporcu-form-card-body {
  background: #283046;
}

.dark-layout .sporcu-form-section {
  background: #161d31;
}

.dark-layout .sporcu-form-section-title {
  color: #9aa9ec;
}

.dark-layout .sporcu-form-section.mother-section .sporcu-form-section-title {
  color: #f48fb1;
}

.dark-layout .sporcu-form-section.father-section .sporcu-form-section-title {
  color: #64b5f6;
}

.dark-layout .sporcu-form-section.sibling-section .sporcu-form-section-title {
  color: #5dd99c;
}

.dark-layout .sporcu-health-question {
  background: #161d31;
  border-left-color: #5dd99c;
}

.dark-layout .sporcu-health-question-title {
  color: #d0d2d6;
}

.dark-layout .sporcu-password-section {
  background: #161d31;
}

.dark-layout .sporcu-alert-warning {
  background: rgba(255, 193, 7, 0.08);
  color: #ffc107;
}

.dark-layout .sporcu-alert-success {
  background: rgba(40, 199, 111, 0.08);
  color: #28c76f;
}

.dark-layout .sporcu-log-table thead th {
  background: #161d31;
  color: #b4b7bd;
  border-bottom-color: #3b4253;
}

.dark-layout .sporcu-log-table tbody td {
  border-bottom-color: #3b4253;
  color: #b4b7bd;
}

.dark-layout .sporcu-log-table tbody tr:hover {
  background: #161d31;
}

.dark-layout .sporcu-note-card {
  background: #161d31;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.dark-layout .sporcu-message-btn {
  background: #283046;
}

.dark-layout .sporcu-document-table thead th {
  background: #161d31;
  color: #b4b7bd;
  border-bottom-color: #3b4253;
}

.dark-layout .sporcu-document-table tbody td {
  border-bottom-color: #3b4253;
  color: #b4b7bd;
}

.dark-layout .sporcu-document-table tbody tr:hover {
  background: #161d31;
}