@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* layout tokens */
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --radius:18px;

  /* brand */
  --brand:#2f7bff;
  --brand2:#18c7a7;

  /* semantic */
  --locked:#ffb020;
  --task:#7c5cff;

  /* CALENDAR: 30-minute slots, 5am–7pm, 15-min grid lines */
  --slotH:22px;  /* 30 min slot height */
  --dayStart:5;  /* 5:00 */
  --dayEnd:19;   /* 19:00 (7pm) */

  /* theme defaults (dark) */
  --bg:#0b1020;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(0,0,0,.16);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --line:rgba(255,255,255,.10);
  --glassTop:rgba(255,255,255,.03);
}

[data-theme="light"]{
  --bg:#f6f8ff;
  --panel:rgba(255,255,255,.85);
  --panel2:rgba(255,255,255,.92);
  --text:#0f172a;
  --muted:rgba(15,23,42,.70);
  --line:rgba(15,23,42,.12);
  --glassTop:rgba(15,23,42,.03);
  --shadow:0 18px 55px rgba(2,6,23,.10);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(47,123,255,.18), transparent 55%),
    radial-gradient(900px 700px at 110% 20%, rgba(24,199,167,.14), transparent 55%),
    var(--bg);
  color:var(--text);
}

.app{
  height:100%;
  display:grid;
  grid-template-columns: 400px 1fr;
}

.sidebar{
  padding:18px;
  border-right:1px solid var(--line);
  background: linear-gradient(180deg, var(--glassTop), rgba(255,255,255,0));
  overflow:auto;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px 18px 12px;
}
.logo{
  width:44px;height:44px;border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.brandTitle{font-weight:900; letter-spacing:.2px}
.brandSub{font-size:12px; color:var(--muted); margin-top:2px}

.panel{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  margin-bottom:14px;
}

.panelHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.panelHead h2{
  margin:0;
  font-size:14px;
  letter-spacing:.2px;
}

.pill{
  font-size:12px;
  color:var(--muted);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.15);
}
[data-theme="light"] .pill{
  background:rgba(255,255,255,.6);
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

.checkboxLabel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--panel2);
}
.checkboxLabel input{height:auto}

input, select{
  height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--panel2);
  color:var(--text);
  padding:0 12px;
  outline:none;
}
input::placeholder{color:rgba(234,240,255,.40)}
[data-theme="light"] input::placeholder{color:rgba(15,23,42,.45)}

.row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.taskForm, .calForm{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}

