/* London/Vancouver time module flag backgrounds - 2026-05-16
   Targeted change only: replace tiny flags with bold flag-backed time cards. */
.clock-grid .mini-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 26px 28px;
  border-radius: 26px;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255,255,255,0.32);
  isolation: isolate;
}

.clock-grid .mini-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(1, 13, 41, 0.78), rgba(1, 13, 41, 0.50));
  backdrop-filter: saturate(1.15);
}

.clock-grid .mini-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 18% 18%, rgba(255,255,255,0.30), transparent 28%), linear-gradient(135deg, rgba(255,255,255,0.18), transparent 42%);
  pointer-events: none;
}

.clock-grid .mini-card:nth-child(1) {
  background-image: url('/assets/time-union-jack.png') !important;
}

.clock-grid .mini-card:nth-child(2) {
  background-image: url('/assets/time-canada-flag.png') !important;
}

.clock-grid .mini-card span:first-child {
  color: rgba(255,255,255,0.92) !important;
  font-size: clamp(1.08rem, 2.2vw, 1.42rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0.20em !important;
  text-shadow: 0 3px 12px rgba(0,0,0,0.72), 0 0 18px rgba(255,255,255,0.22);
}

.clock-grid .mini-card strong,
.clock-grid .mini-card .time-main {
  color: #fff !important;
  font-size: clamp(1.72rem, 3.4vw, 2.5rem) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 4px 16px rgba(0,0,0,0.82), 0 0 22px rgba(255,255,255,0.28);
}

.clock-grid .mini-card .time-date {
  color: rgba(255,255,255,0.94) !important;
  font-size: clamp(1rem, 2vw, 1.32rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.82);
}

.clock-grid .mini-card .time-flag,
.clock-grid .mini-card .time-flag-uk,
.clock-grid .mini-card .time-flag-ca {
  display: none !important;
}

@media (max-width: 720px) {
  .clock-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .clock-grid .mini-card {
    min-height: 116px;
    padding: 20px 18px;
    border-radius: 22px;
  }
}


/* Time section refinement - 2026-05-16
   Keeps each clock to exactly three readable lines and replaces the white panel
   with a restrained dark glass dashboard treatment. */
html body #app.app-shell .dashboard .panel {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 72, 205, 0.30), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(0, 216, 255, 0.26), transparent 36%),
    linear-gradient(135deg, rgba(10, 14, 38, 0.96), rgba(28, 22, 58, 0.94) 48%, rgba(7, 25, 50, 0.96)) !important;
  border: 1px solid rgba(255, 79, 216, 0.22) !important;
  box-shadow:
    0 22px 54px rgba(5, 7, 30, 0.22),
    0 0 0 1px rgba(255,255,255,0.10),
    0 0 34px rgba(0,216,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

html body #app.app-shell .dashboard .panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  top: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.10) 42%, transparent 58%) !important;
  background-size: 42px 42px, 42px 42px, 100% 100% !important;
  background-repeat: repeat, repeat, no-repeat !important;
  filter: none !important;
  mix-blend-mode: screen !important;
  z-index: 0 !important;
}

html body #app.app-shell .dashboard .panel::after {
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 0 !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff4fd8, #ffd84f, #55ff8a, #00d8ff, #7b61ff, #ff4fd8) !important;
  box-shadow: 0 0 18px rgba(255,79,216,0.42), 0 0 22px rgba(0,216,255,0.28) !important;
  z-index: 1 !important;
}

html body #app.app-shell .dashboard .panel > * {
  position: relative !important;
  z-index: 2 !important;
}

html body #app.app-shell .dashboard .panel h3 {
  color: #ffffff !important;
  text-shadow: 0 4px 18px rgba(0,0,0,0.65), 0 0 20px rgba(255,79,216,0.28) !important;
}

.clock-grid .mini-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
}

.clock-grid .mini-card span:first-child,
.clock-grid .mini-card .time-main,
.clock-grid .mini-card .time-date {
  display: block !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.clock-grid .mini-card .time-main {
  font-size: clamp(1.55rem, 3vw, 2.5rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
}

.clock-grid .mini-card .time-date {
  font-size: clamp(1rem, 1.8vw, 1.32rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.12em !important;
}

@media (max-width: 720px) {
  html body #app.app-shell .dashboard .panel {
    padding: 26px 26px 30px !important;
  }

  html body #app.app-shell .dashboard .panel h3 {
    margin-bottom: 18px !important;
  }

  .clock-grid .mini-card {
    min-height: 118px !important;
    padding: 18px 16px !important;
    gap: 7px !important;
  }

  .clock-grid .mini-card span:first-child {
    font-size: clamp(0.88rem, 3.1vw, 1.08rem) !important;
    letter-spacing: 0.18em !important;
  }

  .clock-grid .mini-card .time-main {
    font-size: clamp(1.26rem, 4.8vw, 1.72rem) !important;
    letter-spacing: 0.02em !important;
  }

  .clock-grid .mini-card .time-date {
    font-size: clamp(0.82rem, 3.0vw, 1rem) !important;
    letter-spacing: 0.10em !important;
  }
}

@media (max-width: 430px) {
  .clock-grid {
    gap: 12px !important;
  }

  .clock-grid .mini-card {
    padding: 16px 13px !important;
    min-height: 112px !important;
  }

  .clock-grid .mini-card span:first-child {
    font-size: 0.82rem !important;
    letter-spacing: 0.16em !important;
  }

  .clock-grid .mini-card .time-main {
    font-size: 1.22rem !important;
    letter-spacing: 0.01em !important;
  }

  .clock-grid .mini-card .time-date {
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
  }
}