/* ============================================
   FÖRENING (CLUB PAGE) — MOBIL
   ============================================ */

@media (max-width: 768px) {

  /* ======================================
     1. HERO SECTION
     ====================================== */

  /* Hero container */
  #app .container > div[style*="linear-gradient"] {
    padding: 20px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
  }

  /* Hero flex: stack logo above text */
  #app .container > div[style*="linear-gradient"] div[style*="justify-content:space-between"] {
    flex-direction: column-reverse !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  /* Text column: center */
  #app .container > div[style*="linear-gradient"] div[style*="flex:1;min-width:0"] {
    text-align: center !important;
  }

  /* Club name */
  #app .container > div[style*="linear-gradient"] h1 {
    font-size: 22px !important;
    text-align: center !important;
  }

  /* Description */
  #app .container > div[style*="linear-gradient"] p {
    text-align: center !important;
    font-size: 13px !important;
  }

  /* "FÖRENING" badge: center */
  #app .container > div[style*="linear-gradient"] div[style*="inline-block"] {
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Logo: smaller */
  #club-logo-display {
    width: 64px !important;
    height: 64px !important;
  }

  /* Stats row: horizontal scroll, no wrap */
  #app .container > div[style*="linear-gradient"] div[style*="gap:clamp(20px"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding-bottom: 4px !important;
    justify-content: center !important;
  }

  #app .container > div[style*="linear-gradient"] div[style*="gap:clamp(20px"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Each stat: bordered box */
  #app .container > div[style*="linear-gradient"] div[style*="gap:clamp(20px"] > div {
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    text-align: center !important;
  }

  /* Stat numbers: slightly smaller */
  #stat-teams,
  #stat-coaches,
  #stat-shared,
  #stat-members {
    font-size: 20px !important;
  }

  /* Stat labels */
  #app .container > div[style*="linear-gradient"] div[style*="gap:clamp(20px"] > div > div:last-child {
    font-size: 11px !important;
    margin-top: 2px !important;
  }

  /* ======================================
     2. VISION + VÄRDEORD — 1 kolumn
     ====================================== */

  .forening-grid-vision {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
  }

  .fcard .p-4 {
    padding: 16px !important;
  }

  .fcard div[style*="width:60px;height:60px"] {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }

  /* Value cards: compact */
  .fcard .value-card {
    padding: 10px !important;
  }

  /* ======================================
     3. KORT-SEKTIONER (generellt)
     ====================================== */

  #app .container > .card {
    margin-bottom: 16px !important;
  }

  #app .container > .card > .card-header {
    padding: 10px 12px !important;
  }

  #app .container > .card > .card-header h5 {
    font-size: 0.95rem !important;
  }

  #app .container > .card > .card-body {
    padding: 10px !important;
  }

  /* ======================================
     4. LAG-LISTA
     ====================================== */

  #teams-list > div[data-team-id] {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  /* Initials badge: smaller */
  #teams-list > div[data-team-id] > div[style*="width:44px"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 0.65rem !important;
  }

  /* Team name */
  #teams-list > div[data-team-id] div[style*="font-weight:700;font-size:0.95rem"] {
    font-size: 0.85rem !important;
  }

  /* Coach name text: hide, keep badge */
  #teams-list > div[data-team-id] span[style*="max-width:100px"] {
    display: none !important;
  }

  /* ======================================
     5. CHATT + KALENDER — 1 kolumn
     ====================================== */

  .forening-grid-chat {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
  }

  /* Chat messages: shorter */
  #chat-messages {
    height: 220px !important;
  }

  /* Chat input */
  #chat-input {
    font-size: 14px !important;
  }

  /* Chat bubbles: wider on mobile */
  #chat-messages div[style*="max-width:72%"] {
    max-width: 85% !important;
  }

  /* Calendar events: compact */
  #club-calendar > div[data-event-id] {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  /* ======================================
     6. AKTIVITETSFEED
     ====================================== */

  #activity-feed > .d-flex {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    gap: 10px !important;
  }

  #activity-feed > .d-flex div[style*="width:36px"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  /* ======================================
     7. MEDLEMSLISTA
     ====================================== */

  #members-list > .d-flex {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #members-list div[style*="width:36px;height:36px"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  /* ======================================
     8. KLUBBIBLIOTEK-PREVIEW
     ====================================== */

  #club-library-preview > .d-flex {
    gap: 10px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #club-library-preview div[style*="width:40px;height:40px"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  /* ======================================
     9. VÄNTANDE ANSÖKNINGAR
     ====================================== */

  #pending-section .d-flex.align-items-center {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #pending-section .d-flex.align-items-center > .d-flex:last-child {
    width: 100% !important;
  }

  #pending-section .d-flex.align-items-center > .d-flex:last-child .btn {
    flex: 1 !important;
  }

  /* ======================================
     10. MODALER — FULLSKÄRM
     ====================================== */

  /* --- Kalender-event modal --- */
  #club-event-modal {
    overflow: hidden !important;
  }

  #club-event-modal .modal-dialog {
    margin: 0 !important;
    display: block !important;
  }

  #club-event-modal .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1060 !important;
  }

  #club-event-modal .modal-header,
  #club-event-modal .modal-footer {
    flex-shrink: 0 !important;
  }

  #club-event-modal .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #club-event-modal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  #club-event-modal .modal-footer [data-bs-dismiss="modal"] {
    display: none !important;
  }

  #club-event-modal .modal-footer .btn-primary {
    flex: 1 !important;
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  /* --- Lag-modal --- */
  .modal-club-team {
    overflow: hidden !important;
  }

  .modal-club-team .modal-dialog {
    margin: 0 !important;
    display: block !important;
  }

  .modal-club-team .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1060 !important;
  }

  .modal-club-team .modal-header,
  .modal-club-team .modal-footer {
    flex-shrink: 0 !important;
  }

  .modal-club-team .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-club-team .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  .modal-club-team .modal-footer [data-bs-dismiss="modal"] {
    display: none !important;
  }

  .modal-club-team .modal-footer .btn-primary {
    flex: 1 !important;
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  /* --- Skapa/Gå med-modaler --- */
  #createClubModal,
  #joinClubModal {
    overflow: hidden !important;
  }

  #createClubModal .modal-dialog,
  #joinClubModal .modal-dialog {
    margin: 0 !important;
    display: block !important;
  }

  #createClubModal .modal-content,
  #joinClubModal .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1060 !important;
  }

  #createClubModal .modal-header,
  #createClubModal .modal-footer,
  #joinClubModal .modal-header,
  #joinClubModal .modal-footer {
    flex-shrink: 0 !important;
  }

  #createClubModal .modal-body,
  #joinClubModal .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #createClubModal .modal-footer,
  #joinClubModal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  #createClubModal .modal-footer [data-bs-dismiss="modal"],
  #joinClubModal .modal-footer [data-bs-dismiss="modal"] {
    display: none !important;
  }

  #createClubModal .modal-footer .btn-primary,
  #joinClubModal .modal-footer .btn-primary {
    flex: 1 !important;
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

}