/* VoovodeNET shared Blade component styles (Phase 1).
   Loaded by BOTH the admin and customer-portal layouts so <x-empty-state>,
   flash toasts and slow-form spinners render identically on both surfaces.
   Tokens are defined here with the same values as redesign.css so the portal
   (which does not load redesign.css) still gets them. */

:root {
  --vvd-accent: #0f80ce;
  --vvd-accent-dark: #0b6bad;
  --vvd-stripe: #635bff;
  --vvd-ink: #1f2733;
  --vvd-muted: #6b7686;
  --vvd-line: #e7eaf0;
  --vvd-radius: 12px;

  /* Type scale. AdminLTE ships a 16px body while the rpt-* design system in
     redesign.css was drawn at 14px, so native Bootstrap parts (form labels,
     plain tables, buttons, alerts) rendered a size larger than everything
     built on the design system. These tokens are the single source of truth.
     rem resolves against the 16px root, so lowering the body size only
     affects text that inherits it. */
  --vvd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --vvd-fs-xs: .72rem;      /* 11.5px — micro labels, pills, table headers */
  --vvd-fs-sm: .8125rem;    /* 13px   — help text, meta, small buttons */
  --vvd-fs-body: .875rem;   /* 14px   — body copy, tables, inputs, labels */
  --vvd-fs-lg: 1rem;        /* 16px   — card and section titles */
  --vvd-fs-xl: 1.125rem;    /* 18px   — page headings */
}

body,
.btn,
.form-control,
.custom-select,
input,
select,
textarea,
.info-box-number,
.card-title { font-family: var(--vvd-font); }

body { font-size: var(--vvd-fs-body); }

label,
.col-form-label { font-size: var(--vvd-fs-body); font-weight: 600; margin-bottom: .3rem; }

.form-control,
.custom-select,
.input-group-text { font-size: var(--vvd-fs-body); }

.form-text,
small,
.small,
.help-block { font-size: var(--vvd-fs-sm); }

.btn { font-size: var(--vvd-fs-body); }
.btn-sm { font-size: var(--vvd-fs-sm); }
.btn-lg { font-size: var(--vvd-fs-lg); }

.table,
.dropdown-item,
.alert,
.modal-body { font-size: var(--vvd-fs-body); }

.card-title,
.modal-title { font-size: var(--vvd-fs-lg); font-weight: 600; }

h1 { font-size: 1.5rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: var(--vvd-fs-xl); }
h5 { font-size: var(--vvd-fs-lg); }
h6 { font-size: var(--vvd-fs-body); }

/* iOS Safari zooms the page when a focused field is under 16px. */
@media (max-width: 767.98px) {
  .form-control,
  .form-control-sm,
  .custom-select,
  .custom-select-sm,
  select.form-control,
  textarea.form-control { font-size: 16px; }
}

/* Empty state — modelled on the good customers/show block */
.vvd-empty {
  text-align: center;
  color: var(--vvd-muted);
  padding: 2rem 1.25rem;
  border: 1px dashed var(--vvd-line);
  border-radius: 10px;
}

.vvd-empty__icon {
  font-size: 1.6rem;
  color: #b8c0cf;
  margin-bottom: .6rem;
}

.vvd-empty__title {
  font-weight: 600;
  color: var(--vvd-ink);
  margin: 0 0 .3rem;
}

.vvd-empty__body {
  font-size: .9rem;
  margin-bottom: .1rem;
}

.vvd-empty__body p:last-child {
  margin-bottom: 0;
}

.vvd-empty__cta {
  margin-top: .9rem;
}

/* Slow-form feedback — the submit button spins and locks on submit so sync /
   Stripe / QuickFile actions can never be double-fired or look frozen. */
.vvd-slow-busy {
  pointer-events: none;
  opacity: .75;
}

.vvd-slow-busy .vvd-spin {
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-right: .4em;
  vertical-align: -.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vvd-spin .6s linear infinite;
}

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

/* Auto-dismissing flash messages */
.alert.vvd-fade-out {
  transition: opacity .4s ease, transform .4s ease;
  opacity: 0;
  transform: translateY(-4px);
}

/* Stripe brand badge — one class replaces the inline #635bff/#625afa styles
   that were duplicated across customer / payment / timeline markup. */
.badge-stripe {
  background-color: var(--vvd-stripe);
  color: #fff;
}

/* Stat strip — the compact figures row atop a detail page (e.g. Customer 360).
   Restrained by design: neutral dividers, one value per cell, no gradient. */
.vvd-statstrip {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--vvd-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.vvd-stat {
  flex: 1 1 0;
  min-width: 150px;
  padding: .8rem 1.1rem;
  border-right: 1px solid var(--vvd-line);
}

.vvd-stat:last-child {
  border-right: 0;
}

.vvd-stat__label {
  display: block;
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--vvd-muted);
  font-weight: 600;
  margin-bottom: .15rem;
}

.vvd-stat__value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vvd-ink);
  line-height: 1.2;
}

.vvd-stat__sub {
  display: block;
  font-size: .74rem;
  color: var(--vvd-muted);
  margin-top: .1rem;
}

@media (max-width: 575.98px) {
  .vvd-stat {
    flex-basis: 50%;
    border-bottom: 1px solid var(--vvd-line);
  }
  .vvd-stat:nth-child(even) {
    border-right: 0;
  }
}

/* Sidebar backdrop — see partials/ui-scripts. Sits under the sidebar (z-index
   1038) and over everything else, so tapping the page closes the menu. */
.vvd-sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  body.sidebar-open .vvd-sidebar-backdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1037;
    background: rgba(15, 25, 45, .45);
  }
}