/* ============================================================
   vth-reskin.css — VTH ReSkin components (namespaced, scoped)
   All classes are prefixed `vth-` and only paint inside `.vth`, so
   they never collide with Materialize v0.100. Extend this file;
   never write bare element/`.class` selectors outside the scope.
   Requires: vth-tokens.css (vars), vth-fonts.css, vth-reset.css.
   ============================================================ */

/* ---- App shell / layout helpers ---- */
.vth-app{background:var(--surface-subtle);min-height:100%;}
/* Page wrapper for every reskinned page. Mirrors the design source's `.content`
   (ui_kits/platform/reports.html: `padding:4px 4px 40px`) — deliberately NO
   max-width. The design caps LINE LENGTH, not page width: its only max-widths are
   on prose (.hero p 640px, .infobar p 760px, .zero p 520px) and modals (540px).
   The side gutter comes from the app shell — `body #main{padding:16px}`
   (new_themes/css/style.css:149), which matches the design's `#root{padding:16px}`
   and never changes at any breakpoint — so this class needs no responsive padding
   of its own; capping here would only make reskinned pages narrower than every
   other page in the portal (onboarding included).
   `min-width:0` mirrors the design's `.main{min-width:0}`: without it a grid/flex
   child refuses to shrink below its min-content width and the page scrolls
   sideways. Do NOT override this padding inline — `padding:24px 0` is a shorthand
   and silently zeroes the sides. */
.vth-container{width:100%;min-width:0;margin:0 auto;padding:4px var(--space-1) var(--space-10);}
.vth-grid{display:grid;gap:var(--space-6);}
.vth-row{display:flex;gap:var(--space-4);}
.vth-stack{display:flex;flex-direction:column;gap:var(--space-4);}
.vth-cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}

/* ---- Typography helpers ---- */
.vth-h1{font-size:var(--type-size-title-1);line-height:var(--type-leading-title-1);font-weight:var(--weight-semibold);}
.vth-h2{font-size:var(--type-size-title-3);line-height:var(--type-leading-title-3);font-weight:var(--weight-semibold);}
.vth-h3{font-size:var(--type-size-title-5);line-height:var(--type-leading-title-5);font-weight:var(--weight-semibold);}
.vth-h4{font-size:var(--type-size-title-6);line-height:var(--type-leading-title-6);font-weight:var(--weight-semibold);}
.vth-body{font-size:var(--type-size-base);line-height:var(--type-leading-base);font-weight:var(--weight-regular);}
.vth-small{font-size:var(--type-size-sm);line-height:var(--type-leading-sm);}
.vth-muted{color:var(--text-muted);}
.vth-eyebrow{font-size:var(--type-size-xs);line-height:var(--type-leading-xs);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--vth-blue);}

/* ---- Buttons ---- */
.vth-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:var(--weight-semibold);white-space:nowrap;
  border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;text-decoration:none;}
.vth-btn--sm{height:36px;padding:0 var(--space-4);font-size:var(--type-size-sm);}
.vth-btn--md{height:44px;padding:0 var(--space-5);font-size:var(--type-size-base);}
.vth-btn--lg{height:52px;padding:0 var(--space-6);font-size:var(--type-size-lg);}
.vth-btn--pill{border-radius:var(--radius-pill);}
.vth-btn--icon{padding:0;width:44px;}
.vth-btn--primary{background:var(--vth-blue);color:var(--text-on-blue);}
.vth-btn--primary:hover{background:var(--vth-blue-hover);color:var(--text-on-blue);}
.vth-btn--primary:active{background:var(--vth-blue-focus);}
.vth-btn--secondary{background:transparent;color:var(--vth-blue);border-color:var(--vth-blue);}
.vth-btn--secondary:hover{background:var(--surface-blue-soft);}
.vth-btn--ghost{background:transparent;color:var(--text-primary);}
.vth-btn--ghost:hover{background:var(--surface-muted);}
.vth-btn--danger{background:var(--color-error);color:#fff;}
.vth-btn--danger:hover{background:var(--color-error-hover);}
.vth-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-blue);}
.vth-btn.is-disabled,.vth-btn:disabled{opacity:.5;pointer-events:none;}

/* ---- Cards ---- */
.vth-card{background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;}
.vth-card__media{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-muted);}
.vth-card__body{padding:var(--space-6);}
.vth-card__title{font-size:var(--type-size-xl);line-height:var(--type-leading-xl);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-2);}
.vth-card__text{font-size:var(--type-size-base);line-height:var(--type-leading-base);color:var(--text-subtle);}
.vth-card__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;}

/* ---- Forms ---- */
.vth-field{display:flex;flex-direction:column;gap:var(--space-2);}
.vth-label{font-size:var(--type-size-sm);font-weight:var(--weight-medium);color:var(--text-secondary);}
.vth-input,.vth-textarea,.vth-select{width:100%;padding:10px var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-page);font-family:var(--font-sans);font-size:var(--type-size-base);color:var(--text-primary);transition:border-color .15s ease,box-shadow .15s ease;}
.vth-input::placeholder,.vth-textarea::placeholder{color:var(--text-muted);}
.vth-input:focus,.vth-textarea:focus,.vth-select:focus{border-color:var(--vth-blue);box-shadow:var(--shadow-focus-blue);}
.vth-textarea{min-height:96px;resize:vertical;}
.vth-help{font-size:var(--type-size-xs);color:var(--text-muted);}
.vth-error{font-size:var(--type-size-xs);color:var(--color-error);}
.vth-field.is-error .vth-input,.vth-field.is-error .vth-textarea,.vth-field.is-error .vth-select{border-color:var(--color-error);}