.btn{
  height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn.primary{
  background: linear-gradient(135deg, var(--brand), rgba(47,123,255,.75));
  border-color: rgba(47,123,255,.55);
}
.btn.ghost{
  width:44px;
  background:rgba(255,255,255,.05);
}
.btn.ghostWide{
  padding:0 14px;
  background:rgba(255,255,255,.05);
}
[data-theme="light"] .btn{
  background:rgba(15,23,42,.04);
}

.taskList{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:360px;
  overflow:auto;
  padding-right:4px;
}
.taskCard{
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--panel2);
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.taskMeta{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.taskTitle{
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.taskSub{
  font-size:12px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--muted);
}
[data-theme="light"] .badge{
  background:rgba(15,23,42,.04);
}

.taskActions{
  display:flex;
  align-items:center;
  gap:6px;
}
.taskDeleteBtn{
  width:26px;
  height:26px;
  border-radius:8px;
  border:none;
  background:rgba(239,68,68,.15);
  color:#ef4444;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  display:grid;
  place-items:center;
}
.taskDeleteBtn:hover{
  background:rgba(239,68,68,.9);
  color:#fff;
}
[data-theme="light"] .taskDeleteBtn{
  background:rgba(239,68,68,.1);
}

.dragHandle{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  color:rgba(234,240,255,.70);
  cursor:grab;
}
[data-theme="light"] .dragHandle{
  border-color:rgba(15,23,42,.18);
  color:rgba(15,23,42,.65);
}
.taskCard.dragging{opacity:.55; transform:scale(.99)}

/* Calendar Panel - Redesigned for 7+ calendars */
.calendarPanel .panelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.panelHeadRight{
  display:flex;
  align-items:center;
  gap:8px;
}
.iconBtnSmall{
  width:26px;height:26px;
  border-radius:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
}
.iconBtnSmall:hover{background:var(--brand);border-color:var(--brand);color:#fff}
[data-theme="light"] .iconBtnSmall{background:rgba(15,23,42,.04)}

/* Collapsible Add Form */
.calFormWrap{
  overflow:hidden;
  transition:all .2s ease;
  max-height:200px;
  opacity:1;
  margin-bottom:10px;
}
.calFormWrap.collapsed{
  max-height:0;
  opacity:0;
  margin-bottom:0;
}
.calFormCompact{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:10px;
}
.calFormCompact input[type="url"],
.calFormCompact input[type="text"]{
  flex:1;
  min-width:0;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  font-size:12px;
}
.calFormCompact input[type="color"]{
  width:32px;height:32px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  padding:0;
}
.calFormRow{
  display:flex;
  gap:6px;
  align-items:center;
}

/* Action Bar - Liquid Glass Style */
.calActionBar{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}
.calActionBtn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#fff;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.1);
}
.calActionBtn:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.25);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15);
}
.calActionBtn.active{
  background:rgba(47,123,255,.85);
  border-color:rgba(47,123,255,.5);
  color:#fff;
}
.calActionBtn:disabled{opacity:.5;cursor:wait}
.calActionBtn svg{opacity:.9}
[data-theme="light"] .calActionBtn{
  background:rgba(255,255,255,.65);
  border-color:rgba(0,0,0,.08);
  color:#1a1a2e;
  box-shadow:0 2px 8px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5);
}
[data-theme="light"] .calActionBtn:hover{
  background:rgba(255,255,255,.85);
  border-color:rgba(0,0,0,.12);
}
[data-theme="light"] .calActionBtn.active{
  background:rgba(47,123,255,.9);
  color:#fff;
}

/* Scrollable Calendar List */
.calListWrap{
  max-height:280px;
  overflow-y:auto;
  margin:0 -4px;
  padding:0 4px;
}
.calListWrap::-webkit-scrollbar{width:4px}
.calListWrap::-webkit-scrollbar-track{background:transparent}
.calListWrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

.calList{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Compact Calendar Item */
.calItem{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel2);
  cursor:pointer;
  transition:all .15s;
}
.calItem:hover{border-color:rgba(255,255,255,.15)}
[data-theme="light"] .calItem:hover{border-color:rgba(15,23,42,.15)}
.calItem.disabled{opacity:.5}

