:root{
  --ink:#1B2333;
  --ink-soft:#5B6472;
  --paper:#EFF1EE;
  --paper-raised:#FFFFFF;
  --line:#DBDCD4;
  --sidebar:#1B2333;
  --sidebar-soft:#9AA3B8;
  --accent:#145C52;
  --accent-soft:#DCE8E4;
  --warn:#A6512B; --warn-soft:#F3E3DA;
  --danger:#A6392B;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'IBM Plex Sans',sans-serif;background:var(--paper);color:var(--ink);}
h1,h2,h3{font-family:'Source Serif 4',serif;margin:0;font-weight:600;}
.mono{font-family:'IBM Plex Mono',monospace;}
.app{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{width:236px;flex-shrink:0;background:var(--sidebar);color:#fff;padding:22px 14px;display:flex;flex-direction:column;gap:22px;}
.brand{padding:0 8px;}
.brand .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--sidebar-soft);text-transform:uppercase;}
.brand h1{font-size:19px;color:#fff;margin-top:4px;line-height:1.25;}
nav{display:flex;flex-direction:column;gap:2px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:8px;color:var(--sidebar-soft);font-size:14px;cursor:pointer;border:none;background:none;text-align:left;width:100%;font-family:inherit;text-decoration:none;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:rgba(255,255,255,.1);color:#fff;font-weight:500;}
.nav-item.disabled{opacity:.4;cursor:default;}
.nav-dot{width:7px;height:7px;border-radius:50%;background:var(--sidebar-soft);flex-shrink:0;}
.nav-item.active .nav-dot{background:#fff;}
.sidebar-foot{margin-top:auto;padding:10px 8px;font-size:12px;color:var(--sidebar-soft);border-top:1px solid rgba(255,255,255,.12);padding-top:14px;}

/* Menu tài khoản — bấm tên mới hiện */
.acct{margin-top:auto;position:relative;}
.acct-trigger{display:flex;align-items:center;gap:10px;width:100%;padding:10px 8px;background:none;border:none;border-top:1px solid rgba(255,255,255,.12);cursor:pointer;font-family:inherit;text-align:left;}
.acct-trigger:hover{background:rgba(255,255,255,.05);}
.acct-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.acct-info{display:flex;flex-direction:column;min-width:0;}
.acct-name{font-size:13.5px;font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-role{font-size:10.5px;color:var(--sidebar-soft);}
.acct-chev{margin-left:auto;color:var(--sidebar-soft);font-size:11px;transition:transform .15s;flex-shrink:0;}
.acct-trigger.open .acct-chev{transform:rotate(180deg);}
.acct-menu{display:none;background:#252E42;border-radius:8px;margin:6px 8px 4px;padding:6px;}
.acct-menu.show{display:block;}
.acct-menu-item{display:block;padding:9px 10px;border-radius:6px;font-size:12.5px;color:var(--sidebar-soft);text-decoration:none;}
.acct-menu-item:hover, .acct-menu-item.active{background:rgba(255,255,255,.08);color:#fff;}

/* Main */
main{flex:1;min-width:0;padding:28px 34px;}
.screen-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.screen-head h2{font-size:24px;}
.screen-sub{color:var(--ink-soft);font-size:13px;margin-top:4px;}
.btn{font-family:inherit;font-size:13px;font-weight:500;padding:9px 16px;border-radius:7px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;display:inline-block;text-decoration:none;}
.btn:focus-visible, .nav-item:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
/* Lĩnh vực — màu/icon động lấy từ bảng domains, không hard-code nữa */
.tag-chip{font-size:11px;font-family:'IBM Plex Mono',monospace;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.domain-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}

/* ===================== 6 kiểu hiển thị Danh sách Task ===================== */
/* 1. Dải màu bên trái theo lĩnh vực */
.tstyle-stripe-row{display:flex;align-items:center;gap:14px;padding:14px 18px 14px 14px;border-bottom:1px solid var(--line);border-left:5px solid var(--stripe,var(--ink-soft));}
.tstyle-stripe-row:last-child{border-bottom:none;}

/* 2. Cỡ chữ theo độ khẩn cấp */
.tstyle-fontsize-row{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.tstyle-fontsize-row:last-child{border-bottom:none;}
.tstyle-fontsize-title.overdue{font-size:19px;font-weight:700;color:var(--danger);}
.tstyle-fontsize-title.soon{font-size:16px;font-weight:600;color:var(--ink);}
.tstyle-fontsize-title.ok, .tstyle-fontsize-title.none{font-size:13.5px;font-weight:400;color:var(--ink-soft);}

/* 3. Nhuộm nền cả dòng theo trạng thái */
.tstyle-tint-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);}
.tstyle-tint-row:last-child{border-bottom:none;}
.tstyle-tint-row.overdue{background:#FBEAE6;}
.tstyle-tint-row.soon{background:#FCF3DF;}
.tstyle-tint-row.ok, .tstyle-tint-row.none{background:#fff;}

/* 4. Icon lớn, tối giản */
.tstyle-icon-row{display:flex;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line);}
.tstyle-icon-row:last-child{border-bottom:none;}
.tstyle-icon-box{font-size:24px;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* 5. Timeline theo ngày */
.tstyle-timeline-label{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:14px 18px 6px;}
.tstyle-timeline-row{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 34px;position:relative;}
.tstyle-timeline-row::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:2px;background:var(--line);}
.tstyle-timeline-row::after{content:"";position:absolute;left:18px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--dot,var(--ink-soft));}

/* 6. Avatar màu cho công ty */
.tstyle-avatar-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);}
.tstyle-avatar-row:last-child{border-bottom:none;}
.tstyle-avatar-circle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;}

/* Màn Cài đặt hiển thị — thẻ chọn kiểu */
.style-option{border:2px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;background:#fff;}
.style-option.selected{border-color:var(--ink);}
.style-option-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:500;font-size:13.5px;}
.style-option-preview{border:1px solid var(--line);border-radius:8px;overflow:hidden;pointer-events:none;}
.card{background:var(--paper-raised);border:1px solid var(--line);border-radius:10px;}
.filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.filters select, .filters input{font-family:inherit;font-size:13px;padding:8px 10px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--ink);}

/* Flash message */
.flash-message{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:10px 16px;font-size:13.5px;margin-bottom:18px;}

/* Dashboard */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
.kpi{padding:16px;}
.kpi .num{font-family:'Source Serif 4',serif;font-size:28px;}
.kpi .label{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.due-list{padding:6px 0;}
.due-row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);}
.due-row:last-child{border-bottom:none;}
.due-date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);width:74px;flex-shrink:0;}
.due-title{flex:1;font-size:14px;}
.due-company{font-size:12px;color:var(--ink-soft);}
.status-pill{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:500;flex-shrink:0;}
.status-pill.overdue{background:#F6E1DC;color:var(--danger);}
.status-pill.soon{background:#FBF0DD;color:#8A5A15;}
.status-pill.ok{background:var(--accent-soft);color:var(--accent);}

/* Task list */
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:500;padding:10px 16px;border-bottom:1px solid var(--line);}
td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.task-status{font-size:12px;padding:3px 9px;border-radius:20px;font-weight:500;}
.task-status.todo{background:#EDEEEA;color:var(--ink-soft);}
.task-status.doing{background:var(--accent-soft);color:var(--accent);}
.task-status.done{background:#E5EEE5;color:#3A6B3A;text-decoration:line-through;text-decoration-color:#3A6B3A88;}
.task-status.waiting{background:#F1F1F1;color:#9A9A9A;font-style:italic;}

/* Dashboard — cần chọn ngày bắt đầu */
.callout{background:#FBF0DD;border:1px solid #E9D6A8;color:#8A5A15;border-radius:8px;padding:10px 14px;font-size:12.5px;margin-bottom:14px;}
.start-row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.start-row:last-child{border-bottom:none;}
.start-title{flex:1;min-width:180px;font-size:14px;}
.start-company{font-size:12px;color:var(--ink-soft);}
.start-row input[type=date]{padding:6px 8px;font-size:12.5px;border-radius:6px;border:1px solid var(--line);width:auto;}

/* Lĩnh vực */
.domain-list-row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);}
.domain-list-row:last-child{border-bottom:none;}
/* Bộ lọc Task nâng cấp — nhiều field + nút Lọc/Xoá lọc thay vì tự nộp form */
.filters-box{background:var(--paper-raised);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:18px;}
.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px;}
.f-field label{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:5px;font-weight:500;}
.f-field input, .f-field select{width:100%;font-family:inherit;font-size:13px;padding:8px 10px;border-radius:7px;border:1px solid var(--line);}
.filters-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.filters-note{font-size:11.5px;color:var(--ink-soft);}

/* Icon Tips + tooltip (gợi ý "chọn hôm nay để biết việc cần làm") */
.tip-icon{position:relative;display:inline-flex;font-size:12px;cursor:help;}
.tip-bubble{display:none;position:absolute;left:0;bottom:calc(100% + 8px);
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:400;padding:8px 11px;border-radius:7px;
  width:200px;line-height:1.5;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.15);}
.tip-icon:hover .tip-bubble, .tip-icon:focus .tip-bubble{display:block;}

/* Hàng Task sáng lên khi rê chuột, bấm vào xem Chi tiết (áp cho cả 7 kiểu hiển thị) */
tr.task-row, .task-row-clickable{cursor:pointer;}
tr.task-row:hover{background:#F6F5F1;}
.task-row-clickable:hover{filter:brightness(0.98);}
.row-actions-stop{display:flex;gap:6px;flex-shrink:0;margin-left:auto;}

/* Trang Chi tiết Task */
.detail-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:10px;padding:26px;max-width:640px;}
.detail-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;}
.detail-title{font-size:20px;font-weight:600;font-family:'Source Serif 4',serif;}
.detail-source{font-size:12px;color:var(--ink-soft);margin-top:4px;}
.status-badge{font-size:11.5px;padding:4px 11px;border-radius:20px;font-weight:500;white-space:nowrap;}
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px;}
.meta-item .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:4px;}
.meta-item .v{font-size:13.5px;font-weight:500;}
.case-strip{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:12.5px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.case-strip a{color:var(--accent);font-weight:500;}
.note-box{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:14px 16px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;white-space:pre-wrap;line-height:1.7;margin-bottom:20px;}
.detail-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}

