/* ================================================================
   SLOTS.CSS - Reservation Slot Theme System
   ================================================================

/* ================================================================
   BASE SLOT STRUCTURE
   ================================================================ */

.day-slot {
    border: 1px solid var(--slot-border);
    background-color: var(--slot-bg);
}

.day-slot.corner-field {
    height: 2.3em;
    background-color: var(--slot-bg);
}

.slot-inner-frame {
    padding: 0px;
    border: 1px solid #fbfbfb;
    border-width: 1px 1px 4px 3px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.day-slot:hover .slot-inner-frame {
    overflow: unset;
}

.slot-content {
    border-width: 0px;
    position: absolute;
    left: 0px;
    width: 100%;
    word-break: break-word;
    top: 17px;
    z-index: 3;
    flex-grow: 1;
    text-align: var(--slot-text-align);
}

.slot-content p:first-child {
    font-weight: bold;
}

.slot-action-bar {
    height: 17px;
    font-family: monospace;
}

.slot-action-bar p {
    font-size: 0.75em !important;
    line-height: 15px;
}

/* ================================================================
   SLOT LEGEND
   ================================================================ */


.timeline-legend i {
    border-color: var(--slot-border);
    position: relative;
}

.reservation-legend-available i {
    background-color: var(--slot-bg);
}

.timeline-legend :not(.reservation-legend-available) i::after {
    content: '@';
    position: absolute;
    right: 2px;
    top: 0px;
    font-size: 9px;
}

/* ================================================================
   AVAILABLE / CLOSED / BLOCKED / PAST
   ================================================================ */

.slot-available .slot-inner-frame, .slot-blocked .slot-inner-frame {
    border-width: 0px;
}

.day-slot.slot-available {
    background-color: #FFF;
}

.day-slot.slot-available:hover {
    background-color: var(--slot-available-hover);
    cursor: pointer;
}

.day-slot.slot-closed {
    background-color: #AAAA;
    border-color: #AAA;
}

.day-slot.slot-blocked {
    background-image: linear-gradient(-45deg, #AAAa 21.43%, #AAAE 21.43%, #AAAE 50%, #AAAa 50%, #AAAa 71.43%, #AAAE 71.43%, #AAAE 100%);
    background-size: 9.90px 9.90px;
    border-color: #AAA;
}

.day-slot.slot-past {
    background-color: #E5E5E5;
    border-color: #D4D4D4;
}

.day-slot.slot-past .slot-inner-frame {
    background-color: #E5E5E5;
    border-width: 0px;
}


/* ================================================================
   SLOT-TAKEN BASE (shared structural properties)
   ================================================================ */

.day-slot.slot-taken {
    border-color: #e9e9e9;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

.day-slot.slot-taken:hover {
    overflow: initial;
    z-index: 3;
}

.day-slot.slot-taken p {
    padding: 0.1em 0.25em;
    margin: 0;
    font-size: 0.8em;
}


.day-slot.slot-taken:not(.slot-mine) .slot-content p {
    display: var(--show-non-mine-content);
}


/* ================================================================
   1. MY USER SLOT  -  .slot-mine.user-slot (no group, no club)
   ================================================================ */

.day-slot.slot-taken.slot-mine.user-slot:not(.group-slot):not(.club-slot) {
    text-transform: var(--slot-my-user-text-transform);
}

.day-slot.slot-taken.slot-mine.user-slot:not(.group-slot):not(.club-slot) .slot-action-bar {
    background: var(--slot-my-user-slot-action-bar-bg);
}

.day-slot.slot-taken.slot-mine.user-slot:not(.group-slot):not(.club-slot) .slot-inner-frame {
    background-color: var(--slot-my-user-bg);
    border-left-style: var(--slot-my-user-border-style);
    border-left-color:  var(--slot-my-user-border-color);
    border-width: var(--slot-my-user-border-width);
}

.day-slot.slot-taken.slot-mine.user-slot:not(.group-slot):not(.club-slot):hover .slot-inner-frame,
.day-slot.slot-taken.slot-mine.user-slot:not(.group-slot):not(.club-slot):hover .slot-content {
    background-color: var(--slot-my-user-bg-hover);
}

.day-slot.slot-taken.slot-mine.user-slot:not(.group-slot):not(.club-slot) p {
    color: var(--slot-my-user-text);
}

.day-slot.slot-taken.slot-mine.user-slot:not(.group-slot):not(.club-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-my-user-text);
}


/* ================================================================
   2. MY USER GROUP SLOT  -  .slot-mine.user-slot.group-slot (no club)
   ================================================================ */

.day-slot.slot-taken.slot-mine.user-slot.group-slot:not(.club-slot) {
    text-transform: var(--slot-my-user-group-text-transform);
}

.day-slot.slot-taken.slot-mine.user-slot.group-slot:not(.club-slot) .slot-action-bar {
    background: var(--slot-my-user-group-slot-action-bar-bg);
}

.day-slot.slot-taken.slot-mine.user-slot.group-slot:not(.club-slot) .slot-inner-frame {
    background-color: var(--slot-my-user-group-bg);
    border-left-style: var(--slot-my-user-group-border-style);
    border-left-color: var(--slot-my-user-group-border-color);
    border-width: var(--slot-my-user-group-border-width);
}

.day-slot.slot-taken.slot-mine.user-slot.group-slot:not(.club-slot):hover .slot-inner-frame,
.day-slot.slot-taken.slot-mine.user-slot.group-slot:not(.club-slot):hover .slot-content {
    background-color: var(--slot-my-user-group-bg-hover);
}

.day-slot.slot-taken.slot-mine.user-slot.group-slot:not(.club-slot) p {
    color: var(--slot-my-user-group-text);
}

.day-slot.slot-taken.slot-mine.user-slot.group-slot:not(.club-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-my-user-group-text);
}


/* ================================================================
   3. MY CLUB SLOT  -  .slot-mine.club-slot (no group, no user-slot)
   ================================================================ */

.day-slot.slot-taken.slot-mine.club-slot:not(.group-slot):not(.user-slot) {
    text-transform: var(--slot-my-club-text-transform);
}

.day-slot.slot-taken.slot-mine.club-slot:not(.group-slot):not(.user-slot) .slot-action-bar {
    background: var(--slot-my-club-slot-action-bar-bg);
}

.day-slot.slot-taken.slot-mine.club-slot:not(.group-slot):not(.user-slot) .slot-inner-frame {
    background-color: var(--slot-my-club-bg);
    border-left-style: var(--slot-my-club-border-style);
    border-left-color: var(--slot-my-club-border-color);
    border-width: var(--slot-my-club-border-width);
}

.day-slot.slot-taken.slot-mine.club-slot:not(.group-slot):not(.user-slot):hover .slot-inner-frame,
.day-slot.slot-taken.slot-mine.club-slot:not(.group-slot):not(.user-slot):hover .slot-content {
    background-color: var(--slot-my-club-bg-hover);
}

.day-slot.slot-taken.slot-mine.club-slot:not(.group-slot):not(.user-slot) p {
    color: var(--slot-my-club-text);
}

.day-slot.slot-taken.slot-mine.club-slot:not(.group-slot):not(.user-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-my-club-text);
}


