/* ─────────────────────────────────────────────────────────────
   Velora Dash Polish — shared layout / UX consistency layer
   Loaded as additive overlay on top of each dashboard's own CSS.
   Strictly LAYOUT + VISUAL — no behavior changes.
   Safe to remove with single <link> removal per file.
   ───────────────────────────────────────────────────────────── */

/* ── Tables: sticky headers so long lists are scannable ── */
.tbl thead th,
table.tbl > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ivory-2);
  box-shadow: 0 1px 0 var(--rule);
}

/* Row hover: subtle, except already-styled rows */
.tbl tbody tr:hover td {
  background: var(--ivory-2);
  transition: background .12s ease;
}
.tbl tbody tr[onclick]:hover td {
  background: var(--gold-pale, #F9F4E8);
  cursor: pointer;
}

/* ── Stat cards / KPIs: clickable ones get visual affordance ── */
.stat[onclick],
.kpi-card[onclick],
[class*="stat"][onclick]:not(.stat-lbl):not(.stat-sub):not(.stat-val) {
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.stat[onclick]:hover,
.kpi-card[onclick]:hover {
  background: var(--ivory-2) !important;
}
.stat[onclick]:active,
.kpi-card[onclick]:active {
  transform: translateY(1px);
}

/* ── Empty states: more inviting, less dead ── */
.empty {
  padding: 32px 16px !important;
  text-align: center;
  color: var(--onyx-3);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.01em;
}

#talent-whatsapp-app .empty .btn-sm {
  margin-top: 10px;
  font-style: normal;
}

/* ── Buttons: consistent hover/focus ── */
.btn-primary,
.btn-secondary,
.btn-sm {
  transition: opacity .12s ease, border-color .12s ease, color .12s ease, background .12s ease;
}
.btn-secondary:hover:not([disabled]) {
  border-color: var(--gold);
  color: var(--gold-7);
}
.btn-primary:hover:not([disabled]) {
  opacity: 0.88;
}
.btn-primary:active:not([disabled]),
.btn-secondary:active:not([disabled]),
.btn-sm:active:not([disabled]) {
  transform: translateY(1px);
}

/* ── Keyboard focus rings: clear but not jarring ── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold, #C29A4A);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Badge consistency: one set of colors everywhere ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}
.badge.red, .badge.danger      { background: var(--red-bg, #FEF2F2);   color: var(--red, #9A2B2B); }
.badge.amber, .badge.warn      { background: var(--amber-bg, #FFFBEB); color: var(--amber, #B8822A); }
.badge.green, .badge.success   { background: var(--green-bg, #F0FDF4); color: var(--green, #2F7D5C); }
.badge.blue, .badge.info       { background: #EFF6FF;                  color: var(--blue, #355E7A); }
.badge.gold, .badge.brand      { background: linear-gradient(135deg, #F9F0D8, #EDD98A); color: var(--gold-7, #8C6B2F); }
.badge.gray, .badge.muted      { background: #F0F0F2;                  color: var(--onyx-4, #7A7A82); }

/* Hot badge (for urgent / fire markers) */
.badge.hot {
  background: linear-gradient(135deg, #FEE2E2, #FCA5A5);
  color: var(--red, #9A2B2B);
  font-weight: 700;
}

/* ── Inputs: slightly more breathable ── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="datetime-local"],
input[type="date"],
input[type="password"],
select,
textarea {
  transition: border-color .12s ease, background .12s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  background: #fff;
}

/* ── Skeleton loader: consistent across dashboards ── */
.skel {
  background: linear-gradient(90deg, var(--rule-light, #EDE6D6) 0%, var(--ivory-2, #F5F1E8) 50%, var(--rule-light, #EDE6D6) 100%);
  background-size: 200%;
  border-radius: 3px;
  animation: dash-skel 1.2s linear infinite;
}
@keyframes dash-skel {
  0%   { background-position: 200%; }
  100% { background-position: -200%; }
}

/* ── Drawer / modal: smoother open/close ── */
.drawer-overlay,
.modal-overlay {
  transition: opacity .2s ease;
}

/* ── Toast: stack consistently bottom-right ── */
.toast-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1000;
}
.toast {
  padding: 9px 13px;
  background: var(--onyx, #0B0B0C);
  color: #fff;
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  animation: dash-toast-in 0.2s ease;
  max-width: 320px;
}
.toast.success { background: var(--green, #2F7D5C); }
.toast.error   { background: var(--red, #9A2B2B); }
.toast.info    { background: var(--blue, #355E7A); }
@keyframes dash-toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Panel-head: prevent text wrap chaos in narrow viewports ── */
.panel-head {
  min-height: 44px;
  align-items: center;
}
.panel-head > .panel-meta {
  font-variant-numeric: tabular-nums;
}

/* ── Sidebar: better active state, smoother hover ── */
.sb-item {
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

/* Sidebar badges: numerical alignment */
.sb-badge {
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-width: 18px;
}

/* ── Topbar: more breathing room ── */
.topbar {
  min-height: 64px;
  gap: 14px;
}

/* ── Tab strip: visible bottom border on inactive tabs (subtle) ── */
.tab {
  transition: color .12s ease, border-bottom-color .12s ease;
}
.tab:hover:not(.active) {
  color: var(--onyx-5);
  border-bottom-color: var(--rule);
}

/* ── Print styles: invoices & reports clean output ── */
@media print {
  .sb, .topbar, .tab-strip, .toast-wrap,
  .drawer, .drawer-overlay, .modal, .modal-overlay,
  #__velora_workbench, [class*="workbench"] {
    display: none !important;
  }
  .main {
    overflow: visible !important;
    height: auto !important;
  }
  .content {
    padding: 0 !important;
  }
  body {
    background: #fff !important;
    overflow: visible !important;
  }
  .panel {
    border: none !important;
    page-break-inside: avoid;
  }
}

/* ── Subtle scrollbar styling (webkit only — graceful no-op elsewhere) ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ivory-2, #F5F1E8); }
::-webkit-scrollbar-thumb {
  background: var(--rule, #D6CCB5);
  border-radius: 5px;
  border: 2px solid var(--ivory-2, #F5F1E8);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold, #C29A4A); }

/* ── Code/mono samples: consistent rendering ── */
code, kbd, .mono {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Disabled state: clearer cue ── */
button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-sm[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ─── v2 additions: responsive + tab overflow + table links ─── */

/* ── Tablet/mobile fallback: keep dashboards usable on small screens ── */
@media (max-width: 1024px) {
  .sb {
    width: 180px !important;
  }
  .sb-section, .sb-item {
    font-size: 11px;
  }
  .topbar { padding: 12px 16px 10px; }
  .content { padding: 14px 16px; }
  .tb-title { font-size: 24px !important; }
}

@media (max-width: 768px) {
  body { display: block !important; }
  .sb {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid var(--rule);
  }
  .sb-nav {
    display: flex !important;
    overflow-x: auto;
    padding: 6px;
    gap: 4px;
  }
  .sb-section { display: none; }
  .sb-item {
    flex: 0 0 auto !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 6px 12px !important;
    white-space: nowrap;
  }
  .sb-item.active {
    border-bottom-color: var(--gold) !important;
    border-left-color: transparent !important;
  }
  .main { width: 100%; height: auto; min-height: calc(100vh - 80px); }
  .tab-strip { padding: 0 14px; }
  .chart-grid { grid-template-columns: 1fr !important; }
  .stat-row { grid-template-columns: 1fr 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
}


/* VELORA_MOBILE_TOPBAR_RENDER_FIX_20260524 */
@media (max-width: 768px) {
  .topbar {
    position: relative !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .tb-right {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  .tb-right > * {
    flex: 0 0 auto !important;
  }
  .main,
  .content,
  .panel {
    max-width: 100% !important;
  }
}

/* ── Tab strip: gradient hint when content overflows horizontally ── */
.tab-strip {
  position: relative;
}
.tab-strip::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to left, var(--ivory-2, #F5F1E8), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.tab-strip[data-overflow="true"]::after { opacity: 1; }

/* ── Table internal links: clearer hit target ── */
.tbl a {
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color .12s ease, color .12s ease;
}
.tbl a:hover {
  border-bottom-color: currentColor;
}

/* ── Long numeric columns: tabular figures for crisp alignment ── */
.tbl td, .stat-val, .kpi-card .val {
  font-variant-numeric: tabular-nums;
}

/* ── Section dividers: very subtle gold tint ── */
hr, .hr-soft {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule), transparent);
  margin: 16px 0;
}

/* ── Tooltip-style title attributes get a slight delay (subjective UX win) ── */
[title]:hover {
  text-decoration: none;
}

/* ── Forms: cleaner labels ── */
.fld label, label {
  user-select: none;
}

/* ── Loading spinner (utility, opt-in via .spinner class) ── */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--rule);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: dash-spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes dash-spin {
  to { transform: rotate(360deg); }
}

/* ── Notification dot (small attention-grabber) ── */
.notif-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 4px;
  animation: dash-pulse 1.4s ease-in-out infinite;
}
@keyframes dash-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}