/*Style fuld skærm knap*/
.fullscreen-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0; /* Remove any default padding */
}

/*BCB Menu logo **************************************************************************/
/* Logo styling */
.logo-desktop {
    max-height: 35px;
    display: inline-block;
}

.logo-mobile {
    display: none;
    max-height: 30px;
}

/* BCBK Top menu */
.bcbbnavbar { display: block; } /* default show */

/* Fjern bootstrap pil ned på dropdowns */
.bcbbnavbar .dropdown-toggle::after {
  display: none !important;
}

/* Navbar container fix */
.navbar {
    overflow: visible;
    position: relative;
    z-index: 1000;
}

/* Dropdown menu baggrund */
.dropdown-menu {
    z-index: 1050;
    margin-top: 0.5rem;
    background-color: #222;
}

/* Standard tekstfarve i dropdown */
.dropdown-menu .dropdown-item {
    color: #fff; /* hvid tekst */
}

/* Hover/focus farve */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: #fff;           /* stadig hvid tekst */
    background-color: #444; /* mørkere baggrund på hover */
}


/* Mobil portrait: */
@media (max-width: 768px) and (orientation: portrait) {
    .bcbbnavbar { display: none; } /* skjul top menu */
    .mobile-menu { display: block; } /* vis mobil menu */
}

/* Mobile Landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .bcbbnavbar { display: none; } /* skjul top menu */
    .mobile-menu { display: block; } /* vis mobil menu */

    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: inline-block;
    }

    .menu-label {
        display: inline;
        font-size: 0.7rem;
        color: #aaa;
    }

    .navbar-nav {
        gap: 0.8rem;
    }
}

/* Desktop */
@media (min-width: 769px) {

    .bcbbnavbar { display: block; } /* Vis top menu */
    .mobile-menu { display: none; } /* Skjul mobil menu */

    .logo-desktop {
        display: inline-block;
    }

    .logo-mobile {
        display: none;
    }

    .menu-label {
        display: inline;
        font-size: 0.8rem;
        color: #ccc;
        text-align: center;
        margin-top: 2px;
    }

    .navbar-nav {
        gap: 1rem;
    }
}


/*Alert og Info boks *********************************************************************************/
/* Alert and Info Boxes (dynamic height) */
#alertBox, #infoBox {
    position: fixed;
    z-index: 1055 !important;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    padding: 10px 20px;
    min-height: 40px;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: pre-wrap; /* So line breaks work */
    text-align: center;
}

/* Separate vertical positions */
#alertBox {
    top: 10px;
}

#infoBox {
    top: 100px;
}
 

/*Kommentar popup*/
body #komBox {
  position: fixed;
  z-index: 1095;
  background: #474757;
  display: block;
  border: 2px solid rgba(54, 29, 102, 0.274);


  /* Default: center of the screen */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Adapt to content */
  width: auto;
  max-width: 90vw;
  min-width: 20vw;

  height: auto !important;

}
#komBox.d-none {
  display: none;
}
#komBox .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Confirm Box */
#confirmBox {
  position: fixed;
  z-index: 1095;
  background: #474757;
  color: white;
  border: 2px solid rgba(54, 29, 102, 0.274);
  padding: 20px;
  border-radius: 4px;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: auto;
  max-width: 90vw;
  min-width: 20vw;

  text-align: center;
  display: block;
}

#confirmBox.d-none {
  display: none;
}

