/* =========================
   HTLife Healthcare – FINAL PRO CSS 🔥
========================= */

:root {
  --hl-primary:#0069c0;
  --hl-primary-d:#004f92;
  --hl-accent:#00b49e;
  --hl-danger:#d32f2f;
  --hl-success:#388e3c;
  --hl-bg:#f4f7fb;
  --hl-white:#ffffff;
  --hl-border:#d1dce8;
  --hl-text:#1a2a3a;
  --hl-muted:#607080;
  --hl-radius:12px;
  --hl-shadow:0 10px 35px rgba(0,0,0,0.08);
  --hl-trans:.25s ease;
}

/* =========================
   BASE
========================= */
body {
  background: var(--hl-bg);
}

/* =========================
   WRAPPER
========================= */
.htlife-wrap{
  max-width:780px;
  margin:2.5rem auto;
  padding:0 1rem;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  color:var(--hl-text);
}

/* =========================
   CARD
========================= */
.htlife-card{
  background:var(--hl-white);
  border-radius:var(--hl-radius);
  box-shadow:var(--hl-shadow);
  padding:2rem;
  transition:var(--hl-trans);
  border:1px solid rgba(0,0,0,0.03);
}

.htlife-card:hover{
  transform:translateY(-4px);
}

/* =========================
   TITLE
========================= */
.htlife-title{
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:1.5rem;
}

/* =========================
   FORM
========================= */
.htlife-field{
  margin-bottom:1rem;
}

.htlife-field label{
  font-size:.8rem;
  color:var(--hl-muted);
  font-weight:600;
  display:block;
  margin-bottom:4px;
}

.htlife-field input,
.htlife-field select,
.htlife-card input,
.htlife-card select{
  width:100%;
  padding:.75rem;
  border:1px solid var(--hl-border);
  border-radius:6px;
  font-size:.9rem;
  transition:var(--hl-trans);
  background:#fff;
  margin-bottom:.8rem;
}

.htlife-card input:focus,
.htlife-card select:focus{
  outline:none;
  border-color:var(--hl-primary);
  box-shadow:0 0 0 2px rgba(0,105,192,0.15);
}

/* =========================
   BUTTONS
========================= */
.htlife-btn{
  width:100%;
  padding:.85rem;
  background:linear-gradient(135deg, var(--hl-primary), var(--hl-primary-d));
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.3px;
  transition:var(--hl-trans);
}

.htlife-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,105,192,0.25);
}

.htlife-btn:active{
  transform:scale(.97);
}

.htlife-btn-danger{
  background:linear-gradient(135deg, #e53935, #b71c1c);
}

.htlife-btn-danger:hover{
  box-shadow:0 6px 18px rgba(211,47,47,0.3);
}

/* =========================
   GRID BUTTON (DASHBOARD)
========================= */
.htlife-grid .htlife-btn{
  width:auto;
}

/* =========================
   MESSAGES
========================= */
.htlife-msg{
  margin-top:1rem;
  padding:.8rem;
  border-radius:6px;
  font-size:.9rem;
  font-weight:500;
  border-left:4px solid;
  animation:fadeIn .3s ease;
}

.htlife-msg.success{
  background:#e8f5e9;
  color:var(--hl-success);
  border-color:var(--hl-success);
}

.htlife-msg.error{
  background:#ffeaea;
  color:var(--hl-danger);
  border-color:var(--hl-danger);
}

.htlife-msg.info{
  background:#e3f2fd;
  color:var(--hl-primary);
  border-color:var(--hl-primary);
}

/* =========================
   LOADING
========================= */
.htlife-loading{
  text-align:center;
  padding:1rem;
  font-size:.9rem;
  color:var(--hl-muted);
}

.htlife-loading:after{
  content:'';
  animation:dots 1s infinite;
}

@keyframes dots{
  0%{content:'';}
  33%{content:'.';}
  66%{content:'..';}
  100%{content:'...';}
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(5px);}
  to{opacity:1; transform:translateY(0);}
}

/* =========================
   DASHBOARD GRID 🔥
========================= */
.htlife-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin-top:1rem;
}

.htlife-box{
  background:#fff;
  border:1px solid var(--hl-border);
  padding:1rem;
  border-radius:8px;
  font-size:.9rem;
  box-shadow:0 4px 15px rgba(0,0,0,0.05);
  transition:.2s;
}

.htlife-box:hover{
  transform:translateY(-3px);
}

/* =========================
   CODE DISPLAY
========================= */
#profile-data pre,
#slots pre,
#doctors pre,
#appointments pre{
  background:#0f172a;
  color:#e2e8f0;
  padding:1rem;
  border-radius:6px;
  overflow:auto;
  font-size:.8rem;
  line-height:1.4;
}

/* =========================
   SLOT BUTTON (UPGRADE READY)
========================= */
.htlife-slot{
  display:inline-block;
  padding:.45rem .7rem;
  margin:.3rem;
  background:#e3f2fd;
  border-radius:6px;
  cursor:pointer;
  font-size:.8rem;
  transition:.2s;
}

.htlife-slot:hover{
  background:var(--hl-primary);
  color:#fff;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:600px){

  .htlife-card{
    padding:1.2rem;
  }

  .htlife-title{
    font-size:1.3rem;
  }

  .htlife-btn{
    padding:.65rem;
  }

  .htlife-grid{
    grid-template-columns:1fr;
  }
}