/* ==========================================================================
   TASKFLOW V11 — CLIENT READY UI QA LAYER
   UI/UX ONLY — loaded after V8/V9/V10 to resolve visual conflicts.
   ========================================================================== */
:root{
  --tf11-bg:#f6f8fc;--tf11-surface:#fff;--tf11-border:#e4e9f2;
  --tf11-border-strong:#d9e0ec;--tf11-text:#17233b;--tf11-muted:#758198;
  --tf11-primary:#5b5df5;--tf11-shadow:0 10px 30px rgba(18,35,66,.07);
  --tf11-shadow-lg:0 24px 70px rgba(17,34,68,.18)
}
body.taskflow-app{background:var(--tf11-bg)!important;color:var(--tf11-text)!important}
body.taskflow-app .content-wrapper,
body.taskflow-app main,
body.taskflow-app .container-fluid,
body.taskflow-app .container-xxl,
body.taskflow-app .row,
body.taskflow-app [class*="col-"]{min-width:0}
body.taskflow-app .content-wrapper{overflow-x:clip!important}
body.taskflow-app .card{border-color:var(--tf11-border)!important}
body.taskflow-app .seg{
  min-height:44px!important;padding:4px!important;border:1px solid var(--tf11-border)!important;
  border-radius:12px!important;background:#fff!important;box-shadow:0 2px 8px rgba(18,35,66,.035)!important
}
body.taskflow-app .seg-btn{
  width:36px!important;height:36px!important;min-width:36px!important;display:grid!important;
  place-items:center!important;border-radius:9px!important;color:#6d7890!important;font-size:18px!important
}
body.taskflow-app .seg-btn.on{background:#efefff!important;color:#5a57ee!important}
body.taskflow-app .action_create_tasks.btn,
body.taskflow-app a>.action_create_tasks.btn{
  width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;
  padding:0!important;display:grid!important;place-items:center!important;border-radius:12px!important;font-size:21px!important
}

/* Create Task: remove the large unused white zone and keep footer attached. */
body.taskflow-app #create_task_offcanvas.task-ref-create{
  --bs-offcanvas-width:min(960px,calc(100vw - 40px))!important;
  top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
  width:var(--bs-offcanvas-width)!important;height:min(860px,calc(100dvh - 36px))!important;
  min-height:0!important;max-height:calc(100dvh - 36px)!important;
  border:1px solid var(--tf11-border)!important;border-radius:20px!important;
  overflow:hidden!important;background:#fff!important;box-shadow:var(--tf11-shadow-lg)!important
}
body.taskflow-app #create_task_offcanvas .task-ref-create-form{
  height:100%!important;min-height:0!important;display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important
}
body.taskflow-app #create_task_offcanvas .task-ref-create-header{
  position:relative!important;top:auto!important;padding:15px 18px!important;gap:10px!important;
  border-bottom:1px solid #edf0f5!important;
  background:linear-gradient(100deg,#f9fbff 0%,#fff 52%,#faf9ff 100%)!important
}
body.taskflow-app #create_task_offcanvas .task-ref-create-heading-copy h2{font-size:22px!important;line-height:1.2!important}
body.taskflow-app #create_task_offcanvas .task-ref-create-heading-copy p{font-size:12.5px!important;margin-top:3px!important}
body.taskflow-app #create_task_offcanvas .task-ref-create-heading-icon{
  width:42px!important;height:42px!important;font-size:22px!important;border-radius:11px!important
}
body.taskflow-app #create_task_offcanvas .task-ref-icon-button{
  width:40px!important;height:40px!important;font-size:21px!important;border-radius:10px!important
}
body.taskflow-app #create_task_offcanvas .task-ref-create-body{
  min-height:0!important;height:auto!important;overflow-y:auto!important;overflow-x:hidden!important;
  padding:18px 20px 22px!important;overscroll-behavior:contain;scrollbar-gutter:stable
}
body.taskflow-app #create_task_offcanvas .task-ref-create-footer{
  position:relative!important;bottom:auto!important;margin:0!important;padding:12px 18px!important;
  display:grid!important;grid-template-columns:auto auto minmax(0,1fr)!important;gap:10px!important;
  align-items:center!important;border-top:1px solid #e8ecf2!important;background:#fff!important;
  box-shadow:0 -8px 24px rgba(18,35,66,.035)!important
}
body.taskflow-app #create_task_offcanvas .task-ref-primary-btn{justify-self:end!important;min-width:160px!important}
body.taskflow-app #create_task_offcanvas .task-ref-secondary-btn,
body.taskflow-app #create_task_offcanvas .task-ref-draft-btn,
body.taskflow-app #create_task_offcanvas .task-ref-primary-btn{
  min-height:44px!important;height:44px!important;padding:0 18px!important;border-radius:10px!important;font-size:13px!important
}
body.taskflow-app #create_task_offcanvas .task-ref-field>label,
body.taskflow-app #create_task_offcanvas .task-ref-field>h3{margin-bottom:7px!important;font-size:13px!important}
body.taskflow-app #create_task_offcanvas .task-ref-input-wrap,
body.taskflow-app #create_task_offcanvas .task-ref-select-shell,
body.taskflow-app #create_task_offcanvas .task-ref-date-input{height:50px!important;min-height:50px!important}
body.taskflow-app #create_task_offcanvas .task-ref-editor-toolbar{min-height:48px!important;padding:6px 9px!important;gap:4px!important}
body.taskflow-app #create_task_offcanvas .task-ref-editor-toolbar>button{width:34px!important;height:34px!important;font-size:18px!important}
body.taskflow-app #create_task_offcanvas .task-ref-editor-textarea{min-height:125px!important;padding:15px 17px!important;font-size:14px!important}
body.taskflow-app #create_task_offcanvas .task-ref-description-field,
body.taskflow-app #create_task_offcanvas .task-ref-project-field{margin-top:18px!important}
body.taskflow-app #create_task_offcanvas .task-ref-split-row{margin-top:20px!important;gap:22px!important}
body.taskflow-app #create_task_offcanvas .task-ref-priority-cards{gap:8px!important}
body.taskflow-app #create_task_offcanvas .task-ref-priority-card{
  min-height:86px!important;padding:9px 6px!important;gap:6px!important;font-size:12px!important
}
body.taskflow-app #create_task_offcanvas .task-ref-priority-card i{font-size:23px!important}
body.taskflow-app #create_task_offcanvas .taskflow-important-control{margin-top:10px!important;padding:9px 10px!important}
body.taskflow-app #create_task_offcanvas .task-ref-deadline-field,
body.taskflow-app #create_task_offcanvas .task-ref-attachments-field{margin-top:20px!important}
body.taskflow-app #create_task_offcanvas .task-ref-attachments-box{padding:15px!important}
@media(max-width:767.98px){
  body.taskflow-app #create_task_offcanvas.task-ref-create{
    top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100dvh!important;
    max-width:100vw!important;max-height:100dvh!important;border:0!important;border-radius:0!important
  }
  body.taskflow-app #create_task_offcanvas .task-ref-create-header{padding:10px 11px!important}
  body.taskflow-app #create_task_offcanvas .task-ref-create-body{padding:13px 11px 16px!important}
  body.taskflow-app #create_task_offcanvas .task-ref-create-footer{grid-template-columns:1fr 1fr!important;padding:10px!important}
  body.taskflow-app #create_task_offcanvas .task-ref-primary-btn{grid-column:1/-1!important;width:100%!important;min-width:0!important}
}

