/* NORTH User Portal - unified navigation & cards */

.north-portal {
    --north-portal-bg: var(--north-color-bg, #ffffff);
    --north-portal-surface: var(--north-color-bg-light, #f8f9fb);
    --north-portal-text: var(--north-color-text, #0f172a);
    --north-portal-muted: var(--north-color-text-muted, #5b6472);
    --north-portal-border: var(--north-color-border, #e2e8f0);
    --north-portal-primary: var(--north-color-primary, #0b6bcb);
    --north-portal-radius: var(--north-radius, 10px);
    --north-portal-gap: var(--north-gap, 1rem);

    color: var(--north-portal-text);
}


.north-portal__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
    background: transparent;
}

.north-portal__nav {
    position: sticky;
    top: 1rem;
}

.north-portal__tabs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--north-portal-border);
    border-radius: var(--north-portal-radius);
    background: var(--north-portal-surface);
}

.north-portal__tabs::-webkit-scrollbar {
    height: 6px;
}

.north-portal__tabs::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.12);
    border-radius: 999px;
}

.north-portal__tab {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.9rem;
    color: var(--north-portal-text);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: calc(var(--north-portal-radius) - 2px);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    min-height: 42px;
}

.north-portal__tab:hover {
    border-color: var(--north-portal-primary);
    color: var(--north-portal-primary);
}

.north-portal__tab.is-active {
    background: linear-gradient(135deg, var(--north-portal-primary), #0f8ad8);
    color: #ffffff;
    border-color: var(--north-portal-primary);
    box-shadow: 0 6px 18px rgba(11, 107, 203, 0.18);
}

.north-portal__tab-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    line-height: 0;
}

.north-portal__tab svg {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.north-portal__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.north-portal__card {
    background: #ffffff;
    border: 1px solid var(--north-portal-border);
    border-radius: var(--north-portal-radius);
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.north-portal__card h2,
.north-portal__card h3 {
    margin-top: 0;
    color: var(--north-portal-text);
}

.north-portal__muted {
    color: var(--north-portal-muted);
}

/* Login prompt */
.north-user-portal--logged-out {
    margin: 3rem auto;
}

.north-user-portal__login-prompt {
    text-align: center;
    padding: 3rem 2rem;
    border: 1px solid var(--north-portal-border);
    border-radius: var(--north-portal-radius);
    background: var(--north-portal-surface);
}

.north-user-portal__login-prompt h2 {
    margin-bottom: 0.75rem;
}

.north-user-portal__login-prompt p {
    color: var(--north-portal-muted);
}

.north-user-portal__signup-link a {
    color: var(--north-portal-primary);
}

/* WooCommerce My Account nav — match portal look */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0.25rem;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 1px solid var(--north-portal-border);
    border-radius: var(--north-portal-radius);
    background: var(--north-portal-surface);
}

.woocommerce-MyAccount-navigation li {
    margin: 0;
}

.woocommerce-MyAccount-navigation a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid transparent;
    border-radius: calc(var(--north-portal-radius) - 2px);
    background: #fff;
    color: var(--north-portal-text);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation .current-menu-item a {
    border-color: var(--north-portal-primary);
    color: var(--north-portal-primary);
}

.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation .current-menu-item a {
    background: linear-gradient(135deg, var(--north-portal-primary), #0f8ad8);
    color: #fff;
    box-shadow: 0 6px 18px rgba(11, 107, 203, 0.18);
}

.woocommerce-MyAccount-navigation a::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: currentColor;
        mask-size: 18px 18px;
        mask-position: center;
        mask-repeat: no-repeat;
        flex-shrink: 0;
}

/* Keep vertical stack on mobile */
@media (max-width: 782px) {
    .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
        gap: 0.35rem;
    }

    .woocommerce-MyAccount-navigation a {
        width: 100%;
    }
}

/* Icon masks for Woo nav */
.woocommerce-MyAccount-navigation-link--crm-dashboard a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 13h6V4H4v9Zm10 7h6v-9h-6v9Zm-10 0h6v-5H4v5Zm10-13h6V4h-6v3Z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--crm-support a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20h6l4 2v-2h4V4H5v16Z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--crm-notes a::before,
.woocommerce-MyAccount-navigation-link--messages a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v11H7l-2 3V5Z'/%3E%3Cpath d='M9 10h6M9 13h4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--crm-documents a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h8l4 4v14H6V3Z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6M9 9h3M9 15h6'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14l-1 11H6L5 6Z'/%3E%3Cpath d='M9 6l1-3h4l1 3'/%3E%3Ccircle cx='10' cy='19' r='1.25'/%3E%3Ccircle cx='14' cy='19' r='1.25'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--tilbud a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 4 7v6c0 5 8 8 8 8s8-3 8-8V7l-8-4Z'/%3E%3Cpath d='M9.5 12.5 11 14l3.5-3.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--crm-favorites a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21s-7-4.35-7-10a5 5 0 0 1 9-2.9A5 5 0 0 1 19 11c0 5.65-7 10-7 10Z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--crm-loyalty a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21c4-2.5 8-5.5 8-10a6 6 0 0 0-11-3A6 6 0 0 0 4 11c0 4.5 4 7.5 8 10Z'/%3E%3Cpath d='M12 8v4l2 1'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--crm-profile a::before,
.woocommerce-MyAccount-navigation-link--edit-account a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M6 19c1.5-2 3.75-3 6-3s4.5 1 6 3'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6V4H6v16h8v-2'/%3E%3Cpath d='M10 12h9m0 0-3-3m3 3-3 3'/%3E%3C/svg%3E"); }

/* CRM messages/documents spacing reuse */
.crm-notes-list,
.crm-documents-list {
    gap: 1rem;
}

/* Documents layout */
.crm-documents-sections {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.document-section {
    background: var(--north-portal-surface);
    border: 1px solid var(--north-portal-border);
    border-radius: var(--north-portal-radius);
    padding: 1rem 1.1rem;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.document-section h3 {
    font-size: 1rem;
    margin: 0 0 0.4rem;
    color: var(--north-portal-text, #0f172a) !important;
    font-weight: 600;
}

.document-placeholder {
    color: var(--north-portal-muted);
    font-style: italic;
    margin: 0;
}

.crm-downloads {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--north-portal-border);
}

.crm-downloads h3 {
    font-size: 1rem;
}

.woocommerce-MyAccount-downloads .woocommerce-button {
    display: none;
}

@media (max-width: 1024px) {
    .north-portal__layout {
        grid-template-columns: 220px 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 900px) {
    .north-portal__layout {
        grid-template-columns: 1fr;
    }

    .north-portal__nav {
        position: static;
    }

    .north-portal__tabs,
    .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .north-portal__tab,
    .woocommerce-MyAccount-navigation a {
        min-width: 140px;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .north-portal__tab,
    .woocommerce-MyAccount-navigation a {
        padding: 0.65rem 0.75rem;
        gap: 0.4rem;
        font-size: 0.92rem;
    }
}

@media (max-width: 480px) {
    .north-user-portal__header h1 {
        font-size: 1.25rem;
    }
    
    .north-user-portal__section h2 {
        font-size: 1.25rem;
    }
    
    .north-user-portal__profile-card {
        padding: 1rem;
    }
    
    .north-user-portal__booking-card {
        padding: 1rem;
    }
    
    .north-user-portal__message {
        padding: 1rem;
    }
}