/**
 * Portal UI Framework — components
 * Badges, buttons, toolbar, tables, hierarchy, pagination, tabs, sidebar accents
 */

/* ── Badges ─────────────────────────────────────────────────────────────── */

.portal-estado-badge {
    font-size: var(--portal-font-size-badge);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge.portal-estado-badge.bg-success {
    background-color: var(--portal-success-badge) !important;
    color: #fff;
}

.badge.portal-estado-badge.portal-badge-orange {
    background-color: var(--portal-accent);
    color: #fff;
}

.badge.portal-estado-badge.portal-badge-orange-soft {
    background-color: var(--portal-accent-soft);
    color: var(--portal-accent-dark);
    border: 1px solid var(--portal-accent-border-soft);
}

.portal-page-meta .portal-estado-badge {
    color: var(--bs-badge-color, #fff);
}

.portal-page-meta .portal-estado-badge.portal-badge-orange-soft {
    color: var(--portal-accent-dark);
}

/* Preview-compatible badge aliases */
.portal-badge-green,
.badge.portal-badge-green {
    background-color: var(--portal-success-badge);
    color: #fff;
}

.portal-badge-orange,
.badge.portal-badge-orange {
    background-color: var(--portal-accent);
    color: #fff;
}

.portal-badge-orange-soft,
.badge.portal-badge-orange-soft {
    background-color: var(--portal-accent-soft);
    color: var(--portal-accent-dark);
    border: 1px solid var(--portal-accent-border-soft);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.portal-btn-primary,
.btn.portal-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: var(--portal-radius);
    font-size: var(--portal-font-size-table);
    font-weight: 500;
    background: var(--portal-primary);
    border: 1px solid var(--portal-primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.portal-btn-primary:hover,
.btn.portal-btn-primary:hover {
    background: var(--portal-primary-dark);
    border-color: var(--portal-primary-dark);
    color: #fff;
}

.portal-btn-outline-orange,
.btn.portal-btn-outline-orange {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: var(--portal-radius);
    font-size: var(--portal-font-size-table);
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--portal-accent);
    color: var(--portal-accent);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.portal-btn-outline-orange:hover,
.btn.portal-btn-outline-orange:hover {
    background: var(--portal-accent);
    color: #fff;
    border-color: var(--portal-accent);
}

/* HTML Base app-btn-secondary → orange outline (Seguir, Exportar) */
.app-btn-secondary,
a.app-btn-secondary,
.btn-sm.app-btn-secondary {
    color: var(--portal-accent);
    border-color: var(--portal-accent);
    background: #fff;
}

.app-btn-secondary:hover,
.app-btn-secondary:active,
a.app-btn-secondary:hover,
a.app-btn-secondary:active,
.btn-sm.app-btn-secondary:hover,
.btn-sm.app-btn-secondary:active {
    color: #fff;
    background: var(--portal-accent);
    border-color: var(--portal-accent);
}

/* ── Accent left border (cards, meta, detail panels) ───────────────────── */

.portal-accent-border-left {
    border-left: 4px solid var(--portal-accent);
}

/* ── Quote / accent card ─────────────────────────────────────────────────── */

.portal-quote-card {
    background: var(--portal-white);
    border: 1px solid var(--portal-border);
    border-left: 4px solid var(--portal-accent);
    border-radius: var(--portal-radius);
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}

.portal-page-meta.portal-accent-border-left {
    padding-left: 0.85rem;
    margin-bottom: 0.25rem;
}

.portal-meta-back {
    background: none;
    border: none;
    padding: 0 0.35rem;
    color: var(--portal-primary);
    font-size: 0.875rem;
    cursor: pointer;
    line-height: 1;
}

.portal-quote-card p {
    margin: 0 0 0.5rem;
    color: var(--portal-text);
    line-height: 1.5;
}

.portal-quote-card .portal-quote-meta {
    font-size: var(--portal-font-size-table-child);
    color: var(--portal-text-light);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.portal-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    --portal-date-input-width: 8.125rem;
    --portal-date-btn-size: 2.375rem;
    --portal-date-btn-height: var(--portal-date-btn-size);
}

.portal-list-toolbar__dates,
.portal-list-toolbar__dates-form,
.portal-list-toolbar__date-actions {
    gap: 0.5rem;
}

.portal-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0.25rem;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--portal-text-muted);
    font-size: 1rem;
    line-height: 1;
    box-shadow: none;
    transition: color 0.15s ease;
    cursor: pointer;
}

.portal-icon-btn:hover,
.portal-icon-btn:focus,
.portal-icon-btn:active {
    background: transparent;
    color: var(--portal-primary);
    border-color: transparent;
    box-shadow: none;
}

.portal-icon-btn.portal-icon-btn-accent {
    color: var(--portal-primary);
}

.portal-icon-btn.portal-icon-btn-accent:hover {
    color: var(--portal-primary-dark);
}

/* Toolbar date inputs — match framework preview (130px, same height as action boxes) */
.portal-list-toolbar .input-group .form-control.picker[type="date"] {
    flex: 0 0 var(--portal-date-input-width);
    width: var(--portal-date-input-width);
    min-width: var(--portal-date-input-width);
    max-width: var(--portal-date-input-width);
    height: var(--portal-date-btn-height);
    padding: 0.45rem 0.65rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.portal-list-toolbar .input-group .form-control.picker[type="date"]:focus {
    z-index: 3;
}

/* Date filter action buttons + toolbar calendar addons — uniform orange boxes */
.portal-date-action-btn,
.portal-toolbar-action-btn,
.portal-list-toolbar .portal-date-addon-orange {
    --portal-date-btn-size: 2.375rem;
    --portal-date-btn-height: var(--portal-date-btn-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--portal-date-btn-size);
    min-width: var(--portal-date-btn-size);
    max-width: var(--portal-date-btn-size);
    height: var(--portal-date-btn-height);
    min-height: var(--portal-date-btn-height);
    padding: 0;
    border-radius: var(--portal-radius);
    color: #fff;
    line-height: 1;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.portal-date-action-btn,
.portal-list-toolbar .portal-date-addon-orange {
    background: var(--portal-accent);
    border: 1px solid var(--portal-accent);
}

.portal-date-action-btn {
    cursor: pointer;
}

.portal-date-action-btn.btn,
.portal-toolbar-action-btn.btn {
    padding: 0;
}

.portal-toolbar-action-btn {
    cursor: pointer;
    background: var(--portal-slate);
    border: 1px solid var(--portal-slate);
}

.portal-toolbar-action-btn:hover,
.portal-toolbar-action-btn:focus,
.portal-toolbar-action-btn:active {
    background: #636d80;
    border-color: #636d80;
    color: #fff;
    box-shadow: none;
}

.portal-list-toolbar .input-group .portal-date-addon-orange {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 0.875rem;
}

.portal-date-action-btn .fa-regular,
.portal-date-action-btn .fa-solid,
.portal-date-action-btn .svg-inline--fa,
.portal-toolbar-action-btn .fa-regular,
.portal-toolbar-action-btn .fa-solid,
.portal-toolbar-action-btn .svg-inline--fa,
.portal-list-toolbar .portal-date-addon-orange .fa-regular,
.portal-list-toolbar .portal-date-addon-orange .fa-solid,
.portal-list-toolbar .portal-date-addon-orange .svg-inline--fa {
    color: #fff;
    font-size: 0.875rem;
}

.portal-date-action-btn:hover,
.portal-date-action-btn:focus,
.portal-date-action-btn:active {
    background: var(--portal-accent-dark);
    border-color: var(--portal-accent-dark);
    color: #fff;
    box-shadow: none;
}

/* Calendar addon — orange accent (forms keep Bootstrap input-group padding) */
.portal-date-addon-orange {
    color: #fff;
    background: var(--portal-accent);
    border-color: var(--portal-accent);
}

.portal-date-addon-slate {
    background: var(--portal-slate);
    border-color: var(--portal-slate);
    color: #fff;
}

/* Search field */
#search-container .dataTables_filter,
.portal-list-toolbar #search-container .dataTables_filter {
    width: 100%;
    float: none;
    text-align: left;
}

#search-container .dataTables_filter label,
.portal-list-toolbar #search-container .dataTables_filter label,
.portal-list-toolbar #search-container .search-label,
#search-container .search-label {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 0;
    display: block;
}

#search-container .clean-input-wrap,
.portal-list-toolbar .clean-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

#search-container .clean-input-wrap .search-input,
#search-container .clean-input-wrap input[type="search"],
#search-container .dataTables_filter input[type="search"],
.portal-list-toolbar .clean-input-wrap .search-input,
.portal-list-toolbar #search-container .dataTables_filter input,
.portal-search-input {
    width: 100% !important;
    max-width: 100%;
    padding-left: 30px !important;
    padding-right: 30px !important;
    border-color: var(--portal-slate);
}

#search-container .clean-input-wrap .search-input:focus,
#search-container .dataTables_filter input[type="search"]:focus,
.portal-list-toolbar .clean-input-wrap .search-input:focus,
.portal-list-toolbar #search-container .dataTables_filter input:focus,
.portal-search-input:focus {
    border-color: var(--portal-slate);
    box-shadow: var(--portal-slate-focus-ring);
}

#search-container .clean-input-wrap .search-input:focus ~ .search-icon-left,
.portal-list-toolbar .clean-input-wrap .search-input:focus ~ .search-icon-left {
    color: var(--portal-slate);
}

#search-container .clean-input-wrap .search-icon-left,
.portal-list-toolbar .clean-input-wrap .search-icon-left {
    position: absolute !important;
    left: 10px !important;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    font-size: var(--portal-font-size-base);
    color: var(--portal-text-muted);
    transition: color 0.15s ease;
}

#search-container .clean-input-wrap .search-icon,
.portal-list-toolbar .clean-input-wrap .search-icon {
    position: absolute !important;
    top: 50%;
    right: 10px !important;
    transform: translateY(-50%);
    font-size: var(--portal-font-size-base);
    color: var(--portal-text-muted);
    cursor: pointer;
    z-index: 2;
}

#search-container .clean-input-wrap .search-icon:hover,
.portal-list-toolbar .clean-input-wrap .search-icon:hover {
    color: var(--portal-text);
}

/* ── Sidebar active (HTML Base app-sidepanel) ───────────────────────────── */

.app-sidepanel .app-nav .nav-link.active {
    color: var(--portal-primary);
    background: var(--portal-primary-light);
    border-left-color: var(--portal-primary);
}

.app-sidepanel .app-nav .nav-link.active .nav-icon {
    color: var(--portal-primary);
}

/* ── List table scroll + sticky header ────────────────────────────────────
   Wrap .table-responsive (or card body) in .portal-list-scroll; pagination /
   toolbar stay outside the scroll box. Sticky thead is scoped to the container. */

.portal-list-scroll {
    max-height: calc(100vh - 280px);
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.portal-list-scroll table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fcfcfc;
    box-shadow: 0 1px 0 var(--portal-border);
}

.portal-list-scroll table.dataTable thead th.sorting,
.portal-list-scroll table.dataTable thead th.sorting_asc,
.portal-list-scroll table.dataTable thead th.sorting_desc,
.portal-list-scroll table.dataTable thead th.sorting_asc_disabled,
.portal-list-scroll table.dataTable thead th.sorting_desc_disabled {
    background-color: #fcfcfc;
}

/* ── Table hierarchy (DataTables RowGroup) ──────────────────────────────────
   JS: class "collapsed" = expanded (children visible); default = shut */

.app-card-orders-table table.dataTable tr.dtrg-group.dtrg-level-0 {
    background-color: transparent !important;
}

.app-card-orders-table table.dataTable tr.dtrg-group.dtrg-level-0 td {
    font-size: var(--portal-font-size-table);
}

/* Collapsed group — white */
.app-card-orders-table table.dataTable tr.dtrg-group.dtrg-level-0:not(.collapsed) td {
    background-color: var(--portal-white) !important;
    color: var(--portal-text);
    font-weight: 400;
    border-color: var(--portal-border) !important;
    cursor: pointer;
    vertical-align: middle;
}

.app-card-orders-table table.dataTable tr.dtrg-group.dtrg-level-0:not(.collapsed) td:first-child {
    border-left: 3px solid transparent !important;
}

.app-card-orders-table table.dataTable tr.dtrg-group.dtrg-level-0:not(.collapsed):hover td {
    background-color: #fafbff !important;
}

/* Expanded group — green tint + left accent */
.app-card-orders-table table.dataTable tr.dtrg-group.dtrg-level-0.collapsed td {
    background-color: var(--portal-primary-tint) !important;
    border-color: var(--portal-primary-border-subtle) !important;
}

.app-card-orders-table table.dataTable tr.dtrg-group.dtrg-level-0.collapsed td:first-child {
    border-left: 3px solid var(--portal-primary-border-strong) !important;
}

.app-card-orders-table table.dataTable tr.dtrg-group.dtrg-level-0.collapsed:hover td {
    background-color: var(--portal-primary-tint-strong) !important;
}

.app-card-orders-table table.dataTable tr.dtrg-group.dtrg-level-0 td.portal-group-label {
    color: var(--portal-text);
    font-weight: 400;
}

/* Child rows — white bg + tree connector */
.app-card-orders-table table.dataTable tr.portal-group-expanded-child td,
.app-card-orders-table table.dataTable tr.portal-hierarchy-child td {
    background-color: var(--portal-white) !important;
    font-size: var(--portal-font-size-table-child);
    color: var(--portal-text-muted);
    border-color: var(--portal-border) !important;
}

.app-card-orders-table table.dataTable tr.portal-group-expanded-child:hover td,
.app-card-orders-table table.dataTable tr.portal-hierarchy-child:hover td {
    background-color: #fafbff !important;
}

/* Hierarchy rows — orange inset on hover (matches .portal-hierarchy-demo) */
.app-card-orders-table table.dataTable tbody tr.dtrg-group:hover td,
.app-card-orders-table table.dataTable tbody tr.portal-hierarchy-child:hover td,
.app-card-orders-table table.dataTable tbody tr.portal-group-expanded-child:hover td {
    box-shadow: inset 0 0 0 1px var(--portal-accent);
}

/* Expanded group only — orange left accent on hover (preview .row-expanded:hover) */
.app-card-orders-table table.dataTable tbody tr.dtrg-group.dtrg-level-0.collapsed:hover td:first-child {
    border-left-color: var(--portal-accent) !important;
}

/* Child row selection — orange inset + subtle tint */
.app-card-orders-table table.dataTable tbody tr.portal-hierarchy-child.portal-row-selected td,
.app-card-orders-table table.dataTable tbody tr.portal-group-expanded-child.portal-row-selected td {
    background-color: var(--portal-accent-soft) !important;
    box-shadow: inset 0 0 0 1px var(--portal-accent);
}

.app-card-orders-table table.dataTable tbody tr.portal-hierarchy-child,
.app-card-orders-table table.dataTable tbody tr.portal-group-expanded-child {
    cursor: pointer;
}

.portal-tree-connector {
    display: inline-block;
    flex-shrink: 0;
    color: #b8bec8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: var(--portal-font-size-table-child);
    line-height: 1;
    margin-right: 0.35rem;
    user-select: none;
    vertical-align: middle;
}

.portal-hierarchy-item-cell {
    padding-left: 0.5rem;
}

.portal-hierarchy-item-label {
    color: var(--portal-text-muted);
}

.portal-cell-empty {
    color: var(--portal-text-light);
}

/* Chevron circle */
.app-card-orders-table .arrow-cell {
    width: 2.25rem;
    text-align: center;
    vertical-align: middle;
}

.app-card-orders-table .arrow-cell::after {
    content: none;
}

.app-card-orders-table .arrow-cell .portal-group-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--portal-white);
    color: var(--portal-primary-dark);
    border: 1px solid var(--portal-primary-border-medium);
    font-size: var(--portal-font-size-table-child);
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.app-card-orders-table .arrow-cell .portal-group-chevron i {
    font-size: 0.7rem;
    line-height: 1;
}

.app-card-orders-table tr.dtrg-group.collapsed .arrow-cell .portal-group-chevron {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(var(--portal-primary-rgb), 0.3);
    color: var(--portal-primary);
}

/* ── Pagination (DataTables + Bootstrap) ─────────────────────────────────── */

.dataTables_paginate.portal-dt-pagination,
.portal-list-datatable-footer .dataTables_paginate {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    border-radius: var(--portal-radius);
}

.dataTables_paginate.portal-dt-pagination .paginate_button,
.portal-list-datatable-footer .dataTables_paginate .paginate_button,
.app-pagination .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 -1px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--portal-border-bs);
    background-color: var(--portal-white);
    color: var(--portal-text-muted) !important;
    font-size: var(--portal-font-size-table);
    cursor: pointer;
}