/* Form */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:5px;}
.field input, .field select, .field textarea{width:100%;font-family:inherit;font-size:13.5px;padding:9px 11px;border-radius:7px;border:1px solid var(--line);background:#fff;}
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid{border-color:var(--danger);}
.invalid-feedback{color:var(--danger);font-size:12px;margin-top:4px;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}

/* Case detail — timeline phụ thuộc (điểm nhấn thiết kế) */
.case-meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:24px;padding:16px 20px;}
.case-meta div{font-size:13px;}
.case-meta .k{color:var(--ink-soft);font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
.timeline{position:relative;padding:6px 0 6px 8px;}
.step{position:relative;padding:0 0 28px 34px;border-left:2px solid var(--line);margin-left:8px;}
.step:last-child{border-left:2px solid transparent;padding-bottom:0;}
.step .dot{position:absolute;left:-9px;top:0;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--line);}
.step.done .dot{background:var(--accent);border-color:var(--accent);}
.step.doing .dot{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.step.waiting .dot{background:#fff;border-color:var(--line);}
.step-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
.step-card.waiting{opacity:.6;}
.step-title{font-size:14.5px;font-weight:500;margin-bottom:6px;}
.step-row2{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.step-sla{font-size:12px;color:var(--ink-soft);}
.depends-note{font-size:11.5px;color:var(--ink-soft);font-style:italic;margin-top:6px;}
.limit-note{margin-top:20px;padding:12px 16px;background:var(--warn-soft);border:1px solid #E4C6B3;border-radius:8px;font-size:12.5px;color:var(--warn);}
.docs{margin-top:24px;}
.doc-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px;}
.doc-row:last-child{border-bottom:none;}

/* Công ty */
.company-tree{padding:6px 0;}
.company-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);}
.company-row:last-child{border-bottom:none;}
.company-row.child{padding-left:44px;position:relative;}
.company-row.child::before{content:"↳";position:absolute;left:20px;color:var(--ink-soft);}
.company-name{font-weight:500;font-size:14px;}
.company-code{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);}

