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

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

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

.hmm-planner-skin > header {
  z-index: 30;
  border-bottom: 1px solid var(--hmm-border);
  background: rgba(2, 6, 23, 0.95) !important;
  backdrop-filter: blur(12px);
}

.hmm-planner-skin > header > div {
  max-width: 80rem !important;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem !important;
}

.hmm-planner-skin > main {
  max-width: 80rem !important;
  padding: 0.75rem !important;
}

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

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

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

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

.hmm-planner-skin .bg-slate-900 {
  background-color: rgba(2, 6, 23, 0.68) !important;
}

.hmm-planner-skin .bg-slate-700 {
  background-color: #1e293b !important;
}

.hmm-planner-skin .bg-slate-600 {
  background-color: #334155 !important;
}

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

.hmm-planner-skin .bg-blue-600,
.hmm-planner-skin .bg-blue-700 {
  background-color: var(--hmm-accent) !important;
}

.hmm-planner-skin .bg-blue-900\/30 {
  background-color: var(--hmm-accent-soft) !important;
}

.hmm-planner-skin .hover\:bg-blue-500:hover,
.hmm-planner-skin .hover\:bg-blue-600:hover,
.hmm-planner-skin .hover\:bg-blue-700:hover {
  background-color: var(--hmm-accent-hover) !important;
}

.hmm-planner-skin .text-blue-400,
.hmm-planner-skin .text-blue-500,
.hmm-planner-skin .hover\:text-blue-400:hover,
.hmm-planner-skin .hover\:text-blue-300:hover {
  color: #38bdf8 !important;
}

.hmm-planner-skin .border-blue-500,
.hmm-planner-skin .border-blue-600,
.hmm-planner-skin .focus\:border-blue-500:focus {
  border-color: #38bdf8 !important;
}

.hmm-planner-skin .bg-teal-700 {
  background-color: #0f766e !important;
}

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

.hmm-planner-skin > header > div > div:first-child > a:not(:first-child),
.hmm-planner-skin > header > div > div:last-child > a,
.hmm-planner-skin > header > div > div:last-child > div > button {
  border: 1px solid var(--hmm-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: #e2e8f0 !important;
  background: transparent;
}

.hmm-planner-skin > header > div > div:first-child > a:not(:first-child):hover,
.hmm-planner-skin > header > div > div:last-child > a:hover,
.hmm-planner-skin > header > div > div:last-child > div > button:hover {
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  background: rgba(15, 23, 42, 0.72) !important;
}

.hmm-planner-skin > header a:first-child {
  color: #ffffff;
}

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

.hmm-planner-skin input:not([type="checkbox"]):not([type="radio"]):focus,
.hmm-planner-skin select:focus,
.hmm-planner-skin textarea:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18);
}

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

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

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

.hmm-planner-skin > main > .bg-slate-800,
.hmm-planner-skin [x-show="filtryOtwarte"],
.hmm-planner-skin [x-show="szukajWyniki !== null"] {
  box-shadow: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hmm-planner-skin [class*="hover:bg-slate-700"]:hover {
  background-color: rgba(30, 41, 59, 0.82) !important;
}

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

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