/* ============================================================
   StyleBook – Alap stíluslap
   ============================================================ */

:root, [data-theme="light"] {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);

  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.25rem;--space-6: 1.5rem;
  --space-8: 2rem;   --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem;

  --radius-sm: .375rem; --radius-md: .625rem;
  --radius-lg: 1rem;    --radius-xl: 1.5rem; --radius-full: 9999px;

  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  --color-bg:             #f7f4ef;
  --color-surface:        #fdfbf8;
  --color-surface-2:      #f3ede5;
  --color-surface-offset: #ece4db;
  --color-border:         rgba(40,37,29,.12);
  --color-divider:        rgba(40,37,29,.07);
  --color-text:           #28251d;
  --color-text-muted:     #6f6a61;
  --color-text-faint:     #a59e94;

  --color-primary:        #8f3b63;
  --color-primary-hover:  #702b4d;
  --color-primary-soft:   rgba(143,59,99,.12);

  --color-available:      #437a22;
  --color-available-soft: rgba(67,122,34,.12);
  --color-busy:           #8f3b63;
  --color-busy-soft:      rgba(143,59,99,.12);
  --color-pending:        #b56c00;
  --color-pending-soft:   rgba(181,108,0,.12);

  --color-error:          #c0392b;
  --color-error-soft:     rgba(192,57,43,.10);

  --shadow-sm: 0 2px 8px rgba(40,37,29,.07);
  --shadow-md: 0 8px 24px rgba(40,37,29,.10);
  --transition: 160ms cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] {
  --color-bg:             #171311;
  --color-surface:        #211c19;
  --color-surface-2:      #2a2420;
  --color-surface-offset: #342c27;
  --color-border:         rgba(255,255,255,.10);
  --color-divider:        rgba(255,255,255,.07);
  --color-text:           #f2ede7;
  --color-text-muted:     #b3a89c;
  --color-text-faint:     #7a706a;
  --color-primary:        #d07aa4;
  --color-primary-hover:  #e397bb;
  --color-primary-soft:   rgba(208,122,164,.16);
  --color-available:      #7fc063;
  --color-available-soft: rgba(127,192,99,.15);
  --color-busy:           #d07aa4;
  --color-busy-soft:      rgba(208,122,164,.15);
  --color-pending:        #f0b252;
  --color-pending-soft:   rgba(240,178,82,.15);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,.30);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: none; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  line-height: 1.6;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; }
p, li { text-wrap: pretty; max-width: 72ch; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Layout */
.container { width: min(1160px, calc(100% - 2rem)); margin-inline: auto; }
.container--narrow { width: min(680px, calc(100% - 2rem)); margin-inline: auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  border-bottom: 1px solid var(--color-divider);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) 0;
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); }
.brand-mark {
  width: 40px; height: 40px; border-radius: 13px;
  background: linear-gradient(135deg, var(--color-primary), #d19900);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.1rem;
  box-shadow: var(--shadow-sm); flex-shrink: 0;
}
.brand strong { font-family: var(--font-display); font-size: 1.1rem; }
.brand span { color: var(--color-text-muted); font-size: var(--text-sm); display: block; }
.header-nav { display: flex; align-items: center; gap: var(--space-3); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .7rem 1.15rem;
  border-radius: var(--radius-full); border: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: 600;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); text-decoration: none; color: #fff; }
.btn--ghost { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn--ghost:hover { background: var(--color-surface-2); text-decoration: none; color: var(--color-text); }
.btn--sm { min-height: 38px; padding: .55rem .9rem; font-size: var(--text-xs); }
.btn--danger { background: var(--color-error); color: #fff; }
.btn--danger:hover { opacity: .88; }

/* Theme toggle */
.theme-toggle {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-surface); cursor: pointer; display: grid; place-items: center;
  transition: background var(--transition);
}

/* Flash üzenet */
.flash {
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  margin-bottom: var(--space-5); font-size: var(--text-sm); font-weight: 500;
}
.flash--success { background: var(--color-available-soft); color: var(--color-available); }
.flash--error   { background: var(--color-error-soft);     color: var(--color-error); }
.flash--info    { background: var(--color-primary-soft);    color: var(--color-primary); }

/* Kártya */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

/* Form */
.form-group { display: grid; gap: .45rem; margin-bottom: var(--space-4); }
.form-group label { font-size: var(--text-sm); font-weight: 600; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: .85rem 1rem; border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text); transition: border-color var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--color-primary); outline: none; }
.form-group textarea { min-height: 100px; resize: vertical; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* Státusz pill */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pill--available { background: var(--color-available-soft); color: var(--color-available); }
.pill--busy      { background: var(--color-busy-soft);      color: var(--color-busy); }
.pill--pending   { background: var(--color-pending-soft);   color: var(--color-pending); }

/* Avatar */
.avatar {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--color-surface-offset); object-fit: cover;
  display: grid; place-items: center; font-weight: 700; color: var(--color-primary);
  font-size: 1.1rem; flex-shrink: 0;
}
.avatar--lg { width: 80px; height: 80px; border-radius: 22px; font-size: 1.6rem; }

/* Tag */
.tag {
  padding: .35rem .65rem; border-radius: var(--radius-full);
  background: var(--color-surface-offset); font-size: var(--text-xs); font-weight: 600;
}

/* Profil kártya */
.profile-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
  transition: box-shadow var(--transition), transform var(--transition);
}
.profile-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.profile-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.profile-meta { display: flex; gap: var(--space-3); align-items: center; }
.profile-meta h3 { font-size: 1.05rem; margin-bottom: .1rem; }
.profile-meta p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.tags-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-about { color: var(--color-text-muted); font-size: var(--text-sm); }
.profile-contact { font-size: var(--text-sm); }

/* Kereső panel */
.search-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: var(--space-5); margin-bottom: var(--space-6);
}
.filter-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.results-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
.results-info { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* Admin táblázat */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--color-surface-2); font-weight: 600; }
.data-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider); vertical-align: middle; }
.data-table tr:hover td { background: var(--color-surface-2); }

/* Naptár */
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: .4rem; margin-top: var(--space-4); }
.cal-day-label { text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); padding: .3rem 0; font-weight: 600; }
.cal-slot {
  border-radius: var(--radius-md); padding: .6rem .2rem; text-align: center;
  font-size: var(--text-xs); cursor: pointer; border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cal-slot:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cal-slot.available { background: var(--color-available-soft); color: var(--color-available); border-color: var(--color-available-soft); }
.cal-slot.busy      { background: var(--color-busy-soft);      color: var(--color-busy);      border-color: var(--color-busy-soft); }
.cal-slot.pending   { background: var(--color-pending-soft);   color: var(--color-pending);   border-color: var(--color-pending-soft); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding: var(--space-8) 0;
  color: var(--color-text-muted); font-size: var(--text-sm);
  margin-top: var(--space-16);
}
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }

/* Segédek */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-center { text-align: center; }
.flex { display: flex; } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.hidden { display: none !important; }

/* Reszponzív */
@media (max-width: 900px) {
  .filter-grid, .results-grid, .form-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .header-nav .btn--ghost { display: none; }
  .brand span { display: none; }
}