/**
 * Areno Coach PWA status / update / connectivity UI
 */

body.offline::before {
    content: '⚠️ Offline - funcționalitate limitată';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    text-align: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.offline {
    padding-top: 40px !important;
}

body.offline form button[type="submit"],
body.offline form input[type="submit"] {
    opacity: 0.5;
    cursor: not-allowed;
}

body.form-dirty form {
    border-left: 3px solid #f59e0b;
}

@media (display-mode: standalone) {
    body {
        min-height: 100dvh;
        padding-top: env(safe-area-inset-top);
    }
    .mobile-bottom-nav {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

.ac-pwa-notice {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, calc(100% - 32px));
    background: var(--ac-white, #ffffff);
    color: var(--ac-ink, #101828);
    padding: 14px 16px;
    border: 1px solid var(--ac-line, #E6EAF0);
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.32);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 10020;
    font-size: 14px;
}

.ac-pwa-notice-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ac-pwa-notice-copy strong { font-size: 15px; }
.ac-pwa-notice-copy span { color: var(--ac-muted, #667085); line-height: 1.4; }
.ac-pwa-notice-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ac-pwa-notice button {
    border: 0;
    padding: 8px 13px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}
.ac-pwa-notice-primary {
    background: var(--ac-blue, #2357F3);
    color: #ffffff;
}
.ac-pwa-notice-primary:hover { background: #1747D1; }
.ac-pwa-notice-secondary {
    background: var(--ac-bg, #F5F7FB);
    color: var(--ac-ink, #101828);
}

[data-pwa-install-action][hidden],
html.ac-pwa-installed [data-pwa-install-action] {
    display: none !important;
}


#pwa-toast-container {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pwa-toast {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 320px;
}

.pwa-toast-success { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; }
.pwa-toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
.pwa-toast-error { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.pwa-toast-info { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; }

@media (max-width: 640px) {
    body.offline::before { font-size: 12px; padding: 6px 12px; }
    body.offline { padding-top: 32px !important; }
    .ac-pwa-notice { flex-direction: column; align-items: stretch; }
    .ac-pwa-notice-actions { width: 100%; }
    .ac-pwa-notice-actions button { flex: 1; }
}


.sidebar-pwa-install,
.drawer-pwa-install {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--ac-line, #E6EAF0);
    border-radius: 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.sidebar-pwa-install { margin: 0 0 12px; padding: 10px 12px; }
.drawer-pwa-install { margin: 0 0 12px; padding: 11px 13px; }
.sidebar-pwa-install svg,
.drawer-pwa-install svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sidebar-pwa-install:hover,
.drawer-pwa-install:hover { border-color: var(--ac-blue, #2357F3); color: var(--ac-blue, #2357F3); }

.ac-notification-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    border-left: 4px solid var(--ac-blue, #2357F3);
}
.ac-notification-card h3 { margin: 2px 0 4px; }
.ac-notification-card p { margin: 0; color: var(--ac-muted, #667085); }
@media (max-width: 640px) {
    .ac-notification-card { align-items: stretch; flex-direction: column; }
    .ac-notification-card .btn { width: 100%; }
}

/* 0.1.15.1 — keep today's session copy readable on narrow mobile screens. */
@media (max-width: 760px) {
    .today-session { flex-wrap: wrap; }
    .today-session-flags {
        flex-basis: 100%;
        padding-left: 54px;
    }
}

/* 0.1.15.3 — mobile list/card consistency and production polish. */
.player-card-grid { align-items: stretch; }
.player-card { min-height: 0; display: flex; flex-direction: column; }
.player-card h3 { margin-bottom: 12px; }
.player-card-birth { font-size: 11px; font-weight: 750; color: var(--ac-muted, #667085); white-space: nowrap; }
.player-card-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 16px; }
.player-card-details > div { min-width: 0; padding: 10px 11px; border: 1px solid var(--ac-line, #E6EAF0); border-radius: 11px; background: #FAFBFC; display: grid; gap: 4px; }
.player-card-details span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #98A2B3; }
.player-card-details strong { min-width: 0; font-size: 12px; color: #344054; overflow-wrap: anywhere; }
.player-card .package-actions { margin-top: auto; }
.cell-stack { display: inline-grid; gap: 3px; min-width: 0; }
.cell-stack > small { margin-top: 0; }
.nowrap-value { white-space: nowrap; }
.action-buttons { white-space: nowrap; text-align: right; }
.action-buttons .btn { vertical-align: middle; }

@media (max-width: 760px) {
    .session-row-responsive { flex-wrap: wrap; }
    .session-row-responsive .grow { flex: 1 1 calc(100% - 61px); }
    .session-row-responsive .session-meta { line-height: 1.45; }
    .session-row-responsive .session-side {
        width: 100%;
        padding-left: 61px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .session-row-responsive .session-side .pill,
    .session-row-responsive .session-side .status { white-space: nowrap; }

    .player-card-details { grid-template-columns: 1fr; }
    .player-card .package-actions { width: 100%; }

    table.responsive-card-table,
    table.responsive-card-table tbody { display: block; width: 100%; }
    table.responsive-card-table thead { display: none; }
    table.responsive-card-table tr {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding: 13px 14px;
        border: 1px solid var(--ac-line, #E6EAF0);
        border-radius: 14px;
        background: #fff;
    }
    table.responsive-card-table tr:last-child { margin-bottom: 0; }
    table.responsive-card-table td {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 7px 0;
        border-bottom: 0;
        text-align: right;
    }
    table.responsive-card-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #98A2B3;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .05em;
        text-align: left;
    }
    table.responsive-card-table td.primary-cell {
        display: block;
        padding: 0 0 11px;
        margin-bottom: 4px;
        border-bottom: 1px solid #F0F2F5;
        text-align: left;
    }
    table.responsive-card-table td.primary-cell::before,
    table.responsive-card-table td.action-buttons::before { display: none; }
    table.responsive-card-table td.primary-cell strong { font-size: 14px; }
    table.responsive-card-table td.primary-cell small { font-size: 10px; }
    table.responsive-card-table td > :last-child { min-width: 0; }
    table.responsive-card-table .cell-stack { justify-items: end; }
    table.responsive-card-table td.action-buttons {
        justify-content: flex-end;
        padding: 11px 0 0;
        margin-top: 4px;
        border-top: 1px solid #F0F2F5;
    }
    table.responsive-card-table td.action-buttons .btn { min-width: 92px; }
    table.responsive-card-table .status,
    table.responsive-card-table .nowrap-value { white-space: nowrap; }
    table.responsive-card-table tr.row-muted { opacity: .62; }

    .payments-table .primary-cell .payment-date { font-size: 12px; font-weight: 800; color: #344054; }
    .parents-table td[data-label="Contact"] .cell-stack { max-width: 70%; overflow-wrap: anywhere; }
}