/*
 * App-skallen - mobil først, samme opbygning som den nuværende MyTravel:
 * topbjælke med dato, en liste af kørsler, og en fast bundmenu.
 *
 * Det er kun designelementerne, der kommer fra BigSolverWEB: farverne, de runde kort
 * med blålig skygge, badge-stilen og typografien. Layoutet er MyTravels eget.
 */

.app {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--app-bg);
}

/* ---------- Topbjælke ---------- */

.appbar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    height: var(--header-h);
    padding: 0 var(--sp-sm);
    padding-top: env(safe-area-inset-top);
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
}

.appbar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -.2px;
    flex-shrink: 0;
}
.appbar__brand:hover { text-decoration: none; }

/* Datoen (eller sidens titel) står i midten og får den plads, der er tilovers. */
.appbar__title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 18px;
    font-weight: var(--fw-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appbar__sub {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    opacity: .75;
}

.appbar__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.appbar__action:hover { background: rgba(255, 255, 255, .26); text-decoration: none; }

/* Holder brand og handling lige brede, så titlen står præcis i midten. */
.appbar__slot {
    display: flex;
    justify-content: flex-end;
    min-width: 96px;
    flex-shrink: 0;
}
.appbar__slot--start { justify-content: flex-start; }

/* ---------- Indhold ---------- */

.appmain {
    flex: 1;
    padding: var(--sp-sm);
    /* Plads til bundmenuen, så sidste kort ikke gemmer sig bag den. */
    padding-bottom: calc(var(--nav-h) + var(--sp-md) + env(safe-area-inset-bottom));
}

.page {
    max-width: 720px;
    margin: 0 auto;
}

/* ---------- Bundmenu ---------- */

.appnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    align-items: stretch;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    box-shadow: 0 -2px 12px rgba(1, 22, 137, .18);
}

.appnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .82);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: color 120ms ease, opacity 120ms ease;
}
.appnav__item:hover:not(:disabled) { color: #fff; text-decoration: none; }
.appnav__item:disabled { opacity: .38; cursor: not-allowed; }
.appnav__item[aria-current="page"] { color: #fff; }

.appnav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Borgerens navn over dagens kørsler ---------- */

.client-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-xs);
    margin: var(--sp-md) 4px var(--sp-xs);
}
.client-heading:first-child { margin-top: 4px; }

.client-heading__name {
    font-size: var(--fs-lg);
    font-weight: 700;
    min-width: 0;
}

.client-heading__count {
    font-size: var(--fs-sm);
    color: var(--text-dimmed);
    white-space: nowrap;
}

/* ---------- Turkort ---------- */

/*
 * Samme opdeling som i dag: retning, type og status til venstre, stednavn og
 * adresser til højre. `.card.trip` frem for `.trip`, fordi to klasser skal slå
 * `button.card`, der ellers tvinger display:block.
 */
.card.trip {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: var(--sp-sm);
    align-items: start;
    width: 100%;
    padding: var(--sp-sm) var(--sp-md);
    border: 0;
    text-align: left;
}

.trip + .trip { margin-top: var(--sp-xs); }

.trip__lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.trip__direction { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
.trip__type { font-size: var(--fs-sm); color: var(--text-dimmed); font-style: italic; }

.trip__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.trip__site { font-weight: 700; }

.trip__leg {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: var(--fs-md);
    color: var(--text-dimmed);
}
.trip__leg-icon { color: var(--brand-5); margin-top: 2px; }
.trip__leg--drop .trip__leg-icon { color: var(--warm-6); }

.trip__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

/*
 * På telefon koster venstrekolonnen for meget bredde: adresserne knækkes så over to
 * linjer hver. Her lægges retning, type og status i stedet på én linje ovenover, så
 * adressen kan stå ud i ét. Fra tablet og op er der plads til de to kolonner.
 */
@media (max-width: 30em) {
    .card.trip {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: var(--sp-sm) var(--sp-sm);
    }
    .trip__lead {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--sp-xs);
    }
    .trip__direction { font-size: var(--fs-lg); }
}

/* ---------- Loginskærm ---------- */

.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-md);
    background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 62%, var(--brand-light) 100%);
}

.login__card {
    width: 100%;
    max-width: 392px;
    padding: var(--sp-xl) var(--sp-lg);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.login__mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.login__foot {
    font-size: var(--fs-xs);
    color: var(--text-dimmed);
    text-align: center;
}