/* =========================================================
   PRODUCTIVE WEEK VIEW
   A-013

   Geometry follows the protected A-008 Week reference.
   The protected reference itself remains unchanged.
   ========================================================= */

.week2Top {
  min-height:48px;
  padding:7px 28px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  background:var(--surface);
  border-bottom:1px solid var(--line2);
}

.weekHeadNav {
  min-width:0;

  display:flex;
  align-items:center;
  gap:7px;
}

.week2Top h2 {
  margin:0 0 0 5px;
  min-width:82px;

  font-size:20px;
  line-height:1.15;
  letter-spacing:-.02em;
  text-align:left;
  white-space:nowrap;
}

.weekHeadNav button {
  width:30px;
  height:30px;
  padding:0;

  display:grid;
  place-items:center;

  border:1px solid var(--line);
  border-radius:7px;

  background:var(--surface);
  color:var(--muted);

  font-size:18px;
  line-height:1;

  cursor:pointer;
}

.weekHeadNav button:hover {
  border-color:var(--blue);
  color:var(--blue);
}

.w2Range {
  margin-left:9px;

  color:var(--muted);
  font-size:13px;
  font-weight:650;

  white-space:nowrap;
}

.w2Context {
  flex:0 0 auto;

  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.w2Layout {
  padding:18px 28px 28px;

  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    390px;

  gap:16px;

  align-items:start;
}

.w2Calendar {
  overflow:hidden;

  min-width:0;

  background:var(--surface);

  border:1px solid var(--line);
  border-radius:10px;

  box-shadow:var(--shadow);
}

.w2Right {
  min-width:0;
}


/* =========================================================
   24-HOUR AXIS
   ========================================================= */

.w2AxisRow {
  display:grid;
  grid-template-columns:
    92px
    minmax(0,1fr);

  min-height:40px;

  border-bottom:1px solid var(--line);
}

.w2AxisTitle {
  display:flex;
  align-items:center;
  justify-content:center;

  border-right:1px solid var(--line);

  color:var(--muted);

  font-size:9px;
  font-weight:800;
}

.w2Axis {
  position:relative;

  min-height:40px;

  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(8.333333% - 1px),
      var(--line2) calc(8.333333% - 1px),
      var(--line2) 8.333333%
    );
}

.w2Tick {
  position:absolute;
  top:50%;

  transform:
    translate(
      -50%,
      -50%
    );

  color:var(--muted);

  font-size:8px;
}

.w2Tick.first {
  transform:
    translate(
      0,
      -50%
    );
}

.w2Tick.last {
  transform:
    translate(
      -100%,
      -50%
    );
}


/* =========================================================
   DAY ROW
   ========================================================= */

.w2DayRow {
  display:grid;
  grid-template-columns:
    92px
    minmax(0,1fr);

  border-bottom:1px solid var(--line2);
}

.w2DayRow:last-child {
  border-bottom:0;
}

.w2DayLabel {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  align-content:center;

  gap:4px;

  min-height:62px;
  padding:8px 5px;

  border:0;
  border-right:1px solid var(--line);

  background:var(--surface);
  color:var(--text);

  cursor:pointer;
}

.w2DayLabel:hover {
  background:var(--blueSoft);
}

.w2DayLabel.selectedDay {
  background:var(--blueSoft);

  box-shadow:
    inset 3px 0 0
    var(--blue);
}

.w2DayLabel.currentDay {
  color:var(--blue);
}

.w2Dow,
.w2Month {
  color:var(--muted);

  font-size:8px;
  font-weight:780;
}

.w2DayLabel strong {
  font-size:15px;
}

.w2DayLabel small {
  width:100%;

  color:var(--muted);

  font-size:8px;
  text-align:center;
}


/* =========================================================
   ONE TIMELINE PER DAY
   ========================================================= */

.w2Timeline {
  position:relative;

  height:var(--row-height);
  min-height:62px;

  cursor:pointer;

  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(8.333333% - 1px),
      var(--line2) calc(8.333333% - 1px),
      var(--line2) 8.333333%
    );
}

.w2Timeline.selectedDay {
  background-color:
    rgba(23,105,232,.035);
}

.w2Timeline.currentDay {
  background-color:
    rgba(23,105,232,.022);
}


/* =========================================================
   CONTEST / OPERATING-PERIOD BARS
   ========================================================= */

.w2Event {
  --event-line:#abc5e9;
  --event-bg:#f8fbff;
  --event-accent:#1769e8;

  position:absolute;
  z-index:5;

  left:calc(
    var(--left)
    * 1%
  );

  top:calc(
    8px
    + var(--lane)
    * 34px
  );

  width:calc(
    var(--width)
    * 1%
  );

  min-height:27px;

  box-sizing:border-box;

  padding:4px 5px;

  overflow:hidden;

  border:1px solid var(--event-line);
  border-radius:5px;

  background:var(--event-bg);
  color:var(--text);

  text-align:left;

  cursor:pointer;
}


