/* Portal L2 — project-specific layout and overlays
 * Reusable theme tokens, typography, and components: portal-ui-framework/css/
 * Loaded via sk-includes/partials/portal-theme-head.php */

/* ── App shell / sidebar layout ─────────────────────────────────────────── */

@media (min-width: 1200px) {
    body.app-with-sidebar .app-wrapper {
        margin-left: 250px;
    }

    body.app-with-sidebar .app-sidepanel {
        left: 0 !important;
    }
}

body.app-with-sidebar .app-wrapper {
    transition: margin-left 0.4s ease-in-out;
}

body.app-with-sidebar .app-nav-main {
    padding-top: 0;
}

.app-sidepanel .app-branding {
    height: 60px;
    padding-top: 1rem;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

.app-header-content > .row {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.portal-main-topbar-slot {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 0%;
    width: auto;
    max-width: 100%;
}

.app-header .app-utilities {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.app-with-sidebar .portal-main-topbar-slot {
        padding-left: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body.app-with-sidebar .portal-main-topbar-slot {
        padding-left: 1rem;
    }
}

@media (min-width: 1200px) {
    body.app-with-sidebar .app-header-inner > .container-fluid {
        padding-left: calc(250px + 1.5rem + var(--bs-gutter-x, 1.5rem) * 0.5);
    }

    body.app-with-sidebar .portal-main-topbar-slot {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

.portal-client-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sidepanel-toggler {
    color: var(--portal-text);
    line-height: 1;
}

.sidepanel-toggler:hover {
    color: var(--portal-green);
}

/* ── Module nav / role badges ───────────────────────────────────────────── */

.portal-module-nav {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--portal-radius-pill);
}

.portal-module-link {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: var(--portal-radius-pill);
    color: var(--portal-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.portal-module-link:hover {
    color: var(--portal-text);
    background: rgba(21, 163, 98, 0.08);
}

.portal-module-link.active {
    background: var(--portal-green);
    color: #fff;
}

.portal-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: var(--portal-radius-pill);
    font-size: var(--portal-font-size-badge);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.portal-role-admin {
    background: rgba(21, 163, 98, 0.12);
    color: var(--portal-green-dark);
    border: 1px solid rgba(21, 163, 98, 0.25);
}

.portal-role-user {
    background: rgba(93, 103, 120, 0.08);
    color: var(--portal-text-muted);
    border: 1px solid rgba(93, 103, 120, 0.15);
}

/* ── Page hero / toolbar layout ─────────────────────────────────────────── */

.portal-page-subtitle {
    font-size: 0.95rem;
    font-weight: 500;
}

.portal-page-meta-name,
.portal-page-meta-orcamento {
    color: var(--portal-text);
}

.portal-page-meta-sep {
    font-weight: 400;
    user-select: none;
    color: var(--portal-text);
}

.portal-page-hero__toolbar {
    flex: 0 1 auto;
    max-width: 100%;
}

.page-utilities {
    width: auto;
    max-width: 100%;
    margin-left: auto;
}

.page-utilities .portal-list-toolbar {
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.page-utilities .portal-list-toolbar .search-orders {
    flex: 0 1 280px;
    max-width: 320px;
    min-width: 200px;
    width: auto;
}

.page-utilities .portal-list-toolbar #search-container {
    width: 100%;
    max-width: 320px;
    min-width: 0;
}

.page-utilities .search-campanhas {
    width: 100% !important;
    max-width: 100%;
}

.portal-page-hero-toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    justify-content: flex-start;
    --portal-date-btn-size: 2.375rem;
    --portal-date-btn-height: var(--portal-date-btn-size);
}

.portal-page-hero-toolbar-row .hierarchy-toggle-group {
    flex-shrink: 0;
    margin-left: auto;
}

.portal-page-hero-toolbar-row .portal-list-toolbar {
    flex: 0 1 auto;
    width: auto;
}

.portal-page-hero-toolbar-row .portal-list-toolbar .search-orders {
    flex: 0 1 280px;
    max-width: 320px;
    min-width: 200px;
    width: auto;
}

.portal-page-hero-toolbar-row .portal-list-toolbar #search-container {
    width: 100%;
    max-width: 320px;
    min-width: 0;
}

.portal-list-toolbar__dates,
.portal-list-toolbar__dates-form,
.portal-list-toolbar__date-actions,
.hierarchy-toggle-group {
    flex-shrink: 0;
    gap: 0.5rem;
}

.portal-list-toolbar__dates .input-group {
    width: auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* ── Portal detail overlay ─────────────────────────────────────────────── */

#portal-table tbody tr.portal-row-detail {
    cursor: pointer;
}

#portal-table tbody tr.portal-row-detail:hover,
.portal-row-detail:hover {
    background-color: rgba(21, 163, 98, 0.06) !important;
}

body.portal-detail-open,
body.campanhas-detail-open {
    overflow: hidden;
}

.portal-detail-overlay,
.campanhas-detail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.55);
    padding: 1rem;
    align-items: center;
    justify-content: center;
}

.portal-detail-overlay.is-open,
.campanhas-detail-overlay.is-open {
    display: flex;
}

.portal-detail-panel,
.campanhas-detail-panel {
    width: min(1100px, 100%);
    max-height: calc(100vh - 2rem);
    background: var(--portal-bg);
    border-radius: 0.75rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.portal-detail-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem 0;
}

.campanhas-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--portal-white);
    border-bottom: 1px solid var(--portal-border);
}

