/* =====================================================
 * VGen Portal — Reusable component styles
 * Target: Components/Shared/Ui/*.razor
 * ===================================================== */

/* ---------- VBadge ---------- */
.v-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    height: 20px;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.v-badge--sm {
    height: 18px;
    padding: 1px 6px;
    font-size: 10.5px;
    gap: 4px;
}

.v-badge--success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.v-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.v-badge--danger  { background: var(--color-danger-bg);  color: var(--color-danger);  border-color: var(--color-danger-border); }
.v-badge--info    { background: var(--color-info-bg);    color: var(--color-info);    border-color: var(--color-info-border); }
.v-badge--brand   { background: var(--color-brand-soft); color: var(--color-brand-text); border-color: #DCDCF6; }
.v-badge--prod    { background: var(--color-prod-bg);    color: var(--color-prod);    border-color: var(--color-danger-border); }
.v-badge--test    { background: var(--color-test-bg);    color: var(--color-test);    border-color: #A9D6DF; }
.v-badge--mono    { background: #0F1115; color: #E8EBF1; border-color: #1F232B; }

.v-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: currentColor;
}

/* ---------- VStatusDot ---------- */
.v-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--color-text-soft);
    flex-shrink: 0;
}

.v-dot--sm { width: 6px; height: 6px; }
.v-dot--lg { width: 10px; height: 10px; }
.v-dot--success { background: var(--color-success); }
.v-dot--warning { background: var(--color-warning); }
.v-dot--danger  { background: var(--color-danger); }
.v-dot--info    { background: var(--color-info); }
.v-dot--brand   { background: var(--color-brand); }

/* ---------- VButton ---------- */
.v-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    letter-spacing: -0.005em;
    transition: all .12s;
    text-decoration: none;
}

.v-btn:hover { text-decoration: none; }
.v-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.v-btn--sm { padding: 5px 10px; height: 28px; font-size: 12px; gap: 6px; }
.v-btn--lg { padding: 10px 18px; height: 40px; font-size: 14px; gap: 8px; border-radius: var(--radius-lg); }

.v-btn--primary   { background: var(--color-brand); color: #fff; border-color: var(--color-brand); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 1px rgba(0,0,0,0.08); }
.v-btn--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: #fff; }

.v-btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.v-btn--secondary:hover { background: var(--color-bg); }

.v-btn--ghost { background: transparent; color: var(--color-text); border-color: transparent; }
.v-btn--ghost:hover { background: var(--color-bg); }

.v-btn--subtle { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }
.v-btn--subtle:hover { background: #EEF0F4; }

.v-btn--success   { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.v-btn--success:hover { background: #128A3D; border-color: #128A3D; color: #fff; }

.v-btn--danger    { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.v-btn--danger:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; }

.v-btn--active {
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
    border-color: var(--color-brand-soft);
}

/* ---------- VCard ---------- */
.v-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
}

.v-card__header {
    padding: var(--sp-5) var(--sp-7);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

.v-card__title {
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    flex: 1;
}

.v-card__subtitle {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.v-card__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
}

.v-card__body {
    padding: var(--sp-7);
    flex: 1;
}

.v-card__body--tight { padding: var(--sp-5); }
.v-card__body--none  { padding: 0; }

.v-card__footer {
    padding: var(--sp-5) var(--sp-7);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* ---------- VSectionHeader ---------- */
.v-section-header {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-7);
    margin-bottom: var(--sp-7);
}

.v-section-header__text { flex: 1; min-width: 0; }

.v-section-header__title {
    font-size: var(--fs-20);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.015em;
    margin: 0;
}

.v-section-header__description {
    font-size: var(--fs-13);
    color: var(--color-text-muted);
    margin-top: var(--sp-1);
    line-height: 1.55;
}

.v-section-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

/* ---------- VEmptyState ---------- */
.v-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-10) var(--sp-8);
    text-align: center;
    color: var(--color-text-muted);
}

.v-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background: var(--color-brand-soft);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-24);
    margin-bottom: var(--sp-7);
}

.v-empty__title {
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--sp-2);
}

.v-empty__description {
    font-size: var(--fs-13);
    max-width: 420px;
    line-height: 1.55;
    margin-bottom: var(--sp-7);
}

.v-empty__actions {
    display: flex;
    gap: var(--sp-3);
}

/* ---------- VToolbar ---------- */
.v-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-7);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--sp-7);
    flex-wrap: wrap;
}

.v-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.v-toolbar__sep {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 var(--sp-2);
}

.v-toolbar__spacer { flex: 1; }

/* ---------- Tables (dense) ---------- */
.v-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-13);
}

.v-table thead th {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.v-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-lg); }
.v-table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-lg); }

.v-table tbody td {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}

.v-table tbody tr:last-child td { border-bottom: 0; }
.v-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.v-table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-lg); }

.v-table tbody tr:hover td {
    background: var(--color-surface-alt);
}

/* ---------- Overflow menu (3-dot) ---------- */
.v-overflow {
    position: relative;
    display: inline-block;
}

.v-overflow__trigger {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s;
}

.v-overflow__trigger:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.v-overflow__menu {
    /* Fixed to the viewport so the menu escapes table row / card overflow.
       Actual top/left are set inline by vOverflow.position() in ui.js. */
    position: fixed;
    top: 0;
    left: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-1);
    z-index: 1050;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.v-overflow__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 7px 10px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--fs-13);
    font-family: inherit;
    text-align: left;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s;
}

.v-overflow__item:hover {
    background: var(--color-bg);
}

.v-overflow__item--danger { color: var(--color-danger); }
.v-overflow__item--danger:hover { background: var(--color-danger-bg); }

.v-overflow__sep {
    height: 1px;
    background: var(--color-border);
    margin: var(--sp-1) 0;
}