/* ─── Issues List — row action buttons (global, not scoped) ─────────────────
   Syncfusion SfGrid renders <Template> content outside the Blazor scoped-CSS
   attribute boundary, so these styles must be global to take effect.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Type cell: text left, action button pushed right ────────────────────── */
.il-type-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.il-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.il-row-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.il-row-status--unsaved {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.il-row-status--error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

/* ── Per-row pill button base ─────────────────────────────────────────────── */
.il-row-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    min-width: 95px;
    justify-content: center;
    opacity: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}

.e-row:hover .il-row-pill {
    opacity: 1;
}

.e-row:focus-within .il-row-pill,
.il-row-pill:focus,
.il-row-pill:focus-visible {
    opacity: 1;
}

/* ── Add to ST (promote) ─────────────────────────────────────────────────── */
.il-row-promote-btn {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}
.il-row-promote-btn:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/* ── Add to QA ───────────────────────────────────────────────────────────── */
.il-row-qa-btn {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}
.il-row-qa-btn:hover {
    background: #d97706;
    color: #fff;
    border-color: #d97706;
}

/* ── Navigate to QA ──────────────────────────────────────────────────────── */
 .il-row-qa-nav-btn-styled {   
    background: transparent;
    color: #4338ca;
    border: none;
    padding: 0;
    border-radius: 0;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    opacity: 1;  
    font-family: inherit;
    outline: none;
    box-shadow: none;
}

.il-row-qa-nav-btn-styled:focus {
    outline: none;
    box-shadow: none;
}

.il-row-qa-nav-btn-styled:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 2px;
    box-shadow: none;
    opacity: 1;
}

.il-row-qa-nav-btn-styled:hover {
    background: #4338ca !important;
    color: #fff !important;
    padding: 4px 7px !important;
    border-radius: 9999px !important;
}

/* ── Navigate to ST ──────────────────────────────────────────────────────── */
.il-row-st-nav-btn-styled {  
    background: transparent;
    color: #2563eb;
    border: none;
    padding: 0;
    border-radius: 0;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    opacity: 1;
    font-family: inherit;
    outline: none;
    box-shadow: none;
}

.il-row-st-nav-btn-styled:focus {
    outline: none;
    box-shadow: none;
}

.il-row-st-nav-btn-styled:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    box-shadow: none;
    opacity: 1;
}

.il-row-st-nav-btn-styled:hover {
    background: #2563eb !important;
    color: #fff !important;
    padding: 4px 7px !important;
    border-radius: 9999px !important;
}

.il-row-st-nav-btn-styled .navigateIcon {
    font-size: 14px;
    line-height: 1;
}

.il-row-qa-nav-btn-styled .navigateIcon {
    font-size: 14px;
    line-height: 1;
}

.navigateIcon {
    font-size: 14px;
    line-height: 1;
}
 
.il-row-qa-icon { 
    background: transparent !important;
    color: #4338ca !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, padding 0.12s !important;
    opacity: 0 !important;
}

.e-row:hover .il-row-qa-icon {
    opacity: 1 !important;
}

.e-row:focus-within .il-row-qa-icon,
.il-row-qa-icon:focus,
.il-row-qa-icon:focus-visible {
    opacity: 1 !important;
}
 
@media (hover: none), (pointer: coarse) {
    .il-row-pill,
    .il-row-st-nav-btn-styled,
    .il-row-qa-nav-btn-styled,
    .il-row-qa-icon {
        opacity: 1 !important;
    }
}

.il-row-qa-icon:hover { 
    background: #6d28d9 !important;
    color: #fff !important;
    padding: 4px 7px !important;
    border-radius: 9999px !important;
}
 
[data-bs-theme="dark"] .il-row-qa-icon:hover {
    background: #7c3aed !important;
}

