.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.w-full { width: 100%; }

.hidden { display: none !important; }

.flex { display: flex; }
.grid { display: grid; }

.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.text-right { text-align: right; }

@media (max-width: 760px) {
  .mobile-hidden { display: none !important; }
}
/* =========================================================
   P9 - Mobile UI containment and commercial UX stabilization
   ========================================================= */

/* Topbar: keep actions isolated and prevent notification DOM from joining layout flow. */
.topbar-left {
    min-width: 0;
    flex: 1 1 auto;
}

.topbar-title-wrap {
    min-width: 0;
    max-width: 100%;
}

.topbar-title-wrap strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-actions {
    flex: 0 0 auto;
    min-width: max-content;
    position: relative;
}

.notification-menu {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-width: 40px;
}

.notification-bell-btn {
    position: relative;
    overflow: visible !important;
}

.notification-count-badge:not(.is-visible),
.notification-count-badge[hidden] {
    display: none !important;
    visibility: hidden !important;
}

.notification-count-badge.is-visible {
    display: inline-flex !important;
    visibility: visible !important;
}

.notification-dropdown[hidden],
.notification-dropdown:not(.is-open) {
    display: none !important;
}

.notification-dropdown.is-open {
    display: flex !important;
    isolation: isolate;
}

.notification-dropdown-list {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
    .topbar {
        min-height: 64px;
        max-height: 64px;
        padding: 0 16px;
        gap: 12px;
        overflow: visible !important;
        z-index: 2000;
    }

    .topbar-left {
        gap: 12px;
        min-width: 0;
    }

    .topbar-title-wrap strong {
        max-width: calc(100vw - 190px);
        font-size: 1rem;
        line-height: 1.2;
    }

    .topbar-actions {
        gap: 8px;
    }

    .topbar-actions .notification-bell-btn,
    .topbar-actions #forceSyncFacto {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        background: var(--surface-1) !important;
    }

    .notification-count-badge.is-visible {
        top: -6px;
        right: -6px;
    }

    .notification-dropdown.is-open {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top, 0px) + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(72dvh, 520px) !important;
        z-index: 5000 !important;
        border-radius: 18px !important;
        box-shadow: var(--shadow-lg) !important;
    }

    .notification-dropdown-header,
    .notification-dropdown-footer {
        padding: 12px !important;
    }

    .notification-dropdown-footer .btn {
        min-width: 0;
        flex: 1 1 0;
    }
}

/* Notification center: internal scroll and card layout that does not collapse on mobile. */
.notifications-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.notifications-page .notifications-layout-single,
.notifications-page .notifications-list-card-wide {
    min-width: 0;
}

