/* ================================================================
   PERSONAL ERP D4.4 — CALENDAR & WEEK
   Schedule road · compact mobile day · actionable week planner
   ================================================================ */

/* ----------------------------------------------------------------
   Shared schedule-road language
   ---------------------------------------------------------------- */

.d44-schedule-row,
.d44-planner-row {
    color: var(--ui-text);
    text-decoration: none;
}

.d44-schedule-time,
.d44-planner-time {
    display: grid;
    min-width: 0;
    align-content: center;
    text-align: right;
}

.d44-schedule-time strong,
.d44-schedule-time small,
.d44-planner-time strong,
.d44-planner-time small {
    display: block;
}

.d44-schedule-time strong,
.d44-planner-time strong {
    color: var(--ui-text);
    font-size: .8rem;
    line-height: 1.15;
}

.d44-schedule-time small,
.d44-planner-time small {
    margin-top: 2px;
    color: var(--ui-text-soft);
    font-size: .65rem !important;
}

.d44-schedule-rail,
.d44-planner-rail {
    position: relative;
    display: grid;
    min-height: 100%;
    place-items: center;
}

.d44-schedule-rail::before,
.d44-planner-rail::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: color-mix(
        in srgb,
        var(--ui-primary) 32%,
        var(--ui-border)
    );
    content: "";
    transform: translateX(-50%);
}

.d44-schedule-rail > i,
.d44-planner-rail > i {
    position: relative;
    z-index: 1;
    display: block;
    width: 9px;
    height: 9px;
    border: 2px solid var(--ui-surface);
    border-radius: 50%;
    background: var(--ui-primary);
    box-shadow:
        0 0 0 1px
        color-mix(
            in srgb,
            var(--ui-primary) 42%,
            transparent
        );
}

.d44-schedule-row.shared
.d44-schedule-rail > i,
.d44-planner-row.event
.d44-planner-rail > i {
    background: var(--ui-purple);
}

.d44-schedule-copy,
.d44-planner-copy {
    display: grid;
    min-width: 0;
    align-content: center;
}

.d44-schedule-copy strong,
.d44-schedule-copy small,
.d44-planner-copy strong,
.d44-planner-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d44-schedule-copy strong,
.d44-planner-copy strong {
    color: var(--ui-text);
    font-size: .84rem;
    line-height: 1.3;
}

.d44-schedule-copy small,
.d44-planner-copy small {
    margin-top: 2px;
    color: var(--ui-text-muted);
    font-size: .68rem !important;
    white-space: nowrap;
}

/* ----------------------------------------------------------------
   Calendar desktop
   ---------------------------------------------------------------- */

.d44-calendar-desktop {
    display: none;
}

.d44-calendar-mobile {
    display: block;
}

@media (min-width: 1040px) {
    .d44-calendar-mobile {
        display: none;
    }

    .d44-calendar-desktop {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        align-items: stretch;
        gap: 7px;
    }

    .d44-calendar-day {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--ui-border);
        border-radius: 14px;
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow-sm);
    }

    .d44-calendar-day.today,
    .d44-calendar-day.selected {
        border-color: color-mix(
            in srgb,
            var(--ui-primary) 38%,
            var(--ui-border)
        );
    }

    .d44-calendar-day.selected {
        box-shadow:
            0 0 0 1px
            var(--ui-primary-soft),
            var(--ui-shadow-sm);
    }

    .d44-calendar-day > header {
        display: flex;
        min-height: 62px;
        align-items: center;
        justify-content: space-between;
        gap: 7px;
        padding: 9px;
        border-bottom: 1px solid var(--ui-border);
        background: var(--ui-surface-soft);
    }

    .d44-calendar-day > header h2 {
        margin: 2px 0 0;
        color: var(--ui-text);
        font-size: .86rem;
    }

    .d44-calendar-day > header > span {
        display: grid;
        min-width: 27px;
        height: 27px;
        place-items: center;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--ui-bg-subtle);
        color: var(--ui-text-muted);
        font-size: .7rem;
        font-weight: 900;
    }

    .d44-day-timeline {
        display: grid;
        align-content: start;
        min-height: 330px;
        padding: 7px 5px;
    }

    .d44-schedule-row {
        display: grid;
        grid-template-columns: 42px 14px minmax(0, 1fr);
        gap: 5px;
        min-height: 56px;
        padding: 0 4px;
        border-radius: 8px;
    }

    .d44-schedule-row:hover {
        background: var(--ui-surface-soft);
    }

    .d44-schedule-row:first-child
    .d44-schedule-rail::before {
        top: 50%;
    }

    .d44-schedule-row:last-child
    .d44-schedule-rail::before {
        bottom: 50%;
    }

    .d44-schedule-time strong {
        font-size: .72rem;
    }

    .d44-schedule-time small {
        font-size: .58rem !important;
    }

    .d44-schedule-copy strong {
        white-space: normal;
        font-size: .75rem;
    }

    .d44-schedule-copy small {
        font-size: .6rem !important;
    }

    .d44-day-empty {
        display: grid;
        min-height: 82px;
        place-items: center;
        align-content: center;
        gap: 2px;
        color: var(--ui-text-soft);
    }

    .d44-day-empty > span {
        font-size: 1.2rem;
    }

    .d44-day-empty > small {
        font-size: .65rem !important;
    }
}

