@import url('./icons.css');

/* =====================================================================
   ITX ChatBot — Tema Dark / Neon
   Paleta:
     fondo principal:   #050815 → #0b1225 → #140a2e (gradient)
     superficies:       #0f1729, rgba(15,23,42,.6)
     borde sutil:       rgba(71,85,105,.35)
     acento cyan:       #22d3ee
     acento purple:     #a855f7
     texto primario:    #e2e8f0 / #f1f5f9
     texto muted:       #94a3b8
     texto dim:         #64748b
===================================================================== */

:root {
    --itx-bg-0:   #050815;
    --itx-bg-1:   #0b1225;
    --itx-bg-2:   #140a2e;
    --itx-surface:#0f1729;
    --itx-surface-alt: rgba(15, 23, 42, 0.6);
    --itx-border: rgba(71, 85, 105, 0.35);
    --itx-border-strong: rgba(148, 163, 184, 0.35);
    --itx-cyan:   #22d3ee;
    --itx-purple: #a855f7;
    --itx-text:   #e2e8f0;
    --itx-text-strong: #f1f5f9;
    --itx-muted:  #94a3b8;
    --itx-dim:    #64748b;
    --itx-danger: #fca5a5;
    --itx-success:#86efac;
    --itx-warning:#fbbf24;
    --itx-neon-gradient: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
    --itx-neon-glow: 0 0 22px rgba(34, 211, 238, 0.45), 0 4px 14px rgba(168, 85, 247, 0.35);
    --itx-glow-1: rgba(34, 211, 238, 0.08);
    --itx-glow-2: rgba(168, 85, 247, 0.10);
}

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
    color: var(--itx-text);
    background:
        radial-gradient(ellipse 80% 60% at 20% -10%, var(--itx-glow-1), transparent 60%),
        radial-gradient(ellipse 60% 50% at 110% 110%, var(--itx-glow-2), transparent 60%),
        linear-gradient(160deg, var(--itx-bg-0) 0%, var(--itx-bg-1) 50%, var(--itx-bg-2) 100%);
    background-attachment: fixed;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ====== Scrollbar dark ====== */
*::-webkit-scrollbar         { width: 10px; height: 10px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   { background: rgba(71, 85, 105, 0.4); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.6); background-clip: padding-box; border: 2px solid transparent; }

/* ====== Utilidades ====== */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.overflow-hidden { overflow: hidden !important; }

.text-danger       { color: var(--itx-danger); }
.text-success      { color: var(--itx-success); }
.text-muted-dark   { color: var(--itx-muted); }

.button-link { text-decoration: unset; }

/* ====== Headers con gradient neon ====== */
.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title-header-text {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    background: var(--itx-neon-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.15));
}

.title-content-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--itx-muted);
}

.main-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
    color: var(--itx-text);
}

.main-content.itx-page {
    align-items: stretch;
    justify-content: flex-start;
}

/* ====== Línea neon decorativa reutilizable ====== */
.itx-neon-divider {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--itx-cyan) 25%, var(--itx-purple) 75%, transparent);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.35);
}

/* ====== Validación ====== */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--itx-success); }
.invalid { outline: 1px solid var(--itx-danger); }
.validation-message { color: var(--itx-danger); }

