/* Elegant Premium Swiss Navy and Gold styling variables */
:root {
  --navy-dark: #0E1C2F;
  --navy-medium: #15273F;
  --navy-light: #1D314E;
  --gold-pure: #C9A84C;
  --gold-soft: #DFC98A;
  --white: #FFFFFF;
  --gray-light: #EBEBEB;
  --gray-medium: #8C9BAB;
  --whatsapp-green: #25D366;
  --whatsapp-hover: #20BA56;
}

/* Base resets & styles */
body {
  background-color: var(--navy-dark);
  color: var(--gray-light);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Elegant scrollbar styling */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--navy-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--gold-pure);
  border-radius: 0px;
}

/* Custom premium card borders & interactive behaviors */
.bobi-card {
  background-color: var(--navy-medium);
  border: 1px solid rgba(201, 168, 76, 0.12);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bobi-card:hover {
  border-color: rgba(201, 168, 76, 0.35);
}

.bobi-card-gold {
  background-color: var(--navy-medium);
  border: 2px solid var(--gold-pure);
}

/* Gold elements styling */
.border-gold {
  border-color: var(--gold-pure);
}
.text-gold {
  color: var(--gold-pure);
}
/*
  rgb(...) mit --tw-bg-opacity statt eines flachen background-color, damit die
  Tailwind-Utility "bg-opacity-*" (z.B. "bg-gold bg-opacity-15" für dezente
  Status-Badges) tatsächlich greift. Vorher war .bg-gold immer voll deckend,
  wodurch z.B. Badges mit "text-gold" darauf unlesbar wurden (Gelb auf Gelb).
*/
.bg-gold {
  background-color: rgb(201 168 76 / var(--tw-bg-opacity, 1));
}
.bg-gold:hover {
  background-color: var(--gold-soft);
}

/* Tab Highlight styling */
.nav-active {
  color: var(--gold-pure);
  border-bottom: 2px solid var(--gold-pure);
}

/* Subtle flat input design styling */
input, select, textarea {
  background-color: var(--navy-dark) !important;
  border: 1px solid rgba(201, 168, 76, 0.25) !important;
  color: var(--white) !important;
  outline: none;
  transition: all 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold-pure) !important;
}

/* Micro-animations and utility styling */
.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pure styling for visual badge safety checks */
.badge-red {
  background-color: rgba(239, 68, 68, 0.08);
  border: 1px solid rgb(239, 68, 68);
  color: rgb(248, 113, 113);
}

.badge-yellow {
  background-color: rgba(245, 158, 11, 0.08);
  border: 1px solid rgb(245, 158, 11);
  color: rgb(251, 191, 36);
}

.badge-green {
  background-color: rgba(16, 185, 129, 0.08);
  border: 1px solid rgb(16, 185, 129);
  color: rgb(52, 211, 153);
}

/*
  Druck/PDF (z.B. Offerten-/Rechnungs-Generator → "Drucken / als PDF speichern"):
  Sidebar, Kopfzeile und alle mit .no-print markierten Bedienelemente werden per
  display:none komplett aus dem Layout entfernt (nicht nur unsichtbar gemacht) —
  dadurch bleibt keine leere, aber noch Platz beanspruchende Fläche übrig, und das
  eigentliche Dokument (.swiss-doc, siehe quote-doc.css) fliesst ganz normal ohne
  jede Positionierungs-Unsicherheit oben auf die Seite. Der scrollbare
  Haupt-Inhaltsbereich (overflow-y-auto, sonst nur für die Bildschirmansicht mit
  Scrollbalken gedacht) wird zusätzlich von seiner Breiten-/Überlauf-Begrenzung befreit.
*/
@media print {
  .no-print {
    display: none !important;
  }
  aside {
    display: none !important;
  }
  main > header {
    display: none !important;
  }
  .overflow-y-auto {
    overflow: visible !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body, html {
    background: #ffffff !important;
    margin: 0 !important;
  }
}