/* =========================================================
   BARBER / PREMIUM UI (CSS curat)
   STRUCTURĂ:
   1) GENERAL
   2) DESKTOP / TABLET (>= 768px)
   3) MOBILE (< 768px)
   ========================================================= */

/* =========================
   1) GENERAL
========================= */
:root{
  --bg1:#070b12;
  --bg2:#0d1422;

  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.12);
  --border: rgba(255,255,255,.14);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --shadow2: 0 10px 25px rgba(0,0,0,.30);

  --radius: 18px;
  --radius2: 24px;

  --accentGold: #f6d06f;
  --accentRed: #ff2d55;
  --accentMint:#33ffa8;
}

html, body{ height:100%; }

body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background:
    radial-gradient(1100px 700px at 15% 15%, rgba(246,208,111,.12), transparent 55%),
    radial-gradient(900px 600px at 85% 18%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(900px 600px at 65% 88%, rgba(255,45,85,.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,.00) 10px 24px),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Container */
.container{
  max-width: 1180px;
  padding: 18px 14px 26px;
}

/* Logout / header actions */
.d-flex.justify-content-end{
  position: sticky;
  top: 10px;
  z-index: 60;
  margin-bottom: 12px;
}

/* Buttons (bootstrap override) */
.btn{
  border-radius: 14px !important;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,.18) !important; }

.btn-outline-dark{
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-outline-dark:hover{
  filter: brightness(1.06);
  box-shadow: var(--shadow2);
}

/* Nav săptămâni */
.btn-group .btn.btn-primary{
  border: 0 !important;
  background: linear-gradient(135deg, rgba(246,208,111,.95), rgba(255,45,85,.85)) !important;
  box-shadow: 0 12px 26px rgba(255,45,85,.18);
}
.btn-group .btn.btn-primary:hover{
  box-shadow: 0 18px 40px rgba(255,45,85,.22);
}

/* Cards */
.card{
  border: 1px solid var(--border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
  border-radius: var(--radius2) !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  position: relative;
}
.card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:3px;
  background: linear-gradient(90deg, rgba(246,208,111,.9), rgba(255,45,85,.9), rgba(59,130,246,.9));
  opacity:.85;
}
.card .card-body{ padding: 16px 14px; }

.card .card-title{
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-size: 1.15rem;
  letter-spacing: .8px;
  margin-bottom: .25rem !important;
}
.card .card-text{
  color: var(--muted);
  font-weight: 600;
}

/* Număr tunsori pe carduri */
.card h3,
.card h3.text-dark{
  color: #ffffff !important;
  font-weight: 900;
  letter-spacing: .3px;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.card h3.text-success{
  color: rgba(51,255,168,.95) !important;
}
.card h3 i,
.card .card-title i{
  margin-right: .35rem;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

/* Table wrapper */
.table-responsive{
  overflow-x:hidden;
  border-radius: var(--radius2);
  -webkit-overflow-scrolling:touch;
  box-shadow: var(--shadow);
}

/* Table */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius2);
  overflow:visible;
}

/* Cells */
.table th,
.table td{
  padding: .85rem .60rem;
  text-align:center;
  border: 1px solid rgba(0,0,0,.18);
  vertical-align:middle;
  height: 50px;
  overflow:hidden;
  white-space:nowrap;

  font-family: "Barlow Semi Condensed", "Inter", sans-serif;
  font-weight: 600;
  color: rgba(0,0,0,.86);

  font-variant-numeric: tabular-nums;
  transition: transform .10s ease, filter .10s ease, box-shadow .10s ease;
}

/* Header */
.table thead th{
  border-bottom: 2px solid rgba(0,0,0,.18);
  font-weight: 800;
}

/* Zile + dată */
.table thead tr:nth-child(2) th{
  font-weight: 800;
  letter-spacing: .2px;
}

/* Hover cells */
.table tbody td:hover{
  filter: brightness(1.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Filled appointments */
.filled-cell{
  position:relative;
  background: linear-gradient(135deg, rgba(0,86,179,1), rgba(0,120,255,1)) !important;
  color:#fff !important;
  font-size: .76rem;
  padding: .55rem .40rem .35rem 1.65rem;
  white-space:nowrap;
  text-align:center;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.filled-cell:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.20);
}

/* Badge număr programare */
.appointment-number{
  position:absolute;
  top: 6px;
  left: 8px;
  color: var(--accentMint);
  font-weight: 900;
  font-size: .95rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Contor în header */
.reservation-count{
  color: var(--accentRed);
  font-weight: 900;
  font-size: 1.05rem;
  text-shadow: 0 2px 14px rgba(255,45,85,.25);
}

/* “Astăzi” */
.table thead th[style*="background-color:black"]{
  border-color: rgba(255,255,255,.25) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,0,.18);
}

/* Sticky header (pentru scroll în containerul .table-responsive) */
.table-responsive thead th{
  position: sticky;
  top: 0;
  z-index: 120;
}
.table-responsive thead tr:nth-child(2) th{
  top: 46px;
  z-index: 119;
}

/* Ascunderea primei coloane (cum ai) */
.table th:first-child,
.table td:first-child{
  display:none;
  background:#343a40;
  color:#fff;
  font-weight:bold;
  text-align:center;
  vertical-align:middle;
  font-size:0.7rem;
}

/* Modal (general) */
.modal-content{
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(180deg, rgba(18,24,40,.94), rgba(10,12,18,.94)) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
}
.modal-content::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:3px;
  background: linear-gradient(90deg, rgba(246,208,111,.9), rgba(255,45,85,.9), rgba(59,130,246,.9));
  opacity:.9;
}
.modal-header{
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.modal-footer{
  border-top: 1px solid rgba(255,255,255,.14) !important;
}
.modal-title{
  font-family: "Bebas Neue", "Inter", sans-serif;
  letter-spacing: .8px;
  font-size: 1.25rem;
}

/* Inputs în modal */
.modal .form-control{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-weight: 600;
}
.modal .form-control:focus{
  border-color: rgba(246,208,111,.55);
  box-shadow: 0 0 0 .2rem rgba(246,208,111,.18);
  background: rgba(255,255,255,.10);
}

/* Fix pentru dropdown-uri in Dark Mode (sa nu fie alb pe alb) */
.modal select.form-control {
  background-color: rgba(13, 20, 34, 0.8) !important; 
  color: #ffffff !important; 
}
.modal select.form-control option {
  background-color: #0d1422 !important;
  color: #ffffff !important;
}

/* Text selectat */
#selectedDateTime{
  color: rgba(255,255,255,.82);
  font-weight: 700;
}

/* X-ul de închidere (alb, vizibil) */
.modal-header .close{
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-size: 2rem; /* default desktop/tablet */
  line-height: 1;
  padding: .25rem .5rem;
  margin: -0.25rem -0.25rem -0.25rem auto;
}
.modal-header .close:hover{ opacity: .9 !important; }
.modal-header .close:focus{
  outline: none !important;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.18) !important;
  border-radius: 12px;
}

