:root {
  --ts-bg: #f4f6f8;
  --ts-surface: #ffffff;
  --ts-border: #d8dee4;
  --ts-text: #1f2933;
  --ts-muted: #6b7280;
  --ts-accent: #2563eb;
  --ts-accent-hover: #1d4ed8;
  --ts-danger: #dc2626;
  --ts-sidebar: #1e293b;
  --ts-sidebar-text: #e2e8f0;
  --ts-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  --ts-table-head-bg: #f8fafc;
  --ts-table-section-gap: 1.25rem;
  --ts-date-picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --ts-row-hover: #f1f5f9;
  --ts-row-ip-bg: #f4fbff;
  --ts-row-done-bg: #a9a9a9;
  --ts-row-done-fg: #6b7280;
  --ts-row-done-hover: #9a9a9a;
  --ts-drawer-target-bg: #e4e4e7;
  --ts-drawer-target-accent: #52525b;
  --ts-alert-success-bg: #ecfdf5;
  --ts-alert-success-border: #a7f3d0;
  --ts-alert-success-fg: #047857;
  --ts-alert-error-bg: #fef2f2;
  --ts-alert-error-border: #fecaca;
  --ts-alert-error-fg: #b91c1c;
  --ts-log-item-bg: #f8fafc;
  --ts-panel-subtle-bg: #f8fafc;
  font-family: "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ts-text);
  background: var(--ts-bg);
}

.ts-muted { color: var(--ts-muted); }
.ts-error { color: var(--ts-danger); font-size: 0.9rem; }
.ts-hint { color: var(--ts-muted); font-size: 0.85rem; }

.ts-btn {
  border: 1px solid var(--ts-border);
  background: var(--ts-surface);
  color: var(--ts-text);
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}
.ts-btn:hover { filter: brightness(0.98); }
.ts-btn-primary { background: var(--ts-accent); border-color: var(--ts-accent); color: #fff; }
.ts-btn-primary:hover { background: var(--ts-accent-hover); }
.ts-btn-accent { width: 100%; background: #0ea5e9; border-color: #0ea5e9; color: #fff; font-weight: 600; }
.ts-btn-ghost { background: transparent; }

.ts-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
/* ログイン画面: パスキー等のブラウザ標準 UI をライト表示（dark + color-scheme の黒帯対策） */
html[data-theme="dark"]:has(body.ts-login-page) {
  color-scheme: light;
}
.ts-login-card {
  width: min(420px, 92vw);
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--ts-shadow);
}
.ts-login-card-wide {
  width: min(520px, 94vw);
}
.ts-passkey-direct-login {
  margin-bottom: 0;
}
.ts-btn-block {
  width: 100%;
}
.ts-login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0;
  color: var(--ts-muted);
  font-size: 0.85rem;
}
.ts-login-divider::before,
.ts-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ts-border);
}
.ts-login-password-form {
  margin: 0;
  padding-bottom: 1rem;
}
.ts-login-password-form .ts-btn {
  width: 100%;
}
.ts-login-password-fields {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 1rem;
}
.ts-login-password-fields[hidden] {
  display: none;
}
.ts-login-password-form.is-open .ts-login-password-fields {
  display: flex;
}
.ts-login-password-fields label {
  margin-top: 0;
}
/* パスキー優先ログイン: 折りたたみ時の余白・グローバル button margin を打ち消す */
.ts-login-card--passkey #btnPasskeyDirect {
  margin-top: 0;
}
.ts-login-card--passkey .ts-login-password-form:not(.is-open) .ts-login-password-toggle {
  margin-top: 0;
}
/* パスキー画面: 初期は .ts-login-divider の 2rem 0 を維持。入力欄展開時だけ下余白を 0 に */
.ts-login-card--passkey .ts-login-divider:has(+ .ts-login-password-form.is-open) {
  margin-bottom: 0;
}
.ts-login-card--passkey .ts-login-password-form.is-open {
  margin-top: 0;
}
.ts-login-card--passkey .ts-login-password-form.is-open .ts-login-password-fields {
  margin-top: 0;
}
.ts-login-card--passkey .ts-login-password-form.is-open .ts-login-password-submit {
  margin-top: 0;
}
.ts-login-password-toggle[hidden],
.ts-login-password-submit[hidden] {
  display: none;
}
.ts-login-step-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}
.ts-code-block code {
  word-break: break-all;
}
.ts-break-all {
  word-break: break-all;
}
.ts-recovery-code-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}
.ts-totp-qr-wrap {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 1rem auto;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 10px;
}
.ts-totp-qr img,
.ts-totp-qr canvas {
  display: block;
}
[data-theme="dark"] .ts-totp-qr-wrap {
  background: #fff;
}
.ts-login-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.65rem;
  margin-bottom: 2.25rem;
}
.ts-login-brand .ts-login-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.ts-login-brand-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.ts-login-card h1.ts-login-brand-title {
  margin: 0 0 1.25rem;
  text-align: center;
}
.ts-login-subtitle {
  margin: -0.5rem 0 1.5rem;
  text-align: center;
}
.ts-login-card label { display: grid; gap: 0.35rem; margin-top: 1rem; }
.ts-login-card input {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  font-size: 1rem;
}
.ts-login-card button { width: 100%; margin-top: 1.25rem; }

.ts-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.ts-sidebar {
  background: var(--ts-sidebar);
  color: var(--ts-sidebar-text);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
}
.ts-sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-inline: 0.65rem;
}
.ts-user-badge {
  font-size: 0.85rem;
  color: #94a3b8;
}
.ts-role-badge {
  font-size: 0.75rem;
  color: #64748b;
}
.ts-sidebar-link {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.ts-tabs {
  display: grid;
  gap: 0.35rem;
}
.ts-tabs button {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
}
.ts-tabs button.active,
.ts-tabs button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.ts-tabs-nav .ts-tab-nav-item {
  display: block;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: inherit;
}
.ts-tabs-nav .ts-tab-nav-item:hover,
.ts-tabs-nav .ts-tab-nav-item.is-active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.ts-sidebar-personal-link {
  margin-top: 0.1rem;
}
.ts-group-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ts-group-list h2 {
  margin: 0.5rem 0 0.35rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  flex-shrink: 0;
}
.ts-group-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ts-group-list li button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: inherit;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}
.ts-group-list li button.active,
.ts-group-list li button:hover {
  background: rgba(255, 255, 255, 0.08);
}
#btnLogout { margin-top: auto; color: #cbd5e1; }

.ts-main {
  padding: 1.25rem 1.5rem 2rem;
  min-width: 0;
}
.ts-main-head { margin-bottom: 1rem; }
.ts-main-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ts-main-head h1 { margin: 0; font-size: 1.35rem; }
.ts-filter-clear { font-size: 0.85rem; }
.ts-assignee-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--ts-accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ts-assignee-link:hover { color: var(--ts-accent-hover); }

