/* ===== portal ui.css — buttons, titles, breadcrumbs, soft/square actions ===== */
/* Load after shell.css */

/* Light surface — nested panels (tokenised; prefer over border boxes) */
.bg-light {
    background-color: var(--portal-soft-bg) !important;
}

.comn-title {
    font-size: 20px;
    line-height: 22px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--portal-body-color);
    margin-bottom: 15px;
}

.breadcrumb {
    margin-top: -5px;
    font-size: 13px;
    color: var(--portal-muted);
}

.breadcrumb a,
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--portal-muted);
    text-transform: capitalize;
}

.table-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
}

/* Consistent top margin for form action button rows */
.portal-form-actions {
    margin-top: 1.5rem;
}

/*
 * Portal Bootstrap buttons — brand via tokens (no btn-blue / btn-red / btn-block).
 *
 * Contract: btn + semantic variant + optional size/shape/width
 *   sizes:  (default / md) | btn-sm | btn-lg
 *   shape:  btn-square (icon-only)
 *   width:  btn-wide | w-100
 *
 * Context selectors may layout buttons (flex/gap/align) but must NOT
 * override width, height, padding, font-size, or icon size.
 */

/* Size tiers — Bootstrap 5.3 custom properties (app + auth) */
body.portal-app .btn,
body.portal-auth .btn {
    --bs-btn-padding-y: var(--portal-btn-pad-y-md);
    --bs-btn-padding-x: var(--portal-btn-pad-x-md);
    --bs-btn-font-size: var(--portal-btn-font-md);
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.4;
    min-height: var(--portal-btn-height-md);
}

body.portal-app .btn i,
body.portal-auth .btn i {
    font-size: var(--portal-btn-icon-md);
}

body.portal-app .btn-sm,
body.portal-auth .btn-sm {
    --bs-btn-padding-y: var(--portal-btn-pad-y-sm);
    --bs-btn-padding-x: var(--portal-btn-pad-x-sm);
    --bs-btn-font-size: var(--portal-btn-font-sm);
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.2;
    min-height: var(--portal-btn-height-sm);
}

body.portal-app .btn-sm i,
body.portal-auth .btn-sm i {
    font-size: var(--portal-btn-icon-sm);
}

body.portal-app .btn-lg,
body.portal-auth .btn-lg {
    --bs-btn-padding-y: var(--portal-btn-pad-y-lg);
    --bs-btn-padding-x: var(--portal-btn-pad-x-lg);
    --bs-btn-font-size: var(--portal-btn-font-lg);
    --bs-btn-font-weight: 600;
    min-height: var(--portal-btn-height-lg);
}

body.portal-app .btn-lg i,
body.portal-auth .btn-lg i {
    font-size: var(--portal-btn-icon-lg);
}

