/* PRE Core v0.17.0 — responsive foundation and compact commercial pipeline */

:root {
    --app-gutter: clamp(16px, 2vw, 38px);
    --responsive-gap: clamp(12px, 1.15vw, 20px);
}

html {
    max-width: 100%;
    overflow-x: hidden;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    max-width: 100%;
    overflow-x: clip;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.app-frame,
.app-main,
.app-main > *,
.content-panel,
.page-intro-card,
.form-grid > *,
.field,
.field > *,
.dashboard-grid > *,
.commercial-lead-layout > *,
.payment-plan-workspace > * {
    min-width: 0;
}

.app-frame {
    width: 100%;
}

.app-main,
.app-main.events-page,
.app-main.registrations-page,
.app-main.planning-page,
.app-main.payment-plan-page,
.app-main.lead-distributor-page,
.app-main.commercial-pipeline-page,
.app-main.commercial-lead-page {
    width: 100%;
    max-width: none;
    padding: var(--app-gutter);
}

.events-page,
.registrations-page,
.planning-page,
.payment-plan-page,
.commercial-pipeline-page,
.commercial-lead-page {
    width: 100%;
    max-width: none;
}

.button,
.icon-button,
button,
summary,
a {
    -webkit-tap-highlight-color: transparent;
}

.button {
    min-height: 44px;
}

.content-panel,
.commercial-board-shell,
.lead-board-shell,
.agent-card,
.collaborator-card,
.ticket-list-row,
.event-selector-card {
    max-width: 100%;
}

/* Flexible grids shared by the principal modules. */
.section-grid,
.collaborator-grid,
.agent-card-grid,
.event-card-rail {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.dashboard-metrics--six,
.dashboard-metrics--four,
.agent-summary-grid,
.lead-summary-strip,
.commercial-summary-grid,
.event-year-summary,
.event-kpi-grid,
.registration-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
}

.dashboard-grid,
.dashboard-grid--personal,
.budget-rate-layout,
.budget-analysis-grid,
.agent-detail-layout,
.commercial-lead-layout {
    max-width: 100%;
}

.lead-distributor-toolbar,
.agent-directory-header,
.collaborator-toolbar,
.event-hero,
.payment-plan-hero,
.commercial-pipeline-hero,
.commercial-lead-hero,
.dashboard-hero {
    max-width: 100%;
}

/* Filters wrap into complete rows instead of overflowing their container. */
.commercial-filter-bar,
.lead-filter-bar,
.agent-filter-bar,
.registration-filter-bar,
.ticket-filter-panel form,
.collaborator-toolbar form {
    width: 100%;
    max-width: 100%;
}

.commercial-filter-bar > *,
.lead-filter-bar > *,
.agent-filter-bar > *,
.registration-filter-bar > *,
.ticket-filter-panel form > *,
.collaborator-toolbar form > * {
    min-width: 0;
}

/* Compact pipeline: no horizontal scroll and no clipped final column. */
.commercial-pipeline-page {
    gap: 15px;
}

.commercial-pipeline-hero {
    padding: clamp(21px, 1.7vw, 28px) clamp(20px, 2vw, 32px);
}

.commercial-pipeline-hero h1 {
    font-size: clamp(32px, 2.6vw, 44px);
}

.commercial-summary-grid {
    gap: 9px;
}

.commercial-summary-grid > a {
    min-height: 72px;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 14px;
}

.commercial-summary-grid > a > span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.commercial-summary-grid small {
    font-size: 12px;
}

.commercial-summary-grid strong {
    font-size: 26px;
}

.commercial-filter-bar {
    grid-template-columns: minmax(220px, 1.7fr) repeat(4, minmax(130px, 0.72fr)) auto auto;
    gap: 8px;
    padding: 10px;
    border-radius: 15px;
}

.commercial-filter-bar select,
.commercial-filter-bar input {
    min-height: 43px;
}

.commercial-board-shell {
    overflow: visible;
    border-radius: 18px;
}

.commercial-board-shell > header {
    padding: 14px 16px;
}

.commercial-board-nav {
    display: none;
}

.commercial-board {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 9px;
    min-height: 0;
    overflow: visible;
    padding: 10px;
    scroll-snap-type: none;
}

.commercial-stage {
    container-name: commercial-stage;
    container-type: inline-size;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    border-radius: 14px;
    scroll-snap-align: none;
    scroll-margin-top: 78px;
}

.commercial-stage > header {
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 63px;
    padding: 8px 9px;
    border-radius: 13px 13px 0 0;
}

.commercial-stage__index {
    width: 27px;
    height: 27px;
    font-size: 11px;
}

.commercial-stage > header h3 {
    font-size: 13px;
    line-height: 1.2;
}

.commercial-stage > header small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.commercial-stage > header > strong {
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 11px;
}

.commercial-stage__toggle {
    display: none;
}

.commercial-stage__cards {
    gap: 7px;
    max-height: clamp(440px, 58vh, 720px);
    overflow-y: auto;
    overflow-x: visible;
    padding: 7px;
    scrollbar-color: #9babb5 transparent;
    scrollbar-width: thin;
}

.commercial-stage__cards::-webkit-scrollbar {
    width: 7px;
}

.commercial-stage__cards::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #9babb5;
    background-clip: padding-box;
}

