/* ================================================================
   base.css — reset + global element styles
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body-font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5 { font-family: var(--heading-font); font-weight: 600; line-height: 1.25; color: var(--dark); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.app-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg);
  width: 100%;
  min-width: 0;
}

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); flex-wrap: wrap;
  margin-bottom: var(--sp-xl);
}
.page-head h1 { display: flex; align-items: center; gap: .5rem; }
.page-head .subtitle { color: var(--muted); font-size: .9rem; margin-top: .15rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-lg);
}
.panel + .panel { margin-top: var(--sp-lg); }
.panel-title {
  font-family: var(--heading-font); font-weight: 600; font-size: 1.05rem;
  color: var(--dark); margin-bottom: var(--sp-md);
  display: flex; align-items: center; gap: .5rem;
}

.kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}
.kpi {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-md) var(--sp-md) var(--sp-md) calc(var(--sp-md) + 4px);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--accent); }
.kpi .kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.kpi .kpi-value { font-family: var(--heading-font); font-size: 1.9rem; font-weight: 700; color: var(--dark); margin-top: .25rem; }
.kpi .kpi-sub { font-size: .8rem; color: var(--faint); margin-top: .15rem; }
.kpi i.kpi-icon { position: absolute; right: 14px; top: 14px; font-size: 1.6rem; color: var(--panel-alt); }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .22rem .6rem; border-radius: var(--r-pill); text-transform: capitalize;
  background: var(--panel-alt); color: var(--muted);
}
.badge-draft     { background: var(--panel-alt); color: var(--muted); }
.badge-active    { background: var(--info-bg); color: var(--info); }
.badge-completed { background: var(--success-bg); color: var(--success); }
.badge-invoiced  { background: var(--warning-bg); color: var(--warning); }
.badge-sent      { background: var(--info-bg); color: var(--info); }
.badge-viewed    { background: var(--info-bg); color: var(--info); }
.badge-paid      { background: var(--success-bg); color: var(--success); }
.badge-void,
.badge-cancelled { background: var(--danger-bg); color: var(--danger); }
.badge-normal    { background: var(--panel-alt); color: var(--muted); }
.badge-urgent    { background: var(--warning-bg); color: var(--warning); }
.badge-emergency { background: var(--emergency); color: #fff; }
.badge-new        { background: var(--info-bg); color: var(--info); }
.badge-contacted  { background: var(--warning-bg); color: var(--warning); }
.badge-quoted     { background: #EDE4F7; color: #6B3FA0; }
.badge-closed_won { background: var(--success-bg); color: var(--success); }
.badge-closed_lost{ background: var(--danger-bg); color: var(--danger); }

.muted { color: var(--muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-variant-numeric: tabular-nums; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.wrap { flex-wrap: wrap; }
.mt-lg { margin-top: var(--sp-lg); }
.mb-lg { margin-bottom: var(--sp-lg); }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }

.empty-state {
  text-align: center; padding: var(--sp-2xl) var(--sp-lg); color: var(--muted);
}
.empty-state i { font-size: 2.5rem; color: var(--border-strong); display: block; margin-bottom: var(--sp-sm); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--dark); color:#fff; padding: 8px 14px; border-radius: var(--r-sm); z-index: 9999; }