/* ---- Badges / chips / tags ---- */
.vth-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);border-radius:var(--radius-pill);font-size:var(--type-size-2xs);font-weight:var(--weight-semibold);line-height:1.6;}
.vth-badge--neutral{background:var(--surface-muted);color:var(--text-subtle);}
.vth-badge--info{background:var(--surface-blue-soft);color:var(--vth-blue);}
.vth-badge--success{background:#DDFBE7;color:var(--color-success);}
.vth-badge--warning{background:#FFF2D1;color:#8A5B00;}
.vth-badge--error{background:#FEE2E2;color:var(--color-error);}
.vth-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-pill);font-size:var(--type-size-sm);background:var(--surface-page);}
.vth-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--text-muted);}

/* ---- Alerts ---- */
.vth-alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);font-size:var(--type-size-sm);border:1px solid transparent;}
.vth-alert--info{background:var(--surface-blue-soft);border-color:#BCD6FF;color:var(--vth-blue-dark);}
.vth-alert--success{background:#F0FDF4;border-color:#BDF5D1;color:var(--color-success);}
.vth-alert--warning{background:#FFFEEA;border-color:#FFF585;color:#8A5B00;}
.vth-alert--error{background:#FEF2F2;border-color:#FDCBCB;color:var(--color-error);}

/* ---- Tables ---- */
.vth-table{width:100%;border-collapse:collapse;font-size:var(--type-size-sm);}
.vth-table th{padding:var(--space-3) var(--space-4);text-align:left;font-weight:var(--weight-semibold);color:var(--text-subtle);border-bottom:1px solid var(--border-default);background:var(--surface-muted);}
.vth-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-light);color:var(--text-primary);}
.vth-table--hover tbody tr:hover{background:var(--surface-subtle);}
.vth-table--striped tbody tr:nth-child(even){background:var(--surface-subtle);}

/* ---- Navigation ---- */
.vth-navbar{display:flex;align-items:center;gap:var(--space-6);height:64px;padding:0 var(--space-6);background:var(--surface-page);border-bottom:1px solid var(--border-light);}
.vth-sidenav{width:260px;background:var(--surface-page);border-right:1px solid var(--border-light);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);}
.vth-navlink{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-4);border-radius:var(--radius-md);color:var(--text-subtle);font-weight:var(--weight-medium);cursor:pointer;}
.vth-navlink:hover{background:var(--surface-muted);color:var(--text-primary);}
.vth-navlink.is-active{background:var(--surface-blue-soft);color:var(--vth-blue);}
.vth-tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--border-light);}
.vth-tab{padding:var(--space-3) var(--space-4);font-weight:var(--weight-medium);color:var(--text-subtle);border-bottom:2px solid transparent;cursor:pointer;}
.vth-tab.is-active{color:var(--vth-blue);border-bottom-color:var(--vth-blue);}

/* ---- Overlays (build ourselves; do not use Materialize JS modal) ---- */
.vth-modal__backdrop{position:fixed;inset:0;background:rgba(19,19,19,.5);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:1000;}
.vth-modal__panel{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:90vh;overflow:auto;}
.vth-modal__head{padding:var(--space-6);border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;}
.vth-modal__body{padding:var(--space-6);}
.vth-modal__foot{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:var(--space-3);}

/* ---- Data display ---- */
.vth-stat-card{background:var(--surface-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--space-6);}
.vth-stat__value{font-size:var(--type-size-3xl);line-height:var(--type-leading-3xl);font-weight:var(--weight-bold);color:var(--text-primary);}
.vth-stat__label{font-size:var(--type-size-sm);color:var(--text-muted);}
.vth-progress{height:8px;background:var(--surface-muted);border-radius:var(--radius-pill);overflow:hidden;}
.vth-progress__bar{height:100%;background:var(--vth-blue);border-radius:var(--radius-pill);}
.vth-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-muted);}
.vth-avatar--sm{width:28px;height:28px;}.vth-avatar--lg{width:64px;height:64px;}
.vth-spinner{width:24px;height:24px;border:3px solid var(--border-light);border-top-color:var(--vth-blue);border-radius:50%;animation:vth-spin .7s linear infinite;}
@keyframes vth-spin{to{transform:rotate(360deg);}}

/* ---- Icons ---- */
.vth-icon{width:24px;height:24px;display:inline-block;color:currentColor;flex:none;}
.vth-icon svg{width:100%;height:100%;display:block;}

/* ---- Pagination (app-wide; paired with the vth-pagination directive) ---- */
.vth-pagination-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;width:100%;}
.vth-pagination__summary{font-size:var(--type-size-sm);color:var(--text-muted);}
.vth-pagination{display:flex;gap:6px;margin-left:auto;}
.vth-pagination button{height:34px;min-width:34px;padding:0 10px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-page);font-family:var(--font-sans);font-size:13px;color:var(--text-secondary);cursor:pointer;}
.vth-pagination button:hover:not(:disabled){background:var(--surface-muted);color:var(--text-primary);}
.vth-pagination button.is-active{background:var(--vth-blue);border-color:var(--vth-blue);color:var(--text-on-blue);}
.vth-pagination button:disabled{opacity:.45;cursor:default;}