/* ═══════════════════════════════════════════════
   RMT DASHBOARD — Professional Enterprise Design
   ═══════════════════════════════════════════════ */

/* ── Dashboard-local tokens (colors not in global palette) ────── */
:root {
    --c-primary:  #0066CC;
    --c-success:  #0D9488;
    --c-warning:  #EA580C;
    --c-danger:   #DC2626;
    --c-info:     #0284C7;
    --c-dark:     #0F172A;

    /* Gray scale aliases (shared with app.css --gray-*) */
    --c-gray-50:  var(--gray-50);
    --c-gray-100: var(--gray-100);
    --c-gray-200: var(--gray-200);
    --c-gray-300: var(--gray-300);
    --c-gray-400: var(--gray-400);
    --c-gray-500: var(--gray-500);
    --c-gray-600: var(--gray-600);
    --c-gray-700: var(--gray-700);
    --c-gray-800: var(--gray-800);
    --c-gray-900: var(--gray-900);

    /* Shadow & radius aliases */
    --sh-sm: var(--shadow-sm);
    --sh-md: var(--shadow-md);
    --sh-lg: var(--shadow-lg);
    --font:  var(--ds-font);
}


/* ═══════════════════════════════════
   SHELL
   ═══════════════════════════════════ */

.db-shell {
    background: var(--c-gray-50);
    min-height: calc(100vh - 60px);
    font-family: var(--font);
}


/* ═══════════════════════════════════
   HEADER
   ═══════════════════════════════════ */

.db-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 2.5rem;
    background: #ffffff;
    border-bottom: 1px solid var(--c-gray-200);
}

.db-title {
    font-size: var(--ds-h2);
    font-weight: var(--ds-fw-semibold);
    line-height: var(--ds-lh-h2);
    color: var(--c-gray-900);
    margin: 0;
    letter-spacing: -0.015em;
}

.db-subtitle {
    font-size: var(--ds-label);
    color: var(--c-gray-500);
    margin: 2px 0 0;
    font-weight: var(--ds-fw-regular);
}

.db-pipe {
    margin: 0 0.5rem;
    color: var(--c-primary);
    font-weight: 700;
}

.db-header-right {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.db-refresh-time {
    font-size: var(--ds-label);
    color: var(--c-gray-400);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.db-btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 14px;
    border: 1px solid var(--c-gray-300);
    border-radius: var(--radius);
    background: #fff;
    color: var(--c-gray-700);
    font-size: var(--ds-label);
    font-weight: var(--ds-fw-semibold);
    cursor: pointer;
    transition: border-color .15s, color .15s, box-shadow .15s;
    font-family: var(--font);
}

.db-btn-refresh:hover:not(:disabled) {
    border-color: var(--c-primary);
    color: var(--c-primary);
    box-shadow: var(--sh-sm);
}

.db-btn-refresh:disabled {
    opacity: .55;
    cursor: default;
}

@keyframes spin { to { transform: rotate(360deg); } }
.db-spin { display: inline-block; animation: spin .75s linear infinite; }


/* ═══════════════════════════════════
   LOADING
   ═══════════════════════════════════ */

.db-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    gap: 1rem;
}

.db-loading-text {
    color: var(--c-gray-500);
    font-size: var(--ds-body);
    margin: 0;
}


/* ═══════════════════════════════════
   DRIFT ALERT BANNER
   ═══════════════════════════════════ */

.db-drift-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 2.5rem;
    background: color-mix(in srgb, var(--c-warning) 8%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--c-warning) 25%, transparent);
    font-size: 0.875rem;
    color: var(--c-gray-800);
}

.db-drift-icon {
    color: var(--c-warning);
    font-size: 1rem;
    flex-shrink: 0;
}

.db-drift-banner span {
    flex: 1;
}

.db-drift-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-warning);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    transition: opacity .15s;
}

.db-drift-link:hover { opacity: .75; }


/* ═══════════════════════════════════
   KPI SECTION
   ═══════════════════════════════════ */

.db-kpi-section {
    padding: 1.75rem 2.5rem 0;
}

