/*
 * Shared visual layer for 513 apps.
 * It lets each app reuse the shared palette and control styling without
 * changing the existing Alpine/Twig structure.
 */

:root {
  --app-bg: #020617;
  --app-panel: rgba(15, 23, 42, 0.78);
  --app-panel-strong: #0f172a;
  --app-border: #1e293b;
  --app-border-strong: #334155;
  --app-text: #f1f5f9;
  --app-muted: #94a3b8;
  --app-dim: #64748b;
  --app-accent: #0284c7;
  --app-accent-hover: #0ea5e9;
  --app-accent-soft: rgba(14, 165, 233, 0.16);
  --app-accent-border: #38bdf8;
}

.app-skin {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
}

body.app-skin > main {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

.app-skin:not(body) > header {
  z-index: 30;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-bg) !important;
  backdrop-filter: blur(12px);
}

.app-skin:not(body) > header > div {
  max-width: 80rem !important;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem !important;
}

.app-skin:not(body) > main {
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  padding: 0.75rem !important;
}

@media (min-width: 640px) {
  .app-skin:not(body) > main,
  .app-skin:not(body) > header > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

.app-skin h1,
.app-skin h2,
.app-skin h3,
.app-skin .font-bold,
.app-skin .font-semibold {
  letter-spacing: 0;
}

.app-skin .rounded-xl,
.app-skin .rounded-lg {
  border-radius: 0.375rem !important;
}

.app-skin .bg-slate-800 {
  background-color: var(--app-panel) !important;
}

.app-skin .bg-slate-950,
.app-skin .bg-slate-950\/80,
.app-skin .bg-slate-950\/95 {
  background-color: var(--app-bg) !important;
}

.app-skin .bg-slate-900 {
  background-color: var(--app-panel-strong) !important;
}

.app-skin .bg-slate-900\/30,
.app-skin .bg-slate-900\/50,
.app-skin .bg-slate-900\/60,
.app-skin .bg-slate-900\/80 {
  background-color: var(--app-panel) !important;
}

.app-skin .bg-slate-700 {
  background-color: var(--app-border) !important;
}

.app-skin .bg-slate-600 {
  background-color: var(--app-border-strong) !important;
}

.app-skin .bg-slate-700\/20,
.app-skin .bg-slate-700\/30,
.app-skin .bg-slate-700\/40,
.app-skin .bg-slate-700\/50 {
  background-color: var(--app-panel) !important;
}

.app-skin .border-slate-500,
.app-skin .border-slate-700,
.app-skin .border-slate-600,
.app-skin .border-slate-800 {
  border-color: var(--app-border) !important;
}

.app-skin .text-slate-100,
.app-skin .text-slate-200,
.app-skin .text-slate-300 {
  color: var(--app-text) !important;
}

.app-skin .text-slate-400,
.app-skin .text-slate-500 {
  color: var(--app-muted) !important;
}

.app-skin .text-slate-600 {
  color: var(--app-dim) !important;
}

.app-skin .bg-blue-600,
.app-skin .bg-blue-700,
.app-skin .bg-cyan-600,
.app-skin .bg-cyan-700,
.app-skin .bg-sky-600,
.app-skin .bg-sky-700,
.app-skin .bg-teal-600,
.app-skin .bg-teal-700 {
  background-color: var(--app-accent) !important;
}

.app-skin .bg-blue-900\/30,
.app-skin .bg-cyan-950\/40,
.app-skin .bg-cyan-950\/50,
.app-skin .bg-cyan-950\/60,
.app-skin .bg-sky-900\/30,
.app-skin .bg-teal-950\/50 {
  background-color: var(--app-accent-soft) !important;
}

.app-skin .hover\:bg-blue-500:hover,
.app-skin .hover\:bg-blue-600:hover,
.app-skin .hover\:bg-blue-700:hover,
.app-skin .hover\:bg-cyan-500:hover,
.app-skin .hover\:bg-cyan-600:hover,
.app-skin .hover\:bg-cyan-700:hover,
.app-skin .hover\:bg-sky-500:hover,
.app-skin .hover\:bg-sky-600:hover,
.app-skin .hover\:bg-teal-500:hover,
.app-skin .hover\:bg-teal-600:hover {
  background-color: var(--app-accent-hover) !important;
}

.app-skin .text-blue-400,
.app-skin .text-blue-500,
.app-skin .text-cyan-200,
.app-skin .text-cyan-300,
.app-skin .text-cyan-400,
.app-skin .text-cyan-500,
.app-skin .text-sky-400,
.app-skin .text-sky-500,
.app-skin .text-teal-400,
.app-skin .text-teal-500,
.app-skin .hover\:text-blue-400:hover,
.app-skin .hover\:text-blue-300:hover,
.app-skin .hover\:text-cyan-400:hover,
.app-skin .hover\:text-cyan-300:hover,
.app-skin .hover\:text-sky-400:hover,
.app-skin .hover\:text-sky-300:hover,
.app-skin .hover\:text-teal-400:hover,
.app-skin .hover\:text-teal-300:hover {
  color: var(--app-accent-border) !important;
}

.app-skin .border-blue-500,
.app-skin .border-blue-600,
.app-skin .border-cyan-500,
.app-skin .border-cyan-600,
.app-skin .border-cyan-700,
.app-skin .border-cyan-800,
.app-skin .border-sky-500,
.app-skin .border-sky-600,
.app-skin .border-teal-500,
.app-skin .border-teal-600,
.app-skin .border-teal-700,
.app-skin .focus\:border-blue-500:focus,
.app-skin .focus\:border-cyan-500:focus,
.app-skin .focus\:border-sky-500:focus,
.app-skin .focus\:border-teal-500:focus,
.app-skin .hover\:border-cyan-500:hover,
.app-skin .hover\:border-cyan-700:hover,
.app-skin .hover\:border-blue-500:hover,
.app-skin .hover\:border-sky-500:hover,
.app-skin .hover\:border-teal-500:hover {
  border-color: var(--app-accent-border) !important;
}

.app-skin .ring-cyan-800 {
  --tw-ring-color: var(--app-accent-border) !important;
}

.app-skin a {
  text-underline-offset: 3px;
}

.app-skin:not(body) > header > div > div:first-child > a:not(:first-child),
.app-skin:not(body) > header > div > div:last-child > a,
.app-skin:not(body) > header > div > div:last-child > div > button {
  border: 1px solid var(--app-border) !important;
  border-radius: 0.375rem !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  font-weight: 500;
  color: var(--app-text) !important;
  background: transparent;
}

.app-skin:not(body) > header > div > div:first-child > a:not(:first-child):hover,
.app-skin:not(body) > header > div > div:last-child > a:hover,
.app-skin:not(body) > header > div > div:last-child > div > button:hover {
  border-color: var(--app-accent-border) !important;
  color: var(--app-text) !important;
  background: var(--app-panel) !important;
}

.app-skin:not(body) > header a:first-child {
  color: var(--app-text);
}

.app-skin input:not([type="checkbox"]):not([type="radio"]),
.app-skin select,
.app-skin textarea {
  border-color: var(--app-border) !important;
  background-color: rgba(2, 6, 23, 0.7) !important;
  color: var(--app-text);
  outline: none;
}

.app-skin input:not([type="checkbox"]):not([type="radio"]):focus,
.app-skin select:focus,
.app-skin textarea:focus {
  border-color: var(--app-accent-border) !important;
  box-shadow: 0 0 0 1px var(--app-accent-soft);
}

.app-skin button,
.app-skin a {
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  transition-duration: 150ms;
}

.app-skin button:disabled {
  cursor: not-allowed;
}

.app-skin:not(body) > main > .bg-slate-800,
.app-skin:not(body) > main > div .bg-slate-800 {
  border: 1px solid var(--app-border);
}

.app-skin:not(body) > main > .bg-slate-800,
.app-skin [x-show="filtryOtwarte"],
.app-skin [x-show="szukajWyniki !== null"] {
  box-shadow: none;
}

.app-skin .shadow-xl {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35) !important;
}

.app-skin .text-2xl {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

.app-skin .text-xl {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.app-skin .p-8 {
  padding: 1.5rem !important;
}

.app-skin .p-6 {
  padding: 1.25rem !important;
}

.app-skin .p-5 {
  padding: 1rem !important;
}

.app-skin .p-4 {
  padding: 0.75rem !important;
}

.app-skin .py-3 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

.app-skin .px-4 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.app-skin .gap-4 {
  gap: 0.75rem !important;
}

.app-skin .mb-6 {
  margin-bottom: 1rem !important;
}

.app-skin .mb-4 {
  margin-bottom: 0.75rem !important;
}

.app-skin .mb-3 {
  margin-bottom: 0.5rem !important;
}

.app-skin .mt-3 {
  margin-top: 0.5rem !important;
}

.app-skin [class*="hover:bg-slate-700"]:hover {
  background-color: var(--app-panel-strong) !important;
}

.app-skin [class*="hover:border-slate"]:hover {
  border-color: var(--app-border-strong) !important;
}

.app-skin ::placeholder {
  color: var(--app-dim);
}