/*
 * IgniteUI theming bridge — Royal Violet
 * --------------------------------------------------------------
 * One palette drives the whole UI:
 *   1. Overrides IgniteUI's --ig-primary-* tokens  -> native igc-* components
 *   2. Maps the same palette onto Bootstrap markup  -> all existing pages
 * Loaded AFTER indigo.css + app.css so it wins the cascade.
 * Fully reversible: delete this file and its <link> in index.html.
 */

:root {
    /* --- Royal Violet brand ramp --- */
    --ig-primary-50:  #ede9f7;
    --ig-primary-100: #d3c8ec;
    --ig-primary-200: #b6a4e0;
    --ig-primary-300: #9980d4;
    --ig-primary-400: #8366ca;
    --ig-primary-500: #5b3fb5;   /* brand */
    --ig-primary-600: #4e36a4;
    --ig-primary-700: #402c8a;
    --ig-primary-800: #342370;
    --ig-primary-900: #261852;
    --ig-primary-500-contrast: #ffffff;

    /* Keep IgniteUI secondary aligned to the brand */
    --ig-secondary-500: #5b3fb5;
    --ig-secondary-600: #4e36a4;
    --ig-secondary-700: #402c8a;

    /* Neutral surface scale (kept from Indigo base) */
    --ig-gray-50:  #fcfcfd;
    --ig-gray-100: #f6f6fa;
    --ig-gray-200: #ebedf2;
    --ig-gray-300: #d6d8dc;
    --ig-gray-400: #c3c4c7;
    --ig-gray-500: #9a9da2;
    --ig-gray-600: #6c707a;
    --ig-gray-700: #545762;
    --ig-gray-800: #3b3d47;
    --ig-gray-900: #24252c;
    --ig-surface-500: #f6f6fa;

    /* Status accents */
    --app-success: #1e9e6a;
    --app-danger:  #d33a4b;
    --app-warning: #d9930a;
    --app-info:    var(--ig-primary-400);

    /* --- Remap Bootstrap onto the brand --- */
    --bs-primary: var(--ig-primary-500);
    --bs-primary-rgb: 91, 63, 181;
    --bs-link-color: var(--ig-primary-500);
    --bs-link-color-rgb: 91, 63, 181;
    --bs-link-hover-color: var(--ig-primary-700);
    --bs-body-bg: var(--ig-surface-500);
    --bs-body-color: var(--ig-gray-900);
    --bs-border-radius: 10px;
}

/* ---------- Typography ---------- */
html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--ig-gray-900);
    background-color: var(--ig-surface-500);
}
h1, h2, h3, h4, h5, h6 { color: var(--ig-gray-900); font-weight: 600; }
.text-muted, .text-secondary { color: var(--ig-gray-600) !important; }

/* ---------- Links ---------- */
a, .btn-link { color: var(--ig-primary-500); }
a:hover, .btn-link:hover { color: var(--ig-primary-700); }

/* ---------- Buttons ---------- */
.btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background-color: var(--ig-primary-500);
    border-color: var(--ig-primary-500);
    color: #fff;
    box-shadow: 0 2px 6px rgba(91, 63, 181, .25);
}
.btn-primary:hover {
    background-color: var(--ig-primary-600);
    border-color: var(--ig-primary-600);
}
.btn-primary:active, .btn-primary:focus, .btn-primary.active {
    background-color: var(--ig-primary-700) !important;
    border-color: var(--ig-primary-700) !important;
}
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--ig-primary-300);
    border-color: var(--ig-primary-300);
}

.btn-outline-primary {
    color: var(--ig-primary-500);
    border-color: var(--ig-primary-500);
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--ig-primary-500);
    border-color: var(--ig-primary-500);
    color: #fff;
}

.btn-secondary {
    background-color: var(--ig-gray-600);
    border-color: var(--ig-gray-600);
}
.btn-secondary:hover { background-color: var(--ig-gray-700); border-color: var(--ig-gray-700); }

