/* ========== Reset & Base ========== */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --sf-bg:#1f232b;
  --sf-fg:#e7eaf0;
  --sf-muted:#aab0bb;
  --sf-accent:#28c0e3;
  --sf-border:#2b303a;
}

@media (prefers-color-scheme: light){
  :root{
    --sf-bg:#0f172a;
    --sf-fg:#eef2ff;
    --sf-muted:#c7cbe2;
    --sf-accent:#38bdf8;
    --sf-border:#1e293b;
  }
}

html, body{ height:100%; }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color:#222;
  background:#fff;
}

/* ascunde checkbox-ul pentru meniul mobil */
input[type="checkbox"] { display: none; }

/* ========== Header ========== */
header {
  background-color: #0072b8;
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo img { height: 60px; margin-left: 20px; }
.menu-icon { display: none; font-size: 24px; cursor: pointer; }

/* NAV desktop */
nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
nav ul { list-style: none; padding: 0; margin: 0; display:flex; gap:10px; }
nav ul li { margin: 10px; }
nav a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: background-color .3s, color .3s;
  padding: 5px 8px;
  border-radius: 4px;
}
nav a:hover { background-color: #005ea3; color: #fff; }
nav a.active {  background-color: #005ea3;  color: #fff;}

/* ========== Hero ========== */
.hero { text-align: center; padding: 20px 0 0; }
.hero img { max-width: 100%; height: 60px; }
.hero h1 { font-size: 24px; margin-top: 20px; color: #333; }

/* ========== Formular / Carduri ========== */
.registration-form{
  background:#fff;
  padding:30px;
  border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  width: min(1200px, 94vw);       /* mai aerisit pe desktop */
  margin:20px auto;               /* centrat */
}
.registration-form h2{ font-size:24px; color:#333; margin-bottom:20px; }
.registration-form label{ font-weight:700; color:#333; }

.registration-form input[type="text"],
.registration-form input[type="date"],
.registration-form select,
.registration-form input[type="tel"],
.registration-form input[type="time"],
.registration-form textarea{
  max-width:300px; width:100%;
  padding:10px; margin:5px 0; border:1px solid #ccc; border-radius:5px; font-size:16px;
}
.registration-form input[type="submit"]{
  background:#0072b8; color:#fff; font-weight:700; padding:10px 20px; border:0; border-radius:5px; cursor:pointer;
}
.registration-form input[type="submit"]:hover{ background:#005ea3; }
.registration-form input[type="textarea"]{
  width:100%; padding:10px; border:1px solid #ccc; border-radius:5px; resize:vertical;
}

/* ========== Layout medic (2 coloane) ========== */
main{
  display:flex; gap:20px; justify-content:space-between; padding:1.25rem; flex-wrap:wrap;
  width: min(1200px, 94vw);
  margin: 0 auto;
}
.left-column, .right-column{
  background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.08); padding:1rem; border-radius:8px;
}
.left-column{ flex:1 1 380px; }
.right-column{ flex:1 1 380px; }

.grid-item2{
  width:100%; margin:10px 0; background:#eee; padding:20px; border-radius:8px;
}

/* ========== Filtre ========== */
.filter-button-group{
  text-align:center; margin: 12px auto 24px;
  width: min(1200px, 94vw);
}
.filter-button-group button{
  background:#333; color:#fff; border:0; padding:10px 20px; margin:5px; cursor:pointer; border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.filter-button-group button.active{ background:#ff5733; }

/* ========== GRID (CSS Grid + Isotope) ========== */
/* Desktop: mai aerisit (coloane mai late, gap mai mare) */
.grid{
  position: relative;                 /* necesar Isotope */
  width: min(1200px, 94vw);
  margin: 0 auto;
}

/* coloane pe desktop */
.grid-item{
  position: relative;                 /* Isotope le poziționează absolut */
  width: calc(25% - 24px);            /* 4 coloane + spațiu între ele */
  margin: 12px;                       /* „gap” vizual */
  background:#eee;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}

/* conținutul cardului, aceeași înălțime minimă => rânduri aliniate */
.grid-item-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:18px 14px;
  min-height: 200px;                  /* egalizează înălțimea */
  text-align:center;
  transition: background-color .3s ease, color .3s ease, transform .2s ease;
}
.grid-item-inner:hover{
  background:#0072b8;
  color:#fff;
  transform: translateY(-1px);
  border-radius:16px;
}

/* imagine mai mare și consistentă */
.profile-pic{
  display:block;
  width: 120px;                       /* POZĂ MAI MARE pe desktop */
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto 10px;
}

.profile-pic2{
  display:block;
  width: 220px;                       /* POZĂ MAI MARE pe desktop */
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto 10px;
}

/* adresă cu icon */
.addr{ display:flex; align-items:flex-start; gap:8px; margin:.25rem 0 1rem; }
.addr .pin{ width:18px; height:auto; margin-top:3px; }

/* ========== Footer modern ========== */
.site-footer{
  background: radial-gradient(1200px 400px at 20% -50%, rgba(40,192,227,.18), transparent),
              linear-gradient(180deg, #20242d 0%, var(--sf-bg) 60%);
  color: var(--sf-fg);
  padding: 36px 0 120px;
  border-top: 1px solid var(--sf-border);
  font: 400 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
.sf-container{ width:min(1100px, 92vw); margin:0 auto; }
.sf-grid{ display:grid; grid-template-columns: 1.2fr 1fr auto; gap:24px; align-items:center; }
.sf-title{ margin:0 0 4px; font-size:clamp(16px, 2.2vw, 20px); letter-spacing:.2px; }
.sf-subtitle{ margin:0; color:var(--sf-muted); font-size:14px; }
.sf-address{ margin:0; color:var(--sf-fg); font-style:normal; }
.sf-address-line{ display:flex; align-items:flex-start; gap:10px; }
.sf-icon{ width:18px; height:18px; fill: var(--sf-accent); flex:0 0 18px; margin-top:2px; }
.sf-badge{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--sf-border);
  border-radius:999px; text-decoration:none; color:#2050af; background: rgba(255,255,255,.02);
  transition: transform .2s ease, border-color .2s ease, background .2s ease; will-change: transform;
}
.sf-badge:hover, .sf-badge:focus-visible{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--sf-accent) 50%, var(--sf-border));
  background: rgba(40,192,227,.08); outline:none;
}
.sf-badge span{ font-weight:600; letter-spacing:.2px; }
.sf-sep{ border:0; border-top:1px solid var(--sf-border); margin:22px 0; }
.sf-bottom{
  display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  color: var(--sf-muted); font-size:14px;
}
.sf-links{ display:flex; gap:14px; }
.sf-links a{ color:var(--sf-muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px; }
.sf-links a:hover, .sf-links a:focus-visible{ color:var(--sf-fg); border-color: var(--sf-accent); outline:none; }

/* ========== Responsive ========== */
@media (min-width: 1400px){
  .grid-item{ width: calc(20% - 24px); }   /* 5 coloane pe ecrane foarte mari */
}


@media (max-width: 1199px){
  .grid-item{ width: calc(33.333% - 24px); } /* 3 coloane */
}

@media (max-width: 992px){
  .grid-item{ width: calc(50% - 24px); }     /* 2 coloane */
  .profile-pic{ width: 100px; height:100px; }
  .profile-pic2{ width: 100px; height:100px; }
  .grid-item-inner{ min-height: 190px; }
}

@media (max-width: 520px){
  .grid-item{ width: calc(100% - 100px); }    /* 1 coloană */
  .profile-pic{ width: 90px; height:90px; }
  .profile-pic2{ width: 90px; height:90px; }
  .grid-item-inner{ min-height: 180px; }
}

@media (max-width: 860px){
  .sf-grid{ grid-template-columns: 1fr; gap:16px; text-align:left; }
  .sf-badge{ justify-self:start; }
}

@media (max-width: 768px){
  .menu-icon{ display:block; }
  .logo img{ height:40px; margin-left:20px; }
  .hero img{ height:40px; }

  /* NAV mobil — panou glisant + backdrop */
  nav{
    position: fixed;
    top:0; left:0;
    height:100vh;
    width: 82vw;
    background:#0072b8;
    transform: translateX(-100%);
    transition: transform .25s ease-out;
    z-index: 1001;
    display:flex;
    flex-direction:column;
    padding-top:70px; /* sub header */
  }
  nav.active{ transform: translateX(0); }
  nav ul{ flex-direction:column; gap:6px; padding:8px 12px; }
  nav ul li{ margin:0; }
  nav a{ display:block; padding:12px; font-size:18px; }

  body.nav-open{ overflow:hidden; } /* blochează scrollul când meniul e deschis */

  /* formular */
  .registration-form input,
  .registration-form select,
  .registration-form textarea{
    font-size:14px; padding:8px;
  }

  /* layout medic */
  main{ flex-direction:column; padding:.75rem; width: min(680px, 92vw); }
  .left-column, .right-column{ width:100%; margin:0; }

  /* grilă */
  .grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: min(680px, 92vw);
  }
}

/* ==================== DATEPICKER (culori pe zile) ==================== */
.ui-datepicker .blocked a, .ui-datepicker .blocked span {
  background:#ffd6d6!important;border-color:#ffb3b3!important;color:#8a0000!important;
}
.ui-datepicker .blocked a:hover, .ui-datepicker .blocked span:hover {
  background:#ffc6c6!important;border-color:#ff9e9e!important;color:#6e0000!important;
}
.ui-datepicker .available a, .ui-datepicker .available span {
  background:#fff5cc!important;border-color:#ffe799!important;color:#5a4b00!important;
}
.ui-datepicker .available a:hover, .ui-datepicker .available span:hover {
  background:#ffefad!important;border-color:#ffd966!important;color:#473c00!important;
}
.ui-datepicker .full a, .ui-datepicker .full span {
  background:#d5f8d5!important;border-color:#a8e6a8!important;color:#1e5e1e!important;font-weight:700!important;
}
.ui-datepicker .full a:hover, .ui-datepicker .full span:hover {
  background:#c6f3c6!important;border-color:#95dfa0!important;color:#154a15!important;
}
/* ===== Legendă în popup ===== */
#ui-datepicker-div .datepicker-legend{margin:6px 4px 4px;font-size:11px;line-height:1.4;display:flex;gap:6px;flex-wrap:wrap;}
#ui-datepicker-div .legend-pill{display:inline-block;padding:2px 6px;border-radius:4px;border:1px solid transparent;white-space:nowrap;}
#ui-datepicker-div .legend-blocked{background:#ffd6d6;border-color:#ffb3b3;color:#8a0000;}
#ui-datepicker-div .legend-available{background:#fff5cc;border-color:#ffe799;color:#5a4b00;}
#ui-datepicker-div .legend-full{background:#d5f8d5;border-color:#a8e6a8;color:#1e5e1e;}
/* Arată săgeți text în locul iconițelor sprite */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  text-indent: 0;              /* anulăm ascunderea textului */
  width: 2.2em; height: 2em;   /* butoane clickabile */
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; line-height: 1;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: none; /* ascundem <span>ul pentru sprite-urile lipsă */
}

.ui-datepicker .ui-datepicker-prev::after { content: '‹'; }
.ui-datepicker .ui-datepicker-next::after { content: '›'; }

/* (opțional) un pic de contrast pe hover */
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: rgba(0,0,0,.05);
  border-radius: 4px;
}

.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ef4444;
  color: #fff;
  padding: 6px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}
.logout-btn:hover { background: #dc2626; }


.btn-print {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0ea5e9;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
.btn-print:hover { background: #0284c7; }
@media print {
  .btn-print, .logout-btn, nav, footer { display: none !important; }
}

.session-timer{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85); /* slate-900 cu transparență */
  color: #fff;
  font: 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  opacity: .75;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.session-timer:hover{ opacity: 1; transform: translateY(-1px); }
.session-timer.warn{ background: rgba(220, 38, 38, 0.95); } /* roșu în ultimul minut */
.session-timer .st-ico{ font-size: 14px; line-height: 1; }
@media print { .session-timer{ display:none !important; } }


.btn-action {
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-action:hover { background: #e0f2fe; border-color: var(--brand); color: var(--brand); }
.btn-action.cancel-btn { color: #b91c1c; border-color: #fecaca; }
.btn-action.cancel-btn:hover { background: #fee2e2; border-color: #ef4444; }