/* =========================================================
   P2PAYROLL – Core UI (Typography + Layout)
   app.css
   Include order:
     bootstrap.css
     app.css
     theme.css
========================================================= */

/* Inter font (web). If you want offline/self-hosted later, tell me. */
:root{
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
body{ font-family: var(--font-body); }
h1,h2,h3,h4,h5,.kpi,.btn{ font-family: var(--font-head); }

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------
   Typography
--------------------------------- */
h1, h2, h3, h4, h5{
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}

h1{ font-size: 34px; }
h2{ font-size: 26px; }
h3{ font-size: 20px; }
h4{ font-size: 16px; }

p{ margin: 0 0 12px; }

.muted{ color: var(--muted) !important; }
.muted2{ color: var(--muted2) !important; }
.tiny{ font-size: 12.5px; letter-spacing: .01em; }

.num, .td-num, .kpi{ font-variant-numeric: tabular-nums; }

/* --------------------------------
   Links
--------------------------------- */
a{ color: var(--text); text-decoration: none; }
a:hover{ color: var(--primary); }

/* --------------------------------
   Brand header helpers
--------------------------------- */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logoBox{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  overflow:hidden;
}

:root:not([data-theme="dark"]) .logoBox{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}

.brandTop{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted2);
}

.brandBottom{
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* --------------------------------
   Cards / Panels
--------------------------------- */
.glass{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.cardish{
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}

.hr-soft{ border-color: var(--border) !important; opacity: 1; }

/* Hover: ONLY move a bit (don’t change contrast) */
.glass:hover,
.cardish:hover{
  transform: translateY(-1px);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* --------------------------------
   Buttons (Bootstrap tuned)
--------------------------------- */
.btn{
  border-radius: 14px !important;
  font-weight: 700;
  padding: 9px 14px !important;
  letter-spacing: .01em;
}

.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.30);
}

:root[data-theme="dark"] .btn-primary{
  box-shadow: 0 10px 22px rgba(59,130,246,.22);
}

.btn-primary:hover{ filter: brightness(.98); }

.btn-outline-light{
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
}

.btn-outline-light:hover{
  background: rgba(0,0,0,.04) !important;
}

:root[data-theme="dark"] .btn-outline-light:hover{
  background: rgba(255,255,255,.06) !important;
}

.btn-sm{
  padding: 7px 11px !important;
  border-radius: 12px !important;
}

/* --------------------------------
   Forms
--------------------------------- */
.form-label{
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

.form-control,
.form-select,
.input-group-text{
  border-radius: 14px !important;
  font-family: var(--font-sans);
}

.form-control,
.form-select{
  background: var(--card2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 11px 12px;
}

.form-control::placeholder{ color: var(--muted2); }

.form-control:focus,
.form-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .22rem var(--primarySoft);
}

/* --------------------------------
   KPI / Chips
--------------------------------- */
.kpi{
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--border2);
  background: rgba(0,0,0,.04);
  color: var(--text);
}

:root[data-theme="dark"] .chip{
  background: rgba(255,255,255,.06);
}

.chip-ok{
  background: var(--successSoft);
  border-color: rgba(22,163,74,.45);
  color: var(--success);
}
:root[data-theme="dark"] .chip-ok{
  color: rgba(220,252,231,.95);
  border-color: rgba(34,197,94,.45);
}

.chip-warn{
  background: var(--warningSoft);
  border-color: rgba(245,158,11,.45);
  color: var(--warning);
}
:root[data-theme="dark"] .chip-warn{
  color: rgba(255,247,237,.95);
  border-color: rgba(251,191,36,.40);
}

/* --------------------------------
   Divider
--------------------------------- */
.divider{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:1px;
  background: var(--border);
}

/* --------------------------------
   Responsive
--------------------------------- */
@media (max-width: 768px){
  body{ font-size: 14px; }
  h1{ font-size: 26px; }
  h2{ font-size: 22px; }
  .kpi{ font-size: 30px; }
}