/*MODAL SETTINGS ************************************************************************************/
/* Only affects buttons with .close-light */
.btn-close.close-light {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.modal-backdrop {
  display: none !important;
}

/* Xl modal vindue) */
.modal-dialog.modal-xl {
    max-width: 95%; /* Default width for smaller screens (mobile) */
  }

  @media (min-width: 768px) { /* Tablet and larger screens */
    .modal-dialog.modal-xl {
      max-width: 65%; /* Width for desktop screens */
    }
  }

/* XXl modal vindue) */
.modal-dialog.modal-xxl {
    max-width: 98%; /* Default width for smaller screens (mobile) */
  }

  @media (min-width: 768px) { /* Tablet and larger screens */
    .modal-dialog.modal-xxl {
      max-width: 85%; /* Width for desktop screens */
    }
  }

/* Sikre modal i lag så alert og info boks kommer oven på */
.modal-backdrop {
    z-index: 1049 !important; /* Ensure backdrop stays below the alert box */
}
/* Ensure the modal content stays below the alert box */
.modal {
    z-index: 1050 !important; /* Set modal z-index to ensure it stays below the alert box */
}

/*Modal kollonner*/
.col-left {
    width: 70%;   
    float: left;
    padding-right: 15px; 
}
.col-right {
    width: 30%;  
    float: right;
    position: relative; 
    padding-left: 10px; /* Add padding for spacing */
    background: linear-gradient(to right, gray 2px, transparent 2px); /* Add vertical line as a background */
    background-size: 100% 100%; /* Ensure the line extends the full height */
    background-position: left; /* Position line to the left */
    background-repeat: no-repeat; /* Prevent repeating */
}

/* KAMPE **************************************************************************/
.kamp-wrapper {
  width: 100%;         /* fyld hele bredden på mobil */
  max-width: 100%;     /* default = fuldskærm */
}

@media (min-width: 992px) {  /* desktop */
  .kamp-wrapper {
    max-width: 900px;   /* fx 900px eller hvad du synes */
  }
}

/* Turtræ ************************************************************************/
 /* Tilføj dine egne CSS-regler her for at tegne linjer mellem kasserne */
    .kampkasse {
        /* Tilpas stilarter for kampkasser */
        position: relative;
    }
    .finalekamp-wrapper {
        /* Centrer vertikalt */
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    .finalekampkasse {
        /* Tilpas stilarter for finalekampkassen */
        position: relative;
    }
    svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* SVG should not block mouse events */
    }
    /*Container bliver i toppen ved scroll */
    .sticky-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020; /* You can adjust the z-index if needed */
    }
    @media (max-width: 767.98px) {
        .sticky-top {
            position: static !important;
        }
    }
 /*Størrelse Køn icon */
    @media (min-width: 768px) {
        #kon-ico {
            width: 50px; /* Small on larger screens */
        }
      }
      @media (max-width: 767.98px) {
        #kon-ico {
            width: 50%; /* Full width on mobile */
        }
      }
    /*Størrelse flag icon */
    @media (min-width: 768px) {
        #flag-ico {
            width: 50px; /* Small on larger screens */
        }
      }
      @media (max-width: 767.98px) {
        #flag-ico {
            width: 50%; /* Full width on mobile */
        }
      }
    /*Størrelse kampe kolonne 1 */
      @media (min-width: 768px) {
        #Kcol1-td {
            width: 5%; /* Set width for larger screens (e.g., PC) */
        }
      }
      @media (max-width: 767.98px) {
        #Kcol1-td {
            width: 5%; /* Adjust the width for mobile devices */
        }
      }
/* Størrelse resultat kolonne */
/* Style for larger screens (e.g., PC) */
@media (min-width: 768px) {
    #Kres-td {
        width: 5%; /* Set width for larger screens */
        display: table-cell; /* Ensure the element is displayed */
    }
}

/* Style for mobile devices in landscape mode */
@media (max-width: 767.98px) and (orientation: landscape) {
    #Kres-td {
        width: 10%; /* Adjust the width for mobile devices */
        display: table-cell; /* Ensure the element is displayed */
    }
}

/* Hide the element on mobile devices in portrait mode */
@media (max-width: 767.98px) and (orientation: portrait) {
    #Kres-td {
        display: none; /* Hide the element in portrait mode */
    }
}

/*Farve Bootstrap iconer*********************************************************************************/
.error-icon {
    filter: invert(27%) sepia(92%) saturate(7497%) hue-rotate(357deg) brightness(91%) contrast(118%);
}
.warning-icon {
    filter: invert(46%) sepia(98%) saturate(755%) hue-rotate(1deg) brightness(93%) contrast(96%);
}
.white-icon {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
.green-icon {
    filter: invert(53%) sepia(61%) saturate(432%) hue-rotate(49deg) brightness(102%) contrast(94%);
}


/*Match Gruppe liste***************************************************************************************/
#Glist tr.selected td {
    background-color: #2d3d55 !important; /* Applies color to table cells */
    color: white !important;
}


#Groupview {
    display: flex;
    justify-content: center;
    padding: 20px;
}
/*Match Gruppe view****************************************************************************************/
.tournament-grid {
    display: flex;
    gap: 15px;
}

.tournament-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.kamp-box {
    width: 100px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.kamp-box.selected {
    border: 3px solid rgb(97, 97, 156) !important;
    box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
}

.kamp-icon {
    width: 16px;
    height: 16px;
    margin: 2px;
}
  
.hr-row hr {
    border-top: 2px solid #ddd;
    margin: 5px 0;
}  
  

/*Dark Scrollbar for table ***************************************************/
.scroll-dark::-webkit-scrollbar {
    width: 10px;
}

.scroll-dark::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.scroll-dark::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 6px;
    border: 2px solid #1e1e1e;
}

.scroll-dark::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}

.scroll-dark {
    scrollbar-color: #444 #1e1e1e;
    scrollbar-width: thin;
}

/*Extra small bootstrap like font sizes **************************************/
.fs-7 {
    font-size: 0.75rem !important;  /* 12px */
}

.fs-8 {
    font-size: 0.625rem !important; /* 10px */
}


/*GRUPPE LISTE VISNING NY **************************************/

/* fx i din hoved- stylesheet */
.grp-highlight-text {
  color: rgb(43, 142, 207) !important;
  transition: color 0.5s;
}




/* Kun på store skærme hvor stages er horisontale */
@media(min-width: 768px) {
    .stage-wrapper {
        position: relative;
    }

    .kamp-wrapper {
        position: relative;
        transition: margin 0.2s ease;
    }

    /* For visuel effekt af linje mellem kampe (kan udbygges med pseudo-elementer) */
    .kamp-wrapper::before {
        content: '';
        position: absolute;
        top: -10px;  /* Juster til midten af kampkortet */
        left: -20px;
        width: 20px;
        height: 2px;
        background: #aaa;
    }
}