:root{
  --app-bg:#0c1424;
  --app-surface:#101b2d;
  --app-surface-2:#0f1d33;
  --app-surface-3:#163a5c;
  --app-border:#1f3252;
  --app-border-strong:#304764;
  --app-text:#e7eef7;
  --app-muted:#9fb3c8;
  --app-accent:#22d3ee;
  --app-accent-2:#38bdf8;
  --app-success:#34d399;
  --app-warning:#fbbf24;
  --app-danger:#fb7185;
  --app-sidebar-width:264px;
  --app-topbar-height:64px;
  --app-radius:3px;
  --app-shadow:0 1px 3px rgba(0,0,0,.22);
}
html{scroll-behavior:smooth;}
body{
  background:var(--app-bg);
  color:var(--app-text);line-height:1.55;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
}
.app-topbar{min-height:var(--app-topbar-height);background:#0a1322;border-bottom:1px solid var(--app-border);box-shadow:none;z-index:1040;}
.app-brand{display:flex;align-items:center;gap:.7rem;color:#fff;font-weight:750;letter-spacing:.2px;}.app-brand:hover{color:#fff;}
.app-brand-mark{width:36px;height:36px;border-radius:2px;display:flex;align-items:center;justify-content:center;background:#22d3ee;color:#07111f;box-shadow:none;}
.app-brand-copy{display:flex;flex-direction:column;line-height:1.05;}.app-brand-title{font-size:.92rem;}.app-brand-subtitle{font-size:.66rem;color:var(--app-muted);font-weight:550;letter-spacing:.45px;margin-top:.25rem;}
.app-icon-btn{width:38px;height:38px;border:1px solid transparent;border-radius:2px;background:transparent;color:#b9c9da;display:inline-flex;align-items:center;justify-content:center;position:relative;transition:.14s ease;}.app-icon-btn:hover{background:rgba(148,163,184,.11);border-color:var(--app-border);color:#fff;}
.app-user-trigger{display:flex;align-items:center;gap:.65rem;border:1px solid var(--app-border);border-radius:2px;background:#101b2d;padding:.35rem .55rem .35rem .4rem;color:#fff;}.app-user-trigger:hover,.app-user-trigger:focus{background:rgba(255,255,255,.07);color:#fff;border-color:var(--app-border-strong);}
.app-avatar{width:31px;height:31px;border-radius:2px;display:flex;align-items:center;justify-content:center;background:#163a5c;font-size:.78rem;font-weight:800;color:#fff;}
.app-user-meta{display:flex;flex-direction:column;text-align:left;line-height:1.12;max-width:190px;}.app-user-name{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.app-user-unit{font-size:.67rem;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-user-menu{background:#0e1a2c;border:1px solid var(--app-border);box-shadow:var(--app-shadow);border-radius:3px;padding:.45rem;min-width:220px;}.app-user-menu .dropdown-item{color:#cbd8e7;border-radius:2px;padding:.55rem .65rem;font-size:.85rem;}.app-user-menu .dropdown-item:hover{background:#17283e;color:#fff;}
.app-layout{display:flex;min-height:calc(100vh - var(--app-topbar-height));}
.app-sidebar{width:var(--app-sidebar-width);flex:0 0 var(--app-sidebar-width);background:#101b2d;border-right:1px solid var(--app-border);padding:1rem .8rem;position:sticky;top:var(--app-topbar-height);height:calc(100vh - var(--app-topbar-height));overflow-y:auto;scrollbar-width:thin;scrollbar-color:#263a55 transparent;}
.app-sidebar .offcanvas-header{border-bottom:1px solid var(--app-border);}.app-sidebar-section{margin-bottom:1rem;}.app-sidebar-label{padding:.25rem .75rem .4rem;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#657c94;}
.app-nav-link{display:flex!important;align-items:center;gap:.7rem;color:#9eb1c5!important;padding:.62rem .72rem!important;border-radius:2px!important;margin:.08rem 0!important;font-size:.86rem!important;font-weight:600;position:relative;border:1px solid transparent;transition:.16s ease;}
.app-nav-link i{width:18px;text-align:center;color:#7f97ae;transition:.16s ease;}.app-nav-link:hover{background:rgba(148,163,184,.08)!important;color:#fff!important;border-color:rgba(148,163,184,.08);}.app-nav-link:hover i{color:#bdefff;}
.app-nav-link.active{background:#163a5c!important;color:#fff!important;border:1px solid #1f4f7a!important;box-shadow:inset 3px 0 0 #22d3ee;}.app-nav-link.active i{color:#67e8f9;}.app-nav-link .app-count-badge{margin-left:auto!important;float:none!important;}
.app-nav-primary{background:#126b8a!important;color:#fff!important;border:1px solid #1b829f!important;box-shadow:none;}.app-nav-primary i{color:#fff!important;}
.app-nav-collapse-btn{width:100%;background:none;border:none;text-align:left;}.app-nav-chevron{margin-left:auto;width:auto!important;font-size:.67rem;transition:transform .2s ease;}.app-nav-collapse-btn[aria-expanded="true"] .app-nav-chevron{transform:rotate(180deg);}
.app-main{flex:1;min-width:0;}.app-content{width:100%;max-width:1680px;margin:0 auto;padding:1.35rem 1.5rem 2rem;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.15rem;}.page-header-copy{min-width:0;}.page-eyebrow{color:#6fdcf4;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.25rem;}.page-title{font-size:1.55rem;font-weight:760;color:#fff;margin:0;letter-spacing:-.02em;}.page-description{font-size:.84rem;color:var(--app-muted);margin-top:.3rem;max-width:850px;}.page-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;}.page-actions .btn{white-space:nowrap;}
.panel,.chart-card,.stat-card{background:#0f1d33;border:1px solid var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow);}.panel{overflow:hidden;}.panel-title{min-height:48px;display:flex;align-items:center;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#c7d7e8;border-bottom:1px solid var(--app-border);padding:.72rem 1rem;font-weight:800;background:rgba(255,255,255,.018);}
.stat-card{padding:1rem 1.05rem;text-align:left;transition:border-color .14s ease;position:relative;overflow:hidden;border-top:3px solid #1d7895;}.stat-card:hover{transform:none;border-color:#2b5572;box-shadow:var(--app-shadow);}.stat-card::after{display:none;}.stat-card .stat-value{font-size:1.65rem;line-height:1.1;font-weight:800;color:#fff;}.stat-card .stat-label{font-size:.68rem;color:var(--app-muted);letter-spacing:.07em;margin-top:.38rem;font-weight:750;}.stat-card .stat-icon{font-size:1rem;margin:0 0 .7rem;width:32px;height:32px;border-radius:2px;background:#163a5c;display:flex;align-items:center;justify-content:center;}
.table-responsive{scrollbar-width:thin;scrollbar-color:#2a405d transparent;}.table-dark-custom{--bs-table-bg:transparent;--bs-table-color:#dbe7f3;--bs-table-border-color:rgba(148,163,184,.11);margin-bottom:0;}.table-dark-custom thead th{color:#8fa6bd!important;font-size:.67rem;text-transform:uppercase;letter-spacing:.065em;font-weight:800!important;background:#0d192a!important;border-bottom:1px solid var(--app-border-strong);padding:.78rem .9rem;white-space:nowrap;}.table-dark-custom tbody td{padding:.78rem .9rem;border-color:rgba(148,163,184,.09);vertical-align:middle;}.table-dark-custom tbody tr{transition:background .14s ease;}.table-dark-custom tbody tr:hover{background:rgba(56,189,248,.045)!important;}
.form-control,.form-select{background:#0a1627!important;border:1px solid rgba(148,163,184,.24)!important;color:#eaf2fb!important;border-radius:2px!important;}.form-control:focus,.form-select:focus{border-color:#38bdf8!important;box-shadow:0 0 0 .2rem rgba(56,189,248,.11)!important;}.form-select option{background:#0d192b;color:#fff;}.form-label{color:#91a8bf!important;font-size:.72rem!important;font-weight:700;letter-spacing:.02em;}.filter-panel{padding:1rem;}.filter-summary{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:var(--app-muted);font-size:.78rem;}.filter-chip{background:#163a5c;border:1px solid #1f4f7a;color:#bcefff;border-radius:2px;padding:.25rem .55rem;}
.btn{border-radius:2px!important;font-weight:650;font-size:.82rem;box-shadow:none!important;}.btn-ops{background:#126b8a;color:#fff;border:1px solid #1b829f;box-shadow:none;}.btn-ops:hover{background:#1680a3;color:#fff;transform:none;}.btn-outline-secondary{--bs-btn-color:#a9bbce;--bs-btn-border-color:rgba(148,163,184,.32);--bs-btn-hover-bg:#21334a;--bs-btn-hover-border-color:#314861;}
.badge{border-radius:2px!important;padding:.38em .65em;font-weight:750;letter-spacing:.01em;}.bg-info{background-color:#38bdf8!important;}.text-info{color:#67dff5!important;}.bg-primary{background-color:#3b82f6!important;}.bg-success{background-color:#22c55e!important;}.bg-warning{background-color:#fbbf24!important;}.bg-danger{background-color:#ef4444!important;}.bg-secondary{background-color:#64748b!important;}.progress{background:#07111f;border-radius:2px!important;overflow:hidden;}
.task-detail-tabs{border-bottom:1px solid var(--app-border);gap:.25rem;padding:0 .35rem;}.task-detail-tabs .nav-link{border:none;color:#8fa6bd;padding:.8rem .9rem;font-size:.82rem;font-weight:700;border-bottom:2px solid transparent;border-radius:0;background:transparent;}.task-detail-tabs .nav-link:hover{color:#fff;}.task-detail-tabs .nav-link.active{color:#67e8f9;background:transparent;border-bottom-color:#22d3ee;}.task-tab-pane{padding:1rem;}.task-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;}.task-meta-item{background:#101b2d;border:1px solid var(--app-border);border-radius:2px;padding:.75rem .8rem;}.task-meta-label{font-size:.66rem;color:#7890a7;text-transform:uppercase;letter-spacing:.065em;font-weight:800;}.task-meta-value{font-size:.85rem;color:#fff;font-weight:650;margin-top:.2rem;word-break:break-word;}.task-file-row{background:#101b2d;border:1px solid var(--app-border);border-radius:2px;padding:.7rem .75rem;}.task-action-panel{position:sticky;top:calc(var(--app-topbar-height) + 1rem);}.action-menu-box{border-top:1px solid var(--app-border);padding-top:.9rem;margin-top:.9rem;}
.alert{border-radius:2px!important;border-width:1px;}.empty-box{background:#101b2d;border:1px dashed #304764;border-radius:2px!important;}.app-footer{border-top:1px solid var(--app-border);margin-left:var(--app-sidebar-width);}.dropdown-menu{--bs-dropdown-link-hover-bg:#17283e;border-radius:3px;}
@media (max-width:1199.98px){.task-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:991.98px){.app-sidebar{position:fixed!important;top:0;height:100vh;width:min(86vw,300px)!important;background:#101b2d!important;}.app-content{padding:1rem;}.app-footer{margin-left:0;}.page-header{flex-direction:column;}.page-actions{justify-content:flex-start;}.task-action-panel{position:static;}.app-brand-subtitle,.app-user-meta{display:none;}}
@media (max-width:575.98px){.app-content{padding:.8rem .7rem 1.3rem;}.page-title{font-size:1.25rem;}.page-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;}.page-actions .btn{width:100%;}.task-meta-grid{grid-template-columns:1fr;}.stat-card{padding:.85rem;}.stat-card .stat-value{font-size:1.4rem;}.table-dark-custom thead{display:none;}.table-dark-custom,.table-dark-custom tbody,.table-dark-custom tr,.table-dark-custom td{display:block;width:100%;}.table-dark-custom tbody tr{padding:.45rem .2rem;border-bottom:1px solid var(--app-border);}.table-dark-custom tbody td{border:none;padding:.35rem .65rem;text-align:left!important;}.table-dark-custom tbody td:last-child{padding-bottom:.75rem;}}


/* ===== Chủ đề xanh đậm hành chính, hình chữ nhật phẳng ===== */
.chart-card{background:#0f1d33!important;border-radius:3px!important;box-shadow:var(--app-shadow)!important;}
.chart-card .chart-title{color:#dceeff!important;}
.chart-card .chart-sub,.chart-sub{color:#9fb3c8!important;}
.chart-detail-list{border-top-color:#1f3252!important;}
.chart-detail-row{color:#dce8f5!important;}
.detail-label{color:#9fb3c8!important;}
.detail-value{color:#fff!important;}
.chart-percent-overlay{color:#fff!important;}
.panel-title{background:#101b2d!important;border-bottom-color:#1f3252!important;color:#cfe3f5!important;}
.table-dark-custom tbody td{color:#dce8f5!important;}
.form-control::placeholder{color:#71879e!important;}
.form-check-label{color:#dce8f5!important;}
.btn-outline-info{--bs-btn-color:#67dff5;--bs-btn-border-color:#2c7891;--bs-btn-hover-bg:#163a5c;--bs-btn-hover-color:#fff;}
.btn-outline-secondary{--bs-btn-color:#b4c3d2;--bs-btn-border-color:#40546d;--bs-btn-hover-bg:#21334a;--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#526982;}
.task-detail-tabs{background:#101b2d;padding:0;border-bottom-color:#1f3252;gap:0;}
.task-detail-tabs .nav-link{border-right:1px solid #1f3252;padding:.78rem .9rem;}
.task-detail-tabs .nav-link.active{background:#0f1d33;color:#67e8f9;border-bottom-color:#22d3ee;}
.task-meta-value{color:#fff!important;}
.app-main .text-white{color:#e7eef7!important;}
.app-main .text-white-50{color:#9fb3c8!important;}
.app-main hr,.app-main .border-bottom,.app-main .border-top{border-color:#1f3252!important;}

/* Chat giữ màu tối ban đầu nhưng hình khối vuông và phẳng */
.chat-shell{border-radius:3px!important;box-shadow:none!important;}
.chat-search-box input,.chat-input-bar textarea{border-radius:2px!important;}
.chat-conv-avatar,.chat-bubble,.chat-attachment-img,.chat-attachment-file,.chat-file-chip{border-radius:2px!important;}
.chat-storage-track,.chat-storage-fill{border-radius:1px!important;}
.chat-storage-fill{background:#22d3ee!important;}

/* Không dùng hiệu ứng nâng, gradient hoặc mảng trang trí */
.btn:hover,.panel:hover,.chart-card:hover,.stat-card:hover{transform:none!important;}
.app-nav-primary,.btn-ops,.chat-storage-fill{background-image:none!important;}

/* ===== Biểu đồ tương phản cao trên nền xanh đậm ===== */
.task-chart-surface,
.chart-canvas-wrap{
  background:#13243a;
  border:1px solid #35506d;
  border-radius:2px;
  padding:.7rem .8rem;
}
.task-chart-surface canvas,
.chart-canvas-wrap canvas{
  filter:none!important;
}
.chart-card .chart-canvas-wrap{
  margin-top:.25rem;
}
.chart-card .detail-dot{
  box-shadow:0 0 0 1px rgba(255,255,255,.55);
}
.chart-detail-row{
  min-height:24px;
}
.chart-detail-row .detail-label{
  color:#d6e4f2!important;
  font-weight:600;
}
.chart-detail-row .detail-value{
  color:#ffffff!important;
  font-weight:800;
}
.chart-sub{
  color:#b7c8d9!important;
}
@media (max-width:575.98px){
  .task-chart-surface,.chart-canvas-wrap{padding:.55rem .45rem;}
}
.chart-card .detail-dot{
  filter:brightness(1.45) saturate(1.12);
}


/* ===== Chọn người nhận công việc: trạng thái chọn rõ ràng ===== */
#id_assigned_to_many{
  min-height:300px;
  padding:.35rem!important;
  background:#0a1627!important;
}
#id_assigned_to_many option{
  padding:.58rem .68rem;
  margin:.12rem 0;
  border:1px solid transparent;
  border-radius:2px;
  color:#dce8f5;
  background:#101b2d;
  cursor:pointer;
}
#id_assigned_to_many option:hover{
  background:#162b44;
  border-color:#35506d;
}
#id_assigned_to_many option:checked{
  color:#ffffff!important;
  font-weight:800!important;
  border-color:#22d3ee!important;
  background:#155e75 linear-gradient(0deg,#155e75,#155e75)!important;
  box-shadow:inset 4px 0 0 #67e8f9;
}
.task-recipient-summary{
  border:1px solid #35506d;
  background:#101b2d;
  padding:.65rem .7rem;
  border-radius:2px;
}
.task-recipient-summary-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  color:#dce8f5;
  font-size:.78rem;
  margin-bottom:.5rem;
}
.task-recipient-summary-head strong{
  color:#67e8f9;
  font-size:.9rem;
}
.task-recipient-summary-note{
  color:#8fa6bd;
  font-size:.7rem;
  text-align:right;
}
.task-recipient-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  min-height:30px;
  align-items:center;
}
.task-recipient-chip{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  max-width:100%;
  border:1px solid #22d3ee;
  background:#164e63;
  color:#ffffff;
  border-radius:2px;
  padding:.34rem .5rem;
  font-size:.76rem;
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
}
.task-recipient-chip:hover{
  background:#155e75;
  border-color:#67e8f9;
}
.task-recipient-chip span:not(.task-recipient-chip-remove){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.task-recipient-chip-remove{
  color:#dff8ff;
  font-size:1rem;
  line-height:.8;
  margin-left:.08rem;
}
.task-recipient-empty{
  color:#8fa6bd;
  font-size:.76rem;
  font-style:italic;
}
@media (max-width:575.98px){
  #id_assigned_to_many{min-height:250px;}
  .task-recipient-summary-head{align-items:flex-start;flex-direction:column;gap:.2rem;}
  .task-recipient-summary-note{text-align:left;}
}