/* The app's loading animation ("Loading data..." card). Its own small file so a
   page can show it before app.css has arrived - the Driver App's first screen
   and the app login page. app.css imports it, so every other page has it too. */
.tm-calendar-loading-visual {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(130px, auto);
    align-items: center;
    justify-content: center;
    column-gap: 14px;
    row-gap: 6px;
    min-width: 238px;
    padding: 15px 18px 16px 18px;
    border: 1px solid rgba(70, 130, 180, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,254,0.94));
    box-shadow:
        0 18px 42px rgba(31, 78, 121, 0.11),
        0 2px 7px rgba(31, 78, 121, 0.06);
    overflow: hidden;
    backdrop-filter: blur(8px);
}

/* Loading card in a table row (Drivers, Invoices, Defects, VOR): the page script
   wraps it in .tm-loading-visible, sized to the visible width of the table's
   frame, so the card sits in the middle of what you can see even when the table
   is wider. Same as the Vehicles table (clients.js / clients.html). */
tr.tm-loading-row > td.tm-loading-cell {
    overflow: visible !important;
}

.tm-loading-visible {
    position: sticky;
    left: 12px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

    .tm-loading-visible .tm-calendar-loading-visual {
        display: inline-grid;
    }

.tm-calendar-loading-visual::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(70, 130, 180, 0.10);
}

.tm-calendar-loading-visual::after {
    content: "";
    position: absolute;
    left: -42%;
    bottom: 0;
    width: 42%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(70, 130, 180, 0),
        var(--tm-primary, #4682B4),
        rgba(244, 182, 63, 0.92)
    );
    animation: tm-planner-loader-progress 1.45s ease-in-out infinite;
}

.tm-calendar-loading-spinner {
    position: relative;
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(70, 130, 180, 0.24);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(232,241,250,0.95));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 8px 18px rgba(70, 130, 180, 0.13);
}

.tm-calendar-loading-spinner::before {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    top: 10px;
    height: 3px;
    border-radius: 999px;
    background: var(--tm-primary, #4682B4);
    box-shadow:
        0 8px 0 rgba(70, 130, 180, 0.32),
        0 16px 0 rgba(70, 130, 180, 0.18);
}

.tm-calendar-loading-spinner::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    left: 5px;
    top: 5px;
    border-radius: 50%;
    background: #f4b63f;
    box-shadow: 0 0 0 4px rgba(244, 182, 63, 0.16);
    transform-origin: 14px 14px;
    animation: tm-planner-loader-orbit 1.25s linear infinite;
}

.tm-calendar-loading-label {
    align-self: end;
    color: var(--tm-primary-dark, #225ca2);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.tm-calendar-loading-dots {
    align-self: start;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 8px;
}

    .tm-calendar-loading-dots i,
    .tm-calendar-loading-dots::before,
    .tm-calendar-loading-dots::after {
        display: block;
        width: 22px;
        height: 4px;
        border-radius: 999px;
        background: rgba(70, 130, 180, 0.22);
        animation: tm-planner-loader-segment 1.15s ease-in-out infinite;
    }

    .tm-calendar-loading-dots::before,
    .tm-calendar-loading-dots::after {
        content: "";
    }

    .tm-calendar-loading-dots::before {
        order: 4;
        animation-delay: 0.42s;
    }

    .tm-calendar-loading-dots::after {
        order: 5;
        animation-delay: 0.56s;
    }

    .tm-calendar-loading-dots i:nth-child(1) {
        order: 1;
        animation-delay: 0s;
    }

    .tm-calendar-loading-dots i:nth-child(2) {
        order: 2;
        animation-delay: 0.14s;
    }

    .tm-calendar-loading-dots i:nth-child(3) {
        order: 3;
        animation-delay: 0.28s;
    }

@keyframes tm-planner-loader-progress {
    0% {
        left: -42%;
        opacity: 0.4;
    }

    18% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0.55;
    }
}

@keyframes tm-planner-loader-orbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tm-planner-loader-segment {
    0%, 100% {
        transform: scaleX(0.72);
        opacity: 0.34;
    }

    45% {
        transform: scaleX(1);
        opacity: 1;
    }
}

html.tm-dark .tm-calendar-loading-visual {
    border-color: rgba(107, 166, 214, 0.24);
    background:
        linear-gradient(180deg, rgba(18, 28, 49, 0.96), rgba(13, 22, 39, 0.94));
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.32),
        0 2px 8px rgba(0, 0, 0, 0.18);
}

html.tm-dark .tm-calendar-loading-spinner {
    border-color: rgba(107, 166, 214, 0.28);
    background:
        linear-gradient(180deg, rgba(28, 44, 72, 0.98), rgba(17, 29, 51, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 8px 18px rgba(0, 0, 0, 0.22);
}

html.tm-dark .tm-calendar-loading-label {
    color: #d7e8f7;
}

html.tm-dark .tm-calendar-loading-dots i {
    background: rgba(107, 166, 214, 0.30);
}

@media (prefers-reduced-motion: reduce) {
    .tm-calendar-loading-visual::after,
    .tm-calendar-loading-spinner::after,
    .tm-calendar-loading-dots i {
        animation-duration: 2.8s;
    }
}