/* Grundlæggende layout (baggrund + font) */
body,
header,
footer {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #303444;
    color: #E5E7EB;
}


/*Style fuld skærm knap*/
.fullscreen-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0; /* Remove any default padding */
}
/*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 */
}

/*BCB Menu logo **************************************************************************/

/*Top-Menubar logo*/ 
.logo-mobile {
    display: none;
}

/*Fjern pil på dropdown i top menu*/
.no-caret.dropdown-toggle::after {
    display: none !important;
}





/* Portrait Mode on Mobile Devices */
@media (max-width: 768px) and (orientation: portrait) {
    .logo-desktop {
        display: none; /* Hide the desktop logo */
        width: 80%; /* 30% of the container width */
        height: auto; /* Maintain aspect ratio */
    }

    .logo-mobile {
        display: inline; /* Show the mobile logo */
        width: 40%; /* 50% of the container width */
        height: auto;
    }
}

/* Landscape Mode or Larger Screens */
@media (min-width: 769px) or (orientation: landscape) {
    .logo-desktop {
        display: inline; /* Show the desktop logo */
        width: 80%; /* 30% of the container width */
        height: auto; /* Maintain aspect ratio */
    }

    .logo-mobile {
        display: none; /* Hide the mobile logo */
        width: 40%; /* 50% of the container width */
        height: auto;
    }
}


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

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


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

/*Item Modal settings ************************************************************************************/
#IconModal .modal-content {
    border: 2px solid #666;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
}

#IconList div {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#IconList div:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    border-color: #aaa;
}


















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

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

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


.preview-wrapper {
    position: relative;
    display: inline-block;
}

.status-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(255,255,255,0.7);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 14px;
}