/* ----------------------------------------------------------------
   Calendar mobile — selected day as a real daily agenda
   ---------------------------------------------------------------- */

.d44-mobile-selected-day {
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.d44-mobile-selected-day.today {
    border-color: color-mix(
        in srgb,
        var(--ui-primary) 35%,
        var(--ui-border)
    );
}

.d44-mobile-selected-day > header {
    display: flex;
    min-height: 65px;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--ui-border);
    background:
        linear-gradient(
            120deg,
            var(--ui-primary-soft),
            var(--ui-surface) 54%
        );
}

.d44-mobile-selected-day > header h2 {
    margin: 2px 0 0;
    color: var(--ui-text);
    font-size: 1.02rem;
}

.d44-mobile-selected-day > header > span {
    display: grid;
    min-width: 32px;
    height: 32px;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-primary);
    font-size: .75rem;
    font-weight: 900;
}

.d44-mobile-day-road {
    display: grid;
    padding: 8px 9px;
}

.d44-mobile-day-road .d44-schedule-row,
.d44-road-empty {
    display: grid;
    grid-template-columns: 52px 18px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 63px;
    padding: 0 4px;
    border-radius: 10px;
}

.d44-mobile-day-road .d44-schedule-row:hover {
    background: var(--ui-surface-soft);
}

.d44-mobile-day-road
.d44-schedule-row:first-child
.d44-schedule-rail::before,
.d44-road-empty:first-child
.d44-schedule-rail::before {
    top: 50%;
}

.d44-mobile-day-road
.d44-schedule-row:last-child
.d44-schedule-rail::before,
.d44-road-empty:last-child
.d44-schedule-rail::before {
    bottom: 50%;
}

.d44-row-open {
    align-self: center;
    color: var(--ui-text-soft);
    font-size: 1.05rem;
    font-style: normal;
}

.d44-road-empty {
    align-items: center;
}

.d44-road-empty > span:nth-child(3) strong,
.d44-road-empty > span:nth-child(3) small {
    display: block;
}

.d44-road-empty > span:nth-child(3) strong {
    color: var(--ui-text);
    font-size: .84rem;
}

.d44-road-empty > span:nth-child(3) small {
    margin-top: 2px;
    color: var(--ui-text-muted);
    font-size: .68rem !important;
}

.d44-empty-time {
    color: var(--ui-text-soft);
    font-size: .8rem;
    text-align: right;
}

.d44-week-overview {
    margin-top: 10px;
}

.d44-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.d44-section-heading h2 {
    margin: 2px 0 0;
    color: var(--ui-text);
    font-size: 1rem;
}

.d44-week-overview-list {
    display: grid;
    gap: 4px;
}

.d44-week-overview-list > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 53px;
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text);
    text-decoration: none;
}

.d44-week-overview-list > a:hover,
.d44-week-overview-list > a.today {
    border-color: var(--ui-border);
    background: var(--ui-surface-soft);
}

.d44-week-overview-list > a > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    align-content: center;
    border-radius: 10px;
    background: var(--ui-bg-subtle);
}

.d44-week-overview-list > a.today > span {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}

