/* CuddleTherapy — Master Styles (Blue Theme)
   Path: /cuddle/public/assets/style.css
   Lightweight, component-first CSS for all pages.
*/

/* ---------- CSS Variables ---------- */
:root{
  --ct-bg: #ffffff;
  --ct-text: #0f172a;              /* slate-900 */
  --ct-muted: #64748b;             /* slate-500 */
  --ct-border: #e5e7eb;            /* gray-200 */
  --ct-primary: #2563eb;           /* blue-600 */
  --ct-primary-700:#1d4ed8;        /* blue-700 */
  --ct-primary-50:#eff6ff;         /* blue-50 */
  --ct-primary-100:#dbeafe;        /* blue-100 */
  --ct-focus: rgba(37, 99, 235, .35);
  --ct-card: #ffffff;
  --ct-soft: #f8fafc;              /* slate-50 */
  --ct-success:#16a34a;
  --ct-warning:#f59e0b;
  --ct-danger:#dc2626;

  --ct-radius: 14px;
  --ct-radius-lg: 18px;
  --ct-shadow: 0 6px 18px rgba(15, 23, 42, .08);
  --ct-shadow-soft: 0 3px 10px rgba(15, 23, 42, .06);
}

/* Dark mode (auto) */
@media (prefers-color-scheme: dark){
  :root{
    --ct-bg:#0b1020;
    --ct-text:#e5e7eb;
    --ct-muted:#94a3b8;
    --ct-border:#1e293b;
    --ct-card:#111827;
    --ct-soft:#0f172a;
    --ct-shadow: 0 6px 18px rgba(0,0,0,.45);
    --ct-shadow-soft: 0 3px 10px rgba(0,0,0,.35);
    --ct-primary-50:#0b254e;
    --ct-primary-100:#103569;
  }
  .card, .hero-card, .calendar, .footer, .table, .alert,
  .navbar, .form-control, .form-select, .btn, .badge{
    border-color: var(--ct-border) !important;
  }
}

/* ---------- Base ---------- */
html, body{
  background: var(--ct-bg);
  color: var(--ct-text);
}
a{ color: var(--ct-primary); text-decoration: none; }
a:hover{ color: var(--ct-primary-700); text-decoration: underline; }

.navbar{
  background: var(--ct-bg);
}
.navbar .btn{
  border-radius: 999px;
}

/* ---------- Utilities ---------- */
.bg-gradient-blue{
  background: linear-gradient(135deg, var(--ct-primary) 0%, #3b82f6 50%, #60a5fa 100%);
}
.text-highlight{
  background: linear-gradient(90deg, #fff 0%, #e0ecff 100%);
  color: #0b2a7a;
  padding: .05rem .4rem;
  border-radius: 8px;
}
.hover-lift{
  transition: transform .18s ease, box-shadow .18s ease;
}
.hover-lift:hover{
  transform: translateY(-3px);
  box-shadow: var(--ct-shadow);
}

.card{
  border-radius: var(--ct-radius);
  border: 1px solid var(--ct-border);
  background: var(--ct-card);
  box-shadow: var(--ct-shadow-soft);
}

.hero-card{
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow);
}

.footer{
  background: var(--ct-card);
}

/* Buttons */
.btn{
  border-radius: 12px;
}
.btn:focus{
  outline: 3px solid var(--ct-focus);
  outline-offset: 2px;
}
.btn-primary{
  background: var(--ct-primary);
  border-color: var(--ct-primary);
}
.btn-primary:hover{
  background: var(--ct-primary-700);
  border-color: var(--ct-primary-700);
}

/* Forms */
.form-control, .form-select, .input-group-text{
  border-radius: 12px !important;
  border-color: var(--ct-border);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem var(--ct-focus);
  border-color: var(--ct-primary);
}

/* Tables */
.table{
  border-color: var(--ct-border);
}
.table thead th{
  border-bottom-color: var(--ct-border);
  color: var(--ct-muted);
  font-weight: 600;
}
.table td, .table th{
  vertical-align: middle;
}

/* Alerts */
.alert{
  border-radius: 12px;
}

/* Badges */
.badge{
  border-radius: 999px;
  padding: .4em .6em;
}

/* Pagination */
.pagination .page-link{
  border-radius: 10px !important;
}
.pagination .page-item.active .page-link{
  background: var(--ct-primary);
  border-color: var(--ct-primary);
}

/* ---------- Calendar (mini) ---------- */
.cal-wrap{display:grid;gap:1rem;grid-template-columns: 1fr;}
@media (min-width: 992px){ .cal-wrap{grid-template-columns: 340px 1fr;} }

.calendar{
  border:1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  background: var(--ct-card);
  overflow: hidden;
}
.cal-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 1rem;background: var(--ct-primary-50); border-bottom:1px solid var(--ct-border);
}
.cal-week{
  display:grid;grid-template-columns:repeat(7,1fr);
  padding:.4rem .75rem 0;gap:.25rem;font-size:.8rem;color:var(--ct-muted);
}
.cal-grid{
  display:grid;grid-template-columns: repeat(7,1fr); gap:.25rem; padding:.75rem;
}
.cal-cell{
  aspect-ratio:1/1; border:1px solid #edf2f7; border-radius:.6rem;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  background:#fff; cursor:pointer; user-select:none;
}
.cal-cell.muted{ opacity:.45; }
.cal-cell.has{ border-color:#cfe0ff; background:#f2f7ff; }
.cal-cell.active{ outline:2px solid var(--ct-primary); outline-offset:2px; background:#eef5ff; }

/* Slots list (chips) */
.slot-list .slot{
  display:inline-flex; gap:.35rem; align-items:center;
  padding:.45rem .6rem; border:1px solid var(--ct-border); border-radius:999px;
  margin:.25rem; background:#fff; text-decoration:none;
}
.slot-list .slot:hover{
  border-color: var(--ct-primary); background: var(--ct-primary-100);
}

/* ---------- Index cards ---------- */
.card .small.text-muted{
  color: var(--ct-muted) !important;
}

/* ---------- Focus visible ---------- */
:focus-visible{
  outline: 3px solid var(--ct-focus);
  outline-offset: 2px;
}

/* ---------- Helper icons (optional placeholders) ---------- */
img[alt=""]{ opacity:.9; }

/* ---------- Compact helpers ---------- */
.border-soft{ border:1px solid var(--ct-border); border-radius: var(--ct-radius); }
.bg-soft{ background: var(--ct-soft); }

/* ---------- Toast (optional minimal) ---------- */
.ct-toast{
  position: fixed; z-index: 1060; right: 16px; bottom: 16px;
  background: var(--ct-card); border:1px solid var(--ct-border);
  box-shadow: var(--ct-shadow); padding: .75rem 1rem; border-radius: 12px;
  max-width: 320px; display:none;
}
.ct-toast.show{ display:block; animation: ctToastIn .2s ease; }
@keyframes ctToastIn{ from{ transform: translateY(8px); opacity: 0 } to{ transform: translateY(0); opacity: 1 } }