.swatch{
  width:10px;height:10px;border-radius:999px;
  flex-shrink:0;
}
.calInfo{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.calName{
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calMeta{
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.calMeta .eventCount{
  background:rgba(255,255,255,.08);
  padding:1px 5px;
  border-radius:4px;
  font-weight:600;
}
[data-theme="light"] .calMeta .eventCount{background:rgba(15,23,42,.06)}
.calMeta .syncTime{opacity:.7}

.calActions{
  display:flex;
  gap:4px;
  flex-shrink:0;
}
.calActionIcon{
  width:24px;height:24px;
  border-radius:6px;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
}
.calActionIcon:hover{background:rgba(255,255,255,.1);color:var(--text)}
.calActionIcon.danger:hover{background:rgba(239,68,68,.15);color:#ef4444}
[data-theme="light"] .calActionIcon:hover{background:rgba(15,23,42,.08)}

.calToggle{
  position:relative;
  width:32px;height:18px;
  background:var(--line);
  border-radius:9px;
  cursor:pointer;
  transition:background .2s;
  flex-shrink:0;
}
.calToggle.on{background:var(--brand)}
.calToggle::after{
  content:'';
  position:absolute;
  top:2px;left:2px;
  width:14px;height:14px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s;
}
.calToggle.on::after{transform:translateX(14px)}

/* Legacy support */
.calLeft{display:none}
.calUrl{display:none}

.iconBtn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  width:34px;height:34px;
  cursor:pointer;
}
.iconBtn:hover{filter:brightness(1.08)}
[data-theme="light"] .iconBtn{
  background:rgba(15,23,42,.04);
}

.toggle{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
}
.toggle input{accent-color: var(--brand)}

.hint{
  font-size:12px;
  color:rgba(234,240,255,.62);
  border-top:1px solid var(--line);
  margin-top:10px;
  padding-top:10px;
  line-height:1.35;
}
[data-theme="light"] .hint{color:rgba(15,23,42,.62)}

.main{
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:18px 20px 12px 20px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, var(--glassTop), rgba(255,255,255,0));
}
.topbar h1{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}
.sub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.topbarRight{
  display:flex;
  gap:10px;
  align-items:center;
}

.calendarWrap{
  padding:16px 18px 18px 18px;
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.calendarHeader{
  display:grid;
  grid-template-columns: 84px 1fr 1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.timeColHeader, .dayHeader{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:16px;
  padding:10px 12px;
  font-weight:900;
  font-size:13px;
}
.dayHeader small{
  display:block;
  font-weight:700;
  color:var(--muted);
  margin-top:4px;
  font-size:12px;
}

.calendarGrid{
  display:grid;
  grid-template-columns: 84px 1fr 1fr 1fr;
  gap:10px;
  align-items:stretch;
  flex:1;
}

.timeCol{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:16px;
  overflow:hidden;
  position:relative;
}

.timeTick{
  height: var(--slotH); /* 15 min = 1 slot */
  border-bottom:1px solid rgba(255,255,255,.04);
  padding:2px 8px;
  font-size:11px;
  color:rgba(234,240,255,.55);
  display:flex;
  align-items:flex-start;
  font-variant-numeric: tabular-nums;
}
/* Every 4th slot is on the hour (:00) */
.timeTick:nth-child(4n+1){
  color:rgba(234,240,255,.70);
  font-weight:500;
}
/* Minor ticks (15 and 45 minute marks) - no label, just a subtle line */
.timeTick.minor{
  border-bottom:1px solid rgba(255,255,255,.02);
}
[data-theme="light"] .timeTick{
  border-bottom-color:rgba(15,23,42,.04);
  color:rgba(15,23,42,.45);
}
[data-theme="light"] .timeTick:nth-child(4n+1){
  color:rgba(15,23,42,.65);
}
[data-theme="light"] .timeTick.minor{
  border-bottom-color:rgba(15,23,42,.02);
}

.dayCol{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:16px;
  position:relative;
  overflow:hidden;
  min-height: calc((var(--dayEnd) - var(--dayStart)) * 4 * var(--slotH));
}

.dayCol::before{
  content:"";
  position:absolute; inset:0;
  /* Hour lines (strongest), 30-min lines (medium), 15-min lines (subtle) */
  background:
    linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:
    100% calc(var(--slotH) * 4),
    100% calc(var(--slotH) * 2),
    100% var(--slotH);
  opacity:.7;
  pointer-events:none;
}
[data-theme="light"] .dayCol::before{
  background:
    linear-gradient(to bottom, rgba(15,23,42,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size:
    100% calc(var(--slotH) * 4),
    100% calc(var(--slotH) * 2),
    100% var(--slotH);
}

.dropOverlay{
  position:absolute; inset:10px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  display:none;
  place-items:center;
  color:rgba(234,240,255,.65);
  font-weight:900;
  background:rgba(0,0,0,.18);
  pointer-events:none;
}
[data-theme="light"] .dropOverlay{
  border-color:rgba(15,23,42,.18);
  color:rgba(15,23,42,.70);
  background:rgba(255,255,255,.65);
}
.dayCol.dragOver .dropOverlay{display:grid}

.block{
  position:absolute;
  left:4px;
  right:4px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
  padding:4px 8px;
  overflow:hidden;
  user-select:none;
  touch-action:none;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  gap:12px;
}

.block .bTitle{
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}
.block .bSub{
  font-size:11px;
  color:rgba(234,240,255,.65);
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}
[data-theme="light"] .block .bSub{color:rgba(15,23,42,.60)}

.block .bPills{
  display:flex;
  gap:4px;
  align-items:center;
  flex-shrink:0;
}
.pill{
  font-size:9px;
  font-weight:600;
  padding:2px 6px;
  border-radius:3px;
  background:rgba(255,255,255,.12);
  color:rgba(234,240,255,.75);
  white-space:nowrap;
}
[data-theme="light"] .pill{
  background:rgba(15,23,42,.08);
  color:rgba(15,23,42,.65);
}

/* Cancelled appointments */
.block.cancelled{
  opacity:0.55;
}
.block.cancelled .bTitle{
  text-decoration:line-through;
  text-decoration-color:rgba(239,68,68,.8);
  text-decoration-thickness:2px;
}
.block.cancelled::after{
  content:"CANCELLED";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:8px;
  font-weight:800;
  color:rgba(239,68,68,.9);
  letter-spacing:0.5px;
  pointer-events:none;
}

.block.locked{
  background: rgba(255,176,32,.18);
  border-color: rgba(255,176,32,.35);
}
[data-theme="light"] .block.locked{
  background: rgba(255,176,32,.25);
  border-color: rgba(255,176,32,.45);
}

.block.task{
  background: rgba(124,92,255,.18);
  border-color: rgba(124,92,255,.35);
  cursor:grab;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:2px;
  padding:0 8px;
}
[data-theme="light"] .block.task{
  background: rgba(124,92,255,.20);
  border-color: rgba(124,92,255,.40);
}
.block.task:active{cursor:grabbing}
.block.task.dragging{
  outline:2px solid rgba(124,92,255,.55);
  filter:brightness(1.08);
}
.block.task.resizing{
  outline:2px solid rgba(124,92,255,.75);
  filter:brightness(1.12);
}

/* Resize handles for task blocks */
.resizeHandle{
  position:absolute;
  left:0;
  right:0;
  height:12px;
  cursor:ns-resize;
  opacity:0;
  transition:opacity .15s;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:10;
  touch-action:none;
}
.resizeHandle.top{
  top:-4px;
  border-radius:4px 4px 0 0;
}
.resizeHandle.bottom{
  bottom:-4px;
  border-radius:0 0 4px 4px;
}
.block.task:hover .resizeHandle{
  opacity:1;
}
.resizeHandle::after{
  content:'';
  width:24px;
  height:3px;
  background:rgba(124,92,255,.8);
  border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.resizeHandle:hover::after{
  background:rgba(124,92,255,1);
  box-shadow:0 1px 6px rgba(124,92,255,.5);
}
[data-theme="light"] .resizeHandle::after{
  background:rgba(124,92,255,.7);
}
[data-theme="light"] .resizeHandle:hover::after{
  background:rgba(124,92,255,.9);
}

/* Task block inner layout */
.block.task .bTitle{
  flex:none;
}
.block.task .bSub{
  flex:none;
}
.blockRemove{
  position:absolute;
  top:4px;
  right:4px;
  width:18px;
  height:18px;
  border:none;
  border-radius:3px;
  background:rgba(255,255,255,.12);
  color:rgba(234,240,255,.7);
  font-size:10px;
  cursor:pointer;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, color .15s;
  z-index:5;
}
.blockRemove:hover{
  background:rgba(255,80,80,.35);
  color:#fff;
}
[data-theme="light"] .blockRemove{
  background:rgba(15,23,42,.08);
  color:rgba(15,23,42,.5);
}
[data-theme="light"] .blockRemove:hover{
  background:rgba(220,38,38,.25);
  color:rgba(220,38,38,1);
}

.legend{
  margin-top:12px;
  display:flex;
  gap:14px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
}
.legendItem{display:flex; align-items:center; gap:8px}
.dot{
  width:10px;height:10px;border-radius:999px;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
[data-theme="light"] .dot{
  box-shadow:0 0 0 3px rgba(15,23,42,.06);
}
.dot.locked{background:var(--locked)}
.dot.task{background:var(--task)}

/* Animations */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}