:root {
  /* Core */
  --pm-bg: #ffffff;
  --pm-surface: #ffffff;
  --pm-text: #0b0f14;
  --pm-muted: rgba(11, 15, 20, 0.64);
  --pm-border: rgba(11, 15, 20, 0.10);

  /* Accent: Soft Horizon */
  --pm-accent: #DDE5E7;
  --pm-accent-50: #EEF2F3;
  --pm-accent-25: rgba(221, 229, 231, 0.50);

  --pm-rule: 2px;

  /* Status */
  --pm-success-bg: rgba(34, 197, 94, 0.12);
  --pm-success-text: rgba(11, 15, 20, 0.78);

  /* Typography */
  --pm-font-serif: "IBM Plex Serif", ui-serif, Georgia, serif;
  --pm-font-sans: "Noto Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Sizing & shape */
  --pm-radius-sm: 10px;
  --pm-radius-md: 14px;
  --pm-radius-lg: 18px;
  --pm-shadow: 0 1px 0 rgba(11, 15, 20, 0.04);
  --pm-line: var(--pm-rule);
  --pm-gap: 14px;
  --pm-focus: 2px solid var(--pm-accent);
  --pm-text-muted: var(--pm-muted);
}

body {
  font-family: var(--pm-font-sans);
  background: var(--pm-bg);
  color: var(--pm-text);
  margin: 0;
}

strong {
  font-weight: 500;
}