/* Quy tắc lặp lại / Mẫu quy trình */
.rule-row, .tpl-row{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);gap:16px;flex-wrap:wrap;}
.rule-row:last-child, .tpl-row:last-child{border-bottom:none;}
.rule-name{font-size:14px;font-weight:500;}
.rule-freq{font-size:12px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}
.toggle{width:34px;height:19px;border-radius:20px;background:var(--accent);position:relative;flex-shrink:0;border:none;cursor:pointer;padding:0;}
.toggle::after{content:"";position:absolute;width:15px;height:15px;background:#fff;border-radius:50%;top:2px;right:2px;}
.toggle.off{background:#D9D9D2;}
.toggle.off::after{left:2px;right:auto;}
.step-count{font-size:12px;color:var(--ink-soft);}

@media (max-width:840px){
  .app{flex-direction:column;}
  .sidebar{width:100%;flex-direction:row;overflow-x:auto;align-items:center;}
  nav{flex-direction:row;}
  .nav-item{width:auto;white-space:nowrap;flex-shrink:0;}
  .brand{display:none;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  main{padding:20px;}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-scroll table{min-width:640px;}
  .acct{margin-top:0;margin-left:auto;flex-shrink:0;position:relative;}
  .acct-trigger{border-top:none;padding:6px 10px;}
  .acct-role{display:none;}
  .acct-menu{position:absolute;top:100%;right:0;left:auto;width:200px;margin:4px 0 0;z-index:50;}
}