.d44-week-overview-list > a > span small,
.d44-week-overview-list > a > span strong,
.d44-week-overview-list > a > div strong,
.d44-week-overview-list > a > div small {
    display: block;
}

.d44-week-overview-list > a > span small {
    font-size: .6rem !important;
    font-weight: 850;
    text-transform: uppercase;
}

.d44-week-overview-list > a > span strong {
    margin-top: -1px;
    font-size: .95rem;
}

.d44-week-overview-list > a > div {
    min-width: 0;
}

.d44-week-overview-list > a > div strong {
    color: var(--ui-text);
    font-size: .8rem;
}

.d44-week-overview-list > a > div small {
    margin-top: 2px;
    color: var(--ui-text-muted);
    font-size: .67rem !important;
}

.d44-week-overview-list > a > i {
    color: var(--ui-text-soft);
    font-size: 1rem;
    font-style: normal;
}

/* Calendar controls: use less vertical space on phone. */
@media (max-width: 649px) {
    .d31-calendar-toolbar {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        min-height: 52px;
        padding: 6px !important;
    }

    .d31-calendar-toolbar
    .d31-calendar-today {
        display: none;
    }

    .d31-calendar-nav {
        width: 38px !important;
        height: 38px !important;
    }

    .d31-calendar-toolbar > div strong {
        font-size: .85rem !important;
    }

    .d31-week-strip {
        gap: 3px !important;
        padding-bottom: 7px !important;
    }

    .d31-week-strip > a {
        min-height: 52px !important;
        border-radius: 10px !important;
    }

    .d31-week-strip > a small {
        font-size: .58rem !important;
    }

    .d31-week-strip > a strong {
        font-size: .9rem !important;
    }

    .d31-week-strip > a span {
        font-size: .58rem !important;
    }
}

/* ----------------------------------------------------------------
   Week planner
   ---------------------------------------------------------------- */

.d44-planner-board {
    display: grid;
    gap: 7px;
}

.d44-planner-day {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.d44-planner-day.today {
    border-color: color-mix(
        in srgb,
        var(--ui-primary) 38%,
        var(--ui-border)
    );
}

.d44-planner-day > header {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
}

.d44-planner-day > header small,
.d44-planner-day > header strong {
    display: block;
}

.d44-planner-day > header small {
    color: var(--ui-text-soft);
    font-size: .65rem !important;
    font-weight: 850;
    text-transform: uppercase;
}

.d44-planner-day.today > header small {
    color: var(--ui-primary);
}

.d44-planner-day > header strong {
    margin-top: 2px;
    color: var(--ui-text);
    font-size: .9rem;
}

.d44-planner-day > header > span {
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ui-bg-subtle);
    color: var(--ui-text-muted);
    font-size: .68rem;
    font-weight: 900;
}

.d44-planner-road {
    display: grid;
    padding: 7px 8px;
}

.d44-planner-row {
    display: grid;
    grid-template-columns: 50px 18px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 58px;
    padding: 0 3px;
    border-radius: 9px;
}

a.d44-planner-row:hover,
.d44-planner-row.task:hover {
    background: var(--ui-surface-soft);
}

.d44-planner-row:first-child
.d44-planner-rail::before {
    top: 50%;
}

.d44-planner-row:last-child
.d44-planner-rail::before {
    bottom: 50%;
}

.d44-planner-row.task
.d44-planner-rail > i {
    background: var(--ui-success);
}

.d44-planner-task-form {
    align-self: center;
    margin: 0;
}

.d44-planner-task-form button,
.d44-backlog-grid article > form button {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ui-border-strong);
    border-radius: 9px;
    background: var(--ui-surface);
    color: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 900;
    cursor: pointer;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        color 140ms ease;
}

.d44-planner-task-form button:hover,
.d44-planner-task-form button:focus-visible,
.d44-backlog-grid article > form button:hover,
.d44-backlog-grid article > form button:focus-visible {
    border-color: var(--ui-success);
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

.d44-planner-empty {
    display: grid;
    min-height: 48px;
    place-items: center;
    align-content: center;
    gap: 1px;
    color: var(--ui-text-soft);
}

.d44-planner-empty > span {
    font-size: 1rem;
}

.d44-planner-empty > small {
    font-size: .65rem !important;
}

/* Backlog becomes a compact actionable list. */
.d44-backlog-grid {
    display: grid;
    gap: 6px;
}

.d44-backlog-grid > article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface-soft);
}

