/* ═══════════════════════════════════════════════════════════════════════════
   ServiceDesk · Tickets — Design Tokens (FASE 1)
   ───────────────────────────────────────────────────────────────────────────
   Tokens y clases base del rediseño de la lista/detalle de tickets. Todo va
   bajo el scope `.tk-scope` para no contaminar el resto del portal: las
   variables CSS NO viven en `:root` global. Para activar los tokens, envuelve
   la página/componente con `<div class="tk-scope">…</div>`.
   ─────────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/*
 * .tk-scope is a thin alias layer: every redesign-internal token
 * (`--ink`, `--surface`, `--violet`, `--st-*`) points to a global
 * `--tk-*` defined in theme.css. Light/dark switching is driven by
 * theme.css alone — DO NOT hard-code colors here. If you need a new
 * token, add it to theme.css (light + dark) and alias it below.
 */
.tk-scope {
    /* Neutrals */
    --ink:          var(--tk-ink);
    --ink-2:        var(--tk-ink-2);
    --ink-dim:      var(--tk-ink-dim);
    --ink-faint:    var(--tk-ink-faint);

    --bg:           var(--tk-bg);
    --surface:      var(--tk-surface);
    --surface-2:    var(--tk-surface-2);
    --line:         var(--tk-line);
    --line-soft:    var(--tk-line-soft);
    --line-strong:  var(--tk-line-strong);

    /* Brand */
    --violet:       var(--tk-violet);
    --violet-soft:  var(--tk-violet-soft);
    --violet-line:  var(--tk-violet-line);
    --violet-glow:  var(--tk-violet-glow);

    /* Status palette */
    --st-new:        var(--tk-st-new);
    --st-new-bg:     var(--tk-st-new-bg);
    --st-new-line:   var(--tk-st-new-line);

    --st-open:       var(--tk-st-open);
    --st-open-bg:    var(--tk-st-open-bg);
    --st-open-line:  var(--tk-st-open-line);

    --st-prog:       var(--tk-st-prog);
    --st-prog-bg:    var(--tk-st-prog-bg);
    --st-prog-line:  var(--tk-st-prog-line);

    --st-wait:       var(--tk-st-wait);
    --st-wait-bg:    var(--tk-st-wait-bg);
    --st-wait-line:  var(--tk-st-wait-line);

    --st-done:       var(--tk-st-done);
    --st-done-bg:    var(--tk-st-done-bg);
    --st-done-line:  var(--tk-st-done-line);

    --st-closed:     var(--tk-st-closed);
    --st-closed-bg:  var(--tk-st-closed-bg);
    --st-closed-line:var(--tk-st-closed-line);

    --st-sla:        var(--tk-st-sla);
    --st-sla-bg:     var(--tk-st-sla-bg);
    --st-sla-line:   var(--tk-st-sla-line);

    /* Typography (kept here — Inter + JetBrains Mono are tickets-specific) */
    --tk-font-sans:  "Inter", "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --tk-font-mono:  "JetBrains Mono", "SF Mono", ui-monospace, monospace;

    /* Radius / Shadow aliases */
    --radius-sm:    var(--tk-radius-sm);
    --radius:       var(--tk-radius);
    --radius-lg:    var(--tk-radius-lg);
    --shadow-sm:    var(--tk-shadow-sm);
    --shadow-md:    var(--tk-shadow-md);

    font-feature-settings: "cv11", "ss01";
}