/* Stage colors: keep task fully colored, but never make dropdown text invisible. */
body.taskflow-app .tcard[class*="taskflow-stage-"]:not(.taskflow-stage-new) .dropdown-menu,
body.taskflow-app tr.taskflow-stage-row[class*="taskflow-stage-"]:not(.taskflow-stage-new) .dropdown-menu,
body.taskflow-app .taskflow-ref-task-card[class*="taskflow-stage-"]:not(.taskflow-stage-new) .dropdown-menu{
  --task-stage-fg:var(--tf11-text)!important;width:max-content!important;min-width:168px!important;
  max-width:min(240px,calc(100vw - 24px))!important;height:auto!important;min-height:0!important;
  padding:6px!important;border:1px solid var(--tf11-border)!important;border-radius:12px!important;
  background:#fff!important;color:var(--tf11-text)!important;box-shadow:0 14px 36px rgba(16,34,66,.16)!important;overflow:visible!important
}
body.taskflow-app .tcard[class*="taskflow-stage-"]:not(.taskflow-stage-new) .dropdown-menu *,
body.taskflow-app tr.taskflow-stage-row[class*="taskflow-stage-"]:not(.taskflow-stage-new) .dropdown-menu *,
body.taskflow-app .taskflow-ref-task-card[class*="taskflow-stage-"]:not(.taskflow-stage-new) .dropdown-menu *{color:var(--tf11-text)!important}
body.taskflow-app .tcard .dropdown-item,
body.taskflow-app tr.taskflow-stage-row .dropdown-item{
  min-height:36px!important;padding:7px 9px!important;border-radius:8px!important;
  background:transparent!important;color:var(--tf11-text)!important;font-size:12px!important
}
body.taskflow-app .tcard .dropdown-item:hover,
body.taskflow-app tr.taskflow-stage-row .dropdown-item:hover{background:#f4f6fb!important;color:#4f50dc!important}
body.taskflow-app .tcard .dropdown-item i,
body.taskflow-app tr.taskflow-stage-row .dropdown-item i{color:#6f7a91!important}

/* Draggable / Kanban */
body.taskflow-app.taskflow-module-tasks .tk-kanban,
body.taskflow-app.taskflow-module-tasks .kanban-board{
  width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important;
  padding:4px 2px 14px!important;gap:14px!important;scrollbar-width:thin
}
body.taskflow-app.taskflow-module-tasks .tk-kanban .kcol{
  flex:0 0 292px!important;width:292px!important;min-width:292px!important;max-width:292px!important;
  min-height:260px!important;border:1px solid var(--tf11-border)!important;border-radius:16px!important;
  background:#f8faff!important;overflow:visible!important
}
body.taskflow-app.taskflow-module-tasks .kcol-head{min-height:58px!important;padding:12px 14px!important;border-bottom:1px solid #e8edf5!important}
body.taskflow-app.taskflow-module-tasks .kanban-tasks{padding:10px!important;gap:9px!important;min-height:150px!important}
body.taskflow-app.taskflow-module-tasks .tcard{
  position:relative!important;width:100%!important;min-width:0!important;min-height:138px!important;
  margin:0!important;padding:11px!important;gap:8px!important;border-radius:14px!important;overflow:visible!important
}
body.taskflow-app.taskflow-module-tasks .tcard-meta,
body.taskflow-app.taskflow-module-tasks .tcard-foot{min-width:0!important}
body.taskflow-app.taskflow-module-tasks .tcard-title{margin:0!important;min-width:0!important}
body.taskflow-app.taskflow-module-tasks .tcard-title a{
  display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;
  white-space:nowrap!important;font-size:13px!important
}
body.taskflow-app.taskflow-module-tasks .tcard-tags{display:flex!important;gap:5px!important;flex-wrap:wrap!important;min-width:0!important}
body.taskflow-app.taskflow-module-tasks .tcard .tag{
  max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  font-size:9px!important;min-height:24px!important
}
body.taskflow-app.taskflow-module-tasks .tcard-actions{position:relative!important;z-index:6!important}
body.taskflow-app.taskflow-module-tasks .tcard .dropdown{position:relative!important}
body.taskflow-app.taskflow-module-tasks .tcard .dropdown-menu{z-index:1080!important}
@media(max-width:575.98px){
  body.taskflow-app.taskflow-module-tasks .tk-kanban .kcol{
    flex-basis:min(86vw,300px)!important;width:min(86vw,300px)!important;min-width:min(86vw,300px)!important
  }
}

/* Group-by task list */
body.taskflow-app.taskflow-module-tasks #taskListsContainer{padding:12px!important}
body.taskflow-app.taskflow-module-tasks #taskListsContainer>.task-list-header{
  margin-top:10px!important;border:1px solid var(--tf11-border)!important;border-bottom:0!important;
  border-radius:14px 14px 0 0!important;background:#f8faff!important
}
body.taskflow-app.taskflow-module-tasks #taskListsContainer>.task-list-header:first-child{margin-top:0!important}
body.taskflow-app.taskflow-module-tasks #taskListsContainer>.task-list-header .p-3{min-height:54px!important;padding:10px 12px!important}
body.taskflow-app.taskflow-module-tasks #taskListsContainer>.task-list-header h6{
  font-size:13px!important;font-weight:800!important;color:var(--tf11-text)!important
}
body.taskflow-app.taskflow-module-tasks #taskListsContainer>.task-group{
  margin-bottom:12px!important;padding:0!important;border:1px solid var(--tf11-border)!important;border-top:0!important;
  border-radius:0 0 14px 14px!important;overflow:hidden!important;background:#fff!important
}
body.taskflow-app.taskflow-module-tasks #taskListsContainer>.task-group .table-responsive{margin:0!important;border-radius:0!important}
body.taskflow-app.taskflow-module-tasks #taskListsContainer>.task-group table{margin:0!important}
body.taskflow-app.taskflow-module-tasks #taskListsContainer>.task-group thead th{padding:10px!important}
body.taskflow-app.taskflow-module-tasks #taskListsContainer>.task-group tbody td{padding:10px!important;font-size:12px!important}
.taskflow-v11-empty{min-height:220px;display:grid;place-items:center;padding:30px;text-align:center;color:var(--tf11-muted)}
.taskflow-v11-empty-inner{max-width:420px}
.taskflow-v11-empty i{
  width:52px;height:52px;margin:0 auto 12px;display:grid;place-items:center;border-radius:15px;
  background:#f0f1ff;color:#5c59ea;font-size:26px
}
.taskflow-v11-empty strong{display:block;color:var(--tf11-text);font-size:15px;margin-bottom:5px}
.taskflow-v11-empty span{display:block;font-size:12px;line-height:1.55}

