/**
 * ValidGraph — Base Component Styles
 *
 * Shared components used across dashboard, account, and pricing blocks.
 * Depends on tokens.css for CSS custom property values.
 */

/* =========================================================================
   Reset & Foundation
   ========================================================================= */

.vg-root,
.vg-account-root,
.vg-pricing-root {
    font-family: var(--vg-font);
    line-height: var(--vg-leading);
    -webkit-text-size-adjust: 100%;
}

.vg-root *,
.vg-root *::before,
.vg-root *::after,
.vg-account-root *,
.vg-account-root *::before,
.vg-account-root *::after,
.vg-pricing-root *,
.vg-pricing-root *::before,
.vg-pricing-root *::after {
    box-sizing: border-box;
}

/* Ensure [hidden] works even when theme CSS overrides it. */
.vg-root [hidden],
.vg-account-root [hidden],
.vg-pricing-root [hidden] {
    display: none !important;
}

/* =========================================================================
   Links
   ========================================================================= */

.vg-root a,
.vg-account-root a,
.vg-pricing-root a {
    color: var(--vg-primary);
    text-decoration: none;
}

.vg-root a:hover,
.vg-account-root a:hover,
.vg-pricing-root a:hover {
    text-decoration: underline;
}

/* =========================================================================
   Accessibility: Focus-Visible
   ========================================================================= */

.vg-root :focus-visible,
.vg-account-root :focus-visible,
.vg-pricing-root :focus-visible {
    outline: 2px solid var(--vg-focus-ring);
    outline-offset: var(--vg-focus-ring-offset);
}

/* Remove default outline for mouse/touch users */
.vg-root :focus:not(:focus-visible),
.vg-account-root :focus:not(:focus-visible),
.vg-pricing-root :focus:not(:focus-visible) {
    outline: none;
}

/* Inputs use box-shadow ring instead of outline to avoid layout shift */
.vg-input:focus-visible,
.vg-select:focus-visible,
.vg-textarea:focus-visible {
    outline: none;
    border-color: var(--vg-focus-ring);
    box-shadow: 0 0 0 3px rgba(21, 48, 69, 0.2);
}

/* =========================================================================
   Utility
   ========================================================================= */

.vg-hidden {
    display: none !important;
}

.vg-muted {
    color: var(--vg-text-muted);
    font-size: var(--vg-text-base);
}

.vg-mt {
    margin-top: var(--vg-space-4);
}

/* =========================================================================
   Buttons
   ========================================================================= */

.vg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--vg-radius-sm);
    font-size: var(--vg-text-base);
    font-weight: 600;
    font-family: var(--vg-font);
    border: none;
    cursor: pointer;
    transition: background var(--vg-transition), opacity var(--vg-transition), box-shadow var(--vg-transition);
    line-height: var(--vg-leading-tight);
}

.vg-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vg-btn-primary {
    background: var(--vg-primary);
    color: #ffffff;
}

.vg-btn-primary:hover:not(:disabled) {
    background: var(--vg-primary-hover);
    box-shadow: var(--vg-shadow-md);
}

/* Ensure primary buttons as links override theme anchor color. */
.vg-root a.vg-btn-primary,
.vg-root a.vg-btn-primary:hover,
.vg-root a.vg-btn-primary:visited,
.vg-root a.vg-btn-primary:focus,
.vg-account-root a.vg-btn-primary,
.vg-account-root a.vg-btn-primary:hover,
.vg-account-root a.vg-btn-primary:visited,
.vg-account-root a.vg-btn-primary:focus,
.vg-pricing-root a.vg-btn-primary,
.vg-pricing-root a.vg-btn-primary:hover,
.vg-pricing-root a.vg-btn-primary:visited,
.vg-pricing-root a.vg-btn-primary:focus {
    color: #ffffff !important;
    text-decoration: none;
}

.vg-btn-secondary {
    background: transparent;
    color: var(--vg-primary);
    border: 1px solid var(--vg-border);
}

.vg-btn-secondary:hover:not(:disabled) {
    background: var(--vg-surface-hover);
    border-color: var(--vg-primary);
    box-shadow: var(--vg-shadow);
}

.vg-btn-success {
    background: var(--vg-success);
    color: #ffffff;
}

.vg-btn-success:hover:not(:disabled) {
    background: var(--vg-success-hover);
    box-shadow: var(--vg-shadow-md);
}

.vg-btn-warning {
    background: var(--vg-accent);
    color: var(--vg-surface);
    font-weight: 700;
}

.vg-btn-warning:hover:not(:disabled) {
    background: var(--vg-accent-hover);
    box-shadow: var(--vg-shadow-md);
}