/* ================================================================
   4. MY CLUB GROUP SLOT  -  .slot-mine.club-slot.group-slot
   ================================================================ */

.day-slot.slot-taken.slot-mine.club-slot.group-slot {
    text-transform: var(--slot-my-club-group-text-transform);
}

.day-slot.slot-taken.slot-mine.club-slot.group-slot .slot-action-bar {
    background: var(--slot-my-club-group-slot-action-bar-bg);
}

.day-slot.slot-taken.slot-mine.club-slot.group-slot .slot-inner-frame {
    background-color: var(--slot-my-club-group-bg);
    border-left-style: var(--slot-my-club-group-border-style);
    border-left-color: var(--slot-my-club-group-border-color);
    border-width: var(--slot-my-club-group-border-width);
}

.day-slot.slot-taken.slot-mine.club-slot.group-slot:hover .slot-inner-frame,
.day-slot.slot-taken.slot-mine.club-slot.group-slot:hover .slot-content {
    background-color: var(--slot-my-club-group-bg-hover);
}

.day-slot.slot-taken.slot-mine.club-slot.group-slot p {
    color: var(--slot-my-club-group-text);
}

.day-slot.slot-taken.slot-mine.club-slot.group-slot .hot-buttons .btn-cancel-reservation {
    color: var(--slot-my-club-group-text);
}