.portal-detail-close,
.campanhas-detail-close {
    border: 0;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--portal-text-muted);
    cursor: pointer;
    padding: 0 0.25rem;
}

.portal-detail-close:hover,
.campanhas-detail-close:hover {
    color: var(--portal-text);
}

.portal-detail-body {
    padding: 0 1.25rem 1.25rem;
    overflow: auto;
}

.campanhas-detail-body {
    padding: 1.25rem;
    overflow: auto;
}

.campanhas-detail-title {
    font-size: 1.5rem;
}

.portal-detail-summary,
.portal-user-context {
    border-left: 4px solid var(--portal-orange);
    padding-left: 1rem;
}

.portal-detail-summary {
    background: transparent;
    box-shadow: none;
    margin-bottom: 1rem;
}

.portal-user-context {
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: #f8f9fa;
    border: 1px solid var(--portal-border);
}

.portal-detail-summary .item-label {
    font-size: var(--portal-font-size-table-child);
    color: var(--portal-text-light);
    margin-bottom: 0.15rem;
}

.portal-detail-summary .item-data {
    color: var(--portal-text);
}

.portal-detail-linhas-wrap.portal-list-scroll {
    max-height: 22rem;
}

#portal-detail-linhas-card .dataTables_wrapper {
    padding: 0;
}

.portal-access-denied-icon {
    font-size: 2.5rem;
    color: var(--portal-green);
}

/* ── DataTables footer (project wrapper placement) ──────────────────────── */

.portal-list-datatable-footer,
.app-card-orders-table .dataTables_wrapper {
    background: transparent;
}

.portal-list-datatable-footer {
    margin-bottom: 1.5rem;
    padding: 0;
}

.portal-list-datatable-footer .dataTables_paginate,
.app-card-orders-table .dataTables_wrapper .dataTables_paginate,
.app-pagination .dataTables_paginate {
    float: none;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-family: inherit;
}

.dataTables_paginate.portal-dt-pagination > span,
.portal-list-datatable-footer .dataTables_paginate > span {
    display: contents;
}

.dataTables_paginate.portal-dt-pagination .paginate_button:hover:not(.current):not(.disabled),
.app-pagination .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    z-index: 2;
    background-color: #e9ecef !important;
    color: var(--portal-text-muted) !important;
    border-color: var(--portal-border-bs) !important;
}

/* Active page — slate (framework token); do not revert to orange */
.dataTables_paginate.portal-dt-pagination .paginate_button.current,
.dataTables_paginate.portal-dt-pagination .paginate_button.current:hover,
.app-pagination .dataTables_paginate .paginate_button.current,
.app-pagination .pagination .page-item.active .page-link {
    background-color: var(--portal-slate) !important;
    border-color: var(--portal-slate) !important;
    color: #fff !important;
}

.app-card-orders-table .header-icon {
    width: 2.25rem;
}