.vg-btn-danger {
    background: transparent;
    color: var(--vg-danger);
    border: 1px solid var(--vg-danger);
    cursor: pointer;
    font-weight: 500;
    transition: background var(--vg-transition), color var(--vg-transition);
}

.vg-btn-danger:hover:not(:disabled) {
    background: var(--vg-danger);
    color: #ffffff;
}

/* Size variants */
.vg-btn-block {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}

.vg-btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: var(--vg-text-xs);
    border-radius: 4px;
}

.vg-btn-small {
    padding: 0.3rem 0.7rem;
    font-size: 0.7rem;
    border-radius: var(--vg-radius-sm);
}

.vg-btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
    line-height: 1;
}

/* Ghost and link variants */
.vg-btn-ghost {
    background: none;
    border: 1px solid var(--vg-border-light);
    color: var(--vg-text-muted);
    border-radius: var(--vg-radius-sm);
    cursor: pointer;
}

.vg-btn-ghost:hover {
    background: var(--vg-surface-hover);
}

.vg-btn-outline {
    background: transparent;
    border: 1px solid var(--vg-border-light);
    color: var(--vg-text-muted);
    cursor: pointer;
    transition: all var(--vg-transition);
}

.vg-btn-outline:hover {
    border-color: var(--vg-primary);
    color: var(--vg-primary);
}

.vg-link-btn {
    background: none;
    border: none;
    color: var(--vg-primary);
    cursor: pointer;
    font-size: inherit;
    padding: 0;
}

.vg-link-btn:hover {
    text-decoration: underline;
}

.vg-link-sm {
    font-size: var(--vg-text-xs);
}

.vg-btn-copy {
    margin: 0.5rem 0 0.25rem;
    background: var(--vg-surface);
    border: 1px solid var(--vg-border-light);
    color: var(--vg-text);
    cursor: pointer;
    transition: background var(--vg-transition);
}

.vg-btn-copy:hover {
    background: var(--vg-surface-hover);
}

.vg-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    color: var(--vg-accent);
    font-family: var(--vg-font);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: var(--vg-space-4);
    transition: color var(--vg-transition);
}

.vg-btn-link:hover {
    color: var(--vg-primary);
}

.vg-btn-full {
    width: 100%;
}

/* =========================================================================
   Form Elements
   ========================================================================= */

.vg-form {
    display: flex;
    flex-direction: column;
    gap: var(--vg-space-4);
}

.vg-field {
    display: flex;
    flex-direction: column;
    gap: var(--vg-space-1);
}

.vg-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: var(--vg-text-secondary);
}

.vg-input {
    width: 100%;
    background: var(--vg-surface);
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius-sm);
    color: var(--vg-text);
    padding: 0.6rem 0.8rem;
    font-size: var(--vg-text-base);
    font-family: var(--vg-font);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vg-input:focus {
    outline: none;
    border-color: var(--vg-focus-ring);
    box-shadow: 0 0 0 3px rgba(21, 48, 69, 0.2);
}

.vg-input::placeholder {
    color: var(--vg-text-muted);
}

.vg-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: var(--vg-leading);
    font-family: var(--vg-font-mono);
    font-size: 0.8rem;
}

.vg-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--vg-border-light);
    border-radius: var(--vg-radius-sm);
    font-size: 0.8rem;
    font-family: var(--vg-font);
    color: var(--vg-text);
    background: var(--vg-surface);
    cursor: pointer;
    transition: border-color 0.2s;
}

.vg-select:focus {
    outline: none;
    border-color: var(--vg-focus-ring);
    box-shadow: 0 0 0 3px rgba(21, 48, 69, 0.2);
}

.vg-field-help {
    display: block;
    font-size: var(--vg-text-xs);
    color: var(--vg-text-muted);
    margin-top: var(--vg-space-1);
}

.vg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vg-space-4);
}

.vg-form-grid .vg-btn {
    grid-column: 1 / -1;
}

.vg-field-full {
    grid-column: 1 / -1;
}

.vg-input-file {
    font-size: var(--vg-text-base);
    color: var(--vg-text-muted);
}

.vg-input-file::file-selector-button {
    background: var(--vg-surface-hover);
    color: var(--vg-text);
    border: 1px solid var(--vg-border-light);
    padding: 0.5rem 1rem;
    border-radius: var(--vg-radius-sm);
    cursor: pointer;
    font-weight: 500;
    margin-right: 0.75rem;
    transition: background 0.2s;
}

.vg-input-file::file-selector-button:hover {
    background: var(--vg-border-light);
}

/* =========================================================================
   Cards
   ========================================================================= */

