/* Shared bits for both looks: the trial pill and the Plan and billing page. Plain CSS, no build step. */

/* Trial / plan tag by the company name (components/trial-pill): a tiny red tag over the company avatar in the sidebar,
   a normal pill after the logo on narrow screens. The anchor has no height so it never widens the company button. */
.vifaa-trial-pill { display: inline-flex; align-items: center; margin-inline-start: .6rem; padding: .15rem .6rem; border-radius: 9999px; white-space: nowrap;
    font-size: .7rem; font-weight: 700; line-height: 1.2; text-decoration: none; color: #4b5563; background: #f3f4f6; border: 1px solid #e5e7eb; }
a.vifaa-trial-pill:hover { background: #e5e7eb; }
.vifaa-trial-pill--soon { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.dark .vifaa-trial-pill { color: #d1d5db; background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .16); }
.dark .vifaa-trial-pill--soon { color: #fcd34d; background: rgb(245 158 11 / .15); border-color: rgb(245 158 11 / .45); }
.vifaa-trial-short { display: none; }
@media (max-width: 420px) { .vifaa-trial-full { display: none; } .vifaa-trial-short { display: inline; } }
/* Tagline under the product name: same tag look as the trial/plan tag, a little bigger. */
.vifaa-tagline-tag { display: block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .14rem .4rem; border-radius: .15rem;
    font-size: .55rem; font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #0f766e; }
.dark .vifaa-tagline-tag { background: #0d9488; }
@media (max-width: 360px) { .vifaa-tagline-tag { display: none; } }
.vifaa-trial-anchor { position: relative; height: 0; margin-inline: 1rem; z-index: 2; pointer-events: none; }
.vifaa-trial-pill--tenant { position: absolute; inset-inline-start: .5rem; top: -.8rem; margin: 0; padding: .1rem .26rem; border-radius: .12rem; font-size: .42rem; line-height: 1;
    justify-content: center; text-align: center; letter-spacing: .03em; text-transform: uppercase; pointer-events: auto; box-shadow: 0 0 0 1.5px var(--vifaa-ring, #fff); }
.vifaa-trial-pill.vifaa-trial-pill--tenant, .dark .vifaa-trial-pill.vifaa-trial-pill--tenant { color: #fff; background: #dc2626; border-color: #dc2626; }
a.vifaa-trial-pill.vifaa-trial-pill--tenant:hover { background: #b91c1c; border-color: #b91c1c; }
.vifaa-trial-pill.vifaa-trial-pill--tenant.vifaa-trial-pill--plan, .dark .vifaa-trial-pill.vifaa-trial-pill--tenant.vifaa-trial-pill--plan { background: #2563eb; border-color: #2563eb; }
a.vifaa-trial-pill.vifaa-trial-pill--tenant.vifaa-trial-pill--plan:hover { background: #1d4ed8; border-color: #1d4ed8; }
.vifaa-trial-pill--tenant.vifaa-trial-pill--plan { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; display: block; }
.vifaa-trial-pill--plan:not(.vifaa-trial-pill--tenant) { color: #1e40af; background: #dbeafe; border-color: #93c5fd; }
.dark .vifaa-trial-pill--plan:not(.vifaa-trial-pill--tenant) { color: #93c5fd; background: rgb(59 130 246 / .18); border-color: rgb(96 165 250 / .5); }
.dark .fi-sidebar { --vifaa-ring: var(--gray-900, #18181b); }
@media (min-width: 1024px) { .vifaa-trial-pill--topbar { display: none; } }

.pb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e5e7eb;
    color: #374151;
}
.pb-pill.is-soon { background: #fef3c7; color: #92400e; }
.pb-pill.is-late { background: #fee2e2; color: #991b1b; }

.pb-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pb-card {
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dark .pb-card { background: #10302d; border-color: rgba(255, 255, 255, 0.1); }
.pb-card.is-current { border-color: var(--primary-700, #0f766e); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-700, #0f766e) 25%, transparent); }
.pb-card.is-disabled { opacity: 0.6; }
.pb-price { font-size: 1.5rem; font-weight: 700; }
.pb-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary-700, #0f766e); }
.pb-muted { font-size: 0.8rem; color: #6b7280; }
.pb-list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; }

.pb-bar { height: 0.5rem; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.dark .pb-bar { background: rgba(255, 255, 255, 0.12); }
.pb-bar > span { display: block; height: 100%; background: var(--primary-700, #0f766e); border-radius: 999px; }
.pb-bar.is-full > span { background: #dc2626; }
.pb-bar.is-near > span { background: #f59e0b; }

/* ---- Footer ---- */
.vifaa-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .6rem; margin-top: 1.5rem; padding: 1rem 1rem 1.25rem;
    border-top: 1px solid var(--gray-200, #e5e7eb); font-size: .8rem; color: var(--gray-500, #6b7280); text-align: center; }
.dark .vifaa-footer { border-top-color: rgb(255 255 255 / .12); color: var(--gray-400, #9ca3af); }
.vifaa-footer-brand { display: inline-flex; align-items: center; gap: .4rem; color: var(--gray-700, #374151); }
.dark .vifaa-footer-brand { color: var(--gray-200, #e5e7eb); }
.vifaa-footer-mark { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: .4rem; background: var(--vifaa-logo-bg, linear-gradient(135deg, #0f766e, #10b981)); color: #fff; font-size: .8rem; font-weight: 700; line-height: 1; }
.vifaa-footer-version { padding: .05rem .45rem; border-radius: 9999px; background: var(--gray-100, #f3f4f6); font-size: .7rem; font-weight: 600; }
.dark .vifaa-footer-version { background: rgb(255 255 255 / .1); }
.vifaa-footer a { color: var(--primary-600, #0d9488); font-weight: 600; text-decoration: none; }
.vifaa-footer a:hover { text-decoration: underline; }
@media (max-width: 480px) { .vifaa-footer-sep { display: none; } .vifaa-footer { flex-direction: column; } }

/* ---- Help page ---- */
.gs-hero { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: 1rem; color: #fff; background: var(--vifaa-logo-bg, linear-gradient(135deg, #0f766e, #10b981)); }
.gs-hero-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: 1rem; background: rgb(255 255 255 / .2); }
.gs-hero-icon svg { width: 1.9rem; height: 1.9rem; }
.gs-hero-body { flex: 1 1 auto; min-width: 0; }
.gs-hero-title { font-size: 1.25rem; font-weight: 700; }
.gs-hero-text { margin-top: .15rem; font-size: .9rem; opacity: .92; }
.gs-hero-bar.pb-bar { margin-top: .7rem; background: rgb(255 255 255 / .28); }
.gs-hero-bar.pb-bar > span { background: #fff; }

.gs-steps { list-style: none; margin: 0; padding: 0; }
.gs-step { display: flex; align-items: center; gap: .875rem; padding: .8rem 0; border-top: 1px solid var(--gray-100, #f3f4f6); }
.gs-step:first-child { border-top: 0; padding-top: 0; }
.gs-step:last-child { padding-bottom: 0; }
.dark .gs-step { border-top-color: rgb(255 255 255 / .1); }
.gs-step-icon, .gs-tile { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: .75rem; background: var(--primary-50, #f0fdfa); color: var(--primary-600, #0d9488); }
.gs-step-icon svg, .gs-tile svg { width: 1.4rem; height: 1.4rem; }
/* Done: a small soft-green ring with a thin tick, not a big solid block. */
.gs-step-icon.is-done { background: transparent; }
.gs-step-icon.is-done svg { box-sizing: content-box; width: .95rem; height: .95rem; padding: .3rem; border-radius: 9999px; background: #dcfce7; color: #16a34a; box-shadow: inset 0 0 0 1px #bbf7d0; stroke-width: 2.5; }
.dark .gs-step-icon.is-done svg { background: rgb(34 197 94 / .16); color: #4ade80; box-shadow: inset 0 0 0 1px rgb(74 222 128 / .35); }
.dark .gs-step-icon:not(.is-done), .dark .gs-tile { background: rgb(45 212 191 / .14); color: var(--primary-400, #2dd4bf); }
.gs-step-body { flex: 1 1 auto; min-width: 0; }
.gs-step-title { font-size: .95rem; font-weight: 600; color: var(--gray-950, #030712); }
.dark .gs-step-title { color: #fff; }
.gs-step-hint { font-size: .85rem; line-height: 1.35rem; color: var(--gray-600, #4b5563); }
.dark .gs-step-hint { color: var(--gray-400, #9ca3af); }
.gs-optional { margin-left: .4rem; font-size: .7rem; font-weight: 500; color: var(--gray-500, #6b7280); }
.gs-open { flex-shrink: 0; white-space: nowrap; min-height: 2.5rem; display: inline-flex; align-items: center; padding: 0 1rem; border: 1px solid var(--primary-600, #0d9488); border-radius: .6rem;
    font-size: .85rem; font-weight: 600; color: var(--primary-600, #0d9488); text-decoration: none; }
.gs-open:hover { background: var(--primary-600, #0d9488); color: #fff; }
.dark .gs-open { color: var(--primary-400, #2dd4bf); border-color: var(--primary-400, #2dd4bf); }
@media (max-width: 520px) { .gs-step { flex-wrap: wrap; } .gs-open { margin-left: 3.4rem; } }

.gs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.gs-card { padding: 1rem; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 1rem; background: #fff; }
.dark .gs-card { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .1); }
.gs-card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.gs-card-title { font-weight: 600; color: var(--gray-950, #030712); }
.dark .gs-card-title { color: #fff; }
.gs-card-text { margin: 0 0 .6rem; font-size: .875rem; line-height: 1.4rem; color: var(--gray-600, #4b5563); }
.dark .gs-card-text { color: var(--gray-400, #9ca3af); }
.gs-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.gs-chip { padding: .1rem .55rem; border-radius: 9999px; background: var(--gray-100, #f3f4f6); font-size: .72rem; color: var(--gray-700, #374151); }
.dark .gs-chip { background: rgb(255 255 255 / .1); color: var(--gray-300, #d1d5db); }
.gs-flow-steps { list-style: none; margin: 0; padding: 0; counter-reset: gsflow; display: flex; flex-direction: column; gap: .6rem; }
.gs-flow-steps li { counter-increment: gsflow; display: flex; gap: .7rem; font-size: .875rem; line-height: 1.4rem; color: var(--gray-800, #1f2937); }
.dark .gs-flow-steps li { color: var(--gray-200, #e5e7eb); }
.gs-flow-steps li::before { content: counter(gsflow); flex-shrink: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .05rem; border-radius: 9999px;
    background: var(--primary-50, #f0fdfa); color: var(--primary-600, #0d9488); font-size: .75rem; font-weight: 600; }
.dark .gs-flow-steps li::before { background: rgb(45 212 191 / .14); color: var(--primary-400, #2dd4bf); }

/* ---- Phone: bottom bar and "More" tile sheet (components/bottom-nav), bigger touch targets in forms ---- */
.vifaa-bottom-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: none; align-items: stretch; justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom); background: var(--gray-50, #f9fafb); border-top: 1px solid var(--gray-200, #e5e7eb); }
.dark .vifaa-bottom-nav { background: var(--gray-900, #111827); border-top-color: var(--gray-700, #374151); }
.vifaa-bottom-nav > a, .vifaa-bottom-nav > button, .vifaa-bottom-nav > span { flex: 1; min-height: 3.75rem; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; font-size: .75rem; color: var(--gray-600, #4b5563); background: none; border: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dark .vifaa-bottom-nav > a, .dark .vifaa-bottom-nav > button { color: var(--gray-300, #d1d5db); }
.vifaa-bottom-nav > a:active, .vifaa-bottom-nav > button:active { background: var(--gray-100, #f3f4f6); }
.dark .vifaa-bottom-nav > a:active, .dark .vifaa-bottom-nav > button:active { background: var(--gray-800, #1f2937); }
.vifaa-bottom-nav > a > svg, .vifaa-bottom-nav > button > svg { width: 1.6rem; height: 1.6rem; }
.vifaa-bottom-nav > a.is-active { color: var(--primary-600, #0d9488); font-weight: 600; }
.vifaa-bottom-nav > a.is-centre { color: var(--gray-700, #374151); font-weight: 600; }
.vifaa-bottom-nav > a.is-centre > svg { width: 3.4rem; height: 3.4rem; margin-top: -1.2rem; padding: .8rem; border-radius: 9999px; color: #fff; background: var(--primary-600, #0d9488); box-shadow: 0 3px 8px rgb(0 0 0 / .3); }
.dark .vifaa-bottom-nav > a.is-centre { color: var(--gray-200, #e5e7eb); }
.vifaa-more-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .45); }
.vifaa-more-sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 41; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--gray-50, #f9fafb); color: var(--gray-900, #111827); border-radius: 1rem 1rem 0 0; box-shadow: 0 -4px 16px rgb(0 0 0 / .2); }
.dark .vifaa-more-sheet { background: var(--gray-900, #111827); color: var(--gray-100, #f3f4f6); }
.vifaa-more-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; background: inherit; font-size: 1rem; }
.vifaa-more-head button { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 9999px; background: var(--gray-200, #e5e7eb); color: var(--gray-700, #374151); }
.dark .vifaa-more-head button { background: var(--gray-800, #1f2937); color: var(--gray-200, #e5e7eb); }
.vifaa-more-head svg { width: 1.4rem; height: 1.4rem; }
.vifaa-more-section { padding-top: .75rem; margin-top: .75rem; border-top: 1px solid var(--gray-200, #e5e7eb); }
.vifaa-more-section:first-of-type { margin-top: 0; }
.dark .vifaa-more-section { border-top-color: var(--gray-700, #374151); }
.vifaa-more-section h3 { margin: 0 0 .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500, #6b7280); }
.vifaa-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 480px) { .vifaa-more-grid { grid-template-columns: repeat(4, 1fr); } }
.vifaa-more-grid a { position: relative; min-height: 5rem; padding: .5rem .25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center;
    font-size: .75rem; line-height: 1.15; text-decoration: none; color: var(--gray-700, #374151); background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .75rem;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dark .vifaa-more-grid a { color: var(--gray-200, #e5e7eb); background: var(--gray-800, #1f2937); border-color: var(--gray-700, #374151); }
.vifaa-more-grid a:active { background: var(--gray-100, #f3f4f6); }
.dark .vifaa-more-grid a:active { background: var(--gray-700, #374151); }
.vifaa-more-grid a.is-active { color: var(--primary-600, #0d9488); border-color: var(--primary-600, #0d9488); font-weight: 600; }
.vifaa-more-grid svg { width: 1.75rem; height: 1.75rem; }
.vifaa-more-grid em { position: absolute; top: .3rem; right: .3rem; min-width: 1.25rem; padding: 0 .35rem; border-radius: 9999px; background: var(--primary-600, #0d9488); color: #fff; font-size: .65rem; font-style: normal; line-height: 1.25rem; }

@media (max-width: 1023px) {
    .vifaa-bottom-nav { display: flex; }
    body:has(.vifaa-bottom-nav) { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); } /* content must not hide behind the bar */
    /* The More tile replaces the topbar hamburger: one way into the menu, not two. */
    body:has(.vifaa-bottom-nav) :is(.fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn) { display: none !important; }
    /* Bigger touch targets; 16px inputs stop iOS from zooming in on focus. */
    .fi-fo-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .fi-fo-field select, .fi-fo-field textarea { min-height: 2.75rem; font-size: 16px; }
    .fi-btn { min-height: 2.75rem; }
}
@media (min-width: 1024px) { .vifaa-more-backdrop, .vifaa-more-sheet { display: none !important; } }

/* Page header action buttons (asset page: Print label, Transfer, Return ...): compact on desktop. Touch screens keep full size. */
@media (min-width: 1024px) {
    .fi-header .fi-ac { gap: .5rem; }
    .fi-header .fi-ac .fi-btn { padding: .3rem .75rem; font-size: .8125rem; line-height: 1.25rem; gap: .35rem; min-height: 0; }
    .fi-header .fi-ac .fi-btn .fi-icon { width: 1rem; height: 1rem; }
}

/* ---- Asset page tabs (Depreciation, Warranty, Maintenance, History, Documents, Extra details): cards, tiles, lists ---- */
.vx-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.vx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.vx-stat { padding: .85rem 1rem; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .85rem; background: var(--gray-50, #f9fafb); }
.dark .vx-stat { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .1); }
.vx-stat-label { font-size: .75rem; font-weight: 500; color: var(--gray-500, #6b7280); }
.vx-stat-value { margin-top: .2rem; font-size: 1.05rem; font-weight: 600; color: var(--gray-950, #030712); word-break: break-word; }
.dark .vx-stat-value { color: #fff; }
.vx-stat.is-key { background: var(--primary-50, #f0fdfa); border-color: var(--primary-200, #99f6e4); }
.dark .vx-stat.is-key { background: rgb(45 212 191 / .12); border-color: rgb(45 212 191 / .35); }
.vx-stat.is-key .vx-stat-value { font-size: 1.3rem; color: var(--primary-700, #0f766e); }
.dark .vx-stat.is-key .vx-stat-value { color: var(--primary-300, #5eead4); }
.vx-stat.is-good .vx-stat-value { color: #15803d; } .vx-stat.is-bad .vx-stat-value { color: #b91c1c; }
.dark .vx-stat.is-good .vx-stat-value { color: #4ade80; } .dark .vx-stat.is-bad .vx-stat-value { color: #f87171; }

.vx-card { border: 1px solid var(--gray-200, #e5e7eb); border-radius: 1rem; background: #fff; overflow: hidden; }
.dark .vx-card { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .1); }
.vx-card-head { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; border-bottom: 1px solid var(--gray-100, #f3f4f6); font-weight: 600; color: var(--gray-950, #030712); }
.dark .vx-card-head { border-bottom-color: rgb(255 255 255 / .08); color: #fff; }
.vx-card-head .gs-tile { width: 2rem; height: 2rem; border-radius: .6rem; } .vx-card-head .gs-tile svg { width: 1.15rem; height: 1.15rem; }
.vx-card-note { margin-left: auto; font-size: .8rem; font-weight: 400; color: var(--gray-500, #6b7280); }
.vx-card-body { padding: .25rem 1rem .5rem; }
.vx-card-text { margin: 0; padding: .9rem 1rem; font-size: .875rem; line-height: 1.4rem; color: var(--gray-600, #4b5563); }
.dark .vx-card-text { color: var(--gray-400, #9ca3af); }

.vx-rows { margin: 0; }
.vx-rows.vx-card-body { padding: .25rem 1.1rem .5rem; }
.vx-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--gray-100, #f3f4f6); font-size: .875rem; }
.vx-row:first-child { border-top: 0; }
.dark .vx-row { border-top-color: rgb(255 255 255 / .08); }
.vx-row dt { color: var(--gray-500, #6b7280); } .vx-row dd { margin: 0; text-align: right; color: var(--gray-950, #030712); }
.dark .vx-row dd { color: #fff; }
.vx-row.is-total { font-weight: 700; } .vx-row.is-total dt { color: var(--gray-950, #030712); } .dark .vx-row.is-total dt { color: #fff; }
.vx-row .is-good { color: #15803d; } .vx-row .is-bad { color: #b91c1c; }

.vx-list { list-style: none; margin: 0; padding: 0; }
.vx-item { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-top: 1px solid var(--gray-100, #f3f4f6); font-size: .875rem; }
.vx-item:first-child { border-top: 0; }
.dark .vx-item { border-top-color: rgb(255 255 255 / .08); }
.vx-item-body { flex: 1 1 auto; min-width: 0; }
.vx-item-title { font-weight: 600; color: var(--gray-950, #030712); } .dark .vx-item-title { color: #fff; }
.vx-item-title a { color: var(--primary-600, #0d9488); text-decoration: none; } .vx-item-title a:hover { text-decoration: underline; }
.vx-item-sub { margin-top: .1rem; color: var(--gray-500, #6b7280); }
.vx-item-end { flex-shrink: 0; }

.vx-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.vx-table th { padding: .55rem 1rem; text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--gray-500, #6b7280); background: var(--gray-50, #f9fafb); }
.dark .vx-table th { background: rgb(255 255 255 / .04); }
.vx-table td { padding: .55rem 1rem; border-top: 1px solid var(--gray-100, #f3f4f6); }
.dark .vx-table td { border-top-color: rgb(255 255 255 / .08); }
.vx-table .is-end { text-align: right; }
.vx-scroll { overflow-x: auto; }

.vx-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 1rem; text-align: center; font-size: .9rem; color: var(--gray-500, #6b7280); border: 1px dashed var(--gray-300, #d1d5db); border-radius: 1rem; }
.dark .vx-empty { border-color: rgb(255 255 255 / .18); }
.vx-empty .gs-tile { width: 3rem; height: 3rem; border-radius: 1rem; } .vx-empty .gs-tile svg { width: 1.6rem; height: 1.6rem; }

.vx-timeline { list-style: none; margin: 0; padding: 0 0 0 .25rem; }
.vx-event { position: relative; display: flex; gap: .85rem; padding-bottom: 1.1rem; }
.vx-event:not(:last-child)::before { content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: .15rem; width: 2px; background: var(--gray-200, #e5e7eb); }
.dark .vx-event:not(:last-child)::before { background: rgb(255 255 255 / .12); }
.vx-event .gs-tile { width: 2.1rem; height: 2.1rem; border-radius: 9999px; position: relative; z-index: 1; } .vx-event .gs-tile svg { width: 1.1rem; height: 1.1rem; }
.vx-event-title { font-size: .9rem; font-weight: 600; color: var(--gray-950, #030712); } .dark .vx-event-title { color: #fff; }
.vx-event-text { font-size: .85rem; color: var(--gray-600, #4b5563); } .dark .vx-event-text { color: var(--gray-300, #d1d5db); }
.vx-event-meta { font-size: .75rem; color: var(--gray-500, #6b7280); }
.vx-photo img { max-height: 20rem; width: auto; border-radius: 1rem; border: 1px solid var(--gray-200, #e5e7eb); }
.dark .vx-photo img { border-color: rgb(255 255 255 / .1); }