.btn-success { background-color: var(--app-success); border-color: var(--app-success); }
.btn-danger  { background-color: var(--app-danger);  border-color: var(--app-danger); }
.btn-warning { background-color: var(--app-warning); border-color: var(--app-warning); color:#fff; }

/* ---------- Helpers ---------- */
.text-primary { color: var(--ig-primary-500) !important; }
.bg-primary   { background-color: var(--ig-primary-500) !important; }
.border-primary { border-color: var(--ig-primary-500) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 8px;
    border-color: var(--ig-gray-300);
}
.form-control:focus, .form-select:focus,
.form-check-input:focus, .btn:focus, .btn:active:focus {
    border-color: var(--ig-primary-400);
    box-shadow: 0 0 0 0.2rem rgba(91, 63, 181, .22);
}
.form-check-input:checked {
    background-color: var(--ig-primary-500);
    border-color: var(--ig-primary-500);
}
.form-label { font-weight: 600; color: var(--ig-gray-700); }

/* ---------- Cards ---------- */
.card, .embossed-card {
    border: 1px solid var(--ig-gray-200);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(36, 37, 44, .04), 0 6px 18px rgba(36, 37, 44, .06);
}
.card-header {
    background: var(--ig-gray-100);
    border-bottom: 1px solid var(--ig-gray-200);
    font-weight: 600;
}
.result-card { border-left: 5px solid var(--ig-primary-500); background: var(--ig-gray-50); }

/* ---------- Tables ---------- */
.table-header th,
.table thead th {
    background: var(--ig-gray-100);
    border-bottom: 2px solid var(--ig-gray-300);
    color: var(--ig-gray-800);
    font-weight: 600;
    white-space: nowrap;
}
.table-hover tbody tr:hover { background-color: rgba(91, 63, 181, .06); }
.table td, .table th { vertical-align: middle; }

/* ---------- Badges / status ---------- */
.badge.bg-primary { background-color: var(--ig-primary-500) !important; }
.badge.bg-success { background-color: var(--app-success) !important; }
.badge.bg-danger  { background-color: var(--app-danger)  !important; }
.badge.bg-warning { background-color: var(--app-warning) !important; }
.success-status { color: var(--app-success); font-weight: 700; }
.failed-status  { color: var(--app-danger);  font-weight: 700; }

/* ---------- Alerts ---------- */
.alert-primary {
    color: var(--ig-primary-800);
    background-color: var(--ig-primary-50);
    border-color: var(--ig-primary-200);
}
.alert-success { color:#0f5132; background-color:#e6f5ee; border-color:#bfe3d2; }
.alert-danger  { color:#842029; background-color:#fae7e9; border-color:#f0c2c7; }

/* ---------- Pagination / nav-pills ---------- */
.page-item.active .page-link,
.nav-pills .nav-link.active {
    background-color: var(--ig-primary-500);
    border-color: var(--ig-primary-500);
}
.page-link { color: var(--ig-primary-500); }
.page-link:focus { box-shadow: 0 0 0 0.2rem rgba(91, 63, 181, .22); }

/* ---------- Spinners ---------- */
.spinner-border.text-primary, .spinner-border { color: var(--ig-primary-500); }

/* ============================================================
   Reusable modern data-table  (apply class="ig-data-table")
   ============================================================ */
.ig-surface-card {
    background: #fff;
    border: 1px solid var(--ig-gray-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(36, 37, 44, .04), 0 8px 24px rgba(36, 37, 44, .06);
    overflow: hidden;
}

.ig-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ig-gray-200);
}
.ig-table-toolbar .title {
    font-weight: 700;
    color: var(--ig-gray-900);
    font-size: 1.05rem;
    margin: 0;
}
.ig-count-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ig-primary-700);
    background: var(--ig-primary-50);
    border: 1px solid var(--ig-primary-100);
    padding: .2rem .65rem;
    border-radius: 999px;
}

.ig-scroll-x { overflow-x: auto; }

.ig-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: .9rem;
}
.ig-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ig-gray-100);
    color: var(--ig-gray-700);
    font-weight: 600;
    font-size: .73rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--ig-gray-300);
    white-space: nowrap;
    text-align: left;
}
.ig-data-table tbody td {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--ig-gray-200);
    color: var(--ig-gray-800);
    vertical-align: middle;
}
.ig-data-table tbody tr:last-child td { border-bottom: 0; }
.ig-data-table tbody tr:hover td { background: rgba(91, 63, 181, .05); }

.ig-data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}
.ig-data-table .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    color: var(--ig-gray-700);
}
.ig-truncate {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.ig-cell-sub {
    display: block;
    font-size: .75rem;
    color: var(--ig-gray-500);
    margin-top: 1px;
}
.ig-badge {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

/* IgniteUI form controls fill their container by default */
igc-input, igc-select, igc-date-picker { width: 100%; }

/* Inline form row: input grows, button sits at the end */
.ig-form-row {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.ig-form-row igc-input,
.ig-form-row igc-select,
.ig-form-row igc-date-picker { flex: 1 1 240px; }
.ig-form-row igc-button { flex: 0 0 auto; }

/* Grid cell helpers (for IgbColumn BodyTemplate content) */
.grid-num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* Empty / loading states */
.ig-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ig-gray-500);
}
.ig-empty .bi { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--ig-gray-400); }