.d44-backlog-grid > article > form {
    margin: 0;
}

.d44-backlog-grid > article > a {
    display: grid;
    min-width: 0;
    gap: 3px;
    color: var(--ui-text);
    text-decoration: none;
}

.d44-backlog-grid > article > a strong {
    overflow: hidden;
    color: var(--ui-text);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d44-backlog-grid > article > a small {
    color: var(--ui-text-muted);
    font-size: .67rem !important;
}

.d44-backlog-grid .d34-backlog-priority {
    justify-self: start;
}

/* Mobile week = vertical agenda, compact empty days. */
@media (max-width: 1039px) {
    .d44-week-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .d44-week-summary > article {
        min-height: 76px !important;
        padding: 8px !important;
    }

    .d44-week-summary > article small {
        font-size: .62rem !important;
    }

    .d44-week-summary > article strong {
        font-size: 1.42rem !important;
    }

    .d44-week-summary > article span {
        font-size: .6rem !important;
        line-height: 1.15;
    }

    .d44-week-toolbar {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        padding: 6px !important;
    }

    .d44-week-toolbar .d34-week-current {
        display: none;
    }

    .d44-week-toolbar strong {
        font-size: .82rem !important;
    }

    .d44-week-insight {
        min-height: 48px;
        padding: 7px !important;
    }

    .d44-week-insight > span {
        width: 31px !important;
        height: 31px !important;
        flex-basis: 31px !important;
    }

    .d44-week-insight small {
        font-size: .62rem !important;
    }

    .d44-week-insight strong {
        font-size: .73rem !important;
    }

    .d44-planner-board {
        gap: 7px;
    }

    .d44-planner-day > header {
        min-height: 53px;
    }

    .d44-planner-day:has(.d44-planner-empty) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    .d44-planner-day:has(.d44-planner-empty)
    > header {
        border-bottom: 0;
    }

    .d44-planner-day:has(.d44-planner-empty)
    .d44-planner-road {
        min-width: 90px;
        align-content: center;
        border-left: 1px solid var(--ui-border);
    }

    .d44-planner-day:has(.d44-planner-empty)
    .d44-planner-empty {
        min-height: 38px;
    }

    .d44-backlog-card {
        margin-top: 9px !important;
    }
}

/* Desktop week: 7 columns, with a real mini-road inside every day. */
@media (min-width: 1040px) {
    .d44-planner-board {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        align-items: stretch;
    }

    .d44-planner-day {
        min-width: 0;
    }

    .d44-planner-day > header {
        min-height: 61px;
        padding: 8px;
    }

    .d44-planner-day > header strong {
        font-size: .78rem;
    }

    .d44-planner-day > header small {
        font-size: .58rem !important;
    }

    .d44-planner-road {
        min-height: 330px;
        align-content: start;
        padding: 6px 4px;
    }

    .d44-planner-row {
        grid-template-columns: 36px 13px minmax(0, 1fr);
        gap: 4px;
        min-height: 58px;
        padding: 0 2px;
    }

    .d44-planner-row.task {
        grid-template-columns: 36px 13px minmax(0, 1fr);
    }

    .d44-planner-time strong {
        font-size: .66rem;
    }

    .d44-planner-time small {
        font-size: .54rem !important;
    }

    .d44-planner-copy strong {
        white-space: normal;
        font-size: .7rem;
    }

    .d44-planner-copy small {
        font-size: .56rem !important;
    }

    .d44-planner-task-form {
        grid-column: 3;
        justify-self: end;
        margin-top: -30px;
        margin-right: 1px;
    }

    .d44-planner-task-form button {
        width: 25px;
        height: 25px;
        border-radius: 7px;
        font-size: .68rem;
    }

    .d44-backlog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .d44-mobile-day-road .d44-schedule-row,
    .d44-road-empty,
    .d44-planner-row {
        grid-template-columns: 46px 16px minmax(0, 1fr) auto;
        gap: 5px;
    }

    .d44-week-summary > article {
        padding: 7px 5px !important;
    }

    .d44-week-summary > article small,
    .d44-week-summary > article span {
        font-size: .56rem !important;
    }
}