/* ====== DxGrid refinements for dark mode ====== */
.dxbl-grid {
    background: var(--itx-surface-alt) !important;
    border: 1px solid var(--itx-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.dxbl-grid-table thead th {
    background: rgba(34, 211, 238, 0.04) !important;
    color: var(--itx-text) !important;
    border-bottom: 1px solid var(--itx-border) !important;
}

.dxbl-grid-table tbody tr:hover > td {
    background: rgba(34, 211, 238, 0.05) !important;
}

/* ====== DxButton neon primary override ====== */
.dxbl-btn-primary {
    background: var(--itx-neon-gradient) !important;
    border: none !important;
    color: #0b1225 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.35), 0 2px 8px rgba(168, 85, 247, 0.25) !important;
    transition: all 0.18s ease !important;
}
.dxbl-btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 26px rgba(34, 211, 238, 0.55), 0 4px 12px rgba(168, 85, 247, 0.4) !important;
    transform: translateY(-1px);
}
.dxbl-btn-primary:active { transform: translateY(0); }

/* ====== DxPopup dark overrides (usado en Contactos) ====== */
.dxbl-popup {
    background: linear-gradient(145deg, var(--itx-bg-1) 0%, var(--itx-bg-0) 50%, var(--itx-bg-2) 100%) !important;
    border: 1px solid rgba(34, 211, 238, 0.25) !important;
    border-radius: 14px !important;
    color: var(--itx-text) !important;
    box-shadow:
        0 0 60px rgba(34, 211, 238, 0.12),
        0 0 100px rgba(168, 85, 247, 0.08),
        0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

.dxbl-popup-header {
    background: transparent !important;
    border-bottom: 1px solid var(--itx-border) !important;
    color: var(--itx-text-strong) !important;
}

.dxbl-popup-body,
.dxbl-popup-footer {
    background: transparent !important;
    color: var(--itx-text) !important;
}

/* ====== Form layout labels en dark ====== */
.dxbl-form-layout-item-caption {
    color: var(--itx-muted) !important;
}

/* ====== ComboBox + TextBox focus glow ====== */
.dxbl-textbox:focus-within,
.dxbl-combobox:focus-within,
.dxbl-date-edit:focus-within,
.dxbl-spin-edit:focus-within,
.dxbl-memo:focus-within {
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
    border-color: var(--itx-cyan) !important;
}

/* ====== Forzar 100% width cuando se marca con .w-100 dentro de un FormLayout ====== */
.w-100,
.w-100 .dxbl-edit-box,
.dxbl-form-layout-item .dxbl-edit-box,
.dxbl-form-layout-item .dxbl-textbox,
.dxbl-form-layout-item .dxbl-combobox,
.dxbl-form-layout-item .dxbl-spin-edit,
.dxbl-form-layout-item .dxbl-memo,
.dxbl-form-layout-item .dxbl-date-edit {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.dxbl-form-layout-item .dxbl-edit-box input,
.dxbl-form-layout-item .dxbl-edit-box textarea {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* DxMemo textarea con buena altura mínima */
.dxbl-form-layout-item .dxbl-memo textarea {
    min-height: 60px !important;
    resize: vertical !important;
}

/* Popup body con scroll si excede la altura de viewport */
.dxbl-popup-body {
    max-height: 75vh !important;
    overflow-y: auto !important;
}

/* ====== Selection highlight ====== */
::selection {
    background: rgba(168, 85, 247, 0.4);
    color: #fff;
}

/* ====== Dashboard animations ====== */
@keyframes db-spin {
    to { transform: rotate(360deg); }
}
@keyframes db-fadeup {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ====== MyWorkOrders animations ====== */
@keyframes mwo-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* =====================================================================
   REPORTS MODULE
===================================================================== */

/* ── Report List ── */
.rpt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.rpt-card {
    background: var(--itx-surface-alt);
    border: 1px solid var(--itx-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.rpt-card:hover {
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.08);
}
.rpt-card-shared {
    border-color: rgba(168, 85, 247, 0.35);
}

.rpt-card-top  { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rpt-card-title { font-size: 1rem; font-weight: 700; color: var(--itx-text-strong); }
.rpt-card-desc  { font-size: 0.85rem; color: var(--itx-muted); }
.rpt-card-meta  { display: flex; gap: 12px; font-size: 0.8rem; color: var(--itx-dim); }
.rpt-card-meta i { margin-right: 3px; }
.rpt-card-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.rpt-action-btn { min-width: 0 !important; flex: 1; }

/* Badges */
.rpt-cat-badge, .rpt-shared-badge, .rpt-mine-badge, .rpt-badge-main {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.rpt-cat-badge    { background: rgba(34, 211, 238, 0.12); color: var(--itx-cyan); border: 1px solid rgba(34, 211, 238, 0.25); }
.rpt-shared-badge { background: rgba(168, 85, 247, 0.12); color: var(--itx-purple); border: 1px solid rgba(168, 85, 247, 0.25); }
.rpt-mine-badge   { background: rgba(134, 239, 172, 0.12); color: var(--itx-success); border: 1px solid rgba(134, 239, 172, 0.25); }
.rpt-badge-main   { background: rgba(34, 211, 238, 0.15); color: var(--itx-cyan); border: 1px solid rgba(34, 211, 238, 0.3); }

/* ── Report Builder ── */
.rpt-steps {
    display: flex;
    gap: 0;
    background: var(--itx-surface-alt);
    border: 1px solid var(--itx-border);
    border-radius: 10px;
    overflow: hidden;
}
.rpt-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: default;
    border-right: 1px solid var(--itx-border);
    transition: background 0.15s;
}
.rpt-step:last-child { border-right: none; }
.rpt-step.done { cursor: pointer; background: rgba(34, 211, 238, 0.04); }
.rpt-step.done:hover { background: rgba(34, 211, 238, 0.08); }
.rpt-step.active { background: rgba(34, 211, 238, 0.08); border-bottom: 2px solid var(--itx-cyan); }

.rpt-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700;
    background: var(--itx-border);
    color: var(--itx-muted);
    flex-shrink: 0;
}
.rpt-step.active .rpt-step-num { background: var(--itx-cyan); color: #0b1225; }
.rpt-step.done   .rpt-step-num { background: rgba(134, 239, 172, 0.25); color: var(--itx-success); }
.rpt-step-label { font-size: 0.82rem; color: var(--itx-muted); white-space: nowrap; }
.rpt-step.active .rpt-step-label, .rpt-step.done .rpt-step-label { color: var(--itx-text); }

.rpt-builder-section {
    background: var(--itx-surface-alt);
    border: 1px solid var(--itx-border);
    border-radius: 12px;
    padding: 20px;
}
.rpt-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--itx-text-strong);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--itx-border);
}
.rpt-subsection-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--itx-text);
    margin: 0 0 8px 0;
}
.rpt-hint     { font-size: 0.83rem; color: var(--itx-muted); margin: 0; }
.rpt-hint-sm  { font-size: 0.75rem; color: var(--itx-dim); }

.rpt-builder-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

/* Source toggle */
.rpt-source-toggle { display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--itx-border); width: fit-content; }
.rpt-source-toggle button {
    padding: 8px 18px;
    background: transparent;
    color: var(--itx-muted);
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.15s, color 0.15s;
}
.rpt-source-toggle button:hover { background: var(--itx-border); color: var(--itx-text); }
.rpt-source-toggle button.active { background: rgba(34, 211, 238, 0.15); color: var(--itx-cyan); font-weight: 600; }

/* Module picker grid */
.rpt-module-grid { display: flex; flex-direction: column; gap: 14px; }
.rpt-module-cat  { display: flex; flex-direction: column; gap: 8px; }
.rpt-module-cat-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--itx-dim); letter-spacing: 0.08em; }
.rpt-module-cat  { display: grid; }
.rpt-module-cat .rpt-module-cat-label { grid-column: 1 / -1; }