.notifications-page .notifications-list-card-wide {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notifications-page .notifications-card-header {
    flex: 0 0 auto;
}

.notifications-page .notifications-full-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.notifications-page .notification-row {
    min-width: 0;
}

.notifications-page .notification-row-content,
.notifications-page .notification-row-head,
.notifications-page .notification-row-meta {
    min-width: 0;
}

@media (min-width: 761px) {
    .notifications-page .notifications-list-card-wide {
        max-height: calc(100dvh - var(--topbar-height) - 190px);
    }
}

@media (max-width: 760px) {
    .notifications-page {
        gap: 12px;
    }

    .notifications-page .notifications-page-header {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .notifications-page .notifications-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .notifications-page .notifications-actions .notification-action-btn,
    .notifications-page .notifications-actions .notification-action-markall {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 10px !important;
        border-radius: 14px !important;
    }

    .notifications-page .notifications-actions .notification-action-markall {
        grid-column: span 2;
    }

    .notifications-page .notifications-actions .action-label {
        display: inline !important;
        max-width: 11ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .notifications-page .notifications-list-card-wide {
        height: min(66dvh, 620px);
        max-height: calc(100dvh - 236px);
    }

    .notifications-page .notifications-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start !important;
        gap: 12px;
        padding: 16px !important;
    }

    .notifications-page .notifications-card-header h3 {
        font-size: 1.05rem;
        line-height: 1.15;
    }

    .notifications-page .notifications-card-header p {
        font-size: 0.84rem;
        line-height: 1.35;
    }

    .notifications-page .notification-summary-pills {
        display: grid;
        gap: 6px;
        justify-items: end;
    }

    .notifications-page .notification-summary-pill {
        white-space: nowrap;
        min-height: 28px;
        padding: 0 10px;
    }

    .notifications-page .notifications-full-list {
        padding: 10px !important;
    }

    .notifications-page .notification-row {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .notifications-page .notification-row-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
    }

    .notifications-page .notification-row-head {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .notifications-page .notification-row-head strong {
        min-width: 0;
        max-width: 100%;
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .notifications-page .notification-priority-badge {
        flex: 0 0 auto;
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .notifications-page .notification-row-content p {
        font-size: 0.86rem;
        line-height: 1.35;
        margin-top: 5px;
    }

    .notifications-page .notification-row-meta {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 6px 8px !important;
    }

    .notifications-page .notification-row-meta span {
        max-width: 100%;
        font-size: 0.72rem;
        line-height: 1.2;
    }

    .notifications-page .notification-row-actions {
        grid-column: 2 / -1;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .notifications-page .notification-row-actions .notification-row-action {
        width: auto !important;
        min-width: 88px !important;
        padding: 0 10px !important;
    }

    .notifications-page .notification-row-actions .notification-row-action span {
        display: inline !important;
    }
}

/* Territory: mobile containment and map interaction. */
#customers-territory-main,
#customers-territory-main .content,
#customers-territory-main .territory-main-grid,
#customers-territory-main .territory-breakdown-card,
#customers-territory-main .territory-table-card {
    min-width: 0;
    max-width: 100%;
}

#customers-territory-main .territory-map-canvas {
    touch-action: none !important;
    overscroll-behavior: contain !important;
}

#customers-territory-main .territory-breakdown-card {
    overflow: hidden;
}

#customers-territory-main .territory-breakdown-card .card-body {
    overflow: hidden;
}

#customers-territory-main .territory-chip-list,
#customers-territory-main .territory-metric-list {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 760px) {
    #customers-territory-main .territory-main-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden;
    }

    #customers-territory-main .territory-map-canvas,
    #customers-territory-main .territory-map-placeholder {
        min-height: 360px !important;
        height: 48dvh;
        max-height: 520px;
    }

    #customers-territory-main .territory-breakdown-card,
    #customers-territory-main .territory-table-card {
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;
        margin-left: auto;
        margin-right: auto;
    }

    #customers-territory-main .territory-breakdown-grid {
        min-width: 0;
    }

    #customers-territory-main .territory-chip-list,
    #customers-territory-main .territory-metric-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        overflow: hidden !important;
    }

    #customers-territory-main .territory-chip-card,
    #customers-territory-main .territory-metric-card {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #customers-territory-main .territory-chip-card span,
    #customers-territory-main .territory-metric-card span {
        max-width: 132px !important;
    }

    #customers-territory-main .territory-table-card {
        height: min(58dvh, 560px) !important;
        overflow: hidden !important;
    }

    #customers-territory-main .territory-table-scroll {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Modal system: faster, less fragile transitions and homologated footers. */
.product-modal-backdrop {
    transition: opacity 80ms ease !important;
}

.product-modal-box {
    transition: none !important;
    transform: none !important;
}

.product-modal-backdrop.show .product-modal-box {
    transform: none !important;
}

.product-modal-footer {
    gap: 10px !important;
}

.product-modal-footer .btn {
    min-width: 0;
    white-space: nowrap;
}

