/*
 * Vestkin Payroll — Component Stylesheet
 * Brand palette: navy #1A1A2E · teal #175457 · gold #C9A84C
 * Load via: <link rel="stylesheet" href="/theme.css">
 */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --v-navy:         #1A1A2E;
  --v-navy-light:   #2D2D4E;
  --v-teal:         #175457;
  --v-teal-light:   #1F7A7E;
  --v-teal-lighter: #E8F2F2;
  --v-gold:         #C9A84C;
  --v-gold-light:   #F8F0D8;
  --v-gray-soft:    #F5F5F5;
  --v-gray-border:  #E5E7EB;
  --v-gray-mid:     #9CA3AF;
  --v-text:         #1A1A2E;
  --v-text-muted:   #6B7280;
  --v-white:        #FFFFFF;
  --v-radius:       6px;
  --v-radius-lg:    10px;
  --v-font:         'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Buttons ────────────────────────────────────────────── */
.v-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--v-radius);
  font-family: var(--v-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.v-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.v-btn-primary  { background: var(--v-teal);   color: var(--v-white); }
.v-btn-primary:hover  { background: var(--v-teal-light); }

.v-btn-secondary { background: transparent; color: var(--v-teal); border: 1px solid var(--v-teal); }
.v-btn-secondary:hover { background: var(--v-teal-lighter); }

.v-btn-danger   { background: #FEE2E2; color: #DC2626; }
.v-btn-danger:hover   { background: #FECACA; }

.v-btn-success  { background: #D1FAE5; color: #065F46; }
.v-btn-success:hover  { background: #A7F3D0; }

.v-btn-ghost    { background: transparent; color: var(--v-text-muted); }
.v-btn-ghost:hover    { background: var(--v-gray-soft); color: var(--v-text); }

.v-btn-sm       { padding: 5px 12px; font-size: 12px; }

/* ── Badges ─────────────────────────────────────────────── */
.v-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.v-badge-navy   { background: var(--v-navy);         color: var(--v-white); }
.v-badge-teal   { background: var(--v-teal-lighter);  color: var(--v-teal); }
.v-badge-gold   { background: var(--v-gold-light);    color: #7A5C10; }
.v-badge-green  { background: #D1FAE5;                color: #065F46; }
.v-badge-red    { background: #FEE2E2;                color: #DC2626; }
.v-badge-yellow { background: #FEF3C7;                color: #92400E; }
.v-badge-gray   { background: #F3F4F6;                color: #6B7280; }

/* ── Cards ──────────────────────────────────────────────── */
.v-card {
  background: var(--v-white);
  border-radius: 8px;
  border: 1px solid var(--v-gray-border);
  padding: 20px;
  margin-bottom: 16px;
}
.v-card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--v-navy);
}
.v-card-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--v-text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 16px;
  border-top: 1px solid #F3F4F6;
  margin-top: 16px;
}

.v-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.v-summary-card {
  background: var(--v-gray-soft);
  border: 1px solid var(--v-gray-border);
  border-radius: 8px;
  padding: 16px;
}
.v-summary-label { font-size: 11px; color: var(--v-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.v-summary-value { font-size: 22px; font-weight: 700; color: var(--v-navy); }
.v-summary-sub   { font-size: 11px; color: var(--v-gray-mid); }

.v-bank-card {
  background: var(--v-gray-soft);
  border: 1px solid var(--v-gray-border);
  border-radius: var(--v-radius);
  padding: 14px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Form Controls ──────────────────────────────────────── */
.v-form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.v-form-full   { grid-column: 1 / -1; }

.v-form-group  { display: flex; flex-direction: column; gap: 4px; }

.v-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--v-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.v-input {
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: var(--v-radius);
  font-family: var(--v-font);
  font-size: 14px;
  outline: none;
  background: var(--v-white);
  color: var(--v-text);
  transition: border-color 0.15s;
  width: 100%;
}
.v-input:focus  { border-color: var(--v-teal); box-shadow: 0 0 0 3px var(--v-teal-lighter); }
.v-input-mono   { font-family: monospace; letter-spacing: 2px; }
.v-select       { appearance: auto; }

.v-hint          { font-size: 11px; color: var(--v-gray-mid); margin-top: 2px; }
.v-security-note { font-size: 11px; color: var(--v-text-muted); display: flex; align-items: center; gap: 4px; margin-top: 4px; }

/* ── Table ──────────────────────────────────────────────── */
.v-table        { width: 100%; border-collapse: collapse; font-size: 13px; }
.v-thead .v-th  {
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--v-text-muted);
  background: #F9FAFB;
  border-bottom: 1px solid var(--v-gray-border);
}
.v-tbody .v-td  { padding: 11px 12px; border-bottom: 1px solid #F3F4F6; vertical-align: top; }
.v-tbody tr:hover { background: #FAFAFA; }

/* ── Alerts ─────────────────────────────────────────────── */
.v-alert         { padding: 12px 16px; border-radius: var(--v-radius); font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.v-alert-info    { background: #DBEAFE; color: #1E40AF; }
.v-alert-warn    { background: #FEF3C7; color: #92400E; }
.v-alert-error   { background: #FEE2E2; color: #DC2626; }
.v-alert-success { background: #D1FAE5; color: #065F46; }

/* ── Modal ──────────────────────────────────────────────── */
.v-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-modal {
  background: var(--v-white);
  border-radius: var(--v-radius-lg);
  padding: 24px;
  width: 540px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}
.v-modal-title   { font-size: 18px; font-weight: 700; color: var(--v-navy); margin-bottom: 20px; }
.v-modal-actions { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; }

/* ── Layout / Misc ──────────────────────────────────────── */
.v-actions        { display: flex; gap: 8px; margin-top: 16px; }
.v-empty-state    { text-align: center; padding: 40px 24px; color: var(--v-gray-mid); }
.v-section-divider { border: none; border-top: 1px solid #F3F4F6; margin: 20px 0; }
.v-hidden         { display: none !important; }