h1, h2, h3, .atlas-title {
  font-family: var(--pm-font-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.atlas-meta, .meta, small, .text-muted {
  color: var(--pm-muted);
}

body.dashboard {
  padding: 1.5rem;
}

.pm-title {
  font-family: var(--pm-font-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.pm-section-title {
  font-family: var(--pm-font-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.pm-meta {
  font-family: var(--pm-font-sans);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

.pm-rule {
  height: var(--pm-line);
  background: var(--pm-accent-50);
  border-radius: 999px;
  margin: 0 0 1.25rem 0;
}

.pm-rule-tight { margin: 0.6rem 0 0.85rem 0; }

.header-divider, .page-header-divider, hr.header {
  height: var(--pm-rule);
  border: none;
  background: var(--pm-accent-50);
  margin: 10px 0 18px;
}

header hr, .header hr {
  height: var(--pm-rule);
  border: none;
  background: var(--pm-accent-50);
}

.pm-section-title::after {
  content: "";
  display: block;
  height: var(--pm-rule);
  background: var(--pm-accent-50);
  margin-top: 8px;
  margin-bottom: 12px;
  width: 100%;
}

/* Header (product-style) */
header.app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  flex-wrap: nowrap;
}

.header-left h1 {
  margin: 0;
  line-height: 1.15;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pm-bug {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: none;
  background-image: url("../img/pm-circle-text.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0;
}

.header-meta {
  margin-top: 0.45rem;
}

.header-meta .meta-muted {
  opacity: 0.7;
}

.header-right {
  flex: 0 0 auto;
}

/* Make logout clearly secondary */
.btn-logout {
  padding: 8px 12px;
  font-weight: 400;
  border-radius: var(--pm-radius-md);
  border: 1px solid var(--pm-border);
  background: var(--pm-accent-50);
  color: var(--pm-text);
}

/* Mobile: stack cleanly, keep logout compact */
@media (max-width: 600px) {
  header.app-header {
    align-items: flex-start;
  }

  .header-left {
    min-width: 0; /* allows text truncation */
    flex: 1 1 auto;
  }

  /* Prevent the email from making the header feel huge */
  .header-meta .small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .btn-logout {
    padding: 8px 10px;
    min-height: 40px; /* slightly smaller than primary controls */
  }
}

.dashboard .card {
  background: var(--pm-surface);
  padding: 1.25rem;
  border-radius: var(--pm-radius-md);
  border: 1px solid var(--pm-border);
  box-shadow: var(--pm-shadow);
  margin-bottom: 1rem;
}

.dashboard h1 {
  font-size: 1.35rem;
  margin: 0;
  font-family: var(--pm-font-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.dashboard h2 {
  font-size: 1.05rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-family: var(--pm-font-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.dashboard h3 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem 0;
  font-family: var(--pm-font-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.flash {
  padding: 0.5rem 0.75rem;
  border-radius: var(--pm-radius-sm);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  border: 1px solid var(--pm-border);
  background: var(--pm-accent-50);
  color: var(--pm-text);
}
.flash.success { background: var(--pm-success-bg); color: var(--pm-success-text); }
.flash.danger  { background: rgba(11, 15, 20, 0.04); color: var(--pm-text); }
.flash.info    { background: var(--pm-accent-50); color: var(--pm-text); }
.flash.warning { background: var(--pm-accent-50); color: var(--pm-text); }

.dashboard .small { font-size: 0.85rem; color: var(--pm-text-muted); }
.dashboard .tiny { font-size: 0.8rem; color: var(--pm-text-muted); }
.dashboard .divider { height: var(--pm-line); background: var(--pm-accent-50); margin: 0.9rem 0; }

.dashboard label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: var(--pm-text);
  font-family: var(--pm-font-sans);
}
.dashboard select,
.dashboard input[type="text"] {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: var(--pm-radius-sm);
  border: 1px solid var(--pm-border);
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
  background: var(--pm-surface);
  color: var(--pm-text);
}
.dashboard input::placeholder {
  color: var(--pm-text-muted);
}
.dashboard button {
  padding: 0.45rem 0.95rem;
  border-radius: var(--pm-radius-md);
  border: 1px solid transparent;
  background: var(--pm-text);
  color: #fff;
  font-weight: 400;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1;
}
.dashboard button.secondary {
  background: var(--pm-accent-50);
  color: var(--pm-text);
  border-color: var(--pm-border);
  font-weight: 400;
}
.dashboard button.danger,
.dashboard button.btn-danger {
  background: var(--pm-accent-50);
  color: var(--pm-text);
  border: 1px solid var(--pm-border);
}
.dashboard button:disabled { opacity: 0.45; cursor: not-allowed; }
.dashboard button:hover { opacity: 0.92; }
.dashboard button:not(.secondary):not(.danger):not(.btn-danger):hover {
  box-shadow: inset 0 0 0 1px var(--pm-accent-50);
}
.dashboard button.danger:hover,
.dashboard button.btn-danger:hover { background: rgba(11, 15, 20, 0.06); }
.dashboard button:focus-visible,
.dashboard select:focus-visible,
.dashboard input[type="text"]:focus-visible {
  outline: var(--pm-focus);
  outline-offset: 2px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: var(--pm-focus);
  outline-offset: 2px;
}

input, select, textarea {
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-sm);
  background: #fff;
}

.btn-primary:hover,
button.primary:hover {
  box-shadow: inset 0 0 0 1px var(--pm-accent-50);
}

.btn-secondary, button.secondary {
  background: var(--pm-accent-50);
  border: 1px solid var(--pm-border);
  color: var(--pm-text);
}

.status-pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 400;
  border: 1px solid var(--pm-border);
  background: var(--pm-accent-50);
  color: var(--pm-text);
  vertical-align: middle;
  margin-right: 0.35rem;
}
.status-active { background: var(--pm-accent-50); color: var(--pm-text); border-color: var(--pm-border); }
.status-scheduled { background: var(--pm-accent-50); color: var(--pm-text); border-color: var(--pm-border); }
.status-ended { background: var(--pm-accent-50); color: var(--pm-text); border-color: var(--pm-border); }

/* ===== Status card hero treatment ===== */
#statusCard {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pm-border);
  box-shadow: var(--pm-shadow);
}

/* Left accent bar */
#statusCard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pm-accent);
}

/* State-based accents (set by JS on #statusCard) */
#statusCard.status-ended::before { background: var(--pm-accent-50); }
#statusCard.status-active::before { background: var(--pm-accent); }
#statusCard.status-covering::before { background: var(--pm-accent); }
#statusCard.status-scheduled::before { background: var(--pm-accent); }

/* Make the header line feel more "product" */
#statusCard h2 {
  margin-bottom: 0.75rem;
}

/* Make the summary read better */
#statusSummary {
  font-size: 1.02rem; /* slightly larger than other "small" blocks */
}

#statusSummary .status-pill {
  font-size: 0.9rem;
  padding: 0.35rem 0.75rem;
}

/* Better CTA spacing if a button is injected into summary */
#statusSummary form {
  margin-top: 0.9rem;
}

@media (max-width: 600px) {
  #statusSummary { font-size: 0.9rem; }
  #statusSummary .status-pill { font-size: 0.95rem; }
  #statusSummary .status-pill {
    display: block;
    margin-right: 0; /* stop the tight inline layout */
    margin-bottom: 0.6rem; /* creates breathing room */
    text-align: center;
  }

  /* Ensure the text wraps under the pill cleanly */
  #statusSummary {
    display: block;
  }
}

/* NEW layout: top row two columns on desktop, stack on mobile */
.top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pm-gap);
  align-items: start;
}
@media (max-width: 980px) {
  .top-row { grid-template-columns: 1fr; }
  body.dashboard { padding: 1rem; }
}