/* ── Delete ───────────────────────────────────────────────────────────────── */
.il-row-delete-btn {
    color: #9ca3af;
    min-width: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 5px;
    justify-content: center;
    gap: 0;
    line-height: 1;
}
.il-row-delete-btn:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* ── Export ───────────────────────────────────────────────────────────── */
.il-export-btn.e-dropdown-btn {
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.il-export-btn.e-dropdown-btn:hover,
.il-export-btn.e-dropdown-btn:focus {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}
.il-export-btn.e-dropdown-btn .e-btn-icon {
    color: #334155;
}

/* ── Dark-mode overrides ─────────────────────────────────────────────────── */
[data-bs-theme="dark"] .il-row-promote-btn        { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; }
[data-bs-theme="dark"] .il-row-promote-btn:hover  { background: #2563eb; color: #fff; border-color: #2563eb; }
[data-bs-theme="dark"] .il-row-qa-btn             { background: #1c1a10; color: #fbbf24; border-color: #78350f; }
[data-bs-theme="dark"] .il-row-qa-btn:hover       { background: #d97706; color: #fff; border-color: #d97706; }
[data-bs-theme="dark"] .il-row-st-nav-btn-styled  { background: transparent; color: #93c5fd; border: none; }
[data-bs-theme="dark"] .il-row-st-nav-btn-styled:hover { background: #2563eb !important; color: #fff !important; padding: 4px 7px !important; border-radius: 9999px !important; }
[data-bs-theme="dark"] .il-row-qa-nav-btn-styled  { background: transparent; color: #a5b4fc; border: none; }
[data-bs-theme="dark"] .il-row-qa-nav-btn-styled:hover { background: #4338ca !important; color: #fff !important; padding: 4px 7px !important; border-radius: 9999px !important; }
[data-bs-theme="dark"] .il-row-delete-btn          { color: #fca5a5; }
[data-bs-theme="dark"] .il-row-delete-btn:hover    { background: #450a0a; }
[data-bs-theme="dark"] .il-row-status--unsaved     { color: #fbbf24; background: #2a2412; border-color: #92400e; }
[data-bs-theme="dark"] .il-row-status--error       { color: #fca5a5; background: #3b1212; border-color: #b91c1c; }
[data-bs-theme="dark"] .il-export-btn.e-dropdown-btn { color: #f8fafc; background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .il-export-btn.e-dropdown-btn:hover,
[data-bs-theme="dark"] .il-export-btn.e-dropdown-btn:focus { background: #475569; color: #f8fafc; border-color: #334155; }
[data-bs-theme="dark"] .il-export-btn.e-dropdown-btn .e-btn-icon { color: #f8fafc; }

/* ─── Issues List View — grid cell overrides ────────────────────────────────
   Scoped via .ilv-outer wrapper to avoid affecting other grids on the page.
   Moved from scoped CSS because ::deep leaks globally in Blazor.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Focused cell highlight (single-click selection, pre-edit) ────────────── */
.ilv-outer .e-grid td.e-cellselectionbackground {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

/* ── Persistent active cell highlight (remains until user clicks elsewhere) ── */
.ilv-outer .e-grid td.il-active-cell {
    background: var(--active) !important;
    outline: 2px solid var(--activeBorder) !important;
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}

/* ── Active row highlight (when entire row is highlighted) ─────────── */
.ilv-outer .e-grid tr.e-row.il-active-row {
    background: var(--active) !important;
}

.ilv-outer .e-grid tr.e-row.il-active-row td {
    background: var(--active) !important;
    border-color: var(--activeBorder) !important;
}

/* Draw a full rectangular focus for the active row.
   Syncfusion's horizontal grid lines can make border-color-only updates appear
   as a top-edge highlight, so we force all 4 sides explicitly. */
.ilv-outer .e-grid tr.e-row.il-active-row td {
    border-top: 2px solid var(--activeBorder) !important;
    border-bottom: 2px solid var(--activeBorder) !important;
}

.ilv-outer .e-grid tr.e-row.il-active-row td:first-child {
    border-left: 2px solid var(--activeBorder) !important;
}

.ilv-outer .e-grid tr.e-row.il-active-row td:last-child {
    border-right: 2px solid var(--activeBorder) !important;
}

/* ── Navigation highlight for a target issue row ─────────────────────────── */
.ilv-outer .e-grid .e-gridcontent tr.e-row.il-grid-row-highlight {
    animation: ilRowHighlightPulse 2s ease;
}

@keyframes ilRowHighlightPulse {
    0% { box-shadow: inset 0 0 0 0 rgba(59, 130, 246, 0.55); }
    45% { box-shadow: inset 0 0 0 999px rgba(59, 130, 246, 0.16); }
    100% { box-shadow: inset 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* ── Suppress Syncfusion batch-mode dirty cell green indicator ──────────── */
.ilv-outer .e-grid td.e-updatedtd {
    background-color: transparent !important;
    color: inherit !important;
}

.ilv-outer .e-grid td.e-updatedtd::before,
.ilv-outer .e-grid td.e-updatedtd::after {
    display: none !important;
}

.ilv-outer .e-grid .e-gridheader th:nth-last-child(-n+2) :is(.e-rhandler, .e-rsuppress) {
    display: none !important;
}