.tk-scope .tk-mono {
    font-family: var(--tk-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KPI de incidencias — SÓLO el color por estado
   ───────────────────────────────────────────────────────────────────────────
   La geometría de la tira (panel continuo, filetes, acento de 2px, tamaños)
   vive en theme.css como `.kpi-strip` / `.kpi-tile`, y `.tk-kpi*` es un alias
   de migración dentro de esa misma definición. Aquí quedan únicamente las
   variantes de color, que sí son de ServiceDesk: qué tono lleva cada estado
   de un ticket no lo puede saber el tema del portal.
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-kpi-rail--total  { background: var(--ink); }
.tk-scope .tk-kpi-rail--new    { background: var(--st-new); }
.tk-scope .tk-kpi-rail--open   { background: var(--st-open); }
.tk-scope .tk-kpi-rail--prog   { background: var(--st-prog); }
.tk-scope .tk-kpi-rail--wait   { background: var(--st-wait); }
.tk-scope .tk-kpi-rail--done   { background: var(--st-done); }
.tk-scope .tk-kpi-rail--closed { background: var(--st-closed); }
.tk-scope .tk-kpi-rail--sla    { background: var(--st-sla); }
.tk-scope .tk-kpi-num--sla { color: var(--st-sla); }

/* ═══════════════════════════════════════════════════════════════════════════
   Status chip (.tk-status-chip)  ·  filled, single-state hue
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 9px 3px 8px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.tk-scope .tk-status-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.tk-scope .tk-status-chip--new    { background: var(--st-new-bg);    color: var(--st-new);    border-color: var(--st-new-line); }
.tk-scope .tk-status-chip--open   { background: var(--st-open-bg);   color: var(--st-open);   border-color: var(--st-open-line); }
.tk-scope .tk-status-chip--prog   { background: var(--st-prog-bg);   color: var(--st-prog);   border-color: var(--st-prog-line); }
.tk-scope .tk-status-chip--wait   { background: var(--st-wait-bg);   color: var(--st-wait);   border-color: var(--st-wait-line); }
.tk-scope .tk-status-chip--done   { background: var(--st-done-bg);   color: var(--st-done);   border-color: var(--st-done-line); }
.tk-scope .tk-status-chip--closed { background: var(--st-closed-bg); color: var(--st-closed); border-color: var(--st-closed-line); }
.tk-scope .tk-status-chip--sla    { background: var(--st-sla-bg);    color: var(--st-sla);    border-color: var(--st-sla-line); }

/* Same chip can also be selected by data-state */
.tk-scope .tk-status-chip[data-state="new"]    { background: var(--st-new-bg);    color: var(--st-new);    border-color: var(--st-new-line); }
.tk-scope .tk-status-chip[data-state="open"]   { background: var(--st-open-bg);   color: var(--st-open);   border-color: var(--st-open-line); }
.tk-scope .tk-status-chip[data-state="prog"]   { background: var(--st-prog-bg);   color: var(--st-prog);   border-color: var(--st-prog-line); }
.tk-scope .tk-status-chip[data-state="wait"]   { background: var(--st-wait-bg);   color: var(--st-wait);   border-color: var(--st-wait-line); }
.tk-scope .tk-status-chip[data-state="done"]   { background: var(--st-done-bg);   color: var(--st-done);   border-color: var(--st-done-line); }
.tk-scope .tk-status-chip[data-state="closed"] { background: var(--st-closed-bg); color: var(--st-closed); border-color: var(--st-closed-line); }
.tk-scope .tk-status-chip[data-state="sla"]    { background: var(--st-sla-bg);    color: var(--st-sla);    border-color: var(--st-sla-line); }

/* ═══════════════════════════════════════════════════════════════════════════
   Priority (.tk-priority)
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-priority {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
}

.tk-scope .tk-priority .rzi,
.tk-scope .tk-priority .material-icons,
.tk-scope .tk-priority svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
    flex: none;
}

.tk-scope .tk-priority--crit { color: var(--st-sla); }
.tk-scope .tk-priority--high { color: var(--st-prog); }
.tk-scope .tk-priority--med  { color: var(--ink-dim); }
.tk-scope .tk-priority--low  { color: var(--ink-faint); }

/* ═══════════════════════════════════════════════════════════════════════════
   Assign pill (.tk-assign-pill)  ·  replaces the empty avatar circle
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-assign-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border: 1px dashed var(--line-strong);
    background: transparent;
    border-radius: 7px;
    font-family: var(--tk-font-sans);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-dim);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, border-style 0.15s ease;
    line-height: 1;
}

.tk-scope .tk-assign-pill:hover,
.tk-scope .tk-assign-pill:focus-visible {
    border-color: var(--violet);
    color: var(--violet);
    background: var(--violet-soft);
    border-style: solid;
    outline: none;
}

.tk-scope .tk-assign-pill svg {
    width: 12px;
    height: 12px;
    flex: none;
}

/* Side-panel variant ("Asignado a" empty state inside drawer): slightly larger */
.tk-scope .tk-assign-pill--lg {
    padding: 5px 10px 5px 8px;
    border-radius: 7px;
    font-size: 12.5px;
    gap: 7px;
}

.tk-scope .tk-assign-pill--lg svg {
    width: 14px;
    height: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Row rail (.tk-row-rail)  ·  3px ::before on .ticket-grid <tr>
   ─────────────────────────────────────────────────────────────────────────
   Activated by adding `class="ticket-grid"` to the RadzenDataGrid and one
   of `row-unread`, `row-sla-risk`, `row-sla-over` to its <tr> via RowRender.
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .ticket-grid tr {
    position: relative;
}

.tk-scope .ticket-grid tr::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

.tk-scope .ticket-grid tr.row-unread::before   { background: var(--violet); }
.tk-scope .ticket-grid tr.row-sla-risk::before { background: var(--st-prog); }
.tk-scope .ticket-grid tr.row-sla-over::before { background: var(--st-sla); }

/* Selected row (drawer open) — substitutes the rail with a violet inset */
.tk-scope .ticket-grid tr.row-selected {
    background: var(--violet-soft);
}

.tk-scope .ticket-grid tr.row-selected::before {
    background: var(--violet);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Requisitos de subcategoria en el alta de incidencia (RequirementFields).
   Vive aqui y no en un .razor.css porque lo pintan dos dialogos distintos
   (cliente y admin), cada uno con su propio hash de aislamiento.
   ═════════════════════════════════════════════════════════════════════════ */

.req-block {
    border: 1px solid var(--rz-base-200);
    border-left: 3px solid var(--rz-primary);
    border-radius: 8px;
    background: var(--rz-base-50, #f8fafc);
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.req-block-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--rz-text-secondary-color);
}

.req-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.req-confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.req-confirm-text {
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--rz-text-primary-color);
}

.req-help {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.req-help a {
    color: var(--rz-primary);
    text-decoration: underline;
}