/* PAXTeller public dashboard - mobile first */

/* The hidden attribute must beat class display rules (e.g. .pt-loader's flex),
   otherwise the fullscreen loader overlay never disappears. */
[hidden] {
    display: none !important;
}

.pt-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */

.pt-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 16px;
    background-color: #ffffff;
    border-bottom: 1px solid #eaedf3;
}

.pt-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pt-header__tebe {
    font-weight: 700;
    text-decoration: none;
    color: #1c1c28;
    white-space: nowrap;
}

.pt-header__logo {
    max-height: 40px;
    width: auto;
}

.pt-header__title {
    flex: 1 1 auto;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    min-width: 120px;
}

.pt-header__share {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.pt-header__share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #6b7280;
}

.pt-header__share a:hover,
.pt-header__share a:focus {
    background-color: #f0f1fe;
    color: #403afc;
}

/* Layout: details + map */

.pt-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.pt-details {
    padding: 16px;
}

.pt-map {
    order: 2;
}

#ptMap {
    width: 100%;
    height: 320px;
}

@media (min-width: 1024px) {
    .pt-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 42%);
        align-items: start;
    }

    .pt-details {
        padding: 24px;
    }

    .pt-map {
        position: sticky;
        top: 0;
        height: 100vh;
    }

    #ptMap {
        height: 100%;
    }
}

/* Title bar */

.pt-titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pt-titlebar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.pt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid #d9dce3;
    border-radius: 8px;
    background-color: #ffffff;
    color: #1c1c28;
    cursor: pointer;
}

.pt-btn:hover {
    border-color: #403afc;
    color: #403afc;
}

/* Date controls */

.pt-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.pt-dates__item {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pt-label {
    font-size: 13px;
    color: #6b7280;
}

.pt-input {
    padding: 10px 12px;
    border: 1px solid #d9dce3;
    border-radius: 8px;
    background-color: #ffffff;
    min-height: 44px;
    width: 100%;
}

/* Native date inputs render and edit their value in the browser locale, which
   cannot be overridden. The input stays functional but invisible on top of a
   dd-mm-yyyy rendering; interacting with it opens the native date picker. */
.pt-datewrap {
    position: relative;
    display: block;
}

.pt-datewrap input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.pt-datewrap__display {
    display: flex;
    align-items: center;
    pointer-events: none;
}

.pt-datewrap:focus-within .pt-datewrap__display {
    border-color: #403afc;
    box-shadow: 0 0 0 1px #403afc;
}

/* Totals */

.pt-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.pt-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    background-color: #ffffff;
    border: 1px solid #eaedf3;
    border-radius: 12px;
}

.pt-totals__info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pt-totals__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: #f0f1fe;
    color: #403afc;
    flex: 0 0 auto;
}

.pt-totals__title {
    font-size: 14px;
    color: #6b7280;
}

.pt-totals__count {
    font-size: 24px;
    font-weight: 700;
}

/* Counting point cards */

.pt-overall {
    margin-top: 24px;
}

.pt-overall__head {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 12px;
}

.pt-overall__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pt-card {
    background-color: #ffffff;
    border: 1px solid #eaedf3;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
}

.pt-card.active {
    border-color: #403afc;
    box-shadow: 0 0 0 1px #403afc;
}

.pt-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pt-card__photo {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
    background-color: #f4f6fa;
}

.pt-card__info {
    flex: 1 1 auto;
    min-width: 0;
}

.pt-card__name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-card__progress {
    position: relative;
    height: 8px;
    margin-top: 8px;
    border-radius: 4px;
    background-color: #eaedf3;
    overflow: hidden;
}

.pt-card__progress i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    background-color: #403afc;
}

.pt-card__value {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.pt-card__chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.pt-card.expanded .pt-card__chevron {
    transform: rotate(225deg);
}

.pt-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.pt-card__stat span {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

.pt-card__stat i {
    font-style: normal;
    font-weight: 700;
}

.pt-card__graph {
    position: relative;
    margin-top: 12px;
    height: 135px;
}

@media (max-width: 420px) {
    .pt-card__stats {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .pt-card__stat {
        display: flex;
        justify-content: space-between;
    }
}

/* Map info window */

.pt-iw {
    max-width: 240px;
    font-family: 'Roboto', Arial, sans-serif;
}

.pt-iw__photo {
    width: 100%;
    max-height: 110px;
    object-fit: cover;
    border-radius: 8px;
}

.pt-iw__name {
    font-weight: 700;
    margin: 8px 0 4px;
}

.pt-iw__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 2px 0;
}

.pt-iw__row span:last-child {
    font-weight: 700;
}

/* States */

.pt-empty,
.pt-error {
    padding: 24px 0;
    color: #6b7280;
}

.pt-error {
    color: #b3261e;
}

.pt-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1000;
}

.pt-loader__box {
    width: 48px;
    height: 48px;
    border: 4px solid #eaedf3;
    border-top-color: #403afc;
    border-radius: 50%;
    animation: pt-spin 0.8s linear infinite;
}

@keyframes pt-spin {
    to {
        transform: rotate(360deg);
    }
}