.rpt-module-cat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    align-items: start;
}
.rpt-module-cat-label { grid-column: 1 / -1; }

.rpt-module-card {
    padding: 12px 14px;
    border: 1px solid var(--itx-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: rgba(15, 23, 42, 0.4);
}
.rpt-module-card:hover    { border-color: rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.04); }
.rpt-module-card.selected { border-color: var(--itx-cyan); background: rgba(34, 211, 238, 0.08); box-shadow: 0 0 14px rgba(34, 211, 238, 0.12); }
.rpt-module-card-name   { font-size: 0.9rem; font-weight: 600; color: var(--itx-text-strong); margin-bottom: 2px; }
.rpt-module-card-sp     { font-size: 0.72rem; color: var(--itx-cyan); font-family: monospace; margin-bottom: 4px; }
.rpt-module-card-desc   { font-size: 0.78rem; color: var(--itx-muted); }
.rpt-module-card-params { font-size: 0.72rem; color: var(--itx-dim); margin-top: 4px; }

/* Source rows */
.rpt-source-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: rgba(34, 211, 238, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.15);
    border-radius: 6px;
    margin-bottom: 6px;
}
.rpt-source-info   { display: flex; align-items: center; gap: 8px; flex: 1; }
.rpt-source-name   { font-weight: 600; color: var(--itx-text); font-size: 0.88rem; }
.rpt-source-alias  { color: var(--itx-cyan); font-size: 0.82rem; font-family: monospace; }

