/* ================================================================
   VICOBAPro — Unified Theme
   Source of truth for the public website and the application UI.
   ================================================================ */
:root {
  --vp-primary: #0b6b43;
  --vp-primary-dark: #075536;
  --vp-primary-soft: #e8f3ed;
  --vp-page-bg: #f4f7f3;
  --vp-surface: #ffffff;
  --vp-surface-soft: #f9fbf9;
  --vp-border: #dde7e1;
  --vp-heading: #18352a;
  --vp-text: #56635d;
  --vp-muted: #718078;
  --vp-accent: #d4a017;
  --vp-danger: #c93636;
  --vp-warning: #d98a00;
  --vp-success: #16834e;
  --vp-shadow: 0 8px 28px rgba(24, 53, 42, .08);
  --vp-radius: 10px;
}

html, body {
  background: var(--vp-page-bg) !important;
  color: var(--vp-heading);
}

body, button, input, select, textarea {
  font-family: Inter, "DM Sans", Arial, Helvetica, sans-serif;
}

/* Application shell */
#root,
.app-shell,
.vp-layout,
.vp-main,
.vp-page,
.vp-data-page,
.screen {
  background: var(--vp-page-bg) !important;
}

.vp-topbar {
  background: var(--vp-surface) !important;
  color: var(--vp-heading) !important;
  border-bottom: 1px solid var(--vp-border);
  box-shadow: 0 2px 10px rgba(24, 53, 42, .05) !important;
}
.vp-brand, .vp-menu-toggle, .vp-icon-btn { color: var(--vp-heading) !important; }
.vp-brand span span, .vp-side-logo strong span { color: var(--vp-accent) !important; }
.vp-search { border: 1px solid var(--vp-border); box-shadow: none !important; }
.vp-avatar { background: var(--vp-primary-soft) !important; color: var(--vp-primary) !important; }

.vp-sidebar {
  background: var(--vp-surface) !important;
  border-right-color: var(--vp-border) !important;
}
.vp-logo-circle,
.vp-primary-action,
.btn-green {
  background: var(--vp-primary) !important;
  color: #fff !important;
}
.vp-primary-action:hover,
.btn-green:hover { background: var(--vp-primary-dark) !important; }
.vp-nav-item.active { background: var(--vp-primary-soft) !important; color: var(--vp-primary) !important; }
.vp-nav-item:hover { background: var(--vp-surface-soft) !important; }
.vp-balance { background: linear-gradient(135deg, var(--vp-primary), var(--vp-primary-dark)) !important; }

/* Surfaces */
.card,
.vp-panel,
.vp-kpi,
.vp-mini-stat,
.vp-report-summary,
.vp-data-tools,
.vp-db-table-wrap,
.vp-table-footer,
.list-item,
.modal-box,
.vp-modal-summary,
.system-preview,
.steps-grid article,
.about-grid article,
.contact-cards article,
.pricing-grid article {
  background: var(--vp-surface) !important;
  border-color: var(--vp-border) !important;
}
.card,
.vp-panel,
.vp-kpi,
.vp-mini-stat,
.modal-box { box-shadow: var(--vp-shadow); }

/* Inputs */
.input,
.select,
.vp-inline-select,
.vp-group-select,
.vp-data-search,
.vp-search input,
input,
select,
textarea {
  background: var(--vp-surface) !important;
  border-color: var(--vp-border) !important;
  color: var(--vp-heading) !important;
}
.input:focus,
.select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--vp-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 107, 67, .10);
  outline: none;
}

/* Tables */
.vp-db-table th,
.vp-table th,
table thead th {
  background: #edf5f1 !important;
  color: var(--vp-heading) !important;
  border-color: var(--vp-border) !important;
}
.vp-db-table td,
.vp-table td,
table tbody td { border-color: #e8eeea !important; }
.vp-db-table tbody tr,
.vp-table tbody tr,
table tbody tr { background: var(--vp-surface) !important; }
.vp-db-table tbody tr:hover,
.vp-table tbody tr:hover,
table tbody tr:hover { background: #f8fcfa !important; }
.vp-db-table tfoot td,
.vp-table tfoot td,
table tfoot td { background: var(--vp-surface-soft) !important; }

/* Buttons and statuses */
.btn-primary,
.btn-success,
.member-save-btn {
  background: var(--vp-primary) !important;
  color: #fff !important;
  border-color: var(--vp-primary) !important;
}
.btn-primary:hover,
.btn-success:hover,
.member-save-btn:hover { background: var(--vp-primary-dark) !important; }
.btn-outline,
.btn-soft,
.vp-secondary-action,
.vp-row-action,
.member-cancel-btn {
  background: var(--vp-surface) !important;
  color: var(--vp-primary) !important;
  border-color: #cad8d0 !important;
}
.badge-success, .vp-status.ok { background: #def4e7 !important; color: var(--vp-success) !important; }
.badge-warning, .vp-status.hold { background: #fff1cf !important; color: #8d5c00 !important; }
.badge-danger, .vp-status.bad { background: #fde4e4 !important; color: var(--vp-danger) !important; }

/* Public website */
.site-header,
.site-footer { background: var(--vp-surface) !important; border-color: var(--vp-border) !important; }
.home-main,
.inner-page,
.home-hero { background: var(--vp-page-bg) !important; }
.home-shortcuts { background: #edf5f1 !important; border-color: var(--vp-border) !important; }
.home-shortcuts a { border-color: var(--vp-border) !important; }
.home-shortcuts a:hover { background: var(--vp-surface) !important; }
.brand-mark { background: var(--vp-primary) !important; }
.brand-name > span { color: var(--vp-accent) !important; }
.main-nav a:hover,
.main-nav a.active { color: var(--vp-primary) !important; border-bottom-color: var(--vp-primary) !important; }
.hero-copy h1, .page-intro h1 { color: var(--vp-heading) !important; }
.hero-copy h1 em, .eyebrow { color: var(--vp-primary) !important; }
.hero-copy p, .page-intro p { color: var(--vp-text) !important; }

/* Modal backdrop remains neutral and consistent */
.modal-overlay { background: rgba(17, 38, 29, .48) !important; }

@media (max-width: 720px) {
  .vp-topbar { background: var(--vp-surface) !important; }
  .main-nav { background: var(--vp-surface) !important; border-color: var(--vp-border) !important; }
}