:root{color-scheme:dark;--bg:#101112;--side:#17191a;--panel:#1c1e20;--input:#27292c;--line:#34373b;--text:#eff0f8;--muted:#9ba5c3;--purple:#5948ee}*{box-sizing:border-box}*[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:13px}button,input,select,textarea{font:inherit}button,a,select{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.app-shell{display:flex;height:100dvh;min-height:450px;overflow:hidden}.sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column;background:var(--side);border-right:1px solid var(--line);height:100%;overflow-y:auto;scrollbar-width:thin;padding:17px 12px;gap:6px}.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 23px}.brand strong{display:block;font-size:17px}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.brandmark{background:var(--purple);border-radius:10px;width:34px;height:34px;display:grid;place-items:center;font-size:21px;font-weight:900}.profile{display:flex;align-items:center;gap:9px;padding:7px 8px 20px;min-width:0}.profile-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.avatar{width:31px;height:31px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--purple);font-size:12px;font-weight:700}.role-pill,.badge{display:inline-flex;align-items:center;justify-content:center;font-size:11px;border:1px solid transparent;border-radius:6px;padding:4px 8px;white-space:nowrap;font-weight:550}.role-pill.admin{color:#ff8ea1;background:#462a35;border-color:#6b3b4b}.role-pill.tester{color:#f4c66c;background:#4d3b25;border-color:#65502e}.role-pill.user{color:#79bbff;background:#253a50;border-color:#3d5674}.role-pill.guest{color:var(--muted);background:#303236}.navgroup{font-size:10px;letter-spacing:1.2px;color:#8390b7;font-weight:700;margin:17px 9px 7px}.nav{display:flex;align-items:center;gap:11px;width:100%;border:0;border-radius:8px;padding:12px;color:#bac3dd;background:transparent;text-align:left;font-size:12px}.nav:hover,.nav.active{background:#303236;color:white}.nav-ico{min-width:18px;text-align:center;color:#a6acf7}.sidebar-bottom{margin-top:auto;padding:15px 4px 1px;position:sticky;bottom:0;background:var(--side)}.main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;padding:27px 28px;scrollbar-gutter:stable}.top{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:23px}.top h1{margin:0;color:white;font-size:25px;font-weight:740}.muted{color:var(--muted);font-size:12px}.top .muted{margin-top:8px}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:var(--input);color:#e1e5f3;border-radius:8px;padding:10px 13px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px}.btn:hover:not(:disabled){filter:brightness(1.15)}.btn.primary{background:var(--purple);border-color:var(--purple);color:white;font-weight:600}.btn.danger{background:#542d3c;color:#ffb2c2;border-color:#734251}.btn.full{width:100%;margin-top:5px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}.stat{border:1px solid var(--line);background:var(--panel);padding:17px;border-radius:11px}.stat label{display:block;color:#a1abc5;font-size:12px}.stat strong{display:block;font-size:27px;margin:8px 0}.stat small{color:var(--muted);font-size:11px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:19px}.panelhead{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px;font-weight:650;border-bottom:1px solid var(--line)}.panelbody{padding:18px}.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line)}.tab{border:1px solid #414448;background:#272a2d;color:#cbd3e7;border-radius:7px;padding:9px 12px;font-size:12px}.tab.active{background:var(--purple);color:white;border-color:var(--purple)}.toolbar{padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.search,.select{background:var(--input);border:1px solid #3b3e43;color:#e3e6f6;border-radius:8px;padding:10px 12px;min-width:135px;outline:0;max-width:100%}.search:focus,.select:focus,.field input:focus,.field textarea:focus{border-color:#7365ff;box-shadow:0 0 0 2px #5948ee30}.toolbar input{flex:1;min-width:200px}.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23adb6d6' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}.select option{background:#25272a;color:#f3f3f8}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:12px;min-width:850px}th,td{padding:13px 12px;text-align:left;border-bottom:1px solid #303235}th{color:#96a4c4;font-weight:600;white-space:nowrap}td{color:#d5d9eb}tr:last-child td{border-bottom:0}tbody tr:hover{background:#303235}.clickrow{cursor:pointer}.clickrow:focus-visible{outline:2px solid #8a83ff;outline-offset:-2px}.bugtitle{font-weight:650;color:#fff}.badge.new,.badge.progress{color:#78b4ff;background:#293952;border-color:#3b5274}.badge.pending{color:#ffca75;background:#473924;border-color:#60502e}.badge.resolved{color:#69dbb0;background:#224338;border-color:#315b49}.badge.critical,.badge.high{color:#ff8fa5;background:#492b3c;border-color:#663b50}.badge.normal{color:#b5bee0;background:#2b2e32;border-color:#43464a}.badge.low{color:#aaa5ff;background:#32304b;border-color:#494667}.badge.category{font-weight:600}.pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 17px;gap:10px}.page-buttons{display:flex;gap:5px}.empty{padding:35px 18px;text-align:center;color:var(--muted)}.notice{border:1px solid #514675;background:#2e2945;color:#d2c9fa;border-radius:9px;padding:14px;margin-bottom:17px}.formgrid{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field.full{grid-column:1/-1}.field label{font-size:12px;color:#b4bfd8}.field input,.field textarea,.field select{width:100%;background:var(--input);color:#edf0fa;border:1px solid #3b3e43;border-radius:8px;padding:11px;outline:0}.field textarea{min-height:110px;resize:vertical}.detail{padding:18px}.detail h2{font-size:21px;margin:12px 0}.detail p{color:#c2cbe0;line-height:1.75;overflow-wrap:anywhere;white-space:normal}.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:16px 0}.info-card{background:#282b2f;border:1px solid #3a3d42;border-radius:10px;padding:14px;min-width:0}.info-card label{display:block;color:#93a0c0;font-size:11px;margin-bottom:8px}.info-card strong{font-size:13px;overflow-wrap:anywhere}.userrow{display:flex;align-items:center;gap:12px;padding:13px;border-bottom:1px solid var(--line)}.userrow .info{flex:1;min-width:0}.userrow .info small{display:block;color:var(--muted);margin-top:5px}.userrow .info strong{font-size:12px}.history-entry{display:flex;gap:12px;padding:15px 17px;border-bottom:1px solid var(--line)}.history-entry:last-child{border:0}.history-mark{background:#343052;border-radius:50%;color:#afa6ff;width:27px;height:27px;display:grid;place-items:center;flex-shrink:0}.history-text{line-height:1.7;color:#d2d7ea}.history-entry .muted{margin-top:4px}.drawer-overlay{position:fixed;inset:0;background:#050611a8;z-index:70}.drawer{position:fixed;right:0;top:0;height:100dvh;width:min(530px,100vw);z-index:71;background:#212433;border-left:1px solid #454a62;display:flex;flex-direction:column;box-shadow:-15px 0 50px #0006}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:21px;border-bottom:1px solid var(--line)}.drawer-head h2{font-size:20px;line-height:1.35;margin:7px 0 0;overflow-wrap:anywhere}.drawer-scroll{overflow-y:auto;padding:18px 21px;flex:1}.drawer-section{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.drawer-section h3{font-size:13px;margin:16px 0 12px}.drawer-section p{line-height:1.8;color:#c7cee2;overflow-wrap:anywhere}.drawer-form{display:flex;flex-direction:column;gap:15px}.drawer-form .btn{width:100%}.category-row{display:flex;gap:12px;align-items:center;padding:14px 17px;border-bottom:1px solid var(--line)}.category-row .name{flex:1}.color-dot{width:14px;height:14px;border-radius:4px;flex-shrink:0}.category-row .actions{gap:7px}body.drawer-open{overflow:hidden}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
/* Native select dropdown panels are painted by OS; this styles closed controls and requests dark platform menus. */
*{scrollbar-width:thin;scrollbar-color:#53575d #17191a}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:#17191a}::-webkit-scrollbar-thumb{background:#53575d;border:2px solid #17191a;border-radius:20px}::-webkit-scrollbar-thumb:hover{background:#777fa8}::-webkit-scrollbar-corner{background:#17191a}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.main{padding:18px 13px}.sidebar{width:205px}}@media(max-width:650px){.sidebar{width:64px;padding:12px 5px}.brand{padding:5px 4px}.brand strong,.brand small,.nav span,.navgroup,.profile-name,.role-pill{display:none}.profile{justify-content:center}.nav{justify-content:center}.sidebar-bottom .btn{padding:10px 3px;font-size:9px;overflow-wrap:anywhere}.main{padding:15px 10px}.top h1{font-size:22px}.stats{gap:7px}.stat{padding:11px}.formgrid,.detailgrid{grid-template-columns:1fr}.field.full{grid-column:auto}.toolbar{flex-direction:column;align-items:stretch}.toolbar input,.toolbar select{width:100%}.userrow{flex-wrap:wrap}}

/* Dream Land v1.5 UI refinements */
:root { --side: #17191a; }
html,body { font-size: 14px; }
.nav { font-size: 13px; }
.muted,.stat label,.field label,.btn,.tab,table,.role-pill,.badge { font-size: 13px; }
.stat small,.profile-name,.userrow .info strong { font-size: 12px; }
.top h1 { font-size: 27px; }
.main { padding-top: 79px; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.nav[data-page="Review Center"] { position: relative; }
.pending-count,.notification-count { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 15px; color: #fff; background: #ed4564; font-size: 11px; font-weight: 800; }
.pending-count { margin-left: auto; }
.badge.needs-info { color:#ffd888; background:#55412c; border-color:#9d7845; margin-left:6px; }
.attachment-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:11px; margin:15px 0; }
.attachment-grid a { display:block; aspect-ratio: 4/3; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.attachment-grid img { display:block; width:100%; height:100%; object-fit:cover; }
.supplement-notice { border-color:#ad7a39; background:#40331f; color:#ffe2ac; }
.supplement-notice p { margin-bottom:0; }
/* Fully custom select popup, independent of operating-system dropdown painting */
.custom-select { position:relative; width:100%; min-width:0; }
.native-select-ghost { position:absolute!important; opacity:0!important; width:1px!important; height:1px!important; pointer-events:none!important; padding:0!important; border:0!important; left:0; top:0; }
.select-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:42px; background:var(--input); border:1px solid #424761; color:#f2f3fc; padding:10px 12px; border-radius:9px; text-align:left; }
.select-trigger:hover { border-color:#655b9e; }
.select-trigger[aria-expanded="true"],.select-trigger:focus-visible { border-color:#8979ff; outline:2px solid #5948ee3d; }
.select-arrow { color:#b9b9d3; flex-shrink:0; font-size:18px; }
.select-popup { position:absolute; z-index:120; top:calc(100% + 5px); left:0; right:0; max-height:220px; overflow:auto; padding:5px; border-radius:9px; border:1px solid #52587c; background:#292d42; box-shadow:0 16px 40px #0009; }
.custom-select.opens-up .select-popup { top:auto; bottom:calc(100% + 5px); }
.select-option { display:block; width:100%; border:0; background:transparent; color:#e8eaf7; padding:10px 12px; text-align:left; border-radius:6px; font-size:13px; }
.select-option:hover,.select-option:focus-visible { background:#3a3d5a; outline:0; }
.select-option.selected { background:#433c80; color:white; }
/* Toasts and action dialogs */
.toast-stack { position:fixed; bottom:22px; right:22px; z-index:300; display:flex; flex-direction:column; gap:10px; max-width:min(410px,calc(100vw - 36px)); pointer-events:none; }
.toast { pointer-events:auto; border-radius:11px; padding:15px 19px; border:1px solid #356853; background:#213b34; box-shadow:0 13px 35px #0008; color:#c8f4dd; line-height:1.5; font-weight:550; }
.toast.error { background:#442837; border-color:#805063; color:#ffd0db; }
.dialog-shade { position:fixed; inset:0; display:grid; place-items:center; z-index:220; background:#080a18b8; padding:15px; }
.dialog-card { width:min(470px,100%); padding:24px; background:#25293a; border:1px solid #454c66; border-radius:14px; box-shadow:0 20px 65px #0009; }
.dialog-card h3 { margin:0 0 16px; font-size:18px; }
.dialog-card textarea { width:100%; padding:12px; min-height:110px; border-radius:8px; border:1px solid #4e5573; background:#1b1d2b; color:white; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
/* Notifications */
.notification-widget { position:fixed; z-index:55; top:76px; right:30px; }
.notification-bell { position:relative; display:grid; place-items:center; width:43px; height:43px; border:1px solid #444861; border-radius:11px; background:#2b2e41; color:#e9eaf5; font-size:24px; }
.notification-bell:hover { border-color:#7565d9; background:#353654; }
.notification-bell:before { content:'♧'; display:none; }
.notification-count { position:absolute; right:-8px; top:-8px; font-size:11px; }
.notification-panel { position:absolute; top:53px; right:0; width:min(390px,calc(100vw - 30px)); max-height:470px; overflow-y:auto; background:#212325; border:1px solid #414860; border-radius:12px; box-shadow:0 18px 45px #0009; }
.notification-heading { position:sticky; top:0; background:#212325; display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid #3b415a; }
.notification-item { display:block; width:100%; background:transparent; border:0; border-bottom:1px solid #33394e; padding:13px 15px; color:#e3e6f5; text-align:left; line-height:1.5; }
.notification-item:hover { background:#353b52; }
.notification-item.unread { box-shadow:inset 3px 0 #796eff; background:#2c3048; }
.notification-item small { display:block; color:#a5acc9; margin-top:6px; }
@media(max-width:900px) { .notification-widget { right:16px; top:70px; } .main { padding-top:77px; } }

.top {padding-right:54px;}

/* ================================================
   Dream Land v1.6 — report detail and conversations
   ================================================ */
:root { --purple:#6854f5; }
[hidden] { display:none !important; }
.top-account-bar { position:fixed;top:12px;right:24px;z-index:65;display:flex;align-items:center;gap:10px;background:#262b3f;border:1px solid #414763;border-radius:13px;padding:6px 8px 6px 11px;min-height:51px;box-shadow:0 13px 30px #0606155c;max-width:calc(100vw - 95px); }
.top-user { display:flex;align-items:center;gap:9px;min-width:0; }
.top-user .avatar {width:33px;height:33px;font-size:14px;}
.top-username {max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;font-size:13px;}
.top-logout {background:transparent;color:#aeb9d8;border:0;border-left:1px solid #505672;padding:9px 10px;cursor:pointer;font-size:19px;}
.top-logout:hover{color:#fff;}
.notification-widget {position:relative;top:auto;right:auto;display:block;z-index:auto;}
.notification-bell {width:36px;height:36px;font-size:20px;background:transparent;border:0;}
.notification-panel {position:absolute;top:48px;right:0;min-width:340px;max-width:calc(100vw - 25px);z-index:120;}
.notification-item {cursor:pointer;}
.sidebar {position:sticky;top:0;height:100dvh;min-height:0;overflow-y:auto;}
.sidebar-bottom {margin-top:auto;flex-shrink:0;}
.main {min-width:0;overflow-x:hidden;padding-top:88px;}
.badge.category {color:#bec3dd;background:#303449;border-color:#484e68;font-weight:550;}
.detail-title {margin-bottom:17px;}
.detail-title h2 {font-size:23px;line-height:1.35;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:9px 0;}
.report-detail-layout {display:grid;grid-template-columns:minmax(0,1.45fr) minmax(315px,0.95fr);gap:16px;align-items:start;}
.report-main-column {min-width:0;display:grid;gap:15px;}
.report-info-panel,.highlight-block,.report-attachments,.discussion-pane {border-radius:13px;background:#202224;border:1px solid #373a3e;overflow:hidden;}
.report-panel-heading {font-size:15px;font-weight:700;padding:16px 18px;border-bottom:1px solid #383e55;}
.report-info-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;padding:15px 18px;}
.report-meta {min-width:0;display:flex;align-items:center;justify-content:space-between;gap:11px;padding:8px 0;border-bottom:1px solid #343a50;}
.report-meta span:first-child {color:#a0accb;font-size:12px;flex-shrink:0;}
.report-meta strong {color:#eaeef8;font-weight:600;font-size:13px;text-align:right;overflow-wrap:anywhere;min-width:0;}
.report-meta strong .badge {font-size:12px;}
.highlight-block {padding:17px 19px;}
.highlight-block h3 {font-size:15px;margin:0 0 10px;}
.highlight-block p {font-size:14px;line-height:1.75;margin:0;overflow-wrap:anywhere;color:#f2f3f9;}
.description-block {background:#392c3d;border-color:#76506f;}
.expected-block {background:#263d3b;border-color:#437e69;}
.report-attachments {padding:17px 19px;}
.report-attachments h3 {margin:0 0 15px;font-size:15px;}
.media-columns {display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.media-columns>div+div {border-left:1px solid #3a3d42;padding-left:16px;}
.media-columns strong {font-size:13px;}
.media-columns .attachment-grid {grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
.discussion-pane {position:sticky;top:90px;height:min(740px,calc(100dvh - 112px));min-height:470px;display:flex;flex-direction:column;}
.discussion-head {padding:17px 18px;border-bottom:1px solid #3a4056;font-weight:700;font-size:15px;}
.discussion-messages {flex:1;min-height:150px;overflow-y:auto;padding:18px 14px;display:flex;flex-direction:column;gap:17px;scrollbar-gutter:stable;}
.discussion-system {background:#4b3928;border:1px solid #8b673e;border-radius:9px;padding:12px;line-height:1.5;font-size:13px;color:#ffdfa8;}
.chat-entry {display:flex;gap:9px;align-items:flex-start;}
.chat-entry.mine {flex-direction:row-reverse;}
.chat-avatar {width:29px;height:29px;flex-shrink:0;border-radius:50%;background:#6350eb;display:grid;place-items:center;font-weight:700;font-size:12px;}
.chat-detail {max-width:88%;min-width:0;}
.chat-sender {display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:7px;font-size:12px;}
.chat-sender .role-pill {font-size:10px;padding:2px 6px;}
.chat-sender time {color:#929bb9;font-size:11px;}
.chat-entry.mine .chat-sender {justify-content:flex-end;}
.chat-bubble {background:#30364c;color:#f2f3fa;padding:12px 14px;border-radius:12px;line-height:1.6;font-size:13px;overflow-wrap:anywhere;}
.chat-entry.mine .chat-bubble {background:#483b9e;}
.chat-form {padding:13px;border-top:1px solid #3b425a;background:#202224;}
.chat-form-main {display:flex;gap:7px;align-items:stretch;}
.chat-form-main textarea {flex:1;min-width:0;resize:none;min-height:53px;max-height:150px;background:#292c30;border:1px solid #43474c;border-radius:9px;padding:12px;font-size:13px;color:#fff;}
.chat-send {font-size:21px;min-width:44px;}
.chat-extra {display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding-top:10px;}
.chat-extra input[type=url] {flex:1;min-width:170px;max-width:100%;background:#292c30;border:1px solid #43474c;color:#eee;border-radius:8px;padding:10px;font-size:12px;}
.chat-file-label {cursor:pointer;background:#32374e;border:1px solid #4b5371;border-radius:8px;padding:9px;font-size:12px;}
.chat-file-label input {display:block;max-width:180px;font-size:11px;margin-top:6px;}
.supplement-submit {width:100%;margin-top:10px;}
.drawer {width:min(840px,100vw);}
.drawer .report-info-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.drawer .report-info-panel,.drawer .highlight-block,.drawer .report-attachments {margin-bottom:15px;}
.drawer .discussion-pane {height:480px;min-height:350px;position:static;margin-top:20px;}
.drawer .drawer-section {border:1px solid #373a3e;border-radius:12px;padding:16px;margin-top:16px;background:#252a3c;}
.drawer .drawer-head h2 {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.drawer-scroll {scrollbar-gutter:stable;}
.users-list {display:block;}
.userrow {display:grid;grid-template-columns:38px minmax(145px,1fr) 75px minmax(170px,230px) auto;gap:14px;align-items:center;}
.userrow .info {min-width:0;}
.userrow .info strong,.userrow .info small {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-select {min-width:0;}
.user-select .custom-select {width:100%;}
.user-role {white-space:nowrap;}
@media(max-width:1100px){.report-detail-layout{grid-template-columns:1fr;}.discussion-pane{position:static;height:550px;}.userrow{grid-template-columns:38px minmax(125px,1fr) 70px minmax(130px,190px) auto;}}
@media(max-width:700px){.main{padding-top:88px;}.top-account-bar{top:10px;right:9px;gap:4px;padding:5px;}.top-username{max-width:75px;}.top-account-bar .role-pill{display:none;}.report-info-grid{grid-template-columns:1fr;}.media-columns{grid-template-columns:1fr;}.media-columns>div+div{border-left:0;border-top:1px solid #3a3d42;padding-left:0;padding-top:14px;}.detail-title h2{font-size:18px;}.userrow{grid-template-columns:34px minmax(90px,1fr) auto;gap:8px;}.user-role{display:none;}.user-select{grid-column:2/4;}.userrow>.btn{grid-column:3;}.notification-panel{min-width:min(340px,calc(100vw - 75px));}.drawer .report-info-grid{grid-template-columns:1fr;}}


/* ==============================================================
   DREAM LAND v1.7 - Layout, icons and fixed top actions
   ============================================================= */
[hidden] { display:none!important; }
.nav .nav-ico {width:18px;min-width:18px;text-align:center;color:#a4acd8;font-size:14px;}
.nav.active .nav-ico,.nav:hover .nav-ico {color:#d4d0ff;}
.top-account-bar {gap:9px;right:24px;top:12px;z-index:135;}
.top-create-report {white-space:nowrap;min-height:36px;padding:9px 12px;font-size:13px;}
.top-logout {font-size:16px;}
.notification-bell {font-size:18px;}
.top {padding-right:0;}
/* Keep heading and buttons away from fixed top bar */
.main {padding-top:89px;}
.detail-navline {display:flex;align-items:center;gap:13px;justify-content:flex-start;margin-bottom:18px;min-height:39px;}
.detail-back {color:#d2caff;flex-shrink:0;}
.detail-title h2 {padding-right:10px;}
/* Custom selects: popup is now mounted on body instead of inside clipped cards. */
.select-portal {
  position:fixed!important;
  z-index:6000!important;
  right:auto!important;
  top:auto;
  bottom:auto;
  min-width:160px;
  overflow-y:auto;
  overscroll-behavior:contain;
  box-shadow:0 24px 55px rgba(0,0,0,.55);
}
.select-portal .select-option:disabled {opacity:.38;cursor:not-allowed;}
.userrow {grid-template-columns:38px minmax(150px,1fr) 85px minmax(170px,230px) auto;}
.userrow .user-select {position:relative;z-index:auto;}
/* 2-column detail drawer: report on left, Messenger on right. */
.drawer {
  width:min(1200px,calc(100vw - 255px));
  max-width:100vw;
  z-index:151;
}
.drawer-overlay {z-index:149;}
.drawer-head {flex-shrink:0;padding:16px 22px;align-items:center;}
.drawer-head h2 {font-size:19px;}
.drawer-scroll.drawer-two-column {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(345px,.9fr);
  gap:15px;
  overflow:hidden;
  min-height:0;
  height:100%;
  flex:1;
  padding:15px 18px 18px;
  scrollbar-gutter:auto;
}
.drawer-report-left {
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:6px;
  scrollbar-gutter:stable;
}
.drawer-report-right {min-width:0;min-height:0;display:flex;flex-direction:column;}
.drawer .drawer-report-right .discussion-pane {
  position:relative;
  top:auto;
  margin:0;
  height:100%;
  min-height:0;
  max-height:100%;
  flex:1;
  display:flex;
  flex-direction:column;
}
.drawer .drawer-report-right .discussion-messages {min-height:0;flex:1;overflow-y:auto;}
.drawer .drawer-report-right .chat-form {flex-shrink:0;}
.drawer .drawer-section {margin:0 0 15px;}
.drawer .drawer-report-left .report-info-panel,
.drawer .drawer-report-left .highlight-block,
.drawer .drawer-report-left .report-attachments {margin-bottom:14px;}
.discussion-head i,.report-panel-heading i,.highlight-block h3 i,.report-attachments h3 i {margin-right:7px;color:#aca5ff;}
/* Ensure the user row and dropdown are readable even on narrow screens */
@media(max-width:1160px) {
  .drawer {width:min(1050px,100vw);}
  .drawer-scroll.drawer-two-column {grid-template-columns:minmax(0,1fr) minmax(300px,.84fr);gap:12px;}
}
@media(max-width:850px) {
  .drawer {width:100vw;}
  .drawer-scroll.drawer-two-column {display:block;overflow-y:auto;padding:14px;}
  .drawer-report-left {overflow:visible;padding:0;}
  .drawer-report-right {min-height:500px;margin-top:14px;}
  .drawer .drawer-report-right .discussion-pane {height:500px;min-height:500px;}
  .userrow {grid-template-columns:38px minmax(125px,1fr) auto;}
  .userrow .user-role {display:none;}
  .userrow .user-select {grid-column:2;grid-row:2;}
  .userrow > .btn {grid-column:3;grid-row:2;}
}
@media(max-width:660px) {
  .top-account-bar {right:8px;gap:5px;padding:5px;max-width:calc(100vw - 79px);}
  .top-create-report {padding:9px;font-size:12px;}
  .top-create-report span {display:none;}
  .top-create-report i {font-size:15px;}
  .top-account-bar .top-user .top-username {max-width:75px;}
  .main {padding-top:85px;}
}

/* ============================================================== 
   DREAM LAND v1.8 — Jobsly-inspired black UI, sidebar & typography
   Note: only appearance; role controls and API remain unchanged.
   ============================================================== */
:root {
  color-scheme: dark;
  --bg:#101112;
  --side:#17191a;
  --panel:#1c1e20;
  --input:#27292c;
  --line:#34373b;
  --text:#f5f5f5;
  --muted:#a1a4a8;
  --purple:#6d5af3;
  --sidebar-width:256px;
}
html,body {background:#101112;color:var(--text);}
.app-shell {background:#101112;}
.sidebar {
  width:var(--sidebar-width);
  padding:18px 13px 14px;
  background:#17191a;
  border-right:1px solid #2b2d30;
  gap:0;
  overflow:hidden;
}
.sidebar-brand-row {display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 2px 22px;flex-shrink:0;}
.sidebar-brand-row .brand {padding:0 0 0 4px;gap:11px;min-width:0;}
.sidebar-brand-row .brand strong {font-size:19px;letter-spacing:-.4px;color:#fff;white-space:nowrap;}
.sidebar-brand-row .brand small {font-size:11px;letter-spacing:.1px;color:#a7a9b0;}
.sidebar-brand-row .brandmark {border-radius:12px;background:#6451ed;width:39px;height:39px;font-size:22px;flex-shrink:0;}
.sidebar-collapse-toggle {width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#e6e6ea;background:transparent;border:0;border-radius:8px;font-size:14px;flex-shrink:0;}
.sidebar-collapse-toggle:hover {background:#2c2f31;}
.sidebar-menu {display:flex;flex-direction:column;gap:3px;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#4c4f54 transparent;padding-right:2px;flex:1;}
.sidebar-menu .navgroup {margin:21px 10px 10px;color:#91949a;font-size:10px;font-weight:650;letter-spacing:1.3px;}
.sidebar-menu .navgroup:first-child {margin-top:2px;}
.sidebar-menu .nav {min-height:43px;padding:11px 12px;border-radius:10px;color:#c2c5ca;font-size:13px;gap:12px;transition:background .16s,color .16s;}
.sidebar-menu .nav:hover {background:#242628;color:#f8f8fa;}
.sidebar-menu .nav.active {background:#2a2d30;color:#fff;font-weight:650;}
.sidebar-menu .nav .nav-ico {color:#b9bdc3;width:20px;min-width:20px;font-size:15px;}
.sidebar-menu .nav.active .nav-ico {color:#f3f3f5;}
.sidebar-menu .nav span:not(.pending-count) {min-width:0;white-space:nowrap;}
.sidebar-menu .pending-count {margin-left:auto;}
.sidebar-bottom {position:relative;bottom:auto;margin-top:auto;padding:15px 1px 0;background:#17191a;border-top:1px solid #292b2e;flex-shrink:0;}
.sidebar-profile {display:flex!important;align-items:center;gap:10px;margin:0;padding:10px;background:#272a2d;border:1px solid #2f3235;border-radius:999px;min-height:56px;}
.sidebar-profile[hidden] {display:none!important;}
.sidebar-profile .avatar {width:36px;height:36px;font-size:14px;}
.sidebar-profile .profile-label {display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;line-height:1.3;}
.sidebar-profile .profile-label strong {font-size:12px;color:#fff;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-profile .role-pill {font-size:10px;padding:3px 6px;}
.sidebar-bottom #login {border-radius:999px;padding:11px 8px;margin:0;}
.main {background:#101112;}
.panel,.stat,.report-info-panel,.report-attachments,.discussion-pane {background-color:var(--panel);border-color:var(--line);}
.field input,.field textarea,.field select,.search,.select,.btn:not(.primary):not(.danger),.chat-form textarea {background-color:var(--input);border-color:#414449;color:#f0f0f2;}
.tab {background:#25272a;border-color:#414448;color:#d3d3d8;}
tr:hover,tbody tr:hover {background-color:#26292c;}
.top-account-bar,.top-user,.notification-panel,.dialog-card {border-color:#414449;}
/* Retain semantic status/priority colors and purple interactive accents. */
* {scrollbar-color:#47494d #181a1c;scrollbar-width:thin;}
::-webkit-scrollbar {width:9px;height:9px;}
::-webkit-scrollbar-track {background:#181a1c;}
::-webkit-scrollbar-thumb {background:#4b4e52;border:2px solid #181a1c;border-radius:12px;}
::-webkit-scrollbar-thumb:hover {background:#6a6d71;}
/* Sidebar collapse (desktop only) */
@media (min-width:801px) {
  .sidebar-is-collapsed .sidebar {width:72px;padding-left:10px;padding-right:10px;}
  .sidebar-is-collapsed .sidebar-brand-row {flex-direction:column;gap:8px;padding-bottom:20px;}
  .sidebar-is-collapsed .brand-copy,.sidebar-is-collapsed .sidebar-menu .navgroup,
  .sidebar-is-collapsed .sidebar-menu .nav>span:not(.pending-count),
  .sidebar-is-collapsed .sidebar-profile .profile-label,
  .sidebar-is-collapsed #login span {display:none!important;}
  .sidebar-is-collapsed .brand {padding:0;}
  .sidebar-is-collapsed .sidebar-menu .nav {justify-content:center;gap:0;padding:11px 8px;}
  .sidebar-is-collapsed .sidebar-menu .nav .nav-ico {min-width:20px;}
  .sidebar-is-collapsed .sidebar-menu .pending-count {position:absolute;right:3px;top:2px;font-size:9px;padding:2px 4px;}
  .sidebar-is-collapsed .sidebar-menu .nav {position:relative;}
  .sidebar-is-collapsed .sidebar-profile {justify-content:center;padding:7px;}
  .sidebar-is-collapsed #login {font-size:0;}
  .sidebar-is-collapsed #login i {font-size:16px;}
}
@media (max-width:800px) {
  .sidebar {width:66px;padding:12px 6px;}
  .sidebar-brand-row {flex-direction:column;gap:8px;}
  .sidebar-brand-row .brand {padding:0;}
  .sidebar-brand-row .brand-copy,.sidebar-menu .navgroup,
  .sidebar-menu .nav>span:not(.pending-count),.sidebar-profile .profile-label,#login span {display:none!important;}
  .sidebar-collapse-toggle {display:none;}
  .sidebar-menu .nav {justify-content:center;padding:10px 5px;}
  .sidebar-menu .pending-count {font-size:9px;padding:2px 4px;margin-left:-8px;}
  .sidebar-profile {justify-content:center;padding:6px;min-height:45px;}
  .sidebar-profile .avatar {width:32px;height:32px;}
  .sidebar-bottom #login {font-size:0;}
  .sidebar-bottom #login i {font-size:16px;}
}

/* ==============================================================
   DREAM LAND v1.9 - Jobsly charcoal UI & full responsive sidebar
   CSS-only visual refresh; database, API and role logic unchanged.
   ============================================================== */
:root {
  --bg:#101112;
  --side:#17191b;
  --panel:#1c1e21;
  --input:#26282c;
  --line:#303338;
  --text:#f4f5f7;
  --muted:#a5a8af;
  --purple:#7158ed;
  --sidebar-width:258px;
  color-scheme:dark;
}
html,body,.app-shell,.main {background-color:var(--bg);color:var(--text);}
html,body {font-size:14px;}
.app-shell {position:relative;min-height:0;isolation:isolate;}
.sidebar {
  position:relative;top:auto;
  width:var(--sidebar-width);
  height:100dvh;
  padding:20px 13px 16px;
  background:var(--side);
  border-right:1px solid #292c30;
  flex-shrink:0;
  transition:width .22s ease,padding .22s ease;
  overflow:hidden;
}
.sidebar-brand-row {padding:1px 3px 24px 5px;}
.sidebar-brand-row .brand {padding:0;gap:11px;}
.sidebar-brand-row .brandmark {
  width:40px;height:40px;
  border-radius:12px;
  background:linear-gradient(145deg,#8069ff,#5943da);
  box-shadow:0 4px 14px rgba(100,75,232,.19);
}
.sidebar-brand-row .brand strong {font-size:19px;font-weight:750;}
.sidebar-brand-row .brand small {font-size:11px;color:#a2a5ad;margin-top:3px;}
.sidebar-collapse-toggle {height:36px;width:36px;color:#c7c9cf;border:1px solid transparent;}
.sidebar-collapse-toggle:hover,.sidebar-collapse-toggle:focus-visible {background:#292b2f;border-color:#373a3e;}
.sidebar-menu {gap:4px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:1px;}
.sidebar-menu .navgroup {margin:21px 12px 10px;color:#969aa1;font-size:10px;letter-spacing:1.25px;}
.sidebar-menu .navgroup:first-child {margin-top:0;}
.sidebar-menu .nav {
  border-radius:10px;
  padding:12px 13px;
  min-height:44px;
  font-size:13px;
  color:#bbc0c7;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.sidebar-menu .nav .nav-ico {width:19px;min-width:19px;color:#c4c7cd;font-size:15px;}
.sidebar-menu .nav:hover {background:#25282c;color:#fff;}
.sidebar-menu .nav.active {background:#303237;color:#fff;box-shadow:inset 2px 0 #7b67ff;}
.sidebar-menu .nav.active .nav-ico {color:#fff;}
.sidebar-menu .pending-count {border-radius:999px;min-width:20px;text-align:center;background:#ec456c;color:white;}
.sidebar-bottom {padding-top:13px;background:var(--side);border-color:#2e3035;}
.sidebar-profile {border-radius:16px;background:#23262a;border:1px solid #303338;min-height:62px;padding:10px;}
.sidebar-profile .avatar {background:linear-gradient(145deg,#7761ff,#5947d8);}
.sidebar-profile .profile-label strong {max-width:115px;font-size:12px;}
.sidebar-bottom #login {border-radius:12px;min-height:43px;}
.top-account-bar {background:#202226;border:1px solid #373a3f;box-shadow:0 12px 32px #0008;}
.top-user {min-width:0;}
.notification-panel,.dialog-card,.select-popup,.select-portal {
  background:#232529!important;border-color:#3a3e43!important;
  box-shadow:0 16px 42px #000b;
}
.select-option:hover,.select-option:focus-visible {background:#373a40;}
.select-option.selected {background:#433979;}
.notification-heading {background:#232529;border-color:#373b41;}
.notification-item {border-color:#383c40;}
.notification-item:hover {background:#2b2e33;}
.notification-item.unread {background:#2d2a3b;}
.panel,.stat,.report-info-panel,.report-attachments,.discussion-pane,.drawer-section {
  background:#1d1f22;border-color:#35383d;
}
.stat {border-radius:13px;}
.main {padding-left:30px;padding-right:30px;padding-bottom:32px;}
.top h1 {font-size:26px;letter-spacing:-.5px;}
.btn,.search,.select,.field input,.field textarea,.field select,.select-trigger {
  border-radius:9px;
}
.btn.primary {background:#7158ed;border-color:#7158ed;}
.btn.primary:hover:not(:disabled) {background:#7e68f5;}
.table-scroll {max-width:100%;overscroll-behavior-x:contain;}
.table-scroll table {min-width:840px;}
.table-scroll::-webkit-scrollbar {height:7px;}
.drawer {background:#191b1f;border-color:#35383d;}
.drawer .drawer-section {background:#202226;}
.report-panel-heading,.discussion-head {border-color:#35383d;}
.chat-bubble {background:#303239;}
.chat-entry.mine .chat-bubble {background:#4b3d94;}
.toast {background:#19352c;}
:where(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline:2px solid #9a8aff;
  outline-offset:2px;
}
@media(min-width:801px) {
  .sidebar-is-collapsed .sidebar {width:76px;padding:18px 11px 15px;}
  .sidebar-is-collapsed .sidebar-brand-row {flex-direction:column;gap:14px;}
  .sidebar-is-collapsed .sidebar-menu .nav {position:relative;justify-content:center;padding:12px 8px;}
  .sidebar-is-collapsed .sidebar-menu .pending-count {position:absolute;top:2px;right:0;}
  .sidebar-is-collapsed .sidebar-profile {justify-content:center;padding:7px;min-height:50px;}
}
/* Tablet: narrow rail with more room for tables and main content. */
@media(min-width:801px) and (max-width:1150px) {
  .sidebar:not(.ignored) {width:230px;}
  .sidebar-is-collapsed .sidebar {width:76px;}
  .main {padding-left:20px;padding-right:20px;}
  .stats {grid-template-columns:repeat(2,minmax(0,1fr));}
  .report-detail-layout {grid-template-columns:1fr;}
  .discussion-pane {position:relative;top:auto;height:500px;}
}
.mobile-menu-toggle,.sidebar-backdrop {display:none;}
/* Mobile: slide-over menu, rather than an unreadable permanent icon-only rail. */
@media(max-width:800px) {
  .app-shell {display:block;height:100dvh;min-height:0;overflow:hidden;}
  .main {
    height:100dvh;
    overflow-y:auto;
    padding:82px 15px 28px;
    width:100%;
    scrollbar-gutter:auto;
  }
  .mobile-menu-toggle {
    display:grid;
    place-items:center;
    position:fixed;top:13px;left:12px;z-index:250;
    width:42px;height:42px;
    border-radius:11px;
    border:1px solid #3b3e44;
    background:#24262a;color:#fff;
    font-size:17px;
    box-shadow:0 6px 20px #0009;
  }
  .sidebar-backdrop:not([hidden]) {
    display:block;
    position:fixed;inset:0;z-index:235;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(3px);
  }
  .sidebar,
  .sidebar-is-collapsed .sidebar {
    position:fixed;top:0;bottom:0;left:0;
    height:100dvh;
    width:min(288px,calc(100vw - 52px));
    padding:22px 15px 17px;
    transform:translateX(-105%);
    transition:transform .24s cubic-bezier(.2,.75,.2,1);
    z-index:240;
    box-shadow:16px 0 35px #0007;
    visibility:hidden;
  }
  .mobile-sidebar-open .sidebar,
  .sidebar-is-collapsed.mobile-sidebar-open .sidebar {
    transform:translateX(0);
    visibility:visible;
  }
  .sidebar-brand-row {flex-direction:row;gap:8px;padding:0 2px 22px 4px;}
  .sidebar-brand-row .brand-copy,
  .sidebar-menu .navgroup,
  .sidebar-menu .nav>span:not(.pending-count),
  .sidebar-profile .profile-label,
  #login span {display:initial!important;}
  .sidebar-brand-row .brand-copy {display:block!important;}
  .sidebar-menu .nav {justify-content:flex-start;gap:12px;padding:12px 13px;}
  .sidebar-menu .pending-count {margin-left:auto;font-size:10px;padding:3px 6px;}
  .sidebar-collapse-toggle {display:none;}
  .sidebar-profile {justify-content:flex-start;padding:10px;}
  .sidebar-bottom #login {font-size:13px;}
  .top-account-bar {
    top:10px;right:10px;
    max-width:calc(100vw - 74px);
    min-height:47px;padding:5px 7px;gap:6px;
  }
  .top-create-report {min-height:35px;}
  .top-account-bar .top-user .top-username {max-width:85px;}
  .notification-panel {right:-5px;min-width:0;width:min(360px,calc(100vw - 20px));}
  .top h1 {font-size:23px;}
  .top {gap:12px;}
  .stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .stat {padding:13px;}
  .toolbar {flex-direction:column;align-items:stretch;}
  .toolbar input,.toolbar .select,.toolbar .search {width:100%;min-width:0;}
  .formgrid {grid-template-columns:1fr;}
  .field.full {grid-column:auto;}
  .report-info-grid,.media-columns {grid-template-columns:1fr;}
  .report-detail-layout {grid-template-columns:1fr;}
  .discussion-pane {position:relative;top:auto;height:min(560px,65dvh);min-height:320px;}
  .drawer {width:100vw;}
  .drawer-scroll.drawer-two-column {display:block;overflow-y:auto;padding:14px;}
  .drawer-report-right {min-height:420px;}
  .drawer .drawer-report-right .discussion-pane {height:420px;min-height:420px;}
  .tabs {overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;}
  .tab {flex-shrink:0;white-space:nowrap;}
  .userrow {grid-template-columns:34px minmax(100px,1fr) auto;}
  .pagination {gap:10px;}
  .page-buttons {flex-wrap:wrap;}
}
@media(max-width:430px) {
  .main {padding:78px 12px 24px;}
  .top-account-bar {gap:3px;padding:4px;}
  .top-username {max-width:65px;}
  .top-account-bar .top-user .role-pill {display:none;}
  .top-account-bar .top-user .avatar {width:30px;height:30px;}
  .top-logout {padding:8px 6px;}
  .notification-bell {width:32px;height:32px;}
  .top-create-report {padding:8px;}
  .sidebar-brand-row .brand strong {font-size:18px;}
  .stat strong {font-size:24px;}
  .panelhead {padding:14px;}
  .toast-stack {bottom:12px;right:12px;max-width:calc(100vw - 24px);}
}
@media(prefers-reduced-motion:reduce) {
  .sidebar,.sidebar-menu .nav,.sidebar-collapse-toggle {transition:none!important;}
}
/* Mobile header: keep the brand visible and put Close beside it, not over it. */
@media(max-width:800px) {
  .sidebar-brand-row .brand strong,
  .sidebar-brand-row .brand small {display:block!important;}
  .mobile-sidebar-open .mobile-menu-toggle {
    left:min(239px,calc(100vw - 101px));
    top:23px;
    width:34px;height:34px;
    background:#282b30;
    border-color:#373b41;
    box-shadow:none;
    z-index:251;
  }
}


/* ================================================
   Dream Land v2.0 — Thanh tác vụ tại cuối Sidebar
   ================================================ */
.sidebar {overflow-x:visible;}
.sidebar-bottom {
  margin-top:auto;position:relative;bottom:auto;
  padding:13px 0 0;flex-shrink:0;
  background:var(--side);border-top:1px solid #34363a;
  display:flex;flex-direction:column;gap:9px;
}
.sidebar-account-bar,.top-account-bar.sidebar-account-bar {
  position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;
  width:100%;max-width:100%;min-height:58px;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 7px;gap:3px;background:#232528;
  border:1px solid #373a40;border-radius:14px;box-shadow:none;
  z-index:auto;
}
.sidebar-account-bar .top-user {display:flex;align-items:center;gap:7px;flex:1;min-width:0;}
.sidebar-account-bar .top-user .avatar {width:32px;height:32px;flex-shrink:0;}
.sidebar-account-bar .footer-user-meta {display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:3px;}
.sidebar-account-bar .top-username {font-size:11px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-account-bar .role-pill {display:inline-flex!important;font-size:10px;padding:2px 5px;line-height:1.1;}
.sidebar-account-bar .top-logout {font-size:14px;padding:6px 5px;border-left:1px solid #393c41;flex-shrink:0;}
.sidebar-account-bar .notification-bell {width:29px;height:32px;font-size:16px;flex-shrink:0;}
.sidebar-account-bar .notification-widget {position:static;flex-shrink:0;}
.sidebar-account-bar .notification-count {top:-3px;right:-3px;}
.sidebar-account-bar .notification-panel {
  position:fixed;top:auto;right:auto;
  left:250px;bottom:15px;width:min(370px,calc(100vw - 270px));
  min-width:0;max-width:calc(100vw - 270px);max-height:min(470px,78dvh);
  z-index:410;
}
.footer-create-report,.sidebar-bottom .footer-create-report {
  display:flex;justify-content:center;align-items:center;gap:7px;
  width:100%;min-height:40px;padding:9px 10px;
  border-radius:10px;font-size:12px;
}
/* Không còn thanh tác vụ nổi; trả không gian cho nội dung chính */
.main {padding-top:27px;}
.top {padding-right:0;}
/* Sidebar thu gọn: giữ nút tạo, chuông và đăng xuất dễ sử dụng */
@media (min-width:801px) {
  .sidebar-is-collapsed .sidebar-bottom {gap:7px;padding-top:10px;}
  .sidebar-is-collapsed .footer-create-report {padding:10px 4px;min-height:38px;}
  .sidebar-is-collapsed .footer-create-report span {display:none;}
  .sidebar-is-collapsed .sidebar-account-bar {
    display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:4px;padding:6px 3px;
  }
  .sidebar-is-collapsed .sidebar-account-bar .top-user {grid-column:1/-1;justify-content:center;}
  .sidebar-is-collapsed .footer-user-meta {display:none;}
  .sidebar-is-collapsed .sidebar-account-bar .top-logout {border-left:0;}
  .sidebar-is-collapsed .sidebar-account-bar .notification-panel {left:86px;max-width:calc(100vw - 100px);width:min(370px,calc(100vw - 100px));}
}
@media (max-width:800px) {
  .main {padding-top:78px;}
  .sidebar-account-bar,.top-account-bar.sidebar-account-bar {width:100%;gap:5px;}
  .sidebar-account-bar .footer-user-meta {display:flex;}
  .sidebar-account-bar .top-user .avatar {width:32px;height:32px;}
  .sidebar-account-bar .notification-panel {
    left:12px;right:auto;bottom:20px;
    width:min(365px,calc(100vw - 24px));max-width:calc(100vw - 24px);
  }
  .footer-create-report span {display:inline!important;}
}

/* ===============================================================
   V2.1 — Borderless Dark / Royal Blue / Jobsly active menu
   Active sidebar: white hairline indicator, NO selected block fill.
   Visual changes only; keep existing role and navigation behavior.
   =============================================================== */
:root {
  --bg: #101112; --side:#18191b; --panel:#1e1f21;
  --input:#292a2d; --line:#303237; --purple:#2563eb;
  --accent:#2563eb; --accent-hover:#3b82f6;
  --muted:#a3a7b0;
}
html,body,.main,.app-shell {background:#101112;}
.sidebar {background:#18191b;border-right:0;}
.sidebar-menu .nav {
  background:transparent;box-shadow:none;border:0;
  position:relative;border-radius:0;transition:color .18s ease,background .18s ease;
  color:#aeb3ba;
}
.sidebar-menu .nav:hover:not(.active) {background:#222427;color:#f4f6fa;border-radius:6px;}
.sidebar-menu .nav.active,
.sidebar-menu .nav.active:hover,
.sidebar-menu .nav:focus-visible.active {
  background:transparent !important;
  box-shadow:none !important;
  color:#fff;font-weight:650;
}
.sidebar-menu .nav.active::before {
  content:'';position:absolute;left:-13px;top:7px;bottom:7px;
  width:3px;border-radius:0 2px 2px 0;background:#f6f7f9;
}
.sidebar-menu .nav.active .nav-ico {color:#fff;}
.sidebar-menu .navgroup {color:#858991;}
.sidebar-brand-row .brandmark,.avatar,.sidebar-account-bar .avatar {
  background:#2563eb;box-shadow:none;
}
.sidebar-brand-row .brandmark {border-radius:11px;}
/* Pending counter uses the same compact tag styling as priorities. */
.sidebar-menu .pending-count {
  min-width:unset;border:0;border-radius:5px;box-shadow:none;
  padding:4px 8px;font-size:11px;font-weight:650;
  background:#213754;color:#80b8ff;
}
/* Remove visual outlines from surface cards. Preserve semantic focus outlines. */
.panel,.stat,.report-info-panel,.report-attachments,.discussion-pane,
.info-card,.drawer-section,.category-row,.sidebar-account-bar,
.top-account-bar.sidebar-account-bar,.toast,.notification-panel {
  border-color:transparent;box-shadow:none;
}
.panel,.stat,.report-info-panel,.report-attachments,.discussion-pane {background:#1e1f21;}
.panelhead,.tabs,.history-entry,.userrow,.category-row,td,th,
.drawer-head,.drawer-section,.notification-heading,.notification-item {border-color:transparent;}
.table-scroll table {border-collapse:collapse;}
table thead {background:#252629;}
tbody tr:nth-child(even) {background:#222326;}
tbody tr:hover {background:#2b2d31;}
.btn:not(.primary):not(.danger),.tab:not(.active),.search,.select,.select-trigger,
.field input,.field textarea,.field select {
  border-color:transparent;box-shadow:none;background-color:#2a2c30;
}
.btn.primary,.tab.active,.footer-create-report,.pagination .btn.primary,
.page-buttons .btn.primary {background:#2563eb;border-color:transparent;color:#fff;}
.btn.primary:hover:not(:disabled),.tab.active:hover,.footer-create-report:hover {
  background:#3b82f6;border-color:transparent;
}
.search:focus,.select:focus,.field input:focus,.field textarea:focus,
.select-trigger:focus-visible {
  outline:2px solid #60a5fa;outline-offset:1px;box-shadow:none;
}
.select-option.selected {background:#1c315b;color:#b9d8ff;}
.select-option:hover,.select-option:focus-visible {background:#303b4f;}
.select-trigger:hover {border-color:transparent;background:#34363b;}
.badge.category {background:#303137!important;color:#d4d6dd!important;border-color:transparent!important;}
.badge.normal {background:#303137;color:#c9ced6;border-color:transparent;}
/* Preserve meaning: destructive, warning, completed and status colors. */
.badge.high,.badge.critical,.badge.new,.badge.progress,.badge.pending,
.badge.resolved,.role-pill {border-color:transparent;}
.history-mark {background:#213754;color:#80b8ff;}
.chat-entry.mine .chat-bubble {background:#214b9e;}
.sidebar-account-bar .top-logout {border-left-color:transparent;}
.sidebar-bottom {border-top-color:transparent;}
:where(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline:2px solid #60a5fa;outline-offset:2px;
}
/* Keep the white marker beside the icon when sidebar collapses. */
@media(min-width:801px) {
  .sidebar-is-collapsed .sidebar-menu .nav.active::before {left:-11px;}
}
@media(max-width:800px) {
  .sidebar-menu .nav.active::before {left:-12px;}
}

/* v2.1.1 — Active marker flush with the sidebar's left edge.
   Only the two RIGHT corners of the 3px marker are rounded. */
.sidebar-menu .nav.active::before {
  left: -12px;  /* default sidebar left padding */
  border-radius: 0 4px 4px 0;
}
@media (min-width: 801px) {
  .sidebar-is-collapsed .sidebar-menu .nav.active::before {
    left: -11px; /* collapsed sidebar left padding */
  }
}
@media (max-width: 800px) {
  .sidebar-menu .nav.active::before {
    left: -15px; /* mobile slide-over sidebar left padding */
  }
}

/* ===============================================================
   V:TEAM 2.1.3 — flush-left indicator + dashboard status counts
   Expand scrollport to actual sidebar edge; no negative clipping.
   =============================================================== */
#sidebar.sidebar {
  --menu-left-gutter: 13px;
}
#sidebar .sidebar-menu {
  box-sizing: border-box !important;
  position: relative !important;
  flex: 1 1 auto;
  min-width: 0;
  width: calc(100% + var(--menu-left-gutter)) !important;
  margin-left: calc(-1 * var(--menu-left-gutter)) !important;
  padding-left: var(--menu-left-gutter) !important;
  overflow-y: auto;
  overflow-x: hidden;
}
#sidebar .sidebar-menu .nav {
  position: relative !important;
  margin-left: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
}
#sidebar .sidebar-menu .nav.active,
#sidebar .sidebar-menu .nav.active:hover {
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
}
#sidebar .sidebar-menu .nav.active::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(-1 * var(--menu-left-gutter)) !important;
  transform: translateY(-50%) !important;
  display: block !important;
  width: 3px !important;
  height: 28px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 4px 4px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@media (min-width: 801px) {
  .sidebar-is-collapsed #sidebar.sidebar {
    --menu-left-gutter: 11px;
  }
}
@media (max-width: 800px) {
  #sidebar.sidebar {
    --menu-left-gutter: 15px;
  }
}
/* Status tab totals — compact category-style badges */
.tabs .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.tabs .tab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  padding: 3px 7px;
  border-radius: 5px;
  background: #303338;
  color: #cbd1da;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.tabs .tab.active .tab-count {
  background: rgba(255,255,255,.19);
  color: #ffffff;
}


/* =====================================================
   V:TEAM v2.1.4 — Balanced composer (A · Cân đối)
   Only visual styles; keep existing chat form and API.
   ===================================================== */
.chat-form {
  padding: 12px;
  background: #16181b;
}
.chat-form-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.chat-form-main textarea,
.chat-form .chat-form-main textarea {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  max-height: 150px;
  padding: 15px 14px;
  border: 1px solid #333841;
  border-radius: 13px;
  background: #22252a;
  color: #f3f4f6;
  font-size: 14px;
  line-height: 20px;
  resize: vertical;
  box-shadow: none;
  outline: none;
}
.chat-form .chat-form-main textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.13);
}
.chat-form .chat-form-main textarea::placeholder {
  color: #8e939d;
}
.chat-form-main .chat-send,
.chat-form-main button.chat-send {
  flex: 0 0 52px;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  background: #2563eb;
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
  transition: background-color .16s ease, transform .16s ease;
}
.chat-form-main .chat-send i {
  font-size: 14px;
  line-height: 1;
}
.chat-form-main .chat-send:hover:not(:disabled) {
  background: #3b82f6;
  transform: translateY(-1px);
}
.chat-form-main .chat-send:active:not(:disabled) {
  transform: translateY(0);
}
.chat-form-main .chat-send:disabled {
  opacity: .5;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .chat-form { padding: 10px; }
  .chat-form-main { gap: 8px; }
  .chat-form-main .chat-send,
  .chat-form-main button.chat-send {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 12px;
  }
  .chat-form-main textarea,
  .chat-form .chat-form-main textarea {
    height: 48px;
    min-height: 48px;
    padding: 13px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-form-main .chat-send { transition: none; }
}


/* V:TEAM 2.1.5 — compact integrated message composer */
.chat-form .chat-form-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.chat-form .chat-form-main textarea {
  box-sizing: border-box;
  display: block;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  height: 50px;
  max-height: 150px;
  padding: 13px 58px 13px 14px;
  background: #25272b;
  border: 1px solid #373b42;
  border-radius: 12px;
  color: #f4f5f7;
  font-size: 14px;
  line-height: 22px;
  resize: vertical;
  outline: none;
  box-shadow: none;
}
.chat-form .chat-form-main textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59,130,246,.18);
}
.chat-form .chat-form-main .chat-send,
.chat-form .chat-form-main button.chat-send {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
  flex: none;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #2563eb;
  color: #ffffff;
  box-shadow: none;
  font-size: 14px;
  line-height: 1;
  transition: background-color .15s ease;
}
.chat-form .chat-form-main .chat-send i {
  font-size: 14px;
  line-height: 1;
}
.chat-form .chat-form-main .chat-send:hover:not(:disabled) {
  background: #3b82f6;
  transform: none;
}
.chat-form .chat-form-main .chat-send:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}
@media (max-width: 480px) {
  .chat-form .chat-form-main textarea { height: 48px; min-height: 48px; padding: 12px 54px 12px 12px; }
  .chat-form .chat-form-main .chat-send,
  .chat-form .chat-form-main button.chat-send { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
}

/* V:TEAM v2.3 — Testing confirmation panel */
.testing-panel{background:#202226;border-radius:12px;padding:18px;margin:15px 0;display:flex;flex-direction:column;gap:14px}
.testing-panel .report-panel-heading{font-size:14px;font-weight:700}
.testing-panel .testing-check{background:#292b30;border-radius:9px;padding:13px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.testing-check strong{font-size:13px}.testing-check p{margin:7px 0 0;overflow-wrap:anywhere;line-height:1.6}
.testing-form{padding-top:14px;display:flex;flex-direction:column;gap:12px}.testing-form h4{margin:0;font-size:14px}
.testing-form textarea{width:100%;background:#2b2d32;border:0;border-radius:8px;padding:12px;color:#fff;resize:vertical}
.testing-buttons{display:flex;gap:10px;flex-wrap:wrap}.testing-buttons .btn{flex:1;min-width:125px}
.badge.testing{background:#233e5d;color:#89c1ff}
@media(max-width:520px){.testing-panel{padding:12px}.testing-panel .testing-check{align-items:flex-start;flex-direction:column}}