/* ================================================================
   5. ADMIN USER SLOT  -  .admin-slot.user-slot (no mine, no group, no club)
   ================================================================ */

.day-slot.slot-taken.admin-slot.user-slot:not(.slot-mine):not(.group-slot):not(.club-slot) {
    text-transform: var(--slot-admin-user-text-transform);
}

.day-slot.slot-taken.admin-slot.user-slot:not(.slot-mine):not(.group-slot):not(.club-slot) .slot-action-bar {
    background: var(--slot-admin-user-slot-action-bar-bg);
}

.day-slot.slot-taken.admin-slot.user-slot:not(.slot-mine):not(.group-slot):not(.club-slot) .slot-inner-frame {
    background-color: var(--slot-admin-user-bg);
    border-left-style: var(--slot-admin-user-border-style);
    border-left-color: var(--slot-admin-user-border-color);
    border-width: var(--slot-admin-user-border-width);
}

.day-slot.slot-taken.admin-slot.user-slot:not(.slot-mine):not(.group-slot):not(.club-slot):hover .slot-inner-frame,
.day-slot.slot-taken.admin-slot.user-slot:not(.slot-mine):not(.group-slot):not(.club-slot):hover .slot-content {
    background-color: var(--slot-admin-user-bg-hover);
}

.day-slot.slot-taken.admin-slot.user-slot:not(.slot-mine):not(.group-slot):not(.club-slot) p {
    color: var(--slot-admin-user-text);
}

.day-slot.slot-taken.admin-slot.user-slot:not(.slot-mine):not(.group-slot):not(.club-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-admin-user-text);
}


/* ================================================================
   6. ADMIN USER GROUP SLOT  -  .admin-slot.user-slot.group-slot (no mine, no club)
   ================================================================ */

.day-slot.slot-taken.admin-slot.user-slot.group-slot:not(.slot-mine):not(.club-slot) {
    text-transform: var(--slot-admin-user-group-text-transform);
}

.day-slot.slot-taken.admin-slot.user-slot.group-slot:not(.slot-mine):not(.club-slot) .slot-action-bar {
    background: var(--slot-admin-user-group-slot-action-bar-bg);
}

.day-slot.slot-taken.admin-slot.user-slot.group-slot:not(.slot-mine):not(.club-slot) .slot-inner-frame {
    background-color: var(--slot-admin-user-group-bg);
    border-left-style: var(--slot-admin-user-group-border-style);
    border-left-color: var(--slot-admin-user-group-border-color);
    border-width: var(--slot-admin-user-group-border-width);
}

.day-slot.slot-taken.admin-slot.user-slot.group-slot:not(.slot-mine):not(.club-slot):hover .slot-inner-frame,
.day-slot.slot-taken.admin-slot.user-slot.group-slot:not(.slot-mine):not(.club-slot):hover .slot-content {
    background-color: var(--slot-admin-user-group-bg-hover);
}

.day-slot.slot-taken.admin-slot.user-slot.group-slot:not(.slot-mine):not(.club-slot) p {
    color: var(--slot-admin-user-group-text);
}