.dataTables_paginate.portal-dt-pagination .paginate_button.previous {
    margin-left: 0;
    border-top-left-radius: var(--portal-radius);
    border-bottom-left-radius: var(--portal-radius);
}

.dataTables_paginate.portal-dt-pagination .paginate_button.next {
    border-top-right-radius: var(--portal-radius);
    border-bottom-right-radius: var(--portal-radius);
}

.dataTables_paginate.portal-dt-pagination .paginate_button.current,
.dataTables_paginate.portal-dt-pagination .paginate_button.current:hover,
.app-pagination .dataTables_paginate .paginate_button.current {
    z-index: 2;
    background-color: var(--portal-slate) !important;
    color: #fff !important;
    border-color: var(--portal-slate) !important;
}

.app-pagination .pagination .page-item.active .page-link {
    background: var(--portal-slate);
    color: #fff;
    border-color: var(--portal-slate);
}

.dataTables_paginate.portal-dt-pagination .paginate_button.disabled {
    background-color: #f8f9fa !important;
    color: var(--portal-text-light) !important;
    cursor: default;
    pointer-events: none;
}

.portal-list-datatable-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.portal-list-datatable-footer .dataTables_info {
    text-align: center;
    font-size: calc(1rem - 2px);
    color: var(--portal-text-muted);
}

