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





/*HTML BODY SETTINGS ********#050816****************************************************************************/




/*Input**********************************************************************************/
/*Breder*/
.bcbk-w5 {
width: 5%; /* Set the width to 5% */
}
.bcbk-w10 {
width: 10%; /* Set the width to 10% */
}
.bcbk-p10 {
width: 10px; /* Set the width to 10px */
}

/*Større checkboxes *********************************************************************/
.big-checkbox {
    transform: scale(1.5);
    margin-right: 10px;
}

/*BCBR Styling ###############################################################################################*/


/*Card styling*/
.bcbr-card {
    background: radial-gradient(circle at top left, #111827 0%, #020617 70%);
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);

}
.bcbr-card-header {
    background: transparent;
     border-radius: 18px;
    border-bottom: 1px solid rgba(59,130,246,0.18);
    color: #E5E7EB;
}

.bcbr-card-footer-button {
    bottom: 0;         /* klæber til bunden af card */
    left: 0;
    width: 100%;       /* fylder hele kortets bredde */
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-sizing: border-box; /* så padding ikke gør den bredere end kortet */
}

/* Variant: card med fast footer-knap */
.bcbr-card--with-footer {
    position: relative;
    padding-bottom: 46px; /* plads til knappen, justér efter højde */
}

/* Footer-container i bunden af kortet */
.bcbr-card--with-footer .bcbr-card-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 0;
}

/* Overstyr kun knappen i dette card */
.bcbr-card--with-footer .bcbr-card-footer-button {
    width: 100%;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-sizing: border-box;

    /* neutraliser global bottom/left hvis de driller andre steder */
    bottom: auto;
    left: auto;
}







/*Container styling*/
.bcbr-container {
    max-width: 1400px;
    margin: 0 auto;
}


/*BCB Menu logo **************************************************************************/
/* NAVBAR – V2.0 DARK TECH */
.navbar-bcbw {
    background: rgba(2, 6, 23, 0.85); /* mørkere, mere ren */
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(59, 131, 246, 0.082); /* blå-ish kant */
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    transition: all 0.25s ease;
}

/* NAVBAR SHELL – nu direkte på navbaren */
.navbar-shell {
    background: radial-gradient(circle at top left, #111827 0%, #020617 60%);
    border: 1px solid rgba(155, 161, 172, 0.548);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    margin: 8px auto;
    max-width: 1400px;
    padding: 4px 12px;
}


/* NAV LINKS – STRAMMET OP */
.navbar-bcbw .nav-link .link-text {
    position: relative;
    display: inline-block;
    padding-bottom: 2px; /* plads til underline */
    transition: color 0.15s ease, transform 0.15s ease;
}

.navbar-bcbw .nav-link .link-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0%;
    background-color: #3B82F6;
    transition: width 0.25s ease;
}

.navbar-bcbw .nav-link:hover .link-text::after {
    width: 100%;
}

.navbar-bcbw .nav-link:hover {
    color: #3B82F6;
    transform: translateY(-2px);
}

