/* styles.css - shared styling for SlotMatch mockups */
:root{
  --accent:#2563eb;
  --accent-2:#0ea5a4;
  --muted:#6b7280;
  --bg:#f8fafc;
  --card:#ffffff;
  --danger:#ef4444;
  --success:#16a34a;
  --glass: rgba(255,255,255,0.8);
  --shadow: 0 6px 18px rgba(15,23,42,0.08);
  --radius:12px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; background:linear-gradient(180deg,#f1f5f9 0%, #ffffff 100%); color:#0f172a}
a{color:var(--accent); text-decoration:none}
.container{max-width:1100px; margin:36px auto; padding:24px}

/* header */
.header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:48px; height:48px; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#7c3aed);
  display:flex; align-items:center; justify-content:center; color:white; font-weight:700;
  box-shadow:var(--shadow);
}
.title{font-size:20px; font-weight:600}
.header-actions{display:flex; gap:8px; align-items:center}

/* cards */
.card{background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-top:18px}
.row{display:flex; gap:18px}
.col{flex:1}

/* small UI elements */
.button{
  background:var(--accent); color:white; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:600;
}
.button.secondary{background:transparent; color:var(--accent); border:1px solid rgba(37,99,235,0.12)}
.kv{color:var(--muted); font-size:13px}

/* login form */
.auth{max-width:480px; margin:36px auto}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.input{padding:10px 12px; border-radius:8px; border:1px solid #e6e9ef; background:#fff;}

/* availability grid */
.grid {
  display:grid;
  grid-template-columns: 90px repeat(7, 1fr);
  gap:6px;
}
.grid .col-head{font-weight:600; padding:8px 6px; background:transparent; text-align:center}
.slot {
  min-height:36px; border-radius:8px; border:1px dashed #e6e9ef; background:linear-gradient(0deg, #fff, #fbfdff);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:#0f172a;
  cursor:pointer; transition:all 0.2s;
}
.slot:hover{background:linear-gradient(0deg, #f8fafc, #f1f5f9); border-color:#cbd5e1}
.slot[data-slot-id]{cursor:pointer}
.slot.available{background:linear-gradient(180deg,#ecfdf5,#bbf7d0); border:1px solid rgba(16,185,129,0.15)}
.slot.locked{background:linear-gradient(180deg,#fff7ed,#ffedd5); border:1px solid rgba(249,115,22,0.12)}
.slot.heat-1{background:linear-gradient(180deg,#f8fafc,#eef2ff)}
.slot.booked{background:linear-gradient(180deg,#dbeafe,#bfdbfe); border:1px solid rgba(37,99,235,0.2); cursor:not-allowed; position:relative}
.slot.booked:hover{background:linear-gradient(180deg,#dbeafe,#bfdbfe); border-color:rgba(37,99,235,0.3)}
.slot.blocked{background:linear-gradient(180deg,#fff7ed,#ffedd5); border:1px solid rgba(249,115,22,0.2); cursor:not-allowed; position:relative}
.slot.blocked:hover{background:linear-gradient(180deg,#fff7ed,#ffedd5); border-color:rgba(249,115,22,0.3)}
.meeting-indicator{color:#2563eb; font-size:14px; font-weight:bold}
.block-indicator{color:#f97316; font-size:14px; font-weight:bold}
.heatbar{
  min-height: 4px;
  height: auto;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05));
  transition: all 0.2s;
  width: 100%;
}
.heatbar:hover {
  opacity: 0.8;
  transform: scaleY(1.1);
}

/* heatmap legend */
.legend{display:flex; gap:8px; align-items:center; margin-top:10px}
.legend .pill{padding:8px 12px; border-radius:999px; background:#fff; border:1px solid #eef2ff; display:flex; gap:8px; align-items:center}

/* meeting list */
.meeting-list{display:flex; flex-direction:column; gap:10px}
.meeting-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-radius:10px; background:#fff}

/* utility classes for spacing */
.mt-4{margin-top:4px}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}
.mt-18{margin-top:18px}
.mt-20{margin-top:20px}
.m-0{margin:0}
.mb-8{margin-bottom:8px}

/* utility classes for layout */
.flex{display:flex; gap:8px}
.flex-center{align-items:center}
.flex-between{justify-content:space-between}
.flex-column{flex-direction:column}
.flex-wrap{flex-wrap:wrap}

/* headings */
h3{margin:0 0 8px 0}
h4{margin:0 0 8px 0}

/* section spacing */
.section{margin-top:12px}
.section-lg{margin-top:18px}
.section-xl{margin-top:20px}

/* container variants */
.container-narrow{max-width:560px; margin:24px auto}

/* card variants */
.card-compact{padding:10px; text-align:center}
.card-spacing{margin-top:12px}

/* grid utilities */
.heatmap-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:12px}
.heatmap-column{height:160px; display:flex; flex-direction:column; justify-content:space-between; margin-top:8px}

/* button variants */
.button.danger{background:var(--danger)}

/* form utilities */
.form-field{margin-bottom:10px}

/* text utilities */
.pre-text{margin:6px 0}

/* responsive */
@media (max-width:900px){
  .row{flex-direction:column}
  .grid{grid-template-columns: 70px repeat(7, minmax(40px,1fr))}
  .container{padding:12px}
}