/* UX-1. Shared V2 tokens remain in dp-dashboard.css; readable badge foregrounds are explicit. */
:root { --dp-status-success: #166534; --dp-status-warning: #9a3412; }
.ball-sent { color:var(--dp-status-success); }
.source-badge.chouki { background:#047857; }
.zeroemi-badge { background:var(--dp-status-warning); }
.dp-member { color:#6b7280; }
.sp-label { color:#6b7280; }
.sp-step.done .sp-label { color:var(--dp-status-success); }
.sp-step.current .sp-label { color:var(--primary-hover); }
.sp-dot { color:#374151; }
.sp-step.done .sp-dot { background:#047857; color:#fff; }
.sp-step.current .sp-dot { color:#fff; }
.ball-reply { color:#b91c1c; }
.empty { color:#525252; }
.dp-mobile-property-name, .dp-mobile-detail-header, .dp-mobile-date-label, .dp-mobile-unread { display:none; }
.sidebar-tab-strip { position:relative; min-width:0; }
.dp-filter-chips { display:flex; gap:8px; overflow-x:auto; padding:8px 0; margin-bottom:8px; }
.dp-filter-chips[hidden] { display:none; }
.dp-filter-chip { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; max-width:240px; min-height:44px; padding:8px 12px; border:1px solid #93c5fd; border-radius:24px; color:#1e40af; background:#eff6ff; font:inherit; font-size:13px; cursor:pointer; }
.dp-filter-chip span:first-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dp-list-message p { margin-bottom:12px; }
.data-row:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.thread-panel:not(.open) { visibility:hidden; }
/* Keep the desktop table at 769px+, but contain its intrinsic width inside the list. */
@media (min-width:769px) { #tableContainer { overflow-x:auto; } .sort-toolbar { flex-wrap:wrap; } }
@media (max-width:768px) {
  .container { padding:12px; }
  .page-body, .main-content { width:100%; }
  .app-header { height:auto; min-height:56px; flex-wrap:wrap; gap:12px; padding:12px; }
  .header-left, .header-right { min-width:0; max-width:100%; flex-wrap:wrap; }
  .header-logo { font-size:16px; white-space:normal; }
  .header-company { overflow-wrap:anywhere; }
  .sidebar-tabs { gap:8px; }
  .month-tab, .dp-member, .at-btn, .sort-toggle button, .btn, .thread-badge,
  .thread-close-btn, .file-attach-btn, .dp-property-detail, .dp-property-toggle { min-height:44px; }
  .thread-close-btn, .file-attach-btn, #thread-send-btn { min-width:44px; }
  .sidebar-tab-strip::before, .sidebar-tab-strip::after { content:""; position:absolute; top:0; bottom:4px; width:20px; pointer-events:none; z-index:1; opacity:0; }
  .sidebar-tab-strip::before { left:0; background:linear-gradient(to right,#fff,transparent); }
  .sidebar-tab-strip::after { right:0; background:linear-gradient(to left,#fff,transparent); }
  .sidebar-tab-strip.can-scroll-left::before, .sidebar-tab-strip.can-scroll-right::after { opacity:1; }
  .dp-filter-chips { position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--border); }
  .sort-toolbar { flex-direction:column; align-items:stretch; }
  .sort-toolbar input { min-width:0; }
  .sort-toggle { display:flex; flex-wrap:wrap; }
  .sort-toggle button { flex:1; }
  #app-shell input, #app-shell select, .fullpage-view input, .fullpage-view select,
  #thread-panel textarea, #thread-panel input, #thread-panel select { font-size:16px !important; }
  .empty { padding:24px 12px; }
  .dp-responsive-table, .dp-responsive-table tbody { display:block; border:0; background:transparent; overflow:visible; }
  .dp-responsive-table thead { display:none; }
  .dp-responsive-table tr.data-row { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; margin:10px 0; padding:12px; background:var(--card); }
  .dp-responsive-table tr[hidden] { display:none !important; }
  .dp-responsive-table tr.data-row > td { display:block; border:0; padding:6px 0; overflow-wrap:anywhere; min-width:0; }
  .dp-responsive-table tr.data-row > td::before { content:attr(data-mobile-label); display:block; font-size:11px; color:var(--text-sub); margin-bottom:4px; }
  .dp-responsive-table tr.data-row > td:first-child::before { display:none; }
  .dp-mobile-property-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:16px; font-weight:700; margin-bottom:8px; overflow-wrap:anywhere; }
  .dp-mobile-date-label { display:block; color:var(--text-sub); font-size:11px; margin-bottom:4px; }
  .dp-mobile-unread { display:inline-block; background:#b91c1c; color:#fff; padding:2px 7px; border-radius:20px; }
  .dp-responsive-table .property-main { display:none; }
  .dp-responsive-table .property-assignee { display:none; }
  .archive-property-text, .dp-property-toggle { overflow-wrap:anywhere; }
  .archive-property-text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .dp-property-heading { align-items:stretch; flex-direction:column; }
  .dp-property-toggle { min-width:0; }
  .dp-property-toggle .dp-property-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .dp-property-company, .dp-property-summary { padding-left:0; overflow-wrap:anywhere; }
  .dp-responsive-table .property-group-header { display:block; margin-top:16px; }
  .dp-responsive-table .property-group-header > td { display:block; border:0; border-radius:10px; }
  .dp-responsive-table .detail-row.open, .dp-responsive-table .detail-row > td { display:block; }
  .dp-responsive-table .detail-row > td { padding:12px; border-radius:10px; overflow-wrap:anywhere; }
  .dp-mobile-detail-header { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:12px; }
  .dp-mobile-detail-header strong { overflow-wrap:anywhere; }
  .dp-mobile-detail-content { display:flex; flex-direction:column; }
  .dp-mobile-detail-content > * { order:3; }
  .dp-mobile-detail-content > .dp-mobile-detail-files { order:1; }
  .dp-mobile-detail-content > .dp-mobile-detail-checklist { order:2; }
  .dp-mobile-detail-content > .dp-mobile-detail-status { order:4; }
  .detail-grid, .deliverable-grid { grid-template-columns:minmax(0,1fr); }
  .detail-field-value, .file-item a, .message-file { overflow-wrap:anywhere; min-width:0; }
  .file-item { flex-wrap:wrap; }
  .file-item a { flex:1 1 140px; }
  .status-compact-label { max-width:none; white-space:normal; }
  .dp-property-row-actions { gap:8px; }
  .dp-thread-open { overflow:hidden; }
  #thread-panel { top:var(--dp-viewport-top,0px); height:var(--dp-viewport-height,100vh); }
  #thread-panel .thread-header { padding:8px 12px; }
  #thread-panel .thread-compose { padding:8px 12px max(12px,env(safe-area-inset-bottom)); overflow-y:auto; max-height:65%; }
  #thread-panel .compose-row { flex-shrink:0; min-height:96px; max-height:none; }
  #thread-panel .compose-textarea { min-height:96px; max-height:160px; }
  #thread-panel .thread-messages { min-height:40px; padding:12px; }
  #thread-panel .compose-actions { gap:8px; }
  #thread-panel .drop-zone, #thread-panel .compose-hint { display:none; }
  #thread-panel .dp-thread-tools { max-height:22%; overflow-y:auto; padding:8px 12px; }
  #thread-panel .status-progress { padding:8px; }
}