/* Caret */
.navbar-bcbw .dropdown-toggle::after { display: none !important; }
.navbar-bcbw .dropdown-toggle::before {
    content: "▾";
    font-size: 0.65em;
    opacity: 0.8;
    margin-left: 6px;
    position: relative;
    top: -1px;
    color: inherit;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.navbar-bcbw .nav-link:hover::before {
    color: #3B82F6;
    opacity: 1;
}




/* LOGO */
.navbar-brand img {
    height: 38px;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.navbar-brand img:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
}

/* MOBILE LOGO */
.logo-mobile { display: none; }
@media (max-width:768px){
    .logo-desktop { display: none; }
    .logo-mobile { display: inline; }
}

/* TOGGLER */
.navbar-toggler {
    border: none;
    outline: none;
    box-shadow: none;
    transition: transform 0.3s ease;
}
.navbar-toggler:active {
    transform: scale(0.92);
}

/* DROPDOWN MENUS */
.dropdown-menu {
    backdrop-filter: blur(14px);
    background: rgba(2, 6, 23, 0.95);
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.dropdown-item {
    color: rgba(229,231,235,0.9);
    transition: all 0.2s ease;
}
.dropdown-item:hover {
    background: rgba(59,130,246,0.15); /* blå hover */
    color: #93C5FD;
}



/*Alert og Info boks *********************************************************************************/
/* Alert and Info Boxes (dynamic height) **************/
/* Fælles styling */
.message-box {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1055;

    /* Autosize */
    width: auto;
    max-width: 90vw;
    min-width: 260px;

    /* Layout */
    padding: 0;
    border-radius: 0.5rem;
    overflow: hidden; /* Sikrer at header/body følger rundingen */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    animation: fadeIn 0.25s ease-out;
}

/* Placering */
#alertBox { top: 10px; }
#infoBox  { top: 100px; }

/* Header */
.message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

/* Titel */
.message-title {
    font-weight: 600;
    flex-grow: 1;
    margin-left: 8px;
}

/* Body */
.message-body {
    padding: 10px 14px;
    white-space: normal;
    word-break: break-word;
}

/* Ikon */
.message-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Close-knap i lys tema */
.close-light {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* QUIK confirm **************************************************************/

.quick-confirm {
    position: fixed;
    top: 18vh; /* 1/3 nede på skærmen */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;

    display: flex;
    justify-content: center;
    align-items: center;

    animation: qcFadeIn 0.15s ease-out;
}

.qc-circle {
    background: rgba(12, 14, 13, 0.753);
    border-radius: 50%;
    padding: 6px; /* mindre padding = mindre cirkel */

    /* Responsiv størrelse – lidt mindre end før */
    width: clamp(60px, 18vw, 110px);
    height: clamp(60px, 18vw, 110px);

    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.qc-icon {
    width: 90%;  /* fylder næsten hele cirklen */
    height: 90%;
}

@media (max-width: 767.98px) and (orientation: portrait) {
    .qc-circle {
        width: 80px;
        height: 80px;

    }
}


@keyframes qcFadeIn {
    from { opacity: 0; transform: translate(-50%, -55%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

 

/*Kommentar popup**********************************************************/
#komBox {
  position: fixed !important;
  inset: auto !important;
  top: 1rem !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}




body #komBox {
  position: fixed;
  z-index: 1095;

  /* Farver og stil som modal-dark */
  background: #020617;
  color: #E5E7EB;
  border-radius: 18px;
  border: 1px solid #374151;

  /* Top-position som modal-at-top */
  top: 0.75rem;/* desktop */
  left: 50%;
  transform: translateX(-50%); /* kun vandret centreret */

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

  display: block;
}

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

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

/* Responsive top-margin for mobil */
@media (max-width: 576px) {
  body #komBox {
    top: 1rem; /* lidt mindre på mobil */
  }
}

/* Header styling */
#komBox .kom-header {
  border-bottom: 1px solid #111827;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9CA3AF;
}



/* 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;
}


/*Accordion SETTINGS ************************************************************************************/
/* Kun påvirker accordion med .accordion-light */
.accordion-button.accordion-light::after {
  /* Original ikon er en Bootstrap SVG — vi kan filtrere eller erstatte det */
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Når den er åben (ikke collapsed), samme behandling */
.accordion-button.accordion-light:not(.collapsed)::after {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/*MODAL SETTINGS ************************************************************************************/
/* Hvis luk X */
#FnMatchModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
/* 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 */
}

/* 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 */
    }
}
/*Side bar *********************************************************************************/

        /* Custom styling for floating sidebar */
        .sidebar {
            width: 40px;
            height: 100vh; /* Full height */
            background-color: black;
            position: fixed;
            top: 0; /* Start at the top */
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
            padding-top: 20px;
            z-index: 0; /* Set lower z-index to allow navbar to be above */
        }

        .sidebar a {
            color: white;
            text-align: center;
            display: block;
            margin-bottom: 20px;
            font-size: 20px;
        }

        .sidebar a:hover {
            color: #ccc;
        }
/* Tabel collapse/expand */
    tr.hide-table-padding td {
        padding: 0;
        }
        
        .expand-button {
            position: relative;
        }
        
        .accordion-toggle .expand-button:after
        {
            position: absolute;
            left:.75rem;
            top: 50%;
            transform: translate(0, -50%);
            content: '-';
        }
        .accordion-toggle.collapsed .expand-button:after
        {
            content: '+';
        }

/*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%);
}
.darkgreen-icon {
    filter: invert(23%) sepia(78%) saturate(748%) hue-rotate(78deg) brightness(60%) contrast(95%);
}
/*Vinder icon i input *********************************************************************************/
.input-with-icon {
    background-image: url('../img/icons/person-arms-up.svg');
    background-repeat: no-repeat;
    background-position: right 5px center; /* Position icon on the left */
    background-size: 25px; /* Set icon size */
    background-color: transparent; /* Ensure the input background color is not overridden */
}

.input-with-icon svg {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}


/*BCB Stepper  *****************************************************************************************/

.bcb-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.bcb-step {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bcb-step-line {
    width: 30px;
    height: 4px;
    background-color: #777;
    margin: 0 8px;
    border-radius: 2px;
}

.bcb-step-line.green-line {
    background-color: #3a72ec;
}

/*Floting langauge select **************************************************/
/* Standard: mobil først */
#lang-float {
    position: fixed;
    top: 20px;
    right: 20px;   /* mobil: tæt på kanten */
    z-index: 99999;
}

/* Desktop: flyt tættere på login-kortet */
@media (min-width: 768px) {
    #lang-float {
        right: calc(50% - 220px); /* juster efter kortets bredde */
        top: 30px;
    }
}


#lang-btn {
    background: rgba(255,255,255,0.08); /* let transparent hvid */
    border: 1px solid rgba(59,130,246,0.18); /* samme blå kant som header */
    border-radius: 12px; /* lidt mindre rund end 50% */
    padding: 6px 8px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: 0.2s ease;
}

