/* =========================================================================
   THE HOURGLASS — styles
   Dark-mode planning surface. Functional over pretty.
   ========================================================================= */

:root {
  --row-h: 28px;                 /* fixed height of one 30-minute row */
  --time-col: 66px;              /* width of the left time-label column */

  --bg:        #161616;          /* page background */
  --grid-bg:   #1a1a1a;          /* near-black grid background */
  --cell:      #242424;          /* empty cell */
  --cell-alt:  #202020;          /* slightly different banding per hour */
  --line:      #333333;          /* half-hour grid line */
  --line-hour: #444444;          /* stronger line on the hour */
  --muted:     #8a8a8a;          /* day headers + time labels */
  --text:      #e8e8e8;
  --panel:     #1f1f1f;
  --panel-2:   #262626;
  --border:    #383838;
  --accent:    #378ADD;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/* ----------------------------------------------------------------- top nav */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .brand {
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar .brand .glass { font-size: 18px; }
.topbar .week-name {
  color: var(--muted);
  font-size: 13px;
}
.topbar .spacer { flex: 1; }
.topbar button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.topbar button:hover { border-color: var(--accent); }

/* ------------------------------------------------------------------- legend */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: 12px;
  color: var(--muted);
}
.legend .item { display: flex; align-items: center; gap: 6px; }
.legend .dot {
  width: 12px; height: 12px; border-radius: 3px;
  border-left: 3px solid rgba(255,255,255,.25);
}

/* --------------------------------------------------------------------- grid */
.grid-wrap { padding: 14px 16px 40px; overflow-x: auto; }

.grid {
  display: grid;
  grid-template-columns: var(--time-col) repeat(7, minmax(96px, 1fr));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--grid-bg);
  min-width: 760px;
}

.corner { background: var(--panel); border-bottom: 1px solid var(--border); }

.dayhead {
  text-align: center;
  padding: 8px 0;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .5px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--line);
}