/* Calendar */
body.taskflow-app.taskflow-module-calendar .calendar-wrapper{
  display:grid!important;grid-template-columns:minmax(230px,270px) minmax(0,1fr)!important;
  gap:14px!important;align-items:stretch!important
}
body.taskflow-app.taskflow-module-calendar .calendar-sidebar{
  width:auto!important;min-width:0!important;border:1px solid var(--tf11-border)!important;border-radius:16px!important;
  background:#fff!important;box-shadow:var(--tf11-shadow)!important;overflow:hidden!important
}
body.taskflow-app.taskflow-module-calendar .calendar-sidebar .offcanvas-header{
  min-height:64px!important;padding:14px 16px!important;border-bottom:1px solid #edf0f5!important
}
body.taskflow-app.taskflow-module-calendar .calendar-sidebar .offcanvas-header h5{font-size:16px!important;margin:0!important}
body.taskflow-app.taskflow-module-calendar .calendar-sidebar .offcanvas-body{padding:14px!important}
body.taskflow-app.taskflow-module-calendar .calendar-sidebar .filter-section{
  padding:12px!important;margin-bottom:10px!important;border:1px solid #edf0f5!important;
  border-radius:12px!important;background:#fbfcff!important
}
body.taskflow-app.taskflow-module-calendar .calendar-sidebar .filter-section h6{margin-bottom:9px!important;color:#4b5870!important;font-size:10px!important}
body.taskflow-app.taskflow-module-calendar .calendar-main{
  min-width:0!important;padding:18px!important;border:1px solid var(--tf11-border)!important;border-radius:16px!important;
  background:#fff!important;box-shadow:var(--tf11-shadow)!important;overflow:hidden!important
}
body.taskflow-app.taskflow-module-calendar .fc{min-width:0!important;color:var(--tf11-text)!important}
body.taskflow-app.taskflow-module-calendar .fc-toolbar{gap:10px!important;margin-bottom:16px!important}
body.taskflow-app.taskflow-module-calendar .fc-toolbar h2{font-size:22px!important;font-weight:800!important}
body.taskflow-app.taskflow-module-calendar .fc-button{
  min-height:36px!important;padding:0 12px!important;border:1px solid var(--tf11-border)!important;
  border-radius:9px!important;background:#fff!important;color:#58647b!important;box-shadow:none!important
}
body.taskflow-app.taskflow-module-calendar .fc-button:hover{background:#f5f6fb!important;color:#4f50dc!important}
body.taskflow-app.taskflow-module-calendar .fc-head-container,
body.taskflow-app.taskflow-module-calendar .fc-widget-header,
body.taskflow-app.taskflow-module-calendar .fc-widget-content{border-color:#e7ebf2!important}
body.taskflow-app.taskflow-module-calendar .fc-day-header{
  padding:8px 4px!important;background:#fafbfe!important;color:#6a768d!important;font-size:11px!important;font-weight:750!important
}
body.taskflow-app.taskflow-module-calendar .fc-day{background:#fff!important}
body.taskflow-app.taskflow-module-calendar .fc-today{background:#fff9dc!important}
@media(max-width:991.98px){
  body.taskflow-app.taskflow-module-calendar .calendar-wrapper{display:block!important}
  body.taskflow-app.taskflow-module-calendar .calendar-main{padding:12px!important}
  body.taskflow-app.taskflow-module-calendar .fc-toolbar{flex-wrap:wrap!important}
  body.taskflow-app.taskflow-module-calendar .fc-toolbar h2{font-size:18px!important}
}

/* Dashboard task surface */
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-list{gap:10px!important}
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-card{
  min-height:118px!important;grid-template-columns:96px minmax(0,1fr)!important;gap:12px!important;
  padding:10px 13px 10px 10px!important;border-radius:15px!important
}
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-due-ring{width:62px!important;height:62px!important}
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-priority-label{max-width:90px!important;font-size:8.8px!important}
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-title{font-size:14px!important}
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-copy p{font-size:10.5px!important}
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-main{gap:8px!important}
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-card[class*="taskflow-stage-"]:not(.taskflow-stage-new) .taskflow-ref-due-ring{
  background:rgba(255,255,255,.95)!important;color:#17233b!important;border-color:rgba(255,255,255,.95)!important
}
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-card[class*="taskflow-stage-"]:not(.taskflow-stage-new) .taskflow-ref-due-ring strong,
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-card[class*="taskflow-stage-"]:not(.taskflow-stage-new) .taskflow-ref-due-ring small{color:#17233b!important}
body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-card[class*="taskflow-stage-"]:not(.taskflow-stage-new) .taskflow-ref-task-more:hover{
  background:rgba(255,255,255,.16)!important
}
@media(max-width:575.98px){
  body.taskflow-app.taskflow-module-dashboard .taskflow-ref-task-card{
    grid-template-columns:74px minmax(0,1fr)!important;padding:9px 9px 9px 7px!important
  }
  body.taskflow-app.taskflow-module-dashboard .taskflow-ref-due-ring{width:54px!important;height:54px!important}
}

/* Task list */
body.taskflow-app.taskflow-module-tasks .bootstrap-table{overflow:visible!important}
body.taskflow-app.taskflow-module-tasks .bootstrap-table .fixed-table-container{
  border:1px solid var(--tf11-border)!important;border-radius:14px!important;overflow:visible!important
}
body.taskflow-app.taskflow-module-tasks .bootstrap-table .fixed-table-body{
  border-radius:0 0 14px 14px!important;overflow-x:auto!important;overflow-y:visible!important
}
body.taskflow-app.taskflow-module-tasks #task_table{margin:0!important}
body.taskflow-app.taskflow-module-tasks #task_table thead th{height:48px!important}
body.taskflow-app.taskflow-module-tasks #task_table tbody td{min-height:50px!important;padding-top:10px!important;padding-bottom:10px!important}
body.taskflow-app.taskflow-module-tasks #task_table tbody tr.taskflow-stage-row .dropdown{position:relative!important}
body.taskflow-app.taskflow-module-tasks #task_table tbody tr.taskflow-stage-row .dropdown-menu{z-index:1090!important}
body.taskflow-app.taskflow-module-tasks #task_table .dropdown-toggle::after{display:none!important}
body.taskflow-app.taskflow-module-tasks tr.taskflow-stage-row .dropdown-menu .dropdown-item,
body.taskflow-app.taskflow-module-tasks tr.taskflow-stage-row .dropdown-menu .dropdown-item span,
body.taskflow-app.taskflow-module-tasks tr.taskflow-stage-row .dropdown-menu .dropdown-item strong{color:var(--tf11-text)!important}

/* Dark-theme guards for UI overlays. */
html[data-theme="dark"] body.taskflow-app #create_task_offcanvas .task-ref-create-form,
html[data-theme="dark"] body.taskflow-app #create_task_offcanvas .task-ref-create-body,
html[data-theme="dark"] body.taskflow-app #create_task_offcanvas .task-ref-create-footer{background:#111827!important}
html[data-theme="dark"] body.taskflow-app .tcard .dropdown-menu,
html[data-theme="dark"] body.taskflow-app tr.taskflow-stage-row .dropdown-menu{background:#172033!important;border-color:#2d3a51!important}
html[data-theme="dark"] body.taskflow-app .tcard .dropdown-menu *,
html[data-theme="dark"] body.taskflow-app tr.taskflow-stage-row .dropdown-menu *{color:#eef3fb!important}