/*
 * NoviDesk Mobile UX V1
 * - publiczny nagłówek: Zaloguj + Menu
 * - mobilna karta klienta: kompaktowy układ bez poziomego przewijania
 */

:root {
    --nd-mobile-safe-bottom: max(92px, calc(78px + env(safe-area-inset-bottom)));
}

/* =========================================================
   PUBLICZNY NAGŁÓWEK — tylko gdy JS oznaczy stronę publiczną
   ========================================================= */
.nd-public-mobile-actions,
.nd-public-mobile-drawer,
.nd-public-mobile-backdrop {
    display: none;
}

@media (max-width: 850px) {
    body.nd-public-mobile-ready {
        overflow-x: hidden;
    }

    body.nd-public-mobile-ready header,
    body.nd-public-mobile-ready nav {
        max-width: 100%;
    }

    body.nd-public-mobile-ready .nd-original-register-link {
        display: none !important;
    }

    .nd-public-mobile-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
        flex: 0 0 auto;
        position: relative;
        z-index: 1002;
    }

    .nd-public-mobile-login,
    .nd-public-mobile-menu {
        min-height: 44px;
        border-radius: 15px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font: inherit;
        font-size: 13px;
        line-height: 1;
        font-weight: 900;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .nd-public-mobile-login {
        border: 1px solid rgba(113, 46, 127, .24);
        background: rgba(255, 255, 255, .96);
        color: #55205f !important;
        box-shadow: 0 8px 20px rgba(75, 27, 83, .08);
    }

    .nd-public-mobile-menu {
        width: 44px;
        padding: 0;
        border: 0;
        background: linear-gradient(135deg, #74237f 0%, #9d35ad 100%);
        color: #fff;
        box-shadow: 0 10px 24px rgba(116, 35, 127, .24);
    }

    .nd-public-mobile-menu svg {
        width: 21px;
        height: 21px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
    }

    .nd-public-mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1098;
        background: rgba(28, 13, 31, .42);
        backdrop-filter: blur(3px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .nd-public-mobile-drawer {
        display: grid;
        gap: 10px;
        position: fixed;
        left: 12px;
        right: 12px;
        top: calc(12px + env(safe-area-inset-top));
        z-index: 1099;
        padding: 14px;
        border: 1px solid rgba(119, 50, 132, .18);
        border-radius: 24px;
        background: rgba(255, 252, 255, .98);
        box-shadow: 0 26px 70px rgba(55, 19, 61, .25);
        transform: translateY(-18px);
        opacity: 0;
        pointer-events: none;
        transition: transform .22s ease, opacity .22s ease;
    }

    body.nd-public-menu-open .nd-public-mobile-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    body.nd-public-menu-open .nd-public-mobile-drawer {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nd-public-mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 2px 8px;
    }

    .nd-public-mobile-drawer-head strong {
        color: #35143b;
        font-size: 18px;
        line-height: 1.1;
        font-weight: 950;
    }

    .nd-public-mobile-close {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        border: 1px solid rgba(119, 50, 132, .16);
        background: #fff;
        color: #5d2468;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .nd-public-mobile-drawer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .nd-public-mobile-drawer-links a {
        min-width: 0;
        min-height: 52px;
        padding: 0 12px;
        border-radius: 16px;
        border: 1px solid rgba(119, 50, 132, .14);
        background: #fff;
        color: #4b2850 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 900;
    }

    .nd-public-mobile-drawer-links a.nd-primary {
        border: 0;
        background: linear-gradient(135deg, #74237f 0%, #9d35ad 100%);
        color: #fff !important;
        box-shadow: 0 12px 24px rgba(116, 35, 127, .22);
    }

    .nd-public-mobile-drawer-links a.nd-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 370px) {
    .nd-public-mobile-login {
        padding-inline: 11px;
        font-size: 12px;
    }

    .nd-public-mobile-drawer-links {
        grid-template-columns: 1fr;
    }

    .nd-public-mobile-drawer-links a.nd-wide {
        grid-column: auto;
    }
}

/* =========================================================
   KARTA KLIENTA — MOBILE
   Obsługuje aktualne i starsze nazwy klas NoviDesk.
   ========================================================= */
@media (max-width: 850px) {
    html,
    body {
        max-width: 100%;
    }

    body:has(.customer-profile-mobile-page),
    body:has(.customer-profile-page),
    body:has(.cp-mobile-page),
    body:has([class*="customer-profile"]) {
        overflow-x: hidden !important;
    }

    body:has(.customer-profile-mobile-page) .container,
    body:has(.customer-profile-page) .container,
    body:has(.cp-mobile-page) .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: var(--nd-mobile-safe-bottom) !important;
        overflow-x: clip !important;
    }

    .customer-profile-mobile-page,
    .customer-profile-page,
    .customer-profile-mobile-page > *,
    .customer-profile-page > *,
    .customer-profile-hero,
    .customer-profile-head,
    .customer-profile-main,
    .customer-profile-actions,
    .customer-stat-grid,
    .customer-profile-contact,
    .cp-mobile-page,
    .cp-mobile-card,
    .cp-actions,
    .cp-metrics {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .customer-profile-mobile-page,
    .customer-profile-page,
    .cp-mobile-page {
        display: grid !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    .customer-profile-mobile-page .card,
    .customer-profile-page .card,
    .cp-mobile-card {
        padding: 14px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 28px rgba(76, 27, 65, .07) !important;
    }

    .customer-profile-hero {
        padding: 15px !important;
    }

    .customer-profile-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        align-items: start !important;
    }

    .customer-profile-main {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .customer-profile-avatar,
    .cp-avatar {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        border-radius: 20px !important;
        font-size: 28px !important;
        line-height: 1 !important;
    }

    .customer-profile-name,
    .cp-name,
    .customer-profile-main h1 {
        max-width: 100% !important;
        margin: 0 0 6px !important;
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.03 !important;
        letter-spacing: -.045em !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .customer-profile-main .badge,
    .customer-profile-main [class*="tag"],
    .customer-profile-main [class*="pill"],
    .cp-tags {
        max-width: 100% !important;
    }

    .customer-profile-contact,
    .cp-contact-line {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin-top: 7px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    .customer-profile-contact a,
    .cp-contact-pill {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .customer-profile-actions,
    .cp-actions,
    [class*="customer-card-actions"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .customer-profile-actions > *,
    .cp-actions > *,
    [class*="customer-card-actions"] > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .customer-profile-actions form,
    .cp-actions form,
    [class*="customer-card-actions"] form {
        display: contents !important;
    }

    .customer-profile-actions .btn,
    .customer-profile-actions button,
    .customer-profile-actions a,
    .cp-actions .btn,
    .cp-actions button,
    .cp-actions a,
    [class*="customer-card-actions"] .btn,
    [class*="customer-card-actions"] button,
    [class*="customer-card-actions"] a {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        height: auto !important;
        padding: 10px 9px !important;
        border-radius: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
    }

    .customer-profile-actions .btn-danger,
    .customer-profile-actions [class*="delete"],
    .cp-actions .btn-danger,
    .cp-actions [class*="delete"],
    [class*="customer-card-actions"] .btn-danger,
    [class*="customer-card-actions"] [class*="delete"] {
        grid-column: 1 / -1 !important;
    }

    .customer-stat-grid,
    .cp-metrics,
    [class*="customer-stat-grid"],
    [class*="customer-metrics"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .customer-stat,
    .cp-metric,
    [class*="customer-stat"] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 82px !important;
        padding: 11px !important;
        border-radius: 17px !important;
        display: grid !important;
        align-content: center !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    .customer-stat span,
    .cp-metric span,
    [class*="customer-stat"] span {
        font-size: 10px !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    .customer-stat strong,
    .cp-metric strong,
    [class*="customer-stat"] strong {
        max-width: 100% !important;
        font-size: clamp(19px, 6vw, 24px) !important;
        line-height: 1.05 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .customer-nearest-card,
    .customer-nearest-top,
    .customer-history-top,
    .customer-history-breakdown {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .customer-nearest-date {
        font-size: 21px !important;
        line-height: 1.15 !important;
    }

    .customer-profile-mobile-page table,
    .customer-profile-page table {
        max-width: 100% !important;
    }

    .customer-profile-mobile-page img,
    .customer-profile-page img {
        max-width: 100% !important;
        height: auto !important;
    }

    .bottom-nav.bg-owner-mobile-nav,
    .bottom-nav {
        max-width: 100vw !important;
    }
}

@media (max-width: 370px) {
    .customer-profile-actions,
    .cp-actions,
    [class*="customer-card-actions"] {
        grid-template-columns: 1fr !important;
    }

    .customer-profile-actions .btn-danger,
    .customer-profile-actions [class*="delete"],
    .cp-actions .btn-danger,
    .cp-actions [class*="delete"] {
        grid-column: auto !important;
    }

    .customer-stat-grid,
    .cp-metrics,
    [class*="customer-stat-grid"],
    [class*="customer-metrics"] {
        grid-template-columns: 1fr !important;
    }
}