/* =====================================================================
   IPHOXY Payroll — Professional Polish Layer (theme-pro.css)
   Loaded LAST. Purely cosmetic: fixes low-contrast / invisible buttons,
   unifies the palette, and modernizes spacing. NO markup or logic changes.
   ===================================================================== */

:root {
  --ip-brand:        #B91C1C;   /* IPHOXY red */
  --ip-brand-hover:  #991B1B;
  --ip-ink:          #0F172A;   /* near-black text */
  --ip-line:         #E2E8F0;   /* hairline border */
  --ip-soft:         #F1F5F9;   /* soft surface */
  --ip-soft-hover:   #E2E8F0;
  --ip-focus:        rgba(185, 28, 28, 0.30);
}

/* ---- THE FIX: outline-light / light buttons were white-on-white (invisible).
        Repaint them as a clearly visible neutral "soft" button. ---- */
.btn-outline-light,
.btn-outline-light.border {
  background: #ffffff !important;
  color: var(--ip-ink) !important;
  border: 1px solid var(--ip-line) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  background: var(--ip-soft) !important;
  color: var(--ip-ink) !important;
  border-color: #94A3B8 !important;
}

/* "Save All" sits on the coloured card headers — keep it readable there too */
.card-header .btn-light,
.hdr-standard .btn-light,
.hdr-moom .btn-light {
  background: #ffffff !important;
  color: var(--ip-ink) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  font-weight: 600;
}
.card-header .btn-light:hover { background: #f8fafc !important; }

/* ---- Unify the primary/danger brand so reds match across pages ---- */
.btn-primary, .btn-danger, .btn-brand {
  background: var(--ip-brand) !important;
  border-color: var(--ip-brand) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-danger:hover, .btn-brand:hover {
  background: var(--ip-brand-hover) !important;
  border-color: var(--ip-brand-hover) !important;
  color: #fff !important;
}

/* Secondary / neutral buttons: always visible, never white-on-white */
.btn-outline-secondary {
  background: #fff !important;
  color: #334155 !important;
  border: 1px solid var(--ip-line) !important;
}
.btn-outline-secondary:hover {
  background: var(--ip-soft) !important;
  color: var(--ip-ink) !important;
  border-color: #94A3B8 !important;
}

/* Success / warning kept semantic but slightly calmer */
.btn-success { background:#047857 !important; border-color:#047857 !important; color:#fff !important; }
.btn-success:hover { background:#065F46 !important; }
.btn-warning { background:#D97706 !important; border-color:#D97706 !important; color:#fff !important; }
.btn-warning:hover { background:#B45309 !important; color:#fff !important; }
.btn-dark { background:#1E293B !important; border-color:#1E293B !important; color:#fff !important; }

/* Visible keyboard focus for accessibility (was missing) */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 3px solid var(--ip-focus) !important;
  outline-offset: 1px;
}

/* ---- De-clutter: make secondary row actions visually lighter so primary
        actions stand out (purely visual; all buttons remain present) ---- */
.table .btn-sm { font-weight: 600; }
.table td .btn + .btn { margin-left: .35rem; }

/* Slightly crisper cards & headers for a more modern, professional feel */
.card { border-radius: 10px !important; }
.card-header { letter-spacing: -0.01em; }

/* Make inline edit-row forms read as a clear "edit panel" rather than clutter */
tr[data-edit] .bg-light,
tr[data-vedit] .bg-light {
  background: #F8FAFC !important;
  border: 1px solid var(--ip-line) !important;
  border-radius: 10px;
}

/* Tables: a touch more breathing room, clearer header */
.table thead th { background: #F8FAFC !important; color:#475569 !important; }
.table-hover tbody tr:hover { background:#FafbfC !important; }