/*
 * Design System - Time Blocks
 *
 * Time block components for day and week views
 */

/* Base time block styles - hand-drawn aesthetic */
.time-block {
  border: 2px solid var(--parchment-dark);
  border-radius: 6px;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  user-select: none;
  -webkit-user-drag: element;
  position: absolute;
  top: 0;
  left: 82px;
  right: var(--space-sm);
  z-index: 10;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

.time-block-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--parchment);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-medium);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 1;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.time-block-delete:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--ink-dark);
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.time-block-time {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--ink-medium);
  margin-bottom: 2px;
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}

.time-block-title {
  display: block;
  font-weight: var(--font-weight-bold);
  margin-bottom: 2px;
  font-size: var(--font-size-sm);
  pointer-events: none;
}

.time-block-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  padding: 2px var(--space-xs);
  border: 1px solid var(--parchment-dark);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.95);
  margin-top: 2px;
  pointer-events: none;
}

/* Single task metadata (for blocks with only one task) */
.time-block-single-task-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 4px;
  font-size: var(--font-size-xs);
  color: var(--ink-medium);
}

/* Time block tasks container */
.time-block-tasks {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-block-task {
  padding: var(--space-xs);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.time-block-task .task-checkbox {
  margin-top: 1px;
  flex-shrink: 0;
}

.time-block-task-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-width: 0;
}

.time-block-task-title {
  flex: 1;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  min-width: 0;
}

.time-block-task-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--ink-medium);
  flex-shrink: 0;
}

.time-block-task-estimate {
  font-weight: var(--font-weight-semibold);
}

/* Task color variations - lighter backgrounds from the same color family */
.time-block-task.color-urgent-1 { background: rgba(255, 244, 214, 0.7); }
.time-block-task.color-urgent-2 { background: rgba(255, 239, 197, 0.7); }
.time-block-task.color-urgent-3 { background: rgba(255, 232, 179, 0.7); }
.time-block-task.color-urgent-4 { background: rgba(255, 225, 161, 0.7); }
.time-block-task.color-urgent-5 { background: rgba(255, 218, 144, 0.7); }

.time-block-task.color-upcoming-1 { background: rgba(213, 237, 217, 0.7); }
.time-block-task.color-upcoming-2 { background: rgba(198, 234, 203, 0.7); }
.time-block-task.color-upcoming-3 { background: rgba(183, 231, 189, 0.7); }
.time-block-task.color-upcoming-4 { background: rgba(168, 228, 176, 0.7); }
.time-block-task.color-upcoming-5 { background: rgba(153, 225, 162, 0.7); }

.time-block-task.color-admin-1 { background: rgba(207, 226, 243, 0.7); }
.time-block-task.color-admin-2 { background: rgba(186, 215, 237, 0.7); }
.time-block-task.color-admin-3 { background: rgba(165, 204, 231, 0.7); }
.time-block-task.color-admin-4 { background: rgba(144, 193, 225, 0.7); }

.time-block-task.color-creative-1 { background: rgba(248, 219, 234, 0.7); }
.time-block-task.color-creative-2 { background: rgba(245, 203, 223, 0.7); }
.time-block-task.color-creative-3 { background: rgba(242, 187, 212, 0.7); }
.time-block-task.color-creative-4 { background: rgba(239, 171, 201, 0.7); }
.time-block-task.color-creative-5 { background: rgba(236, 155, 190, 0.7); }

/* Task completion checkbox - hand-drawn style */
.task-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid var(--parchment-dark);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
  transform: rotate(-1deg);
  margin: 0;
  padding: 0;
  display: inline-block;
}

.task-checkbox:hover {
  border-color: var(--ink-dark);
  transform: rotate(0deg) scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.task-checkbox:checked {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-color: #FF8C00;
  transform: rotate(0deg);
}

.task-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  line-height: 1;
}

/* Time block layout with checkbox column */
.time-block-content {
  display: flex;
  gap: var(--space-sm);
  width: 100%;
}

.time-block-checkbox-col {
  flex-shrink: 0;
  padding-top: 2px;
}

.time-block-main-col {
  flex: 1;
  min-width: 0;
}

/* Task in multi-task block layout */
.time-block-task-title-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.time-block-task-title-wrapper .task-checkbox {
  margin-top: 2px;
}

