/* ===========================================
   MG Hodowla - Custom Styles
   =========================================== */

/* Globalne zmienne CSS */
:root {
  --app-font-size: 16px;
}

/* ===========================================
   Semantyczne kolory płci dla DaisyUI
   Automatycznie dostosowują się do motywu
   =========================================== */

/* Jasne motywy - ciemne kolory płci */
:root,
[data-theme="light"],
[data-theme="cupcake"],
[data-theme="emerald"],
[data-theme="corporate"],
[data-theme="winter"],
[data-theme="mglight"] {
  --color-male: #2563eb;
  /* ciemnoniebieski tekst */
  --color-male-bg: #dbeafe;
  /* jasnoniebieski tło */
  --color-female: #db2777;
  /* ciemnoróżowy tekst */
  --color-female-bg: #fce7f3;
  /* jasnoróżowy tło */
  --color-unknown: #000000;
  /* czarny tekst dla nieokreślonej płci */
}

/* Ciemne motywy - jasne kolory płci */
[data-theme="dark"],
[data-theme="forest"],
[data-theme="business"],
[data-theme="night"],
[data-theme="mgdark"] {
  --color-male: #93c5fd;
  /* jasnoniebieski tekst */
  --color-male-bg: rgba(30, 58, 138, 0.4);
  /* ciemnoniebieski tło */
  --color-female: #f9a8d4;
  /* jasnoróżowy tekst */
  --color-female-bg: rgba(131, 24, 67, 0.4);
  /* ciemnoróżowy tło */
  --color-unknown: #ffffff;
  /* biały tekst dla nieokreślonej płci */
}

/* Utility classes for gender colors (since CDN Tailwind doesn't have them) */
.text-male {
  color: var(--color-male);
}

.text-female {
  color: var(--color-female);
}

.bg-male-bg {
  background-color: var(--color-male-bg);
}

.bg-female-bg {
  background-color: var(--color-female-bg);
}

/* Hover variants */
.hover\:bg-male-bg\/50:hover {
  background-color: color-mix(in srgb, var(--color-male-bg) 50%, transparent);
}

.hover\:bg-female-bg\/50:hover {
  background-color: color-mix(in srgb, var(--color-female-bg) 50%, transparent);
}

.hover\:text-male:hover {
  color: var(--color-male) !important;
}

.hover\:text-female:hover {
  color: var(--color-female) !important;
}

.hover\:text-unknown:hover {
  color: var(--color-unknown) !important;
}

html,
body {
  font-size: var(--app-font-size);
  min-height: 100vh;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Bazowy kontener aplikacji */
.app-container {
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
}

/* ===========================================
   Responsywność tabel - zapobieganie rozciąganiu ekranu
   =========================================== */

/* Tabele nie mogą rozciągać rodzica */
table {
  table-layout: auto;
}

/* Wrapper dla tabel - umożliwia przewijanie poziome */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Karty z tabelami - responsywność bez wpływu na dropdown */
.card {
  max-width: 100%;
}

/* Body karty - pozwól na overflow dla dropdown */
.card-body {
  max-width: 100%;
}

/* Główna treść */
main {
  max-width: 100%;
  overflow-x: hidden;
}

/* ===========================================
   Dropdown menu - wyjątki dla responsywności
   =========================================== */

/* Dropdown-content musi móc wyjść poza kontener */
.dropdown-content {
  max-width: none !important;
  overflow: visible !important;
}

/* Elementy menu dropdown nie powinny zawijać tekstu */
.dropdown-content li,
.dropdown-content button,
.dropdown-content a,
.menu li,
.menu a,
.menu button {
  white-space: nowrap;
}

/* Minimalna szerokość dla dropdown menu */
.dropdown-content.menu {
  min-width: max-content;
}

/* ===========================================
   Własne motywy DaisyUI (mglight, mgdark)
   =========================================== */

[data-theme="mglight"] {
  --p: 217 91% 60%;
  --pf: 217 91% 50%;
  --pc: 0 0% 100%;
  --s: 215 16% 47%;
  --sf: 215 16% 37%;
  --sc: 0 0% 100%;
  --a: 38 92% 50%;
  --af: 38 92% 40%;
  --ac: 0 0% 100%;
  --n: 220 14% 20%;
  --nf: 220 14% 15%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 220 14% 96%;
  --b3: 220 13% 91%;
  --bc: 220 14% 20%;
  --in: 198 93% 60%;
  --inc: 0 0% 100%;
  --su: 142 76% 36%;
  --suc: 0 0% 100%;
  --wa: 45 93% 47%;
  --wac: 0 0% 20%;
  --er: 0 84% 60%;
  --erc: 0 0% 100%;
  --rounded-box: 0.5rem;
  --rounded-btn: 0.375rem;
  --rounded-badge: 1rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.98;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

[data-theme="mgdark"] {
  --p: 217 91% 70%;
  --pf: 217 91% 60%;
  --pc: 220 14% 10%;
  --s: 215 16% 65%;
  --sf: 215 16% 55%;
  --sc: 220 14% 10%;
  --a: 45 93% 58%;
  --af: 45 93% 48%;
  --ac: 220 14% 10%;
  --n: 220 14% 20%;
  --nf: 220 14% 15%;
  --nc: 0 0% 100%;
  --b1: 220 14% 10%;
  --b2: 220 14% 14%;
  --b3: 220 13% 20%;
  --bc: 220 14% 90%;
  --in: 198 93% 70%;
  --inc: 220 14% 10%;
  --su: 142 76% 50%;
  --suc: 220 14% 10%;
  --wa: 45 93% 58%;
  --wac: 220 14% 10%;
  --er: 0 84% 70%;
  --erc: 220 14% 10%;
  --rounded-box: 0.5rem;
  --rounded-btn: 0.375rem;
  --rounded-badge: 1rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.98;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ===========================================
   Blazor-specific styles
   =========================================== */

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* ===========================================
   Animacje
   =========================================== */

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================
   Scrollbar styling
   =========================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--bc) / 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--bc) / 0.3);
}