.product-modal-footer .btn span {
    min-width: 0;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-footer-actions-right {
    min-width: 0;
}

@media (max-width: 760px) {
    .product-modal-footer {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .modal-footer-actions-right {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        overflow: hidden;
    }

    .modal-footer-actions-right .btn {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 0.82rem !important;
    }

    .product-modal-footer .btn span {
        max-width: 10ch;
    }
}

/* Quote preview inside opportunity: stable product/detail columns. */
.quote-doc-table {
    table-layout: fixed;
}

.quote-doc-table th,
.quote-doc-table td {
    overflow-wrap: anywhere;
}

.quote-doc-table .quote-doc-sku,
.quote-doc-table .quote-doc-sku-head {
    width: 84px;
}

.quote-doc-table .quote-doc-product {
    min-width: 0;
}

.quote-doc-table .quote-doc-product strong,
.quote-doc-table .quote-doc-product small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quote-doc-table .quote-doc-product small {
    display: none;
    margin-top: 3px;
    color: #536b8f;
    font-size: 0.72rem;
}

.quote-doc-table .quote-doc-qty {
    width: 84px;
}

.quote-doc-table .quote-doc-price,
.quote-doc-table .quote-doc-total {
    width: 116px;
}

@media (max-width: 760px) {
    .quote-doc-table {
        table-layout: fixed !important;
    }

    .quote-doc-table th:nth-child(1),
    .quote-doc-table td:nth-child(1) {
        display: none !important;
    }

    .quote-doc-table .quote-doc-product small {
        display: block;
    }

    .quote-doc-table .quote-doc-product {
        width: auto !important;
    }

    .quote-doc-table .quote-doc-qty {
        width: 62px !important;
        font-size: 0.78rem;
    }

    .quote-doc-table .quote-doc-price {
        display: none !important;
    }

    .quote-doc-table .quote-doc-total {
        width: 86px !important;
        font-size: 0.78rem;
    }
}

/* Company settings: homologated tabs/menu and mobile containment. */
#company-settings-main .tabs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin-bottom: 16px;
    border-bottom: 0 !important;
}

#company-settings-main .tab-trigger {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-default) !important;
    border-radius: 14px !important;
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
}

#company-settings-main .tab-trigger.active {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--surface-1)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--border-default)) !important;
    color: var(--text-primary) !important;
}

#company-settings-main .tab-trigger svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

#company-settings-main .tabs-scroll-viewport {
    max-width: 100%;
}

@media (max-width: 760px) {
    #company-settings-main .content-no-scroll {
        height: calc(100dvh - 64px) !important;
        padding-top: 18px !important;
    }

    #company-settings-main .page-header-content p {
        display: block !important;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    #company-settings-main .tabs-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #company-settings-main .tab-trigger {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        padding: 0 12px;
        font-size: 0.86rem;
    }

    #company-settings-main .tab-trigger span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #company-settings-main .tab-trigger:nth-child(3) {
        grid-column: span 1;
    }

    #company-settings-main .form-grid,
    #company-settings-main .form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    #company-settings-main .file-input {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* =========================================================
   P10 - Modal/button hardening and mobile containment
   ========================================================= */
body .app-main .top-actions-cluster,
body .app-main .actions-cluster.product-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