/* Calendar */
.calendar-wrap { user-select: none; }
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.cal-month {
  font-family: var(--pm-font-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.cal-nav { display: flex; gap: 0.4rem; }
.cal-nav button {
  padding: 0.35rem 0.6rem;
  border-radius: var(--pm-radius-md);
  background: var(--pm-accent-50);
  color: var(--pm-text);
  border: 1px solid var(--pm-border);
  font-weight: 400;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
.cal-dow {
  font-size: 0.72rem;
  color: var(--pm-text-muted);
  text-align: center;
  padding: 0.25rem 0;
}
.cal-day {
  position: relative;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-sm);
  min-height: 44px;
  background: var(--pm-surface);
  padding: 0.35rem 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.cal-day:hover { border-color: var(--pm-text-muted); }
.cal-day.muted { opacity: 0.45; }
.cal-day.selected {
  outline: 2px solid var(--pm-accent);
  outline-offset: 0;
  border-color: transparent;
  box-shadow: none;
}
.cal-day.today { border-color: var(--pm-accent-50); }
.cal-num { font-size: 0.85rem; font-weight: 400; }
.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--pm-text-muted);
  align-self: center;
  margin-top: 0.25rem;
}
.cal-day.today .cal-dot { background: var(--pm-accent-25); }

/* Events list */
.events-header-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.events-title { font-weight: 300; }
.events-subtitle { font-size: 0.9rem; color: var(--pm-text-muted); }
.table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.table th, .table td {
  text-align: left;
  font-size: 0.9rem;
  padding: 0.6rem 0.45rem;
  vertical-align: middle;
  color: var(--pm-text);
  font-family: var(--pm-font-sans);
}
.table td { word-break: break-word; }
.table th {
  font-size: 0.78rem;
  color: var(--pm-text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  border-bottom: none;
}
.table thead tr { border-bottom: 1px solid var(--pm-accent-50); }
.table tbody tr { border-bottom: 1px solid var(--pm-border); }
.row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; flex-wrap: wrap; }
.link-btn {
  background: var(--pm-accent-50);
  color: var(--pm-text);
  border: 1px solid var(--pm-border);
  padding: 0.32rem 0.55rem;
  border-radius: var(--pm-radius-md);
  font-weight: 400;
  font-size: 0.84rem;
}
.link-btn.danger {
  background: var(--pm-accent-50);
  border-color: var(--pm-border);
  color: var(--pm-text);
}

/* Table responsiveness */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .table { min-width: 640px; }

/* Mobile/iPhone usability */
@media (max-width: 560px) {
  body.dashboard { padding: 0.75rem; }
  header { align-items: flex-start; }
  .dashboard h1 { font-size: 1.15rem; }
  .dashboard .card { padding: 1rem; border-radius: var(--pm-radius-md); }
  .dashboard select,
  .dashboard input[type="text"] { font-size: 1rem; padding: 0.6rem 0.7rem; }
  .dashboard button { font-size: 1rem; padding: 0.6rem 1.05rem; }
  .row-actions { justify-content: flex-start; }
  .link-btn { padding: 0.5rem 0.75rem; border-radius: var(--pm-radius-md); }
  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (max-width: 600px) {
  .pm-bug {
    width: 26px;
    height: 26px;
  }
  .header-brand { gap: 0.6rem; }
}

.dashboard details summary {
  cursor: pointer;
  font-weight: 400;
  color: var(--pm-text);
  margin-bottom: 0.6rem;
  font-family: var(--pm-font-sans);
}

/* Notices */
.notice {
  border: 1px solid var(--pm-border);
  background: var(--pm-accent-50);
  padding: 0.65rem 0.75rem;
  border-radius: var(--pm-radius-md);
  font-size: 0.88rem;
  color: var(--pm-text);
  margin-bottom: 0.75rem;
}
.notice.warn { border-color: var(--pm-border); background: var(--pm-accent-50); color: var(--pm-text); }
.notice.danger { border-color: var(--pm-border); background: var(--pm-accent-50); color: var(--pm-text); }

.toast {
  position: fixed;
  bottom: 18px;
  right: 18px;
  max-width: 420px;
  background: var(--pm-text);
  color: #fff;
  padding: 0.75rem 0.9rem;
  border-radius: var(--pm-radius-md);
  box-shadow: var(--pm-shadow);
  font-size: 0.9rem;
  display: none;
  z-index: 9999;
}

/* Mobile: collapse create coverage by default; desktop: show open */
@media (min-width: 981px) {
  details#createDetails:not([open]) > summary { display: none; }
  details#createDetails { border: none; }
  details#createDetails[open] > summary { display: none; }
}

/* --- Flatpickr: normalize to match other controls (esp. mobile) --- */
.flatpickr-input {
  width: 92% !important;
  max-width: 100% !important;
  display: block !important;

  /* make it look like your other inputs */
  font-size: inherit !important;
  line-height: 1.25 !important;
  min-height: 48px; /* match your other controls */
  padding: 12px 14px !important;

  border-radius: var(--pm-radius-sm); /* match your "card/control" radius */
  border: 1px solid var(--pm-border) !important;
  background: var(--pm-surface) !important;
  color: var(--pm-text) !important;
  box-sizing: border-box !important;
  margin: 12px 10px 12px 0;
}

/* If you wrap the picker in a container, force the container full width too */
.flatpickr-wrapper {
  width: 100% !important;
  display: block !important;
}

/* If the input is inside a flex row, prevent it from shrinking */
.flatpickr-wrapper,
.flatpickr-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Optional: make the calendar itself more finger-friendly on mobile */
@media (max-width: 600px) {
  .flatpickr-calendar {
    font-size: 1rem;
  }
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: var(--pm-accent) !important;
  border-color: var(--pm-accent) !important;
  color: var(--pm-text) !important;
}

.flatpickr-day.today {
  border-color: var(--pm-accent) !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month {
  font-family: "IBM Plex Serif", ui-serif, Georgia, serif;
  font-weight: 300;
}

.flatpickr-weekday {
  color: var(--pm-muted) !important;
  font-weight: 400;
}