/* Completed task styling - warm golden glow */
.task-completed {
  background: linear-gradient(135deg, rgba(255, 235, 180, 0.9) 0%, rgba(255, 220, 150, 0.85) 100%) !important;
  border-color: #DAA520 !important;
  opacity: 0.85;
}

.task-completed .time-block-title,
.task-completed .time-block-task-title {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Completed state for time blocks */
.time-block.task-completed {
  background: linear-gradient(135deg, rgba(255, 235, 180, 0.9) 0%, rgba(255, 220, 150, 0.85) 100%) !important;
  border-color: #DAA520 !important;
}

/* Split button - compact rounded scissors button */
.btn-split {
  width: 22px;
  height: 22px;
  padding: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 245, 237, 0.85) 100%);
  border: 1.5px solid var(--parchment-dark);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transform: rotate(-2deg);
}

.btn-split::before {
  content: '✂';
  font-size: 13px;
  line-height: 1;
  color: var(--ink-medium);
  opacity: 0.7;
}

.btn-split:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 237, 0.95) 100%);
  border-color: var(--terra-cotta);
  transform: rotate(0deg) translateY(-1px) scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.btn-split:hover::before {
  opacity: 1;
  color: var(--ink-dark);
}

.btn-split:active {
  transform: rotate(0deg) translateY(0) scale(1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Semantic Color Classes - Tag-based coloring
   ============================================ */

/* Immovable blocks (ICS events + have-to with deadline) */
.time-block.immovable {
  background: linear-gradient(135deg, var(--slate-blue) 0%, var(--dusty-blue) 100%);
  color: white;
  border-color: var(--charcoal-blue);
  border-width: 3px;
}

.time-block.immovable::before {
  background: var(--slate-blue);
}

.time-block.immovable .time-block-time,
.time-block.immovable .time-block-title,
.time-block.immovable .time-block-badge {
  color: white;
}

.time-block.immovable .time-block-badge {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Movable blocks (Want-To tasks) - Tag color families */

/* Urgent family (Yellows/Oranges) */
.time-block.color-urgent-1 {
  background: linear-gradient(135deg, var(--urgent-1) 0%, var(--urgent-1-dark) 100%);
  border-color: var(--urgent-1-dark);
  cursor: grab;
}
.time-block.color-urgent-1::before { background: var(--urgent-1); }

.time-block.color-urgent-2 {
  background: linear-gradient(135deg, var(--urgent-2) 0%, var(--urgent-2-dark) 100%);
  border-color: var(--urgent-2-dark);
  cursor: grab;
}
.time-block.color-urgent-2::before { background: var(--urgent-2); }

.time-block.color-urgent-3 {
  background: linear-gradient(135deg, var(--urgent-3) 0%, var(--urgent-3-dark) 100%);
  border-color: var(--urgent-3-dark);
  cursor: grab;
}
.time-block.color-urgent-3::before { background: var(--urgent-3); }

.time-block.color-urgent-4 {
  background: linear-gradient(135deg, var(--urgent-4) 0%, var(--urgent-4-dark) 100%);
  border-color: var(--urgent-4-dark);
  cursor: grab;
}
.time-block.color-urgent-4::before { background: var(--urgent-4); }

.time-block.color-urgent-5 {
  background: linear-gradient(135deg, var(--urgent-5) 0%, var(--urgent-5-dark) 100%);
  border-color: var(--urgent-5-dark);
  cursor: grab;
}
.time-block.color-urgent-5::before { background: var(--urgent-5); }

/* Upcoming family (Greens) */
.time-block.color-upcoming-1 {
  background: linear-gradient(135deg, var(--upcoming-1) 0%, var(--upcoming-1-dark) 100%);
  border-color: var(--upcoming-1-dark);
  cursor: grab;
}
.time-block.color-upcoming-1::before { background: var(--upcoming-1); }

.time-block.color-upcoming-2 {
  background: linear-gradient(135deg, var(--upcoming-2) 0%, var(--upcoming-2-dark) 100%);
  border-color: var(--upcoming-2-dark);
  cursor: grab;
}
.time-block.color-upcoming-2::before { background: var(--upcoming-2); }

.time-block.color-upcoming-3 {
  background: linear-gradient(135deg, var(--upcoming-3) 0%, var(--upcoming-3-dark) 100%);
  border-color: var(--upcoming-3-dark);
  cursor: grab;
}
.time-block.color-upcoming-3::before { background: var(--upcoming-3); }

.time-block.color-upcoming-4 {
  background: linear-gradient(135deg, var(--upcoming-4) 0%, var(--upcoming-4-dark) 100%);
  border-color: var(--upcoming-4-dark);
  cursor: grab;
}
.time-block.color-upcoming-4::before { background: var(--upcoming-4); }

.time-block.color-upcoming-5 {
  background: linear-gradient(135deg, var(--upcoming-5) 0%, var(--upcoming-5-dark) 100%);
  border-color: var(--upcoming-5-dark);
  cursor: grab;
}
.time-block.color-upcoming-5::before { background: var(--upcoming-5); }

/* Admin family (Blues) */
.time-block.color-admin-1 {
  background: linear-gradient(135deg, var(--admin-1) 0%, var(--admin-1-dark) 100%);
  border-color: var(--admin-1-dark);
  cursor: grab;
}
.time-block.color-admin-1::before { background: var(--admin-1); }

.time-block.color-admin-2 {
  background: linear-gradient(135deg, var(--admin-2) 0%, var(--admin-2-dark) 100%);
  border-color: var(--admin-2-dark);
  cursor: grab;
}
.time-block.color-admin-2::before { background: var(--admin-2); }

.time-block.color-admin-3 {
  background: linear-gradient(135deg, var(--admin-3) 0%, var(--admin-3-dark) 100%);
  border-color: var(--admin-3-dark);
  cursor: grab;
}
.time-block.color-admin-3::before { background: var(--admin-3); }

.time-block.color-admin-4 {
  background: linear-gradient(135deg, var(--admin-4) 0%, var(--admin-4-dark) 100%);
  border-color: var(--admin-4-dark);
  cursor: grab;
}
.time-block.color-admin-4::before { background: var(--admin-4); }

/* Creative family (Pinks) */
.time-block.color-creative-1 {
  background: linear-gradient(135deg, var(--creative-1) 0%, var(--creative-1-dark) 100%);
  border-color: var(--creative-1-dark);
  cursor: grab;
}
.time-block.color-creative-1::before { background: var(--creative-1); }

.time-block.color-creative-2 {
  background: linear-gradient(135deg, var(--creative-2) 0%, var(--creative-2-dark) 100%);
  border-color: var(--creative-2-dark);
  cursor: grab;
}
.time-block.color-creative-2::before { background: var(--creative-2); }

.time-block.color-creative-3 {
  background: linear-gradient(135deg, var(--creative-3) 0%, var(--creative-3-dark) 100%);
  border-color: var(--creative-3-dark);
  cursor: grab;
}
.time-block.color-creative-3::before { background: var(--creative-3); }

.time-block.color-creative-4 {
  background: linear-gradient(135deg, var(--creative-4) 0%, var(--creative-4-dark) 100%);
  border-color: var(--creative-4-dark);
  cursor: grab;
}
.time-block.color-creative-4::before { background: var(--creative-4); }

.time-block.color-creative-5 {
  background: linear-gradient(135deg, var(--creative-5) 0%, var(--creative-5-dark) 100%);
  border-color: var(--creative-5-dark);
  cursor: grab;
}
.time-block.color-creative-5::before { background: var(--creative-5); }

/* Grabbing state for all movable blocks */
.time-block[class*="color-"]:active {
  cursor: grabbing;
}

/* Movable blocks (tasks) */
.time-block-movable {
  cursor: move;
}

.time-block-movable:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Week view time blocks need static positioning to stack naturally */
.week-calendar-day-column .time-block,
.day-column .time-block {
  position: static;
  left: auto;
  right: auto;
  width: auto;
  margin-bottom: var(--space-xs);
}

/* Disable watercolor blur effect in week view - creates smudging when blocks are stacked */
.day-column .time-block::before {
  display: none;
}

/* ============================================
   Drag and Drop States
   ============================================ */

/* Element being dragged */
.dragging {
  opacity: 0.5;
}

/* Valid drop zone being hovered */
.drag-over {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px dashed var(--ink-dark) !important;
}

/* Invalid drop zone */
.drag-invalid {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 2px dashed var(--parchment) !important;
  opacity: 0.6;
}

/* ============================================
   Time Block Previews (in wizard, etc.)
   ============================================ */

.time-block-preview {
  border-left: 4px solid var(--ink-dark);
  border-radius: var(--border-radius);
  padding: var(--space-base);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--parchment);
  margin-bottom: var(--space-sm);
}