body .app-main .top-actions-cluster .btn,
body .app-main .actions-cluster.product-header-actions .btn {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

body .product-modal-box > form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

body .product-modal-header,
body .product-modal-footer {
    flex-shrink: 0 !important;
}

body .product-modal-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

body .product-modal-footer {
    gap: 10px !important;
}

body .product-modal-footer .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body .product-modal-footer .btn span {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 18ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body .product-modal-footer .modal-cancel-btn svg,
body .product-modal-footer .btn svg {
    flex: 0 0 auto !important;
}

@media (max-width: 760px) {
    body .app-main .top-actions-cluster .btn,
    body .app-main .actions-cluster.product-header-actions .btn,
    body .app-main .btn-icon-mobile {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
    }

    body .product-modal-backdrop {
        align-items: stretch !important;
        justify-content: center !important;
        padding: 8px !important;
    }

    body .product-modal-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        min-height: 0 !important;
    }

    body .product-modal-footer {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    body .product-modal-footer > form {
        min-width: 0 !important;
    }

    body .modal-footer-actions-right {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    body .modal-footer-actions-right .btn {
        flex: 0 1 auto !important;
        max-width: 50% !important;
        min-width: 42px !important;
        height: 42px !important;
        padding: 0 10px !important;
        font-size: 0.84rem !important;
    }

    body .product-modal-footer .btn span,
    body .product-modal-footer .mobile-hidden {
        display: inline-block !important;
        max-width: 9ch !important;
    }

    body .product-modal-footer .btn-delete-mobile {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
    }

    body .product-modal-footer .btn-delete-mobile span {
        display: none !important;
    }

    body .product-modal-footer:has(.btn-delete-mobile) .modal-footer-actions-right .btn {
        max-width: calc((100vw - 116px) / 2) !important;
    }

    body .product-modal-footer:not(:has(.btn-delete-mobile)) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Quotes filters: keep controls interactive above scroll containers and preserve row filtering in mobile grid mode. */
#quotesMain .quotes-filter-bar {
    isolation: isolate !important;
}

#quotesMain #quoteSearch,
#quotesMain #quoteStatusFilter,
#quotesMain #quoteCreatedFrom,
#quotesMain #quoteCreatedTo {
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

#quotesMain .quote-row.is-filter-hidden {
    display: none !important;
}


/* =========================================================
   P11 - Modal content-height sizing and mobile footer stability
   ========================================================= */
.product-modal-backdrop.show {
    display: flex !important;
}

.product-modal-backdrop {
    overflow: hidden !important;
}

.product-modal-box,
.quotes-modal-box {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.product-modal-box > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: inherit !important;
    overflow: hidden !important;
}

.product-modal-body,
.quotes-modal-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 761px) {
    .product-modal-backdrop {
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
    }

    .product-modal-box,
    .quotes-modal-box {
        max-height: calc(100dvh - 48px) !important;
    }

    .product-modal-body,
    .quotes-modal-body {
        max-height: calc(100dvh - 210px) !important;
    }
}

@media (max-width: 760px) {
    .product-modal-backdrop {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
    }

    .product-modal-box,
    .quotes-modal-box {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 24px) !important;
        align-self: center !important;
    }

    .product-modal-header {
        padding: 16px 18px !important;
    }

    .product-modal-body,
    .quotes-modal-body {
        max-height: calc(100dvh - 190px) !important;
    }

    .product-modal-footer {
        flex-shrink: 0 !important;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .product-modal-footer .btn span {
        max-width: 11ch !important;
    }
}

/* =========================================================
   P12 - UX/UI normalization: SPA module containment, modals,
   dropdowns, filters, tables and mobile map gestures
   ========================================================= */

body.is-modal-open {
    overflow: hidden !important;
}

body .app-main .page-header,
body .app-main .territory-page-header,
body .app-main .notifications-page-header {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: var(--space-4, 16px) !important;
    margin-bottom: 16px !important;
}

body .app-main .page-header-content,
body .app-main .territory-page-header .page-header-content,
body .app-main .notifications-page-header .page-header-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body .app-main .page-header-content h1,
body .app-main .page-header-content h2,
body .app-main .territory-page-header h1,
body .app-main .notifications-page-header h2 {
    margin: 0 0 4px !important;
    line-height: 1.1 !important;
}

body .app-main .page-header-content p,
body .app-main .territory-page-header p,
body .app-main .notifications-page-header p {
    margin: 0 !important;
    max-width: 72ch !important;
}

body .app-main .page-header > .cluster,
body .app-main .actions-cluster,
body .app-main .top-actions-cluster,
body .app-main .product-header-actions,
body .app-main .territory-header-actions,
body .app-main .notifications-page-header .cluster,
body .app-main .page-header-actions {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body .app-main .page-header-actions .btn,
body .app-main .actions-cluster .btn,
body .app-main .top-actions-cluster .btn,
body .app-main .product-header-actions .btn,
body .app-main .territory-header-actions .btn,
body .app-main .notifications-page-header .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

body .app-main.no-scroll-main,
#customers-main,
#products-main,
#quotesMain,
#embudo-main,
#notificationsMain,
#customers-territory-main,
#admin-users-main,
#categories-main,
#commercial-main,
#operations-main,
#stock-main {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body .app-main.no-scroll-main > .content,
#customers-main > .content,
#products-main > .content,
#quotesMain > .content,
#embudo-main > .content,
#notificationsMain > .content,
#customers-territory-main > .content,
#admin-users-main > .content,
#categories-main > .content,
#commercial-main > .content,
#operations-main > .content,
#stock-main > .content {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: var(--container-max) !important;
}

#customers-main > .content,
#products-main > .content,
#quotesMain > .content,
#embudo-main > .content,
#notificationsMain > .content,
#customers-territory-main > .content,
#categories-main > .content,
#commercial-main > .content,
#operations-main > .content,
#stock-main > .content {
    gap: 0 !important;
}