.db-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.db-kpi-card {
    background: #fff;
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius);
    box-shadow: var(--sh-sm);
    display: flex;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}

.db-kpi-card:hover {
    box-shadow: var(--sh-md);
}

.db-kpi-card.kpi-highlighted {
    border-color: color-mix(in srgb, var(--c-warning) 40%, transparent);
}

/* Left accent bar */
.db-kpi-accent {
    width: 4px;
    flex-shrink: 0;
}

.db-kpi-body {
    flex: 1;
    padding: 1.25rem 1.25rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.db-kpi-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.db-kpi-label {
    font-size: var(--ds-small);
    font-weight: var(--ds-fw-bold);
    color: var(--c-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.db-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.db-kpi-number {
    font-size: 2.125rem;
    font-weight: 700;
    color: var(--c-gray-900);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.db-kpi-number.number-warning {
    color: var(--c-warning);
}

.db-kpi-trend {
    font-size: 0.775rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--c-gray-500);
}

.db-kpi-trend i { font-size: 1rem; }
.trend-up   { color: var(--c-success); }
.trend-down { color: var(--c-danger); }
.trend-neutral { color: var(--c-gray-500); }


/* ═══════════════════════════════════
   LAYOUT: SECTIONS / ROWS / COLS
   ═══════════════════════════════════ */

.db-section {
    padding: 1.25rem 2.5rem 0;
}

.db-row {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}

.db-col-4  { flex: 0 0 calc(33.333% - 0.625rem); min-width: 0; }
.db-col-5  { flex: 0 0 calc(41.667% - 0.625rem); min-width: 0; }
.db-col-7  { flex: 0 0 calc(58.333% - 0.625rem); min-width: 0; }
.db-col-8  { flex: 0 0 calc(66.667% - 0.625rem); min-width: 0; }


/* ═══════════════════════════════════
   CARDS
   ═══════════════════════════════════ */

.db-card {
    background: #fff;
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius);
    box-shadow: var(--sh-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

.db-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--c-gray-200);
    background: #fff;
    flex-shrink: 0;
}

.db-card-title-group {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.db-card-title {
    font-size: var(--ds-h3);
    font-weight: var(--ds-fw-semibold);
    line-height: var(--ds-lh-h3);
    color: var(--c-gray-800);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.db-card-title i {
    color: var(--c-gray-500);
    font-size: var(--ds-body);
}

.db-card-badge {
    font-size: var(--ds-small);
    font-weight: var(--ds-fw-semibold);
    color: var(--c-gray-500);
    background: var(--c-gray-100);
    border: 1px solid var(--c-gray-200);
    border-radius: 20px;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.db-card-body {
    padding: 1.25rem;
    flex: 1;
}

.db-chart-bg {
    background: #fff;
    padding: 8px 4px 4px;
}

.db-area-svg {
    width: 100%;
    height: 190px;
    display: block;
    overflow: visible;
}

.db-view-all {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: opacity .15s;
}

.db-view-all:hover { opacity: .7; }

.db-legend {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.db-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.775rem;
    color: var(--c-gray-500);
    font-weight: 500;
}

.db-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}


/* ═══════════════════════════════════
   BAR CHART
   ═══════════════════════════════════ */

.db-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    height: 200px;
    padding: 1rem 0.75rem 0;
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--c-gray-200);
}

.db-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}

.db-bar-stack {
    width: 100%;
    max-width: 44px;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    min-height: 10px;
}

.db-bar-stack.bar-empty {
    opacity: .35;
}

.db-bar-seg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    transition: opacity .15s;
    min-height: 16px;
}

.db-bar-seg:hover { opacity: .8; cursor: default; }
.seg-sync  { background: var(--c-success); }
.seg-drift { background: var(--c-warning); }
.seg-empty { background: var(--c-gray-200); }

.db-bar-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    text-align: center;
}

.bar-day {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--c-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bar-date {
    font-size: 0.625rem;
    color: var(--c-gray-400);
    font-weight: 500;
}


/* ═══════════════════════════════════
   SYNC HEALTH RING (CSS conic-gradient)
   ═══════════════════════════════════ */

.db-ring-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.75rem 1.25rem;
}

