/*
 * Authoritative hosted schedule layout.
 *
 * The rules in this file intentionally own the complete Gantt workspace.
 * Earlier hosted styles may define general controls and non-schedule pages, but
 * they must not decide pane geometry, scrolling, sticky headers, row states, or
 * timeline layering. Keep this file last in projects.html.
 */

.hosted-schedule-panel {
  --hosted-header-height: 72px;
  --hosted-row-height: 39px;
  --hosted-name-width: 300px;
  --hosted-name-pane-width: 430px;
  --hosted-table-width: 58%;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Portal navigation must win over the workspace's normal display mode. */
.hosted-schedule-panel.hidden {
  display: none !important;
}

.hosted-schedule-split {
  display: grid !important;
  grid-template-columns: minmax(0, var(--hosted-table-width)) 10px minmax(360px, 1fr) !important;
  height: calc(100vh - 420px) !important;
  min-height: 320px !important;
  border-top: 0 !important;
  overflow: hidden !important;
}

.hosted-schedule-panel[data-layout="three"] .hosted-schedule-split {
  grid-template-columns:
    minmax(250px, var(--hosted-name-pane-width)) 9px
    minmax(260px, 1fr) 10px
    minmax(360px, 1fr) !important;
}

.hosted-pinned-pane,
.hosted-activity-table,
.hosted-gantt {
  box-sizing: border-box;
  height: 100% !important;
  min-width: 0;
  overflow: auto !important;
  overscroll-behavior: contain;
  background: #fff;
}

/* The Gantt owns the visible vertical scrollbar. The other panes still remain
   scroll containers so their sticky headers are reliable when scrollTop is
   synchronized by projects-parity.js. */
.hosted-pinned-pane,
.hosted-activity-table {
  scrollbar-width: auto !important;
}
.hosted-pinned-pane::-webkit-scrollbar:vertical,
.hosted-activity-table::-webkit-scrollbar:vertical {
  width: 0 !important;
}

.hosted-pinned-pane::-webkit-scrollbar:horizontal,
.hosted-activity-table::-webkit-scrollbar:horizontal,
.hosted-gantt::-webkit-scrollbar:horizontal { height: 15px !important; }
.hosted-pinned-pane::-webkit-scrollbar-thumb,
.hosted-activity-table::-webkit-scrollbar-thumb,
.hosted-gantt::-webkit-scrollbar-thumb { background: #8b98a6; border: 2px solid #f3f5f7; border-radius: 8px; }
.hosted-pinned-pane::-webkit-scrollbar-track,
.hosted-activity-table::-webkit-scrollbar-track,
.hosted-gantt::-webkit-scrollbar-track { background: #f3f5f7; }
.hosted-gantt { scrollbar-width: auto !important; }
.hosted-schedule-panel[data-layout="two"] .hosted-activity-table .hosted-edit-hint {
  display: grid !important;
}
.hosted-edit-hint { border: 0 !important; padding: 0 !important; min-width: 0 !important; }
.hosted-edit-hint:focus-visible { opacity: 1 !important; outline: 2px solid #087d72; }

.progress-track > progress {
  display: block; width: 100%; height: 12px; border: 0;
  appearance: none; background: #e7edf3; accent-color: #5e7892;
}
.progress-track > progress::-webkit-progress-bar { background: #e7edf3; border-radius: 6px; }
.progress-track > progress::-webkit-progress-value { background: #5e7892; border-radius: 6px; }
.progress-track > progress::-moz-progress-bar { background: #5e7892; border-radius: 6px; }
.progress-track > progress[value="100"]::-webkit-progress-value { background: #63b8a5; }
.progress-track > progress[value="100"]::-moz-progress-bar { background: #63b8a5; }
.hosted-workflow-grid .workflow-check[aria-pressed="true"] { color: #fff !important; }
.hosted-health-view .hosted-health-row,
.hosted-executive-report .hosted-report-action-list button,
.hosted-executive-report .hosted-report-upcoming button {
  background: #fff !important; color: #17263b !important;
}
.hosted-health-view .hosted-health-row:hover,
.hosted-executive-report .hosted-report-action-list button:hover,
.hosted-executive-report .hosted-report-upcoming button:hover { background: #f1f8f5 !important; }
#hostedHealthUpcoming .hosted-health-row > strong { color: #52657b; }
.milno-header-menus details > div > button {
  display: grid; gap: 4px; text-align: left;
  background: #fff !important; color: #243654 !important;
}
.milno-header-menus details > div > button:hover { background: #f1f8f5 !important; }
.milno-header-menus details > div > button > small {
  display: block; white-space: normal; font-size: 11px; font-weight: 400; color: #52657b;
}
.hosted-command-dialog { width: min(620px, calc(100vw - 40px)); max-height: calc(100vh - 40px); box-sizing: border-box; padding: 26px; border: 0; border-radius: 14px; color: #243654; background: #fff; }
.hosted-command-dialog::backdrop { background: #18263c80; }
.hosted-command-dialog form { display: grid; gap: 14px; padding: 0; }
.hosted-command-dialog .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hosted-command-dialog label { min-width: 0; }
.hosted-command-dialog [hidden] { display: none !important; }
.hosted-command-dialog input, .hosted-command-dialog select { min-width: 0; width: 100%; box-sizing: border-box; }
.hosted-command-dialog label { display: grid; gap: 5px; }
.hosted-command-dialog h2,.hosted-command-dialog p { margin: 0; }
.hosted-command-dialog menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0; margin: 8px 0 0; }
.hosted-command-dialog .close { position: absolute; top: 14px; right: 14px; }
.hosted-pinned-pane::-webkit-scrollbar, .hosted-activity-table::-webkit-scrollbar { width: 0 !important; height: 15px !important; }
.hosted-gantt::-webkit-scrollbar { width: 15px !important; height: 15px !important; }
#hostedCommandNotice { margin: 0 0 12px; padding: 10px 14px; background: #eaf6f1; color: #245449; border: 1px solid #b9dacf; border-radius: 8px; }

.hosted-pinned-pane { display: none; }
.hosted-pinned-resizer { display: none; }
.hosted-schedule-panel[data-layout="three"] .hosted-pinned-pane,
.hosted-schedule-panel[data-layout="three"] .hosted-pinned-resizer { display: block; }

.hosted-activity-table table,
.hosted-pinned-pane table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.hosted-activity-table thead,
.hosted-pinned-pane thead { position: static !important; }

.hosted-activity-table thead th,
.hosted-pinned-pane thead th {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  z-index: 80 !important;
  box-sizing: border-box;
  height: var(--hosted-header-height) !important;
  background: #eef3f0 !important;
  color: #526278;
}

/* A header belongs to its pane. It must never remain pinned while that pane
   scrolls horizontally. */
.hosted-schedule-panel[data-layout="two"] .hosted-activity-table thead th:nth-child(1),
.hosted-schedule-panel[data-layout="two"] .hosted-activity-table thead th:nth-child(2) {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  z-index: 80 !important;
}

.hosted-activity-table th,
.hosted-activity-table td,
.hosted-pinned-pane th,
.hosted-pinned-pane td {
  box-sizing: border-box;
  height: var(--hosted-row-height) !important;
  border-right: 1px solid #dce4ea !important;
  border-bottom: 1px solid #e4eaf0 !important;
  background: #fff;
}

.hosted-activity-table th:last-child,
.hosted-activity-table td:last-child { border-right: 0 !important; }

.hosted-schedule-panel[data-layout="three"] .hosted-activity-table th:nth-child(-n+2),
.hosted-schedule-panel[data-layout="three"] .hosted-activity-table tr[data-activity-id] td:nth-child(-n+2) {
  display: none !important;
}

.hosted-pinned-pane th:first-child,
.hosted-pinned-pane td:first-child {
  width: 112px;
  min-width: 112px;
}
.hosted-pinned-pane th:nth-child(2),
.hosted-pinned-pane td:nth-child(2) {
  width: var(--hosted-name-width);
  min-width: var(--hosted-name-width);
}

.hosted-group-row,
.hosted-group-row td,
.hosted-gantt-group { height: var(--hosted-row-height) !important; }
.hosted-group-row td,
.hosted-pinned-pane .hosted-group-row td,
.hosted-gantt-group { background: #e7edf2 !important; }
.hosted-group-row.level-1 td,
.hosted-pinned-pane .hosted-group-row.level-1 td,
.hosted-gantt-group.level-1 { background: #f0f4f6 !important; }

/* In the detail pane, group rows retain a blank aligned strip while the label
   lives in the pinned identity pane. */
.hosted-schedule-panel[data-layout="three"] .hosted-activity-table .hosted-group-row td:first-child {
  display: table-cell !important;
  color: transparent !important;
  background: #e7edf2 !important;
  border-right: 0 !important;
}
.hosted-schedule-panel[data-layout="three"] .hosted-activity-table .hosted-group-row.level-1 td:first-child {
  background: #f0f4f6 !important;
}
.hosted-schedule-panel[data-layout="three"] .hosted-activity-table .hosted-group-row td:first-child * {
  visibility: hidden !important;
}

.hosted-activity-table tbody tr[data-activity-id],
.hosted-pinned-pane tbody tr[data-activity-id],
.hosted-gantt-row { height: var(--hosted-row-height) !important; }

.hosted-activity-table tbody tr[data-activity-id]:hover td,
.hosted-activity-table tbody tr.hosted-row-hover td,
.hosted-pinned-pane tbody tr[data-activity-id]:hover td,
.hosted-pinned-pane tbody tr.hosted-row-hover td,
.hosted-gantt-row.hosted-row-hover { background-color: #eff9f7 !important; }

.hosted-activity-table tr[data-activity-id] td:nth-child(2) { position: relative !important; }
#hostedScheduleWorkspace[data-layout="two"] .hosted-activity-table tr[data-activity-id] td:nth-child(2) { position: relative !important; left: auto !important; }
.hosted-activity-table tr[data-activity-id] input[data-field="name"] {
  box-sizing: border-box;
  width: calc(100% - 34px) !important;
  min-width: 230px;
  border: 1px dashed transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  padding: 4px 7px !important;
}
.hosted-activity-table tr[data-activity-id]:hover input[data-field="name"],
.hosted-activity-table tr[data-activity-id] input[data-field="name"]:focus {
  border-color: #9fb7c5 !important;
  background: #fff !important;
}

/* Both layouts use the same real edit target. The original Details/Remove
   action column stays hidden and the complete editor remains reachable here. */
.hosted-activity-table th:nth-child(12),
.hosted-activity-table td:nth-child(12) { display: none !important; }
.hosted-row-edit { display: none !important; }
.hosted-edit-hint {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  translate: 0 -50%;
  z-index: 65 !important;
  display: grid !important;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px dashed transparent;
  border-radius: 5px;
  color: #087d72 !important;
  background: transparent !important;
  opacity: 0 !important;
  cursor: pointer;
  pointer-events: auto !important;
}
.hosted-activity-table tr[data-activity-id]:hover td:nth-child(2) > .hosted-edit-hint,
.hosted-schedule-panel[data-layout="two"] .hosted-activity-table tr[data-activity-id]:hover td:nth-child(2) .hosted-edit-hint,
.hosted-activity-table tr[data-activity-id] td:nth-child(2) > .hosted-edit-hint:focus,
.hosted-pinned-pane tr[data-activity-id]:hover .hosted-edit-hint,
.hosted-pinned-pane tr.hosted-row-hover .hosted-edit-hint {
  border-color: #9fb7c5;
  background: #fff !important;
  opacity: 1 !important;
}

/* Keep the table's horizontal affordance visible in the two-pane workspace,
   even after returning from the pinned-name layout. */
.hosted-schedule-panel[data-layout="two"] .hosted-activity-table {
  overflow-x: scroll !important;
  scrollbar-gutter: stable;
}
.hosted-schedule-panel[data-layout="two"] .hosted-activity-table::-webkit-scrollbar:horizontal {
  height: 12px;
}

.hosted-pinned-pane td { position: relative; }
.hosted-pinned-pane .hosted-name-display {
  display: inline-block;
  padding: 5px 34px 5px 8px;
  border: 1px dashed transparent;
  border-radius: 5px;
  background: transparent;
}
.hosted-pinned-pane tr[data-activity-id]:hover .hosted-name-display,
.hosted-pinned-pane tr.hosted-row-hover .hosted-name-display {
  border-color: #9fb7c5;
  background: #fff;
}

.hosted-activity-insert {
  position: absolute !important;
  left: 18px !important;
  bottom: -10px !important;
  z-index: 70 !important;
  display: grid !important;
  place-items: center;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 1px solid #32a99a !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #087d72 !important;
  opacity: 0;
}
.hosted-activity-table tr[data-activity-id]:hover .hosted-activity-insert,
.hosted-pinned-pane tr[data-activity-id]:hover .hosted-activity-insert,
.hosted-activity-insert:focus-visible { opacity: 1; }

.hosted-gantt { position: relative; }
.hosted-gantt-scale {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  height: var(--hosted-header-height) !important;
  min-height: var(--hosted-header-height) !important;
  background: #e8eef3 !important;
}
.hosted-gantt-rows { position: relative; background: #fff !important; }
.hosted-gantt-row {
  position: relative;
  z-index: 1 !important;
  background-color: #fff;
}
.hosted-gantt-row:not(.hosted-gantt-group) {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(var(--hosted-week-width, 35px) - 1px),
      #d7e0e9 calc(var(--hosted-week-width, 35px) - 1px),
      #d7e0e9 var(--hosted-week-width, 35px)
    );
}
.hosted-gantt-gridline { display: none !important; }
.hosted-gantt-row:not(.hosted-gantt-group) { background-image: none !important; background-color: transparent; }
.hosted-timeline-grid { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.hosted-timeline-grid path { fill: none; stroke: #d2dce6; stroke-width: 1; }
.hosted-gantt-group { position: relative; z-index: 3 !important; }
.hosted-gantt-links { z-index: 5 !important; }
.hosted-gantt-bar { z-index: 6 !important; }

.hosted-pane-resizer,
.hosted-pinned-resizer {
  position: relative;
  z-index: 95;
  background: #d9e0e7;
  cursor: col-resize;
  touch-action: none;
}
.hosted-pane-resizer span,
.hosted-pinned-resizer span {
  position: absolute;
  inset: 0 3px;
  background: #8fa0ae;
}
.hosted-pane-resizer:hover span,
.hosted-pane-resizer.dragging span,
.hosted-pinned-resizer:hover span,
.hosted-pinned-resizer.dragging span { background: #087d72; }

@media (max-width: 900px) {
  .hosted-schedule-split { height: 560px !important; }
}