/* Box-sizing fix to prevent tiny overflow */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Ensure full-height layout works */
html, body {
    height: 100%;
    margin: 0;
    overscroll-behavior: none;
}

/* Calendar wrapper */
.calendar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* important for scrollable flex child */
}

/* Shared grid for header and body */
.calendar-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    width: 100%;
}

/* Header row */
.calendar-header {
    background: #f8f9fa;
    border-bottom: 1px solid #ccc;
    scrollbar-gutter: stable;
    overflow-y: scroll;
    overflow-x: hidden;
}

.calendar-header > div {
    padding: 8px 4px;
    text-align: center;
    font-size: 70%;
    font-weight: 500;    
    border-right: 1px solid #dee2e6;
    white-space: nowrap;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    overflow-x: hidden;
}

.calendar-header > div.today {
    font-weight: 800;
}

.calendar-header > div:first-child {
    background: #f1f3f5;
}

/* Each half-hour row */
.calendar-row {
    display: contents; /* allows children to align with the grid */
}

/* Time column */
.time-cell {
    padding: 4px 6px;
    text-align: right;
    font-size: 70%;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #e5e5e5;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    vertical-align: center;
}

/* Calendar cells */
.day-cell {
    position: relative;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fffeff;
    border-radius: 4px;
    /*cursor: copy;*/
    min-height: 24px;
    padding: 0px;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.day-cell .match-label {
    display: flex;
    align-items: center;
    justify-content: center;    
    direction: row;
    margin: 0px;
    padding: 0px;
    width: 100%;    
    height: 100%;        
    cursor: pointer; /* help */
    line-height: normal;
    /*background: rgb(233, 183, 101);*/
}

.match-label span {
    font-size: 18px;
    font-weight: 600;
    align-self: center;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    /*color: rgb(255, 255, 255);*/
    color: darkgoldenrod;
}

.match-label img {
    align-self: center;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}


/* Half-hour dotted separators */
.half-hour .time-cell,
.half-hour .day-cell {
    border-top: none;
}

.plain-hour .time-cell {
    border-bottom: none;
}

.plain-hour .day-cell {
    border-bottom: 1px dotted #efefef;
}

.day-cell:hover {
    background-color: rgba(13, 110, 253, 0.08);
}

.available {
    background-color: darkseagreen;
    /*cursor: no-drop;*/
}

.available:hover {
    background-color: darkseagreen !important;
}

/* Scrollable calendar grid */
.calendar-grid.flex-fill {
    overflow: auto;
    min-height: 0; /* crucial for correct flex scrolling */
    scrollbar-gutter: stable;
}

/* Prevent last column from double border 
.calendar-grid > div:nth-child(9n) {
    border-right: none;
}
*/

input[type="range"]::-webkit-slider-runnable-track {
  background-size: 10% 100%;
}


.match-user-name {
    font-weight: 600;
}

.match-user-name.bi::before {
    padding-right: 2pt;
}

.match-user-name.bi.level-1::before { color: rgb(110, 176, 174) }
.match-user-name.bi.level-2::before { color: rgb(67, 177, 67) }
.match-user-name.bi.level-3::before { color: rgb(57, 143, 43) }
.match-user-name.bi.level-4::before { color: rgb(187, 179, 34) }
.match-user-name.bi.level-5::before { color: rgb(208, 123, 19) }
.match-user-name.bi.level-6::before { color: rgb(193, 50, 50) }
.match-user-name.bi.level-7::before { color: rgb(125, 16, 38) }
.match-user-name.bi.level-8::before { color: rgb(121, 15, 135) }

.navbar {
    overflow-x: hidden;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.navbar-brand {
    text-overflow: ellipsis;
    font-size: 1.15rem;
    font-weight: 500;
}

.navbar .btn {
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-padding-y: 0.1rem;
}

/*.toast {
    max-width: 300px;
}*/

.comma-item:not(:last-child)::after {
    content: ", ";
}


div.screenshot {
    text-align: center;   
    width: 100%; 
    margin-top: 10pt;
    margin-bottom: 15pt;
    padding: 0;
}

div.screenshot img {
    display: inline-block;    
    max-width: 80%;
    height: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

@keyframes soft-glow {
    0% {
        box-shadow: 0 0 0 rgba(var(--bs-secondary-rgb), 0.1);
    }
    50% {
        box-shadow: 0 0 12px 4px rgba(var(--bs-secondary-rgb), 0.65);
    }
    100% {
        box-shadow: 0 0 0 rgba(var(--bs-secondary-rgb), 0.1);
    }
}

.btn-attention {
    animation: soft-glow 1.5s ease-in-out infinite;
}