.w2Event:hover {
  z-index:20;

  border-color:var(--event-accent);
}

.w2Event.selectedContest {
  z-index:21;

  border-color:var(--event-accent);

  box-shadow:
    inset 3px 0 0
    var(--event-accent);
}

.w2EventLabel {
  min-width:0;
}

.w2EventName {
  min-width:0;

  display:flex;
  align-items:center;

  gap:3px;

  font-size:8px;
  line-height:1.15;
  font-weight:760;
}

.w2EventName > span:last-child {
  min-width:0;

  overflow:hidden;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.w2EventTime {
  margin-top:2px;

  color:var(--muted);

  font-size:7px;
  line-height:1.1;

  white-space:nowrap;
}

.w2Star {
  flex:0 0 auto;

  color:#7d8998;
}

.w2Star.featured {
  color:var(--blue);
}


/* =========================================================
   SHORT EVENTS

   The exact proportional bar remains the time object.
   Text may extend outside it, but no wider false-duration
   rectangle is introduced.
   ========================================================= */

.w2Event.compact {
  min-height:30px;

  padding:0;

  overflow:visible;

  border:0;
  border-radius:0;

  background:transparent;

  box-shadow:none;
}

.w2Event.compact::after {
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:5px;

  box-sizing:border-box;

  border:
    1px solid
    var(--event-accent);

  border-radius:3px;

  background:
    color-mix(
      in srgb,
      var(--event-accent) 38%,
      transparent
    );
}

.w2Event.compact::before {
  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:2px;
  height:9px;

  border-radius:2px;

  background:var(--event-accent);
}

.w2Event.compact .w2EventLabel {
  position:absolute;

  left:0;
  top:0;

  width:max-content;
  max-width:none;

  padding:0;

  overflow:visible;

  border:0;
  background:transparent;

  color:var(--text);
}

.w2Event.compact .w2EventName,
.w2Event.compact .w2EventName > span:last-child {
  width:max-content;
  max-width:none;

  overflow:visible;

  white-space:nowrap;
  text-overflow:clip;
}

.w2Event.compact .w2EventTime {
  display:block;

  margin-top:1px;

  white-space:nowrap;
}

/*
  Near the right edge of the 24-hour axis the readable label
  extends to the left instead of overflowing outside the
  calendar. The proportional bar itself is not moved or widened.
*/

.w2Event.compact.edgeRight .w2EventLabel {
  left:auto;
  right:0;

  text-align:right;
}

.w2Event.compact.edgeRight .w2EventName {
  justify-content:flex-end;
}

.w2Event.compact.edgeRight .w2EventTime {
  text-align:right;
}

.w2Event.compact:hover,
.w2Event.compact.selectedContest {
  border:0;
  background:transparent;
  box-shadow:none;
}

.w2Event.compact:hover .w2EventLabel,
.w2Event.compact.selectedContest .w2EventLabel {
  color:var(--event-accent);
}


/* =========================================================
   CURRENT TIME
   ========================================================= */

.w2NowLine {
  position:absolute;

  z-index:30;

  top:0;
  bottom:0;

  width:2px;

  background:var(--blue);

  pointer-events:none;
}

.w2NowLine::before {
  content:"";

  position:absolute;

  left:-3px;
  top:4px;

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--blue);
}

.w2NowLabel {
  position:absolute;

  top:3px;
  left:6px;

  padding:2px 4px;

  border-radius:4px;

  background:var(--blue);
  color:#fff;

  font-size:10px;
  line-height:1.1;
  font-weight:800;

  white-space:nowrap;
}


/* =========================================================
   INITIAL EMPTY STATE
   ========================================================= */

.w2EmptyState {
  min-height:434px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  color:var(--muted);

  font-size:12px;
}


/* =========================================================
   DARK MODE
   ========================================================= */

:root[data-theme="dark"] .w2Event {
  --event-bg:rgba(255,255,255,.035);
}



/* =========================================================
   FIXED DESKTOP WORKSPACE PRINCIPLE
   ========================================================= */

@media (max-width:1200px) {
  .w2Layout {
    grid-template-columns:
      minmax(820px,1fr)
      390px;
  }
}


/* P-002 visible navigation bounds */
#weekPrev:disabled,
#weekNext:disabled {
  visibility: hidden;
  opacity: 0;
  cursor: default !important;
  pointer-events: none;
}