/* ── List loading state (Portal L2 / Campanhas) ─────────────────────────── */

.portal-list-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 12rem;
    padding: 2.5rem 1.5rem;
    color: var(--portal-text-muted);
    font-size: var(--portal-font-size-table);
}

.portal-list-loading .fa-spinner {
    font-size: 1.75rem;
    color: var(--portal-primary);
}

.portal-list-loading.is-error .fa-spinner {
    display: none;
}

.portal-list-loading.is-error {
    color: var(--bs-danger, #dc3545);
}

.portal-detail-loading {
    min-height: 8rem;
}

/* ── Static hierarchy demo (preview / docs without DataTables) ──────────── */

.portal-hierarchy-demo tr.row-collapsed td {
    background: var(--portal-white);
    font-size: var(--portal-font-size-table);
    font-weight: 400;
    border-color: var(--portal-border);
    vertical-align: middle;
}

.portal-hierarchy-demo tr.row-collapsed:hover td {
    background: #fafbff;
}

.portal-hierarchy-demo tr.row-expanded td {
    background: var(--portal-primary-tint) !important;
    border-color: var(--portal-primary-border-subtle) !important;
}

.portal-hierarchy-demo tr.row-expanded td:first-child {
    border-left: 3px solid var(--portal-primary-border-strong);
}

.portal-hierarchy-demo tr.row-child td {
    background: var(--portal-white) !important;
    font-size: var(--portal-font-size-table-child);
    color: var(--portal-text-muted);
    border-color: var(--portal-border);
}

.portal-hierarchy-demo tr.row-child:hover td {
    background: #fafbff !important;
}

.portal-hierarchy-demo tr.row-collapsed:hover td,
.portal-hierarchy-demo tr.row-expanded:hover td,
.portal-hierarchy-demo tr.row-child:hover td {
    box-shadow: inset 0 0 0 1px var(--portal-accent);
}

.portal-hierarchy-demo tr.row-expanded:hover td:first-child {
    border-left-color: var(--portal-accent);
}

.portal-hierarchy-demo .chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(var(--portal-primary-rgb), 0.3);
    color: var(--portal-primary);
    font-size: 0.7rem;
    margin-right: 0.35rem;
}