/* Culorile zilelor – PĂSTRATE EXACT */
.monday   {background:#fefefe;}
.tuesday  {background:#e2e3e5;}
.wednesday{background:#fff3cd;}
.thursday {background:#d4edda;}
.friday   {background:#f8d7da;}
.saturday {background:#e7a8f9;}
.sunday   {background:#f47ced;}

/* Stats modal */
#statsModal .modal-dialog{ max-width: 900px; }
#statsModal .card{ border-radius: 16px !important; }
#statsModal .card-header{ border-radius: 16px !important; }

.stats-total{
  color: var(--accentGold);
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stats-item{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 10px 12px;
}
.stats-month{
  font-family: "Barlow Semi Condensed","Inter",sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
}
.stats-count{
  margin-top: 4px;
  font-weight: 900;
  font-size: 1.25rem;
  color: rgba(51,255,168,.95);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}


/* =========================
   2) DESKTOP / TABLET
========================= */
@media (max-width: 991.98px){
  .container{ padding: 14px 10px 22px; }
  .card .card-body{ padding: 14px 12px; }
}


/* =========================
   3) MOBILE
========================= */
@media (max-width: 767.98px){

  /* butoanele din top să nu fie sticky pe mobil */
  .d-flex.justify-content-end{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* tabelul să aibă scroll vertical în container */
  .table-responsive{
    overflow-y: auto;
    max-height: 72vh;
  }

  .table{ table-layout: fixed; }

  /* celule mai compacte pe mobil */
  .table th,
  .table td{
    font-size: .58rem;
    padding: .52rem .34rem;
    white-space: normal;
    word-wrap: break-word;
    height: 46px;
  }

  /* IMPORTANT: ca să nu se rupă “Duminică” pe 2 rânduri */
  .table thead tr:nth-child(2) th{
    white-space: nowrap;     /* nu mai rupe cuvântul */
    font-size: .54rem;       /* micșorat ca să încapă */
    line-height: 1.05;
  }

  .reservation-count{ font-size: .85rem; }
  .appointment-number{ font-size: .50rem; top: 1.5px; left: 2px; }

  /* offset sticky pentru al doilea rând din thead (pe mobil e mai mic) */
  .table-responsive thead tr:nth-child(2) th{ top: 42px; }

  /* X mai mare pe mobil */
  .modal-header .close{
    font-size: 2.4rem;
    padding: .35rem .6rem;
  }

  /* stats grid pe mobil */
  .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

.btn-group-sm > .btn, .btn-sm { 
   font-size: .6rem; 
   line-height: 1.5; 
 }

}

/* =====================================================
   LIGHT THEME – ULTRA PREMIUM FINAL
===================================================== */

html[data-theme="light"] body{
  background:
    radial-gradient(900px 600px at 15% 15%, rgba(255,193,7,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(13,110,253,.14), transparent 60%),
    linear-gradient(180deg, #f9fafc, #eef2f7);
  color:#1f2933 !important;
}

/* =====================================================
   HEADER BUTTONS
===================================================== */

html[data-theme="light"] .btn-outline-dark{
  background:linear-gradient(135deg,#0d6efd,#2563eb) !important;
  color:#ffffff !important;
  border:none !important;
  box-shadow:0 6px 18px rgba(13,110,253,.25);
}

html[data-theme="light"] .btn-outline-dark:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(13,110,253,.35);
}

/* =====================================================
   CARDS
===================================================== */

html[data-theme="light"] .card{
  background: linear-gradient(180deg,#ffffff,#f8fafc) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 12px 35px rgba(0,0,0,.08) !important;
}

html[data-theme="light"] .card::before{
  background: linear-gradient(90deg,#ffb703,#0d6efd,#ff006e);
}

/* Saptamana */
html[data-theme="light"] .card:nth-child(1){
  background:linear-gradient(135deg,#e0f2fe,#ffffff) !important;
}

/* Luna */
html[data-theme="light"] .card:nth-child(2){
  background:linear-gradient(135deg,#dcfce7,#ffffff) !important;
}

html[data-theme="light"] .card h3{
  color:#111827 !important;
  text-shadow:none !important;
}

html[data-theme="light"] .card .card-title{
  color:#1f2937 !important;
  font-weight:800 !important;
}

html[data-theme="light"] .card .card-text{
  color:#6b7280 !important;
}

/* =====================================================
   TABLE
===================================================== */

html[data-theme="light"] .table{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

html[data-theme="light"] .table th,
html[data-theme="light"] .table td{
  color:#1f2933 !important;
  border:1px solid rgba(0,0,0,.05) !important;
}

/* Hover elegant */
html[data-theme="light"] .table tbody td:hover{
  background:rgba(13,110,253,.06);
}

/* ASTAZI */
html[data-theme="light"] .table thead th[style*="background-color:black"]{
  background:#111827 !important;
  color:#ffffff !important;
  box-shadow: inset 0 0 0 2px #ffc107;
}

/* =====================================================
   PROGRAMĂRI – TEXT ALB (NUME + ORĂ)
===================================================== */

html[data-theme="light"] .table td.filled-cell{
  background:linear-gradient(135deg,#0d6efd,#2563eb) !important;
  color:#ffffff !important;
  font-weight:600;
}

/* orice text din interior */
html[data-theme="light"] .table td.filled-cell *,
html[data-theme="light"] .table td.filled-cell strong,
html[data-theme="light"] .table td.filled-cell small,
html[data-theme="light"] .table td.filled-cell span{
  color:#ffffff !important;
}

/* =========================================
   NUMĂR PROGRAMARE – VERDE
========================================= */
html[data-theme="light"] .table td.filled-cell .appointment-number {
    color: #33ffa8 !important; /* verde accent */
    text-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
}
/* =====================================================
   MODAL
===================================================== */

html[data-theme="light"] .modal-content{
  background:linear-gradient(180deg,#ffffff,#f9fafc) !important;
  color:#1f2933 !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 25px 70px rgba(0,0,0,.18);
}

html[data-theme="light"] .modal-title{
  color:#111827 !important;
  font-weight:800;
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer{
  border-color:rgba(0,0,0,.08) !important;
}

html[data-theme="light"] .modal .form-control,
html[data-theme="light"] .modal select.form-control{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid rgba(0,0,0,.15) !important;
}

html[data-theme="light"] .modal .form-control option,
html[data-theme="light"] .modal select.form-control option{
  background-color:#ffffff !important;
  color:#111827 !important;
}

html[data-theme="light"] .modal .form-control:focus{
  border-color:#0d6efd !important;
  box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
}

/* Selected date */
html[data-theme="light"] #selectedDateTime{
  color:#111827 !important;
  font-weight:600;
}

/* =====================================================
   STATISTICS MODAL
===================================================== */

html[data-theme="light"] #statsModal,
html[data-theme="light"] #statsModal *{
  color:#1f2933 !important;
}

html[data-theme="light"] #statsModal .card{
  background:linear-gradient(180deg,#ffffff,#f3f6fb) !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

html[data-theme="light"] #statsModal .card-header{
  background:#f1f5f9 !important;
  color:#111827 !important;
  font-weight:800 !important;
}

html[data-theme="light"] .stats-month{
  color:#1f2937 !important;
  font-weight:700 !important;
}

html[data-theme="light"] .stats-count{
  color:#16a34a !important;
  font-weight:900 !important;
  text-shadow:none !important;
}

html[data-theme="light"] .stats-total{
  color:#ffb703 !important;
  font-weight:900 !important;
  text-shadow:none !important;
}