.day-slot.slot-taken.admin-slot.user-slot.group-slot:not(.slot-mine):not(.club-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-admin-user-group-text);
}


/* ================================================================
   7. ADMIN CLUB SLOT  -  .admin-slot.club-slot (no mine, no group, no user-slot)
   ================================================================ */

.day-slot.slot-taken.admin-slot.club-slot:not(.slot-mine):not(.group-slot):not(.user-slot) {
    text-transform: var(--slot-admin-club-text-transform);
}

.day-slot.slot-taken.admin-slot.club-slot:not(.slot-mine):not(.group-slot):not(.user-slot) .slot-action-bar {
    background: var(--slot-admin-club-slot-action-bar-bg);
}

.day-slot.slot-taken.admin-slot.club-slot:not(.slot-mine):not(.group-slot):not(.user-slot) .slot-inner-frame {
    background-color: var(--slot-admin-club-bg);
    border-left-style: var(--slot-admin-club-border-style);
    border-left-color: var(--slot-admin-club-border-color);
    border-width: var(--slot-admin-club-border-width);
}

.day-slot.slot-taken.admin-slot.club-slot:not(.slot-mine):not(.group-slot):not(.user-slot):hover .slot-inner-frame,
.day-slot.slot-taken.admin-slot.club-slot:not(.slot-mine):not(.group-slot):not(.user-slot):hover .slot-content {
    background-color: var(--slot-admin-club-bg-hover);
}

.day-slot.slot-taken.admin-slot.club-slot:not(.slot-mine):not(.group-slot):not(.user-slot) p {
    color: var(--slot-admin-club-text);
}

.day-slot.slot-taken.admin-slot.club-slot:not(.slot-mine):not(.group-slot):not(.user-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-admin-club-text);
}


/* ================================================================
   8. ADMIN CLUB GROUP SLOT  -  .admin-slot.club-slot.group-slot (no mine)
   ================================================================ */

.day-slot.slot-taken.admin-slot.club-slot.group-slot:not(.slot-mine) {
    text-transform: var(--slot-admin-club-group-text-transform);
}

.day-slot.slot-taken.admin-slot.club-slot.group-slot:not(.slot-mine) .slot-action-bar {
    background: var(--slot-admin-club-group-slot-action-bar-bg);
}

.day-slot.slot-taken.admin-slot.club-slot.group-slot:not(.slot-mine) .slot-inner-frame {
    background-color: var(--slot-admin-club-group-bg);
    border-left-style: var(--slot-admin-club-group-border-style);
    border-left-color: var(--slot-admin-club-group-border-color);
    border-width: var(--slot-admin-club-group-border-width);
}

.day-slot.slot-taken.admin-slot.club-slot.group-slot:not(.slot-mine):hover .slot-inner-frame,
.day-slot.slot-taken.admin-slot.club-slot.group-slot:not(.slot-mine):hover .slot-content {
    background-color: var(--slot-admin-club-group-bg-hover);
}

.day-slot.slot-taken.admin-slot.club-slot.group-slot:not(.slot-mine) p {
    color: var(--slot-admin-club-group-text);
}

.day-slot.slot-taken.admin-slot.club-slot.group-slot:not(.slot-mine) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-admin-club-group-text);
}


/* ================================================================
   9. USER SLOT (other's)  -  .user-slot (no mine, no admin, no group, no club)
   ================================================================ */

.day-slot.slot-taken:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.club-slot) {
    text-transform: var(--slot-user-text-transform);
}

.day-slot.slot-taken:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.club-slot) .slot-action-bar {
    background: var(--slot-user-slot-action-bar-bg);
}

.day-slot.slot-taken:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.club-slot) .slot-inner-frame {
    background-color: var(--slot-user-bg);
    border-left-style: var(--slot-user-border-style);
    border-left-color: var(--slot-user-border-color);
    border-width: var(--slot-user-border-width);
}