.rpt-join-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: rgba(168, 85, 247, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.84rem;
    color: var(--itx-text);
    font-family: monospace;
    flex-wrap: wrap;
}
.rpt-join-type { color: var(--itx-purple); font-weight: 700; }

.rpt-icon-btn {
    background: transparent;
    border: 1px solid var(--itx-border);
    color: var(--itx-danger);
    border-radius: 4px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    transition: background 0.15s;
    flex-shrink: 0;
}
.rpt-icon-btn:hover { background: rgba(252, 165, 165, 0.1); }
.rpt-icon-btn-edit  { color: var(--itx-cyan); }
.rpt-icon-btn-edit:hover { background: rgba(34, 211, 238, 0.1); }

/* Column table */
.rpt-columns-legend { display: flex; align-items: center; gap: 12px; font-size: 0.83rem; color: var(--itx-muted); margin-bottom: 10px; }
.rpt-col-table-wrapper { overflow-x: auto; border-radius: 8px; border: 1px solid var(--itx-border); }
.rpt-col-table { width: 100%; border-collapse: collapse; }
.rpt-col-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--itx-muted);
    background: rgba(34, 211, 238, 0.04);
    border-bottom: 1px solid var(--itx-border);
}
.rpt-col-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--itx-border);
    font-size: 0.84rem;
}
.rpt-col-table tr:last-child td { border-bottom: none; }
.rpt-col-table tr:hover td { background: rgba(34, 211, 238, 0.03); }
.rpt-col-hidden td { opacity: 0.4; }

.rpt-col-source { color: var(--itx-cyan); font-family: monospace; font-size: 0.82rem; }
.rpt-col-alias  { color: var(--itx-dim); font-size: 0.75rem; margin-left: 6px; font-family: monospace; }
.rpt-col-alias-sm { font-size: 0.75rem; color: var(--itx-dim); }
.rpt-order-btns { display: flex; gap: 2px; }
.rpt-order-btns button {
    background: var(--itx-border);
    border: none;
    color: var(--itx-text);
    width: 24px; height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.12s;
}
.rpt-order-btns button:hover { background: rgba(34, 211, 238, 0.25); }

/* Filter config */
.rpt-filter-config-row {
    border: 1px solid var(--itx-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.rpt-filter-config-row.active { border-color: rgba(34, 211, 238, 0.35); background: rgba(34, 211, 238, 0.03); }
.rpt-filter-toggle-row { display: flex; align-items: center; gap: 10px; }
.rpt-filter-col-label  { font-size: 0.9rem; font-weight: 600; color: var(--itx-text); cursor: pointer; }
.rpt-filter-opts       { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--itx-border); align-items: flex-end; }
.rpt-filter-opt-group  { display: flex; flex-direction: column; gap: 4px; }
.rpt-filter-opt-group label { font-size: 0.76rem; color: var(--itx-muted); }
.rpt-filter-req { flex-direction: row !important; align-items: center; gap: 6px; }
.rpt-filter-req label { color: var(--itx-text); font-size: 0.84rem !important; }

/* Sharing */
.rpt-share-option {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--itx-border);
    border-radius: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.rpt-share-option:has(input:checked) { border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.04); }
.rpt-share-title { display: block; font-weight: 600; color: var(--itx-text-strong); margin-bottom: 4px; }
.rpt-share-desc  { display: block; font-size: 0.83rem; color: var(--itx-muted); }

