/* ============================================================
   demo/school/hub.css
   NPC brand — deep red accent, clean professional light theme.
============================================================ */

:root {
  --accent:      #b8282f;
  --accent-soft: #f7d1d4;
  --heading:     #111111;
  --text:        #2f2f2f;
  --muted:       #666666;
  --bg:          #f4f5f7;
  --surface:     #ffffff;
  --border:      #e5e7eb;

  --success: #198754;
  --danger:  #dc3545;
  --info:    #0284c7;
  --purple:  #7c3aed;

  --font-body:    'Roboto', system-ui, sans-serif;
  --font-heading: 'Josefin Sans', sans-serif;
  --font-nav:     'Poppins', sans-serif;

  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px  rgba(0,0,0,0.07);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.10);
  --t:         0.22s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family:      var(--font-body);
  background-color: var(--bg);
  color:            var(--text);
  min-height:       100vh;
  -webkit-font-smoothing: antialiased;
}

a    { color: var(--accent); text-decoration: none; }
img  { max-width: 100%; display: block; }

/* ── Demo banner ─────────────────────────────────────────── */
.demo-banner {
  position:        fixed;
  top:             0; left: 0; right: 0;
  z-index:         9999;
  background:      var(--heading);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         9px 48px 9px 16px;
  font-family:     var(--font-nav);
  font-size:       0.8rem;
  font-weight:     600;
}

.demo-banner a {
  color:           #fbbf24;
  text-decoration: underline;
  white-space:     nowrap;
}

.demo-banner-close {
  position:   absolute;
  right:      14px; top: 50%;
  transform:  translateY(-50%);
  background: none; border: none;
  color:      rgba(255,255,255,0.65);
  font-size:  1rem; cursor: pointer;
  transition: color var(--t);
}
.demo-banner-close:hover { color: #fff; }
body.has-banner { padding-top: 38px; }

/* ── Hub wrapper ─────────────────────────────────────────── */
.hub {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 24px 48px;
}

/* ── Header ──────────────────────────────────────────────── */
.hub-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 0 16px;
  border-bottom:   1px solid var(--border);
  flex-wrap:       wrap;
  gap:             16px;
}

