/* Calendar + Scheduler Event ? mobile + desktop polish */

.cal-page {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Scope cards share Pending row ? left status, right My/Team/All */
.cal-counts-row {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cal-counts-left,
.cal-counts-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.cal-completed-toggle {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}

.cal-completed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2e7d32;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.cal-counts-right {
  margin-left: auto;
  justify-content: flex-end;
}

.cal-counts button.cal-count {
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.cal-counts button.cal-count.active {
  background: #eef4ff;
  box-shadow: inset 0 0 0 1px #93b4f5;
}

.cal-count.scope-my { border-left: 4px solid #7b1fa2; }
.cal-count.scope-team { border-left: 4px solid #00838f; }
.cal-count.scope-all { border-left: 4px solid #455a64; }

@media (max-width: 768px) {
  .cal-counts-row {
    gap: 6px;
  }

  .cal-counts-left,
  .cal-counts-right {
    width: 100%;
    margin-left: 0;
  }

  .cal-counts-left .cal-count,
  .cal-counts-right .cal-count {
    flex: 1 1 calc(33.33% - 6px);
    min-width: 100px;
    max-width: none;
  }
}

/* Desktop header actions ? keep All / New / Refresh / Mark Read fully visible */
@media (min-width: 769px) {
  .cal-header {
    align-items: center !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .cal-header-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    overflow: visible !important;
    max-width: 100%;
  }

  .cal-header-actions .cal-btn,
  .cal-header-actions .dxbl-btn {
    flex: 0 0 auto !important;
    min-width: fit-content !important;
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: none !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
}

.cal-counts {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}

.cal-count {
  flex: 0 0 150px;
  min-width: 140px;
  max-width: 180px;
  box-sizing: border-box;
}

.cal-status {
  width: fit-content;
  max-width: min(520px, 100%);
}

.cal-body,
.cal-scheduler-wrap,
.cal-scheduler {
  min-width: 0;
  max-width: 100%;
}

.cal-scheduler-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cal-scheduler .dxbl-scheduler-toolbar,
.cal-scheduler .dxbl-toolbar {
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: 100%;
}

/* FormRenderer-style mobile combo trigger / picker (global ? popup is portaled) */
.cal-mobile-combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #c5d0e0;
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.cal-mobile-combo-trigger-sm {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 13px;
}

.cal-mobile-combo-trigger.is-readonly,
.cal-mobile-combo-trigger:disabled {
  background: #f3f6fa;
  color: #6b7280;
  cursor: default;
}

.cal-mobile-combo-trigger-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-mobile-combo-trigger-icon {
  flex: 0 0 auto;
  color: #5a6a7e;
  font-size: 18px;
  line-height: 1;
}

body .cal-mobile-combo-popup.dxbl-popup,
.cal-mobile-combo-popup.dxbl-popup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(400px, 94vw) !important;
  max-width: 94vw !important;
  max-height: min(80dvh, 560px) !important;
  margin: 0 !important;
  z-index: 13050 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 56px rgba(15, 23, 42, .32);
}

body .cal-mobile-combo-popup .dxbl-popup-header,
.cal-mobile-combo-popup .dxbl-popup-header {
  background: #1f2f46 !important;
  color: #fff !important;
  flex: 0 0 auto !important;
}

.cal-mobile-combo-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  max-height: min(70dvh, 480px);
  box-sizing: border-box;
  width: 100%;
}

.cal-mobile-combo-search {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #c5d0e0;
  border-radius: 10px;
  font-size: 16px;
  box-sizing: border-box;
}

.cal-mobile-combo-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: min(52dvh, 360px);
  -webkit-overflow-scrolling: touch;
}

.cal-mobile-combo-option {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #e7edf6;
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  color: #1f2937;
  cursor: pointer;
  box-sizing: border-box;
}

.cal-mobile-combo-option.is-selected {
  background: #e8f1ff;
  border-color: #90b4e8;
  font-weight: 700;
}

.cal-mobile-combo-empty {
  padding: 16px;
  text-align: center;
  color: #8a96a8;
  font-size: 14px;
}

/* Event / link / confirm popups ? FormRenderer row-popup pattern */
body .sch-event-popup.dxbl-popup,
.sch-event-popup.dxbl-popup,
body .sch-link-popup.dxbl-popup,
.sch-link-popup.dxbl-popup,
body .sch-confirm-popup.dxbl-popup,
.sch-confirm-popup.dxbl-popup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(780px, 94vw) !important;
  max-width: 94vw !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: min(92dvh, 860px) !important;
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .28);
}

body .sch-link-popup.dxbl-popup,
.sch-link-popup.dxbl-popup {
  width: min(560px, 94vw) !important;
}

body .sch-confirm-popup.dxbl-popup,
.sch-confirm-popup.dxbl-popup {
  width: min(420px, 94vw) !important;
}

body .sch-event-popup .dxbl-popup-header,
.sch-event-popup .dxbl-popup-header,
body .sch-link-popup .dxbl-popup-header,
.sch-link-popup .dxbl-popup-header,
body .sch-confirm-popup .dxbl-popup-header,
.sch-confirm-popup .dxbl-popup-header {
  flex: 0 0 auto !important;
  background: #1f2f46 !important;
  color: #fff !important;
}

body .sch-event-popup .dxbl-popup-content,
.sch-event-popup .dxbl-popup-content,
body .sch-link-popup .dxbl-popup-content,
.sch-link-popup .dxbl-popup-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body .sch-event-popup .dxbl-popup-body,
.sch-event-popup .dxbl-popup-body,
body .sch-link-popup .dxbl-popup-body,
.sch-link-popup .dxbl-popup-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

body .sch-event-popup .dxbl-popup-footer,
.sch-event-popup .dxbl-popup-footer,
body .sch-link-popup .dxbl-popup-footer,
.sch-link-popup .dxbl-popup-footer,
body .sch-confirm-popup .dxbl-popup-footer,
.sch-confirm-popup .dxbl-popup-footer {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  max-width: 100% !important;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.cal-todo-grid {
  height: 100%;
  min-height: 320px;
}

.cal-todo-subject.is-overdue {
  color: #b71c1c;
  font-weight: 700;
}

.cal-todo-subject.is-completed {
  color: #6a778b;
  text-decoration: line-through;
}

@media (max-width: 768px) {
  .workspace-shell:has(.cal-page),
  .tab-host:has(.cal-page),
  .workspace-content:has(.cal-page) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .cal-view-toggle {
    width: 100%;
  }

  .cal-view-chip {
    flex: 1 1 50%;
  }

  .cal-todo-grid {
    min-height: 48vh;
  }

  .cal-page {
    padding: 8px !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .cal-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cal-header-actions {
    width: 100%;
  }

  .cal-header-actions .cal-btn,
  .cal-header-actions .dxbl-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0 !important;
  }

  .cal-body {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cal-scheduler-wrap {
    min-height: 52vh;
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .cal-side {
    max-height: none !important;
    order: 2;
    width: 100% !important;
  }

  .cal-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    max-width: 100%;
    padding-bottom: 2px;
  }

  .cal-filter-chip {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .cal-counts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cal-count {
    min-width: 0 !important;
    max-width: none !important;
    flex: unset !important;
  }

  .cal-status {
    width: 100%;
    max-width: 100%;
  }

  body .sch-event-popup.dxbl-popup,
  .sch-event-popup.dxbl-popup,
  body .sch-link-popup.dxbl-popup,
  .sch-link-popup.dxbl-popup,
  body .sch-confirm-popup.dxbl-popup,
  .sch-confirm-popup.dxbl-popup {
    width: min(400px, 94vw) !important;
    max-width: 94vw !important;
    max-height: min(90dvh, 640px) !important;
  }

  /* Body form scrolls (FormRenderer row-form pattern); footer stays pinned */
  body .sch-event-popup .dxbl-popup-body,
  .sch-event-popup .dxbl-popup-body {
    overflow: hidden !important;
    min-height: 0 !important;
  }

  .sch-event,
  .sch-event-mobile {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(58dvh, 460px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    box-sizing: border-box !important;
  }

  body .sch-event-popup .dxbl-popup-footer,
  .sch-event-popup .dxbl-popup-footer {
    overflow: visible !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .sch-row2 {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .sch-event .dxbl-text-edit,
  .sch-event .dxbl-combo-box,
  .sch-event .dxbl-combobox,
  .sch-event .dxbl-date-edit,
  .sch-event .dxbl-spin-edit,
  .sch-event .dxbl-memo,
  .sch-event .sch-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .sch-event .dxbl-spin-edit {
    min-height: 44px !important;
    height: auto !important;
  }

  .sch-event .dxbl-text-edit-input,
  .sch-event .dxbl-combo-box input,
  .sch-event .dxbl-date-edit input,
  .sch-event textarea {
    font-size: 16px !important;
  }

  .sch-footer,
  .sch-footer-mobile {
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .sch-foot-btn,
  .sch-footer .dxbl-btn,
  .sch-footer-mobile .dxbl-btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    min-height: 40px !important;
    height: auto !important;
  }

  .sch-res-search {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .sch-link-grid,
  .sch-res-grid {
    max-height: 42vh;
    overflow: auto;
    max-width: 100%;
  }

  body:has(.cal-page) .dxbl-date-edit-drop-down,
  body:has(.sch-event-popup) .dxbl-date-edit-drop-down {
    max-width: calc(100vw - 16px) !important;
  }
}

/* Tablet + phone: when IsMobile class is present, always allow form scroll */
.sch-event-mobile {
  max-height: min(58dvh, 460px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

@media (max-width: 1024px) {
  .sch-event:not(.sch-event-mobile) {
    max-height: min(58dvh, 460px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 480px) {
  .cal-title { font-size: 17px !important; }
  .cal-subtitle { display: none; }
}

/* =============================================================================
   Calendar APP shell (phone + tablet) ? only when .cal-app is set.
   Desktop (>1024px / no .cal-app) is untouched.
   ============================================================================= */

.cal-page.cal-app {
  --cal-app-bg: #f2f4f8;
  --cal-app-card: #ffffff;
  --cal-app-ink: #0f172a;
  --cal-app-muted: #64748b;
  --cal-app-accent: #2563eb;
  --cal-app-tab-h: calc(64px + env(safe-area-inset-bottom, 0px));
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--cal-app-bg) !important;
  overflow: hidden !important;
  gap: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.workspace-shell:has(.cal-page.cal-app),
.tab-host:has(.cal-page.cal-app),
.workspace-content:has(.cal-page.cal-app) {
  overflow: hidden !important;
  max-width: 100vw !important;
  height: 100% !important;
}

/* Hide desktop chrome inside app mode */
.cal-page.cal-app > .cal-header,
.cal-page.cal-app > .cal-filters,
.cal-page.cal-app > .cal-counts,
.cal-page.cal-app > .cal-status {
  display: none !important;
}

.cal-page.cal-app > .cal-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  padding: 0 0 var(--cal-app-tab-h) !important;
  overflow: hidden !important;
}

.cal-page.cal-app .cal-scheduler-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--cal-app-bg) !important;
  padding: 0 !important;
  order: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.cal-page.cal-app .cal-side {
  display: none !important;
}

.cal-page.cal-app .cal-todo-toolbar .cal-todo-hint,
.cal-page.cal-app .cal-todo-toolbar .cal-status-filter {
  display: none !important;
}

/* ?? Top bar ?? */
.cal-app-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: #0f172a;
  color: #fff;
}

.cal-app-top-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.cal-app-top-sub {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
  font-weight: 600;
}

.cal-app-top-actions {
  display: flex;
  gap: 8px;
}

.cal-app-icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.cal-app-icon-btn:active {
  background: rgba(255, 255, 255, 0.22);
}

/* ?? Segmented control ?? */
.cal-app-segment {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 10px 12px 0;
  padding: 4px;
  background: #e2e8f0;
  border-radius: 14px;
}

.cal-app-segment > button {
  border: 0;
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  background: transparent;
  cursor: pointer;
}

.cal-app-segment > button.on {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

/* ?? Status stats ?? */
.cal-app-stats {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 6px;
  scrollbar-width: none;
}

.cal-app-stats::-webkit-scrollbar { display: none; }

.cal-app-stat {
  flex: 0 0 auto;
  min-width: 72px;
  border: 0;
  border-radius: 16px;
  padding: 10px 12px;
  background: var(--cal-app-card);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  text-align: left;
}

.cal-app-stat .n {
  font-size: 18px;
  font-weight: 800;
  color: var(--cal-app-ink);
  line-height: 1;
}

.cal-app-stat .l {
  font-size: 10px;
  font-weight: 700;
  color: var(--cal-app-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-app-stat.on {
  outline: 2px solid var(--cal-app-accent);
  background: #eff6ff;
}

.cal-app-stat.pending.on { outline-color: #f57c00; background: #fff7ed; }
.cal-app-stat.progress.on { outline-color: #1976d2; background: #eff6ff; }
.cal-app-stat.review.on { outline-color: #7b1fa2; background: #faf5ff; }
.cal-app-stat.done.on { outline-color: #2e7d32; background: #f0fdf4; }

/* ?? Follow-up chips in app ?? */
.cal-page.cal-app .cal-todo-toolbar {
  flex: 0 0 auto;
  padding: 4px 12px 8px !important;
  background: transparent !important;
  border: 0 !important;
  gap: 8px !important;
}

.cal-page.cal-app .cal-followup {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.cal-page.cal-app .cal-followup::-webkit-scrollbar { display: none; }

.cal-page.cal-app .cal-followup-label {
  display: none;
}

.cal-page.cal-app .cal-followup-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
}

.cal-page.cal-app .cal-app-quickadd,
.cal-page.cal-app .cal-todo-quickadd {
  margin: 0 12px 10px !important;
  border-radius: 16px !important;
  border: 0 !important;
  background: var(--cal-app-card) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  min-height: 48px;
  padding: 12px 16px !important;
}

.cal-page.cal-app .cal-todo-quickadd-placeholder {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--cal-app-accent) !important;
}

/* ?? Card list ?? */
.cal-app-todo-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-app-group-label {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cal-app-muted);
  background: linear-gradient(var(--cal-app-bg), var(--cal-app-bg) 70%, transparent);
  padding: 8px 4px 6px;
}

.cal-app-card {
  border: 0;
  border-radius: 16px;
  background: var(--cal-app-card);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-app-card:active {
  transform: scale(0.985);
}

.cal-app-card.is-overdue {
  box-shadow: inset 3px 0 0 #dc2626, 0 1px 3px rgba(15, 23, 42, 0.07);
}

.cal-app-card.is-done {
  opacity: 0.72;
}

.cal-app-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cal-app-card-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: 0 0 auto;
}

.cal-app-card-main {
  flex: 1 1 auto;
  min-width: 0;
}

.cal-app-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cal-app-ink);
  line-height: 1.3;
  margin-bottom: 6px;
}

.cal-app-card.is-done .cal-app-card-title {
  text-decoration: line-through;
  color: var(--cal-app-muted);
}

.cal-app-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cal-app-card-more {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
}

.cal-app-card-bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cal-app-muted);
  padding-left: 46px;
}

.cal-app-card-assignees {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
}

.cal-app-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--cal-app-muted);
}

.cal-app-empty-ico { font-size: 36px; margin-bottom: 8px; }
.cal-app-empty-title { font-size: 17px; font-weight: 800; color: var(--cal-app-ink); }
.cal-app-empty-sub { font-size: 13px; margin-top: 4px; }

/* ?? Scheduler in app ?? */
.cal-page.cal-app .cal-scheduler {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}

.cal-page.cal-app .cal-scheduler .dxbl-scheduler-toolbar,
.cal-page.cal-app .cal-scheduler .dxbl-toolbar {
  padding: 6px 8px !important;
  background: var(--cal-app-card) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.cal-page.cal-app .cal-apt {
  min-height: 22px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* ?? Bottom tab bar + FAB ?? */
.cal-app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  height: var(--cal-app-tab-h);
  padding: 6px 24px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

.cal-app-tab {
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
}

.cal-app-tab.on {
  color: var(--cal-app-accent);
}

.cal-app-tab-ico {
  font-size: 18px;
  line-height: 1;
}

.cal-app-fab {
  width: 56px;
  height: 56px;
  margin-top: -22px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #fff;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-app-fab:active {
  transform: scale(0.96);
}

/* ?? Filter bottom sheet ?? */
.cal-app-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(15, 23, 42, 0.45);
}

.cal-app-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1301;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2);
  max-height: min(70dvh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  animation: calAppSheetUp 0.22s ease-out;
}

@keyframes calAppSheetUp {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

.cal-app-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #cbd5e1;
  margin: 0 auto 12px;
}

.cal-app-sheet-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--cal-app-ink);
  margin-bottom: 12px;
}

.cal-app-sheet-section {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cal-app-muted);
  margin: 12px 0 8px;
}

.cal-app-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cal-app-chip {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
}

.cal-app-chip.on {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

.cal-app-sheet-done {
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 14px;
  min-height: 48px;
  background: var(--cal-app-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

/* App-mode popups ? full-bleed bottom sheets (centered; never left:50% without translate) */
body:has(.cal-page.cal-app) .sch-event-popup.dxbl-popup,
body:has(.cal-page.cal-app) .sch-quick-popup.dxbl-popup,
body:has(.cal-page.cal-app) .sch-link-popup.dxbl-popup,
body:has(.cal-page.cal-app) .dxbl-popup.sch-event-popup,
body:has(.cal-page.cal-app) .dxbl-popup.sch-quick-popup,
body:has(.cal-page.cal-app) .dxbl-popup.sch-link-popup,
.cal-page.cal-app ~ .sch-event-popup.dxbl-popup,
.cal-page.cal-app ~ .sch-quick-popup.dxbl-popup {
  position: fixed !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  translate: none !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: min(92dvh, 100%) !important;
  border-radius: 18px 18px 0 0 !important;
  box-sizing: border-box !important;
}

body:has(.cal-page.cal-app) .sch-quick-popup .dxbl-popup,
body:has(.cal-page.cal-app) .sch-event-popup .dxbl-popup {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  margin: 0 !important;
}

/* Tablet: slightly roomier cards, optional 2-col list */
@media (min-width: 768px) and (max-width: 1024px) {
  .cal-page.cal-app .cal-app-todo-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 10px;
  }

  .cal-page.cal-app .cal-app-group-label,
  .cal-page.cal-app .cal-app-empty {
    grid-column: 1 / -1;
  }

  .cal-page.cal-app .cal-app-top-title {
    font-size: 26px;
  }

  .cal-page.cal-app .cal-app-stats {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cal-page.cal-app .cal-todo-toolbar,
  .cal-page.cal-app .cal-todo-quickadd,
  .cal-page.cal-app .cal-app-todo-list {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cal-page.cal-app .cal-todo-quickadd {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}

/* =============================================================================
   Android-style month + day agenda (Calendar tab, .cal-app only)
   ============================================================================= */

.cal-page.cal-app .cal-app-top.and-cal-top {
  background: #fff;
  color: #111;
  border-bottom: 1px solid #eceff3;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}

.cal-page.cal-app .and-cal-top .cal-app-top-title {
  color: #111;
  font-size: 20px;
}

.cal-page.cal-app .and-cal-top .cal-app-top-sub {
  color: #8a93a2;
}

.cal-page.cal-app .and-cal-top .cal-app-icon-btn {
  background: #f2f4f7;
  color: #334155;
}

.and-cal-today-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid #c5ccd6;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.and-cal-today-btn.light {
  border-color: #c5ccd6;
  background: #fff;
}

.and-cal {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #fff;
}

.and-cal-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 2px 12px;
}

.and-cal-month-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #111;
}

.and-cal-month-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.and-cal-nav {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 28px;
  font-weight: 300;
  color: #334155;
  cursor: pointer;
  line-height: 1;
}

.and-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 8px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #222;
}

.and-cal-dow .sun { color: #e53935; }

.and-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
  padding: 4px 6px 8px;
  flex: 0 0 auto;
}

.and-cal-day {
  position: relative;
  border: 0;
  background: transparent;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px 0 6px;
  border-radius: 10px;
}

.and-cal-day-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  border-radius: 8px;
}

.and-cal-day.out .and-cal-day-num { color: #c0c6d0; }
.and-cal-day.sun .and-cal-day-num { color: #e53935; }
.and-cal-day.out.sun .and-cal-day-num { color: #f5b7b5; }

.and-cal-day.today .and-cal-day-num {
  background: #111;
  color: #fff !important;
  font-weight: 800;
}

.and-cal-day.selected:not(.today) .and-cal-day-num {
  box-shadow: inset 0 0 0 1.5px #c5ccd6;
}

.and-cal-dot {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: #90caf9;
}

.and-cal-agenda {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e8ecf1;
  background: #fff;
}

.and-cal-agenda-date {
  padding: 10px 16px 4px;
  font-size: 13px;
  font-weight: 600;
  color: #8a93a2;
}

.and-cal-agenda-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.and-cal-agenda-empty {
  padding: 24px 8px;
  text-align: center;
  color: #98a2b3;
  font-size: 14px;
  font-weight: 600;
}

.and-cal-event {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 6px;
  border-radius: 12px;
  cursor: pointer;
}

.and-cal-event:active { background: #f5f7fa; }

.and-cal-event-ico {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: 0 0 auto;
  opacity: 0.85;
}

.and-cal-event-bar {
  width: 4px;
  border-radius: 4px;
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 36px;
  background: #7e57c2;
}

.and-cal-event-bar.cal-apt-task { background: #f57c00; }
.and-cal-event-bar.cal-apt-event { background: #1976d2; }
.and-cal-event-bar.cal-apt-meeting { background: #2e7d32; }
.and-cal-event-bar.cal-apt-activity { background: #fbc02d; }
.and-cal-event-bar.cal-apt-none { background: #90a4ae; }

.and-cal-event-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.and-cal-event-title {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
}

.and-cal-event-sub {
  font-size: 12px;
  font-weight: 600;
  color: #8a93a2;
}

.and-cal-add-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 12px;
}

.and-cal-add-pill {
  flex: 1 1 auto;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #eef1f5;
  color: #5a6575;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  padding: 0 18px;
  cursor: pointer;
}

.and-cal-add-fab {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #00897b;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
  cursor: pointer;
  flex: 0 0 auto;
}

.cal-page.cal-app:has(.and-cal) .cal-app-fab {
  /* Agenda has its own + ; keep tabbar + subtle */
  opacity: 0.95;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .and-cal-grid {
    padding: 8px 20px 12px;
  }

  .and-cal-day {
    min-height: 52px;
  }

  .and-cal-day-num {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .and-cal-agenda-list,
  .and-cal-agenda-date,
  .and-cal-add-row {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* =============================================================================
   To-Do app list (Google Tasks / Todoist style) ? .cal-app only
   ============================================================================= */

.cal-page.cal-app .td-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #fff;
}

.td-app-when,
.td-app-status {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px 0;
  scrollbar-width: none;
}

.td-app-when::-webkit-scrollbar,
.td-app-status::-webkit-scrollbar { display: none; }

.td-when,
.td-st {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  background: #f1f3f6;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
}

.td-when.on,
.td-st.on {
  background: #111;
  color: #fff;
}

.td-st b {
  font-weight: 800;
  margin-left: 4px;
  opacity: 0.85;
}

.td-st.td-pending.on { background: #ea580c; }
.td-st.td-active.on { background: #2563eb; }
.td-st.td-review.on { background: #7c3aed; }
.td-st.td-done.on { background: #16a34a; }

.td-app-compose {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 14px 4px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: #f4f6f9;
  color: #2563eb;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.td-app-compose-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.td-app-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 16px;
}

.td-app-section {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 16px 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  background: linear-gradient(#fff, #fff 80%, transparent);
}

.td-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}

.td-row:active { background: #f8fafc; }

.td-row.overdue { box-shadow: inset 3px 0 0 #ef4444; }
.td-row.done { opacity: 0.55; }

.td-check {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.td-check.checked {
  background: #16a34a;
  border-color: #16a34a;
}

.td-row-main {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.td-row-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 4px;
}

.td-row.done .td-row-title {
  text-decoration: line-through;
  color: #94a3b8;
}

.td-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}

.td-row-due.hot { color: #dc2626; }
.td-dot { opacity: 0.5; }

.td-row-status {
  font-weight: 700;
}

.td-row-status.cal-task-pending { color: #ea580c; }
.td-row-status.cal-task-progress { color: #2563eb; }
.td-row-status.cal-task-review { color: #7c3aed; }
.td-row-status.cal-task-completed { color: #16a34a; }

.td-more {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
}

.td-app-empty {
  text-align: center;
  padding: 56px 24px;
  color: #94a3b8;
}

.td-app-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.td-app-empty-sub { font-size: 13px; font-weight: 600; }

@media (min-width: 768px) and (max-width: 1024px) {
  .td-app-when,
  .td-app-status,
  .td-app-compose {
    padding-left: 20px;
    padding-right: 20px;
  }
  .td-app-compose { margin-left: 20px; margin-right: 20px; }
  .td-row { padding-left: 20px; padding-right: 20px; }
  .td-app-section { padding-left: 20px; padding-right: 20px; }
}

/* Rectangular scheduler event editors - override theme-host 12px oval (match FormRenderer 3px) */
body .sch-event-popup .dxbl-text-edit,
body .sch-event-popup .dxbl-combobox,
body .sch-event-popup .dxbl-combo-box,
body .sch-event-popup .dxbl-dropdown-edit,
body .sch-event-popup .dxbl-dropdownedit,
body .sch-event-popup .dxbl-spin-edit,
body .sch-event-popup .dxbl-date-edit,
body .sch-event-popup .dxbl-memo,
body .sch-event-popup .dxbl-edit,
body .sch-event-popup .dxbl-editor,
body .sch-event-popup .dxbl-button-edit,
body .sch-event-popup .dxbl-text-edit-input,
body .sch-event-popup .dxbl-edit-input,
body .sch-event-popup .dxbl-text-edit .dxbl-edit-input,
body .sch-event-popup .dxbl-combobox .dxbl-edit-input,
body .sch-event-popup .dxbl-date-edit .dxbl-edit-input,
body .sch-event-popup .dxbl-spin-edit .dxbl-edit-input,
body .sch-event-popup .dxbl-memo textarea,
body .sch-event-popup .sch-input,
body .sch-event-popup .cal-mobile-combo-trigger,
body .sch-event .dxbl-text-edit,
body .sch-event .dxbl-combobox,
body .sch-event .dxbl-combo-box,
body .sch-event .dxbl-dropdown-edit,
body .sch-event .dxbl-dropdownedit,
body .sch-event .dxbl-spin-edit,
body .sch-event .dxbl-date-edit,
body .sch-event .dxbl-memo,
body .sch-event .dxbl-edit,
body .sch-event .dxbl-editor,
body .sch-event .dxbl-button-edit,
body .sch-event .dxbl-text-edit-input,
body .sch-event .dxbl-edit-input,
body .sch-event .dxbl-text-edit .dxbl-edit-input,
body .sch-event .dxbl-combobox .dxbl-edit-input,
body .sch-event .dxbl-date-edit .dxbl-edit-input,
body .sch-event .dxbl-spin-edit .dxbl-edit-input,
body .sch-event .dxbl-memo textarea,
body .sch-event .sch-input,
body .sch-event .cal-mobile-combo-trigger,
body .frm-sch-event .dxbl-text-edit,
body .frm-sch-event .dxbl-combobox,
body .frm-sch-event .dxbl-combo-box,
body .frm-sch-event .dxbl-dropdown-edit,
body .frm-sch-event .dxbl-spin-edit,
body .frm-sch-event .dxbl-date-edit,
body .frm-sch-event .dxbl-memo,
body .frm-sch-event .dxbl-edit,
body .frm-sch-event .dxbl-edit-input,
body .frm-sch-event .dxbl-text-edit-input,
body .frm-sch-event .sch-input,
body .frm-quick-master-popup .dxbl-text-edit,
body .frm-quick-master-popup .dxbl-edit-input {
  border-radius: 3px !important;
}

body .sch-event-popup .dxbl-btn,
body .sch-event-popup .sch-foot-btn,
body .frm-sch-event ~ * .sch-foot-btn,
body .sch-footer .dxbl-btn {
  border-radius: 3px !important;
}