.content{background:var(--bg);min-height:calc(100vh - 54px);padding:12px 16px 20px}
.role-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;padding:12px 18px;border-radius:16px;color:#fff;background:linear-gradient(120deg,#2b579a,#3b68b7);box-shadow:0 10px 24px rgba(59,104,183,.2)}
.role-hero:after{content:"";position:absolute;width:180px;height:180px;right:-40px;top:-70px;border-radius:50%;background:rgba(255,255,255,.08)}
.role-hero h1{margin:0 0 3px;color:#fff;font-size:20px!important;font-weight:800;line-height:1.25}.role-hero p{margin:0;color:#d3e3fd;font-size:11px}.role-hero-icon{position:relative;z-index:1;display:grid;place-items:center;min-width:46px;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);font-size:20px}.role-hero .btn{position:relative;z-index:2;background:#fff;color:#3b68b7;border:0;font-weight:700}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.metric-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.metric-card{min-width:0;padding:14px 16px;border:1px solid #d8e2f0;border-radius:16px;background:#ffffff;box-shadow:0 8px 24px rgba(11,29,58,.05)}.metric-card i{display:grid;place-items:center;width:38px;height:38px;margin-bottom:10px;border-radius:11px;color:#3b68b7;background:#d3e3fd;font-size:16px}.metric-card.green i{color:#16a34a;background:#dcfce7}.metric-card.orange i{color:#d97706;background:#fef3c7}.metric-card.red i{color:#dc2626;background:#fee2e2}.metric-card.purple i{color:#3b68b7;background:#d3e3fd}.metric-card b{display:block;color:#0b1d3a;font-size:24px;line-height:1;font-weight:800}.metric-card span{display:block;margin-top:6px;color:#5c6e8c;font-size:12px}
.ui-panel{margin-bottom:12px;padding:14px 16px;border:1px solid #d8e2f0;border-radius:16px;background:linear-gradient(135deg,rgba(240,246,255,0.7) 0%,#ffffff 80%);box-shadow:0 8px 24px rgba(11,29,58,.05)}.ui-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.ui-panel-head h2{margin:0;color:#0b1d3a;font-size:17px;font-weight:800}.ui-panel-head a{font-weight:700;color:#3b68b7}
.entity-list{display:grid;gap:10px}.entity-card{position:relative;display:grid;grid-template-columns:minmax(150px,1.4fr) repeat(3,minmax(105px,.7fr)) auto;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid #a0c0f7!important;border-radius:16px;background:#ffffff!important;box-shadow:4px 4px 6px -2px #a0c0f7 !important;transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease}.entity-card:hover{transform:translateY(-1px);box-shadow:4px 5px 8px -1px #6799f1 !important;border-color:#6799f1!important}.entity-card:hover::before{box-shadow:inset 5px 0 0 0 #3b68b7}.entity-card:hover .entity-action{background:#3b68b7!important;color:#ffffff!important;transform:translateX(2px);box-shadow:0 3px 8px rgba(59,104,183,0.25)}.entity-card:active{transform:scale(0.99)}.entity-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 4px 0 0 0 #3b68b7;transition:box-shadow 0.2s ease}



.entity-card[data-status="overdue"],.overdue-card{border:1.5px solid #a0c0f7!important;background:#ffffff!important;box-shadow:4px 4px 6px -2px #a0c0f7 !important}.entity-card[data-status="overdue"]:hover,.overdue-card:hover{border-color:#6799f1!important;box-shadow:4px 5px 8px -1px #6799f1 !important}.entity-card[data-status="overdue"]:before,.overdue-card:before{box-shadow:inset 4px 0 0 0 #dc2626!important;background:transparent!important}
.entity-card[data-status="completed"]{border:1.5px solid #a0c0f7!important;background:#ffffff!important;box-shadow:4px 4px 6px -2px #a0c0f7 !important}.entity-card[data-status="completed"]:hover{border-color:#6799f1!important;box-shadow:4px 5px 8px -1px #6799f1 !important}.entity-card[data-status="completed"]:before{box-shadow:inset 4px 0 0 0 #16a34a!important;background:transparent!important}
.entity-card[data-status="pending"],.entity-card[data-status="planned"]{border:1.5px solid #a0c0f7!important;background:#ffffff!important;box-shadow:4px 4px 6px -2px #a0c0f7 !important}.entity-card[data-status="pending"]:hover,.entity-card[data-status="planned"]:hover{border-color:#6799f1!important;box-shadow:4px 5px 8px -1px #6799f1 !important}.entity-card[data-status="pending"]:before,.entity-card[data-status="planned"]:before{box-shadow:inset 4px 0 0 0 #d97706!important;background:transparent!important}
.entity-title{padding-left:7px}.entity-title b,.entity-title a{display:block;color:#0b1d3a;font-size:15px;font-weight:800}.entity-title small,.entity-meta small{display:block;margin-top:4px;color:#5c6e8c}.entity-meta b{display:block;margin-top:3px;color:#0b1d3a;font-size:12px}.entity-action{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#d3e3fd;color:#0b2d68;transition:all 0.22s cubic-bezier(0.2,0.8,0.2,1)}
.status-chip,.role-chip{display:inline-flex;align-items:center;width:max-content;padding:6px 10px;border-radius:999px;background:#d3e3fd;color:#0b2d68;font-size:11px;font-weight:800;text-transform:capitalize}.status-chip.completed{background:#dcfce7;color:#15803d}.status-chip.overdue,.status-chip.inactive{background:#fee2e2;color:#b91c1c}.status-chip.pending,.status-chip.planned{background:#fef3c7;color:#b45309}.status-chip.in-progress,.status-chip.active{background:#d3e3fd;color:#0b2d68}
.toolbar-ui{display:flex;gap:8px;margin-bottom:10px;padding:8px 12px;border:1px solid #d3e3fd;border-radius:14px;background:linear-gradient(135deg,rgba(237,244,255,0.85) 0%,#ffffff 80%);box-shadow:0 4px 14px rgba(59,104,183,0.06)}.toolbar-ui input,.toolbar-ui select{margin:0;min-width:0;background:#ffffff;border-color:#cbd5e1;color:#111827}.toolbar-ui input{flex:1}
.activity-timeline{display:gap:0}.activity-row{display:grid;grid-template-columns:105px minmax(130px,.75fr) minmax(170px,1fr);gap:18px;padding:17px 8px;border-bottom:1px solid #edf1f6}.activity-row:last-child{border-bottom:0}.activity-time b,.activity-person b,.activity-action b{display:block;color:var(--ui-ink)}.activity-row small{display:block;margin-top:5px;color:#71819a}.activity-person .role-chip{margin-top:7px}.activity-action p{margin:5px 0 0;color:#6b7280;font-size:13px}
.progress-track{height:7px;margin-top:8px;overflow:hidden;border-radius:9px;background:#e9eef6}.progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4f46e5,#5b5fc7)}
.report-bars{display:grid;gap:15px}.report-bar-row{display:grid;grid-template-columns:120px 1fr 35px;align-items:center;gap:12px}.report-bar-row span{font-weight:700;color:var(--ui-ink)}
.profile-shell{display:grid;gap:18px}.profile-shell .ui-panel{margin:0}.profile-shell .btn{width:100%;justify-content:center}.profile-shell .form-grid{align-items:end}
@media(max-width:900px){
 .content{padding-top:14px}.role-hero{min-height:150px;padding:22px 20px;border-radius:21px}.role-hero h1{font-size:26px}.role-hero p{font-size:13px;line-height:1.5}.role-hero-icon{min-width:62px;height:62px;font-size:28px}
 .metric-grid,.metric-grid.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.metric-card{min-height:128px;padding:15px}.metric-card i{width:39px;height:39px;margin-bottom:13px}.metric-card b{font-size:25px}.metric-card span{font-size:11px;line-height:1.3}
 .ui-panel{padding:15px;border-radius:18px}.entity-card{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px 13px}.entity-card .entity-meta{grid-column:1}.entity-card .entity-meta:nth-of-type(n+4){display:none}.entity-action,.entity-card>.row-actions{grid-column:2;grid-row:1 / span 3}.entity-title{min-width:0}.entity-title b,.entity-title a{font-size:15px;white-space:normal;overflow-wrap:anywhere}.entity-title small,.entity-meta b{overflow-wrap:anywhere}.toolbar-ui{display:grid;grid-template-columns:1fr 1fr}.toolbar-ui input{grid-column:1/-1;width:100%}
 .activity-row{grid-template-columns:78px 1fr;gap:11px}.activity-action{grid-column:2}.activity-person .role-chip{padding:5px 8px}.report-bar-row{grid-template-columns:90px 1fr 25px;font-size:12px}
 .topbar{height:72px}.topbar>div:before{content:"Welcome";font-size:10px;color:#8391a8;text-transform:uppercase;letter-spacing:.08em}.topbar small{text-transform:capitalize}.sidebar nav a{font-size:9px}.profile-shell{grid-template-columns:1fr}.chart-panel canvas{max-height:300px}
}
@media(max-width:480px){.role-hero{min-height:142px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}.role-hero-icon{grid-column:2;grid-row:1;min-width:54px;height:54px;opacity:.85}.role-hero>div:first-child{position:relative;z-index:1;max-width:none;min-width:0}.role-hero .btn{grid-column:1/-1;width:100%;margin-top:4px}.ui-panel-head{align-items:flex-start}.ui-panel-head h2{font-size:17px}.ui-panel-head a{flex:none;font-size:12px}.entity-card{border-radius:15px}.entity-card .entity-meta:nth-of-type(n+3){display:none}.entity-action,.entity-card>.row-actions{grid-row:1 / span 2}.toolbar-ui{grid-template-columns:1fr}.toolbar-ui>*{grid-column:1!important}.activity-row{grid-template-columns:64px minmax(0,1fr)}.activity-person,.activity-action{min-width:0;overflow-wrap:anywhere}.metric-card{min-height:119px}.report-bar-row{grid-template-columns:minmax(70px,90px) minmax(0,1fr) 25px}.report-bar-row span{overflow:hidden;text-overflow:ellipsis}.chart-panel canvas{max-height:250px}}

/* Compact vertical app: keeps the dashboard content inside the narrow frame. */
@media(max-width:900px){
 .app{padding-bottom:58px}.topbar{height:58px;padding:0 8px;gap:8px}.topbar>div:before{display:none}.topbar strong{font-size:14px}.topbar small{font-size:10px}.theme-btn{width:32px;height:32px}.link-btn{padding:7px 10px}
 .content{padding:11px 2px 18px!important}.role-hero{min-height:0;height:auto;margin-bottom:9px!important;padding:11px 15px!important;border-radius:15px;gap:10px}.role-hero h1{font-size:19px!important;margin-bottom:2px!important}.role-hero p{font-size:9px!important;line-height:1.3;max-width:300px}.role-hero-icon{min-width:38px!important;width:38px!important;height:38px!important;border-radius:12px;font-size:17px!important}.role-hero .btn{min-height:33px;padding:7px 10px;font-size:10px}
 .metric-grid,.metric-grid.six{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:11px}.metric-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-card{min-height:80px;padding:10px;border-radius:14px}.metric-card i{width:29px;height:29px;margin-bottom:7px;border-radius:9px;font-size:13px}.metric-card b{font-size:20px}.metric-card span{margin-top:4px;font-size:9px;line-height:1.2}
 .toolbar-ui{display:flex;padding:8px;margin-bottom:9px;border-radius:12px;gap:6px}.toolbar-ui input,.toolbar-ui select{min-height:34px;height:34px;padding:6px 8px;font-size:10px}.toolbar-ui input{grid-column:auto}.ui-panel{padding:11px;margin-bottom:11px;border-radius:14px}.ui-panel-head{margin-bottom:9px}.ui-panel-head h2{font-size:14px}.ui-panel-head a{font-size:10px}
 .entity-list{gap:6px}.entity-card{padding:10px 9px;border-radius:11px;gap:6px}.entity-card:before{inset:0;border-radius:inherit;box-shadow:inset 3px 0 0 0 #3b68b7}.entity-title b,.entity-title a{font-size:12px}.entity-title small,.entity-meta small{margin-top:2px;font-size:8px}.entity-meta b{font-size:10px}.entity-action{width:29px;height:29px;border-radius:8px;font-size:10px}.status-chip,.role-chip{padding:4px 6px;font-size:8px}
  .sidebar{height:64px;background:#ffffff!important;border-top:1px solid #d8e2f0!important}.sidebar nav a{height:64px;padding:7px 2px 5px;gap:4px;font-size:9px;color:#5c6e8c!important}.sidebar nav a i{font-size:17px;color:#5c6e8c!important}.sidebar .badge{top:5px}
}
@media(max-width:500px){.metric-grid,.metric-grid.six{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card{min-height:67px;display:grid;grid-template-columns:29px 1fr;column-gap:7px;align-items:center}.metric-card i{grid-row:1/3;margin:0}.metric-card b{font-size:18px}.metric-card span{margin:0}.role-hero{grid-template-columns:minmax(0,1fr) auto}.role-hero .btn{grid-column:1/-1;width:100%}.toolbar-ui{display:grid;grid-template-columns:1fr 1fr}.toolbar-ui input{grid-column:1/-1}.activity-timeline{display:grid;gap:0}.activity-row{display:grid;grid-template-columns:105px minmax(130px,.75fr) minmax(170px,1fr);gap:18px;padding:17px 8px;border-bottom:1px solid #edf1f6}.activity-row:last-child{border-bottom:0}.activity-time b,.activity-person b,.activity-action b{display:block;color:var(--ui-ink)}.activity-row small{display:block;margin-top:5px;color:#71819a}.activity-person .role-chip{margin-top:7px}.activity-action p{margin:5px 0 0;color:#64748b;font-size:13px}
.progress-track{height:7px;margin-top:8px;overflow:hidden;border-radius:99px;background:#e9eef6}.progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4f46e5,#5b5fc7)}
.report-bars{display:grid;gap:15px}.report-bar-row{display:grid;grid-template-columns:120px 1fr 35px;align-items:center;gap:12px}.report-bar-row span{font-weight:700;color:var(--ui-ink)}
.profile-shell{display:grid;gap:18px}.profile-shell .ui-panel{margin:0}.profile-shell .btn{width:100%;justify-content:center}.profile-shell .form-grid{align-items:end}}

.compact-filter{display:flex!important;align-items:center;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}.compact-filter::-webkit-scrollbar{display:none}.compact-filter>*{flex:0 0 auto!important;min-width:0!important}.compact-filter input{flex:1 1 auto!important;min-width:100px!important}.compact-filter select{flex:0 0 auto!important;width:auto!important;max-width:140px!important}.filter-confirm{height:34px;min-height:34px;padding:6px 9px;border:0;border-radius:9px;background:#3b68b7!important;color:#fff;font-size:9px;font-weight:800;white-space:nowrap;cursor:pointer;transition:all 0.2s ease}.filter-confirm:hover{background:#2b579a!important}.filter-confirm i{margin-right:3px}
@media(max-width:500px){.compact-filter{display:flex!important;padding:7px!important;gap:5px!important}.compact-filter input{flex:1 1 auto!important;min-width:90px!important}.compact-filter select{flex:0 0 auto!important;width:auto!important;max-width:125px!important}.filter-confirm{padding:5px 7px;font-size:8px}}

.entity-card[hidden],.filter-empty[hidden]{display:none!important}
html body .entity-card.task-card {
    height: auto !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1.4fr 1.2fr 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    padding: 8px 12px !important;
    gap: 1.5px 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
html body .entity-card.task-card .entity-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    padding-left: 0 !important;
    margin-bottom: -1px !important;
}
html body .entity-card.task-card .entity-meta {
    display: block !important;
    grid-column: auto !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
html body .entity-card.task-card .entity-meta small {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: #334155 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body .entity-card.task-card .entity-meta small:after {
    content: none !important;
}
html body .entity-card.task-card .entity-meta b {
    display: block !important;
    margin-top: 1px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body .entity-card.task-card .entity-action {
    display: none !important;
}
@media (max-width: 620px) {
    html body .entity-card.task-card .entity-meta small {
        font-size: 7.5px !important;
        line-height: 1.1 !important;
    }
    html body .entity-card.task-card .entity-meta b {
        font-size: 9px !important;
        margin-top: 2px !important;
    }
}
.overdue-alert{display:flex;align-items:center;gap:11px;margin:0 0 11px;padding:11px 14px;border:1px solid #fecaca;border-radius:13px;background:#fff1f2;color:#b91c1c;box-shadow:0 5px 16px rgba(185,28,28,.07)}.overdue-alert i{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;background:#dc2626;color:#fff}.overdue-alert b,.overdue-alert span{display:block}.overdue-alert b{font-size:12px}.overdue-alert span{margin-top:2px;font-size:10px}.overdue-card{border-color:#fecaca!important;background:linear-gradient(90deg,#fff7f7,#fff)!important}.overdue-card:before{box-shadow:inset 4px 0 0 0 #dc2626!important;background:transparent!important}
@media(max-width:500px){.overdue-alert{padding:9px 10px}.overdue-alert i{width:28px;height:28px}.overdue-alert b{font-size:10px}.overdue-alert span{font-size:8px}}

/* Formal manager reports */
.report-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.report-summary>div{padding:14px 16px;border:1px solid #e5edf8;border-radius:15px;background:#fff;box-shadow:0 6px 18px rgba(20,45,85,.05)}.report-summary span,.report-summary small{display:block;color:var(--muted);font-size:10px}.report-summary b{display:block;margin:5px 0;color:var(--ui-ink);font-size:24px}.report-summary .risk b{color:var(--ui-red)}
.report-insight{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.report-insight>div{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;background:linear-gradient(110deg,#e0e7ff,#fff);border:1px solid #c7d2fe}.report-insight i{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:#5b5fc7;color:#fff}.report-insight b{font-size:12px}.report-insight p{margin:2px 0 0;color:var(--muted);font-size:10px}
.report-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px}.report-layout .ui-panel{margin-bottom:12px}.report-chart canvas{max-height:220px!important}.ui-panel-head>span{color:var(--muted);font-size:9px}.formal-bars{display:grid;gap:10px}.formal-row{display:grid;grid-template-columns:110px 1fr 25px;align-items:center;gap:9px}.formal-row b,.formal-row small{display:block}.formal-row b{font-size:11px}.formal-row small{font-size:8px;color:var(--muted)}.formal-row strong{font-size:11px}

.routine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.routine-card {
    padding: 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(17,24,39,0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.routine-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.routine-card-info b {
    display: block;
    font-size: 13px;
    color: #111827;
}
.routine-card-info small {
    display: block;
    font-size: 10px;
    color: #6b7280;
    margin-top: 2px;
}
.routine-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 10px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #f3f4f6;
}
.routine-card-meta small {
    display: block;
    font-size: 8px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 700;
}
.routine-card-meta b {
    display: block;
    font-size: 10px;
    color: #111827;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.routine-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
}
.project-report-list{display:grid;gap:7px}.project-report-list article{display:grid;grid-template-columns:minmax(130px,1.2fr) 1fr 38px 80px;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--line)}.project-report-list article:last-child{border-bottom:0}.project-report-list b,.project-report-list small{display:block}.project-report-list b{font-size:11px}.project-report-list small{color:var(--muted);font-size:8px}.project-report-list strong{font-size:10px}
@media(max-width:900px){.report-hero{padding:13px 16px!important}.report-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.report-summary>div{padding:9px;border-radius:12px}.report-summary b{font-size:18px}.report-summary span,.report-summary small{font-size:8px}.report-insight{grid-template-columns:1fr 1fr;gap:7px}.report-insight>div{padding:9px}.report-insight i{width:29px;height:29px}.report-layout{grid-template-columns:.75fr 1.25fr;gap:8px}.report-chart canvas{max-height:170px!important}.project-report-list article{grid-template-columns:minmax(100px,1.2fr) 1fr 32px 68px;gap:7px;padding:7px 4px}}
@media(max-width:560px){.report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.report-insight,.report-layout{grid-template-columns:1fr}.project-report-list article{grid-template-columns:1fr 70px 32px}.project-report-list article>.progress-track{display:none}.project-report-list article>.status-chip{grid-column:2}.formal-row{grid-template-columns:90px 1fr 22px}}

/* Compact task cards and task details */
@media(max-width:900px){
 .task-card{min-height:54px!important;display:grid!important;grid-template-columns:minmax(120px,1.7fr) repeat(3,minmax(65px,.65fr)) 28px!important;align-items:center!important;padding:8px 9px!important;gap:7px!important}
 .task-card .entity-title{padding-left:5px!important;min-width:0}.task-card .entity-title a{font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.task-card .entity-title small{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
 .task-card .entity-meta{display:flex!important;align-items:center!important;gap:3px!important;grid-column:auto!important}.task-card .entity-meta small{font-size:0!important}.task-card .entity-meta small:after{content:":";font-size:8px}.task-card .entity-meta b{margin:0!important;white-space:nowrap!important;font-size:9px!important}.task-card .status-chip{white-space:nowrap!important}.task-card .entity-action{grid-column:auto!important;grid-row:auto!important;width:27px!important;height:27px!important}
 .task-detail-head{margin-bottom:9px!important}.task-summary{padding:11px!important}.task-summary .description{margin:0 0 9px!important;font-size:12px}.task-facts{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.task-facts span{padding:5px 7px;border-radius:7px;background:var(--bg);font-size:9px;white-space:nowrap}.task-facts b{color:var(--muted);font-size:8px;text-transform:uppercase}.compact-status{display:flex!important;margin-top:9px!important;gap:7px!important}.compact-status select{height:34px!important;min-height:34px!important;padding:5px 8px!important;font-size:10px}.compact-status .btn{height:34px!important;min-height:34px!important;font-size:10px;white-space:nowrap}.compact-note{margin:8px 0 0!important;font-size:9px}
 .updates-panel{margin-top:11px!important;padding:11px!important}.updates-panel .panel-head{align-items:center;margin-bottom:6px}.updates-panel .panel-head h2{margin:0!important;font-size:14px}.updates-panel .panel-head small{color:var(--muted);font-size:9px}.updates-list{max-height:225px;overflow-y:auto;padding-right:3px}.updates-list article{display:block!important;margin:0!important;padding:7px 2px!important;border-bottom:1px solid var(--line)}.updates-list header{display:flex!important;align-items:center;justify-content:space-between;gap:8px}.updates-list header b{font-size:11px}.updates-list time{font-size:8px!important}.updates-list p{margin:3px 0 0!important;font-size:10px;line-height:1.3}.compact-comment-form{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:8px}.compact-comment-form textarea{min-height:42px!important;height:42px!important;margin:0!important;padding:8px!important;font-size:10px}.compact-comment-form .btn{height:42px!important;font-size:10px;padding:7px 10px}
}
@media(max-width:500px){.task-card{grid-template-columns:minmax(105px,1.5fr) minmax(60px,.7fr) minmax(70px,.8fr) 27px!important}.task-card .entity-meta:nth-of-type(3){display:none!important}.task-facts{gap:5px}.task-facts span{font-size:8px;padding:4px 6px}.compact-comment-form{grid-template-columns:1fr}.compact-comment-form .btn{height:34px!important}}

/* Responsive KPI Cards Grid: 3 cards top, 2/3 cards bottom when width is under 1100px */
.metric-grid, .dashboard-kpis {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}
.metric-grid.six, .dashboard-kpis.six {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
    .metric-grid:not(.task-kpis), .metric-grid.six:not(.task-kpis), .dashboard-kpis, .dashboard-kpis.six, .dashboard-kpis:not(.six) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (max-width: 550px) {
    .metric-grid:not(.task-kpis), .metric-grid.six:not(.task-kpis), .dashboard-kpis, .dashboard-kpis.six, .dashboard-kpis:not(.six) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .metric-card {
        padding: 8px 6px !important;
        min-height: 60px !important;
    }
    .metric-card i {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }
    .metric-card span {
        font-size: 9px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Force 1 single line row for Task KPIs (all 5 cards in 1 row across all screen sizes) */
html body .task-kpis,
html body .metric-grid.task-kpis {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}

html body .task-kpis .metric-card,
html body .metric-grid.task-kpis .metric-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 2px !important;
    min-height: 62px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
}

html body .task-kpis .metric-card i,
html body .metric-grid.task-kpis .metric-card i {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
    margin: 0 0 2px 0 !important;
    border-radius: 6px !important;
    display: grid !important;
    place-items: center !important;
    grid-row: auto !important;
}

html body .task-kpis .metric-card b,
html body .metric-grid.task-kpis .metric-card b {
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 1px 0 !important;
    font-weight: 800 !important;
}

html body .task-kpis .metric-card span,
html body .metric-grid.task-kpis .metric-card span {
    font-size: 8px !important;
    margin-top: 1px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    letter-spacing: -0.02em !important;
}

/* Polished task summary */
@media(max-width:900px){
 .task-summary{padding:13px 14px!important;border-radius:15px!important}
 .task-summary .description{padding-bottom:9px!important;margin-bottom:9px!important;border-bottom:1px solid var(--line);font-size:13px!important;color:var(--ui-ink)}
 .task-facts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;padding:7px 0!important;border-radius:10px;background:var(--bg)}
 .task-facts span{display:flex!important;align-items:center!important;gap:4px!important;min-width:0;padding:2px 10px!important;border-radius:0!important;background:transparent!important;border-right:1px solid var(--line);font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
 .task-facts span:last-child{border-right:0}.task-facts b{flex:none;font-size:8px!important}
 .compact-status{display:grid!important;grid-template-columns:auto minmax(120px,1fr) auto!important;align-items:center!important;gap:8px!important;margin-top:10px!important;padding-top:9px!important;border-top:1px solid var(--line)}
 .compact-status label{font-size:9px!important;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.compact-status select{border-radius:9px!important;background:var(--panel)!important}.compact-status .btn{border-radius:9px!important;padding:6px 13px!important}
}
@media(max-width:500px){.task-facts{grid-template-columns:1fr!important;gap:0!important}.task-facts span{border-right:0!important;border-bottom:1px solid var(--line);padding:5px 8px!important}.task-facts span:last-child{border-bottom:0}.compact-status{grid-template-columns:1fr auto!important}.compact-status label{grid-column:1/-1}.compact-status .btn{width:auto!important}}

/* Task row overlap fix and readable details */
@media(max-width:900px){
 .task-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-bottom:10px!important}
 .task-kpis .metric-card{min-height:58px!important;height:58px!important;padding:7px!important;display:grid!important;grid-template-columns:25px minmax(0,1fr)!important;grid-template-rows:1fr 1fr!important;column-gap:6px!important;align-items:center!important}
 .task-kpis .metric-card i{grid-row:1/3!important;width:25px!important;height:25px!important;margin:0!important;font-size:11px!important}.task-kpis .metric-card b{font-size:16px!important}.task-kpis .metric-card span{font-size:8px!important;margin:0!important}
 .task-card{grid-template-columns:minmax(145px,1.7fr) minmax(70px,.65fr) minmax(78px,.72fr) minmax(72px,.68fr) minmax(68px,.62fr)!important;padding-right:10px!important}
 .task-card .entity-action{display:none!important}.task-card .entity-meta{min-width:0!important;overflow:hidden!important}.task-card .entity-meta b,.task-card .status-chip{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}.task-card .status-chip{justify-self:start!important}
 .task-summary .description{font-size:15px!important;line-height:1.4!important}.updates-list header b{font-size:12px!important}.updates-list time{font-size:9px!important}.updates-list p{font-size:12px!important;line-height:1.45!important}.compact-comment-form textarea{font-size:12px!important}
}
@media(max-width:620px){.task-card{grid-template-columns:minmax(135px,1.5fr) minmax(65px,.7fr) minmax(72px,.75fr) minmax(68px,.7fr)!important}.task-card .entity-meta:nth-of-type(3){display:none!important}}
@media(max-width:470px){.task-card{grid-template-columns:minmax(135px,1.5fr) minmax(65px,.7fr) minmax(68px,.7fr)!important}.task-card .entity-meta:nth-of-type(2){display:none!important}.task-kpis .metric-card{min-width:0!important}}

/* Preserve every task detail on phone screens */
@media(max-width:620px){
 .task-card{height:auto!important;min-height:auto!important;display:grid!important;grid-template-columns:1.4fr 1.2fr 1fr 1fr!important;grid-template-rows:auto auto!important;align-items:start!important;padding:9px 10px!important;gap:6px 5px!important;overflow:visible!important;box-sizing:border-box!important}
 .task-card .entity-title{grid-column:1/-1!important;grid-row:1!important;padding-left:0!important;margin-bottom:2px!important}.task-card .entity-title a{font-size:13px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.task-card .entity-title small{font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
 .task-card .entity-meta,.task-card .entity-meta:nth-of-type(2),.task-card .entity-meta:nth-of-type(3),.task-card .entity-meta:nth-of-type(4){display:block!important;grid-column:auto!important;grid-row:2!important;min-width:0!important;overflow:hidden!important}.task-card .entity-meta small{display:block!important;font-size:7.5px!important;line-height:1.1!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:.02em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.task-card .entity-meta small:after{content:none!important}.task-card .entity-meta b{display:block!important;margin-top:1px!important;font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.task-card .status-chip{display:inline-flex!important;margin-top:0!important;padding:2px 5px!important;font-size:7px!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.task-card .entity-action{display:none!important}
 .routine-grid{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:10px!important;padding-bottom:8px!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;margin-bottom:4px!important}
 .routine-grid::-webkit-scrollbar{display:none!important}
 .routine-card{flex:0 0 85%!important;min-width:270px!important;scroll-snap-align:start!important;box-sizing:border-box!important}
}
@media(max-width:420px){.task-card{grid-template-columns:1.4fr 1.2fr 1fr 1fr!important;min-height:auto!important}.task-card .entity-title a{font-size:12px!important}.task-card .entity-title small{font-size:8px!important}}

/* Task title status and role-aware assignment */
@media(max-width:900px){
 .task-card{grid-template-columns:1.4fr 1.2fr 1fr 1fr!important}
 .task-title-row{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:nowrap!important;overflow:hidden!important}.task-title-row a{flex:1;min-width:0}.task-title-row .status-chip{flex:none;display:inline-flex!important;margin:0!important;padding:2px 5px!important;font-size:7px!important;max-width:82px!important}
}
@media(max-width:620px){.task-card{grid-template-columns:1.4fr 1.2fr 1fr 1fr!important}.task-title-row .status-chip{font-size:7px!important}.task-card .entity-meta:nth-of-type(3),.task-card .entity-meta:nth-of-type(4){display:block!important}}
@media(max-width:420px){.task-card{grid-template-columns:1.4fr 1.2fr 1fr 1fr!important}.task-title-row{gap:4px}.task-title-row .status-chip{max-width:70px!important}}

/* Daily Routine Styling */
.routine-alert-banner {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #f59e0b;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
}
body.dark .routine-alert-banner {
    background: linear-gradient(135deg, #1e1b18 0%, #2d2415 100%);
    border-color: #d97706;
}
.routine-alert-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.routine-alert-head .icon-sun {
    font-size: 2rem;
    color: #f59e0b;
    animation: pulse 2s infinite;
}
.routine-alert-head h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #92400e;
}
body.dark .routine-alert-head h3 {
    color: #fef3c7;
}
.routine-alert-head p {
    margin: 3px 0 0 0;
    font-size: 0.85rem;
    color: #b45309;
}
body.dark .routine-alert-head p {
    color: #fde68a;
}
.routine-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.routine-highlight-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 16px;
    border-left: 4px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.dark .routine-highlight-card {
    background: #1e293b;
}
.routine-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.routine-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef3c7;
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid #fde68a;
}
body.dark .routine-badge {
    background: #451a03;
    color: #fde68a;
    border-color: #78350f;
}
.routine-highlight-card h4 {
    margin: 0;
    font-size: 1.05rem;
}
.routine-highlight-card h4 a {
    color: var(--text);
    text-decoration: none;
}
.routine-highlight-card p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.4;
}
.routine-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.btn-sm {
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
}
.btn.red {
    background: #ef4444 !important;
    color: #fff !important;
}
.btn.red:hover {
    background: #dc2626 !important;
}
.routine-task-card {
    border-left: 4px solid #f59e0b !important;
}
.routine-panel {
    margin-bottom: 24px;
}
.routine-table-wrapper {
    overflow-x: auto;
}
.routine-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.routine-table th, .routine-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.routine-table th {
    background: rgba(245, 158, 11, 0.08);
    font-weight: 600;
    color: #92400e;
}
body.dark .routine-table th {
    color: #fef3c7;
    background: rgba(245, 158, 11, 0.15);
}
.date-badge {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}
body.dark .date-badge {
    background: #334155;
}
.user-pill {
    background: #e0f2fe;
    color: #0369a1;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.8rem;
}
body.dark .user-pill {
    background: #075985;
    color: #e0f2fe;
}

/* Task Detail Card Styles */
.task-detail-card {
    padding: 20px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(15,23,42,0.04);
}
.task-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.back-link {
    color: #5b5fc7;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.back-link:hover {
    color: #4f46e5;
}
.task-title-group h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}
.project-tag {
    display: inline-block;
    font-size: 13px;
    color: #3b68b7;
    font-weight: 600;
    margin-top: 2px;
}
.task-title-group .project-tag {
    font-size: 13px;
    color: #3b68b7;
    font-weight: 600;
}
.priority-badge {
    padding: 5px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    text-transform: capitalize;
    background: #f1f5f9;
    color: #334155;
}
.priority-badge.high, .priority-badge.critical {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca;
}
.priority-badge.medium {
    background: #fef3c7 !important;
    color: #b45309 !important;
}
.priority-badge.low {
    background: #e0e7ff !important;
    color: #3730a3 !important;
}

.task-desc-box {
    background: #f8fafc;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.task-desc-box .task-description-content {
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding-right: 6px;
    word-break: break-word;
}
.task-desc-box small {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 4px;
}
.task-desc-box p {
    margin: 0;
    font-size: 13px;
    color: #1e293b;
    white-space: pre-wrap;
}

.task-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
}
.task-info-grid small {
    display: block;
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 700;
}
.task-info-grid b {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: #0f172a;
}

.status-update-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
.status-update-form label {
    font-size: 11px;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}
.status-update-form select {
    flex: 1;
    max-width: 220px;
}

/* WhatsApp-Style Discussion Section */
.whatsapp-chat-panel {
    padding: 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(15,23,42,0.04);
}
.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}
.chat-header i {
    font-size: 18px;
    color: #5b5fc7;
}
.chat-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}
.badge-count {
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    background: #f1f5f9;
    padding: 3px 9px;
    border-radius: 99px;
}

.chat-messages-container {
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    background: #efeae2;
    border: 1px solid #e2e8f0;
    scrollbar-width: thin;
}
.chat-bubble {
    max-width: 78%;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.chat-bubble.incoming {
    align-self: flex-start;
    background: #ffffff;
    color: #0f172a;
    border-radius: 14px 14px 14px 2px;
}
.chat-bubble.outgoing {
    align-self: flex-end;
    background: #e0e7ff;
    color: #0f172a;
    border-radius: 14px 14px 2px 14px;
}
.sender-name {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #3730a3;
    margin-bottom: 3px;
}
.message-text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 9px;
    color: #64748b;
    margin-top: 4px;
}
.chat-bubble.outgoing .message-meta {
    color: #3730a3;
}
.read-receipt {
    font-size: 10px;
    color: #5b5fc7;
}
.empty-chat {
    text-align: center;
    color: #64748b;
    font-size: 12px;
    margin: 30px 0;
}

.chat-input-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    background: #f8fafc;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}
.chat-input-form textarea {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 8px 12px;
    outline: none;
    font-size: 13px;
    resize: none;
    min-height: 42px;
    height: 42px;
    max-height: 100px;
}
.chat-input-form textarea:focus {
    box-shadow: none;
}
.chat-input-form .send-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 12px;
    padding: 0;
    display: grid;
    place-items: center;
    flex: none;
}

@media(max-width:760px) {
    .task-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .chat-bubble {
        max-width: 88%;
    }
}

/* Ultra-compact Task Detail Page Padding & Spacing */
.task-detail-card {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
}
.task-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
.task-detail-header .back-link {
    font-size: 11px;
    color: #5b5fc7;
    font-weight: 700;
}
.task-title-group h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
}
.task-title-group .project-tag {
    font-size: 13px;
    color: #000000;
    font-weight: 600;
}

.task-desc-box {
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    padding: 8px 12px !important;
    margin-bottom: 10px !important;
    position: relative;
    overflow: hidden;
}
.task-desc-box .task-description-content {
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding-right: 6px;
    word-break: break-word;
}
.task-desc-box small {
    display: block;
    font-size: 13px;
    color: #000000;
    text-transform: uppercase;
    font-weight: 700;
}
.task-desc-box p {
    margin: 3px 0 0;
    font-size: 13px;
    color: #1f2937;
    line-height: 1.35;
}

.task-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px !important;
    padding: 8px 12px !important;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #f3f4f6;
    margin-bottom: 10px !important;
}
.task-info-grid div small {
    display: block;
    font-size: 9px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 700;
}
.task-info-grid div b {
    display: block;
    font-size: 11px;
    color: #111827;
    margin-top: 2px;
}

.status-update-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}
.status-update-form label {
    font-size: 10px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 700;
    white-space: nowrap;
}
.status-update-form select {
    padding: 6px 10px;
    font-size: 12px;
    height: 36px;
    border-radius: 8px;
}
.status-update-form .btn {
    padding: 6px 14px;
    font-size: 12px;
    height: 36px;
    border-radius: 8px;
    font-weight: 700;
}

.whatsapp-chat-panel {
    padding: 12px 14px !important;
    border-radius: 14px !important;
}
.whatsapp-chat-panel .chat-header {
    margin-bottom: 8px;
}
.whatsapp-chat-panel .chat-header h3 {
    font-size: 14px;
    margin: 0;
}
.chat-messages-container {
    max-height: 220px;
    padding: 8px !important;
    gap: 6px;
}
.chat-bubble {
    padding: 7px 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}
.chat-input-form {
    margin-top: 8px !important;
    gap: 6px !important;
}
.chat-input-form textarea {
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}
.chat-input-form .btn {
    height: 40px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
}

/* Force expand main container and panel horizontally on mobile view */
@media (max-width: 900px) {
    html body .content {
        padding-left: 7px !important;
        padding-right: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    html body .ui-panel {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        border-radius: 12px !important;
    }
    html body .metric-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    html body .overdue-alert {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }
    html body .topbar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Task Type Tabs (To Do vs Assigned) - Unified Matching Glass Theme */
.task-tab-btn {
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: rgba(255, 255, 255, 0.65) !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    opacity: 0.9 !important;
}

.task-tab-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    opacity: 1 !important;
}


/* Active State for Tabs (Light Blue Glass Accent matching app theme) */
.task-tab-btn.active {
    background: #d3e3fd !important;
    color: #0b2d68 !important;
    border: 1.5px solid #3b68b7 !important;
    box-shadow: 0 3px 12px rgba(59, 104, 183, 0.18) !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

.task-tab-btn.active i {
    color: #3b68b7 !important;
}



/* Eye-Catching Red Notification Badge Dot Styling (Mobile & Desktop) */
a[href="/notifications"] {
    position: relative !important;
}

a[href="/notifications"] .badge {
    position: absolute !important;
    top: 3px !important;
    right: 12px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    border-radius: 99px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    min-width: 17px !important;
    height: 17px !important;
    line-height: 17px !important;
    text-align: center !important;
    box-shadow: 0 0 0 2px #ffffff, 0 2px 6px rgba(220, 38, 38, 0.4) !important;
    float: none !important;
    z-index: 10 !important;
}

@media (max-width: 760px) {
    a[href="/notifications"] .badge {
        top: 2px !important;
        right: 22% !important;
    }
}

/* Task Animation Keyframes for Live Sync Auto Insertion */
@keyframes highlightTaskPulse {
    0% { background-color: #dbeafe !important; transform: translateY(-6px) scale(1.01); box-shadow: 0 8px 25px rgba(59,104,183,0.3); }
    50% { background-color: #eff6ff !important; transform: translateY(-2px); }
    100% { background-color: #ffffff !important; transform: translateY(0) scale(1); box-shadow: none; }
}
    display: block;
    font-size: 9px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 700;
}
.task-info-grid div b {
    display: block;
    font-size: 11px;
    color: #111827;
    margin-top: 2px;
}

.status-update-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}
.status-update-form label {
    font-size: 10px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 700;
    white-space: nowrap;
}
.status-update-form select {
    padding: 6px 10px;
    font-size: 12px;
    height: 36px;
    border-radius: 8px;
}
.status-update-form .btn {
    padding: 6px 14px;
    font-size: 12px;
    height: 36px;
    border-radius: 8px;
    font-weight: 700;
}

.whatsapp-chat-panel {
    padding: 12px 14px !important;
    border-radius: 14px !important;
}
.whatsapp-chat-panel .chat-header {
    margin-bottom: 8px;
}
.whatsapp-chat-panel .chat-header h3 {
    font-size: 14px;
    margin: 0;
}
.chat-messages-container {
    max-height: 220px;
    padding: 8px !important;
    gap: 6px;
}
.chat-bubble {
    padding: 7px 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}
.chat-input-form {
    margin-top: 8px !important;
    gap: 6px !important;
}
.chat-input-form textarea {
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}
.chat-input-form .btn {
    height: 40px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
}

/* Force expand main container and panel horizontally on mobile view */
@media (max-width: 900px) {
    html body .content {
        padding-left: 7px !important;
        padding-right: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    html body .ui-panel {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        border-radius: 12px !important;
    }
    html body .metric-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    html body .overdue-alert {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }
    html body .topbar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Task Type Tabs (To Do vs Assigned) - Unified Matching Glass Theme */
.task-tab-btn {
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: rgba(255, 255, 255, 0.65) !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    opacity: 0.9 !important;
}

.task-tab-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    opacity: 1 !important;
}


/* Active State for Tabs (Light Blue Glass Accent matching app theme) */
.task-tab-btn.active {
    background: #d3e3fd !important;
    color: #0b2d68 !important;
    border: 1.5px solid #3b68b7 !important;
    box-shadow: 0 3px 12px rgba(59, 104, 183, 0.18) !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

.task-tab-btn.active i {
    color: #3b68b7 !important;
}



/* Eye-Catching Red Notification Badge Dot Styling (Mobile & Desktop) */
a[href="/notifications"] {
    position: relative !important;
}

a[href="/notifications"] .badge {
    position: absolute !important;
    top: 3px !important;
    right: 12px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    border-radius: 99px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    min-width: 17px !important;
    height: 17px !important;
    line-height: 17px !important;
    text-align: center !important;
    box-shadow: 0 0 0 2px #ffffff, 0 2px 6px rgba(220, 38, 38, 0.4) !important;
    float: none !important;
    z-index: 10 !important;
}

@media (max-width: 760px) {
    a[href="/notifications"] .badge {
        top: 2px !important;
        right: 22% !important;
    }
}

/* Task Animation Keyframes for Live Sync Auto Insertion */
@keyframes highlightTaskPulse {
    0% { background-color: #dbeafe !important; transform: translateY(-6px) scale(1.01); box-shadow: 0 8px 25px rgba(59,104,183,0.3); }
    50% { background-color: #eff6ff !important; transform: translateY(-2px); }
    100% { background-color: #ffffff !important; transform: translateY(0) scale(1); box-shadow: none; }
}

/* ==========================================================================
   ROLE UI DARK MODE SPECIFICS
   ========================================================================== */

/* ==========================================================================
   ROLE UI DARK MODE SPECIFICS (DeepSeek Gray & White Glass Theme)
   ========================================================================== */

html.dark-theme .content,
html.dark-theme .main,
html.dark-theme body .app {
    background: transparent !important;
}

html.dark-theme .login-page {
    background-color: #0D0D0D !important;
    background: #0D0D0D !important;
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 60%) !important;
}

/* Task Tab buttons in dark mode */
html.dark-theme .task-tab-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #CCCCCC !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 14px !important;
}

html.dark-theme .task-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .task-tab-btn.active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

html.dark-theme .task-tab-btn.active i {
    color: #FFFFFF !important;
}

/* Role Hero banner in dark */
html.dark-theme .role-hero {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

/* Metric Card Icon Backgrounds in Dark Mode */
html.dark-theme .metric-card i,
html.dark-theme body .metric-card i {
    color: #60a5fa !important;
    background: rgba(59, 104, 183, 0.25) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

html.dark-theme .metric-card.green i,
html.dark-theme body .metric-card.green i {
    color: #4ade80 !important;
    background: rgba(22, 163, 74, 0.25) !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

html.dark-theme .metric-card.orange i,
html.dark-theme body .metric-card.orange i {
    color: #fbbf24 !important;
    background: rgba(217, 119, 6, 0.25) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

html.dark-theme .metric-card.red i,
html.dark-theme body .metric-card.red i {
    color: #f87171 !important;
    background: rgba(220, 38, 38, 0.25) !important;
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
}

html.dark-theme .metric-card.purple i,
html.dark-theme body .metric-card.purple i {
    color: #a78bfa !important;
    background: rgba(124, 58, 237, 0.25) !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
}

/* Logo brightness in dark mode */
html.dark-theme .brand-logo {
    filter: brightness(1.5) drop-shadow(0 2px 12px rgba(255, 255, 255, 0.2)) !important;
}

/* Entity Cards & Task Cards */
html.dark-theme .entity-card,
html.dark-theme .entity-card[data-status="overdue"],
html.dark-theme .entity-card[data-status="completed"],
html.dark-theme .entity-card[data-status="pending"],
html.dark-theme .entity-card[data-status="planned"],
html.dark-theme .overdue-card,
html.dark-theme .task-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px) saturate(0.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    color: #CCCCCC !important;
    transition: all 0.25s ease !important;
}

html.dark-theme .entity-card:hover,
html.dark-theme .task-card:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-1px) !important;
}

html.dark-theme .entity-action {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .entity-card:hover .entity-action {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

/* Status Chips & Badges in Dark Mode */
html.dark-theme body .status-chip,
html.dark-theme body .role-chip,
html.dark-theme body .pill,
html.dark-theme body .priority-pill,
html.dark-theme body .priority-tag-pill,
html.dark-theme body .status,
html.dark-theme body .verified-chip,
html.dark-theme body .awaiting-chip,
html.dark-theme body .routine-badge,
html.dark-theme body .priority-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #DDDDDD !important;
    font-weight: 700 !important;
}

/* Specific Status & Priority Color Overrides for Dark Mode */
html.dark-theme body .status-chip.overdue,
html.dark-theme body .status-chip.inactive,
html.dark-theme body .pill.high,
html.dark-theme body .pill.critical,
html.dark-theme body .priority-pill.high,
html.dark-theme body .priority-pill.critical,
html.dark-theme body .priority-tag-pill.priority-high,
html.dark-theme body .priority-tag-pill.priority-critical,
html.dark-theme body .priority-badge.high,
html.dark-theme body .priority-badge.critical,
html.dark-theme body .high,
html.dark-theme body .critical {
    background: rgba(220, 38, 38, 0.22) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
}

html.dark-theme body .status-chip.pending,
html.dark-theme body .status-chip.planned,
html.dark-theme body .awaiting-chip,
html.dark-theme body .pill.medium,
html.dark-theme body .priority-pill.medium,
html.dark-theme body .priority-tag-pill.priority-medium,
html.dark-theme body .priority-badge.medium,
html.dark-theme body .medium {
    background: rgba(217, 119, 6, 0.22) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
}

html.dark-theme body .status-chip.completed,
html.dark-theme body .verified-chip,
html.dark-theme body .pill.completed,
html.dark-theme body .completed {
    background: rgba(22, 163, 74, 0.22) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.35) !important;
}

html.dark-theme body .status-chip.in-progress,
html.dark-theme body .status-chip.active,
html.dark-theme body .pill.low,
html.dark-theme body .priority-pill.low,
html.dark-theme body .priority-tag-pill.priority-low,
html.dark-theme body .priority-badge.low,
html.dark-theme body .low {
    background: rgba(59, 104, 183, 0.22) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
}

html.dark-theme body .status-chip i,
html.dark-theme body .awaiting-chip i,
html.dark-theme body .verified-chip i,
html.dark-theme body .pill i,
html.dark-theme body .priority-pill i {
    color: inherit !important;
}

/* Multi-Assignee Chips in Dark Mode */
html.dark-theme .assignee-chip,
html.dark-theme .assignee-chip.chip-manager,
html.dark-theme .assignee-chip.chip-self {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #DDDDDD !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Notification Badge in Sidebar */
html.dark-theme a[href="/notifications"] .badge {
    box-shadow: 0 0 0 2px #0D0D0D, 0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

/* Text Colors */
html.dark-theme td,
html.dark-theme .entity-title b,
html.dark-theme .entity-title a,
html.dark-theme .entity-meta b,
html.dark-theme .activity-time b,
html.dark-theme .activity-person b,
html.dark-theme .activity-action b,
html.dark-theme .report-list div,
html.dark-theme .comments p,
html.dark-theme .task-title-group h2,
html.dark-theme .task-desc-box p,
html.dark-theme .task-info-grid b,
html.dark-theme .metric-card b,
html.dark-theme .stat b,
html.dark-theme .page-head h1,
html.dark-theme .details dd,
html.dark-theme .ui-panel-head h2,
html.dark-theme .report-insight b,
html.dark-theme .report-summary b,
html.dark-theme .comments header b {
    color: #FFFFFF !important;
    text-shadow: none !important;
}

html.dark-theme td small,
html.dark-theme .entity-meta small,
html.dark-theme .activity-row small,
html.dark-theme .task-desc-box small,
html.dark-theme .task-info-grid small,
html.dark-theme .metric-card span,
html.dark-theme .stat span,
html.dark-theme .comments time,
html.dark-theme .badge-count,
html.dark-theme .project-tag,
html.dark-theme .back-link,
html.dark-theme .ui-panel-head a,
html.dark-theme .report-insight p {
    color: #AAAAAA !important;
}

/* Task desc box & Task info grid & Panels */
html.dark-theme .task-desc-box,
html.dark-theme .task-info-grid,
html.dark-theme .task-detail-card,
html.dark-theme .whatsapp-chat-panel,
html.dark-theme .ui-panel,
html.dark-theme .compact-filter,
html.dark-theme .report-insight > div,
html.dark-theme .report-summary > div,
html.dark-theme .status-update-form {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
    color: #CCCCCC !important;
}

/* Chat messages container & bubbles */
html.dark-theme .chat-messages-container {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .chat-bubble.incoming {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .chat-bubble.outgoing {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .chat-header {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .chat-header h3,
html.dark-theme .chat-header i {
    color: #FFFFFF !important;
}

html.dark-theme .chat-input-form {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .avatar {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

/* Entity left-border indicator */
html.dark-theme .entity-card[data-status="overdue"]::before,
html.dark-theme .overdue-card::before {
    background: transparent !important;
    box-shadow: inset 4px 0 0 0 #ef4444 !important;
}

html.dark-theme .entity-card[data-status="completed"]::before {
    background: transparent !important;
    box-shadow: inset 4px 0 0 0 #22c55e !important;
}

html.dark-theme .entity-card[data-status="pending"]::before,
html.dark-theme .entity-card[data-status="planned"]::before {
    background: transparent !important;
    box-shadow: inset 4px 0 0 0 #f59e0b !important;
}.pill i {
    color: inherit !important;
}

/* Mention Autocomplete Dropdown */
.chat-input-form {
    position: relative !important;
}

.mention-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 8px;
    right: 8px;
    max-width: 380px;
    max-height: 220px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
    z-index: 1000;
    overflow-y: auto;
    display: none;
    padding: 6px;
    animation: mentionFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mentionFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.mention-dropdown-header {
    font-size: 10.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 10px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
}

.mention-dropdown-header i {
    color: #2563eb;
    font-size: 11px;
}

.mention-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 13px;
    color: #1e293b;
}

.mention-item:hover,
.mention-item.active {
    background: #eff6ff;
    color: #1d4ed8;
}

.mention-item .mention-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mention-item .mention-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #dbeafe;
    color: #2563eb;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.mention-item .mention-name {
    font-weight: 600;
    font-size: 12.5px;
}

.mention-item .mention-role-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #475569;
}

.mention-item:hover .mention-role-pill,
.mention-item.active .mention-role-pill {
    background: #dbeafe;
    color: #1e40af;
}

/* Mention Tag Text in Chat Messages */
.mention-tag {
    color: #2563eb !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mention-tag i {
    display: none !important;
}

/* Dark Theme Support for Mentions */
html.dark-theme .mention-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme .mention-dropdown-header {
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

html.dark-theme .mention-item {
    color: #f8fafc !important;
}

html.dark-theme .mention-item:hover,
html.dark-theme .mention-item.active {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

html.dark-theme .mention-item .mention-avatar {
    background: rgba(59, 130, 246, 0.25) !important;
    color: #93c5fd !important;
}

html.dark-theme .mention-item .mention-role-pill {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

html.dark-theme .mention-tag {
    color: #60a5fa !important;
    background: transparent !important;
    border: none !important;
}

/* ==========================================================================
   ROLE UI GRAY GLASS THEME SPECIFICS (Aperture Transparent Gray Glass)
   ========================================================================== */

html.gray-glass-theme .content,
html.gray-glass-theme .main,
html.gray-glass-theme body .app {
    background: transparent !important;
}

html.gray-glass-theme .login-page {
    background: #C9CED6 !important;
    background-image: 
        radial-gradient(ellipse at 15% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(160, 170, 190, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(200, 210, 225, 0.3) 0%, transparent 70%),
        linear-gradient(135deg, #D5DCE4 0%, #B8C2CE 100%) !important;
}

html.gray-glass-theme .login-card {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 32px !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

html.gray-glass-theme .role-hero {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
}

html.gray-glass-theme .metric-card i,
html.gray-glass-theme body .metric-card i {
    background: rgba(219, 234, 254, 0.75) !important;
    color: #2563eb !important;
    border: 1px solid rgba(96, 165, 250, 0.4) !important;
}

html.gray-glass-theme .metric-card.green i,
html.gray-glass-theme body .metric-card.green i {
    background: rgba(220, 252, 231, 0.75) !important;
    color: #16a34a !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

html.gray-glass-theme .metric-card.orange i,
html.gray-glass-theme body .metric-card.orange i {
    background: rgba(254, 243, 199, 0.75) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

html.gray-glass-theme .metric-card.red i,
html.gray-glass-theme body .metric-card.red i {
    background: rgba(254, 226, 226, 0.75) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

html.gray-glass-theme .metric-card.purple i,
html.gray-glass-theme body .metric-card.purple i {
    background: rgba(237, 233, 254, 0.75) !important;
    color: #7c3aed !important;
    border: 1px solid rgba(167, 139, 250, 0.4) !important;
}

html.gray-glass-theme .brand-logo {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) !important;
}

/* ==========================================================================
   APERTURE TRANSPARENT GRAY GLASS THEME (COMPLETE OVERRIDE SYSTEM)
   ========================================================================== */

html.gray-glass-theme,
html.gray-glass-theme body {
    background-color: #C9CED6 !important;
    background: #C9CED6 !important;
    background-image: 
        radial-gradient(ellipse at 15% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(160, 170, 190, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(200, 210, 225, 0.3) 0%, transparent 70%),
        linear-gradient(135deg, #D5DCE4 0%, #B8C2CE 100%) !important;
    background-attachment: fixed !important;
    color: #0F172A !important;
}

html.gray-glass-theme body::before,
html.gray-glass-theme body::after {
    display: none !important;
}

html.gray-glass-theme body .app,
html.gray-glass-theme body .main,
html.gray-glass-theme body .content {
    background: transparent !important;
}

/* ── Topbar & Sidebar ───────────────────────────────── */
html.gray-glass-theme body .topbar,
html.gray-glass-theme .topbar {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

html.gray-glass-theme body .topbar strong,
html.gray-glass-theme body .topbar-user strong,
html.gray-glass-theme body .topbar-user small,
html.gray-glass-theme body .topbar small {
    color: #0F172A !important;
}

html.gray-glass-theme body .sidebar,
html.gray-glass-theme .sidebar {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-top: none !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.04) !important;
}

html.gray-glass-theme body .sidebar .brand,
html.gray-glass-theme body .sidebar .brand strong,
html.gray-glass-theme body .sidebar .brand i {
    color: #0F172A !important;
}

html.gray-glass-theme body .sidebar nav a {
    color: #334155 !important;
    font-weight: 600 !important;
}

html.gray-glass-theme body .sidebar nav a i {
    color: #334155 !important;
}

html.gray-glass-theme body .sidebar nav a:hover {
    color: #0F172A !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

html.gray-glass-theme body .sidebar nav a.active {
    background: rgba(255, 255, 255, 0.45) !important;
    color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    font-weight: 700 !important;
}

html.gray-glass-theme body .sidebar nav a.active i {
    color: #0F172A !important;
}

/* ── Panels, Cards, Metric Cards, Overdue Banner ───── */
html.gray-glass-theme body .panel,
html.gray-glass-theme body .stat,
html.gray-glass-theme body .ui-panel,
html.gray-glass-theme body .modal-card,
html.gray-glass-theme body .modal-content,
html.gray-glass-theme body .task-detail-card,
html.gray-glass-theme body .project-hero,
html.gray-glass-theme body .compact-filter,
html.gray-glass-theme body .toolbar-ui,
html.gray-glass-theme body .routine-card,
html.gray-glass-theme body .login-card,
html.gray-glass-theme body .report-summary > div,
html.gray-glass-theme body .report-insight > div,
html.gray-glass-theme body .routine-panel,
html.gray-glass-theme body .notes-editor-container,
html.gray-glass-theme body .role-hero,
html.gray-glass-theme body .overdue-alert,
html.gray-glass-theme body .task-desc-box,
html.gray-glass-theme body .task-info-grid,
html.gray-glass-theme body .whatsapp-chat-panel,
html.gray-glass-theme body .status-update-form {
    background: rgba(255, 255, 255, 0.20) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    color: #0F172A !important;
}

/* Entity Cards & Task Cards & Metric Cards */
html.gray-glass-theme body .entity-card,
html.gray-glass-theme body .task-card,
html.gray-glass-theme body .metric-card,
html.gray-glass-theme body .activity-row,
html.gray-glass-theme body .note-card,
html.gray-glass-theme body .routine-highlight-card {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(16px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    color: #0F172A !important;
    transition: all 0.3s ease !important;
}

html.gray-glass-theme body .entity-card:hover,
html.gray-glass-theme body .task-card:hover,
html.gray-glass-theme body .metric-card:hover,
html.gray-glass-theme body .activity-row:hover,
html.gray-glass-theme body .note-card:hover {
    background: rgba(255, 255, 255, 0.38) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* Metric card icon badges */
html.gray-glass-theme body .metric-card i {
    background: rgba(219, 234, 254, 0.75) !important;
    color: #2563eb !important;
    border: 1px solid rgba(96, 165, 250, 0.4) !important;
}

html.gray-glass-theme body .metric-card.green i {
    background: rgba(220, 252, 231, 0.75) !important;
    color: #16a34a !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

html.gray-glass-theme body .metric-card.orange i {
    background: rgba(254, 243, 199, 0.75) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

html.gray-glass-theme body .metric-card.red i {
    background: rgba(254, 226, 226, 0.75) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

html.gray-glass-theme body .metric-card.purple i {
    background: rgba(237, 233, 254, 0.75) !important;
    color: #7c3aed !important;
    border: 1px solid rgba(167, 139, 250, 0.4) !important;
}

/* Active KPI Card Filter */
html.gray-glass-theme body .metric-card.active-kpi-filter {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Task Tab Buttons (To Do / Assigned) */
html.gray-glass-theme body .task-tab-btn {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #1E293B !important;
    backdrop-filter: blur(8px) !important;
}

html.gray-glass-theme body .task-tab-btn.active {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: #0F172A !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Inputs, Selects, Textareas */
html.gray-glass-theme body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.note-title-field),
html.gray-glass-theme body select,
html.gray-glass-theme body textarea,
html.gray-glass-theme body .compact-filter input,
html.gray-glass-theme body .compact-filter select,
html.gray-glass-theme body .toolbar-ui input,
html.gray-glass-theme body .toolbar-ui select {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #0F172A !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 14px !important;
}

/* Status Chips & Badges in Gray Glass Theme */
html.gray-glass-theme body .status-chip,
html.gray-glass-theme body .role-chip,
html.gray-glass-theme body .pill,
html.gray-glass-theme body .priority-pill,
html.gray-glass-theme body .priority-tag-pill,
html.gray-glass-theme body .status,
html.gray-glass-theme body .verified-chip,
html.gray-glass-theme body .awaiting-chip,
html.gray-glass-theme body .routine-badge,
html.gray-glass-theme body .priority-badge {
    background: rgba(255, 255, 255, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #1E293B !important;
    font-weight: 700 !important;
}

/* Specific Status & Priority Color Overrides for Gray Glass Mode */
html.gray-glass-theme body .status-chip.overdue,
html.gray-glass-theme body .status-chip.inactive,
html.gray-glass-theme body .pill.high,
html.gray-glass-theme body .pill.critical,
html.gray-glass-theme body .priority-pill.high,
html.gray-glass-theme body .priority-pill.critical,
html.gray-glass-theme body .priority-tag-pill.priority-high,
html.gray-glass-theme body .priority-tag-pill.priority-critical,
html.gray-glass-theme body .priority-badge.high,
html.gray-glass-theme body .priority-badge.critical,
html.gray-glass-theme body .high,
html.gray-glass-theme body .critical {
    background: rgba(254, 226, 226, 0.85) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(252, 165, 165, 0.6) !important;
}

html.gray-glass-theme body .status-chip.pending,
html.gray-glass-theme body .status-chip.planned,
html.gray-glass-theme body .awaiting-chip,
html.gray-glass-theme body .pill.medium,
html.gray-glass-theme body .priority-pill.medium,
html.gray-glass-theme body .priority-tag-pill.priority-medium,
html.gray-glass-theme body .priority-badge.medium,
html.gray-glass-theme body .medium {
    background: rgba(254, 243, 199, 0.85) !important;
    color: #b45309 !important;
    border: 1px solid rgba(252, 211, 77, 0.6) !important;
}

html.gray-glass-theme body .status-chip.completed,
html.gray-glass-theme body .verified-chip,
html.gray-glass-theme body .pill.completed,
html.gray-glass-theme body .completed {
    background: rgba(220, 252, 231, 0.85) !important;
    color: #15803d !important;
    border: 1px solid rgba(134, 239, 172, 0.6) !important;
}

html.gray-glass-theme body .status-chip.in-progress,
html.gray-glass-theme body .status-chip.active,
html.gray-glass-theme body .pill.low,
html.gray-glass-theme body .priority-pill.low,
html.gray-glass-theme body .priority-tag-pill.priority-low,
html.gray-glass-theme body .priority-badge.low,
html.gray-glass-theme body .low {
    background: rgba(219, 234, 254, 0.85) !important;
    color: #0b2d68 !important;
    border: 1px solid rgba(147, 197, 253, 0.6) !important;
}

html.gray-glass-theme body .status-chip i,
html.gray-glass-theme body .awaiting-chip i,
html.gray-glass-theme body .verified-chip i,
html.gray-glass-theme body .pill i,
html.gray-glass-theme body .priority-pill i {
    color: inherit !important;
}

/* Chat & Discussion Updates in Gray Glass Mode */
html.gray-glass-theme body .chat-messages-container {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(16px) !important;
}

html.gray-glass-theme body .chat-bubble.incoming {
    background: rgba(255, 255, 255, 0.45) !important;
    color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

html.gray-glass-theme body .chat-bubble.outgoing {
    background: rgba(255, 255, 255, 0.65) !important;
    color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

html.gray-glass-theme body .chat-input-form {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(16px) !important;
}

html.gray-glass-theme body .chat-input-form textarea {
    background: transparent !important;
    color: #0F172A !important;
}

html.gray-glass-theme body .chat-input-form textarea::placeholder {
    color: #475569 !important;
}

html.gray-glass-theme body .empty-chat {
    color: #334155 !important;
}

/* Logout button */
html.gray-glass-theme body .logout-btn {
    background: rgba(255, 255, 255, 0.35) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    backdrop-filter: blur(8px) !important;
}

html.gray-glass-theme body .logout-btn:hover {
    background: rgba(220, 38, 38, 0.9) !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
}

/* Dark Theme - Clean Project Name without pill background/border */
html.dark-theme body .entity-card.task-card .entity-title small,
html.dark-theme .entity-card .entity-title small,
html.dark-theme .entity-title small {
    color: #3b68b7 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
}

/* Dark Theme & Gray Glass Theme - Clean Task Detail Panels (Task Description, Task Info Grid, Change My Status) */
html.dark-theme .task-desc-box,
html.dark-theme .task-info-grid,
html.dark-theme .status-update-form,
html.gray-glass-theme body .task-desc-box,
html.gray-glass-theme body .task-info-grid,
html.gray-glass-theme body .status-update-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html.dark-theme .task-desc-box small,
html.dark-theme .task-info-grid small,
html.dark-theme .task-info-grid div small,
html.dark-theme .status-update-form label {
    color: #AAAAAA !important;
}

html.dark-theme .task-desc-box .task-description-content,
html.dark-theme .task-desc-box p,
html.dark-theme .task-info-grid b,
html.dark-theme .task-info-grid div b {
    color: #EEEEEE !important;
}

html.gray-glass-theme body .task-desc-box small,
html.gray-glass-theme body .task-info-grid small,
html.gray-glass-theme body .task-info-grid div small,
html.gray-glass-theme body .status-update-form label {
    color: #475569 !important;
}

html.gray-glass-theme body .task-desc-box .task-description-content,
html.gray-glass-theme body .task-desc-box p,
html.gray-glass-theme body .task-info-grid b,
html.gray-glass-theme body .task-info-grid div b {
    color: #0F172A !important;
}