#lang-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(59,130,246,0.35);
}

#lang-btn img {
    width: 22px;
    height: 22px;
    filter: invert(1); /* gør sort → hvid */
}

#lang-menu {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    background: rgba(17,24,39,0.85); /* mørk transparent */
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    overflow: hidden;
    min-width: 140px;
}

#lang-menu a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #E5E7EB; /* samme lyse tekstfarve */
    font-size: 0.9rem;
}

#lang-menu a:hover {
    background: rgba(59,130,246,0.15); /* let blå hover */
}

#lang-menu.open {
    display: block;
}






/*Password styrke****************************************************************************************/
.strength-meter {
    margin-top: 5px;
    height: 5px;
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 3px;
}
.strength-meter div {
    height: 100%;
    border-radius: 3px;
}
.weak {
    width: 33%;
    background-color: red;
}
.medium {
    width: 66%;
    background-color: orange;
}
.strong {
    width: 100%;
    background-color: green;
}
.strength-text {
    margin-top: 5px;
    font-size: 0.9em;
    color: #666;
}

/*Tabel Gruppe Tr farve ************************************************************************************/
.table-green {
  --bs-table-bg: rgb(52, 73, 53);
  --bs-table-striped-bg: rgba(52, 73, 53, 1);
  --bs-table-hover-bg: rgba(52, 73, 53, 1);
}




/*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;
}  
  
/*Match Bokser søge model *****************************************************************/
/* Modal body will allow scrolling for the content */
#BsoegModal .modal-body {
    max-height: 70vh; /* Set the max height of the modal body (adjust as needed) */
    overflow: hidden; /* Prevent the entire modal from scrolling */
    padding-right: 15px; /* Prevent content from being hidden by scrollbar */
}

/* The table container will ensure the table stays inside the scrollable modal body */
#BsoegRes {
    max-height: 400px; /* Set max height for the table */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Sticky table header */
#BsoegRes .table thead th {
    position: sticky;
    top: 0;
    background: #222; /* Dark background for contrast */
    z-index: 2;
    color: #fff; /* Ensure header text is visible */
    padding: 0.75rem; /* Adjust padding for consistency */
}

/* Optional: Sticky first row (if desired) */
#BsoegRes .table tbody tr:first-child {
    position: sticky;
    top: 40px; /* Adjust based on the header height */
    background: #007bff; /* Optional styling for the first row */
    z-index: 1;
    color: white; /* Ensure the first row text is visible */
}

/* Additional styling for table rows */
#BsoegRes .table tbody tr {
    background-color: #f9f9f9; /* Light background for rows */
}

#BsoegRes .table tbody tr:hover {
    background-color: #f1f1f1; /* Hover effect for rows */
}

/*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 */
}