.day-slot.slot-taken:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.club-slot):hover .slot-inner-frame,
.day-slot.slot-taken:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.club-slot):hover .slot-content {
    background-color: var(--slot-user-bg-hover);
}

.day-slot.slot-taken:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.club-slot) p {
    color: var(--slot-user-text);
}

.day-slot.slot-taken:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.club-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-user-text);
}


/* ================================================================
   10. USER GROUP SLOT  -  .user-slot.group-slot (no mine, no admin, no club)
   ================================================================ */

.day-slot.slot-taken.user-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.club-slot) {
    text-transform: var(--slot-user-group-text-transform);
}

.day-slot.slot-taken.user-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.club-slot) .slot-action-bar {
    background: var(--slot-user-group-slot-action-bar-bg);
}

.day-slot.slot-taken.user-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.club-slot) .slot-inner-frame {
    background-color: var(--slot-user-group-bg);
    border-left-style: var(--slot-user-group-border-style);
    border-left-color: var(--slot-user-group-border-color);
    border-width: var(--slot-user-group-border-width);
}

.day-slot.slot-taken.user-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.club-slot):hover .slot-inner-frame,
.day-slot.slot-taken.user-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.club-slot):hover .slot-content {
    background-color: var(--slot-user-group-bg-hover);
}

.day-slot.slot-taken.user-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.club-slot) p {
    color: var(--slot-user-group-text);
}

.day-slot.slot-taken.user-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.club-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-user-group-text);
}


/* ================================================================
   11. CLUB SLOT (other's)  -  .club-slot (no mine, no admin, no group, no user-slot)
   ================================================================ */

.day-slot.slot-taken.club-slot:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.user-slot) {
    text-transform: var(--slot-club-text-transform);
}

.day-slot.slot-taken.club-slot:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.user-slot) .slot-action-bar {
    background: var(--slot-club-slot-action-bar-bg);
}

.day-slot.slot-taken.club-slot:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.user-slot) .slot-inner-frame {
    background-color: var(--slot-club-bg);
    border-left-style: var(--slot-club-border-style);
    border-left-color: var(--slot-club-border-color);
    border-width: var(--slot-club-border-width);
}

.day-slot.slot-taken.club-slot:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.user-slot):hover .slot-inner-frame,
.day-slot.slot-taken.club-slot:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.user-slot):hover .slot-content {
    background-color: var(--slot-club-bg-hover);
}

.day-slot.slot-taken.club-slot:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.user-slot) p {
    color: var(--slot-club-text);
}

.day-slot.slot-taken.club-slot:not(.slot-mine):not(.admin-slot):not(.group-slot):not(.user-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-club-text);
}


/* ================================================================
   12. CLUB GROUP SLOT  -  .club-slot.group-slot (no mine, no admin, no user-slot)
   ================================================================ */

.day-slot.slot-taken.club-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.user-slot) {
    text-transform: var(--slot-club-group-text-transform);
}

.day-slot.slot-taken.club-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.user-slot) .slot-action-bar {
    background: var(--slot-club-group-slot-action-bar-bg);
}

.day-slot.slot-taken.club-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.user-slot) .slot-inner-frame {
    background-color: var(--slot-club-group-bg);
    border-left-style: var(--slot-club-group-border-style);
    border-left-color: var(--slot-club-group-border-color);
    border-width: var(--slot-club-group-border-width);
}

.day-slot.slot-taken.club-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.user-slot):hover .slot-inner-frame,
.day-slot.slot-taken.club-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.user-slot):hover .slot-content {
    background-color: var(--slot-club-group-bg-hover);
}

.day-slot.slot-taken.club-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.user-slot) p {
    color: var(--slot-club-group-text);
}

.day-slot.slot-taken.club-slot.group-slot:not(.slot-mine):not(.admin-slot):not(.user-slot) .hot-buttons .btn-cancel-reservation {
    color: var(--slot-club-group-text);
}