/* ============================================================
   App-wide polish on top of the wowdash theme:
   - nicer, slightly more interactive Bootstrap modals
   - jQuery Validation error styling (Bootstrap is-invalid convention)
   - the icon badge used in modal headers
   ============================================================ */

/* Modal: soften the pop-in, add depth, round the corners a bit more */
.modal.fade .modal-dialog {
    transform: scale(.92) translateY(-10px);
    transition: transform .25s ease, opacity .25s ease;
    opacity: 0;
}
.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.modal-content {
    border: none;
    box-shadow: 0 20px 48px -12px rgba(16, 24, 40, .22);
}
.modal-header {
    align-items: flex-start;
    gap: 12px;
}
.modal-header .btn-close {
    margin-top: 4px;
}

/* Small round icon badge that sits next to a modal's title, e.g.
   <span class="modal-icon-badge bg-primary-50 text-primary-600"><i class="fas fa-building"></i></span> */
.modal-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* jQuery Validation error text (errorClass: 'invalid-feedback') */
.invalid-feedback {
    display: none;
    font-size: 12.5px;
    margin-top: 6px;
}
.is-invalid.invalid-feedback,
input.is-invalid ~ .invalid-feedback,
select.is-invalid ~ .invalid-feedback,
textarea.is-invalid ~ .invalid-feedback,
.invalid-feedback {
    display: block;
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #e7515a;
    background-image: none;
}

/* SweetAlert2: match the app's card radius/shadow language.
   NOTE: the theme's typography rules (`h1..h6 { font-size: var(--h1..h6) !important }`)
   target bare h-tags, and SweetAlert2 renders its title as <h2 class="swal2-title">
   — so without these resets every alert/toast title inherits the theme's (huge)
   h2 size. `.swal2-title` alone outranks a bare `h2` selector on specificity,
   so this wins regardless of stylesheet order. */
.swal2-popup {
    border-radius: 16px !important;
    font-family: inherit !important;
}
.swal2-title {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
}
.swal2-toast {
    border-radius: 10px !important;
}
.swal2-toast .swal2-title {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* ---- AppDataTable: 2nd thead row of per-column search boxes ---- */
table.dataTable thead tr.dt-search-row th {
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 400;
}
table.dataTable thead tr.dt-search-row th::before,
table.dataTable thead tr.dt-search-row th::after {
    display: none !important;
}
table.dataTable thead tr.dt-search-row input {
    width: 100%;
    box-sizing: border-box;
    font-weight: 400;
}
@media (min-width: 768px) {
    /* Only needed alongside the fixed layout above — an input's own
       intrinsic minimum width is what a narrow % column can't otherwise
       shrink below. On mobile (natural table sizing) a search box keeps
       its normal minimum, which is fine since the table can scroll. */
    table.dataTable thead tr.dt-search-row input {
        min-width: 0;
    }
}
div.dt-buttons {
    flex-wrap: wrap;
}
/* Fixed layout so columns respect their assigned % widths (see each
   page's `columns[].width`) instead of growing to fit content/search
   inputs — that growth is what forces the whole table wider than its
   card and triggers .table-responsive's horizontal scrollbar. Cell text
   wraps instead of pushing the column wider.
   Desktop/tablet only (>=768px): on a phone, forcing 7-9 columns into a
   ~375px-wide table makes every cell unreadably cramped no matter how
   text wraps — below that width we deliberately fall back to the
   theme's normal `.bordered-table` sizing (min-width: max-content) and
   let `.table-responsive` scroll horizontally, which is the standard,
   expected pattern for a wide data table on a small screen. */
@media (min-width: 768px) {
    table.dataTable {
        table-layout: fixed !important;
        /* The theme's .bordered-table sets `min-width: max-content`, which
           silently wins over both `width: 100%` and table-layout:fixed
           (min-width always overrides width when larger) — that's what was
           forcing every converted table wider than its card and triggering
           .table-responsive's horizontal scrollbar. */
        min-width: 0 !important;
    }
}
/* Header labels wrap at spaces only ("Servidor (URL)" -> 2 clean lines) —
   never mid-word ("Activo" -> "A/cti/vo"), which break-word does to any
   single token wider than its column. Body cells allow the mid-word
   break as a last resort, since real data (a long email/URL with no
   spaces) has no other way to avoid pushing the column wider. */
table.dataTable td {
    overflow-wrap: break-word;
    word-break: break-word;
}
/* Status/role/scope pill badges are short fixed labels — never wrap them
   even if their column is narrow (break-word above would otherwise
   split "Activo" into "Acti/vo"). */
table.dataTable td .radius-4 {
    white-space: nowrap;
}