/* Campanha detail table — compact cols; Peça takes remaining space */
#tabela-dados.portal-campanha-items-table {
    table-layout: fixed;
    width: 100% !important;
}

#tabela-dados.portal-campanha-items-table th,
#tabela-dados.portal-campanha-items-table td {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

#tabela-dados.portal-campanha-items-table th.portal-col-icon,
#tabela-dados.portal-campanha-items-table td:first-child {
    width: 2rem !important;
    min-width: 2rem;
    max-width: 2rem;
    padding-left: 0.25rem;
    padding-right: 0.15rem;
}

#tabela-dados.portal-campanha-items-table th.portal-col-local {
    width: calc(14% + 20px);
    max-width: calc(13rem + 20px);
    min-width: calc(13rem + 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Linha de loja (grupo): Peça só aparece nas filhas — Local pode usar toda a largura até Estado */
#tabela-dados.portal-campanha-items-table tr.dtrg-group td.portal-group-label {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    padding-left: 0.2rem;
    padding-right: 0.75rem;
}

#tabela-dados.portal-campanha-items-table .arrow-cell {
    width: 2rem !important;
    padding-right: 0 !important;
}

#tabela-dados.portal-campanha-items-table tbody tr.portal-hierarchy-child td.hide-text,
#tabela-dados.portal-campanha-items-table tbody tr.portal-group-expanded-child td.hide-text {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border-left: none !important;
    border-right: none !important;
    overflow: hidden;
}

#tabela-dados.portal-campanha-items-table .portal-col-peca {
    width: auto;
    min-width: 6rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#tabela-dados.portal-campanha-items-table .portal-hierarchy-item-cell {
    padding-left: 0.35rem;
}

#tabela-dados.portal-campanha-items-table .portal-col-qtd {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    max-width: 3rem !important;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
    white-space: nowrap;
}

#tabela-dados.portal-campanha-items-table .portal-col-dim {
    width: 7%;
    max-width: 5rem;
}

#tabela-dados.portal-campanha-items-table .portal-col-materia {
    width: 13%;
    max-width: 9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tabela-dados.portal-campanha-items-table .portal-col-data {
    width: 4.75rem !important;
    min-width: 4.75rem !important;
    max-width: 5rem !important;
    white-space: nowrap;
}

#tabela-dados.portal-campanha-items-table .portal-col-estado {
    width: calc(5.5rem + 10px) !important;
    min-width: calc(5.5rem + 10px) !important;
    max-width: calc(6rem + 10px) !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}

#tabela-dados.portal-campanha-items-table .portal-col-estado .portal-estado-badge {
    font-size: 0.65rem;
    padding: 0.2em 0.35em;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .portal-role-badge {
        display: none;
    }

    .portal-detail-body,
    .campanhas-detail-body {
        padding: 1rem;
    }

    .portal-detail-header {
        padding: 0.375rem 0.5rem 0;
    }
}

/* ── Sidebar recolhido (desktop) ─────────────────────────────────────────── */
@media (min-width: 1200px) {
    body.app-with-sidebar.sidepanel-collapsed .app-wrapper { margin-left: 68px; }
    body.app-with-sidebar.sidepanel-collapsed .app-sidepanel .sidepanel-inner { width: 68px; overflow-x: hidden; }
    /* Header: alinhar toggle+nome do cliente com o início da listagem quando recolhido */
    body.app-with-sidebar.sidepanel-collapsed .app-header-inner > .container-fluid {
        padding-left: calc(68px + 1.5rem + var(--bs-gutter-x, 1.5rem) * 0.5);
    }
    /* Esconder apenas os textos/rodapé — ícones e logo mantêm-se */
    body.sidepanel-collapsed .app-sidepanel .logo-text,
    body.sidepanel-collapsed .app-sidepanel .nav-link-text { display: none; }
    body.sidepanel-collapsed .app-sidepanel-footer { display: none; }
    /* Título + ícones alinhados à ESQUERDA, no mesmo trajeto do estado expandido (não centrar, não mexer no padding) */
    body.sidepanel-collapsed .app-sidepanel .app-branding,
    body.sidepanel-collapsed .app-sidepanel .app-logo,
    body.sidepanel-collapsed .app-sidepanel .nav-link { justify-content: flex-start; white-space: nowrap; }
}