/* ===== CSS Variables (client-claims palette) ===== */
:root {
    --primary--color: #0e95cb;
    --secondary--color: #0a688e;
    --third--color: #074b66;
    --success--color: #15750b;
    --warn--color: #fbb800;
    --danger--color: #ea0000;
    --black--color: #191919;
    --light--white: #FAFAFA;
    --gradient--2: #1b7dad;
    --gradient--3: #4f4fa4;

    /* Light theme */
    --header-background-color: #f5f5f5;
    --side--background: #FFFFFF;
    --main--background: #FFFFFF;
    --text-color: var(--black--color);
    --input--background: white;
    --border--color: rgb(236, 236, 236);
    --selected--link: var(--primary--color);
    --selected--background: rgba(14, 149, 203, 0.1);
}

/* ===== Base ===== */
html, body {
    font-family: "Nunito Sans", sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background: var(--main--background);
}

*, *::before, *::after {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, a, span, label, input, button, textarea, select {
    font-family: "Nunito Sans", sans-serif;
}

a, .btn-link {
    color: var(--primary--color);
}

/* ===== Buttons (btn-- system from client-claims) ===== */
.btn--primary {
    font-family: "Nunito Sans", sans-serif;
    padding: 5px 20px;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--primary--color);
    color: white;
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    background-color: var(--secondary--color);
}

.btn--secondary {
    font-family: "Nunito Sans", sans-serif;
    padding: 5px 20px;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--secondary--color);
    color: white;
}

.btn--secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    background-color: var(--third--color);
}

.btn--third {
    font-family: "Nunito Sans", sans-serif;
    padding: 5px 20px;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--third--color);
    color: white;
}

.btn--third:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn--success {
    font-family: "Nunito Sans", sans-serif;
    padding: 5px 20px;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--success--color);
    color: white;
}

.btn--success:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn--danger {
    font-family: "Nunito Sans", sans-serif;
    padding: 5px 20px;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--danger--color);
    color: white;
}

.btn--danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn--outline--primary {
    font-family: "Nunito Sans", sans-serif;
    padding: 5px 20px;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: transparent;
    color: var(--primary--color);
    border: 1px solid var(--primary--color);
}

.btn--outline--primary:hover {
    transform: translateY(-2px);
    background-color: var(--primary--color);
    color: white;
}

.btn--sm--primary {
    font-family: "Nunito Sans", sans-serif;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--primary--color);
    color: white;
}

.btn--sm--primary:hover {
    transform: translateY(-1px);
    background-color: var(--secondary--color);
}

/* ===== Form elements ===== */
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success--color);
}

.invalid {
    outline: 1px solid var(--danger--color);
}

.validation-message {
    color: var(--danger--color);
}

/* ===== Error boundary ===== */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ===== Utilities ===== */
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ===== Incidentes en grupos (listener pasivo) ===== */
.incidents-page { padding: 1.25rem 1.5rem; max-width: 1200px; }