/* Summary */
.rpt-summary { margin-top: 16px; }
.rpt-summary h4 { font-size: 0.9rem; font-weight: 600; color: var(--itx-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.rpt-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.rpt-summary-grid > div { background: rgba(15, 23, 42, 0.5); border: 1px solid var(--itx-border); border-radius: 6px; padding: 10px 14px; }
.rpt-summary-grid strong { display: block; font-size: 0.72rem; color: var(--itx-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.rpt-summary-grid span   { font-size: 0.9rem; color: var(--itx-text-strong); font-weight: 600; }

/* Table picker popup */
.rpt-table-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--itx-border); border-radius: 6px; }
.rpt-table-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex; gap: 10px; align-items: center;
    border-bottom: 1px solid var(--itx-border);
    transition: background 0.12s;
}
.rpt-table-item:last-child { border-bottom: none; }
.rpt-table-item:hover    { background: rgba(34, 211, 238, 0.05); }
.rpt-table-item.selected { background: rgba(34, 211, 238, 0.1); border-left: 3px solid var(--itx-cyan); }
.rpt-tbl-schema { color: var(--itx-dim); font-size: 0.78rem; font-family: monospace; }
.rpt-tbl-name   { color: var(--itx-text); font-size: 0.88rem; font-family: monospace; font-weight: 600; }

/* ── Report Viewer ── */
.rpt-filter-panel {
    background: var(--itx-surface-alt);
    border: 1px solid var(--itx-border);
    border-radius: 10px;
    padding: 14px 16px;
}
.rpt-filter-panel-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.88rem; font-weight: 600; color: var(--itx-text);
    margin-bottom: 12px;
}
.rpt-collapse-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--itx-border);
    color: var(--itx-muted);
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: border-color 0.15s, color 0.15s;
}
.rpt-collapse-btn:hover { border-color: var(--itx-cyan); color: var(--itx-cyan); }
.rpt-filters-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rpt-filter-input-group { display: flex; flex-direction: column; gap: 4px; min-width: 180px; max-width: 260px; }

.rpt-result-info {
    display: flex; gap: 16px; align-items: center;
    font-size: 0.83rem; color: var(--itx-muted);
}
.rpt-limit-warn { color: var(--itx-warning); }

.rpt-table-wrapper {
    overflow: auto;
    border-radius: 10px;
    border: 1px solid var(--itx-border);
    flex: 1;
    min-height: 0;
}
.rpt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}
.rpt-table thead th {
    position: sticky; top: 0; z-index: 2;
    padding: 10px 14px;
    text-align: left;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--itx-text);
    background: var(--itx-surface);
    border-bottom: 1px solid var(--itx-border);
    white-space: nowrap;
}
.rpt-table tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--itx-border);
    color: var(--itx-text);
    white-space: nowrap;
}
.rpt-table tbody tr:last-child td { border-bottom: none; }
.rpt-table tbody tr:hover td { background: rgba(34, 211, 238, 0.04); }
.rpt-table tbody tr:nth-child(even) td { background: rgba(15, 23, 42, 0.25); }
.rpt-table tbody tr:nth-child(even):hover td { background: rgba(34, 211, 238, 0.04); }

/* ── Shared util ── */
.rpt-loading { display: flex; align-items: center; gap: 12px; color: var(--itx-muted); padding: 20px; }
.rpt-empty   { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px; color: var(--itx-muted); text-align: center; }

.rpt-input {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--itx-border);
    border-radius: 6px;
    color: var(--itx-text);
    padding: 6px 10px;
    font-size: 0.84rem;
    transition: border-color 0.15s;
}
.rpt-input:focus { outline: none; border-color: var(--itx-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12); }
.rpt-input-sm { width: 80px !important; }

.rpt-select {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--itx-border);
    border-radius: 6px;
    color: var(--itx-text);
    padding: 6px 10px;
    font-size: 0.84rem;
    transition: border-color 0.15s;
    cursor: pointer;
}
.rpt-select:focus { outline: none; border-color: var(--itx-cyan); }

.itx-alert-success {
    background: rgba(134, 239, 172, 0.08);
    border: 1px solid rgba(134, 239, 172, 0.3);
    color: var(--itx-success);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.88rem;
}

