:root {
  --bg-main: #F8FAFC;
  --bg-card: #FFFFFF;
  --border-card: #E2E8F0;
  --text-primary: #0F172A;
  --text-muted: #64748B;
  --accent-blue: #2563EB;
  --accent-navy: #1E3A8A;
  --accent-amber: #D97706;
  --accent-emerald: #059669;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, .font-heading {
  font-family: 'Outfit', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Crisp White & Blue Cards */
.glass-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
}

.glass-nav {
  background: #0F172A;
  border-bottom: 1px solid #1E293B;
}

/* Custom Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Print Stylesheet for Official Documents */
/* Mobile form controls stay usable without changing desktop layout or record behaviour. */
@media (max-width: 767px) {
  header > div:first-child > div { flex-wrap: wrap; height:auto; padding:10px 0; }
  header nav { display:none; }
  #app-quick-actions { flex-wrap:wrap; }
  #invoice-form .grid-cols-3 { grid-template-columns:repeat(1,minmax(0,1fr)); }
  #line-items-container input, #line-items-container select { font-size:16px; }
  #invoice-modal { padding:8px; align-items:flex-start; }
  #invoice-form { padding:16px; }
  #offline-app-about { font-size:15px; }
}

@media print {
  #offline-app-about { display:none!important; }
  body * {
    visibility: hidden;
  }
  #print-modal-content, #print-modal-content * {
    visibility: visible;
  }
  #print-modal-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    border: none !important;
  }
  .print\:hidden {
    display: none !important;
  }
}