body .app-main .kpi-grid,
body .app-main .grid-2,
body .app-main .grid-3,
body .app-main .grid-4,
body .app-main .filter-bar-container,
body .app-main .customer-filter-card,
body .app-main .quotes-filter-bar,
body .app-main .territory-toolbar,
body .app-main .notifications-toolbar {
    flex: 0 0 auto !important;
}

body .app-main .card-table-container,
body .app-main .table-card,
body .app-main .notifications-list-card-wide,
body .app-main .territory-table-card,
body .app-main .crm-board-card,
body .app-main .quotes-table-card,
#categories-main > .content > .card,
#commercial-main .card-table-container,
#operations-main .card-table-container,
#stock-main .card-table-container {
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
}

body .app-main .table-container-scroll,
body .app-main .table-wrap.table-container-scroll,
body .app-main .table-wrap,
body .app-main .notifications-full-list,
body .app-main .territory-table-scroll,
body .app-main .crm-timeline-scroll,
body .app-main .card-table-container > .table-responsive,
#categories-main > .content > .card > .table-wrap,
#operations-main .operations-list-scroll,
#stock-main .stock-list-scroll {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

body .app-main .table-container-scroll thead th,
body .app-main .table-wrap.table-container-scroll thead th,
body .app-main .table-wrap thead th,
body .app-main .territory-table-scroll thead th,
#categories-main > .content > .card > .table-wrap thead th,
#operations-main thead th,
#stock-main thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    background: var(--surface-2, #f8fafc) !important;
}

body .app-main table th,
body .app-main table td {
    vertical-align: middle !important;
}

body .app-main table th:last-child,
body .app-main table td:last-child {
    text-align: right;
}

body .app-main .row-actions,
body .app-main .table-actions,
body .app-main .action-buttons,
body .app-main td:last-child .cluster {
    display: inline-flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

body .filter-bar-container,
body .customer-filter-card,
body .quotes-filter-bar,
body .territory-toolbar,
body .notifications-toolbar {
    position: relative !important;
    z-index: 20 !important;
    min-width: 0 !important;
}

body .filter-bar-container input,
body .filter-bar-container select,
body .customer-filter-card input,
body .customer-filter-card select,
body .quotes-filter-bar input,
body .quotes-filter-bar select,
body .territory-toolbar input,
body .territory-toolbar select,
body .notifications-toolbar input,
body .notifications-toolbar select {
    min-width: 0 !important;
    width: 100% !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

body .product-modal-backdrop,
body .quotes-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--z-modal, 1050) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.62) !important;
}

body .product-modal-backdrop.show,
body .quotes-modal-backdrop.show {
    display: flex !important;
    opacity: 1 !important;
}

body .product-modal-box,
body .quotes-modal-box {
    width: min(980px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body .product-modal-box > form,
body .quotes-modal-box > form {
    min-height: 0 !important;
    max-height: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body .product-modal-header,
body .product-modal-footer,
body .quotes-modal-header,
body .quotes-modal-footer {
    flex: 0 0 auto !important;
}

body .product-modal-body,
body .quotes-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

body .product-modal-footer,
body .quotes-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-top: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.24)) !important;
}