/* ====== Dashboard responsive ====== */
@media (max-width: 1300px) {
    .db-kpis { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (max-width: 1050px) {
    .db-kpis { grid-template-columns: repeat(4, 1fr) !important; }
    .db-row3 { grid-template-columns: repeat(3, 1fr) !important; }
    .db-row2 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 860px) {
    .db-kpis { grid-template-columns: repeat(2, 1fr) !important; }
    .db-row3 { grid-template-columns: 1fr 1fr !important; }
    .db-row2 { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   REQUESTS MODULE
   ═══════════════════════════════════════════════════════════════ */

.req-tab {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--itx-border);
    background: transparent;
    color: var(--itx-text);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
}
.req-tab:hover { background: var(--itx-hover); }
.req-tab.active { background: var(--itx-accent); color: #fff; border-color: var(--itx-accent); }
.req-tab-count {
    background: rgba(255,255,255,0.25);
    color: inherit;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 600;
}
.req-tab:not(.active) .req-tab-count { background: var(--itx-hover); color: var(--itx-dim); }
.req-tab-count.urgent { background: #e53e3e; color: #fff !important; }

.req-cards { display: flex; flex-direction: column; gap: 10px; }
.req-card {
    display: flex;
    gap: 14px;
    background: var(--itx-card);
    border: 1px solid var(--itx-border);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.15s;
}
.req-card:hover { border-color: var(--itx-accent); }
.req-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.req-type-icon.workorder { background: rgba(237,137,54,0.15); color: #ed8936; }
.req-type-icon.purchase  { background: rgba(72,187,120,0.15);  color: #48bb78; }
.req-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.req-card-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-card-title { font-weight: 600; font-size: 0.95rem; }
.req-card-meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--itx-dim); }
.req-card-desc { font-size: 0.85rem; color: var(--itx-dim); }
.req-card-detail { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--itx-dim); }
.req-card-detail span { display: flex; align-items: center; gap: 4px; }
.req-manager-notes {
    background: rgba(66,153,225,0.08);
    border-left: 3px solid var(--itx-accent);
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
    font-size: 0.84rem;
}
.req-linked-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; }
.req-linked-badge.wo { background: rgba(237,137,54,0.12); color: #ed8936; }
.req-linked-badge.po { background: rgba(72,187,120,0.12);  color: #48bb78; }
.req-purchase-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--itx-accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.req-purchase-link:hover { text-decoration: underline; }
.req-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 120px; }

.req-status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.req-status-badge.pending     { background: rgba(246,173,85,0.18);  color: #d97706; }
.req-status-badge.in_review   { background: rgba(66,153,225,0.18);  color: #3182ce; }
.req-status-badge.in_progress { background: rgba(159,122,234,0.18); color: #805ad5; }
.req-status-badge.completed   { background: rgba(72,187,120,0.18);  color: #38a169; }
.req-status-badge.rejected    { background: rgba(245,101,101,0.18); color: #e53e3e; }

.req-priority-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.73rem; font-weight: 600; }
.req-priority-badge.low    { background: rgba(160,174,192,0.2); color: #718096; }
.req-priority-badge.normal { background: rgba(66,153,225,0.15); color: #3182ce; }
.req-priority-badge.high   { background: rgba(237,137,54,0.18); color: #dd6b20; }
.req-priority-badge.urgent { background: rgba(229,62,62,0.18);  color: #e53e3e; }

.req-type-label { font-size: 0.78rem; font-weight: 500; color: #ed8936; }
.req-type-label.purchase { color: #48bb78; }

.req-status-steps { display: flex; flex-direction: column; gap: 2px; }
.req-step { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.req-step-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--itx-border); background: transparent; transition: background 0.2s; }
.req-step.done    .req-step-dot { background: #48bb78; border-color: #48bb78; }
.req-step.current .req-step-dot { background: var(--itx-accent); border-color: var(--itx-accent); box-shadow: 0 0 0 3px rgba(66,153,225,0.3); }
.req-step-label { font-size: 0.72rem; color: var(--itx-dim); }
.req-step.done    .req-step-label { color: #48bb78; }
.req-step.current .req-step-label { color: var(--itx-accent); font-weight: 600; }

.req-action-btn {
    width: 30px; height: 30px; border-radius: 6px;
    border: 1px solid var(--itx-border); background: transparent; color: var(--itx-dim);
    cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
}
.req-action-btn.edit:hover { background: rgba(66,153,225,0.15); color: #3182ce; }
.req-action-btn.del:hover  { background: rgba(229,62,62,0.15);  color: #e53e3e; }

.req-form-row { display: flex; flex-direction: column; gap: 4px; }
.req-type-select-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 16px; border: 2px solid var(--itx-border); border-radius: 12px;
    background: var(--itx-card); color: var(--itx-text); cursor: pointer;
    transition: border-color 0.15s, background 0.15s; text-align: center;
}
.req-type-select-card:hover { border-color: var(--itx-accent); background: var(--itx-hover); }
.req-type-select-card.selected { border-color: var(--itx-accent); background: rgba(66,153,225,0.08); }
.req-type-select-card strong { font-size: 1rem; }
.req-type-select-card span   { font-size: 0.8rem; color: var(--itx-dim); }

.req-priority-btn {
    padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--itx-border);
    background: transparent; cursor: pointer; font-size: 0.82rem; color: var(--itx-dim); transition: all 0.15s;
}
.req-priority-btn.low.selected    { border-color: #718096; background: rgba(160,174,192,0.15); color: #718096; }
.req-priority-btn.normal.selected { border-color: #3182ce; background: rgba(66,153,225,0.12);  color: #3182ce; }
.req-priority-btn.high.selected   { border-color: #dd6b20; background: rgba(237,137,54,0.12);  color: #dd6b20; }
.req-priority-btn.urgent.selected { border-color: #e53e3e; background: rgba(229,62,62,0.12);   color: #e53e3e; }
.req-priority-btn:hover { background: var(--itx-hover); }

.req-back-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--itx-border);
    background: transparent; color: var(--itx-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.req-back-btn:hover { background: var(--itx-hover); }

.req-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--itx-dim); text-align: center; }

.req-manage-table-wrapper { overflow-x: auto; border-radius: 8px; border: 1px solid var(--itx-border); }
.req-manage-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.req-manage-table th {
    padding: 10px 14px; text-align: left; font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--itx-dim);
    background: var(--itx-card); border-bottom: 1px solid var(--itx-border);
}
.req-manage-table td { padding: 10px 14px; border-bottom: 1px solid var(--itx-border); vertical-align: middle; }
.req-manage-table tbody tr:last-child td { border-bottom: none; }
.req-manage-table tbody tr:hover { background: var(--itx-hover); }
.req-row-pending { border-left: 3px solid #f6ad55; }

.req-detail-header { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.req-detail-section { display: flex; flex-direction: column; gap: 3px; }
.req-detail-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--itx-dim); font-weight: 600; }
.w-120 { width: 120px; }

/* ============================================================
   Grid row selection highlight (EworkOrders & generic itx-grid)
   ============================================================ */

/* Persistent selected row — cyan tint + left accent */
.itx-grid .dxbl-grid-data-row.dxbl-grid-data-row-selected,
.itx-grid .dxbl-grid-row.dxbl-grid-row-selected,
.ew-grid-modal .dxbl-grid-data-row.dxbl-grid-data-row-selected,
.ew-grid-modal .dxbl-grid-row.dxbl-grid-row-selected {
    background: rgba(34, 211, 238, 0.18) !important;
    border-left: 3px solid var(--itx-cyan) !important;
}

.itx-grid .dxbl-grid-data-row.dxbl-grid-data-row-selected:hover,
.itx-grid .dxbl-grid-row.dxbl-grid-row-selected:hover,
.ew-grid-modal .dxbl-grid-data-row.dxbl-grid-data-row-selected:hover,
.ew-grid-modal .dxbl-grid-row.dxbl-grid-row-selected:hover {
    background: rgba(34, 211, 238, 0.25) !important;
}

/* Subtle hover for non-selected rows */
.itx-grid .dxbl-grid-data-row:hover:not(.dxbl-grid-data-row-selected),
.ew-grid-modal .dxbl-grid-data-row:hover:not(.dxbl-grid-data-row-selected) {
    background: rgba(148, 163, 184, 0.08);
}