.incidents-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.incidents-header h2 { font-size: 1.25rem; margin: 0; color: #111b21; }

.btn-secondary-link { text-decoration: none; color: #008069; font-weight: 600; font-size: .9rem; }

.incidents-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.incidents-filters select,
.incidents-filters input {
    padding: .4rem .6rem; border: 1px solid #d1d7db; border-radius: 6px; font-size: .9rem;
}

.btn-primary,
.btn-secondary {
    padding: .4rem .9rem; border-radius: 6px; border: none; cursor: pointer;
    font-size: .9rem; font-weight: 600;
}
.btn-primary { background: #008069; color: #fff; }
.btn-secondary { background: #e9edef; color: #111b21; }
.btn-primary:disabled,
.btn-secondary:disabled { opacity: .6; cursor: default; }

.incidents-count { font-size: .85rem; color: #667781; margin-bottom: .5rem; }
.incidents-empty { padding: 1rem; color: #667781; }

.incidents-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
.incidents-table th,
.incidents-table td {
    text-align: left; padding: .55rem .65rem; border-bottom: 1px solid #eceff1; vertical-align: top;
}
.incidents-table th { background: #f0f2f5; color: #54656f; font-weight: 600; }
.incidents-table .nowrap { white-space: nowrap; }

.msg-cell { max-width: 480px; white-space: pre-wrap; word-break: break-word; }
.row-monitored { background: #f6fbf9; }

.monitor-select {
    width: 100%;
    padding: .35rem .5rem;
    border: 1px solid #d1d7db;
    border-radius: 6px;
    font-size: .9rem;
    background: #fff;
}

.monitored-help { font-size: .9rem; color: #54656f; margin-bottom: 1rem; }
.monitored-status {
    background: #e7f3ef; border: 1px solid #008069; color: #075e54;
    padding: .5rem .75rem; border-radius: 6px; margin-bottom: 1rem; font-size: .9rem;
}

/* QuickGrid de grupos monitoreados */
.monitored-grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
.monitored-grid th, .monitored-grid td {
    border-bottom: 1px solid #e9edef; padding: .5rem .6rem; text-align: left; vertical-align: middle;
}
.monitored-grid thead th { background: #f0f2f5; color: #54656f; font-weight: 600; position: sticky; top: 0; }
.monitored-grid tbody tr:hover { background: #f6fbf9; }
.monitored-grid .col-justify-center, .monitored-grid [align="center"] { text-align: center; }
.monitored-grid select { padding: .3rem .45rem; border: 1px solid #d1d7db; border-radius: 6px; background: #fff; }
.monitored-grid button[aria-sort], .monitored-grid .sort-indicator { cursor: pointer; }

/* QuickGrid: popup de filtro por columna (ColumnOptions) */
.monitored-grid thead th { position: sticky; top: 0; z-index: 5; }
.monitored-grid .col-options-button { background:none; border:none; cursor:pointer; opacity:.55; margin-left:.25rem; }
.monitored-grid .col-options-button:hover { opacity:1; }
.monitored-grid .col-options {
    position:absolute; right:0; top:100%; z-index:20; background:#fff;
    border:1px solid #d1d7db; border-radius:6px; padding:.5rem; min-width:190px;
    box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.monitored-grid .col-options select, .monitored-grid .col-options input { width:100%; padding:.3rem .45rem; }

/* Chips de conteo / filtro rapido en el toolbar de grupos */
.count-chip {
    display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; user-select:none;
    padding:.3rem .6rem; border:1px solid #d1d7db; border-radius:999px; background:#fff;
    font-size:.85rem; color:#54656f; transition:all .12s;
}
.count-chip:hover { border-color:#008069; color:#075e54; }
.count-chip b { background:#eef2f4; border-radius:999px; padding:0 .4rem; font-weight:700; }
.count-chip.chip-active { background:#008069; border-color:#008069; color:#fff; }
.count-chip.chip-active b { background:rgba(255,255,255,.25); color:#fff; }

/* Pagina de configuracion de grupos: usar casi todo el ancho de pantalla */
.incidents-page--wide { max-width: 1700px; width: 100%; margin: 0 auto; }
.incidents-page--wide .monitored-grid { width: 100%; }

/* Resaltado de coincidencias del search en el grid */
.monitored-grid mark { background: #fff3a0; color: inherit; padding: 0 .1em; border-radius: 3px; }

/* Scroll virtual del grid de grupos */
.monitored-grid-scroll { max-height: calc(100vh - 210px); min-height: 320px; overflow: auto; border: 1px solid #e9edef; border-radius: 6px; }

/* Contador al pie del grid de grupos */
.monitored-grid-footer {
    padding: .5rem .75rem; text-align: right; color: #54656f; font-size: .85rem;
    border: 1px solid #e9edef; border-top: none; border-radius: 0 0 6px 6px; background: #fafbfc;
}

/* Botón solo-ícono (ej. ver conversación en el grid de incidentes) */
.btn-icon { padding: .35rem .55rem; line-height: 1; }
.btn-icon .bi { font-size: 1rem; }

/* Altura uniforme de controles en el toolbar de filtros */
.monitored-toolbar input,
.monitored-toolbar select,
.monitored-toolbar button {
    height: 38px;
    box-sizing: border-box;
    font-size: .9rem;
    vertical-align: middle;
    border: 1px solid #d1d7db;
    border-radius: 6px;
}
.monitored-toolbar input { padding: 0 .6rem; }
.monitored-toolbar button { border: none; }