.ts-table-wrap {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.ts-table th,
.ts-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--ts-border);
  text-align: left;
  vertical-align: middle;
}
.ts-table th.ts-col-status,
.ts-table td.ts-col-status,
.ts-table th.ts-col-center,
.ts-table td.ts-col-center {
  text-align: center;
}
.ts-table th {
  background: var(--ts-table-head-bg, #f8fafc);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.ts-table th[data-sort]::after {
  content: " ⇅";
  color: var(--ts-muted);
  font-size: 0.75rem;
}
.ts-table th[data-sort].is-sort-asc::after {
  content: " ↑";
  color: var(--ts-accent);
}
.ts-table th[data-sort].is-sort-desc::after {
  content: " ↓";
  color: var(--ts-accent);
}
.ts-table tbody tr {
  cursor: pointer;
}
.ts-table tbody tr:hover {
  background: var(--ts-row-hover, #f1f5f9);
}
.ts-table tbody tr.is-late td.ts-col-days {
  color: var(--ts-danger);
  font-weight: 600;
}
.ts-table tbody tr td.ts-col-days.ts-days-today,
.ts-task-card dd.ts-days-today {
  color: #ffa500;
  font-weight: 600;
}
/* 一覧行のステータス色（行全体・未着手は無色） */
.ts-table tbody tr.ts-row-status-in_progress {
  background: var(--ts-row-ip-bg, #f4fbff);
}
.ts-table tbody tr.ts-row-status-completed {
  background: var(--ts-row-done-bg, #a9a9a9);
}
.ts-table tbody tr.ts-row-status-completed td:not(.ts-col-status) {
  color: var(--ts-row-done-fg, #6b7280);
  text-decoration: line-through;
}
.ts-table tbody tr.ts-row-status-completed td.ts-cell-na {
  text-decoration: none;
}
.ts-table tbody tr.ts-row-status-completed .ts-assignee-link {
  color: var(--ts-row-done-fg, #6b7280);
  text-decoration: line-through;
}
.ts-table tbody tr.ts-row-status-completed .ts-assignee-link:hover {
  color: var(--ts-row-done-fg, #6b7280);
}
.ts-table tbody tr.ts-row-status-completed:hover {
  background: var(--ts-row-done-hover, #9a9a9a);
}
.ts-table tbody tr.ts-row-status-completed.is-drawer-target td:not(.ts-col-status) {
  color: var(--ts-row-done-fg, #6b7280);
}
.ts-table tbody tr.is-drawer-target {
  background: var(--ts-drawer-target-bg, #e4e4e7) !important;
  color: var(--ts-text);
  box-shadow: inset 4px 0 0 var(--ts-drawer-target-accent, #52525b);
}
.ts-table tbody tr.is-drawer-target:hover {
  background: var(--ts-drawer-target-bg, #e4e4e7) !important;
}
.ts-status-badge,
.ts-status-select {
  display: inline-block;
  box-sizing: border-box;
  min-width: 5.5rem;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  text-align-last: center;
}
.ts-col-status .ts-status-select {
  display: block;
  width: 5.75rem;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.ts-status-select option {
  text-align: center;
}
.ts-status-not_started {
  background: var(--ts-status-ns-bg, #e2e8f0);
  color: var(--ts-status-ns-fg, #334155);
  border-color: var(--ts-status-ns-border, #cbd5e1);
}
.ts-status-in_progress {
  background: var(--ts-status-ip-bg, #dbeafe);
  color: var(--ts-status-ip-fg, #1d4ed8);
  border-color: var(--ts-status-ip-border, #93c5fd);
}
.ts-status-completed {
  background: var(--ts-status-done-bg, #dcfce7);
  color: var(--ts-status-done-fg, #15803d);
  border-color: var(--ts-status-done-border, #86efac);
}
.ts-task-card-status {
  text-align: left;
  justify-content: flex-start;
}
.ts-task-card.ts-row-status-in_progress {
  background: var(--ts-row-ip-bg, #f4fbff);
}
.ts-task-card.ts-row-status-completed {
  background: var(--ts-row-done-bg, #a9a9a9);
}
.ts-task-card.ts-row-status-completed .ts-task-card-title,
.ts-task-card.ts-row-status-completed .ts-task-card-due,
.ts-task-card.ts-row-status-completed .ts-task-card-meta dd:not(.ts-task-card-status),
.ts-task-card.ts-row-status-completed .ts-task-card-notes,
.ts-task-card.ts-row-status-completed .ts-assignee-link {
  color: var(--ts-row-done-fg, #6b7280);
  text-decoration: line-through;
}
.ts-task-card.ts-row-status-completed .ts-task-card-meta dd.ts-cell-na {
  text-decoration: none;
}
.ts-task-card.ts-row-status-completed .ts-assignee-link:hover {
  color: var(--ts-row-done-fg, #6b7280);
}
.ts-task-card.ts-row-status-completed .ts-task-card-status,
.ts-task-card.ts-row-status-completed .ts-status-select,
.ts-task-card.ts-row-status-completed .ts-status-badge {
  text-decoration: none;
}
.ts-task-card.ts-row-status-completed.is-drawer-target .ts-task-card-title,
.ts-task-card.ts-row-status-completed.is-drawer-target .ts-task-card-due,
.ts-task-card.ts-row-status-completed.is-drawer-target .ts-task-card-meta dd:not(.ts-task-card-status),
.ts-task-card.ts-row-status-completed.is-drawer-target .ts-task-card-notes {
  color: var(--ts-row-done-fg, #6b7280);
}
.ts-task-card.is-drawer-target {
  background: var(--ts-drawer-target-bg, #e4e4e7) !important;
  color: var(--ts-text);
  border-color: var(--ts-drawer-target-accent, #52525b);
  box-shadow: inset 4px 0 0 var(--ts-drawer-target-accent, #52525b), 0 0 0 1px var(--ts-drawer-target-accent, #52525b);
}
.ts-table select {
  padding: 0.25rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--ts-border);
}

/* ダッシュボード一覧（PC）の列幅 */
#taskTable {
  table-layout: fixed;
  width: max(100%, 64rem);
}
#taskTable .ts-col-title {
  width: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#taskTable th.ts-col-due,
#taskTable th.ts-col-days,
#taskTable th.ts-col-assignee {
  width: 11rem;
}
#taskTable .ts-col-due {
  white-space: nowrap;
}
#taskTable .ts-col-assignee {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#taskTable .ts-col-status {
  width: 11rem;
}
#taskTable .ts-col-detail {
  width: 4.25rem;
  white-space: nowrap;
}
.ts-detail-list-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 4px;
  background: var(--ts-accent, #2563eb);
  color: #fff;
  vertical-align: middle;
}
.ts-task-card-title .ts-detail-list-badge {
  margin-left: 0.4rem;
  font-size: 0.72rem;
}
#taskTable .ts-col-notes {
  padding-left: calc(0.75rem + var(--ts-table-section-gap));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ダッシュボード（PC）: タイトル・検索は固定。表エリアだけスクロールし列見出しは sticky */
@media (min-width: 901px) {
  .ts-layout:has(.ts-dashboard-main) {
    height: 100vh;
    overflow: hidden;
  }
  .ts-layout:has(.ts-dashboard-main) > .ts-main {
    min-height: 0;
  }
  .ts-dashboard-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ts-dashboard-main > .ts-alert,
  .ts-dashboard-main > .ts-main-head,
  .ts-dashboard-main > #taskListAlert {
    flex-shrink: 0;
  }
  .ts-dashboard-main .ts-table-wrap-desktop {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ts-dashboard-main #taskTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ts-table-head-bg, #f8fafc);
    box-shadow: 0 1px 0 var(--ts-border);
  }
}

.ts-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 30;
}
.ts-drawer-backdrop.is-open {
  display: block;
}
.ts-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(480px, 100vw);
  height: 100vh;
  background: var(--ts-surface);
  border-left: 1px solid var(--ts-border);
  box-shadow: var(--ts-shadow);
  z-index: 40;
  flex-direction: column;
}
.ts-drawer.is-open {
  display: flex;
}
.ts-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ts-border);
}
.ts-drawer-head h2 { margin: 0; font-size: 1.1rem; }
.ts-drawer-head button {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.ts-drawer-body {
  padding: 1rem 1.25rem 2rem;
  overflow: auto;
}
.ts-drawer-body dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1rem;
}
.ts-drawer-body dt { color: var(--ts-muted); }
.ts-drawer-body textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  padding: 0.5rem;
}
.ts-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.ts-drawer-body h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  color: var(--ts-text);
}
.ts-log-list li {
  font-size: 0.88rem;
  padding: 0.5rem 0.65rem;
  background: var(--ts-log-item-bg);
  color: var(--ts-text);
  border-radius: 8px;
  border: 1px solid var(--ts-border);
}

.ts-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: min(520px, 92vw);
  box-shadow: var(--ts-shadow);
}
.ts-modal-narrow {
  max-width: min(92vw, 420px);
}
.ts-twofa-reauth-dialog {
  padding: 1.25rem;
}
.ts-twofa-reauth-dialog .ts-modal-head {
  margin-bottom: 0.75rem;
}
.ts-twofa-reauth-dialog .ts-hint {
  margin: 0 0 1rem;
}
.ts-line-friend-dialog-form {
  padding: 1.25rem;
  display: grid;
  gap: 0.85rem;
}
.ts-line-friend-dialog-form .ts-modal-head {
  margin-bottom: 0;
}
.ts-line-friend-dialog-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ts-text);
}
.ts-line-friend-dialog-account {
  margin: 0;
}
.ts-line-friend-dialog-actions {
  margin-top: 0.35rem;
  justify-content: flex-end;
}
.ts-modal::backdrop { background: rgba(15, 23, 42, 0.4); }
.ts-modal form {
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}
.ts-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ts-modal-head h2 {
  margin: 0;
}
.ts-modal-close {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ts-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  flex: 0 0 auto;
}
.ts-modal-close:hover,
.ts-modal-close:focus {
  background: var(--ts-row-hover);
  color: var(--ts-text);
  outline: none;
}
.ts-modal label { display: grid; gap: 0.35rem; font-size: 0.9rem; min-width: 0; }
.ts-modal input,
.ts-modal select,
.ts-modal textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  font: inherit;
}
.ts-modal .ts-date-field-shell > input[type="date"],
.ts-drawer-form .ts-date-field-shell > input[type="date"] {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.ts-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

/* 期日: ネイティブ input を透明 overlay にし、見た目は独自表示で統一 */
.ts-date-field-shell {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.5rem 2.25rem 0.5rem 0.6rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  background: var(--ts-field-bg, #fff);
  color: var(--ts-text);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}
.ts-date-field-shell.is-empty {
  color: var(--ts-muted);
}
.ts-date-field-shell .ts-date-display {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.ts-date-field-shell .ts-date-icon {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  background: var(--ts-date-picker-icon) center / contain no-repeat;
  pointer-events: none;
}
.ts-date-field-shell > input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  font: inherit;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ts-date-field-shell > input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: transparent;
}

.ts-drawer-slack {
    margin: 1rem 0 1.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    background: var(--ts-panel-subtle-bg);
}
.ts-drawer-subhead {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}
.ts-drawer-slack-status {
    margin: 0 0 0.35rem;
    font-weight: 600;
}
.ts-drawer-slack-list {
    margin: 0 0 0.5rem 1.1rem;
    padding: 0;
}
.ts-drawer-slack-list li {
    margin: 0.15rem 0;
}
.ts-drawer-slack-note,
.ts-drawer-slack .ts-hint {
    margin: 0.35rem 0 0;
}
.ts-drawer-slack-warn {
    color: var(--ts-danger, #b42318);
}
.ts-options-section {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}
.ts-modal .ts-options-section-label {
  display: block;
  margin: 0;
  font-size: 0.9rem;
  font-weight: inherit;
}
.ts-options-blocks {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.ts-drawer-form .ts-field {
  min-width: 0;
  margin-bottom: 1.05rem;
}
.ts-drawer-form .ts-options-section .ts-slack-block {
  margin: 0;
}
.ts-drawer-form .ts-slack-block {
  margin: 0.75rem 0 1rem;
}
.ts-slack-block {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  background: var(--ts-panel-subtle-bg);
}
.ts-modal .ts-slack-block label,
.ts-drawer-form .ts-slack-block label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  margin-bottom: 0;
  color: var(--ts-text);
}
.ts-slack-master {
  font-size: 0.9rem;
  font-weight: 600;
}
.ts-slack-hint {
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}
.ts-slack-options {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.ts-slack-options[hidden] {
  display: none !important;
}
.ts-visibility-options {
  grid-template-columns: 1fr;
  gap: 0.65rem;
}
.ts-visibility-options label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
}
.ts-modal .ts-slack-block .ts-visibility-options label,
.ts-drawer-form .ts-slack-block .ts-visibility-options label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.ts-visibility-options select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-weight: normal;
}
.ts-drawer-form .ts-visibility-block {
  margin: 0.75rem 0 1rem;
}
.ts-slack-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.65rem;
  align-items: center;
}
.ts-slack-opt {
  font-size: 0.88rem;
  font-weight: normal;
}
.ts-slack-opt-time {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
.ts-modal .ts-slack-block .ts-time-input,
.ts-drawer-form .ts-slack-block .ts-time-input {
  width: 4.5rem;
  padding: 0.35rem 0.45rem;
}
.ts-time-input {
  width: 4.5rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--ts-border);
  border-radius: 6px;
  font: inherit;
  text-align: center;
}

.ts-field-label-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ts-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ts-muted);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: help;
  position: relative;
  line-height: 1;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.ts-help-icon:focus {
  outline: 2px solid var(--ts-accent, #2563eb);
  outline-offset: 1px;
}
.ts-help-icon::after {
  content: attr(data-ts-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 0.45rem 0.6rem;
  background: #1f2933;
  color: #fff;
  font-size: 0.8rem;
  font-weight: normal;
  line-height: 1.35;
  border-radius: 6px;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 10;
  text-align: left;
}
.ts-help-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2933;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  z-index: 10;
}
.ts-help-icon:hover::after,
.ts-help-icon:focus::after,
.ts-help-icon:hover::before,
.ts-help-icon:focus::before {
  opacity: 1;
  visibility: visible;
}
.ts-target-hint {
  margin: -0.3rem 0 0;
}

.ts-visibility-options select option.ts-locked-target,
.ts-modal .ts-visibility-options select option.ts-locked-target,
.ts-drawer-form .ts-visibility-options select option.ts-locked-target {
  background: var(--ts-drawer-target-bg);
  color: var(--ts-text);
}

/* --- Account / Settings --- */
.ts-sidebar-nav {
  display: grid;
  gap: 0.35rem;
}
.ts-sidebar-nav-item {
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 0.92rem;
}
.ts-sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
.ts-sidebar-nav-item.is-active {
  background: rgba(37, 99, 235, 0.35);
  border-color: rgba(147, 197, 253, 0.35);
  font-weight: 600;
}

.ts-admin-menu {
  margin-top: 0.15rem;
}
.ts-admin-menu > summary {
  list-style: none;
}
.ts-admin-menu > summary::-webkit-details-marker {
  display: none;
}
.ts-admin-menu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
}
.ts-admin-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
.ts-admin-menu[open] > .ts-admin-menu-toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.ts-admin-menu-chevron {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -0.15rem;
  opacity: 0.75;
  flex-shrink: 0;
}
.ts-admin-menu[open] .ts-admin-menu-chevron {
  transform: rotate(-135deg);
  margin-top: 0.1rem;
}
.ts-admin-menu-panel {
  display: grid;
  gap: 0.2rem;
  padding: 0.25rem 0 0.35rem 0.65rem;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  margin: 0.15rem 0 0 0.5rem;
}
.ts-admin-menu-item {
  font-size: 0.88rem;
  padding-left: 0.5rem;
}
.ts-sidebar-logout {
  margin-top: auto;
  flex-shrink: 0;
  text-align: center;
  color: #cbd5e1;
  text-decoration: none;
}

/* PC: サイドバーは画面高固定。タスク一覧の長さに引きずられない */
@media (min-width: 901px) {
  .ts-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }
  .ts-sidebar-head,
  .ts-sidebar-nav,
  .ts-tabs,
  .ts-sidebar > .ts-btn {
    flex-shrink: 0;
  }
}

.ts-account-main { max-width: 960px; }
.ts-settings-main {
  max-width: 1200px;
  width: 100%;
}
.ts-page-header { margin-bottom: 1.25rem; }
.ts-page-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-muted);
  font-weight: 600;
}
.ts-page-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ts-page-desc {
  margin: 0.5rem 0 0;
  color: var(--ts-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.ts-alert {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  border: 1px solid transparent;
}
.ts-alert-success {
  background: var(--ts-alert-success-bg);
  border-color: var(--ts-alert-success-border);
  color: var(--ts-alert-success-fg);
}
.ts-alert-error {
  background: var(--ts-alert-error-bg);
  border-color: var(--ts-alert-error-border);
  color: var(--ts-alert-error-fg);
}

.ts-profile-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #f8fafc;
  border-radius: 14px;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--ts-shadow);
}
.ts-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ts-profile-meta h2 {
  margin: 0 0 0.65rem;
  font-size: 1.2rem;
}
.ts-profile-dl {
  margin: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
}
.ts-profile-dl > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.ts-profile-dl dt {
  margin: 0;
  color: #94a3b8;
}
.ts-profile-dl dd { margin: 0; }
.ts-profile-dl code {
  background: rgba(0, 0, 0, 0.2);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-size: 0.85rem;
}
.ts-pill {
  display: inline-block;
  background: rgba(37, 99, 235, 0.35);
  border: 1px solid rgba(147, 197, 253, 0.4);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.ts-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.ts-settings-grid + .ts-settings-grid {
  margin-top: 1.25rem;
}
.ts-settings-card-full {
  grid-column: 1 / -1;
}
.ts-settings-card {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.ts-settings-card-head {
  display: flex;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem 0;
  align-items: flex-start;
}
.ts-slack-connect-card .ts-slack-status-dl {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.ts-slack-connect-card .ts-slack-status-dl div {
  display: grid;
  grid-template-columns: minmax(10.5rem, 12rem) 1fr;
  gap: 0.65rem 1rem;
  font-size: 0.92rem;
  align-items: baseline;
}
.ts-slack-connect-card .ts-slack-status-dl dt {
  margin: 0;
  color: #94a3b8;
  line-height: 1.4;
}
.ts-slack-connect-card .ts-slack-status-dl dd {
  margin: 0;
}
.ts-settings-card-body .ts-slack-status-dl {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.ts-settings-card-body .ts-slack-status-dl div {
  display: grid;
  grid-template-columns: minmax(10.5rem, 12rem) 1fr;
  gap: 0.65rem 1rem;
  font-size: 0.92rem;
  align-items: baseline;
}
.ts-settings-card-body .ts-slack-status-dl dt {
  margin: 0;
  color: #94a3b8;
  line-height: 1.4;
}
.ts-settings-card-body .ts-slack-status-dl dd {
  margin: 0;
}
.ts-platform-passkey-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.ts-platform-passkey-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  font-size: 0.92rem;
}
.ts-pill-ok {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border-color: rgba(22, 101, 52, 0.28);
}

.ts-settings-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--ts-accent);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ts-settings-card-head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.ts-settings-card-head p {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--ts-muted);
  line-height: 1.4;
}
.ts-settings-card-head + .ts-settings-card-body {
  padding-top: 1rem;
}
.ts-settings-kv {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
}
.ts-settings-kv-row {
  display: grid;
  grid-template-columns: minmax(10.5rem, 12rem) 1fr;
  gap: 0.65rem 1rem;
  align-items: baseline;
  font-size: 0.92rem;
}
.ts-settings-kv-label {
  color: var(--ts-muted);
  font-weight: 600;
  line-height: 1.4;
}
.ts-settings-kv-value {
  margin: 0;
  min-width: 0;
}
.ts-settings-card-body {
  padding: 0 1.25rem 1rem;
}
.ts-settings-subhead {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.ts-settings-subhead-spaced {
  margin-top: 1.25rem;
}
.ts-settings-form--flat {
  padding: 0;
}
.ts-settings-card-head-compact h2 {
  font-size: 1.05rem;
}
.ts-settings-card-head-compact p {
  font-size: 0.85rem;
}
.ts-personal-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.25rem;
  align-items: start;
}
.ts-personal-settings-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ts-personal-2fa-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0;
}
.ts-personal-2fa-block {
  padding: 1rem;
  border: 1px solid var(--ts-border);
  border-radius: 10px;
  background: var(--ts-panel-subtle-bg, #f8fafc);
}
.ts-personal-2fa-hint {
  margin: 0.75rem 0 1rem;
}
.ts-personal-kv {
  margin: 0;
  display: grid;
  gap: 0.65rem;
}
.ts-personal-kv > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}
.ts-personal-kv dt {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ts-muted);
  font-weight: 600;
}
.ts-personal-kv dd {
  margin: 0;
  min-width: 0;
  word-break: break-word;
}
.ts-personal-kv-block {
  margin-bottom: 0.5rem;
}
.ts-personal-kv-code {
  display: inline-block;
  margin-top: 0.25rem;
}
.ts-personal-theme-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  text-align: center;
}
.ts-personal-theme-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ts-muted);
}
.ts-personal-theme-value {
  font-weight: 600;
}
.ts-personal-theme-toggle {
  display: flex;
  justify-content: center;
}
.ts-personal-theme-toggle .ts-theme-toggle {
  margin-left: 0;
}
.ts-personal-side-action {
  margin: 0.75rem 0 0;
}
.ts-personal-theme-row {
  padding: 0 0 0.5rem;
}
.ts-personal-theme-row .ts-theme-toggle {
  margin-top: 0.25rem;
}
.ts-settings-form {
  padding: 1rem 1.25rem 1.25rem;
}
.ts-field {
  margin-bottom: 0.9rem;
}
.ts-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ts-muted);
}
#activeField {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ts-text);
}
#activeField label {
  display: inline-flex;
  margin-bottom: 0;
  font-weight: inherit;
}
#activeField input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
}
.ts-field input,
.ts-field select,
.ts-field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  font: inherit;
  color: var(--ts-text);
  background: var(--ts-field-bg, #fff);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ts-field input:focus,
.ts-field select:focus,
.ts-field textarea:focus {
  outline: none;
  border-color: var(--ts-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ts-field input.is-disabled {
  background: var(--ts-field-bg, #f8fafc);
  color: var(--ts-muted);
  cursor: not-allowed;
  opacity: 0.92;
}
.ts-settings-form-foot {
  padding-top: 1rem;
  border-top: 1px solid var(--ts-border);
  margin-top: 0.25rem;
}
.ts-settings-form-foot .ts-btn-primary {
  min-width: 140px;
}
.ts-ok { color: #059669; }
.ts-btn-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
  margin-top: 0.75rem;
}
.ts-drawer-actions {
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.ts-drawer-actions .ts-btn {
  margin-top: 0;
  min-height: 2.5rem;
  line-height: 1.2;
}
.ts-drawer-form .ts-drawer-actions .ts-btn-danger {
  margin-top: 0;
}
.ts-drawer-form .ts-field input:not([type="checkbox"]):not([type="radio"]),
.ts-drawer-form .ts-field select,
.ts-drawer-form .ts-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  font: inherit;
}
.ts-drawer-form .ts-field input[type="checkbox"],
.ts-drawer-form .ts-field input[type="radio"] {
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}
.ts-drawer-readonly { display: grid; grid-template-columns: 100px 1fr; gap: 0.5rem 0.75rem; margin: 0 0 1rem; }
.ts-drawer-readonly dt { color: var(--ts-muted); margin: 0; }
.ts-drawer-readonly dd { margin: 0; }

/* マスタ管理: サイドバー横のメイン幅をフル利用（旧 1200px 上限を撤廃） */
.ts-manage-main {
  max-width: none;
  width: 100%;
}
.ts-manage-tabs { display: flex; gap: 0.35rem; margin-bottom: 1rem; }
.ts-manage-tab {
  padding: 0.5rem 1rem;
  border: 1px solid var(--ts-border);
  background: var(--ts-surface);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--ts-muted);
}
.ts-manage-tab.is-active {
  background: var(--ts-accent);
  border-color: var(--ts-accent);
  color: #fff;
}
.ts-manage-toolbar {
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.ts-manage-table tr.is-inactive { opacity: 0.55; }
/* テーブルはまず親幅いっぱい。内容が溢れたら .ts-table-wrap で横スクロール */
.ts-manage-main .ts-manage-table {
  width: max-content;
  min-width: 100%;
}
.ts-manage-table th[data-sort="display_name"],
.ts-manage-table td[data-label="表示名"],
.ts-manage-table th[data-sort="name"],
.ts-manage-table td[data-label="グループ名"] {
  min-width: 10rem;
  white-space: nowrap;
}
.ts-manage-table th[data-sort="email"],
.ts-manage-table td[data-label="メール"],
.ts-manage-table th[data-sort="group_names"],
.ts-manage-table td[data-label="グループ"],
.ts-manage-table th[data-sort="description"],
.ts-manage-table td[data-label="説明"] {
  min-width: 11rem;
  white-space: nowrap;
}
.ts-manage-table th[data-sort="username"],
.ts-manage-table td[data-label="ログインID"],
.ts-manage-table th[data-sort="scope_label"],
.ts-manage-table td[data-label="左カラム表示"] {
  min-width: 7rem;
  white-space: nowrap;
}
.ts-manage-table th[data-sort="slack_user_id"],
.ts-manage-table td[data-label="Slack ID"],
.ts-manage-table th[data-sort="line_user_id"],
.ts-manage-table td[data-label="LINE ID"] {
  min-width: 6.5rem;
  white-space: nowrap;
}
.ts-manage-table th.ts-col-actions,
.ts-manage-table td:last-child {
  white-space: nowrap;
  width: 1%;
  min-width: 4.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.ts-manage-table td:last-child .ts-btn {
  white-space: nowrap;
}
.ts-btn-sm { padding: 0.3rem 0.55rem; font-size: 0.82rem; }
.ts-modal-wide { width: min(560px, 92vw); }
.ts-modal-wide textarea { width: 100%; min-height: 4rem; }
.ts-modal-detail { width: min(760px, 94vw); max-height: 92vh; }
.ts-modal-detail .ts-detail-modal-inner {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: 92vh;
}
.ts-modal-detail .ts-detail-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: calc(92vh - 4rem);
  overflow: auto;
  min-width: 0;
}
html.ts-scroll-locked,
body.ts-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}
body.ts-detail-modal-open .ts-drawer.is-open,
body.ts-detail-modal-open .ts-drawer-backdrop.is-open {
  pointer-events: none;
}
.ts-detail-mode-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.ts-detail-mode-entry #btnTaskDetailMode {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  padding: 0.4rem 0.7rem;
}
.ts-detail-mode-entry #btnTaskDetailMode .ts-detail-edit-open-icon {
  width: 0.85rem;
  height: 0.85rem;
}
#company_logo {
  font-size: 0.82rem;
  max-width: 100%;
}
#company_logo::file-selector-button {
  font-size: 0.82rem;
  padding: 0.28rem 0.55rem;
}
.ts-detail-mode-badge {
  font-size: 0.82rem;
  color: var(--ts-accent, #2563eb);
}
.ts-detail-field { display: grid; gap: 0.35rem; }
.ts-detail-field textarea { min-height: 6rem; resize: vertical; }
.ts-detail-section { display: grid; gap: 0.5rem; }
.ts-detail-section-existing {
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.ts-detail-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.ts-detail-section-existing .ts-detail-existing-list {
  margin: 0;
}
.ts-detail-section-links {
  margin-bottom: 0.35rem;
}
.ts-detail-section-links .ts-detail-section-title {
  margin: 0 0 0.65rem;
}
.ts-detail-link-add-wrap {
  margin: 0.65rem 0 0;
}
.ts-detail-section-links + .ts-detail-section {
  margin-top: 1.35rem;
}
.ts-detail-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.ts-detail-section-head h3 {
  margin: 0;
  font-size: 0.95rem;
}
.ts-detail-links { display: grid; gap: 0.65rem; }
.ts-detail-link-divider {
  width: 100%;
  margin: 0;
  border: 1px dashed var(--ts-border);
  border-bottom: none;
  height: 0;
}
.ts-detail-link-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  align-items: start;
}
.ts-detail-link-fields {
  display: grid;
  gap: 0.35rem;
}
.ts-detail-link-remove {
  border: none;
  background: transparent;
  color: var(--ts-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
}
.ts-detail-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.ts-detail-image-pick {
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}
.ts-detail-thumb {
  position: relative;
  margin: 0;
  width: 72px;
  height: 72px;
}
.ts-detail-thumb-btn {
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--ts-surface-2, #f8fafc);
}
.ts-detail-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ts-detail-thumb-remove,
.ts-detail-file-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--ts-surface, #fff);
  border: 1px solid var(--ts-border);
  border-radius: 999px;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ts-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}
.ts-detail-file {
  position: relative;
  margin: 0;
  width: 120px;
  min-height: 72px;
}
.ts-detail-file-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 120px;
  min-height: 72px;
  padding: 0.5rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  background: var(--ts-surface-2, #f8fafc);
  text-align: center;
}
.ts-detail-file-ext {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--ts-accent, #2563eb);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ts-detail-file-name {
  display: block;
  max-width: 100%;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ts-text, #1e293b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-detail-readonly-files {
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.ts-detail-readonly-file {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--ts-border);
  border-radius: 6px;
  background: var(--ts-surface-2, #f8fafc);
  color: var(--ts-accent, #2563eb);
  font-size: 0.88rem;
  text-decoration: none;
  word-break: break-all;
}
.ts-detail-readonly-file:hover {
  text-decoration: underline;
}
.ts-detail-readonly {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ts-border);
}
.ts-detail-readonly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.ts-detail-readonly-title {
  margin: 0;
  font-size: 0.95rem;
}
.ts-detail-edit-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--ts-border);
  border-radius: 6px;
  background: var(--ts-field-bg);
  color: var(--ts-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ts-detail-edit-open:hover,
.ts-detail-edit-open:focus-visible {
  background: var(--ts-row-hover);
  border-color: var(--ts-muted);
  color: var(--ts-text);
}
[data-theme="dark"] .ts-detail-edit-open {
  background: var(--ts-elevated);
  color: #e8e8e8;
  border-color: var(--ts-border);
}
[data-theme="dark"] .ts-detail-edit-open:hover,
[data-theme="dark"] .ts-detail-edit-open:focus-visible {
  background: var(--ts-row-hover);
  border-color: #707070;
  color: #f5f5f5;
}
.ts-detail-edit-open-icon {
  display: block;
}
.ts-detail-existing-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}
.ts-detail-existing-empty {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
}
.ts-detail-existing-item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.35rem;
  padding: 0.35rem 0.2rem;
  min-width: 0;
  min-height: 88px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ts-detail-existing-item:hover,
.ts-detail-existing-item:focus-within {
  border-color: var(--ts-border);
  background: var(--ts-field-bg);
}
.ts-detail-existing-item-image {
  grid-template-rows: auto auto;
}
.ts-detail-existing-item-file {
  grid-template-rows: auto auto;
  min-height: 88px;
}
.ts-detail-existing-file-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
}
.ts-detail-existing-item-file .ts-detail-file-ext {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ts-muted);
}
.ts-detail-existing-thumb {
  display: block;
  width: 100%;
  max-width: 4.25rem;
  aspect-ratio: 1;
  height: auto;
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  background: transparent;
  padding: 0;
}
.ts-detail-existing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ts-detail-existing-name {
  width: 100%;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ts-detail-existing-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--ts-border);
  border-radius: 999px;
  background: var(--ts-surface, #fff);
  color: var(--ts-muted, #64748b);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.ts-detail-existing-item:hover .ts-detail-existing-remove,
.ts-detail-existing-item:focus-within .ts-detail-existing-remove {
  opacity: 1;
  pointer-events: auto;
}
.ts-detail-existing-remove:hover,
.ts-detail-existing-remove:focus-visible {
  color: var(--ts-text);
  background: var(--ts-row-hover);
}
.ts-detail-readonly-body {
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.55;
}
.ts-detail-readonly-links {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}
.ts-detail-readonly-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.ts-detail-readonly-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--ts-surface-2, #f8fafc);
}
.ts-detail-readonly-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* --- Lightbox（画像拡大） --- */
body.ts-lightbox-open { overflow: hidden; }
.ts-lightbox {
  padding: 0;
  margin: 0;
  border: none;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  background: transparent;
  opacity: 0;
  transition: opacity 0.24s ease;
}
.ts-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-lightbox.is-open { opacity: 1; }
.ts-lightbox::backdrop {
  background: rgba(8, 12, 20, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ts-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.ts-lightbox-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(1200px, 96vw);
  max-height: 92vh;
  padding: 2.75rem 3.25rem;
  pointer-events: none;
}
.ts-lightbox-panel > * { pointer-events: auto; }
.ts-lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  max-width: min(88vw, 960px);
  max-height: calc(85vh - 4.5rem);
}
.ts-lightbox-figure img {
  display: block;
  max-width: min(88vw, 960px);
  max-height: calc(85vh - 6rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}
.ts-lightbox.is-open .ts-lightbox-figure img {
  transform: scale(1);
  opacity: 1;
}
.ts-lightbox-caption {
  margin: 0;
  max-width: min(92vw, 720px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
  word-break: break-all;
}
.ts-lightbox-caption:empty { display: none; }
.ts-lightbox-counter {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.ts-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ts-lightbox-close:hover,
.ts-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.04);
}
.ts-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ts-lightbox-nav:hover,
.ts-lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}
.ts-lightbox-prev { left: max(0.75rem, env(safe-area-inset-left)); }
.ts-lightbox-next { right: max(0.75rem, env(safe-area-inset-right)); }
@media (max-width: 640px) {
  .ts-lightbox-panel { padding: 3rem 0.5rem 1rem; }
  .ts-lightbox-nav {
    top: auto;
    bottom: 1rem;
    transform: none;
  }
  .ts-lightbox-prev { left: calc(50% - 3.25rem); }
  .ts-lightbox-next { right: calc(50% - 3.25rem); }
}

/* --- Search --- */
.ts-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.ts-search-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ts-muted);
}
.ts-search-input {
  flex: 1;
  min-width: 200px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  font: inherit;
  background: var(--ts-surface);
}
.ts-search-input:focus {
  outline: none;
  border-color: var(--ts-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.ts-search-clear { font-size: 0.85rem; }

/* --- Mobile top bar & sidebar --- */
.ts-mobile-bar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--ts-sidebar);
  color: var(--ts-sidebar-text);
  position: sticky;
  top: 0;
  z-index: 25;
}
.ts-mobile-bar-title { font-weight: 700; }
.ts-sidebar-toggle {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  font-size: 1.15rem;
  cursor: pointer;
  line-height: 1;
}
.ts-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 28;
}
.ts-sidebar-overlay.is-open { display: block; }

