:root {
  --border: rgba(255, 255, 255, 0.12);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.65);
  --bg: #0b0c10;
  --card: rgba(255, 255, 255, 0.04);

  /* Base grid step = 15 minutes (fixed) */
  --rowH: 24px;     /* 15 min row height */
  --headerH: 52px;
  --timeColW: 140px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(99,102,241,0.18), transparent),
              radial-gradient(900px 500px at 80% 10%, rgba(16,185,129,0.12), transparent),
              var(--bg);
}

.topbar {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

h1 { margin: 0 0 6px; }
.subtitle { margin: 0; color: var(--muted); }

.app {
  max-width: 1200px;
  margin: 16px auto;
  padding: 0 16px 24px;
  display: grid;
  gap: 12px;
}

/* Controls layout (two rows) */
.controls {
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  display: grid;
  gap: 10px;
}

.controlsTop,
.controlsBottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.control { display: grid; gap: 6px; }
.control label { font-size: 12px; color: var(--muted); }

input[type="text"], select {
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  outline: none;
  min-width: 150px;
  font-variant-numeric: tabular-nums;
}

input[type="color"] {
  width: 56px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
}

.primary, .secondary, .danger {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--border);
}

.primary { background: rgba(255, 255, 255, 0.12); color: var(--text); }
.secondary { background: rgba(0, 0, 0, 0.2); color: var(--text); }
.danger { background: rgba(239, 68, 68, 0.18); color: var(--text); }

.primary:hover, .secondary:hover, .danger:hover { opacity: 0.92; }

/* Segmented time-format toggle (better spacing + clearer active state) */
.segmented {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 24h left, 12h right */
  gap: 10px;                      /* visible gap in middle */
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);

  /* makes it feel like a proper control */
  min-width: 220px;
}

.segBtn {
  flex: 1;                 /* each takes half: left and right */
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-variant-numeric: tabular-nums;

  /* “something happened” feeling */
  opacity: 0.75;
  transform: translateY(0);
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease,
    opacity 140ms ease,
    border-color 140ms ease;
}

.segBtn:hover {
  opacity: 0.9;
}

.segBtn:active {
  transform: translateY(1px) scale(0.99);
}

.segBtn.active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px); /* pop out a bit */
}

.segBtn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}


/* Days chips */
.daysControl { flex: 1; min-width: 320px; }
.daysGrid { display: flex; flex-wrap: wrap; gap: 8px 10px; }

.dayChip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  user-select: none;
}

/* Panel */
.panel {
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  display: grid;
  gap: 10px;
}

.panelHeader { min-width: 260px; }
.panelTitle { margin: 0 0 4px; font-size: 16px; }
.panelSubtitle { margin: 0; color: var(--muted); font-size: 12px; }

.eventForm {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.wide { min-width: 260px; flex: 1; }

.eventButtons { display: flex; gap: 10px; align-items: center; }

.msg {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  width: 100%;
}
.toolsRow {
  width: 100%;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.fileBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
}
.fileBtn:hover {
  opacity: 0.92;
}


/* Schedule grid */
.schedule {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: auto;
  backdrop-filter: blur(8px);
}

.grid {
  position: relative;
  display: grid;
  min-width: 980px;
}

/* Grid cells */
.cell {
  border-right: 1px solid var(--border);
  height: var(--rowH);
  padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06); /* default minor */
}

.cell.major {
  border-top: 2px solid rgba(255, 255, 255, 0.16);
}

.cell.header {
  height: var(--headerH);
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, 0.35);
  font-weight: 650;
  z-index: 6;
  border-top: none;
}

.cell.time {
  position: sticky;
  left: 0;
  width: var(--timeColW);
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px;
  color: var(--muted);
  z-index: 5;
  font-variant-numeric: tabular-nums;
}

.cell.corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 7;
}

/* Event blocks */
.eventBlock {
  position: absolute;
  z-index: 2;
  border-radius: 12px;
  padding: 10px 10px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 13px;
  font-weight: 750;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

.eventMeta {
  margin-top: 4px;
  font-weight: 600;
  font-size: 11px;
  opacity: 0.9;
}

.eventBlock.compact {
  padding: 8px 10px;
  font-size: 12px;
}
.eventBlock.compact .eventMeta { display: none; }

.footer {
  margin-top: 18px;
  padding: 14px 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.95rem;
}