/* ==============================================
   task_list.html — Task Management Styles
   Extracted from template <style> block (Phase 3)
   ============================================== */

.tw-wrap{padding:1rem;gap:0.75rem;overflow-y:auto}
.tw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;flex-shrink:0}
.tw-stat-card{display:flex;align-items:center;gap:0.75rem;background:#fff;border-radius:0.75rem;padding:1rem;border:1px solid var(--border,rgba(0,0,0,.06));box-shadow:0 1px 3px rgba(0,0,0,.04)}
.tw-stat-icon{width:2.5rem;height:2.5rem;border-radius:0.625rem;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);background:var(--stat-bg);color:var(--stat-color);flex-shrink:0}
.tw-stat-body{flex:1;min-width:0}
.tw-stat-value{font-size:1.25rem;font-weight:700;color:var(--text-deep,#1a1a1a);line-height:1.2}
.tw-stat-label{font-size:var(--fs-xs);color:var(--text-tertiary,#999);margin-top:0.125rem}
.tw-toolbar{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;flex-shrink:0;background:#fff;border-radius:0.75rem;padding:0.75rem 1rem;border:1px solid var(--border,rgba(0,0,0,.06))}
.tw-search-group{display:flex;align-items:center;gap:0.5rem;flex-wrap:nowrap;flex:1;min-width:0}
.tw-search-group .bk-input.tw-fw{width:auto;min-width:0;max-width:8rem;flex-shrink:0}
.tw-search-group .bk-input[placeholder]{flex:1;min-width:6rem}
.tw-actions{display:flex;align-items:center;gap:0.5rem;flex-shrink:0}
.tw-input{padding:0.4375rem 0.75rem;border:1px solid var(--border,rgba(0,0,0,.1));border-radius:0.5rem;font-size:var(--fs-sm);outline:none;transition:.15s;background:#fff;min-width:7rem;color:var(--text-deep,#333);height:2.25rem;box-sizing:border-box}
.tw-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,101,52,.08)}
.tw-select{min-width:6rem;cursor:pointer;appearance:auto;padding-right:0.5rem}
.tw-textarea{resize:vertical;min-height:3.5rem;height:auto;font-family:inherit}
.tw-check-label{display:inline-flex;align-items:center;gap:0.375rem;font-size:var(--fs-sm);color:var(--text-secondary,#555);cursor:pointer;user-select:none;white-space:nowrap}
.tw-table-wrap{background:#fff;border-radius:0.75rem;border:1px solid var(--border,rgba(0,0,0,.06));overflow:hidden;flex:1}
.tw-table-wrap .boka-table-wrap{padding:0;overflow-x:auto}
.tw-table-wrap .boka-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tw-table-wrap .boka-table th{background:#f8f9fa;padding:0.625rem 0.75rem;font-weight:600;color:var(--text-secondary,#555);border-bottom:1px solid var(--border,rgba(0,0,0,.06));white-space:nowrap;font-size:0.8125rem}
.tw-table-wrap .boka-table td{padding:0.5rem 0.75rem;border-bottom:1px solid var(--border,rgba(0,0,0,.04));color:var(--text-deep,#333)}
.tw-table-wrap .boka-table tr:hover td{background:rgba(22,101,52,.02)}
.tw-table-wrap .boka-table tr:last-child td{border-bottom:none}
.tw-task-title{display:flex;align-items:center;gap:0.5rem}
.tw-pri-dot{width:0.5rem;height:0.5rem;border-radius:50%;flex-shrink:0}
.tw-pri-1{background:#ef4444}
.tw-pri-2{background:#f59e0b}
.tw-pri-3{background:#0ea5e9}
.tw-pri-4{background:#d1d5db}
.tw-badge{display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;font-size:0.625rem;font-weight:500;white-space:nowrap}
.tw-badge-0{background:rgba(107,114,128,.1);color:#6b7280}
.tw-badge-1{background:rgba(14,165,233,.1);color:#0ea5e9}
.tw-badge-2{background:rgba(245,158,11,.1);color:#b45309}
.tw-badge-3{background:rgba(22,101,52,.08);color:#166534}
.tw-badge-4{background:rgba(239,68,68,.08);color:#dc2626}
.tw-pri-tag{display:inline-block;padding:0.0625rem 0.375rem;border-radius:0.25rem;font-size:0.625rem}
.tw-pri-tag-1{color:#ef4444;background:rgba(239,68,68,.1)}
.tw-pri-tag-2{color:#f59e0b;background:rgba(245,158,11,.1)}
.tw-pri-tag-3{color:#0ea5e9;background:rgba(14,165,233,.1)}
.tw-pri-tag-4{color:#6b7280;background:rgba(107,114,128,.1)}
.tw-cell-muted{color:var(--text-secondary,#666);font-size:0.8125rem}
.tw-overdue{color:#ef4444;font-weight:600}
.tw-cards{display:none;flex-direction:column;gap:0.5rem;flex-shrink:0}
.tw-card{background:#fff;border-radius:0.75rem;border:1px solid var(--border,rgba(0,0,0,.06));padding:0.75rem;cursor:pointer;transition:.15s}
.tw-card:active{background:#f5f5f5}
.tw-card-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}
.tw-card-title{flex:1;font-size:var(--fs-sm);font-weight:500;color:var(--text-deep,#1a1a1a);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-card-meta{display:flex;flex-wrap:wrap;gap:0.75rem;font-size:0.625rem;color:var(--text-tertiary,#999);margin-bottom:0.5rem}
.tw-card-meta span{display:inline-flex;align-items:center;gap:0.25rem}
.tw-card-meta i{width:0.75rem;text-align:center}
.tw-card-actions{display:flex;align-items:center;justify-content:space-between;padding-top:0.375rem;border-top:1px solid var(--border,rgba(0,0,0,.04))}
.tw-card-actions > div{display:flex;gap:0.25rem}
.tw-mobile-page{display:flex;align-items:center;justify-content:center;gap:1rem;padding:0.75rem 0;font-size:var(--fs-sm);color:var(--text-secondary,#555)}
.tw-mobile-page button{padding:0.375rem 0.75rem;border:1px solid var(--border,rgba(0,0,0,.1));border-radius:0.5rem;background:#fff;font-size:var(--fs-sm);cursor:pointer}
.tw-mobile-page button:disabled{opacity:.4;cursor:default}
.tw-empty{display:flex;flex-direction:column;align-items:center;gap:0.75rem;padding:3rem 1rem;background:#fff;border-radius:0.75rem;border:1px solid var(--border,rgba(0,0,0,.06))}
.tw-empty-icon{font-size:2.5rem;color:var(--text-tertiary,#ccc)}
.tw-empty-text{font-size:1rem;color:var(--text-tertiary,#999)}
.tw-loading{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:2rem;font-size:var(--fs-sm);color:var(--text-tertiary,#999);background:#fff;border-radius:0.75rem;border:1px solid var(--border,rgba(0,0,0,.06))}
.tw-form{display:flex;flex-direction:column;gap:0.75rem}
.tw-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.tw-form-item{display:flex;flex-direction:column;gap:0.375rem}
.tw-form-item label{font-size:0.8125rem;font-weight:500;color:var(--text-secondary,#555)}
.tw-full{grid-column:1/-1}
.tw-flex{display:flex}
.gap-2{gap:0.5rem}
@media (max-width:64rem){.tw-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:48rem){
  .tw-stats{grid-template-columns:repeat(2,1fr);gap:0.5rem}
  .tw-stat-card{padding:0.75rem}
  .tw-toolbar{flex-direction:column;align-items:stretch}
  .tw-search-group{flex-direction:column;align-items:stretch}
  .tw-input{width:100%}
  .tw-table-wrap{display:none}
  .tw-cards{display:flex}
  .tw-form-row{grid-template-columns:1fr}
  .tw-wrap{padding:0.75rem;gap:0.5rem}
}