/* --- Task cards (mobile list) --- */
.ts-task-cards { display: none; gap: 0.75rem; margin-bottom: 1rem; }
.ts-task-card {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.ts-task-card:active { background: #f8fafc; }
.ts-task-card.is-late .ts-task-card-due { color: var(--ts-danger); font-weight: 600; }
.ts-task-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding: 5px;
  border-bottom: 1px dashed var(--ts-border);
}
.ts-task-card-title { margin: 0; font-size: 1rem; line-height: 1.35; flex: 1 1 auto; min-width: 0; }
.ts-task-card-due {
  font-size: 0.82rem;
  color: var(--ts-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.ts-task-card-meta {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.5rem;
  font-size: 0.85rem;
}
.ts-task-card-meta > div {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
}
.ts-task-card-meta dt {
  margin: 0;
  color: var(--ts-muted);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: left;
}
.ts-task-card-meta dd {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 2.5rem;
  line-height: 1.3;
  text-align: left;
}
.ts-task-card-meta .ts-assignee-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 2.5rem;
  padding: 0 0.15rem;
}
.ts-task-card-meta .ts-status-select {
  display: block;
  width: 100%;
  max-width: 5.75rem;
  margin: 0;
  text-align: left;
  text-align-last: left;
}
.ts-task-card-notes {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  color: var(--ts-muted);
  line-height: 1.4;
}
.ts-card-empty {
  text-align: center;
  color: var(--ts-muted);
  padding: 2rem 1rem;
  background: var(--ts-surface);
  border-radius: 10px;
  border: 1px dashed var(--ts-border);
}

.ts-audit-main { max-width: 1100px; }
.ts-audit-filter {
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ts-border);
  border-radius: 12px;
  background: var(--ts-surface);
}
.ts-audit-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}
.ts-audit-filter-field { margin-bottom: 0; }
.ts-audit-filter-field-grow { grid-column: 1 / -1; }
.ts-audit-filter-field .ts-search-input {
  min-width: 0;
  width: 100%;
}
.ts-audit-filter-field input[type="date"],
.ts-audit-filter-field select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  font: inherit;
  background: var(--ts-surface);
}
.ts-audit-filter-field input[type="date"]:focus,
.ts-audit-filter-field select:focus {
  outline: none;
  border-color: var(--ts-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.ts-audit-filter-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.ts-audit-result-meta {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}
.ts-audit-table-wrap { margin-top: 0.75rem; }
.ts-audit-table .ts-audit-time { white-space: nowrap; font-size: 0.88rem; color: var(--ts-muted); }

body.ts-drawer-open { overflow: hidden; }

@media (max-width: 900px) {
  .ts-mobile-bar { display: flex; }
  .ts-layout { grid-template-columns: 1fr; }
  .ts-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(300px, 88vw);
    height: 100vh;
    z-index: 30;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    box-shadow: var(--ts-shadow);
  }
  .ts-sidebar.is-open { transform: translateX(0); }
  .ts-main { padding: 1rem; padding-top: 0.5rem; }
  .ts-main-head h1 { font-size: 1.15rem; }
  .ts-table-wrap-desktop { display: none; }
  .ts-task-cards { display: grid; }
  .ts-drawer { width: 100vw; max-width: 100vw; }
  .ts-drawer-body dl,
  .ts-drawer-readonly { grid-template-columns: 90px 1fr; }
  .ts-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .ts-modal form {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* iOS: 16px 未満の input フォーカスで画面が拡大するのを防ぐ */
  .ts-modal input,
  .ts-modal select,
  .ts-modal textarea,
  .ts-field input,
  .ts-field select,
  .ts-field textarea {
    font-size: 16px;
  }
  .ts-manage-tabs {
    flex-wrap: wrap;
  }
  .ts-manage-toolbar .ts-btn {
    width: 100%;
  }
  .ts-manage-table { font-size: 0.88rem; }
  .ts-manage-table th,
  .ts-manage-table td { padding: 0.5rem; }
  .ts-settings-grid { grid-template-columns: 1fr; }
  .ts-brand-settings-body { padding: 1rem 1rem 1rem; }
  .ts-personal-settings-grid { grid-template-columns: 1fr; }
  .ts-personal-kv > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .ts-audit-filter-grid { grid-template-columns: 1fr; }
  .ts-audit-filter-field-grow { grid-column: auto; }
  .ts-profile-card { flex-direction: column; align-items: flex-start; }
  .ts-search-bar { flex-direction: column; align-items: stretch; }
  .ts-search-label { display: none; }
  .ts-btn, .ts-tabs button, .ts-group-list li button {
    min-height: 44px;
  }
  .ts-table select, .ts-task-card select {
    min-height: 40px;
    font-size: 1rem;
  }
  .ts-drawer-body {
    overflow-x: hidden;
  }
  .ts-date-field-shell .ts-date-weekday {
    font-size: 1rem;
  }
  .ts-audit-table thead,
  .ts-manage-table thead {
    display: none;
  }
  .ts-audit-table tr,
  .ts-manage-table tbody tr {
    display: block;
    border-bottom: 1px solid var(--ts-border);
    padding: 0.65rem 0;
  }
  .ts-manage-table tbody tr {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--ts-border);
    border-radius: 10px;
    background: var(--ts-surface);
  }
  .ts-audit-table td,
  .ts-manage-table td {
    display: block;
    border: none;
    padding: 0.2rem 0;
  }
  .ts-audit-table td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .ts-audit-table td::before,
  .ts-manage-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ts-muted);
    font-size: 0.75rem;
    display: block;
    margin-bottom: 0.15rem;
  }
  .ts-manage-table td[data-label="操作"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: 0.35rem;
    margin-top: 0.25rem;
    border-top: 1px dashed var(--ts-border);
  }
  .ts-manage-table td[data-label="操作"]::before {
    width: 100%;
  }
  .ts-manage-main .ts-table-wrap {
    border: none;
    background: transparent;
    overflow: visible;
  }
}