/* Semantic solids */
body.portal-app .btn-primary {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-primary:hover,
body.portal-app .btn-primary:focus {
    background-color: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-secondary {
    background-color: var(--portal-muted);
    border-color: var(--portal-muted);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-secondary:hover,
body.portal-app .btn-secondary:focus {
    background-color: color-mix(in srgb, var(--portal-muted) 85%, black);
    border-color: color-mix(in srgb, var(--portal-muted) 85%, black);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-success {
    background-color: var(--portal-success);
    border-color: var(--portal-success);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-success:hover,
body.portal-app .btn-success:focus {
    background-color: color-mix(in srgb, var(--portal-success) 85%, black);
    border-color: color-mix(in srgb, var(--portal-success) 85%, black);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-info {
    background-color: var(--portal-info);
    border-color: var(--portal-info);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-info:hover,
body.portal-app .btn-info:focus {
    background-color: color-mix(in srgb, var(--portal-info) 85%, black);
    border-color: color-mix(in srgb, var(--portal-info) 85%, black);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-warning {
    background-color: var(--portal-warning);
    border-color: var(--portal-warning);
    color: #212529;
}

body.portal-app .btn-warning:hover,
body.portal-app .btn-warning:focus {
    background-color: color-mix(in srgb, var(--portal-warning) 85%, black);
    border-color: color-mix(in srgb, var(--portal-warning) 85%, black);
    color: #212529;
}

body.portal-app .btn-danger {
    background-color: var(--portal-danger);
    border-color: var(--portal-danger);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-danger:hover,
body.portal-app .btn-danger:focus {
    background-color: var(--portal-danger-hover);
    border-color: var(--portal-danger-hover);
    color: var(--portal-text-on-brand);
}

/* Outlines */
body.portal-app .btn-outline-primary {
    color: var(--portal-primary);
    border-color: var(--portal-primary);
    background-color: transparent;
}

body.portal-app .btn-outline-primary:hover,
body.portal-app .btn-outline-primary:focus {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn-outline-secondary {
    color: var(--portal-muted);
    border-color: var(--portal-muted);
    background-color: transparent;
}

body.portal-app .btn-outline-secondary:hover,
body.portal-app .btn-outline-secondary:focus {
    background-color: var(--portal-muted);
    border-color: var(--portal-muted);
    color: var(--portal-text-on-brand);
}

body.portal-app .btn:focus-visible {
    outline: 2px solid var(--portal-primary);
    outline-offset: 2px;
}

/* Soft (light) buttons — listing / quiet action chips */
body.portal-app .btn-light-primary {
    background-color: var(--portal-primary-light);
    color: var(--portal-primary);
    border-color: transparent;
}

body.portal-app .btn-light-primary:hover,
body.portal-app .btn-light-primary:focus,
body.portal-app .btn-light-primary:active,
body.portal-app .btn-light-primary.active {
    background-color: var(--portal-primary);
    color: var(--portal-text-on-brand);
    border-color: var(--portal-primary);
}

body.portal-app .btn-light-secondary {
    background-color: rgba(108, 117, 125, 0.12);
    color: var(--portal-muted);
    border-color: transparent;
}

body.portal-app .btn-light-secondary:hover,
body.portal-app .btn-light-secondary:focus,
body.portal-app .btn-light-secondary:active,
body.portal-app .btn-light-secondary.active {
    background-color: var(--portal-muted);
    color: var(--portal-text-on-brand);
    border-color: var(--portal-muted);
}

body.portal-app .btn-light-success {
    background-color: var(--portal-success-light);
    color: var(--portal-success);
    border-color: transparent;
}

body.portal-app .btn-light-success:hover,
body.portal-app .btn-light-success:focus,
body.portal-app .btn-light-success:active,
body.portal-app .btn-light-success.active {
    background-color: var(--portal-success);
    color: var(--portal-text-on-brand);
    border-color: var(--portal-success);
}

body.portal-app .btn-light-info {
    background-color: rgba(var(--portal-info-rgb), 0.12);
    color: var(--portal-info);
    border-color: transparent;
}

body.portal-app .btn-light-info:hover,
body.portal-app .btn-light-info:focus,
body.portal-app .btn-light-info:active,
body.portal-app .btn-light-info.active {
    background-color: var(--portal-info);
    color: var(--portal-text-on-brand);
    border-color: var(--portal-info);
}

body.portal-app .btn-light-warning {
    background-color: rgba(var(--portal-warning-rgb), 0.12);
    color: var(--portal-warning);
    border-color: transparent;
}

body.portal-app .btn-light-warning:hover,
body.portal-app .btn-light-warning:focus,
body.portal-app .btn-light-warning:active,
body.portal-app .btn-light-warning.active {
    background-color: var(--portal-warning);
    color: var(--portal-text-on-brand);
    border-color: var(--portal-warning);
}

body.portal-app .btn-light-danger {
    background-color: var(--portal-danger-light);
    color: var(--portal-danger);
    border-color: transparent;
}

body.portal-app .btn-light-danger:hover,
body.portal-app .btn-light-danger:focus,
body.portal-app .btn-light-danger:active,
body.portal-app .btn-light-danger.active {
    background-color: var(--portal-danger);
    color: var(--portal-text-on-brand);
    border-color: var(--portal-danger);
}

body.portal-app .btn-light-primary.disabled,
body.portal-app .btn-light-primary:disabled {
    background-color: var(--portal-soft-bg);
    color: var(--portal-muted);
    border-color: transparent;
    opacity: 1;
    pointer-events: none;
}

body.portal-app .btn-light-primary.disabled:hover,
body.portal-app .btn-light-primary:disabled:hover {
    background-color: var(--portal-soft-bg);
    color: var(--portal-muted);
}

/* Square icon-only — matches size-tier heights */
body.portal-app .btn.btn-square,
body.portal-auth .btn.btn-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--portal-btn-height-md);
    height: var(--portal-btn-height-md);
    min-width: var(--portal-btn-height-md);
    padding: 0;
    gap: 0;
    flex-shrink: 0;
    line-height: 1;
}

body.portal-app .btn.btn-square > i,
body.portal-auth .btn.btn-square > i {
    font-size: var(--portal-btn-icon-md);
    line-height: 1;
    margin: 0;
}

/* Duotone: match FA / admin content defaults on soft/muted surfaces */
body.portal-app [class*="btn-light-"] > .fa-duotone,
body.portal-app [class*="btn-light-"] > .fad {
    --fa-secondary-opacity: 0.4;
}

body.portal-app .text-muted.fa-duotone,
body.portal-app .text-muted > .fa-duotone,
body.portal-app .text-muted.fad,
body.portal-app .text-muted > .fad {
    --fa-secondary-opacity: 0.4;
}

body.portal-app .btn.btn-square.btn-sm,
body.portal-auth .btn.btn-square.btn-sm {
    width: var(--portal-btn-height-sm);
    height: var(--portal-btn-height-sm);
    min-width: var(--portal-btn-height-sm);
}

body.portal-app .btn.btn-square.btn-sm > i,
body.portal-auth .btn.btn-square.btn-sm > i {
    font-size: var(--portal-btn-icon-sm);
}

body.portal-app .btn.btn-square.btn-lg,
body.portal-auth .btn.btn-square.btn-lg {
    width: var(--portal-btn-height-lg);
    height: var(--portal-btn-height-lg);
    min-width: var(--portal-btn-height-lg);
}

body.portal-app .btn.btn-square.btn-lg > i,
body.portal-auth .btn.btn-square.btn-lg > i {
    font-size: var(--portal-btn-icon-lg);
}

/* DataTables toolbar controls — match length/search input chrome */
body.portal-app .portal-dt-toolbar-control {
    background-color: var(--portal-card-bg);
    border: 1px solid var(--portal-border);
    color: var(--portal-body-color);
    border-radius: var(--portal-float-radius, 0.375rem);
    box-shadow: none;
}

body.portal-app .portal-dt-toolbar-control:hover,
body.portal-app .portal-dt-toolbar-control:focus,
body.portal-app .portal-dt-toolbar-control:active,
body.portal-app .portal-dt-toolbar-control.show {
    background-color: var(--portal-card-bg);
    border-color: var(--portal-focus);
    color: var(--portal-body-color);
    box-shadow: none;
}

.breadcrumb a:hover {
    color: var(--portal-primary);
}

table th,
table td {
    vertical-align: middle;
}

/*
 * Stripe even rows so the first body row stays light under dark headers.
 * DataTables also paints odd rows via box-shadow — clear that and flip it.
 */
body.portal-app .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: var(--bs-table-color);
    --bs-table-bg-type: transparent;
}

body.portal-app .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

body.portal-app
    table.table.dataTable.table-striped
    > tbody
    > tr:nth-of-type(odd)
    > * {
    box-shadow: none;
}

body.portal-app
    table.table.dataTable.table-striped
    > tbody
    > tr:nth-of-type(even)
    > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05);
}

body.portal-app
    table.table.dataTable.table-striped
    > tbody
    > tr:nth-of-type(even).selected
    > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95);
}

.status-active {
    background-color: #82e0aa;
    color: #1c2833;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: smaller;
}

.status-inactive {
    background-color: #d5dbdb;
    color: #1c2833;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: smaller;
}

/*
 * .btn-wide — widens any button with extra horizontal padding.
 * Uses em units so it scales proportionally with each size tier.
 * Usage: <button class="btn btn-primary btn-wide">Save</button>
 */
.btn-wide {
    padding-left: 2.5em !important;
    padding-right: 2.5em !important;
}

/* Auth buttons — share size tokens; primary CTA keeps taller min-height */
body.portal-auth .btn-primary {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
    font-weight: 500;
    min-height: 40px;
    color: var(--portal-text-on-brand);
}

body.portal-auth .btn-primary:hover,
body.portal-auth .btn-primary:focus {
    background-color: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
    color: var(--portal-text-on-brand);
}

body.portal-auth .btn-link {
    color: var(--portal-primary);
    text-decoration: none;
}

body.portal-auth .btn-link:hover {
    color: var(--portal-primary-hover);
    text-decoration: underline;
}