body .product-modal-footer:has(.btn-delete-mobile),
body .quotes-modal-footer:has(.btn-delete-mobile) {
    justify-content: space-between !important;
}

body .product-modal-footer > form,
body .quotes-modal-footer > form {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

body .modal-footer-actions-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body .product-modal-footer .btn-delete-mobile,
body .quotes-modal-footer .btn-delete-mobile,
body .product-modal-footer .btn-danger,
body .quotes-modal-footer .btn-danger {
    margin-right: auto !important;
}

body .notification-dropdown,
body .gemini-user-dropdown {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px !important;
}

body .notification-dropdown {
    width: min(390px, calc(100vw - 24px)) !important;
    max-height: min(560px, calc(100dvh - 96px)) !important;
    overflow: hidden !important;
    flex-direction: column !important;
}

body .notification-dropdown.is-open {
    display: flex !important;
}

body .notification-dropdown-header,
body .user-dropdown-header {
    padding: 10px 10px 12px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

body .notification-dropdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

body .notification-dropdown-header strong,
body .user-dropdown-header strong {
    display: block !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
}

body .notification-dropdown-header span,
body .user-dropdown-header span {
    display: block !important;
    margin-top: 2px !important;
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
}

body .notification-dropdown-list {
    padding: 6px 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
}

body .notification-item,
body .user-dropdown-link {
    border-radius: 14px !important;
}

body .notification-dropdown-footer {
    padding: 10px !important;
    border-top: 1px solid var(--border-subtle) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

#customers-territory-main .territory-map-card,
#customers-territory-main .territory-map-canvas,
#customers-territory-main [data-map-canvas],
#customers-territory-main .gm-style {
    touch-action: pan-x pan-y !important;
    overscroll-behavior: contain !important;
}

#customers-territory-main .territory-map-card {
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 760px) {
    body .app-main .page-header,
    body .app-main .territory-page-header,
    body .app-main .notifications-page-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
    }

    body .app-main .page-header-content h1,
    body .app-main .page-header-content h2,
    body .app-main .territory-page-header h1,
    body .app-main .notifications-page-header h2 {
        font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
    }

    body .app-main .page-header-content p,
    body .app-main .territory-page-header p,
    body .app-main .notifications-page-header p {
        display: none !important;
    }

    body .app-main .page-header > .cluster,
    body .app-main .actions-cluster,
    body .app-main .top-actions-cluster,
    body .app-main .product-header-actions,
    body .app-main .territory-header-actions,
    body .app-main .notifications-page-header .cluster,
    body .app-main .page-header-actions {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    body .app-main .page-header-actions .btn,
    body .app-main .actions-cluster .btn,
    body .app-main .top-actions-cluster .btn,
    body .app-main .product-header-actions .btn,
    body .app-main .territory-header-actions .btn,
    body .app-main .notifications-page-header .btn {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
    }

    body .app-main .page-header-actions .btn span,
    body .app-main .actions-cluster .btn span,
    body .app-main .top-actions-cluster .btn span,
    body .app-main .product-header-actions .btn span,
    body .app-main .territory-header-actions .btn span,
    body .app-main .notifications-page-header .btn span {
        display: none !important;
    }

    body .filter-bar-container,
    body .quotes-filter-bar,
    body .territory-toolbar,
    body .notifications-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body .product-modal-backdrop,
    body .quotes-modal-backdrop {
        padding: 12px !important;
    }

    body .product-modal-box,
    body .quotes-modal-box {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    body .product-modal-body,
    body .quotes-modal-body {
        max-height: calc(100dvh - 190px) !important;
    }

    body .product-modal-footer,
    body .quotes-modal-footer {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    body .product-modal-footer:not(:has(.btn-delete-mobile)),
    body .quotes-modal-footer:not(:has(.btn-delete-mobile)) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body .modal-footer-actions-right {
        width: 100% !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    body .modal-footer-actions-right .btn {
        min-width: 42px !important;
        max-width: calc((100vw - 116px) / 2) !important;
        height: 42px !important;
        padding: 0 10px !important;
    }

    body .product-modal-footer .btn-delete-mobile,
    body .quotes-modal-footer .btn-delete-mobile,
    body .product-modal-footer .btn-danger,
    body .quotes-modal-footer .btn-danger {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
    }

    body .product-modal-footer .btn-delete-mobile span,
    body .quotes-modal-footer .btn-delete-mobile span,
    body .product-modal-footer .btn-danger span,
    body .quotes-modal-footer .btn-danger span {
        display: none !important;
    }

    body .notification-dropdown.is-open {
        position: fixed !important;
        top: calc(var(--topbar-height, 64px) + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100dvh - var(--topbar-height, 64px) - 20px) !important;
    }
}


/* =========================================================
   P15 - Dashboard y territorio: scroll vertical autorizado e
   interiores de tarjetas con encabezados fijos
   ========================================================= */
#dashboard-main,
#customers-territory-main {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    -webkit-overflow-scrolling: touch !important;
}

#dashboard-main > .content,
#customers-territory-main > .content {
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    max-width: var(--container-max) !important;
    padding-bottom: calc(var(--space-8, 32px) + env(safe-area-inset-bottom)) !important;
}

#dashboard-main .card,
#customers-territory-main .territory-map-card,
#customers-territory-main .territory-breakdown-card,
#customers-territory-main .territory-table-card {
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#dashboard-main .card > .card-header,
#customers-territory-main .card > .card-header {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 3 !important;
    background: var(--surface-1, #fff) !important;
}

#dashboard-main .card > .card-body,
#customers-territory-main .card > .card-body {
    min-height: 0 !important;
    overflow: hidden !important;
}

#dashboard-main .table-wrap,
#dashboard-main .card-table-container > .table-responsive,
#customers-territory-main .territory-table-scroll,
#customers-territory-main .territory-chip-list,
#customers-territory-main .territory-metric-list {
    max-height: min(48vh, 460px) !important;
    max-height: min(48dvh, 460px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

#dashboard-main .table-wrap thead th,
#customers-territory-main .territory-table-scroll thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    background: var(--surface-2, #f8fafc) !important;
}

#dashboard-main .chart-wrap {
    height: min(46vh, 440px) !important;
    height: min(46dvh, 440px) !important;
    min-height: 280px !important;
    overflow: hidden !important;
}