@media (min-width: 901px) {
  .ts-task-cards { display: none !important; }
  .ts-manage-main .ts-manage-table th,
  .ts-manage-main .ts-manage-table td {
    text-align: left;
  }
  .ts-manage-main .ts-manage-table th[data-sort="role"],
  .ts-manage-main .ts-manage-table td[data-label="権限"],
  .ts-manage-main .ts-manage-table th[data-sort="is_active"],
  .ts-manage-main .ts-manage-table td[data-label="状態"],
  .ts-manage-main .ts-manage-table th[data-sort="member_count"],
  .ts-manage-main .ts-manage-table td[data-label="メンバー数"],
  .ts-manage-main .ts-manage-table th.ts-col-actions,
  .ts-manage-main .ts-manage-table td:last-child {
    text-align: center;
  }
}

/* --- テーマ切替 --- */
.ts-main-head-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ts-page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ts-mobile-bar .ts-theme-toggle {
  margin-left: auto;
}
.ts-theme-toggle {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--ts-border);
  border-radius: 999px;
  padding: 2px;
  background: var(--ts-surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.ts-theme-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.5;
  color: var(--ts-text);
}
.ts-theme-btn:hover {
  opacity: 0.85;
}
.ts-theme-btn.is-active {
  opacity: 1;
  background: var(--ts-accent);
  color: #fff;
}