.db-ring-outer {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        var(--c-success) var(--ring-pct),
        var(--c-gray-200) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* Inner white circle creates the donut hole */
.db-ring-inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

.db-ring-pct {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--c-gray-900);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.db-ring-pct small {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-gray-500);
}

.db-ring-lbl {
    font-size: 0.675rem;
    font-weight: 600;
    color: var(--c-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.db-ring-stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    justify-content: center;
}

.db-ring-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.db-ring-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.db-ring-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-gray-800);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.db-ring-stat-lbl {
    font-size: 0.7rem;
    color: var(--c-gray-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.db-ring-divider {
    width: 1px;
    height: 32px;
    background: var(--c-gray-200);
}


/* ═══════════════════════════════════
   TABLE
   ═══════════════════════════════════ */

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tbl-body-size);
    font-family: var(--font);
    margin: 0;
}

.db-table thead th {
    height: var(--tbl-head-h);
    padding: 0 var(--tbl-cell-px);
    background: var(--c-gray-50);
    font-size: var(--tbl-head-size);
    font-weight: var(--ds-fw-bold);
    color: var(--c-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--c-gray-200);
    white-space: nowrap;
    vertical-align: middle;
}

.db-table tbody td {
    height: var(--tbl-row-h);
    padding: 0 var(--tbl-cell-px);
    vertical-align: middle;
    border-bottom: 1px solid var(--c-gray-100);
    color: var(--c-gray-700);
    font-size: var(--tbl-body-size);
}

.db-table tbody tr:last-child td {
    border-bottom: none;
}

.db-table tbody tr:hover td {
    background: var(--c-gray-50);
}

/* Time cell */
.db-time-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.t-main {
    font-weight: var(--ds-fw-semibold);
    color: var(--c-gray-800);
    font-size: var(--ds-body);
    font-variant-numeric: tabular-nums;
}

.t-sub {
    font-size: var(--ds-small);
    color: var(--c-gray-400);
}

/* Connection pair */
.db-conn-pair {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.db-conn-badge {
    font-size: var(--ds-small);
    font-weight: var(--ds-fw-semibold);
    color: var(--c-gray-700);
    background: var(--c-gray-100);
    border: 1px solid var(--c-gray-200);
    border-radius: 4px;
    padding: 2px 6px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-conn-arrow {
    font-size: var(--ds-small);
    color: var(--c-gray-400);
}

/* Type pill */
.db-type-pill {
    font-size: var(--ds-small);
    font-weight: var(--ds-fw-semibold);
    color: var(--c-gray-600);
    background: var(--c-gray-100);
    border-radius: 20px;
    padding: 3px 8px;
    white-space: nowrap;
}

/* Status pill */
.db-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--ds-small);
    font-weight: var(--ds-fw-bold);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}

.pill-sync {
    color: var(--c-success);
    background: color-mix(in srgb, var(--c-success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-success) 25%, transparent);
}

.pill-drift {
    color: var(--c-warning);
    background: color-mix(in srgb, var(--c-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-warning) 25%, transparent);
}

.db-user-cell {
    font-size: var(--ds-label);
    color: var(--c-gray-400);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}


/* ═══════════════════════════════════
   ENVIRONMENT HEALTH LIST
   ═══════════════════════════════════ */

.db-env-list {
    display: flex;
    flex-direction: column;
}

.db-env-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--c-gray-100);
    transition: background .15s;
}

.db-env-row:last-child { border-bottom: none; }
.db-env-row:hover { background: var(--c-gray-50); }

/* Colored left indicator dot */
.db-env-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .3s;
}

.ind-idle          { background: var(--c-gray-300); }
.ind-ok            { background: var(--c-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-success) 20%, transparent); }
.ind-fail          { background: var(--c-danger);  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-danger) 20%, transparent);  }

