/* 대시보드 페이지 전용 CSS입니다. 이 파일을 수정하면 대시보드 화면에만 적용됩니다. */
/* 선택자 주석은 어느 화면 요소인지, 속성 주석은 어떤 값을 바꾸는지 설명합니다. */

/* 대시보드: .dashboard-page .dashboard-grid 선택자의 배치 영역에 적용됩니다. */
.dashboard-page .dashboard-grid,
/* 대시보드: .dashboard-layout 선택자의 배치 영역에 적용됩니다. */
.dashboard-layout {
  /* 세로 정렬을 stretch로 맞춥니다. */
  align-items: stretch;
}

/* 대시보드: .home-dashboard 선택자의 화면 요소에 적용됩니다. */
.home-dashboard {

  /* 대시보드 달력 영역이 차지하는 비율입니다. 현재 값은 55입니다. */
  --dashboard-calendar-percent: 55;
  /* 대시보드 달력 영역의 최소 너비입니다. 현재 값은 560px입니다. */
  --dashboard-calendar-min-width: 560px;
  /* 대시보드 오른쪽 카드 영역의 최소 너비입니다. 현재 값은 320px입니다. */
  --dashboard-side-min-width: 320px;
  /* 표시 방식을 grid로 설정합니다. */
  display: grid;
  /* 가로 열 배치를 아래 이어지는 값로 정합니다. */
  grid-template-columns:
    /* 위 속성의 이어지는 값입니다. */
    minmax(var(--dashboard-calendar-min-width), calc(var(--dashboard-calendar-percent) * 1%))
    /* 위 속성의 이어지는 값입니다. */
    minmax(var(--dashboard-side-min-width), 1fr);
  /* 요소 사이 간격을 16px로 줍니다. */
  gap: 16px;
}

/* 대시보드: .home-calendar 선택자의 화면 요소에 적용됩니다. */
.home-calendar {
  /* 그리드에서 차지할 세로 위치를 span 2로 정합니다. */
  grid-row: span 2;
  /* 이 값보다 작아지지 않도록 최소 너비를 0로 지정합니다. */
  min-width: 0;
  /* 안쪽 여백을 18px로 줍니다. */
  padding: 18px;
}

/* 대시보드: .home-card-head 선택자의 카드 영역에 적용됩니다. */
.home-card-head {
  /* 기본 높이를 38px로 지정합니다. */
  height: 38px;
  /* 이 값보다 작아지지 않도록 최소 높이를 38px로 지정합니다. */
  min-height: 38px;
  /* 표시 방식을 flex로 설정합니다. */
  display: flex;
  /* 세로 정렬을 center로 맞춥니다. */
  align-items: center;
  /* 가로 정렬을 center로 맞춥니다. */
  justify-content: center;
  /* 요소 사이 간격을 54px로 줍니다. */
  gap: 54px;
  /* 글자색을 var(--blue-700)로 지정합니다. */
  color: var(--blue-700);
}

/* 대시보드: .month-button 선택자의 화면 요소에 적용됩니다. */
.month-button {
  /* 기본 너비를 34px로 지정합니다. */
  width: 34px;
  /* 기본 높이를 34px로 지정합니다. */
  height: 34px;
  /* 테두리를 0로 지정합니다. */
  border: 0;
  /* 배경을 transparent로 지정합니다. */
  background: transparent;
  /* 글자색을 var(--blue-700)로 지정합니다. */
  color: var(--blue-700);
  /* 글자 크기를 26px로 지정합니다. */
  font-size: 26px;
}