.portal-hierarchy-demo tr.row-collapsed .chevron {
    background: var(--portal-white);
    color: var(--portal-primary-dark);
    border-color: var(--portal-primary-border-medium);
}

.portal-hierarchy-demo tr.row-expanded td.portal-group-label,
.portal-hierarchy-demo tr.row-collapsed td.portal-group-label {
    color: var(--portal-text);
    font-weight: 400;
}

.portal-hierarchy-demo tr.row-expanded .arrow-cell .portal-group-chevron {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(var(--portal-primary-rgb), 0.3);
    color: var(--portal-primary);
}

.portal-hierarchy-demo .header-icon {
    width: 2.25rem;
}

/* Preview pagination demo buttons */
.portal-pagination-demo .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--portal-border-bs);
    margin-left: -1px;
    background: var(--portal-white);
    color: var(--portal-text-muted);
    font-size: var(--portal-font-size-table);
}

.portal-pagination-demo .page-btn.active-orange {
    background: var(--portal-accent);
    border-color: var(--portal-accent);
    color: #fff;
    z-index: 1;
}

.portal-pagination-demo .page-btn.active-slate {
    background: var(--portal-slate);
    border-color: var(--portal-slate);
    color: #fff;
    z-index: 1;
}

.portal-pagination-demo .page-btn.disabled {
    background: #f8f9fa;
    color: var(--portal-text-light);
}

