/* new-style.css — tuned to match your Figma look with the exact requested fixes */

/* tokens */
:root {
  --white: #ffffff;
  --muted: #6b7280;
  --accent: #1f7aed;
  /* blue accent for add button */
  --accent-2: #22c55e;
  /* green for Save */
  --danger: #ef4444;
  --border: #e6e8eb;
  --pill-bg: #f7f8fa;
  --card-radius: 10px;
  --pad: 36px;
  --max-w: 1200px;
  --h1-size: 52px;
}

/* base reset */
* {
  box-sizing: border-box
}
w
html,
body {
  height: 100%;
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: var(--white);
  color: #111827
}

body {
  display: flex;
  justify-content: center;
  padding: 12px
}


/* center white dashboard fills page width up to max */
.dashboard {
  width: 100%;
  max-width: var(--max-w);
  background: var(--white);
  border-radius: 4px;
  /* small radius like figma */
  padding: 28px 40px;
  box-shadow: none;
  /* you asked for full white background, keep flat */
}

/* top row: left/gap/right (greeting, spacer, clock) */
.top-row {
  display: grid;
  grid-template-columns: 1fr 1fr 280px;
  gap: 10px;
  align-items: start;
}

/* greeting */
#greetingText {
  font-size: var(--h1-size);
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #0b1220;
}

/* weather */
.weather-row {
  display: flex;
  align-items: center;
  gap: 10px
}

.sun-icon {
  font-size: 22px
}

#temperatureText {
  font-weight: 600
}

#temperatureRemarkText {
  font-size: 13px;
  color: var(--muted)
}

/* right column: clock & change format under it */
#timeTextDiv {
  display: flex;
  flex-direction: column;
  align-items: flex-end
}

#timeText {
  font-size: 34px;
  font-weight: 500;
  margin: 0
}

#changeTimeFormat {
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 6px 9px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px
}

/* quick links row */
#quickLinksArea {
  margin-top: 20px
}

#quickLinksListContainer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--pill-bg);
  border: 1px solid var(--border);
}

#quickLinksListContainer .label {
  font-weight: 600;
  margin-right: 8px
}

/* input pills */
.input-pill input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  min-width: 220px;
  height: 42px;
  font-size: 14px;
  background: #fff;
}

.add-pill {
  display: flex;
  align-items: center;
}

#addQuickLinkButton.plus {
  font-size: 22px;
  /* BIG plus */
  height: 44px;
  width: 56px;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  border: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(31, 122, 237, 0.12);
}

/* existing dynamic quick link pills appended by JS are li.quickLinksList */
li.quickLinksList {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #edf1f4;
  font-weight: 600;
  transition: transform .05s ease, box-shadow .08s ease;
  cursor: pointer;
}

li.quickLinksList a {
  text-decoration: none;
  color: #0b1220;
  font-weight: 600
}

li.quickLinksList:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 30, 37, 0.06)
}

/* make pills look like 'jump to' links: colored tiny label chips optional */
li.quickLinksList .chip {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f1f7ff;
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  margin-right: 6px;
}

/* main + sidebar layout */
.main-and-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  margin-top: 26px;
  align-items: start
}

/* main area (todo region) - centered content like Figma */
.main-area {
  display: flex;
  flex-direction: column;
  align-items: center
}

#todoDiv {
  width: 100%;
  max-width: 560px;
  text-align: center
}

#addNewTaskButtonDiv button.task-add {
  background: transparent;
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer
}

/* todo list items */
#addNewTaskButtonDiv ul {
  list-style: none;
  padding-left: 0;
  margin-top: 12px
}

#addNewTaskButtonDiv ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ececec;
  margin-bottom: 10px;
}

/* sidebar area */
.sidebar-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end
}

/* cards */
.card {
  width: 100%;
  background: #fbfbfb;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #eee;
  position: relative
}

.card-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: transparent;
  color: var(--danger);
  cursor: pointer
}

/* controls stack at bottom of sidebar */
.controls-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end
}

.controls-stack button {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer
}

.controls-stack button.btn.save {
  background: var(--accent-2);
  color: #fff;
  border: none
}

.controls-stack button.btn.danger {
  background: var(--danger);
  color: #fff;
  border: none
}

/* small helpers */
.small {
  font-size: 13px;
  color: var(--muted)
}

/* responsive */
@media (max-width:980px) {
  .top-row {
    grid-template-columns: 1fr 1fr;
  }

  .main-and-sidebar {
    grid-template-columns: 1fr;
  }

  .sidebar-area {
    align-items: stretch
  }
}

/* === PATCH: softer blue focus styling for inputs & buttons === */

/* remove the ugly black outline everywhere */
input:focus,
button:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* apply the light-blue highlight like GitHub */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 122, 237, 0.15);
}

/* optional: subtle version for buttons */
button:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 122, 237, 0.1);
}

/* === POLISH: subtle motion + smooth transitions === */

/* fade-in the dashboard on load */
.dashboard {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* pill items appear with a slide-up when created */
li.quickLinksList {
  animation: slideUp 0.35s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* plus button bounce on hover */
#addQuickLinkButton.plus {
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

#addQuickLinkButton.plus:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 24px rgba(31, 122, 237, 0.25);
}

/* clock pulse every second (tiny scale flicker) */
#timeText {
  transition: transform 0.1s ease;
}

#timeText.pulse {
  transform: scale(1.05);
}

/* cards fade in when loaded */
.card {
  animation: cardFade 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes cardFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* hover transitions for interactive elements */
button,
input,
a,
li.quickLinksList {
  transition: all 0.2s ease;
}

/* === INTERACTIVE POLISH: quick link pills come alive === */

/* Base style for quick link items */
li.quickLinksList {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f8fbff;
  border: 1px solid #e2e8f0;
  font-weight: 600;
  font-size: 14px;
  color: #0b1220;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

/* Slightly darker text color for normal state */
li.quickLinksList a {
  text-decoration: none;
  color: #1e293b;
  transition: color 0.25s ease;
}

/* Fake little icon (you can replace this with actual ones later) */
li.quickLinksList::before {
  content: "↗";
  font-size: 13px;
  color: var(--accent);
  opacity: 0.8;
  transform: translateY(2px);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hover effect: lift up slightly, brighter shadow, accent border */
li.quickLinksList:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(31, 122, 237, 0.18);
  border-color: var(--accent);
}

li.quickLinksList:hover a {
  color: var(--accent);
}

li.quickLinksList:hover::before {
  transform: translateY(-1px) scale(1.1);
  opacity: 1;
}

/* Click/active effect: quick snap down (like button press) */
li.quickLinksList:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
  transition: all 0.1s ease;
}

.removeQuickLinkButton {
  margin-left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffe4e6;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #fecaca;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  cursor: pointer;
}

.removeQuickLinkButton:hover {
  background: #fecaca;
  transform: scale(1.1);
}

.removeQuickLinkButton:active {
  transform: scale(0.9);
  background: #fca5a5;
}