/* left time labels */
.timecol {
  position: relative;
  background: var(--grid-bg);
  border-right: 1px solid var(--line-hour);
}
.timelabel {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.timelabel.half { color: #5c5c5c; font-size: 10px; }

/* one day column — holds the absolutely-positioned blocks */
.daycol {
  position: relative;
  border-left: 1px solid var(--line);
  /* horizontal half-hour lines + stronger hour lines, drawn with gradients */
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--line) 0, var(--line) 1px,
      transparent 1px, transparent var(--row-h)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--line-hour) 0, var(--line-hour) 1px,
      transparent 1px, transparent calc(var(--row-h) * 2)
    );
  background-color: var(--cell);
}
.daycol.dragover { background-color: #2c2c2c; }

/* the selection rectangle shown while creating a block by dragging */
.select-rect {
  position: absolute;
  left: 3px; right: 3px;
  background: rgba(55,138,221,.25);
  border: 1px dashed var(--accent);
  border-radius: 5px;
  pointer-events: none;
  z-index: 5;
}

/* the snap-target highlight shown while dragging an existing block */
.drop-highlight {
  position: absolute;
  left: 3px; right: 3px;
  border: 2px dashed rgba(255,255,255,.5);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  pointer-events: none;
  z-index: 4;
}

/* ------------------------------------------------------------------ blocks */
.block {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  padding: 3px 7px;
  overflow: hidden;
  cursor: grab;
  border-left: 3px solid rgba(255,255,255,.3);
  touch-action: none;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  z-index: 10;
}
.block:active { cursor: grabbing; }
.block.dragging { opacity: .85; z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.block .label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  word-break: break-word;
}
.block .time {
  font-size: 10px;
  opacity: .75;
  margin-top: 1px;
}
.block .del {
  position: absolute;
  top: 2px; right: 4px;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  color: inherit;
}
.block:hover .del { opacity: .7; }
.block .del:hover { opacity: 1; }
/* the two resize grips */
.block .grip {
  position: absolute;
  left: 0; right: 0;
  height: 7px;
  cursor: ns-resize;
}
.block .grip.top { top: 0; }
.block .grip.bottom { bottom: 0; }

/* category color classes — fill + text + accent border, per the locked ramp */
.cat-blue   { background:#1f3a5f; color:#E6F1FB; border-left-color:#378ADD; }
.cat-cyan   { background:#1d4e63; color:#E1F3F9; border-left-color:#2a9ec4; }
.cat-teal   { background:#1b4f44; color:#E1F5EE; border-left-color:#1D9E75; }
.cat-coral  { background:#5a2410; color:#FAECE7; border-left-color:#D85A30; }
.cat-purple { background:#312a6e; color:#EEEDFE; border-left-color:#7F77DD; }
.cat-pink   { background:#5a1a30; color:#FBEAF0; border-left-color:#D4537E; }
.cat-green  { background:#3b4d10; color:#EAF3DE; border-left-color:#97C459; }
.cat-amber  { background:#5e4205; color:#FAEEDA; border-left-color:#EF9F27; }
.cat-gray   { background:#3a3a3a; color:#e8e8e8; border-left-color:#8c8c8c; }

.swatch-blue   { background:#1f3a5f; border-left:3px solid #378ADD; }
.swatch-cyan   { background:#1d4e63; border-left:3px solid #2a9ec4; }
.swatch-teal   { background:#1b4f44; border-left:3px solid #1D9E75; }
.swatch-coral  { background:#5a2410; border-left:3px solid #D85A30; }
.swatch-purple { background:#312a6e; border-left:3px solid #7F77DD; }
.swatch-pink   { background:#5a1a30; border-left:3px solid #D4537E; }
.swatch-green  { background:#3b4d10; border-left:3px solid #97C459; }
.swatch-amber  { background:#5e4205; border-left:3px solid #EF9F27; }
.swatch-gray   { background:#3a3a3a; border-left:3px solid #8c8c8c; }

/* ------------------------------------------------------------------ modals */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 100;
  padding: 60px 16px;
  overflow-y: auto;
}
.overlay.open { display: flex; }
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal.wide { max-width: 720px; }
.modal h2 { margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--border); font-size: 16px; }
.modal .body { padding: 16px 18px; }
.modal .foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
}

label.field { display: block; margin: 0 0 12px; }
label.field .lab { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
input[type=text], textarea, select {
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
}
textarea { min-height: 180px; resize: vertical; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; }

button.btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 14px; cursor: pointer; font-size: 13px;
}
button.btn:hover { border-color: var(--accent); }
button.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.btn.danger  { border-color: #b3402a; color: #ff9b85; }
button.btn.small { padding: 4px 9px; font-size: 12px; }

/* color picker grid in the category modal */
.color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.color-opt {
  height: 34px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: rgba(255,255,255,.85);
  border: 2px solid transparent;
}
.color-opt.sel { border-color: #fff; }

/* category management rows */
.cat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 8px;
  background: var(--panel-2);
}
.cat-row .swatch { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; }
.cat-row .cname { flex: 1; }
.cat-row .ord { display: flex; flex-direction: column; gap: 2px; }
.cat-row .ord button { padding: 0 6px; font-size: 11px; line-height: 1.3; }

/* week library rows */
.week-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 8px;
  background: var(--panel-2);
}
.week-row.current { border-color: var(--accent); }
.week-row .wmeta { flex: 1; }
.week-row .wname { font-weight: 600; }
.week-row .wsub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.tag {
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  background: #2a3550; color: #9cc2f0; border: 1px solid #3a4a6e;
}
.tag.tmpl { background: #4a3a12; color: #e9c06a; border-color: #6a521c; }

/* import results */
.import-result { margin-top: 12px; font-size: 13px; }
.import-result .ok { color: #97C459; }
.err-list { margin-top: 8px; max-height: 220px; overflow-y: auto; }
.err-list .err {
  font-size: 12px; padding: 6px 8px; border-radius: 5px;
  background: #3a1f1a; border: 1px solid #5a2c22; margin-bottom: 6px;
  color: #f3c0b3;
}
.row-inline { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); font-size: 12px; }
.hint { color: var(--muted); font-size: 12px; margin: 0 0 12px; }

/* tiny toast for save feedback */
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 8px 16px; border-radius: 20px; font-size: 12px; color: var(--muted);
  opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 200;
}
.toast.show { opacity: 1; }