/* ── Forms (FileMaker / portal fields) ───────────────────────────────────── */

.portal-form-group {
    margin-bottom: 1rem;
}

.portal-form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--portal-font-size-table);
    font-weight: 600;
    color: var(--portal-text);
}

.portal-form-label .portal-form-required {
    color: var(--portal-accent);
    margin-left: 0.15rem;
}

.portal-form-help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--portal-text-light);
    line-height: 1.4;
}

.portal-form-control,
.portal-form-control.form-control,
select.portal-valuelist,
select.portal-valuelist.form-select,
textarea.portal-form-control {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    font-family: var(--portal-font-sans);
    font-size: var(--portal-font-size-table);
    font-weight: 400;
    line-height: 1.5;
    color: var(--portal-text);
    background-color: var(--portal-white);
    border: 1px solid var(--portal-border-bs);
    border-radius: var(--portal-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.portal-form-control:focus,
select.portal-valuelist:focus,
textarea.portal-form-control:focus {
    outline: 0;
    border-color: var(--portal-primary);
    box-shadow: var(--portal-primary-focus-ring);
}

.portal-form-control::placeholder {
    color: var(--portal-text-light);
    opacity: 1;
}

.portal-form-control.is-invalid,
.portal-form-control.portal-form-control-invalid {
    border-color: #dc3545;
}

.portal-form-control.is-invalid:focus,
.portal-form-control.portal-form-control-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
}

.portal-form-feedback {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: #dc3545;
}

.portal-form-control:disabled,
.portal-form-control[readonly],
.portal-form-readonly {
    background-color: #f0f2f5;
    color: var(--portal-text-muted);
    cursor: default;
    opacity: 1;
}

.portal-form-lookup {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.portal-form-lookup .portal-form-control {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.portal-form-lookup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 0.85rem;
    border: 1px solid var(--portal-primary);
    border-radius: 0 var(--portal-radius) var(--portal-radius) 0;
    background: var(--portal-primary);
    color: #fff;
    font-size: var(--portal-font-size-table);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.portal-form-lookup-btn:hover {
    background: var(--portal-primary-dark);
    border-color: var(--portal-primary-dark);
    color: #fff;
}

.portal-form-lookup-display {
    display: block;
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    font-size: var(--portal-font-size-table-child);
    color: var(--portal-text-muted);
    background: #f8f9fb;
    border: 1px dashed var(--portal-border);
    border-radius: var(--portal-radius);
}

.portal-valuelist,
select.portal-valuelist {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235d6778' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 14px 10px;
    padding-right: 2rem;
}

.portal-valuelist option[disabled] {
    color: var(--portal-text-light);
}

.portal-radio-group,
.portal-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.portal-radio-group.portal-radio-inline,
.portal-checkbox-group.portal-checkbox-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
}

.portal-radio,
.portal-checkbox {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.25rem;
    margin: 0;
    font-size: var(--portal-font-size-table);
    color: var(--portal-text-muted);
    cursor: pointer;
}

.portal-radio .form-check-input,
.portal-checkbox .form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex-shrink: 0;
    border-color: var(--portal-border-bs);
    cursor: pointer;
}

.portal-radio .form-check-input:focus,
.portal-checkbox .form-check-input:focus {
    border-color: var(--portal-primary);
    box-shadow: var(--portal-primary-focus-ring);
}

.portal-radio .form-check-input:checked,
.portal-checkbox .form-check-input:checked {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.portal-checkbox-accent .form-check-input:checked {
    background-color: var(--portal-accent);
    border-color: var(--portal-accent);
}

.portal-checkbox-accent .form-check-input:focus {
    border-color: var(--portal-accent);
    box-shadow: var(--portal-accent-focus-ring);
}

.portal-form-switch {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 1.5rem;
    margin: 0;
    font-size: var(--portal-font-size-table);
    color: var(--portal-text-muted);
    cursor: pointer;
}

.portal-form-switch .form-check-input {
    width: 2.25rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
    border-color: var(--portal-border-bs);
}

.portal-form-switch .form-check-input:focus {
    border-color: var(--portal-primary);
    box-shadow: var(--portal-primary-focus-ring);
}

.portal-form-switch .form-check-input:checked {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.portal-form-date.input-group .portal-form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.portal-form-date .input-group-text.portal-date-addon-orange {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.portal-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem 1.25rem;
}

.portal-form-grid .portal-form-group--full {
    grid-column: 1 / -1;
}

/* Icon library preview grid */
.portal-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.65rem;
}

.portal-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    background: var(--portal-white);
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.portal-icon-item:hover {
    border-color: var(--portal-primary);
    background: var(--portal-primary-light);
}

.portal-icon-item i {
    font-size: 1.25rem;
    color: var(--portal-primary);
}

.portal-icon-item code {
    font-size: 0.6875rem;
    color: var(--portal-text-light);
    word-break: break-all;
    line-height: 1.3;
}