/* ===== TeamWorks Light Theme / PWA modal full view ===== */
:root {
  --ta-bg: #f7f8fb;
  --ta-surface: #ffffff;
  --ta-surface-2: #f1f4f8;
  --ta-border: #e3e7ef;
  --ta-text: #172033;
  --ta-muted: #667085;
  --ta-accent: #6d5dfc;
  --ta-accent-soft: #eef0ff;
  --ta-danger: #dc2626;
  --ta-good: #059669;
}
html { background: var(--ta-bg) !important; }
body {
  background: var(--ta-bg) !important;
  color: var(--ta-text) !important;
}
.header, .app-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--ta-border) !important;
  color: var(--ta-text) !important;
  box-shadow: 0 1px 10px rgba(15,23,42,.04) !important;
}
.header-title, .header h1, .sidebar-logo span, .channel-name, .summary-title,
.user-name, .profile-name, .task-title, .ev-title, .file-name, .modal h2, .card h2,
.settings-card h2, .section h2, .empty strong { color: var(--ta-text) !important; }
.header small, .header-title small, .summary-sub, .section-title span:last-child,
.channel-time, .channel-preview, .ch-time, .ch-preview, .user-email, .profile-email,
.task-meta, .ev-time, .file-meta, .file-desc, .empty, .field, .modal label,
.settings-card .desc, .toggle-label small { color: var(--ta-muted) !important; }
.header-kicker, .sidebar-logo, .section-title, .profile-role, .bottom-nav a.active,
.bottom-nav a:hover, .ch-item.active, .icon-btn, .filter-btn, .unread-toggle,
.sidebar-add, .bubble-open, .replying-label { color: var(--ta-accent) !important; }
.icon-btn, .nav-btn, .cal-nav, .file-btn, .btn-cancel, .btn-sub, .logout-btn,
.back, .btn.secondary {
  background: var(--ta-surface-2) !important;
  color: #475467 !important;
  border-color: var(--ta-border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.icon-btn svg, .logout-btn svg {
  display: block;
  flex-shrink: 0;
}
.icon-btn:hover, .nav-btn:hover, .file-btn:hover, .btn-sub:hover, .btn-cancel:hover {
  background: #e9edf5 !important;
}
.content, .app-body, .cal-wrap, .tasks-wrap, .file-list, .wrap, .kanban-wrap,
.msg-list { background: var(--ta-bg) !important; }
.sidebar, .profile-card, .settings-card, .section, .card, .summary-card, .channel-card,
.ev-card, .task-card, .file-card, .kanban-col, .cal-cell, .upcoming, .dropzone,
.empty, .modal, .file-box {
  background: var(--ta-surface) !important;
  border-color: var(--ta-border) !important;
  color: var(--ta-text) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.04) !important;
}
.summary-card, .channel-card.has-unread, .ch-item.active, .channel-sticky-title,
.replying-box, .uploading-indicator {
  background: var(--ta-accent-soft) !important;
  border-color: #d9ddff !important;
}
.channel-card.has-unread .channel-icon, .summary-badge, .filter-btn.active,
.unread-toggle.active, .btn-primary, .send-btn, .ch-badge, .unread-badge {
  background: var(--ta-accent) !important;
  color: #fff !important;
}
.summary-badge.zero { background: #eef2f7 !important; color: var(--ta-muted) !important; }
.channel-icon, .file-icon, .cal-cell.today, .preview-file-item {
  background: var(--ta-surface-2) !important;
  color: var(--ta-accent) !important;
}
.new-dot { border-color: var(--ta-surface) !important; }
.search, .channel-search, .msg-input, .modal input, .modal textarea, .modal select,
.field input, .field textarea, .field select, #editMsgBody {
  background: var(--ta-surface) !important;
  color: var(--ta-text) !important;
  border: 1px solid #d5dbe7 !important;
}
.search::placeholder, .channel-search::placeholder, .msg-input::placeholder { color: #98a2b3 !important; }
.search:focus, .channel-search:focus, .msg-input:focus, .modal input:focus,
.modal textarea:focus, .modal select:focus, .field input:focus, .field textarea:focus,
.field select:focus, #editMsgBody:focus { border-color: var(--ta-accent) !important; }
.sidebar-bottom, .input-area, .bottom-nav {
  background: rgba(255,255,255,.96) !important;
  border-color: var(--ta-border) !important;
}
.bottom-nav {
  box-shadow: 0 -4px 18px rgba(15,23,42,.06) !important;
}
.bottom-nav a { color: #667085 !important; }
.bubble {
  background: #fff !important;
  border: 1px solid var(--ta-border) !important;
  color: var(--ta-text) !important;
  box-shadow: 0 3px 12px rgba(15,23,42,.05) !important;
}
.msg-row.mine .bubble {
  background: var(--ta-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.bubble-time, .msg-sender, .edited-mark, .date-divider { color: var(--ta-muted) !important; }
.date-divider::before, .date-divider::after { background: var(--ta-border) !important; }
.msg-action-btn, .bubble-file, .reply-quote, .replying-close {
  background: #f2f4f7 !important;
  color: #475467 !important;
}
.msg-row.mine .msg-action-btn {
  background: rgba(255,255,255,.85) !important;
  color: #3a2fa0 !important;
  font-weight: 700 !important;
}
.msg-row.mine .reply-quote {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
.msg-row.mine .msg-delete-btn {
  background: rgba(255,100,100,.85) !important;
  color: #fff !important;
}
.reply-quote-name { color: var(--ta-accent) !important; }
.read-receipt { font-size: 10px; text-align: right; margin-top: 1px; min-height: 13px; }
.read-receipt .check-read { color: var(--ta-accent) !important; font-weight: 700 !important; }
.reply-quote-text, .replying-text { color: #475467 !important; }
.msg-row.mine .reply-quote-name, .msg-row.mine .reply-quote-text { color: #fff !important; }
.cal-grid, .cal-head, .cal-header, .dow-cell { background: var(--ta-bg) !important; border-color: var(--ta-border) !important; }
.cal-cell:hover, .ev-card:hover, .task-card:hover, .file-card:hover, .ch-item:hover,
.channel-card:hover { background: #fbfcff !important; }
.prio-high { background:#fee2e2 !important; color:#b91c1c !important; }
.prio-medium { background:#fef3c7 !important; color:#b45309 !important; }
.prio-low { background:#dcfce7 !important; color:#15803d !important; }
.due-tag, .creator-tag { background:#f2f4f7 !important; color:#667085 !important; }
.assignee-tag, .role-member { background:var(--ta-accent-soft) !important; color:var(--ta-accent) !important; }
.role-admin { background:#fff7ed !important; color:#c2410c !important; }
.msg { background:#ecfdf3 !important; color:#067647 !important; }
.err { background:#fef3f2 !important; color:#b42318 !important; }
.toggle-track { background:#d0d5dd !important; }
.toggle input:checked + .toggle-track { background: var(--ta-accent) !important; }
.strength-bar, .uploading-progress, .progress-bar { background:#e4e7ec !important; }
.uploading-progress-fill, .progress-fill { background:var(--ta-accent) !important; }
.modal-bg {
  background: rgba(15,23,42,.34) !important;
  align-items: flex-end !important;
}
.modal {
  max-height: min(86dvh, 760px) !important;
  padding: 16px 16px !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  border-radius: 18px 18px 0 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.modal h2 { margin-bottom: 12px !important; }
.modal label, .field { margin-bottom: 10px !important; }
.modal-btns { margin-top: 12px !important; }
@media (max-width: 640px) {
  .modal-bg {
    align-items: stretch !important;
  }
  .modal {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
  }
  .content { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
}
@media (display-mode: standalone) and (max-width: 640px) {
  .modal-bg {
    align-items: stretch !important;
  }
  .modal {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}
/* 画像専用画面は画像閲覧時だけ黒背景を維持 */
.viewer { background: var(--ta-bg) !important; }
.viewer.image-mode { background:#000 !important; }
.viewer.image-mode img { background:#111 !important; }

/* ===== 2026-05-05 UI fix: shared task cards light + compact PWA tabs ===== */
.kanban, .kanban-wrap {
  background: var(--ta-bg) !important;
}
.col {
  background: var(--ta-surface) !important;
  border: 1px solid var(--ta-border) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.04) !important;
  color: var(--ta-text) !important;
}
.col-head {
  color: var(--ta-text) !important;
  border-bottom: 1px solid var(--ta-border) !important;
}
.col-body {
  background: var(--ta-surface) !important;
}
.col-add {
  background: #fbfcff !important;
  border-color: #d9ddff !important;
  color: var(--ta-accent) !important;
}
.col-add:hover {
  background: var(--ta-accent-soft) !important;
  border-color: var(--ta-accent) !important;
}
.col-badge {
  background: var(--ta-accent-soft) !important;
  color: var(--ta-accent) !important;
}
.col-head[style*="--col:#54c7c0"] .col-badge,
.col-head[style*="#54c7c0"] .col-badge {
  background: #e6fffb !important;
  color: #0f766e !important;
}
.cancelled-card {
  opacity: .78 !important;
  background: #f8fafc !important;
}

/* 下部タブ：PCでも常時表示 */
.bottom-nav {
  display: flex !important;
  min-height: 0 !important;
  height: calc(56px + env(safe-area-inset-bottom)) !important;
  padding-top: 0 !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  align-items: stretch !important;
}
.bottom-nav a {
  height: 56px !important;
  padding: 5px 4px 4px !important;
  justify-content: center !important;
  gap: 1px !important;
  font-size: 11px !important;
  line-height: 1.12 !important;
}
.nav-icon {
  font-size: 20px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
}
@media (max-width: 640px) {
  .content {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
}
@media (display-mode: standalone) {
  .bottom-nav {
    height: calc(54px + env(safe-area-inset-bottom)) !important;
  }
  .bottom-nav a {
    height: 54px !important;
    padding-top: 4px !important;
    padding-bottom: 3px !important;
  }
}

/* ===== 2026-05-05 modal fix: mobile/PWA full-height editor ===== */
@media (max-width: 640px) {
  .modal-bg {
    align-items: stretch !important;
  }
  .modal {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .modal-btns {
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
  }
}

/* ===== 2026-05-05 channel manage buttons ===== */
.channel-manage-btn {
  background: var(--ta-surface-2) !important;
  color: var(--ta-accent) !important;
  border-color: #d9ddff !important;
}
.channel-manage-btn:hover { background: var(--ta-accent-soft) !important; }
.btn-danger {
  background: var(--ta-danger) !important;
  color: #fff !important;
}



  /* 予定・タスクだけは全画面ではなく、下ナビに隠れない高さのボトムシートに戻す */
  #evModal,
  #taskModal {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 10px calc(66px + env(safe-area-inset-bottom)) !important;
  }
  #evModal .modal,
  #taskModal .modal {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}
@media (display-mode: standalone) and (max-width: 640px) {
  #evModal,
  #taskModal {
    align-items: flex-end !important;
    padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important;
  }
  #evModal .modal,
  #taskModal .modal {
    height: auto !important;
    max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
  }
}



/* ===== 2026-05-05 home channel list scroll fix ===== */
html, body {
  max-width: 100% !important;
}
body {
  overflow-x: hidden !important;
}
body:has(.channel-list) {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
body:has(.channel-list) .content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}
body:has(.channel-list) .channel-list {
  padding-bottom: 8px !important;
}
@supports not selector(:has(*)) {
  .content {
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ===== 2026-05-05 private channel member selector ===== */
.privacy-box {
  background: var(--ta-accent-soft) !important;
  border-color: #d9ddff !important;
}
.check-row,
.member-option {
  color: var(--ta-text) !important;
}
.modal input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: #fff !important;
  border: 1px solid #98a2b3 !important;
  accent-color: var(--ta-accent) !important;
  box-shadow: none !important;
}
.member-list {
  background: #fbfcff !important;
  border-color: var(--ta-border) !important;
}
.member-option:hover {
  background: #f2f4f7 !important;
}
.member-option small,
.private-note,
.member-section-title {
  color: var(--ta-muted) !important;
}

/* ===== 2026-05-06 calendar/task modal bottom spacing adjusted ===== */
@media (max-width: 640px) {
  #evModal .modal,
  #taskModal .modal {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  #evModal .modal-btns,
  #taskModal .modal-btns {
    margin-bottom: 0 !important;
  }
}
@media (display-mode: standalone) and (max-width: 640px) {
  #evModal .modal,
  #taskModal .modal {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* ===== 2026-05-06 PWA calendar/task modal spacing compact ===== */
@media (max-width: 640px) {
  #evModal,
  #taskModal {
    /* 下部タブには重ならない範囲で、モーダルを少し下げる */
    padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }
  #evModal .modal,
  #taskModal .modal {
    /* ボタン下の余白を控えめにする */
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  #evModal .modal-btns,
  #taskModal .modal-btns {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
@media (display-mode: standalone) and (max-width: 640px) {
  #evModal,
  #taskModal {
    padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }
  #evModal .modal,
  #taskModal .modal {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

/* ===== 2026-05-06 modal spacing unified: browser matches PWA ===== */
@media (max-width: 640px) {
  #evModal,
  #taskModal {
    /* PWA時の見え方に合わせて、通常ブラウザでも同じ下位置にする */
    padding-bottom: calc(52px + max(28px, env(safe-area-inset-bottom))) !important;
  }
  #evModal .modal,
  #taskModal .modal {
    /* PWA基準のコンパクトなボタン下余白に統一 */
    padding-bottom: calc(8px + max(28px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top) - max(28px, env(safe-area-inset-bottom))) !important;
  }
  #evModal .modal-btns,
  #taskModal .modal-btns {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
@media (display-mode: standalone) and (max-width: 640px) {
  #evModal,
  #taskModal {
    padding-bottom: calc(52px + max(28px, env(safe-area-inset-bottom))) !important;
  }
  #evModal .modal,
  #taskModal .modal {
    padding-bottom: calc(8px + max(28px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top) - max(28px, env(safe-area-inset-bottom))) !important;
  }
}

/* ===== 2026-05-06 task multiple assignees ===== */
.assignee-check-list {
  background: #fbfcff !important;
  border-color: var(--ta-border) !important;
}
.assignee-check {
  color: var(--ta-text) !important;
}
.assignee-check:hover {
  background: #f2f4f7 !important;
  border-radius: 8px;
}
.assignee-hint {
  color: var(--ta-muted) !important;
}


/* ===== 2026-05-06 task assignee searchable picker ===== */
.assignee-picker,
.assignee-panel {
  background: #fbfcff !important;
  border-color: var(--ta-border) !important;
}
.assignee-mode,
.assignee-edit-btn,
.assignee-panel-tools button,
.assignee-panel-close {
  background: #fff !important;
  color: #475467 !important;
  border-color: #d5dbe7 !important;
}
.assignee-mode.active {
  background: var(--ta-accent) !important;
  color: #fff !important;
  border-color: var(--ta-accent) !important;
  box-shadow: 0 4px 10px rgba(109,93,252,.18) !important;
}
.assignee-summary,
.assignee-panel-tools {
  color: var(--ta-muted) !important;
}
.assignee-panel-head,
.assignee-row {
  color: var(--ta-text) !important;
}
.assignee-search {
  background: #fff !important;
  color: var(--ta-text) !important;
  border-color: #d5dbe7 !important;
}
.assignee-row:hover {
  background: #f2f4f7 !important;
}
.assignee-row input {
  accent-color: var(--ta-accent) !important;
}
.assignee-done-btn {
  background: var(--ta-accent) !important;
  color: #fff !important;
  border-color: var(--ta-accent) !important;
}
.assignee-tag.assignee-all {
  background: #dffaf6 !important;
  color: #0f766e !important;
}
.assignee-tag.assignee-none {
  background: #f2f4f7 !important;
  color: #667085 !important;
}


/* ===== 2026-05-06 task assignee simple dropdown ===== */
.assignee-picker-simple {
  background: #fbfcff !important;
  border-color: var(--ta-border) !important;
}
.assignee-select-btn {
  background: var(--ta-accent) !important;
  color: #fff !important;
  border-color: var(--ta-accent) !important;
}
.assignee-menu {
  background: #fff !important;
  border-color: #d5dbe7 !important;
}
.assignee-option {
  color: var(--ta-text) !important;
}
.assignee-option:hover,
.assignee-option.active {
  background: var(--ta-accent-soft) !important;
  color: var(--ta-accent) !important;
}
.assignee-menu-title,
.assignee-summary {
  color: var(--ta-muted) !important;
}
.assignee-row {
  color: var(--ta-text) !important;
}
.assignee-row:hover {
  background: #f2f4f7 !important;
}
.assignee-row input {
  accent-color: var(--ta-accent) !important;
}


/* ===== 2026-05-06 task assignee members only compact rows ===== */
.assignee-menu {
  padding: 6px !important;
  gap: 2px !important;
}
.assignee-option {
  padding: 5px 8px !important;
  line-height: 1.25 !important;
}
.assignee-menu-title {
  padding: 4px 8px 2px !important;
}
.assignee-row {
  padding: 4px 8px !important;
  gap: 8px !important;
  line-height: 1.25 !important;
  border-radius: 8px !important;
}
.assignee-row input {
  width: 16px !important;
  height: 16px !important;
}