/* スマホ: テーマ切替はモバイルバーのみ（.ts-theme-toggle 定義より後で上書き） */
@media (max-width: 900px) {
  .ts-main-head-row > .ts-theme-toggle,
  .ts-page-header-row > .ts-theme-toggle {
    display: none;
  }
}

/* ダーク: 下地 --ts-bg / --ts-surface (#232323)、一段上 --ts-elevated (#1c1c1c) */
[data-theme="dark"] {
  color-scheme: dark;
  --ts-date-picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --ts-bg: #232323;
  --ts-surface: #232323;
  --ts-elevated: #1c1c1c;
  --ts-border: #3a3a3a;
  --ts-text: #e8e8e8;
  --ts-muted: #a3a3a3;
  --ts-accent: #8b8b8b;
  --ts-accent-hover: #a8a8a8;
  --ts-danger: #e57373;
  --ts-sidebar: var(--ts-elevated);
  --ts-sidebar-text: #e8e8e8;
  --ts-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --ts-table-head-bg: var(--ts-elevated);
  --ts-field-bg: var(--ts-elevated);
  --ts-row-hover: #2a2a2a;
  --ts-row-ip-bg: #2a343c;
  --ts-row-done-bg: var(--ts-elevated);
  --ts-row-done-fg: #8a8a8a;
  --ts-row-done-hover: #252525;
  /* 行背景とは別: ステータスセレクトのチャップ色 */
  --ts-status-ns-bg: #484848;
  --ts-status-ns-fg: #ececec;
  --ts-status-ns-border: #5c5c5c;
  --ts-status-ip-bg: #2a4a62;
  --ts-status-ip-fg: #b8daf0;
  --ts-status-ip-border: #4a6f8a;
  --ts-status-done-bg: #3a4f3a;
  --ts-status-done-fg: #c4e0c4;
  --ts-status-done-border: #557055;
  --ts-drawer-target-bg: #353535;
  --ts-drawer-target-accent: #c0c0c0;
  --ts-alert-success-bg: #1e2a24;
  --ts-alert-success-border: #3d5c4a;
  --ts-alert-success-fg: #8fd4a8;
  --ts-alert-error-bg: #2d2424;
  --ts-alert-error-border: #5a4545;
  --ts-alert-error-fg: #f0a8a8;
  --ts-log-item-bg: #2a2a2a;
  --ts-panel-subtle-bg: #2a2a2a;
}
[data-theme="dark"] .ts-login-card,
[data-theme="dark"] .ts-modal,
[data-theme="dark"] .ts-drawer {
  background: var(--ts-elevated);
  color: var(--ts-text);
}
[data-theme="dark"] .ts-drawer-slack,
[data-theme="dark"] .ts-slack-block {
  background: var(--ts-panel-subtle-bg);
}
[data-theme="dark"] .ts-table th,
[data-theme="dark"] .ts-manage-table th,
[data-theme="dark"] .ts-audit-table th {
  color: var(--ts-text);
}
[data-theme="dark"] input,
[data-theme="dark"] select:not(.ts-status-select),
[data-theme="dark"] textarea {
  background: var(--ts-field-bg);
  color: var(--ts-text);
  border-color: var(--ts-border);
}
[data-theme="dark"] .ts-btn-primary {
  background: #5a5a5a;
  border-color: #5a5a5a;
  color: #f5f5f5;
}
[data-theme="dark"] .ts-btn-primary:hover {
  background: #707070;
  border-color: #707070;
}
[data-theme="dark"] .ts-assignee-link {
  color: #d4d4d4;
}
[data-theme="dark"] .ts-assignee-link:hover {
  color: #f5f5f5;
}
[data-theme="dark"] .ts-theme-btn.is-active {
  background: #5a5a5a;
  color: #f5f5f5;
}

