/* ══════════════════════════════════════════════════ */
/* ══  WEEK CALENDAR - Shared visual primitives    ══ */
/* ══  Delt grid-look på tværs af side- + dialog-  ══ */
/* ══  kalendere (week-* kanoniske klasser)        ══ */
/* ══════════════════════════════════════════════════ */

/* Flyttet fra Aktiviteter.razor.css (Niveau 2a) - rene visuelle primitiver,
   verbatim. Side-specifikt (panels-container, week-panel*, week-main,
   week-sidebar, højde-alignment, emp-*, cal-mini, week-nav*) bliver i
   Aktiviteter.razor.css; dialog-specifikt (ba-*) i hver dialog.
   Denne fil loades FØR den scoped bundle, så scoped overrides bevarer forrang. */

/* ── Grid card ── */
.week-grid-card {
    background: var(--color-bg-page);
    border: var(--card-border);
    border-radius: var(--cal-grid-radius);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Header row (day names) ── */
.week-header-row {
    display: flex;
    border-bottom: 1px solid var(--color-border-card);
    background: var(--color-bg-card);
}

.week-col-header {
    flex: 1;
    min-width: 0;
    container-type: inline-size;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-divider) 70%, var(--mud-palette-text-disabled));
    gap: 6px;
}

.week-col-header:last-child { border-right: none; }
.week-col-header--single { justify-content: flex-start; padding-left: 16px; }

.week-col-dayname {
    font-size: clamp(7px, 22cqi, var(--mud-typography-overline-size));
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.04em;
}

.week-col-daynum {
    font-size: clamp(9px, 30cqi, var(--mud-typography-caption-size));
    font-weight: 600;
    color: var(--color-text-heading);
    width: clamp(16px, 60cqi, var(--cal-daynum-circle));
    height: clamp(16px, 60cqi, var(--cal-daynum-circle));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.week-col-daynum--today { background: var(--color-brand); color: var(--color-bg-page); }

/* ── Time gutter ── */
.week-time-gutter {
    width: var(--cal-gutter-width);
    flex-shrink: 0;
    position: relative;
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-divider) 70%, var(--mud-palette-text-disabled));
}

.week-time-label {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: var(--mud-typography-overline-size);
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 60%, var(--mud-palette-text-disabled));
    line-height: 1;
}

/* ── Day columns ── */
.week-day-col {
    flex: 1;
    min-width: 0;
    position: relative;
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-divider) 70%, var(--mud-palette-text-disabled));
    cursor: default;
    overflow: hidden;
}

.week-day-col:last-child { border-right: none; }
.week-day-col--weekend { background: var(--color-event-weekend-bg); }
.week-day-col--today { background: var(--color-event-today-bg); }

/* ── Hour grid line ── */
.week-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: color-mix(in srgb, var(--mud-palette-divider) 70%, var(--mud-palette-text-disabled));
}

/* ── Event block (base chip) ── */
.week-event {
    position: absolute;
    left: 3px;
    right: 3px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
    overflow: hidden;
    z-index: 2;
    box-sizing: border-box;
}

.week-event:hover { box-shadow: var(--shadow-overlay); z-index: 10; }
.week-event:active { cursor: grabbing; }
.week-event:has(.week-event-badge) { display: flex; align-items: center; justify-content: center; }
.week-event--locked { cursor: default; opacity: 0.72; }
.week-event--locked:active { cursor: default; }

/* ── Event text ── */
.week-event-badge {
    font-size: var(--mud-typography-body2-size);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}

.week-event-title {
    display: block;
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--color-text-heading);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-event-time {
    display: block;
    font-size: var(--mud-typography-overline-size);
    color: var(--color-text-soft);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-event-agent {
    display: block;
    font-size: var(--mud-typography-overline-size);
    color: var(--color-text-muted);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Samme skriftstørrelse som klokkeslættet (.week-event-time), men sort/heading-farve
   i stedet for grå, så adressen ikke drukner - den var uden regler her og faldt derfor
   tilbage til browserens default (større end resten af kortet). */
.week-event-location {
    display: block;
    font-size: var(--mud-typography-overline-size);
    color: var(--color-text-heading);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The kunde on the bar, same weight as the mægler line: the address above it is the louder of
   the two, and the title still leads. Hidden by default: desktop has the hover tooltip and no room
   for a fourth line, so the phone block below is what turns it on. */
.week-event-person {
    display: none;
    font-size: var(--mud-typography-overline-size);
    color: var(--color-text-muted);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Half-hour grid line ── */
.week-half-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px dashed var(--mud-palette-divider);
}

/* ── Now indicator (continuous line + dot) ── */
.week-now-line {
    position: absolute;
    left: var(--cal-gutter-width);
    right: 0;
    height: 2px;
    background: var(--color-brand);
    z-index: 5;
}

.week-now-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand);
}

.week-now-line--no-gutter { left: 0; }
.week-now-line--no-gutter::before { display: none; }

/* Phone: a 45-minute aftale is a 54 px bar, and with the kunde line it carries four lines
   (titel, tid, adresse, kunde) that need 75 px at desktop leading. Tighter leading and padding
   buy those 21 px, so the kunde stays visible on the short aftaler a mægler drives between. */
@media (max-width: 599px) {
    .week-event {
        padding: 2px 6px;
    }

    .week-event-person {
        display: block;
    }

    .week-event-title,
    .week-event-time,
    .week-event-location,
    .week-event-person,
    .week-event-agent {
        line-height: 1.1;
    }

    .week-event-time,
    .week-event-location {
        margin-top: 0;
    }
}