:root {
    --bs-body-rgb: 236, 239, 241;
    --bs-primary-rgb: 0, 131, 143;
    --bs-secondary-rgb: 244, 232, 193;
    --bs-warning-rgb: 247, 108, 94;
    --bs-light-rgb: 236, 239, 241;
    --bs-dark-rgb: 52, 73, 94;
    --bs-primary: rgb(var(--bs-primary-rgb));
    --bs-secondary: rgb(var(--bs-secondary-rgb));
    --bs-warning: rgb(var(--bs-warning-rgb));
    --bs-light: rgb(var(--bs-light-rgb));
    --bs-dark: rgb(var(--bs-dark-rgb));
}

body {
    font-size: 14px;
    font-family: sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Tahoma", "San Francisco", sans-serif;
}

.title-font {
    font-family: "Tahoma", "San Francisco", sans-serif;
}

button:has(svg),
a:has(svg),
.dropdown-item:has(svg),
.nav-link:has(svg) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

[data-dep-inactive] {
    display: none;
}

.calendar {
    display: grid;
    grid-template-columns: 75px;
    grid-auto-columns: minmax(118px, 1fr);
    grid-template-rows: min-content max-content;
    position: relative;

    .time-marker {
        position: relative;
        top: calc(0.8em / 1.1 * -1);
        
        font-size: 0.8em;
        font-weight: lighter;
        text-align: right;
        width: 100%;
        padding-right: 4px;
    }

    .header {
        position: sticky;
        top: 0;
        grid-row-start: 1;
        grid-row-end: 1;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
        border-bottom: 2px solid var(--bs-border-color);
        background-color: var(--bs-card-cap-bg);
        z-index: 20;

        .dayOfWeek {
            font-size: 1em;
            font-weight: 500;
        }

        .dayOfMonth {
            font-size: 1.2em;
            font-weight: 600;
        }
    }

    .column-content {
        grid-row-start: 2;
        grid-row-end: 2;
        position: relative;
        width: 100%;
        border-left: 1px solid var(--bs-border-color);
        padding-right: 0;
        padding-left: 0;

        .time-slot {
            position: absolute;
            width: 100%;
            border-bottom: 1px solid var(--bs-border-color);
        }
        
        .time-slot:hover {
            background-color: rgba(var(--bs-body-rgb), 0.03);
        }
        
        .column-events-container {
            width: 90%;
            position: relative;
            height: 0;
        }

        weekly-calendar-event {
            position: absolute;
            box-sizing: border-box;
            background-color: #ffc06977;
            border-radius: var(--bs-border-radius);
            border-left: var(--bs-border-radius) solid #ffc069;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            z-index: 2;
            margin-left: 2px;
            
            transition: left 0.12s, width 0.12s;

            .title {
                position: sticky;
                top: 32px;
                bottom: 0;
                padding: 0.5rem;
                font-size: 0.9em;
                font-weight: 500;
            }

            [start-time-drag-handle],
            [end-time-drag-handle] {
                position: absolute;
                left: 0;
                right: 0;
                height: 4px;
                cursor: ns-resize;
                background-color: transparent;
                z-index: 100;
            }

            [start-time-drag-handle] {
                top: 0;
            }

            [end-time-drag-handle] {
                bottom: 0;
            }

            .starts-at,
            .ends-at {
                position: absolute;
                padding: 0 0.25rem;
                font-size: 0.8em;
                text-align: center;
                visibility: hidden;
                width: 100%;
            }

            .starts-at {
                top: 0;
            }

            .ends-at {
                bottom: 0;
            }
        }

        .event:hover {
            background-color: #ffc06999;
        }

        .event:hover .starts-at,
        .event:hover .ends-at,
        .event[data-dragging=true] .starts-at,
        .event[data-dragging=true] .ends-at {
            visibility: visible;
        }
    }
}