/* サイドバーブランド: [ロゴ] TasCure — 会社名 */
.ts-brand-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 0.25rem;
}
.ts-brand-logo,
.ts-brand-logo-preview {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.ts-brand-title {
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.35;
  min-width: 0;
  word-break: break-word;
}
.ts-form-grid {
  display: grid;
  gap: 0.75rem;
  max-width: 32rem;
}
.ts-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ts-form-grid label > span,
.ts-form-grid label:first-child {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ts-muted);
}
.ts-form-grid input,
.ts-form-grid select,
.ts-form-grid textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  font: inherit;
  color: var(--ts-text);
  background: var(--ts-field-bg, #fff);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ts-form-grid input:focus,
.ts-form-grid select:focus,
.ts-form-grid textarea:focus {
  outline: none;
  border-color: var(--ts-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* 会社ロゴプレビュー（アカウント設定） */
.ts-brand-preview {
  margin: 1rem 1.25rem 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--ts-panel-subtle-bg);
  border: 1px solid var(--ts-border);
  border-radius: 12px;
}
.ts-brand-preview-label {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-muted);
}
.ts-brand-preview-frame {
  background: var(--ts-sidebar);
  color: var(--ts-sidebar-text);
  border-radius: 10px;
  padding: 1rem 0.85rem;
  max-width: 320px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ts-brand-preview-frame .ts-brand-row {
  margin-bottom: 0;
}
.ts-brand-preview-frame .ts-brand-title {
  color: var(--ts-sidebar-text);
}
.ts-brand-preview-caption {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ts-muted);
}
.ts-brand-settings-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.25rem 1rem;
}
.ts-brand-settings-body .ts-brand-preview {
  margin: 0;
}
.ts-brand-settings-form {
  margin: 0;
  border: 1px solid var(--ts-border);
  border-radius: 10px;
  background: var(--ts-panel-subtle-bg, #f8fafc);
}
.ts-brand-settings-actions {
  margin-top: 0.5rem;
}
.ts-brand-settings-reset .ts-settings-form-foot {
  border-top: none;
  padding-top: 0;
}

/* 運営画面（platform） */
.ts-platform-main {
  max-width: 1080px;
  margin: 0 auto;
}
.ts-platform-head-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.ts-platform-section + .ts-platform-section {
  margin-top: 1.25rem;
}
.ts-platform-section > .ts-settings-card-head {
  padding-bottom: 0.85rem;
}
.ts-platform-section > .ts-settings-card-head p {
  margin: 0.35rem 0 0;
}
.ts-platform-section > .ts-settings-card-head + .ts-settings-card-body {
  padding-top: 0.15rem;
}
.ts-platform-ip-hint {
  margin: 0 1.25rem 1rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ts-muted);
  background: var(--ts-panel-subtle-bg);
  border: 1px solid var(--ts-border);
  border-radius: 8px;
}
.ts-platform-table-wrap {
  padding-top: 0.35rem;
}
.ts-platform-table td {
  vertical-align: middle;
}
.ts-platform-slug {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-size: 0.88rem;
}
.ts-platform-url {
  display: block;
  font-size: 0.82rem;
  color: var(--ts-accent);
  text-decoration: none;
  word-break: break-all;
}
.ts-platform-url:hover {
  text-decoration: underline;
}
.ts-platform-inline-form {
  display: inline;
  margin: 0;
}
.ts-ui-toggle {
  min-width: 3rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--ts-border);
  background: var(--ts-panel-subtle-bg);
  color: var(--ts-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ts-ui-toggle.is-on {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}
.ts-ui-toggle:hover {
  filter: brightness(0.98);
}
.ts-platform-create-form .ts-platform-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
.ts-platform-create-form .ts-field-full,
.ts-platform-create-form .ts-field:last-of-type {
  grid-column: 1 / -1;
}
.ts-slug-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.ts-slug-input-row input {
  flex: 1;
  min-width: 0;
}
.ts-slug-input-row .ts-btn {
  flex-shrink: 0;
  margin-top: 0;
  white-space: nowrap;
}

[data-theme="dark"] .ts-settings-card {
  background: var(--ts-elevated);
}
[data-theme="dark"] .ts-pill-ok {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.35);
}
[data-theme="dark"] .ts-personal-2fa-block {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .ts-brand-preview-frame {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .ts-ui-toggle.is-on {
  background: #1e2a24;
  border-color: #3d5c4a;
  color: #8fd4a8;
}
[data-theme="dark"] .ts-platform-url {
  color: #93c5fd;
}

.ts-line-setup-details {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ts-border);
  border-radius: 10px;
  background: var(--ts-panel-subtle-bg);
}
.ts-line-setup-details summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ts-text);
}
.ts-line-setup-details .ts-hint {
  margin: 0.65rem 0 0.5rem;
}
.ts-line-callback-url {
  margin: 0;
  word-break: break-all;
}
.ts-line-callback-url code {
  font-size: 0.85rem;
}