.hub-brand {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.hub-brand-icon {
  width:           44px; height: 44px;
  background:      var(--accent);
  border-radius:   var(--r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.2rem;
  color:           #fff;
  flex-shrink:     0;
  box-shadow:      0 4px 12px rgba(184,40,47,0.30);
}

.hub-brand-name {
  font-family:  var(--font-heading);
  font-size:    1.2rem;
  font-weight:  700;
  color:        var(--heading);
  line-height:  1;
}

.hub-brand-sub {
  font-size:   0.68rem;
  color:       var(--muted);
  font-family: var(--font-nav);
  margin-top:  2px;
}

.hub-clock { text-align: center; }

.hub-time {
  font-family:  var(--font-heading);
  font-size:    1.3rem;
  font-weight:  700;
  color:        var(--heading);
  line-height:  1;
}

.hub-date {
  font-size:  0.65rem;
  color:      var(--muted);
  margin-top: 2px;
}

.hub-back {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   0.82rem;
  font-weight: 600;
  font-family: var(--font-nav);
  color:       var(--muted);
  transition:  color var(--t);
}
.hub-back:hover { color: var(--heading); }

/* ── Hero ────────────────────────────────────────────────── */
.hub-hero {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             24px;
  padding:         32px 0 24px;
}

.hub-greeting {
  display:     flex;
  align-items: center;
  gap:         16px;
}

.hub-greeting-icon {
  width:           52px; height: 52px;
  border-radius:   var(--r-lg);
  background:      var(--accent-soft);
  border:          1px solid rgba(184,40,47,0.20);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.4rem;
  color:           var(--accent);
  flex-shrink:     0;
  transition:      background var(--t);
}

.hub-greeting-icon.morning   { color: #d97706; background: #fff3e0; border-color: rgba(217,119,6,0.20); }
.hub-greeting-icon.afternoon { color: var(--accent); }
.hub-greeting-icon.evening   { color: var(--info);   background: #e0f4ff; border-color: rgba(2,132,199,0.20); }
.hub-greeting-icon.night     { color: var(--purple);  background: #f3e8ff; border-color: rgba(124,58,237,0.20); }

.hub-greeting-title {
  font-family: var(--font-heading);
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--heading);
  line-height: 1.1;
}

.hub-greeting-sub {
  font-size:   0.82rem;
  color:       var(--muted);
  margin-top:  4px;
}

/* Stats strip */
.hub-stats {
  display:     flex;
  align-items: center;
  gap:         0;
  background:  var(--surface);
  border:      1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:    hidden;
  box-shadow:  var(--shadow-sm);
}

.hub-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  padding:        12px 24px;
}

.hub-stat-divider {
  width:      1px;
  height:     32px;
  background: var(--border);
  flex-shrink:0;
}

.hub-stat-value {
  font-family: var(--font-heading);
  font-size:   1.3rem;
  font-weight: 700;
  color:       var(--heading);
  line-height: 1;
}

.hub-stat-value.green { color: var(--success); }
.hub-stat-value.red   { color: var(--danger);  }

.hub-stat-label {
  font-size:      0.65rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color:          var(--muted);
  white-space:    nowrap;
}

/* ── Tiles section ───────────────────────────────────────── */
.hub-tiles-section { padding: 8px 0 32px; }

.hub-tiles-label {
  font-family:    var(--font-nav);
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--muted);
  margin-bottom:  16px;
  display:        flex;
  align-items:    center;
  gap:            7px;
}

.hub-tiles {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   16px;
}

/* ── Single tile ─────────────────────────────────────────── */
.hub-tile {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       24px;
  display:       flex;
  flex-direction:column;
  gap:           14px;
  text-decoration:none;
  color:         inherit;
  position:      relative;
  overflow:      hidden;
  transition:    transform var(--t), box-shadow var(--t), border-color var(--t);
  cursor:        pointer;
}

.hub-tile:hover {
  transform:    translateY(-3px);
  box-shadow:   var(--shadow-md);
  border-color: color-mix(in srgb, var(--tile-color, var(--accent)), transparent 40%);
}

.hub-tile--soon {
  opacity:  0.65;
  cursor:   default;
  pointer-events: none;
}

.hub-tile[data-color="red"]    { --tile-color: var(--accent); }
.hub-tile[data-color="blue"]   { --tile-color: var(--info); }
.hub-tile[data-color="green"]  { --tile-color: var(--success); }
.hub-tile[data-color="purple"] { --tile-color: var(--purple); }

.hub-tile-icon {
  width:           48px; height: 48px;
  border-radius:   var(--r-md);
  background:      color-mix(in srgb, var(--tile-color, var(--accent)), transparent 88%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.3rem;
  color:           var(--tile-color, var(--accent));
  transition:      background var(--t);
  flex-shrink:     0;
}

.hub-tile:hover .hub-tile-icon {
  background: color-mix(in srgb, var(--tile-color, var(--accent)), transparent 78%);
}

.hub-tile-title {
  font-family:  var(--font-heading);
  font-size:    1rem;
  font-weight:  700;
  color:        var(--heading);
  line-height:  1.2;
}

.hub-tile-desc {
  font-size:   0.78rem;
  color:       var(--muted);
  line-height: 1.55;
}

.hub-tile-badge {
  display:         inline-flex;
  align-items:     center;
  font-family:     var(--font-nav);
  font-size:       0.68rem;
  font-weight:     700;
  padding:         3px 10px;
  border-radius:   var(--r-pill);
  background:      color-mix(in srgb, var(--danger), transparent 88%);
  color:           var(--danger);
  align-self:      flex-start;
}

.hub-tile-soon-badge {
  display:         inline-flex;
  align-items:     center;
  font-family:     var(--font-nav);
  font-size:       0.65rem;
  font-weight:     700;
  padding:         3px 10px;
  border-radius:   var(--r-pill);
  background:      var(--bg);
  color:           var(--muted);
  border:          1px solid var(--border);
  align-self:      flex-start;
}

.hub-tile-arrow {
  position:   absolute;
  bottom:     20px; right: 20px;
  font-size:  0.9rem;
  color:      var(--muted);
  opacity:    0;
  transform:  translateX(-4px);
  transition: opacity var(--t), transform var(--t);
}

.hub-tile:hover .hub-tile-arrow {
  opacity:   1;
  transform: translateX(0);
}

/* ── Flow section ────────────────────────────────────────── */
.hub-flow { padding: 0 0 16px; }

.hub-flow-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       28px 32px;
  display:       flex;
  flex-direction:column;
  gap:           20px;
  box-shadow:    var(--shadow-sm);
}

.hub-flow-label {
  font-family:    var(--font-nav);
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--muted);
  display:        flex;
  align-items:    center;
  gap:            7px;
}

.hub-flow-steps {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
}

.hub-flow-step {
  display:       flex;
  align-items:   center;
  gap:           12px;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       12px 16px;
  flex:          1;
  min-width:     160px;
}

.hub-flow-step-icon {
  width:           36px; height: 36px;
  border-radius:   var(--r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.95rem;
  flex-shrink:     0;
}

.hub-flow-step-icon.red    { background: var(--accent-soft); color: var(--accent); }
.hub-flow-step-icon.blue   { background: #e0f4ff; color: var(--info); }
.hub-flow-step-icon.green  { background: #e6f9f0; color: var(--success); }
.hub-flow-step-icon.purple { background: #f3e8ff; color: var(--purple); }

.hub-flow-step-title {
  font-family:  var(--font-heading);
  font-size:    0.88rem;
  font-weight:  700;
  color:        var(--heading);
  line-height:  1.2;
}

.hub-flow-step-desc {
  font-size:   0.68rem;
  color:       var(--muted);
  margin-top:  2px;
  line-height: 1.4;
}

.hub-flow-connector {
  color:      var(--muted);
  font-size:  0.85rem;
  flex-shrink:0;
}

.hub-flow-note {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   0.8rem;
  font-weight: 600;
  font-family: var(--font-nav);
  color:       var(--accent);
  background:  var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding:     10px 14px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ── Footer ──────────────────────────────────────────────── */
.hub-footer {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   0.7rem;
  color:       var(--muted);
  border-top:  1px solid var(--border);
  padding-top: 20px;
  margin-top:  16px;
}

.hub-footer-dot {
  width:         7px; height: 7px;
  border-radius: 50%;
  background:    var(--success);
  box-shadow:    0 0 0 3px rgba(25,135,84,0.18);
  flex-shrink:   0;
}

.hub-footer-sep { opacity: 0.4; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hub-hero { flex-direction: column; align-items: flex-start; }
  .hub-stats { width: 100%; }
  .hub-flow-steps { flex-direction: column; align-items: stretch; }
  .hub-flow-connector { transform: rotate(90deg); align-self: center; }
  .hub-flow-card { padding: 20px; }
}

@media (max-width: 480px) {
  .hub { padding: 0 16px 40px; }
  .hub-tiles { grid-template-columns: 1fr; }
  .hub-stat { padding: 10px 16px; }
  .hub-greeting-title { font-size: 1.25rem; }
}