/* 대시보드: .calendar-week 선택자의 화면 요소에 적용됩니다. */
.calendar-week,
/* 대시보드: .calendar-board 선택자의 화면 요소에 적용됩니다. */
.calendar-board {
  /* 표시 방식을 grid로 설정합니다. */
  display: grid;
  /* 가로 열 배치를 repeat(7, minmax(0, 1fr))로 정합니다. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* 대시보드: .calendar-week span 선택자의 화면 요소에 적용됩니다. */
.calendar-week span {
  /* 이 값보다 작아지지 않도록 최소 높이를 28px로 지정합니다. */
  min-height: 28px;
  /* 표시 방식을 flex로 설정합니다. */
  display: flex;
  /* 세로 정렬을 center로 맞춥니다. */
  align-items: center;
  /* 안쪽 여백을 0 8px로 줍니다. */
  padding: 0 8px;
  /* 배경을 #075a9d로 지정합니다. */
  background: #075a9d;
  /* 글자색을 #fff로 지정합니다. */
  color: #fff;
  /* 글자 크기를 13px로 지정합니다. */
  font-size: 13px;
  /* 글자 굵기를 900로 지정합니다. */
  font-weight: 900;
}

/* 대시보드: .calendar-week span:first-child 선택자의 화면 요소에 적용됩니다. */
.calendar-week span:first-child {
  /* 배경을 #b8d923로 지정합니다. */
  background: #b8d923;
}

/* 대시보드: .calendar-cell 선택자의 화면 요소에 적용됩니다. */
.calendar-cell {
  /* 배치 기준을 relative로 설정합니다. */
  position: relative;
  /* 이 값보다 작아지지 않도록 최소 높이를 104px로 지정합니다. */
  min-height: 104px;
  /* 안쪽 여백을 9px로 줍니다. */
  padding: 9px;
  /* 오른쪽 테두리를 1px solid var(--line)로 지정합니다. */
  border-right: 1px solid var(--line);
  /* 아래쪽 테두리를 1px solid var(--line)로 지정합니다. */
  border-bottom: 1px solid var(--line);
  /* 글자색을 #677184로 지정합니다. */
  color: #677184;
  /* 글자 크기를 14px로 지정합니다. */
  font-size: 14px;
}

/* 대시보드: .calendar-cell:nth-child(7n + 1) 선택자의 화면 요소에 적용됩니다. */
.calendar-cell:nth-child(7n + 1) {
  /* 글자색을 #a4c51e로 지정합니다. */
  color: #a4c51e;
}

/* 대시보드: .calendar-cell.muted 선택자의 화면 요소에 적용됩니다. */
.calendar-cell.muted {
  /* 글자색을 #bcc4cf로 지정합니다. */
  color: #bcc4cf;
}

/* 대시보드: .calendar-cell.today 선택자의 화면 요소에 적용됩니다. */
.calendar-cell.today {
  /* 글자색을 #008dee로 지정합니다. */
  color: #008dee;
  /* 글자 굵기를 900로 지정합니다. */
  font-weight: 900;
}

/* 대시보드: .calendar-cell b 선택자의 화면 요소에 적용됩니다. */
.calendar-cell b {
  /* 표시 방식을 block로 설정합니다. */
  display: block;
  /* 기본 너비를 fit-content로 지정합니다. */
  width: fit-content;
  /* 위쪽 바깥 여백을 8px로 줍니다. */
  margin-top: 8px;
  /* 안쪽 여백을 3px 7px로 줍니다. */
  padding: 3px 7px;
  /* 모서리 둥글기를 5px로 지정합니다. */
  border-radius: 5px;
  /* 배경을 #e8f2ff로 지정합니다. */
  background: #e8f2ff;
  /* 글자색을 var(--blue-700)로 지정합니다. */
  color: var(--blue-700);
  /* 글자 크기를 11px로 지정합니다. */
  font-size: 11px;
}

/* 대시보드: .calendar-cell[data-dashboard-date] 선택자의 화면 요소에 적용됩니다. */
.calendar-cell[data-dashboard-date] {
  /* 마우스 커서 모양을 context-menu로 지정합니다. */
  cursor: context-menu;
}

/* 대시보드: .calendar-events 선택자의 화면 요소에 적용됩니다. */
.calendar-events {
  /* 표시 방식을 grid로 설정합니다. */
  display: grid;
  /* 요소 사이 간격을 4px로 줍니다. */
  gap: 4px;
  /* 위쪽 바깥 여백을 7px로 줍니다. */
  margin-top: 7px;
}

/* 대시보드: .calendar-event 선택자의 화면 요소에 적용됩니다. */
.calendar-event {
  /* 이 값보다 커지지 않도록 최대 너비를 100%로 지정합니다. */
  max-width: 100%;
  /* 넘치는 내용 처리 방식을 hidden로 설정합니다. */
  overflow: hidden;
  /* 넘치는 글자 표시 방식을 ellipsis로 설정합니다. */
  text-overflow: ellipsis;
  /* 줄바꿈 처리 방식을 nowrap로 설정합니다. */
  white-space: nowrap;
}

/* 대시보드: .calendar-event.delivery 선택자의 화면 요소에 적용됩니다. */
.calendar-event.delivery {
  /* 배경을 #e8f2ff로 지정합니다. */
  background: #e8f2ff;
  /* 글자색을 var(--blue-700)로 지정합니다. */
  color: var(--blue-700);
}

/* 대시보드: .calendar-event.schedule 선택자의 화면 요소에 적용됩니다. */
.calendar-event.schedule {
  /* 배경을 color-mix(in srgb, var(--event-color, #0d57c8) 16%, #fff)로 지정합니다. */
  background: color-mix(in srgb, var(--event-color, #0d57c8) 16%, #fff);
  /* 글자색을 var(--event-color, #0d57c8)로 지정합니다. */
  color: var(--event-color, #0d57c8);
  /* 테두리를 1px solid color-mix(in srgb, var(--event-color, #0d57c8) 26%, #fff)로 지정합니다. */
  border: 1px solid color-mix(in srgb, var(--event-color, #0d57c8) 26%, #fff);
}

/* 대시보드: .calendar-events small 선택자의 화면 요소에 적용됩니다. */
.calendar-events small {
  /* 글자색을 var(--muted)로 지정합니다. */
  color: var(--muted);
  /* 글자 크기를 11px로 지정합니다. */
  font-size: 11px;
  /* 글자 굵기를 900로 지정합니다. */
  font-weight: 900;
}

/* 대시보드: .dashboard-calendar 선택자의 화면 요소에 적용됩니다. */
.dashboard-calendar,
/* 대시보드: .dashboard-calendar-help 선택자의 화면 요소에 적용됩니다. */
.dashboard-calendar-help {
  /* 이 값보다 작아지지 않도록 최소 너비를 0로 지정합니다. */
  min-width: 0;
}

/* 대시보드: .dashboard-calendar-help 선택자의 화면 요소에 적용됩니다. */
.dashboard-calendar-help {
  /* 바깥 여백을 10px 0 0로 줍니다. */
  margin: 10px 0 0;
  /* 글자색을 var(--muted)로 지정합니다. */
  color: var(--muted);
  /* 글자 크기를 12px로 지정합니다. */
  font-size: 12px;
  /* 글자 굵기를 800로 지정합니다. */
  font-weight: 800;
}

/* 대시보드: .dashboard-loading 선택자의 화면 요소에 적용됩니다. */
.dashboard-loading {
  /* 이 값보다 작아지지 않도록 최소 높이를 180px로 지정합니다. */
  min-height: 180px;
  /* 표시 방식을 grid로 설정합니다. */
  display: grid;
  /* 가로와 세로 정렬을 center로 맞춥니다. */
  place-items: center;
  /* 글자색을 var(--muted)로 지정합니다. */
  color: var(--muted);
  /* 글자 굵기를 900로 지정합니다. */
  font-weight: 900;
}

/* 대시보드: .dashboard-loading.error 선택자의 화면 요소에 적용됩니다. */
.dashboard-loading.error {
  /* 글자색을 #d32727로 지정합니다. */
  color: #d32727;
}

/* 대시보드: .home-notice 선택자의 화면 요소에 적용됩니다. */
.home-notice,
/* 대시보드: .home-summary 선택자의 화면 요소에 적용됩니다. */
.home-summary {
  /* 이 값보다 작아지지 않도록 최소 높이를 224px로 지정합니다. */
  min-height: 224px;
}

/* 대시보드: .home-notice h3 선택자의 카드 제목에 적용됩니다. */
.home-notice h3,
/* 대시보드: .home-summary h3 선택자의 카드 제목에 적용됩니다. */
.home-summary h3 {
  /* 바깥 여백을 0로 줍니다. */
  margin: 0;
  /* 안쪽 여백을 18px 20px로 줍니다. */
  padding: 18px 20px;
  /* 아래쪽 테두리를 1px solid var(--line)로 지정합니다. */
  border-bottom: 1px solid var(--line);
  /* 글자 크기를 18px로 지정합니다. */
  font-size: 18px;
}

/* 대시보드: .simple-table 선택자의 표에 적용됩니다. */
.simple-table {
  /* 안쪽 여백을 18px로 줍니다. */
  padding: 18px;
  /* 넘치는 내용 처리 방식을 auto로 설정합니다. */
  overflow: auto;
}

/* 대시보드: .simple-table table 선택자의 표에 적용됩니다. */
.simple-table table {
  /* 이 값보다 작아지지 않도록 최소 너비를 0로 지정합니다. */
  min-width: 0;
}

/* 대시보드: .simple-table th 선택자의 표 제목칸에 적용됩니다. */
.simple-table th {
  /* 배경을 #f1f3f6로 지정합니다. */
  background: #f1f3f6;
  /* 글자색을 #344054로 지정합니다. */
  color: #344054;
}

/* 대시보드: .simple-table th 선택자의 표 제목칸에 적용됩니다. */
.simple-table th,
/* 대시보드: .simple-table td 선택자의 표 내용칸에 적용됩니다. */
.simple-table td {
  /* 기본 높이를 38px로 지정합니다. */
  height: 38px;
  /* 글자 크기를 13px로 지정합니다. */
  font-size: 13px;
}

/* 대시보드: .dashboard-table 선택자의 표에 적용됩니다. */
.dashboard-table {
  /* 안쪽 여백을 14px 18px 18px로 줍니다. */
  padding: 14px 18px 18px;
}

/* 대시보드: .dashboard-table table 선택자의 표에 적용됩니다. */
.dashboard-table table {
  /* 표 열 계산 방식을 fixed로 설정합니다. */
  table-layout: fixed;
}

/* 대시보드: .dashboard-table td 선택자의 표 내용칸에 적용됩니다. */
.dashboard-table td {
  /* 줄바꿈 처리 방식을 nowrap로 설정합니다. */
  white-space: nowrap;
  /* 넘치는 내용 처리 방식을 hidden로 설정합니다. */
  overflow: hidden;
  /* 넘치는 글자 표시 방식을 ellipsis로 설정합니다. */
  text-overflow: ellipsis;
}

/* 대시보드: .dashboard-progress-card 선택자의 카드 영역에 적용됩니다. */
.dashboard-progress-card {
  /* 그리드에서 차지할 가로 위치를 2로 정합니다. */
  grid-column: 2;
}

/* 대시보드: .dashboard-progress-bar 선택자의 화면 요소에 적용됩니다. */
.dashboard-progress-bar {
  /* 기본 너비를 86px로 지정합니다. */
  width: 86px;
  /* 기본 높이를 9px로 지정합니다. */
  height: 9px;
  /* 표시 방식을 inline-flex로 설정합니다. */
  display: inline-flex;
  /* vertical-align 값을 middle로 지정합니다. */
  vertical-align: middle;
  /* 넘치는 내용 처리 방식을 hidden로 설정합니다. */
  overflow: hidden;
  /* 모서리 둥글기를 999px로 지정합니다. */
  border-radius: 999px;
  /* 배경을 #e9eef5로 지정합니다. */
  background: #e9eef5;
  /* 오른쪽 바깥 여백을 8px로 줍니다. */
  margin-right: 8px;
}

/* 대시보드: .dashboard-progress-bar span 선택자의 화면 요소에 적용됩니다. */
.dashboard-progress-bar span {
  /* 표시 방식을 block로 설정합니다. */
  display: block;
  /* 기본 높이를 100%로 지정합니다. */
  height: 100%;
  /* 모서리 둥글기를 inherit로 지정합니다. */
  border-radius: inherit;
  /* 배경을 linear-gradient(90deg, var(--blue-700), #31b56b)로 지정합니다. */
  background: linear-gradient(90deg, var(--blue-700), #31b56b);
}

/* 대시보드: .dashboard-schedule-dialog 선택자의 팝업창에 적용됩니다. */
.dashboard-schedule-dialog {
  /* 기본 너비를 min(560px, calc(100vw - 36px))로 지정합니다. */
  width: min(560px, calc(100vw - 36px));
}

/* 대시보드: .dashboard-event-dialog 선택자의 팝업창에 적용됩니다. */
.dashboard-event-dialog {
  /* 기본 너비를 min(620px, calc(100vw - 36px))로 지정합니다. */
  width: min(620px, calc(100vw - 36px));
}

/* 대시보드: .dashboard-schedule-grid 선택자의 배치 영역에 적용됩니다. */
.dashboard-schedule-grid {
  /* 가로 열 배치를 160px minmax(0, 1fr)로 정합니다. */
  grid-template-columns: 160px minmax(0, 1fr);
}

/* 대시보드: .dashboard-color-field 선택자의 화면 요소에 적용됩니다. */
.dashboard-color-field,
/* 대시보드: .dashboard-schedule-grid .memo-field 선택자의 배치 영역에 적용됩니다. */
.dashboard-schedule-grid .memo-field {
  /* 그리드에서 차지할 가로 위치를 1 / -1로 정합니다. */
  grid-column: 1 / -1;
}

/* 대시보드: .dashboard-color-picker 선택자의 화면 요소에 적용됩니다. */
.dashboard-color-picker {
  /* 표시 방식을 flex로 설정합니다. */
  display: flex;
  /* 내용이 넘칠 때 줄바꿈 방식을 wrap로 설정합니다. */
  flex-wrap: wrap;
  /* 세로 정렬을 center로 맞춥니다. */
  align-items: center;
  /* 요소 사이 간격을 8px로 줍니다. */
  gap: 8px;
  /* 이 값보다 작아지지 않도록 최소 높이를 38px로 지정합니다. */
  min-height: 38px;
}

/* 대시보드: .dashboard-color-chip 선택자의 화면 요소에 적용됩니다. */
.dashboard-color-chip {
  /* 기본 너비를 28px로 지정합니다. */
  width: 28px;
  /* 기본 높이를 28px로 지정합니다. */
  height: 28px;
  /* 테두리를 2px solid #fff로 지정합니다. */
  border: 2px solid #fff;
  /* 모서리 둥글기를 50%로 지정합니다. */
  border-radius: 50%;
  /* 배경을 var(--schedule-chip)로 지정합니다. */
  background: var(--schedule-chip);
  /* 그림자 효과를 0 0 0 1px var(--line), 0 3px 8px rgba(0, 27, 68, 0.12)로 지정합니다. */
  box-shadow: 0 0 0 1px var(--line), 0 3px 8px rgba(0, 27, 68, 0.12);
  /* 마우스 커서 모양을 pointer로 지정합니다. */
  cursor: pointer;
}

/* 대시보드: .dashboard-color-chip.is-selected 선택자의 화면 요소에 적용됩니다. */
.dashboard-color-chip.is-selected {
  /* 그림자 효과를 0 0 0 3px rgba(13, 87, 200, 0.2), 0 0 0 1px var(--blue-700)로 지정합니다. */
  box-shadow: 0 0 0 3px rgba(13, 87, 200, 0.2), 0 0 0 1px var(--blue-700);
}

/* 대시보드: .dashboard-color-chip.is-selected::after 선택자의 화면 요소에 적용됩니다. */
.dashboard-color-chip.is-selected::after {
  /* content 값을 ""로 지정합니다. */
  content: "";
  /* 표시 방식을 block로 설정합니다. */
  display: block;
  /* 기본 너비를 8px로 지정합니다. */
  width: 8px;
  /* 기본 높이를 14px로 지정합니다. */
  height: 14px;
  /* 바깥 여백을 3px auto 0로 줍니다. */
  margin: 3px auto 0;
  /* 테두리를 solid #fff로 지정합니다. */
  border: solid #fff;
  /* border-width 값을 0 3px 3px 0로 지정합니다. */
  border-width: 0 3px 3px 0;
  /* 위치나 회전 변형을 rotate(45deg)로 적용합니다. */
  transform: rotate(45deg);
}

/* 대시보드: .dashboard-event-info 선택자의 화면 요소에 적용됩니다. */
.dashboard-event-info {
  /* 바깥 여백을 0로 줍니다. */
  margin: 0;
}

/* 대시보드: 아래 규칙은 (max-width: 1200px) 화면 조건에서만 적용됩니다. */
@media (max-width: 1200px) {
  /* 대시보드: .home-dashboard 선택자의 화면 요소에 적용됩니다. */
  .home-dashboard {
    /* 가로 열 배치를 1fr로 정합니다. */
    grid-template-columns: 1fr;
  }

  /* 대시보드: .home-calendar 선택자의 화면 요소에 적용됩니다. */
  .home-calendar {
    /* 그리드에서 차지할 세로 위치를 auto로 정합니다. */
    grid-row: auto;
  }

  /* 대시보드: .dashboard-progress-card 선택자의 카드 영역에 적용됩니다. */
  .dashboard-progress-card {
    /* 그리드에서 차지할 가로 위치를 auto로 정합니다. */
    grid-column: auto;
  }
}

/* MOBILE WORK HUB C START */
.mobile-work-hub,
.dashboard-mobile-nav {
  display: none;
}

@media (max-width: 820px) {
  body.mobile-dashboard-active {
    background: #f3f6fb;
  }

  body.mobile-dashboard-active .content {
    padding: 0 0 calc(84px + env(safe-area-inset-bottom));
    background: #f3f6fb;
  }

  body.mobile-dashboard-active .page-actions {
    display: none !important;
  }

  body.mobile-dashboard-active #dashboard.dashboard-view {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: clip;
  }

  #dashboard .home-dashboard.dashboard-live {
    display: none !important;
  }

  #dashboard .mobile-work-hub {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 13px;
    padding: 14px 12px calc(18px + env(safe-area-inset-bottom));
    color: #10243f;
  }

  .mobile-work-hub :where(button, a) {
    touch-action: manipulation;
  }

  .mobile-hub-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 2px;
  }

  .mobile-hub-welcome > div {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .mobile-hub-welcome span {
    color: #263b56;
    font-size: 17px;
    line-height: 1.35;
  }

  .mobile-hub-welcome strong {
    color: #0d57c8;
    font-weight: 900;
  }

  .mobile-hub-welcome small,
  .mobile-hub-card-head small,
  .mobile-hub-section-title span {
    color: #7b899d;
    font-size: 11px;
    line-height: 1.4;
  }

  .mobile-hub-welcome time {
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 6px 9px;
    border: 1px solid #dce6f2;
    border-radius: 999px;
    background: #fff;
    color: #57708e;
    font-size: 10px;
    font-weight: 800;
  }

  .mobile-hub-section-title,
  .mobile-hub-card-head,
  .mobile-hub-card-head > div {
    min-width: 0;
  }

  .mobile-hub-section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    margin: 0 2px 9px;
  }

  .mobile-work-hub h2 {
    margin: 0;
    color: #10243f;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.45px;
  }

  .mobile-hub-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mobile-hub-quick {
    min-width: 0;
    min-height: 112px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 1px 10px;
    padding: 15px;
    border: 1px solid #e1e9f3;
    border-radius: 16px;
    background: #fff;
    color: #10243f;
    text-align: left;
    box-shadow: 0 7px 20px rgba(12, 42, 79, 0.07);
  }

  .mobile-hub-quick:active {
    border-color: #9bc3f5;
    background: #f6faff;
    transform: translateY(1px);
  }

  .mobile-hub-quick i {
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #edf5ff;
    color: #1264ce;
    font-style: normal;
  }

  .mobile-hub-quick:nth-child(2) i { background: #eef9f5; color: #13945c; }
  .mobile-hub-quick:nth-child(3) i { background: #f2f4ff; color: #5365d6; }
  .mobile-hub-quick:nth-child(4) i { background: #fff5ed; color: #e97818; }
  .mobile-hub-quick svg { width: 24px; height: 24px; }
  .mobile-hub-quick strong { align-self: end; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-hub-quick small { align-self: start; color: #8390a3; font-size: 10px; }

  .mobile-hub-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e1e9f3;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(12, 42, 79, 0.065);
  }

  .mobile-hub-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 16px 11px;
  }

  .mobile-hub-card-head > div {
    display: grid;
    gap: 3px;
  }

  .mobile-hub-card-head > b {
    color: #0d63d3;
    font-size: 15px;
  }

  .mobile-hub-progress {
    height: 6px;
    margin: 0 16px 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9eef5;
  }

  .mobile-hub-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0d57c8, #2f86eb);
  }

  .mobile-hub-task-list {
    display: grid;
    padding: 0 16px 10px;
  }

  .mobile-hub-task {
    width: 100%;
    min-height: 55px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    background: transparent;
    color: #223a57;
    text-align: left;
  }

  .mobile-hub-task:last-child { border-bottom: 0; }
  .mobile-hub-task > i { width: 20px; height: 20px; border: 2px solid #c9d3df; border-radius: 50%; }
  .mobile-hub-task.is-done > i { display: grid; place-items: center; border-color: #21ad6b; background: #21ad6b; color: #fff; }
  .mobile-hub-task > i svg { width: 13px; height: 13px; }
  .mobile-hub-task > span { min-width: 0; display: grid; gap: 2px; }
  .mobile-hub-task strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-hub-task small { overflow: hidden; color: #8491a3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-hub-task > svg { width: 18px; height: 18px; color: #9aa8b9; }
  .mobile-hub-task:disabled { cursor: default; opacity: 1; }

  .mobile-hub-empty {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #718196;
  }

  .mobile-hub-empty > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #edf9f3; color: #1a9c62; }
  .mobile-hub-empty svg { width: 18px; height: 18px; }
  .mobile-hub-empty > span { display: grid; gap: 3px; font-size: 12px; font-weight: 800; }
  .mobile-hub-empty small { color: #98a4b4; font-size: 10px; font-weight: 600; }

  .mobile-hub-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #e1e9f3;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(12, 42, 79, 0.055);
  }

  .mobile-hub-status > div {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 13px 5px 12px;
  }

  .mobile-hub-status > div + div::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: #e7edf5; }
  .mobile-hub-status i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #edf5ff; color: #1769d5; }
  .mobile-hub-status > div:nth-child(2) i { background: #eef9f5; color: #16945c; }
  .mobile-hub-status > div:nth-child(3) i { background: #fff5ea; color: #e77d1f; }
  .mobile-hub-status svg { width: 16px; height: 16px; }
  .mobile-hub-status strong { color: #18324f; font-size: 18px; line-height: 1; }
  .mobile-hub-status span { color: #7b899c; font-size: 10px; white-space: nowrap; }

  .mobile-hub-schedule-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(126px, 44%);
    gap: 8px;
    padding: 0 16px 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .mobile-hub-schedule-row::-webkit-scrollbar { display: none; }
  .mobile-hub-schedule-item {
    min-height: 84px;
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid #e1e8f1;
    border-radius: 13px;
    background: #f9fbfe;
    color: #203955;
    text-align: left;
  }
  .mobile-hub-schedule-item.is-next { border-color: #9cc7fa; background: #edf5ff; }
  .mobile-hub-schedule-item time { color: #1769d5; font-size: 11px; font-weight: 900; }
  .mobile-hub-schedule-item strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-hub-schedule-item small { color: #8492a5; font-size: 10px; }
  .mobile-hub-schedule-empty { min-width: calc(100vw - 58px); padding: 16px 0; color: #8794a6; font-size: 12px; }

  .mobile-hub-notice-list { display: grid; padding: 0 16px 11px; }
  .mobile-hub-notice-list > div:not(.mobile-hub-notice-empty) { min-height: 40px; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-top: 1px solid #edf1f6; }
  .mobile-hub-notice-list i { width: 5px; height: 5px; border-radius: 50%; background: #2779dd; }
  .mobile-hub-notice-list span { overflow: hidden; color: #344b65; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-hub-notice-list time { color: #8e9aac; font-size: 10px; }
  .mobile-hub-notice-empty { padding: 4px 0 15px; color: #8794a6; font-size: 12px; }

  #dashboard .dashboard-mobile-nav {
    position: fixed;
    z-index: 48;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: calc(66px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    padding: 7px max(5px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(5px, env(safe-area-inset-left));
    border-top: 1px solid #dce5ef;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 24px rgba(8, 38, 76, 0.09);
    backdrop-filter: blur(14px);
  }

  .dashboard-mobile-nav button {
    position: relative;
    min-width: 0;
    min-height: 52px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: #718096;
  }
  .dashboard-mobile-nav svg { width: 22px; height: 22px; }
  .dashboard-mobile-nav span { font-size: 10px; font-weight: 800; }
  .dashboard-mobile-nav .is-active { color: #0d57c8; }
}

@media (max-width: 380px) {
  #dashboard .mobile-work-hub { gap: 10px; padding-inline: 9px; }
  .mobile-hub-quick-grid { gap: 8px; }
  .mobile-hub-quick { min-height: 100px; padding: 12px; grid-template-columns: 39px minmax(0, 1fr); gap: 1px 8px; border-radius: 14px; }
  .mobile-hub-quick i { width: 39px; height: 39px; border-radius: 11px; }
  .mobile-hub-quick strong { font-size: 13px; }
  .mobile-hub-card, .mobile-hub-status { border-radius: 15px; }
  .mobile-hub-status span { font-size: 9px; }
}
/* MOBILE WORK HUB C END */
/* DESKTOP WORK HUB C START */
.dashboard-quick-settings {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #d8e3f0;
  border-radius: 10px;
  background: #fff;
  color: #526a86;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.dashboard-quick-settings:hover {
  border-color: #9fc5f2;
  background: #f4f9ff;
  color: #0d57c8;
}

.dashboard-quick-settings svg {
  width: 17px;
  height: 17px;
}

.dashboard-quick-dialog {
  width: min(650px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
}

.dashboard-quick-dialog .dialog-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dashboard-quick-dialog .dialog-head h3,
.dashboard-quick-dialog .dialog-head p {
  margin: 0;
}

.dashboard-quick-dialog .dialog-head p {
  color: #7b899c;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-quick-dialog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid #e5ebf3;
  background: #f7faff;
}

.dashboard-quick-dialog-meta span {
  color: #0d57c8;
  font-size: 13px;
  font-weight: 900;
}

.dashboard-quick-dialog-meta small {
  color: #7f8da0;
  font-size: 11px;
}

.dashboard-quick-options {
  max-height: min(520px, calc(100dvh - 255px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 16px 20px;
  overflow-y: auto;
}

.dashboard-quick-option {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e1e8f1;
  border-radius: 12px;
  background: #fff;
}

.dashboard-quick-option.is-selected {
  border-color: #9bc5f5;
  background: #f3f8ff;
  box-shadow: 0 0 0 2px rgba(13, 87, 200, 0.07);
}

.dashboard-quick-option > label {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.dashboard-quick-option input {
  width: 17px;
  height: 17px;
  accent-color: #0d57c8;
}

.dashboard-quick-option label > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eaf3ff;
  color: #1769d5;
  font-style: normal;
}

.dashboard-quick-option label > i svg {
  width: 21px;
  height: 21px;
}

.dashboard-quick-option label > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dashboard-quick-option label strong,
.dashboard-quick-option label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-quick-option label strong {
  color: #1f3855;
  font-size: 13px;
}

.dashboard-quick-option label small {
  color: #8794a6;
  font-size: 10px;
}

.dashboard-quick-option > div {
  display: grid;
  grid-template-columns: repeat(2, 27px);
  gap: 4px;
}

.dashboard-quick-option > div button {
  width: 27px;
  height: 27px;
  border: 1px solid #d9e3ee;
  border-radius: 7px;
  background: #fff;
  color: #61748b;
  font-weight: 900;
  cursor: pointer;
}

@media (min-width: 821px) {
  #dashboard .desktop-work-hub {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    color: #142b47;
  }

  .desktop-hub-top {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(300px, 1.4fr) repeat(4, minmax(130px, 0.72fr));
    gap: 14px;
  }

  .desktop-welcome-card,
  .desktop-kpi-card,
  .desktop-quick-card,
  .desktop-hub-card {
    min-width: 0;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(12, 42, 79, 0.055);
  }

  .desktop-welcome-card {
    position: relative;
    min-height: 142px;
    display: block;
    overflow: hidden;
    padding: 23px 25px;
    background: linear-gradient(135deg, #f7fbff, #edf5ff);
  }

  .desktop-welcome-card::after {
    content: "";
    position: absolute;
    right: -25px;
    bottom: -54px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(42, 125, 224, 0.08);
  }

  .desktop-welcome-card > div {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  .desktop-welcome-card small {
    color: #2a76d2;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
  }

  .desktop-welcome-card h2 {
    margin: 8px 0 5px;
    color: #102a49;
    max-width: calc(100% - 10px);
    font-size: clamp(20px, 1.35vw, 24px);
    letter-spacing: -0.8px;
  }

  .desktop-welcome-card p {
    max-width: calc(100% - 105px);
    margin: 0;
    color: #738399;
    font-size: 11px;
    line-height: 1.4;
  }

  .desktop-welcome-card > span {
    position: absolute;
    z-index: 1;
    right: 20px;
    bottom: 18px;
    padding: 10px 13px;
    border: 1px solid #cfe2fa;
    border-radius: 999px;
    background: rgba(255,255,255,0.8);
    color: #53708f;
    font-size: 11px;
    font-weight: 800;
  }

  .desktop-welcome-card > span b {
    color: #0d57c8;
    font-size: 15px;
  }

  .desktop-kpi-card {
    min-height: 142px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
  }

  .desktop-kpi-card > i {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #eaf3ff;
    color: #1769d5;
    font-style: normal;
  }

  .desktop-kpi-card.green > i { background: #eaf8f2; color: #16945c; }
  .desktop-kpi-card.violet > i { background: #f0efff; color: #6756d8; }
  .desktop-kpi-card.orange > i { background: #fff3e9; color: #e87618; }
  .desktop-kpi-card svg { width: 23px; height: 23px; }
  .desktop-kpi-card > span { min-width: 0; display: grid; gap: 3px; color: #53667e; font-size: 12px; font-weight: 800; }
  .desktop-kpi-card strong { color: #142b47; font-size: 30px; line-height: 1.05; }
  .desktop-kpi-card small { overflow: hidden; color: #8996a8; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

  .desktop-quick-card {
    padding: 19px 20px 20px;
  }

  .desktop-section-head,
  .desktop-month-head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }

  .desktop-section-head > div,
  .desktop-month-head > div:first-child {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .desktop-section-head h2,
  .desktop-month-head h2 {
    margin: 0;
    color: #132d4d;
    font-size: 17px;
    letter-spacing: -0.45px;
  }

  .desktop-section-head p,
  .desktop-month-head p {
    margin: 0;
    color: #8491a3;
    font-size: 11px;
  }

  .desktop-section-head > strong {
    color: #0d63d3;
    font-size: 17px;
  }

  .desktop-quick-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
  }

  .desktop-quick-button {
    min-width: 0;
    min-height: 78px;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #e1e8f1;
    border-radius: 13px;
    background: #fbfdff;
    color: #183451;
    text-align: left;
    cursor: pointer;
  }

  .desktop-quick-button:hover {
    border-color: #9dc6f5;
    background: #f2f8ff;
    transform: translateY(-1px);
  }

  .desktop-quick-button > i {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf3ff;
    color: #1769d5;
    font-style: normal;
  }

  .desktop-quick-button:nth-child(2) > i { background: #eaf8f2; color: #15925a; }
  .desktop-quick-button:nth-child(3) > i { background: #fff3e9; color: #e87618; }
  .desktop-quick-button:nth-child(4) > i { background: #f0efff; color: #6756d8; }
  .desktop-quick-button:nth-child(5) > i { background: #edf8fb; color: #12829a; }
  .desktop-quick-button:nth-child(6) > i { background: #fff0f1; color: #df4a54; }
  .desktop-quick-button svg { width: 23px; height: 23px; }
  .desktop-quick-button > span { min-width: 0; display: grid; gap: 3px; }
  .desktop-quick-button strong, .desktop-quick-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-quick-button strong { font-size: 13px; }
  .desktop-quick-button small { color: #8895a7; font-size: 10px; }

  .desktop-hub-main-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(320px, 1.16fr) minmax(300px, 1fr) minmax(270px, 0.88fr);
    align-items: stretch;
    gap: 16px;
  }

  .desktop-hub-card {
    overflow: hidden;
  }

  .desktop-hub-card > .desktop-section-head {
    padding: 18px 19px 13px;
  }

  .desktop-task-progress {
    height: 6px;
    margin: 0 19px 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9eef5;
  }

  .desktop-task-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0d57c8, #2f86eb);
  }

  .desktop-task-list {
    display: grid;
    padding: 0 19px 13px;
  }

  .desktop-task-row {
    min-width: 0;
    min-height: 57px;
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    background: transparent;
    color: #203a58;
    text-align: left;
  }

  .desktop-task-row:last-child { border-bottom: 0; }
  .desktop-task-row > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: #f0f4f8; color: #7b899b; font-size: 10px; font-style: normal; font-weight: 900; }
  .desktop-task-row.is-done > i { background: #e9f8f1; color: #15945b; }
  .desktop-task-row > i svg { width: 15px; height: 15px; }
  .desktop-task-row > span { min-width: 0; display: grid; gap: 3px; }
  .desktop-task-row strong, .desktop-task-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-task-row strong { font-size: 12px; }
  .desktop-task-row small { color: #8996a8; font-size: 10px; }
  .desktop-task-row > svg { width: 17px; height: 17px; color: #9aa7b7; }
  .desktop-task-row:disabled { cursor: default; opacity: 1; }

  .desktop-week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    padding: 2px 18px 15px;
  }

  .desktop-week-day {
    position: relative;
    min-height: 66px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 1px solid #e3e9f1;
    border-radius: 11px;
    background: #fafcff;
    color: #8390a2;
    cursor: context-menu;
  }

  .desktop-week-day span { font-size: 9px; font-weight: 800; }
  .desktop-week-day strong { color: #29425e; font-size: 15px; }
  .desktop-week-day b { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 999px; background: #e7f1ff; color: #1263ce; font-size: 8px; }
  .desktop-week-day.is-today { border-color: #76afeF; background: #edf5ff; }
  .desktop-week-day.is-today span, .desktop-week-day.is-today strong { color: #0d57c8; }

  .desktop-upcoming-list,
  .desktop-notice-list,
  .desktop-delivery-list {
    display: grid;
    padding: 0 18px 14px;
  }

  .desktop-upcoming-list > button {
    min-width: 0;
    min-height: 54px;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) 17px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border: 0;
    border-top: 1px solid #edf1f6;
    background: transparent;
    color: #253f5c;
    text-align: left;
  }

  .desktop-upcoming-list time { color: #1769d5; font-size: 10px; font-weight: 900; }
  .desktop-upcoming-list span { min-width: 0; display: grid; gap: 2px; }
  .desktop-upcoming-list strong, .desktop-upcoming-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-upcoming-list strong { font-size: 11px; }
  .desktop-upcoming-list small { color: #8a97a8; font-size: 9px; }
  .desktop-upcoming-list svg { width: 16px; height: 16px; color: #9ba8b8; }

  .desktop-side-stack {
    min-width: 0;
    display: grid;
    gap: 16px;
  }

  .desktop-notice-list > div:not(.desktop-empty) {
    min-width: 0;
    min-height: 38px;
    display: grid;
    grid-template-columns: 5px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #edf1f6;
  }

  .desktop-notice-list i { width: 5px; height: 5px; border-radius: 50%; background: #2779dd; }
  .desktop-notice-list span { overflow: hidden; color: #354d67; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-notice-list time { color: #8f9bad; font-size: 9px; }

  .desktop-delivery-list > div:not(.desktop-empty) {
    min-width: 0;
    min-height: 48px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border-top: 1px solid #edf1f6;
  }

  .desktop-delivery-list time { color: #1769d5; font-size: 10px; font-weight: 900; }
  .desktop-delivery-list span { min-width: 0; display: grid; gap: 2px; }
  .desktop-delivery-list strong, .desktop-delivery-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-delivery-list strong { color: #2c455f; font-size: 10px; }
  .desktop-delivery-list small { color: #8a97a8; font-size: 9px; }

  .desktop-empty {
    grid-column: 1 / -1;
    min-height: 72px;
    display: grid;
    place-items: center;
    color: #8794a6;
    font-size: 11px;
  }

  .desktop-recent-card .dashboard-table {
    padding-top: 0;
  }

  .desktop-month-card {
    padding: 18px;
  }

  .desktop-month-head {
    margin-bottom: 12px;
  }

  .desktop-month-head > div:last-child {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #0d57c8;
  }

  .desktop-month-head > div:last-child strong {
    min-width: 104px;
    text-align: center;
    font-size: 14px;
  }

  .desktop-month-calendar {
    overflow: hidden;
    border: 1px solid #e1e8f1;
    border-radius: 12px;
  }

  .desktop-month-calendar .calendar-cell {
    min-height: 84px;
  }
}

@media (min-width: 821px) and (max-width: 1380px) {
  .desktop-hub-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .desktop-welcome-card { grid-column: 1 / -1; }
  .desktop-hub-main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-side-stack { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 821px) and (max-width: 1040px) {
  .desktop-hub-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-hub-main-grid { grid-template-columns: minmax(0, 1fr); }
  .desktop-side-stack { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .desktop-month-calendar .calendar-cell { min-height: 72px; }
}

@media (max-width: 820px) {
  .mobile-hub-section-title > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-hub-section-title .dashboard-quick-settings {
    min-height: 32px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 10px;
  }

  .mobile-hub-section-title .dashboard-quick-settings svg {
    width: 15px;
    height: 15px;
  }

  .mobile-hub-quick > span {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-hub-quick:nth-child(5) i { background: #edf8fb; color: #12829a; }
  .mobile-hub-quick:nth-child(6) i { background: #fff0f1; color: #df4a54; }
  .mobile-hub-quick-empty { grid-column: 1 / -1; min-height: 78px; display: grid; place-items: center; color: #8390a3; font-size: 11px; }

  #dashboard .dashboard-mobile-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-quick-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    margin: auto;
  }

  .dashboard-quick-dialog .dialog-head {
    padding: 15px 16px 12px;
  }

  .dashboard-quick-dialog .dialog-head p {
    font-size: 10px;
  }

  .dashboard-quick-dialog-meta {
    padding: 10px 14px;
  }

  .dashboard-quick-dialog-meta small {
    display: none;
  }

  .dashboard-quick-options {
    max-height: calc(100dvh - 230px);
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px;
  }

  .dashboard-quick-option {
    padding: 9px;
  }

  .dashboard-quick-dialog .dialog-actions {
    padding: 12px 14px 14px;
  }
}
/* DESKTOP WORK HUB C END */

/* PERSONAL DASHBOARD TASKS START */
.calendar-event.task {
  border: 1px solid color-mix(in srgb, var(--event-color, #0d57c8) 28%, #fff);
  background: color-mix(in srgb, var(--event-color, #0d57c8) 14%, #fff);
  color: var(--event-color, #0d57c8);
}

.dashboard-task-head-actions {
  display: flex !important;
  grid-auto-flow: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px !important;
}

.dashboard-task-head-actions > strong,
.dashboard-task-head-actions > b {
  color: #0d63d3;
  font-size: 17px;
}

.dashboard-task-add {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #b9d5f5;
  border-radius: 10px;
  background: #edf6ff;
  color: #0d57c8;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.dashboard-task-add:hover {
  border-color: #70a9eb;
  background: #dfedff;
}

.dashboard-task-add.is-compact {
  min-height: 29px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 10px;
}

.dashboard-task-empty {
  gap: 9px;
}

.dashboard-task-empty .dashboard-task-add {
  min-height: 30px;
}

.desktop-task-row {
  grid-template-columns: 29px minmax(0, 1fr);
}

.desktop-task-row.is-overdue {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.045), transparent 72%);
}

.dashboard-task-toggle {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid #c7d1de;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  cursor: pointer;
}

.dashboard-task-toggle:hover {
  border-color: #5e9de5;
  background: #f2f8ff;
}

.is-overdue > .dashboard-task-toggle {
  border-color: #f0a0a4;
}

.is-done > .dashboard-task-toggle {
  border-color: #20a766;
  background: #20a766;
}

.dashboard-task-toggle svg {
  width: 14px;
  height: 14px;
}

.dashboard-task-body {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #203a58;
  text-align: left;
  cursor: pointer;
}

.dashboard-task-body > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-task-body strong,
.dashboard-task-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-task-body strong {
  font-size: 12px;
}

.dashboard-task-body small {
  color: #8996a8;
  font-size: 10px;
}

.dashboard-task-body > svg {
  width: 17px;
  height: 17px;
  color: #9aa7b7;
}

.is-done .dashboard-task-body strong {
  color: #77869a;
  text-decoration: line-through;
}

.is-overdue:not(.is-done) .dashboard-task-body small {
  color: #d34b53;
  font-weight: 800;
}

.desktop-kpi-card.red > i {
  background: #fff0f1;
  color: #dc4651;
}

.dashboard-task-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(860px, calc(100dvh - 32px));
}

.dashboard-task-dialog .dialog-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dashboard-task-dialog .dialog-head h3,
.dashboard-task-dialog .dialog-head p {
  margin: 0;
}

.dashboard-task-dialog .dialog-head p {
  color: #7c899b;
  font-size: 11px;
  font-weight: 700;
}

.dashboard-task-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.dashboard-task-grid .dashboard-task-assignee-field,
.dashboard-task-grid .dashboard-task-title-field,
.dashboard-task-grid .dashboard-task-linked-field,
.dashboard-task-grid .memo-field {
  grid-column: 1 / -1;
}

.dashboard-task-assignment-notice {
  grid-column: 1 / -1;
  padding: 11px 13px;
  border: 1px solid #cfc8ff;
  border-radius: 10px;
  background: #f3f1ff;
  color: #5b4dc4;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-task-assignment-notice[hidden],
.dashboard-task-assignee-field[hidden] {
  display: none;
}

.dashboard-task-grid label > span small {
  margin-left: 4px;
  color: #9aa6b5;
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 820px) {
  .mobile-hub-card-head > .dashboard-task-head-actions {
    display: flex !important;
    gap: 8px !important;
  }

  .mobile-hub-card-head > .dashboard-task-head-actions > b {
    color: #0d63d3;
    font-size: 14px;
  }

  .mobile-hub-task {
    width: 100%;
    min-height: 56px;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #edf1f6;
  }

  .mobile-hub-task:last-child {
    border-bottom: 0;
  }

  .mobile-hub-task.is-overdue {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.045), transparent 78%);
  }

  .mobile-hub-task .dashboard-task-toggle {
    width: 23px;
    height: 23px;
  }

  .mobile-hub-task .dashboard-task-body {
    min-height: 42px;
  }

  .mobile-hub-task .dashboard-task-body strong {
    font-size: 13px;
  }

  .mobile-hub-task .dashboard-task-body small {
    font-size: 10px;
  }

  .dashboard-task-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    margin: auto;
  }

  .dashboard-task-dialog .dialog-head {
    padding: 15px 16px 12px;
  }

  .dashboard-task-dialog .dialog-grid {
    max-height: calc(100dvh - 190px);
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    padding: 14px 16px;
    overflow-y: auto;
  }

  .dashboard-task-grid .dashboard-task-assignee-field,
  .dashboard-task-grid .dashboard-task-title-field,
  .dashboard-task-grid .dashboard-task-linked-field,
  .dashboard-task-grid .memo-field {
    grid-column: auto;
  }

  .dashboard-task-assignment-notice {
    grid-column: auto;
  }

  .dashboard-task-dialog .dialog-actions {
    padding: 12px 14px 14px;
  }

  .desktop-month-head .dashboard-task-add {
    display: none;
  }
}
/* PERSONAL DASHBOARD TASKS END */



/* WEEK SCHEDULE DATE FILTER START */
.desktop-week-day.is-selected:not(.is-today) {
  border-color: #9c8cf0;
  background: #f1efff;
  box-shadow: 0 0 0 2px rgba(103, 86, 216, 0.09);
}

.desktop-week-day.is-selected:not(.is-today) span,
.desktop-week-day.is-selected:not(.is-today) strong {
  color: #6756d8;
}

.desktop-week-day.is-selected:not(.is-today) b {
  background: #6756d8;
  color: #fff;
}
/* WEEK SCHEDULE DATE FILTER END */



/* TASK HOLD DELETE REQUEST START */
.dashboard-task-request-actions {
  margin: 0 22px 2px;
  padding: 14px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #dbe7f5;
  border-radius: 12px;
  background: #f7faff;
}

.dashboard-task-request-actions[hidden] {
  display: none;
}

.dashboard-task-request-actions > div:first-child {
  min-width: 0;
}

.dashboard-task-request-actions strong {
  display: block;
  margin-bottom: 3px;
  color: #123b68;
  font-size: 12px;
}

.dashboard-task-request-actions p {
  margin: 0;
  color: #718399;
  font-size: 10px;
  line-height: 1.5;
}

.dashboard-task-request-actions > div:last-child,
.dashboard-event-request-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.dashboard-task-request-actions.is-pending {
  border-color: #d8cffb;
  background: #f6f3ff;
}

.dashboard-request-hold,
.dashboard-request-delete,
.dashboard-request-approve,
.dashboard-request-reject {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-request-hold {
  border: 1px solid #c8bdf4;
  background: #f4f1ff;
  color: #654fc3;
}

.dashboard-request-delete,
.dashboard-request-reject {
  border: 1px solid #f0b6b6;
  background: #fff3f3;
  color: #c43a3a;
}

.dashboard-request-approve {
  border: 1px solid #0d57c8;
  background: #0d57c8;
  color: #fff;
}

.dashboard-request-hold:hover {
  background: #ebe5ff;
}

.dashboard-request-delete:hover,
.dashboard-request-reject:hover {
  background: #ffe8e8;
}

.dashboard-request-approve:hover {
  background: #0849ad;
}

.dashboard-request-hold:disabled,
.dashboard-request-delete:disabled,
.dashboard-request-approve:disabled,
.dashboard-request-reject:disabled {
  opacity: 0.55;
  cursor: default;
}

.dashboard-task-request-dialog {
  width: min(540px, calc(100vw - 28px));
}

.dashboard-task-request-review-dialog {
  width: min(620px, calc(100vw - 28px));
}

.dashboard-request-target {
  display: grid;
  gap: 4px;
  margin: 18px 22px 14px;
  padding: 14px 15px;
  border: 1px solid #dce6f2;
  border-radius: 11px;
  background: #f8faff;
}

.dashboard-request-target span,
.dashboard-request-reason > span {
  color: #75869a;
  font-size: 10px;
  font-weight: 800;
}

.dashboard-request-target strong {
  color: #12375f;
  font-size: 14px;
}

.dashboard-request-target small {
  color: #8392a4;
  font-size: 10px;
}

.dashboard-request-reason {
  display: grid;
  gap: 7px;
  margin: 0 22px 18px;
}

.dashboard-request-reason textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px 13px;
  resize: vertical;
  border: 1px solid #d6e0ec;
  border-radius: 10px;
  color: #163a60;
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.dashboard-request-reason textarea:focus {
  outline: 0;
  border-color: #76a7e7;
  box-shadow: 0 0 0 3px rgba(13, 87, 200, 0.09);
}

.dashboard-request-review-info {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  margin: 18px 22px 15px;
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 12px;
}

.dashboard-request-review-info dt,
.dashboard-request-review-info dd {
  margin: 0;
  padding: 11px 13px;
  border-bottom: 1px solid #e8eef5;
}

.dashboard-request-review-info dt {
  background: #f5f8fc;
  color: #6f8195;
  font-size: 10px;
  font-weight: 800;
}

.dashboard-request-review-info dd {
  color: #183d63;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-request-review-info dt:nth-last-of-type(1),
.dashboard-request-review-info dd:last-child {
  border-bottom: 0;
}

.dashboard-request-review-info dd.is-reason {
  white-space: pre-wrap;
  line-height: 1.55;
}

.dashboard-request-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f0edff;
  color: #6756c7;
  font-size: 10px;
  font-weight: 900;
}

.dashboard-request-chip.is-delete,
.dashboard-request-chip.is-rejected {
  background: #fff0f0;
  color: #c63e3e;
}

.dashboard-request-chip.is-approved {
  background: #eaf8ef;
  color: #16844a;
}

.dashboard-request-chip.is-pending,
.dashboard-request-chip.is-hold {
  background: #f0edff;
  color: #6756c7;
}

.desktop-task-row.has-pending-request,
.mobile-hub-task.has-pending-request {
  background: linear-gradient(90deg, rgba(111, 75, 201, 0.08), rgba(111, 75, 201, 0.018) 82%);
}

.dashboard-task-request-alert {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f0edff;
  color: #6756c7;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-task-request-notice {
  display: grid;
  gap: 5px;
  margin: 0 22px 16px;
  padding: 13px 15px;
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  background: linear-gradient(135deg, #f7f5ff, #f1edff);
  color: #5845b2;
}

.dashboard-task-request-notice strong {
  font-size: 12px;
  font-weight: 900;
}

.dashboard-task-request-notice span {
  color: #665d88;
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .dashboard-task-request-alert {
    font-size: 9px;
  }

  .dashboard-task-request-notice {
    margin: 0 14px 13px;
    padding: 11px 12px;
  }
}

.dashboard-event-request-actions {
  margin: 0 22px 5px;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .dashboard-task-request-actions {
    margin: 0 16px 2px;
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-task-request-actions > div:last-child,
  .dashboard-event-request-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-request-hold,
  .dashboard-request-delete {
    min-height: 40px;
  }

  .dashboard-request-target,
  .dashboard-request-review-info,
  .dashboard-request-reason,
  .dashboard-event-request-actions {
    margin-right: 16px;
    margin-left: 16px;
  }

  .dashboard-request-review-info {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .dashboard-task-request-dialog,
  .dashboard-task-request-review-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
}
/* TASK HOLD DELETE REQUEST END */

/* SHARED TASK ASSIGNMENT AND COMPLETION START */
.dashboard-task-dialog {
  width: min(860px, calc(100vw - 32px));
}

.dashboard-task-grid .dashboard-task-target-fields,
.dashboard-task-grid .dashboard-task-title-field,
.dashboard-task-grid .memo-field,
.dashboard-task-compact-row {
  grid-column: 1 / -1;
}

.dashboard-task-target-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  padding: 14px;
  border: 1px solid #dbe6f4;
  border-radius: 12px;
  background: #f7faff;
}

.dashboard-task-target-fields[hidden],
.dashboard-task-team-field[hidden],
.dashboard-task-assignee-field[hidden] {
  display: none;
}

.dashboard-task-assignee-field {
  grid-column: 1 / -1;
  min-width: 0;
}

.dashboard-task-assignee-field > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: #183b66;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-task-assignee-field > div:first-child small {
  color: #0d63d3;
  font-size: 10px;
}

.dashboard-task-assignee-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 184px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid #d8e3f1;
  border-radius: 10px;
  background: #fff;
}

.dashboard-task-assignee-option {
  min-width: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 9px !important;
  padding: 9px 10px;
  border: 1px solid #e6edf6;
  border-radius: 9px;
  background: #fbfdff;
  cursor: pointer;
}

.dashboard-task-assignee-option:has(input:checked) {
  border-color: #8bb9ef;
  background: #eef6ff;
}

.dashboard-task-assignee-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #0d63d3;
}

.dashboard-task-assignee-option > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dashboard-task-assignee-option strong {
  color: #17395f;
  font-size: 11px;
  line-height: 1.35;
}

.dashboard-task-assignee-option strong em {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #dcecff;
  color: #0d63d3;
  font-size: 9px;
  font-style: normal;
}

.dashboard-task-assignee-option small {
  overflow: hidden;
  color: #8391a4;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-task-compact-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.dashboard-task-completion-note {
  display: grid;
  gap: 7px;
  margin: 0 22px 16px;
}

.dashboard-task-completion-note > span {
  color: #183b66;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-task-completion-note > span small {
  margin-left: 4px;
  color: #98a5b5;
  font-size: 10px;
}

.dashboard-task-completion-note textarea {
  min-height: 96px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid #ccd9e9;
  border-radius: 10px;
  background: #fff;
  color: #1b3555;
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.dashboard-task-completion-note textarea:focus {
  border-color: #4f91df;
  outline: 3px solid rgba(13, 99, 211, 0.1);
}

.dashboard-task-completion-note textarea[readonly] {
  background: #f4f7fb;
  color: #52647a;
}

.dashboard-event-info dd.is-long {
  white-space: pre-wrap;
  line-height: 1.6;
}

.dashboard-event-info dd.is-emphasis {
  color: #102f55;
  font-weight: 800;
}

.dashboard-task-complete-button,
.dashboard-task-cancel-complete-button {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-task-complete-button {
  border: 1px solid #14925a;
  background: #14925a;
  color: #fff;
}

.dashboard-task-cancel-complete-button {
  border: 1px solid #c7d3e2;
  background: #f5f8fc;
  color: #42566f;
}

.dashboard-task-complete-button:disabled,
.dashboard-task-cancel-complete-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

@media (max-width: 820px) {
  .dashboard-task-target-fields,
  .dashboard-task-compact-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-task-assignee-field {
    grid-column: 1 / -1;
  }

  .dashboard-task-assignee-list {
    grid-template-columns: minmax(0, 1fr);
    max-height: 156px;
  }

  .dashboard-event-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .dashboard-task-completion-note {
    margin: 0 16px 13px;
  }
}
/* SHARED TASK ASSIGNMENT AND COMPLETION END */

/* MOVABLE RESIZABLE TASK DIALOG START */
@media (min-width: 821px) {
  .dashboard-task-dialog[open] {
    position: fixed;
    inset: auto;
    min-width: 680px;
    min-height: 520px;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: 0;
    overflow: hidden;
  }

  .dashboard-task-dialog > form {
    min-width: 0;
    height: 100%;
    max-height: none !important;
    overflow: hidden;
  }

  .dashboard-task-dialog .dialog-head,
  .dashboard-task-dialog .dialog-actions {
    flex: 0 0 auto;
  }

  .dashboard-task-dialog .dialog-head {
    cursor: move;
    user-select: none;
    touch-action: none;
  }

  .dashboard-task-dialog .dialog-head button {
    cursor: pointer;
  }

  .dashboard-task-dialog .dashboard-task-grid {
    min-height: 0;
    flex: 1 1 auto;
    align-content: start;
    padding-right: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .dashboard-dialog-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: 32px;
    height: 32px;
    --dialog-grip-color: #9aa9ba;
    border-radius: 0 0 12px 0;
    background: transparent;
    cursor: nwse-resize;
    touch-action: none;
    transition: background 160ms ease;
  }

  .dashboard-dialog-resize-handle::before {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 15px;
    height: 15px;
    background:
      radial-gradient(circle at 82% 82%, var(--dialog-grip-color) 0 1.5px, transparent 1.8px),
      radial-gradient(circle at 52% 82%, var(--dialog-grip-color) 0 1.5px, transparent 1.8px),
      radial-gradient(circle at 22% 82%, var(--dialog-grip-color) 0 1.5px, transparent 1.8px),
      radial-gradient(circle at 82% 52%, var(--dialog-grip-color) 0 1.5px, transparent 1.8px),
      radial-gradient(circle at 52% 52%, var(--dialog-grip-color) 0 1.5px, transparent 1.8px),
      radial-gradient(circle at 82% 22%, var(--dialog-grip-color) 0 1.5px, transparent 1.8px);
    transition: transform 160ms ease;
  }

  .dashboard-dialog-resize-handle:hover {
    --dialog-grip-color: #4e77a7;
    background: #f2f6fb;
  }

  .dashboard-dialog-resize-handle:hover::before {
    transform: translate(-1px, -1px);
  }

  .dashboard-task-dialog.is-dialog-interacting .dashboard-dialog-resize-handle {
    --dialog-grip-color: #1d64b4;
    background: #eaf2fb;
  }

  .dashboard-task-dialog.is-dialog-interacting,
  .dashboard-task-dialog.is-dialog-interacting * {
    user-select: none !important;
  }
}

@media (max-width: 820px) {
  .dashboard-task-dialog[open] {
    position: fixed !important;
    inset: 0 !important;
    width: calc(100vw - 20px) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: auto !important;
  }

  .dashboard-dialog-resize-handle {
    display: none;
  }
}
/* MOVABLE RESIZABLE TASK DIALOG END */