.commercial-lead-card {
    min-width: 0;
    padding: 9px;
    border-left-width: 3px;
    border-radius: 10px;
}

.commercial-lead-card > a,
.commercial-lead-card__top,
.commercial-lead-card__agent,
.commercial-lead-card__meta,
.commercial-lead-card__meta > span {
    min-width: 0;
}

.commercial-lead-card__top {
    gap: 5px;
}

.commercial-lead-card .lead-language {
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 11px;
}

.commercial-lead-card__top small {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commercial-lead-card h4 {
    overflow: hidden;
    margin: 8px 0 3px;
    font-size: 13px;
    line-height: 1.22;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commercial-lead-card > a > p {
    display: -webkit-box;
    overflow: hidden;
    min-height: 28px;
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.commercial-lead-card__agent {
    gap: 6px;
    padding-top: 7px;
}

.commercial-lead-card__agent .agent-avatar--small {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 11px;
}

.commercial-lead-card__agent > span:last-child {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commercial-lead-card__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    margin-top: 7px;
    padding-top: 6px;
}

.commercial-lead-card__meta > span {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@container commercial-stage (max-width: 205px) {
    .commercial-stage > header small,
    .commercial-lead-card__top > small {
        display: none;
    }

    .commercial-stage > header {
        min-height: 54px;
    }
}

@container commercial-stage (min-width: 240px) {
    .commercial-lead-card {
        padding: 10px;
    }

    .commercial-lead-card h4 {
        font-size: 14px;
    }

    .commercial-lead-card__meta {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Lead Distributor follows the same responsive rule: complete columns wrap. */
.lead-board-shell {
    overflow: visible;
}

.lead-board-scroll-controls {
    display: none;
}

.lead-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: start;
    gap: 12px;
    min-height: 0;
    overflow: visible;
    scroll-snap-type: none;
}

.lead-column {
    min-width: 0;
    min-height: 0;
    flex: none;
    scroll-snap-align: none;
}

.lead-column__cards {
    max-height: 660px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Wide-screen pipeline: every stage is visible at once. */
@media (min-width: 2200px) {
    .commercial-board {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

@media (min-width: 1800px) and (max-width: 2199px) {
    .commercial-board {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1500px) and (max-width: 1799px) {
    .commercial-board {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) and (max-width: 1499px) {
    .commercial-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .commercial-filter-bar,
    .lead-filter-bar,
    .agent-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .commercial-filter-bar .lead-search-field,
    .lead-filter-bar .lead-search-field,
    .agent-filter-bar .agent-search-field {
        grid-column: span 2;
    }
}

@media (min-width: 760px) and (max-width: 1199px) {
    .commercial-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commercial-filter-bar,
    .lead-filter-bar,
    .agent-filter-bar,
    .registration-filter-bar,
    .ticket-filter-panel form,
    .collaborator-toolbar form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commercial-filter-bar .lead-search-field,
    .lead-filter-bar .lead-search-field,
    .agent-filter-bar .agent-search-field,
    .ticket-search-field {
        grid-column: 1 / -1;
    }

    .commercial-filter-bar .button,
    .lead-filter-bar .button,
    .agent-filter-bar .button,
    .registration-filter-bar .button {
        width: 100%;
    }
}

/* Module adaptations before the phone breakpoint. */
@media (max-width: 1499px) {
    .payment-plan-workspace {
        grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.22fr);
    }

    .budget-scenario-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1250px) {
    .payment-plan-workspace,
    .commercial-lead-layout,
    .agent-detail-layout {
        grid-template-columns: 1fr;
    }

    .commercial-lead-aside {
        position: static;
    }

    .payment-plan-preview-shell {
        width: 100%;
        overflow: hidden;
    }

    .event-hero,
    .payment-plan-hero,
    .commercial-pipeline-hero,
    .commercial-lead-hero,
    .dashboard-hero,
    .lead-distributor-toolbar,
    .agent-page-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .event-hero .button,
    .payment-plan-toolbar,
    .commercial-pipeline-hero__actions,
    .commercial-lead-hero__actions,
    .lead-distributor-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1023px) {
    :root {
        --app-gutter: clamp(15px, 3vw, 27px);
    }

    .app-sidebar {
        width: min(86vw, 320px);
        max-width: 100%;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .app-header {
        padding-right: max(15px, env(safe-area-inset-right));
        padding-left: max(15px, env(safe-area-inset-left));
    }

    .planning-toolbar,
    .budget-scenario-bar {
        grid-template-columns: 1fr 1fr;
    }

    .ticket-detail-layout,
    .dashboard-grid,
    .dashboard-grid--personal {
        grid-template-columns: 1fr;
    }
}

/* Smartphone: vertical, tactile and without lateral page scrolling. */
@media (max-width: 759px) {
    :root {
        --app-gutter: 13px;
        --responsive-gap: 12px;
    }

    .app-main,
    .app-main.events-page,
    .app-main.registrations-page,
    .app-main.planning-page,
    .app-main.payment-plan-page,
    .app-main.lead-distributor-page,
    .app-main.commercial-pipeline-page,
    .app-main.commercial-lead-page {
        padding: var(--app-gutter);
    }

    .app-header {
        min-height: 64px;
        height: auto;
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: 8px;
    }

    .app-header__actions {
        min-width: 0;
    }

    .language-switcher {
        gap: 2px;
        padding: 3px;
    }

    .language-switcher > .icon {
        display: none;
    }

    .language-switcher__link {
        min-width: 31px;
        min-height: 34px;
        padding: 7px 6px;
    }

    .content-panel,
    .page-intro-card,
    .commercial-pipeline-hero,
    .commercial-lead-hero,
    .event-hero,
    .payment-plan-hero,
    .dashboard-hero,
    .lead-distributor-toolbar,
    .agent-page-hero {
        border-radius: 17px;
    }

    .commercial-pipeline-hero,
    .commercial-lead-hero,
    .event-hero,
    .payment-plan-hero,
    .dashboard-hero,
    .lead-distributor-toolbar,
    .agent-page-hero {
        gap: 18px;
        padding: 21px 17px;
    }

    .commercial-pipeline-hero h1,
    .commercial-lead-hero h1,
    .event-hero h1,
    .payment-plan-hero h1,
    .dashboard-hero h1,
    .lead-distributor-heading h1,
    .agent-page-hero h1 {
        font-size: clamp(30px, 9vw, 37px);
    }

    .commercial-pipeline-hero p,
    .commercial-lead-hero p,
    .event-hero p,
    .payment-plan-hero p,
    .dashboard-hero p,
    .lead-distributor-heading p,
    .agent-page-hero p {
        font-size: 14px;
        line-height: 1.5;
    }

    .commercial-pipeline-hero__actions,
    .commercial-lead-hero__actions,
    .payment-plan-toolbar,
    .dashboard-hero__actions,
    .lead-distributor-actions {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
    }

    .commercial-pipeline-hero__actions .button,
    .commercial-lead-hero__actions .button,
    .payment-plan-toolbar .button,
    .dashboard-hero__actions .button,
    .lead-distributor-actions .button,
    .event-hero .button {
        width: 100%;
    }

    .commercial-summary-grid,
    .lead-summary-strip,
    .agent-summary-grid,
    .event-year-summary,
    .event-kpi-grid,
    .registration-kpi-grid,
    .dashboard-metrics--six,
    .dashboard-metrics--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .commercial-summary-grid > a,
    .lead-summary-strip > a,
    .agent-summary-grid > :is(article, a),
    .dashboard-metrics > a {
        min-height: 78px;
        padding: 11px;
    }

    .commercial-filter-bar,
    .lead-filter-bar,
    .agent-filter-bar,
    .registration-filter-bar,
    .ticket-filter-panel form,
    .collaborator-toolbar form,
    .budget-scenario-bar,
    .planning-toolbar {
        grid-template-columns: 1fr;
    }

    .commercial-filter-bar .lead-search-field,
    .lead-filter-bar .lead-search-field,
    .agent-filter-bar .agent-search-field,
    .ticket-search-field {
        grid-column: auto;
    }

    .commercial-filter-bar .button,
    .lead-filter-bar .button,
    .agent-filter-bar .button,
    .registration-filter-bar .button,
    .ticket-filter-panel .button,
    .collaborator-toolbar .button {
        width: 100%;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .form-grid,
    .collaborator-form-grid,
    .account-profile-grid,
    .payment-plan-form-grid,
    .payment-plan-form-grid--people,
    .payment-plan-form-grid--schedule,
    .payment-plan-percent-grid,
    .event-form-grid,
    .event-create-grid,
    .registration-form-grid,
    .registration-followup-grid,
    .planning-entry-grid,
    .commercial-contact-grid {
        grid-template-columns: 1fr;
    }

    .field--wide {
        grid-column: auto;
    }

    .commercial-board-shell {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .commercial-board-shell > header {
        margin-bottom: 8px;
        border: 1px solid #ced8df;
        border-radius: 14px;
    }

    .commercial-board-shell > header p {
        font-size: 12px;
        line-height: 1.4;
    }

    .commercial-board {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0;
    }

    .commercial-stage {
        border-radius: 14px;
        background: #f7f9fa;
    }

    .commercial-stage > header {
        position: relative;
        grid-template-columns: 31px minmax(0, 1fr) auto 38px;
        gap: 9px;
        min-height: 66px;
        padding: 9px 9px 9px 11px;
        border-radius: 13px;
        cursor: default;
    }

    .commercial-stage.is-open > header {
        border-radius: 13px 13px 0 0;
    }

    .commercial-stage__index {
        width: 31px;
        height: 31px;
    }

    .commercial-stage > header h3 {
        font-size: 14px;
    }

    .commercial-stage > header small {
        display: block;
        font-size: 11px;
    }

    .commercial-stage__toggle {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid #d2dce2;
        border-radius: 10px;
        background: #f6f9fa;
        color: var(--navy-800);
        cursor: pointer;
    }

    .commercial-stage__toggle .icon {
        transition: transform 160ms ease;
    }

    .commercial-stage.is-open .commercial-stage__toggle .icon {
        transform: rotate(90deg);
    }

    .commercial-stage__cards {
        display: none;
        max-height: none;
        overflow: visible;
        padding: 9px;
    }

    .commercial-stage.is-open .commercial-stage__cards {
        display: grid;
    }

    .commercial-lead-card {
        padding: 12px;
    }

    .commercial-lead-card h4 {
        font-size: 15px;
    }

    .commercial-lead-card > a > p,
    .commercial-lead-card__agent > span:last-child,
    .commercial-lead-card__meta > span {
        font-size: 12px;
    }

    .commercial-lead-card__meta {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .lead-board {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .lead-column__cards {
        max-height: none;
        overflow: visible;
    }

    .lead-board-header,
    .lead-distributor-toolbar,
    .agent-directory-header,
    .collaborator-toolbar,
    .ticket-list-intro {
        align-items: stretch;
        flex-direction: column;
    }

    .lead-card,
    .commercial-lead-card {
        touch-action: manipulation;
    }

    .commercial-stage-stepper {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
    }

    .commercial-stage-step button {
        min-height: 58px;
        padding: 7px 4px;
    }

    .commercial-stage-step small {
        overflow: hidden;
        font-size: 9px;
        text-overflow: ellipsis;
    }

    .payment-plan-preview-shell {
        overflow: hidden;
    }

    .payment-plan-document:not(.is-exporting) {
        width: 100% !important;
        min-width: 0;
    }

    .event-year-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        overflow: visible;
    }

    .event-year-tabs a {
        min-width: 0;
        padding-inline: 10px;
    }

    .planning-period-nav {
        width: 100%;
        justify-content: space-between;
    }

    .planning-period-nav > strong,
    .planning-user-picker {
        min-width: 0;
    }

    .article-document__body,
    .ticket-comment__body,
    .commercial-timeline blockquote {
        overflow-wrap: anywhere;
    }

    dialog,
    .lead-transfer-dialog {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        margin: auto;
        border-radius: 16px;
    }
}

@media (max-width: 460px) {
    .commercial-summary-grid,
    .lead-summary-strip,
    .agent-summary-grid,
    .event-year-summary,
    .event-kpi-grid,
    .registration-kpi-grid,
    .dashboard-metrics--six,
    .dashboard-metrics--four {
        grid-template-columns: 1fr;
    }

    .commercial-summary-grid > a,
    .lead-summary-strip > a,
    .agent-summary-grid > :is(article, a),
    .dashboard-metrics > a {
        min-height: 68px;
    }

    .commercial-stage-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commercial-lead-card__meta {
        grid-template-columns: 1fr;
    }

    .header-profile-menu__dropdown {
        position: fixed;
        top: 70px;
        right: 10px;
        left: 10px;
        width: auto;
    }
}

@media (hover: none) and (pointer: coarse) {
    .button,
    .icon-button,
    .app-nav__item,
    .app-nav__subitem,
    .commercial-stage__toggle,
    .lead-transfer-button,
    input,
    select {
        min-height: 44px;
    }

    .commercial-lead-card:hover,
    .lead-card:hover,
    .agent-card:hover,
    .collaborator-card:hover,
    .event-selector-card:hover {
        transform: none;
    }
}

@media print {
    .app-main {
        max-width: none;
        padding: 0;
    }
}