/* =====================================================================
   Visual Schedule PWA Stylesheet
   -----------------------------------------------------------------
   This stylesheet defines the look and feel of the Progressive Web
   App version of the visual schedule builder. It embraces a clean,
   modern aesthetic with responsive layouts that adapt gracefully
   across phones, tablets and desktops. Colours and spacing are
   defined up front as CSS variables so they can be easily themed.

   Sections are clearly separated: global resets, layout containers,
   board and slot styling, controls and buttons, activity library and
   print-specific overrides. Feel free to tweak the variables or
   individual rules to better match your brand.
===================================================================== */

/* Colour palette & sizing tokens */
:root {
  --vs-brand: #36AB9C;
  --vs-accent: #F58A48;
  --vs-ink: #0F172A;
  --vs-muted: #64748B;
  --vs-line: #E5E7EB;
  --vs-bg: #FFFFFF;
  --vs-panel-bg: #F8FAFC;
  --vs-slot-bg: #F9FAFB;
  --vs-radius-lg: 16px;
  --vs-radius-md: 12px;
  --vs-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  --vs-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Basic resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--vs-font);
  color: var(--vs-ink);
  background: var(--vs-panel-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--vs-brand);
  text-decoration: none;
}

/* Header */
.app-header {
  text-align: center;
  padding: 1.5rem 1rem 0.75rem;
}
.app-header h1 {
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.app-header .tagline {
  color: var(--vs-muted);
  font-size: 0.875rem;
}

/* Main container */
.app-main {
  flex: 1;
  padding: 0 1rem 2rem;
}

/* Board container & print area */
.board-container {
  max-width: 900px;
  margin: 0 auto 2rem;
}
.print-area {
  background: var(--vs-panel-bg);
  border: 1px dashed var(--vs-line);
  border-radius: var(--vs-radius-md);
  padding: 1rem;
  overflow: hidden;
}

.board-header {
  text-align: center;
  margin-bottom: 0.75rem;
}
.board-header h2 {
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 600;
}

.board-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .board-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Column card */
.column {
  background: var(--vs-bg);
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
}

.column-header {
  text-align: center;
  margin-bottom: 0.5rem;
}
.column-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--vs-brand);
}

/* Slot list */
.slots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Slot card */
.slot {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-md);
  background: var(--vs-slot-bg);
  min-height: 4.25rem;
}
.slot-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--vs-radius-md);
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--vs-ink);
  flex-shrink: 0;
  margin-right: 0.5rem;
  overflow: hidden;
}
.slot-label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--vs-ink);
  word-break: break-word;
}
.slot.empty .slot-label {
  color: var(--vs-muted);
  font-style: italic;
}
.clear-btn {
  background: transparent;
  border: none;
  color: var(--vs-muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0.25rem;
}
.clear-btn:hover {
  background: #F1F5F9;
}

/* Controls */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
}
.controls p {
  font-size: 0.875rem;
  color: var(--vs-muted);
}
.controls span {
  color: var(--vs-brand);
  font-weight: 600;
}
.button-group {
  display: flex;
  gap: 0.5rem;
}
.btn {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn.primary {
  background: var(--vs-brand);
  color: #FFFFFF;
  border-color: var(--vs-brand);
}
.btn.primary:hover {
  background: #2e9283;
}
.btn.ghost {
  background: #FFFFFF;
  color: var(--vs-muted);
  border-color: var(--vs-line);
}
.btn.ghost:hover {
  background: #F1F5F9;
}
.btn.danger {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}
.btn.danger:hover {
  background: #FEE2E2;
}

/* Activity library */
.activity-library {
  max-width: 900px;
  margin: 0 auto;
}
.activity-library h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-align: center;
}
.activity-group {
  margin-bottom: 1.5rem;
}
.activity-group-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--vs-brand);
}
.activity-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.activity {
  min-width: 110px;
  max-width: 150px;
  background: #FFFFFF;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-md);
  padding: 0.5rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.activity:hover {
  background: #F8FAFC;
  transform: translateY(-2px);
}
.activity-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.activity-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.activity-label {
  font-weight: 600;
  color: var(--vs-ink);
}
.activity-tag {
  font-size: 0.625rem;
  color: var(--vs-muted);
}

/* Print-specific tweaks */
@media print {
  /* Remove spacing on body for print */
  body {
    background: #FFFFFF;
    padding: 0;
  }
  .app-header,
  .controls,
  .activity-library,
  .sg-vs-gate {
    display: none !important;
  }
  .board-container {
    max-width: none;
    margin: 0;
  }
  .print-area {
    border: none;
    padding: 0;
  }
  .board-header h2 {
    font-size: 1.25rem;
  }
  /* Make columns equal width and fit horizontally */
  .board-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .column {
    border: 1px solid var(--vs-line);
    padding: 0.5rem;
  }
  .column-header {
    margin-bottom: 0.25rem;
  }
  .column-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
  }
  .slots {
    gap: 0.25rem;
  }
  .slot {
    min-height: 3.75rem;
    padding: 0.25rem 0.5rem;
  }
  .slot-icon {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
    margin-right: 0.25rem;
  }
  .slot-label {
    font-size: 0.75rem;
  }
}