.db-env-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.db-env-name {
    font-size: var(--ds-body);
    font-weight: var(--ds-fw-semibold);
    color: var(--c-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-env-type {
    font-size: var(--ds-small);
    color: var(--c-gray-400);
    font-weight: var(--ds-fw-medium);
}

.db-test-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 5px 12px;
    border: 1px solid var(--c-gray-300);
    border-radius: 6px;
    background: #fff;
    color: var(--c-gray-600);
    font-size: var(--ds-label);
    font-weight: var(--ds-fw-semibold);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: var(--font);
    white-space: nowrap;
    flex-shrink: 0;
}

.db-test-btn:hover:not(:disabled) {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 4%, #fff);
}

.db-test-btn.btn-testing {
    color: var(--c-gray-400);
    cursor: default;
}

.db-test-btn:disabled { opacity: .6; cursor: default; }


/* ═══════════════════════════════════
   QUICK ACTIONS
   ═══════════════════════════════════ */

.db-actions-section {
    padding: 1.25rem 2.5rem 2.5rem;
}

.db-actions-title {
    font-size: var(--ds-body);
    font-weight: var(--ds-fw-bold);
    color: var(--c-gray-700);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    letter-spacing: -0.01em;
}

.db-actions-title i {
    color: var(--c-primary);
}

.db-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
}

.db-action-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: #fff;
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius);
    box-shadow: var(--sh-sm);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.db-action-card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--sh-md);
    text-decoration: none;
}

.db-action-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    flex-shrink: 0;
}

.db-action-body {
    flex: 1;
    min-width: 0;
}

.db-action-title {
    font-size: var(--ds-body);
    font-weight: var(--ds-fw-semibold);
    color: var(--c-gray-800);
    line-height: 1.25;
}

.db-action-desc {
    font-size: var(--ds-small);
    color: var(--c-gray-500);
    margin-top: 2px;
    font-weight: var(--ds-fw-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-action-chevron {
    color: var(--c-gray-300);
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: color .15s, transform .15s;
}

.db-action-card:hover .db-action-chevron {
    color: var(--c-primary);
    transform: translateX(2px);
}


/* ═══════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════ */

.db-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 3rem 1.5rem;
    color: var(--c-gray-400);
    text-align: center;
}

.db-empty i { font-size: 2rem; }

.db-empty p {
    font-size: var(--ds-body);
    margin: 0;
    color: var(--c-gray-500);
}

.db-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--radius);
    font-size: var(--ds-body);
    font-weight: var(--ds-fw-semibold);
    text-decoration: none;
    transition: opacity .15s;
}

.db-btn-primary:hover { opacity: .85; color: #fff; }


/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */

@media (max-width: 1280px) {
    .db-kpi-grid    { grid-template-columns: repeat(2, 1fr); }
    .db-actions-grid { grid-template-columns: repeat(2, 1fr); }

    .db-col-8 { flex: 0 0 calc(60% - 0.625rem); }
    .db-col-4 { flex: 0 0 calc(40% - 0.625rem); }
    .db-col-7 { flex: 0 0 calc(55% - 0.625rem); }
    .db-col-5 { flex: 0 0 calc(45% - 0.625rem); }
}

@media (max-width: 1024px) {
    .db-kpi-grid    { grid-template-columns: repeat(2, 1fr); }
    .db-actions-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .db-kpi-grid    { grid-template-columns: repeat(2, 1fr); }
    .db-actions-grid { grid-template-columns: repeat(2, 1fr); }
    .db-header { padding: 0.875rem 1.25rem; }
    .db-kpi-section,
    .db-section,
    .db-actions-section { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 900px) {
    .db-header { padding: 0.875rem 1.5rem; }
    .db-kpi-section,
    .db-section,
    .db-actions-section { padding-left: 1.5rem; padding-right: 1.5rem; }

    .db-row { flex-direction: column; }
    .db-col-4,
    .db-col-5,
    .db-col-7,
    .db-col-8 { flex: 0 0 100%; }
}

@media (max-width: 640px) {
    .db-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .db-kpi-grid { grid-template-columns: 1fr; }
    .db-actions-grid { grid-template-columns: 1fr; }
    .db-kpi-section,
    .db-section,
    .db-actions-section { padding-left: 1rem; padding-right: 1rem; }
}