/* ============================================================================
   calendar-views.css — Calendar for Jira screens drawn as live HTML on
   /jira-calendar (by /assets/js/calendar-views.js). Builds on the frame, stage
   and shared `.wv-` parts in workhub-views.css; load it after that file.
   ============================================================================ */

.wv[data-wv="calendar"]   { aspect-ratio: 1000 / 548; }
.wv[data-wv="colors"]     { aspect-ratio: 820 / 560; }
.wv[data-wv="issuepanel"] { aspect-ratio: 820 / 452; }
.wv[data-wv="jsm"]        { aspect-ratio: 860 / 520; }
.wv[data-wv="timeline"]   { aspect-ratio: 1040 / 520; }
.wv.wv-ready[data-wv] { aspect-ratio: auto; }

.wv-click { cursor: pointer; }

/* ------------------------------------------------------- Month calendar -- */
.wv-cal-top { padding: 12px 16px; border-bottom: 1px solid var(--wv-line); }
.wv-cal-filters { padding: 8px 16px; border-bottom: 1px solid var(--wv-line); background: #FAFBFC; }
.wv-cal-filters small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--wv-sub); }
.wv-qf {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border: 1px solid var(--c); border-radius: 3px; color: var(--c);
  font-size: 11px; background: #fff; cursor: pointer;
}
.wv-qf.is-on { background: var(--c); color: #fff; font-weight: 600; }
.wv-cal-body { display: flex; }
.wv-cal-side { flex: none; width: 168px; padding: 14px 8px 0 14px; border-right: 1px solid var(--wv-line); }
.wv-cal-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 3px; font-size: 11.5px; cursor: pointer; }
.wv-cal-item:hover { background: var(--wv-soft); }
.wv-cal-item i { flex: none; width: 11px; height: 11px; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.wv-cal-item span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wv-cal-item.is-off { color: #97A0AF; }
.wv-cal-item.is-off i { background: #fff; }
.wv-cal-main { flex: 1 1 auto; min-width: 0; padding: 10px 14px 14px; }
.wv-month-title { font-size: 16px; font-weight: 500; text-align: center; }
.wv-month { margin-top: 8px; border: 1px solid var(--wv-line); border-top: 0; }
.wv-dows { display: flex; border-top: 1px solid var(--wv-line); }
.wv-dows span { flex: 1 1 0; padding: 4px 0; text-align: center; font-size: 11px; font-weight: 700; border-right: 1px solid var(--wv-line); }
.wv-dows span:last-child, .wv-mcell:last-child { border-right: 0; }
.wv-mweek {
  position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 20px; grid-auto-rows: auto; row-gap: 2px; align-content: start;
  padding-bottom: 4px; border-top: 1px solid var(--wv-line);
}
.wv-mcells { position: absolute; inset: 0; display: flex; }
.wv-mcell { flex: 1 1 0; padding: 3px 6px; text-align: right; font-size: 11px; font-weight: 600; border-right: 1px solid var(--wv-line); }
.wv-mcell.is-other { color: #B3BAC5; background: #F7F8F9; }
.wv-mcell small { float: left; font-size: 9.5px; font-weight: 600; color: #97A0AF; }
/* Text flows inline so a long title wraps onto more lines and the bar grows. */
.wv-mev {
  position: relative; z-index: 1; align-self: start; margin: 0 2px; padding: 2px 5px; border-radius: 3px;
  background: var(--c); color: #fff; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere;
}
.wv-mev > * { margin-right: 3px; vertical-align: middle; }
.wv-mev .wv-badge { display: inline-block; }
.wv-mev.is-cont { border-radius: 0 3px 3px 0; }
.wv-mev.is-dark { color: #172B4D; }
.wv-mev[data-drag] { cursor: grab; touch-action: pan-y; }
.wv-mev[data-ev] { cursor: pointer; }
.wv-mev[data-drag]:hover, .wv-mev[data-ev]:hover { filter: brightness(1.08); }
.wv-mev.is-dragging { cursor: grabbing; z-index: 3; box-shadow: 0 6px 14px rgba(23, 43, 77, 0.35); }
.wv-mev.is-open { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4C6FBF; }
.wv-mev b { font-weight: 700; white-space: nowrap; }
.wv-mev .wv-ico { width: 11px; height: 11px; }
.wv-badge {
  flex: none; padding: 0 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.92);
  color: #172B4D; font-size: 7.5px; font-weight: 800; letter-spacing: 0.03em; line-height: 12px;
}

/* --------------------------------------------------- Conditional colors -- */
.wv-cc { padding: 20px 22px 18px; }
.wv-cc .wv-card { margin-top: 12px; padding: 14px 16px; }
.wv-cc label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.wv-cc label::after { content: " *"; color: #DE350B; }
.wv-swatch { flex: none; width: 17px; height: 17px; border-radius: 3px; background: var(--c); }
.wv-code {
  display: inline-block; margin: 7px 0 0 34px; padding: 4px 8px; border-radius: 3px; background: var(--wv-soft);
  font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px;
}
.wv-rule { transition: background 0.2s ease; }
.wv-rule-name { font-size: 13px; font-weight: 700; }
.wv-rule-meta { margin: 6px 0 0 34px; font-size: 11px; color: #344563; }
.wv-star { font-size: 15px; line-height: 1; color: #E2B203; cursor: pointer; }
.wv-star.is-off { color: #C1C7D0; }
.wv-tool { width: 22px; text-align: center; font-size: 14px; color: #344563; cursor: pointer; }
.wv-tool.is-off { color: #C1C7D0; cursor: default; }

/* ------------------------------------------------------------ Issue panel -- */
.wv-ip { padding: 16px 26px 22px 44px; }
.wv-ip-crumbs { font-size: 11.5px; color: #44546F; }
.wv-ip h4 { margin: 8px 0 0; font-size: 21px; font-weight: 600; color: var(--wv-ink); }
.wv-ip h5 { margin: 20px 0 6px; font-size: 14px; font-weight: 600; color: var(--wv-ink); }
.wv-ip p { margin: 0; font-size: 12.5px; color: #172B4D; }
.wv-ip-muted { color: #626F86 !important; }
.wv-ip-table { margin: 6px 0 0 14px; }
.wv-ip-tr { display: grid; grid-template-columns: 110px 1fr 200px 60px 60px; align-items: center; height: 29px; font-size: 12.5px; }
.wv-ip-tr.is-head { height: 26px; font-size: 11px; font-weight: 700; color: #44546F; border-bottom: 2px solid var(--wv-line); }
.wv-ip-table { border-bottom: 2px solid var(--wv-line); }
.wv-count { display: inline-block; padding: 0 7px; border-radius: 3px; background: #DCDFE4; font-size: 11px; font-weight: 600; }
.wv-ip .wv-link { cursor: pointer; font-weight: 500; color: #44546F; }
.wv-ip .wv-link:hover { color: #0C66E4; text-decoration: underline; }

/* -------------------------------------------------------------- JSM portal -- */
.wv-jsm { position: relative; padding: 14px 16px 16px; }
.wv-jsm-legend { display: flex; gap: 16px; margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid var(--wv-line); font-size: 11.5px; }
.wv-jsm-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--c); vertical-align: -1px; }
.wv-seg--dark span.is-on { background: #172B4D; }
.wv-dd { position: relative; }
.wv-dd-menu {
  position: absolute; top: 34px; left: 0; z-index: 6; min-width: 100%; padding: 4px 0;
  background: #fff; border-radius: 4px; box-shadow: 0 4px 14px rgba(9, 30, 66, 0.25), 0 0 0 1px rgba(9, 30, 66, 0.08);
}
.wv-dd-menu span { display: block; padding: 6px 12px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.wv-dd-menu span:hover { background: #E9F2FF; color: #0C66E4; }
.wv-jsm .wv-month { margin-top: 12px; }
.wv-jsm .wv-dows span { padding: 8px 0; color: #44546F; }
.wv-list-row { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-top: 1px solid var(--wv-line); font-size: 12px; cursor: pointer; }
.wv-list-row:hover { background: var(--wv-soft); }
.wv-list-row b { width: 130px; }
.wv-list-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.wv-evpop {
  position: absolute; left: 50%; top: 205px; z-index: 4; width: 290px; margin-left: -145px;
  background: #fff; border-radius: 8px; box-shadow: 0 10px 34px rgba(9, 30, 66, 0.35), 0 0 0 1px rgba(9, 30, 66, 0.08);
}
.wv-evpop-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--wv-line); font-size: 14px; font-weight: 700; }
.wv-evpop-head i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.wv-evpop-body { display: grid; grid-template-columns: 80px 1fr; gap: 9px 0; padding: 14px 16px 18px; font-size: 12px; }
.wv-evpop-body span:nth-child(odd) { color: #626F86; }

/* ---------------------------------------------------------------- Timeline -- */
.wv-tl { display: flex; }
.wv-tl-side { flex: none; width: 160px; padding: 12px 8px; border-right: 1px solid var(--wv-line); }
.wv-tl-side > b, .wv-tl-plan > b { display: block; padding: 0 6px 8px; font-size: 12px; }
.wv-tl-check { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 3px; font-size: 11.5px; cursor: pointer; }
.wv-tl-check.is-on { background: #DEEBFF; }
.wv-tl-check u { flex: none; width: 12px; height: 12px; border: 1.5px solid #8590A2; border-radius: 2px; background: #fff; }
.wv-tl-check u { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.wv-tl-check.is-on u { border-color: #0C66E4; background: #0C66E4; }
.wv-tl-check.is-on u::after { content: "✓"; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; }
.wv-tl-check i { flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.wv-tl-main { flex: 1 1 auto; min-width: 0; }
.wv-tl-bar { padding: 10px 12px; border-bottom: 1px solid var(--wv-line); }
.wv-tl-bar .wv-btn { height: 26px; font-size: 11.5px; }
.wv-tl-grid { margin: 10px 12px 12px; border: 1px solid var(--wv-line); }
.wv-tl-grid .wv-grid-side { width: 138px; }
.wv-tl-grid .wv-grid-row:first-child { border-top: 0; }
.wv-tl-day { flex: 1 1 0; padding: 7px 6px; font-size: 10.5px; border-right: 1px solid var(--wv-line); white-space: nowrap; overflow: hidden; }
.wv-tl-day:last-child { border-right: 0; }
.wv-tl-day.is-today { color: #0C66E4; font-weight: 600; }
.wv-tl-group { background: #F1F2F4; }
.wv-tl-group .wv-grid-side { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; font-size: 11px; font-weight: 700; }
.wv-tl-group .wv-grid-side i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.wv-tl-group .wv-grid-side small { font-size: 8px; font-weight: 600; letter-spacing: 0.06em; color: #626F86; }
.wv-tl-name { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 10px; font-size: 11px; white-space: nowrap; overflow: hidden; }
.wv-tl-name .wv-avatar { width: 18px; height: 18px; font-size: 9px; background: #0C4FC4; }
.wv-tl-ev {
  position: absolute; display: flex; align-items: center; gap: 4px; height: 19px; padding: 0 6px;
  border-radius: 2px; background: var(--c); color: #fff; font-size: 9.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; cursor: grab; touch-action: pan-y;
}
.wv-tl-ev span { overflow: hidden; text-overflow: ellipsis; }
.wv-tl-ev .wv-ico { width: 10px; height: 10px; }
.wv-tl-ev.is-dragging { cursor: grabbing; z-index: 3; box-shadow: 0 6px 14px rgba(23, 43, 77, 0.35); }
.wv-tl-ev.is-new { animation: wv-pop-in 0.5s ease; }
@keyframes wv-pop-in { from { transform: scale(0.6); opacity: 0; } }
.wv-tl-plan { flex: none; width: 196px; padding: 12px 10px; border-left: 1px solid var(--wv-line); }
.wv-tl-plan .wv-hint { margin: 8px 0 2px; }
.wv-tl-plan .wv-input { white-space: nowrap; overflow: hidden; }
.wv-tl-issue {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px;
  border: 1px solid var(--wv-line); border-radius: 4px; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wv-tl-issue:hover { border-color: #0C66E4; box-shadow: 0 2px 6px rgba(12, 102, 228, 0.18); }
.wv-tl-issue b { display: block; font-size: 10px; color: #0C66E4; }
.wv-tl-issue span { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-tl-issue .wv-badge { background: #DCDFE4; }