.vg-card {
    background: var(--vg-surface);
    border: 1px solid var(--vg-border-light);
    border-radius: var(--vg-radius);
    padding: var(--vg-space-6);
    margin-bottom: var(--vg-space-6);
    box-shadow: var(--vg-shadow);
}

.vg-card h3 {
    font-size: var(--vg-text-md);
    font-weight: 600;
    margin: 0 0 var(--vg-space-3);
}

.vg-card-title {
    font-size: var(--vg-text-lg);
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--vg-primary);
}

.vg-card-desc {
    color: var(--vg-text-muted);
    font-size: var(--vg-text-base);
    margin: 0 0 1.25rem;
}

.vg-card-danger {
    border-color: rgba(220, 38, 38, 0.25);
}

.vg-card-danger h3 {
    color: var(--vg-danger);
}

/* =========================================================================
   Tables
   ========================================================================= */

.vg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}

.vg-table thead th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    color: var(--vg-text-secondary);
    font-weight: 600;
    font-size: var(--vg-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--vg-border-light);
    background: var(--vg-surface);
}

.vg-table tbody tr {
    background: var(--vg-surface);
}

.vg-table tbody tr:nth-child(even) {
    background: var(--vg-bg);
}

.vg-table tbody tr:hover {
    background: var(--vg-surface-hover);
}

.vg-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--vg-border-light);
}

/* =========================================================================
   Badges
   ========================================================================= */

.vg-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--vg-radius-full);
    font-size: var(--vg-text-xs);
    font-weight: 600;
}

.vg-badge-ok {
    background: rgba(22, 163, 74, 0.1);
    color: var(--vg-success);
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.vg-badge-error {
    background: rgba(220, 38, 38, 0.08);
    color: var(--vg-danger);
    border: 1px solid rgba(220, 38, 38, 0.2);
}

/* Plan badges */
.vg-plan-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--vg-radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Plan colors: dark background context (dashboard header) */
.vg-plan-free       { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); }
.vg-plan-pro        { background: var(--vg-accent-on-dark); color: var(--vg-primary); }
.vg-plan-agency     { background: rgba(238, 170, 102, 0.3); color: var(--vg-primary); }
.vg-plan-enterprise { background: #ffffff; color: var(--vg-primary); }

/* Plan colors: light background context (account sidebar) */
.vg-plan-badge-light.vg-plan-free       { background: var(--vg-surface-hover); color: var(--vg-text-secondary); }
.vg-plan-badge-light.vg-plan-pro        { background: #dbeafe; color: #1d4ed8; }
.vg-plan-badge-light.vg-plan-agency     { background: #fef3c7; color: #92400e; }
.vg-plan-badge-light.vg-plan-enterprise { background: #ede9fe; color: #6d28d9; }

/* =========================================================================
   Status & Alerts
   ========================================================================= */

.vg-status {
    margin-top: 0.75rem;
    font-size: var(--vg-text-base);
    color: var(--vg-success);
}

.vg-status-ok    { color: var(--vg-success); }
.vg-status-error { color: var(--vg-danger); }

.vg-alert-success {
    background: var(--vg-success-light);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: var(--vg-radius);
    padding: var(--vg-space-3) var(--vg-space-4);
}

/* =========================================================================
   Dividers
   ========================================================================= */

.vg-divider {
    border: none;
    border-top: 1px solid var(--vg-border-light);
    margin: var(--vg-space-6) 0;
}

/* =========================================================================
   Loading States
   ========================================================================= */

.vg-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--vg-border-light);
    border-top-color: var(--vg-primary);
    border-radius: 50%;
    animation: vg-spin 0.6s linear infinite;
    vertical-align: middle;
}

.vg-spinner--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

@keyframes vg-spin {
    to { transform: rotate(360deg); }
}

.vg-skeleton {
    background: linear-gradient(90deg, var(--vg-surface-hover) 25%, var(--vg-border-light) 50%, var(--vg-surface-hover) 75%);
    background-size: 200% 100%;
    animation: vg-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--vg-radius-sm);
    min-height: 1em;
}

.vg-skeleton--text {
    height: var(--vg-text-base);
    margin-bottom: 0.5rem;
    max-width: 80%;
}

.vg-skeleton--block {
    height: 80px;
    margin-bottom: var(--vg-space-4);
}

@keyframes vg-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.vg-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

/* =========================================================================
   Accessibility: Reduced Motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .vg-spinner {
        animation-duration: 1.5s;
    }

    .vg-skeleton {
        animation: none;
        background: var(--vg-surface-hover);
    }

    .vg-root *,
    .vg-account-root *,
    .vg-pricing-root * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =========================================================================
   Responsive: Shared
   ========================================================================= */

@media (max-width: 768px) {
    .vg-form-grid {
        grid-template-columns: 1fr;
    }
}