/* SHIFT CARD STYLING
 * Scoped to .shift-card to avoid conflicting with Bootstrap's .card class
 * used in layout contexts (sevendocs pages, customer_dashboard, etc.).
 */

.shift-card {
    position: relative;
    max-width: 350px;
    font-size: 11px;
    line-height: 13px;
    color: #fff;
    padding: 8px;
    border: none;
    border-radius: 12px;
    margin-bottom: 7px;
}

/* Special card variant: "evaluate shift" */
.card--evaluate-user {
    background: linear-gradient(135deg, var(--color-green) 0%, #00B89F 100%);
    color: white;
}

.card-link {
    text-decoration: none;
    color: inherit;
}

.card-hover {
    cursor: pointer;
}

/* Card content layout */
.container-card {
    display: flex;
    align-items: center;
}

.date-card {
    flex: 1 0 auto;
    text-align: left;
    font-size: 11px;
}

.time-card {
    flex: 0 0 auto;
    text-align: right;
    font-size: 11px;
}

.shiftgroup-badge {
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.6);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.shiftgroup-badge:hover,
.shiftgroup-badge:focus {
    background: rgba(0, 0, 0, 0.04);
}

/* ShiftGroup: two separate pills next to each other */
.timebar-sg {
    display: flex;
    gap: 2px;
    align-items: stretch;
}

.timebar-sg__left {
    flex: 1 1 auto;
    min-width: 0;
}

.timebar-sg__right {
    background-color: rgba(255, 255, 255, 0.8) !important;
    width: fit-content;
    flex: 0 0 auto;
}

.shiftgroup-badge--right {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    font: inherit;
    height: auto;
    line-height: inherit;
    font-weight: inherit;
    color: rgba(0, 0, 0, 0.6);
}

/* Inverse styling for date/time container */
.inverse {
    background-color: rgba(255,255,255, 0.25);
    padding: 5px 10px;
    border-radius: 10px;
}

/* Flex utilities for cards */
.flex-container {
    display: flex;
}

.flex-container.sb {
    justify-content: space-between;
    align-items: center;
}

/* Icon container (positioned absolutely in bottom-right) */
.icon-container {
    position: absolute;
    bottom: 7px;
    right: 7px;
    display: flex;
    gap: 3px;
    align-items: center;
}

.notes-icon {
    color: rgba(255, 255, 255, 0.5);
    font-size: 17px;
}

.star-icon-card {
    color: rgba(255, 255, 255, 0.5);
    font-size: 17px;
    position: relative;
    display: inline-block;
    margin-bottom: 2px;
}

.rating-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
}

.other-font {
    font-family: Serif;
    font-size: 14px;
}

/* Media queries for responsive card sizing */
@media only screen and (max-width: 1400px) {
    .shift-card {
        max-width: 400px;
        font-size: 14px;
        line-height: 17px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .date-card,
    .time-card {
        font-size: 14px;
    }
}

@media screen and (min-width: 1600px) {
    .shift-card {
        font-size: 12px;
        line-height: 14px;
        max-width: 400px;
    }
}

@media screen and (max-width: 1200px) {
    .shift-card {
        max-width: 400px;
    }
}

@media screen and (max-width: 768px) {
    .shift-card {
        font-size: 15px;
        line-height: 18px;
        padding: 11px;
    }

    .date-card,
    .time-card {
        font-size: 15px;
    }
}