.ts-platform-ip-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0 1.25rem 1.15rem;
}
.ts-platform-ip-panel {
  border: 1px solid var(--ts-border);
  border-radius: 10px;
  background: var(--ts-panel-subtle-bg);
}
.ts-platform-ip-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ts-border);
}
.ts-platform-ip-panel-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  flex: 1 1 auto;
}
.ts-platform-ip-panel-body {
  padding: 1rem;
}
.ts-platform-ip-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.ts-platform-ip-picker-wrap {
  padding: 0 1.25rem 0.85rem;
}
.ts-platform-ip-picker .ts-field {
  margin: 0;
  max-width: 28rem;
}
.ts-platform-ip-empty {
  margin: 0 1.25rem 1.15rem;
}
.ts-platform-ip-summary-wrap {
  margin: 0 1.25rem 1rem;
  max-height: 12rem;
  overflow: auto;
}
.ts-platform-ip-summary {
  font-size: 0.85rem;
}
.ts-platform-ip-summary tr.is-selected td {
  background: var(--ts-row-hover);
  font-weight: 600;
}
.ts-code-input {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .ts-platform-create-form .ts-platform-form-grid {
    grid-template-columns: 1fr;
  }
  .ts-platform-head-actions {
    width: 100%;
    justify-content: flex-end;
  }
}