#dashboard-main .chart-wrap canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

#customers-territory-main .territory-map-card {
    min-height: min(62vh, 620px) !important;
    min-height: min(62dvh, 620px) !important;
}

#customers-territory-main .territory-map-card .card-body,
#customers-territory-main .territory-map-canvas,
#customers-territory-main [data-map-canvas],
#customers-territory-main .gm-style {
    min-height: 360px !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior: contain !important;
}

#customers-territory-main .territory-map-canvas,
#customers-territory-main [data-map-canvas] {
    height: min(56vh, 560px) !important;
    height: min(56dvh, 560px) !important;
    overflow: hidden !important;
}

@media (max-width: 760px) {
    #dashboard-main .table-wrap,
    #dashboard-main .card-table-container > .table-responsive,
    #customers-territory-main .territory-table-scroll,
    #customers-territory-main .territory-chip-list,
    #customers-territory-main .territory-metric-list {
        max-height: 360px !important;
    }

    #dashboard-main .chart-wrap {
        height: 340px !important;
        min-height: 280px !important;
    }

    #customers-territory-main .territory-map-card {
        min-height: 420px !important;
    }

    #customers-territory-main .territory-map-canvas,
    #customers-territory-main [data-map-canvas] {
        height: 52vh !important;
        height: 52dvh !important;
        min-height: 360px !important;
        max-height: 560px !important;
    }
}
