a { color: inherit; }
button, input, textarea, select { font: inherit; }

/* ===========================
   InvoiceTap UI — SmileTap-style
   (keeps your existing classnames)
   =========================== */

/* Base system (accent can be overridden inline from PHP if you want) */
:root{
  --bg: #f8fafc;            /* slate-50 */
  --card: #ffffff;
  --text: #0f172a;          /* slate-900 */
  --muted: #64748b;         /* slate-500 */
  --stroke: #e2e8f0;        /* slate-200 */
  --soft: #f1f5f9;          /* slate-100 */
  --accent: #0ea5e9;        /* sky-500 */
  --accent-600: #0284c7;    /* sky-600 */
  --danger: #b91c1c;        /* red-700 */
  --success: #16a34a;       /* green-600 */
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --shadow-soft: 0 5px 18px rgba(2,6,23,.06);
  --radius: 14px;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --card:#0f172a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --stroke:#1f2937;
    --soft:#111827;
    --shadow: 0 10px 30px rgba(0,0,0,.5);
    --shadow-soft: 0 5px 18px rgba(0,0,0,.35);
  }
}

/* Reset-ish */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Links, focus, selection */
a{ text-decoration: none; }
a:hover{ text-decoration: underline; text-decoration-thickness: 1.5px; }
:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, white);
  outline-offset: 2px;
  border-radius: 8px;
}
::selection{ background: color-mix(in srgb, var(--accent) 18%, #0000); }

/* Layout */
.wrap{ max-width: 1100px; margin: 32px auto; padding: 0 16px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.brand{ display:flex; align-items:center; gap:10px; }

.h1{ font-size:20px; margin:0; font-weight: 800; }
.h2{ font-size:14px; color: var(--muted); margin:6px 0 0; }

.muted{ color: var(--muted); }
.right{ text-align:right; }
.small{ font-size: 12px; }
.kpi{ font-weight: 800; font-size: 18px; }

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding:16px;
}
.card-pad{ padding: 16px; }

/* Helpers */
.hr{ height:1px; background: var(--stroke); margin: 14px 0; }

/* Badge (your invoice type badge) */
.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size:12px;
  color: var(--muted);
  padding:6px 10px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background: var(--soft);
  font-weight: 700;
}

/* Grids */
.grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; }
@media (max-width: 900px){ .grid{ grid-template-columns:1fr; } }

.row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 700px){ .row{ grid-template-columns:1fr; } }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--text);
  cursor:pointer;
  font-weight: 600;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}
.btn:active{ transform: translateY(0); }

/* Your existing .btn.primary */
.btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover{
  background: var(--accent-600);
  border-color: var(--accent-600);
}

/* Optional compatibility if you ever use these */
.btn--primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--ghost{ background: var(--soft); }
.btn--danger{
  background: color-mix(in srgb, var(--danger) 92%, #fff);
  border-color: color-mix(in srgb, var(--danger) 92%, #fff);
  color: #fff;
}

/* Inputs */
.input, textarea, select,
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="color"], input[type="file"], input[type="date"], input[type="number"]{
  width:100%;
  padding:10px 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--text);
  outline:none;
}
textarea{ min-height: 90px; resize: vertical; }

/* Make selects look consistent */
select{ appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* Table */
.table{
  width:100%;
  border-collapse: collapse;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
}
.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}
.table th{
  text-align:left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--soft);
}
.table tr:last-child td{ border-bottom: 0; }

/* Invoice head blocks */
.invoice-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.invoice-block{
  white-space: pre-line;
  line-height: 1.35rem;
}

/* Pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}

/* If you ever use span.pill as a badge, keep it inert */
span.pill{ pointer-events:none; cursor:default; }

/* Sticky save bar */
.sticky-save{
  position: sticky;
  top: 12px;
  z-index: 10;
  display:flex;
  justify-content:flex-end;
  padding: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #0000), color-mix(in srgb, var(--bg) 40%, #0000));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--stroke) 70%, #0000);
}

/* Invoice range row */
.invoice-range{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 0;
}

/* Danger utility (your delete buttons) */
.danger{
  background: color-mix(in srgb, var(--danger) 12%, var(--card));
  border-color: color-mix(in srgb, var(--danger) 35%, var(--stroke));
}
.danger:hover{
  background: color-mix(in srgb, var(--danger) 18%, var(--card));
}

/* ===========================
   Modal (keeps your existing structure)
   =========================== */
.modal-backdrop{
  position: fixed; inset:0;
  background: rgba(2,6,23,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 999;
}
.modal{
  width: min(720px, 96vw);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.modal .card-pad{ padding: 16px; }
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:6px;
}
.modal-close{
  width:42px; height:42px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--soft);
  color: var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.modal-close:hover{ filter: brightness(0.98); }

/* ===========================
   Mobile tweaks
   =========================== */
@media (max-width: 760px){
  .topbar{ align-items:flex-start; }
  .btn{ padding: 10px 12px; }
  .invoice-head{ flex-direction: column; }
  .invoice-head > div{ width:100% !important; min-width: 0 !important; }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}