*{box-sizing:border-box;margin:0;padding:0}
:root{
	--bg:#f0f2f7;
	--sidebar-bg:#1e2235;
	--sidebar-active:#3b5bdb;
	--card:#ffffff;
	--border:#e4e8f0;
	--text:#1a1d2e;
	--muted:#6b7280;
	--accent:#3b5bdb;
	--accent2:#0ea5e9;
	--green:#10b981;
	--amber:#f59e0b;
	--red:#ef4444;
	--purple:#8b5cf6;
	--radius:12px;
	--shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 220px;
	background: var(--sidebar-bg);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow-y: auto;
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), left 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1001;
}
.logo{padding:20px 16px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);transition: padding 0.2s, justify-content 0.2s;}
.logo-icon{width:36px;height:36px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center}
.logo-icon svg{width:20px;height:20px;fill:white}
.logo-text h2{font-size:14px;font-weight:700;color:#fff}
.logo-text p{font-size:10px;color:rgba(255,255,255,.45)}
.nav{padding:12px 8px;flex:1}
.nav-section{font-size:10px;font-weight:600;color:rgba(255,255,255,.3);padding:8px 8px 4px;letter-spacing:.08em;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.55);font-size:13px;font-weight:500;transition:all .15s;margin-bottom:2px}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:var(--accent);color:#fff}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.sidebar-footer{padding:16px;border-top:1px solid rgba(255,255,255,.08)}
.timer-box{background:rgba(255,255,255,.06);border-radius:10px;padding:14px;text-align:center}
.timer-box p{font-size:11px;color:rgba(255,255,255,.5);margin-bottom:4px}
.timer-box h3{font-size:13px;font-weight:600;color:#fff;margin-bottom:10px}
.timer-btn{width:100%;padding:7px;background:var(--accent);border:none;border-radius:7px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}

/* MAIN */
.main {
	margin-left: 220px;
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar{background:var(--card);border-bottom:1px solid var(--border);padding:0 24px;height:56px;display:flex;align-items:center;gap:16px;flex-shrink:0}
.topbar-title{font-size:16px;font-weight:700;color:var(--text)}
.search{flex:1;max-width:380px;position:relative}
.search input{width:100%;padding:7px 12px 7px 36px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:#f8f9fb;color:var(--text);outline:none}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.icon-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}
.badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--red);border-radius:50%;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:pointer}
.date-range{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:8px;font-size:12px;color:var(--muted);cursor:pointer;background:var(--card)}

.content{flex:1;overflow-y:auto;padding:20px 24px;position:relative}

/* PANELS */
.panel{display:none}
.panel.active{display:block}

/* METRIC CARDS */
.metrics-row{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-bottom:20px}
.metric-card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,box-shadow .15s;border:1.5px solid transparent}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--accent)}
.metric-card.active{border-color:var(--accent);background:#f0f4ff}
.mc-label{font-size:11px;font-weight:600;margin-bottom:8px}
.mc-label.blue{color:var(--accent2)}
.mc-label.amber{color:var(--amber)}
.mc-label.purple{color:var(--purple)}
.mc-label.red{color:var(--red)}
.mc-label.green{color:var(--green)}
.mc-label.indigo{color:var(--accent)}
.mc-top{display:flex;align-items:center;justify-content:space-between}
.mc-val{font-size:26px;font-weight:700;color:var(--text)}
.mc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.mc-icon.blue{background:#e0f2fe}
.mc-icon.amber{background:#fef3c7}
.mc-icon.purple{background:#ede9fe}
.mc-icon.red{background:#fee2e2}
.mc-icon.green{background:#d1fae5}
.mc-icon.indigo{background:#eef2ff}
.mc-delta{font-size:11px;margin-top:6px}
.mc-delta.up{color:var(--green)}
.mc-delta.dn{color:var(--red)}

/* GRID ROWS */
.row2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{font-size:13px;font-weight:700;color:var(--text)}
.card-sub{font-size:11px;color:var(--muted);margin-top:2px}
.filter-btn{padding:4px 10px;border:1px solid var(--border);border-radius:6px;font-size:11px;cursor:pointer;background:var(--card);color:var(--muted);font-family:inherit}

/* DEV HOURS */
.dev-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dev-name{font-size:12px;font-weight:500;width:100px;flex-shrink:0;color:var(--text)}
.dev-bar-bg{flex:1;height:8px;background:#f0f2f7;border-radius:4px;overflow:hidden}
.dev-bar{height:8px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;transition:width .6s ease}
.dev-hrs{font-size:11px;color:var(--muted);width:48px;text-align:right;flex-shrink:0}

/* DEPT CHART */
.dept-chart-wrap{position:relative;height:180px}

/* PIE */
.pie-wrap{position:relative;height:180px;display:flex;gap:16px;align-items:center}
.pie-canvas{width:160px!important;height:160px!important;flex-shrink:0}
.pie-legend{display:flex;flex-direction:column;gap:8px}
.pie-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text)}
.pie-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ROW3 */
.row3{display:grid;gap:16px;margin-bottom:20px}
/*grid-template-columns:1.2fr 2.8fr;*/
.row3.no-create{grid-template-columns:1fr}

/* CREATE TASK FORM */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:11px;font-weight:600;color:var(--muted)}
.form-input,.form-select,.form-textarea{padding:7px 10px;border:1px solid var(--border);border-radius:7px;font-size:12px;font-family:inherit;color:var(--text);background:#f8f9fb;outline:none;transition:border-color .15s}
.form-input::placeholder { color: #94a3b8 !important; opacity: 1 !important; }
.form-input::-webkit-input-placeholder { color: #94a3b8 !important; }
.form-input::-moz-placeholder { color: #94a3b8 !important; opacity: 1 !important; }
.form-input:-ms-input-placeholder { color: #94a3b8 !important; }
.form-input::-ms-input-placeholder { color: #94a3b8 !important; }
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);background:#fff}
.form-textarea{resize:none;height:56px;width:100%;}
.form-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}
.btn-reset{padding:7px 16px;border:1px solid var(--border);border-radius:7px;background:var(--card);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.btn-save{padding:7px 16px;border:none;border-radius:7px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

/* SCRUM BOARD */
.scrum-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.view-all-btn{padding:7px 14px;background:var(--accent);color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.scrum-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding-bottom:10px}
.scrum-col{
	min-width: 150px;
	background: #f5f7fa;
	padding: 10px;
	border-radius: var(--radius);
	min-height: 450px;
	max-height: 580px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
}
#panel-dashboard .scrum-col{
	min-height: 250px;
	max-height: 380px;
}
.scrum-cards-list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
	margin-top: 6px;
}
.scrum-cards-list::-webkit-scrollbar {
	width: 5px;
}
.scrum-cards-list::-webkit-scrollbar-track {
	background: transparent;
}
.scrum-cards-list::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.08);
	border-radius: 3px;
}
.scrum-cards-list::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.15);
}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;margin-bottom:4px;font-size:12px;font-weight:700;flex-shrink:0}
.col-head.backlog{background:#e2e8f0;color:#334155}
.col-head.assigned{background:#dbeafe;color:#1d4ed8}
.col-head.inprogress{background:#fef3c7;color:#92400e}
.col-head.testing{background:#fce7f3;color:#9d174d}
.col-head.correction{background:#fee2e2;color:#b91c1c}
.col-head.completed{background:#d1fae5;color:#065f46}
.col-count{width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.task-card{background:var(--card);border-radius:8px;padding:10px;margin-bottom:6px;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:pointer;border:1px solid var(--border);transition:all .15s}
.task-card:hover{box-shadow:0 3px 12px rgba(59,91,219,.15);border-color:var(--accent);transform:translateY(-1px)}
.task-id{font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:4px}
.task-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px;line-height:1.4}
.task-tag{display:inline-block;padding:2px 4px;border-radius:4px;font-size:10px;font-weight:600;}
.task-tag.ui{background:#dbeafe;color:#1d4ed8}
.task-tag.dev{background:#d1fae5;color:#065f46}
.task-tag.doc{background:#fef3c7;color:#92400e}
.task-tag.test{background:#fce7f3;color:#9d174d}
.priority-tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700}
.priority-tag.high{background:#fee2e2;color:#b91c1c}
.priority-tag.medium{background:#fef3c7;color:#92400e}
.priority-tag.low{background:#d1fae5;color:#065f46}
.task-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.task-avatar{width:22px;height:22px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}
.add-task-btn{width:100%;padding:7px;border:1.5px dashed var(--border);border-radius:8px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .15s}
.add-task-btn:hover{border-color:var(--accent);color:var(--accent);background:#f0f4ff}

/* ROW4 */
.row4{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:20px}
/*grid-template-columns:1fr 1fr 1fr*/

/* ACTIVITIES */
.activity-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.act-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#eef2ff}
.act-text{font-size:12px;color:var(--text);line-height:1.5}
.act-time{font-size:10px;color:var(--muted);margin-top:2px}
.view-all-link{color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;text-decoration:none}

/* DEADLINES */
#deadlinesList {
	max-height: 320px;
	overflow-y: auto;
	padding-right: 6px;
}
#deadlinesList::-webkit-scrollbar {
	width: 5px;
}
#deadlinesList::-webkit-scrollbar-track {
	background: transparent;
}
#deadlinesList::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.08);
	border-radius: 3px;
}
#deadlinesList::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.15);
}
.deadline-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.deadline-item:last-child{border-bottom:none}
.dl-id{font-size:11px;font-weight:700;color:var(--accent);font-family:'DM Mono',monospace;flex-shrink:0}
.dl-name{font-size:12px;font-weight:500;color:var(--text);flex:1}
.dl-date{font-size:11px;color:var(--muted);flex-shrink:0}

/* MY SUMMARY */
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.sum-box{background:#f8f9fb;border-radius:9px;padding:12px;text-align:center}
.sum-label{font-size:10px;color:var(--muted);margin-bottom:4px}
.sum-val{font-size:22px;font-weight:700;color:var(--text)}
.sum-sub{font-size:10px;color:var(--muted)}
.progress-ring-wrap{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-overlay.open{display:flex}
.sidebar-modal-overlay{left:220px;width:calc(100vw - 220px);align-items:stretch;justify-content:flex-end}
.modal{position:relative;background:var(--card);border-radius:16px;padding:24px;width:60vw;max-width:92vw;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.sidebar-modal{border-radius:0px!important;width:100%!important;min-height:100vh!important;height:100vh!important;overflow-y:auto!important;max-width:100vw!important;margin:0!important;box-shadow:none!important}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.modal-title{font-size:16px;font-weight:700;color:var(--text)}
.modal-id{font-size:12px;color:var(--muted);font-family:'DM Mono',monospace;margin-top:2px}
.modal-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);flex-shrink:0}
.modal-close:hover{background:#fee2e2;color:#ef4444;border-color:#fca5a5;transform:rotate(90deg);box-shadow:0 4px 12px rgba(239,68,68,0.1)}
.modal-section{margin-bottom:14px;width:100%;
    max-width:100%;
    overflow-wrap:break-word;
    word-wrap:break-word;
    word-break:break-word;
    white-space:normal;
    overflow-x:auto;
    line-height:1.6;}
.modal-section-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.modal-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.info-chip{padding:4px 10px;background:#f0f2f7;border-radius:6px;font-size:12px;color:var(--text)}
.modal-desc{font-size:13px;line-height:1.7;color:var(--muted)}
.modal-footer{display:flex;gap:8px;margin-top:16px;justify-content: flex-end;}
.btn-outline{padding:8px 16px;border:1px solid var(--border);border-radius:8px;background:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.btn-primary{padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}

/* DEPT MODAL */
.dept-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.dept-dev-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.dept-dev-row:last-child{border-bottom:none}

/* COST PREVIEW BOX */
.cost-preview-box{background:linear-gradient(135deg,#eef2ff,#f0f9ff);border:1.5px solid #c7d2fe;border-radius:10px;padding:12px 14px;margin-top:10px;display:none}
.cost-preview-box.visible{display:block}
.cost-preview-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:4px}
.cost-preview-total{font-size:18px;font-weight:800;color:var(--accent)}
.cost-diff-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:10px;font-weight:700}

/* DEVELOPER CAPABILITY */
.cap-section{margin-top:10px}
.cap-title{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.skill-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.skill-name{font-size:11px;font-weight:500;color:var(--text);width:88px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-bar-bg{flex:1;height:6px;background:#f0f2f7;border-radius:3px;overflow:hidden}
.skill-bar{height:6px;border-radius:3px;transition:width .5s ease}
.skill-level{font-size:10px;font-weight:700;width:52px;text-align:right;flex-shrink:0}
.diff-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;font-size:9px;font-weight:700;flex-shrink:0}
.diff-badge.beginner{background:#d1fae5;color:#065f46}
.diff-badge.intermediate{background:#fef3c7;color:#92400e}
.diff-badge.advanced{background:#dbeafe;color:#1d4ed8}
.diff-badge.expert{background:#ede9fe;color:#6d28d9}
.cap-overall{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#f8f9fb;border-radius:8px;margin-top:8px}
.cap-stars{display:flex;gap:2px}
.cap-star{font-size:12px}

/* NOTIFICATIONS */
.notif-panel{position:absolute;top:52px;right:60px;width:320px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.12);z-index:500;display:none}
.notif-panel.open{display:block}
.notif-head{padding:14px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700}
.notif-item{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;cursor:pointer}
.notif-item:hover{background:#f8f9fb}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:4px}
.notif-text{font-size:12px;color:var(--text);line-height:1.5}
.notif-time{font-size:10px;color:var(--muted);margin-top:2px}

/* STATUS BADGE */
.status-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;white-space: nowrap;}
.status-badge.inprog{background:#fef3c7;color:#92400e}
.status-badge.done{background:#d1fae5;color:#065f46}
.status-badge.testing{background:#fce7f3;color:#9d174d}
.status-badge.todo{background:#f0f2f7;color:#6b7280}
.status-badge.hold{background:#e2e870;color:#92400e}
/* MANAGER / CLIENT REQ STYLES */
.req-card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);border:1.5px solid transparent;transition:all .18s;cursor:pointer;position:relative}
.req-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.1)}
.req-card.priority-critical{border-left:4px solid var(--red)}
.req-card.priority-high{border-left:4px solid var(--amber)}
.req-card.priority-medium{border-left:4px solid var(--accent)}
.req-card.priority-low{border-left:4px solid var(--green)}
.req-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:5px;font-size:10px;font-weight:700}
.req-badge.critical{background:#fee2e2;color:#b91c1c}
.req-badge.high{background:#fef3c7;color:#92400e}
.req-badge.medium{background:#dbeafe;color:#1d4ed8}
.req-badge.low{background:#d1fae5;color:#065f46}
.req-badge.new{background:#ede9fe;color:#6d28d9}
.req-badge.approved{background:#d1fae5;color:#065f46}
.req-badge.in-review{background:#fef3c7;color:#92400e}
.req-badge.assigned{background:#dbeafe;color:#1d4ed8}
.req-badge.rejected{background:#fee2e2;color:#b91c1c}
.pipeline-col{min-width:220px;background:#f8f9fb;border-radius:var(--radius);padding:12px}
.pipeline-col-head{font-size:12px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.pipe-card{background:var(--card);border-radius:9px;padding:12px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1px solid var(--border);cursor:grab;transition:all .15s}
.pipe-card:hover{box-shadow:0 4px 14px rgba(59,91,219,.15);border-color:var(--accent)}
.pipe-card.dragging{opacity:.5;cursor:grabbing}
.drag-over{background:#eef2ff!important}
.mgr-tab{padding:7px 16px;border:1px solid var(--border);border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;background:var(--card);color:var(--muted);font-family:inherit;transition:all .15s}
.mgr-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.approval-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.approval-row:last-child{border-bottom:none}
.btn-approve{padding:5px 12px;background:#d1fae5;border:none;border-radius:6px;color:#065f46;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.btn-approve:hover{background:#10b981;color:#fff}
.btn-reject{padding:5px 12px;background:#fee2e2;border:none;border-radius:6px;color:#b91c1c;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.btn-reject:hover{background:#ef4444;color:#fff}
.btn-reassign{padding:5px 12px;background:#eef2ff;border:none;border-radius:6px;color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.workload-bar{height:10px;border-radius:5px;overflow:hidden;background:#f0f2f7;margin-top:4px}
.workload-fill{height:10px;border-radius:5px;transition:width .5s ease}
.notif-dot-mgr{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;margin-left:4px;animation:pulse 1.5s infinite}

/* RESPONSIVE scrollable scrum */
.scrum-scroll{overflow-x:auto;padding-bottom:4px}

/* LOGIN SCREEN */
.login-screen{position:fixed;inset:0;background:linear-gradient(135deg,#1e2235 0%,#262b45 100%);display:flex;align-items:center;justify-content:center;z-index:1000}
.login-screen.hidden{display:none}
.login-card{background:var(--card);border-radius:16px;padding:36px 34px;width:380px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.login-logo .logo-icon{width:40px;height:40px;background:var(--accent);border-radius:9px;display:flex;align-items:center;justify-content:center}
.login-logo .logo-icon svg{width:22px;height:22px;fill:#fff}
.login-logo h2{font-size:16px;font-weight:700;color:var(--text)}
.login-logo p{font-size:10.5px;color:var(--muted)}
.login-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.login-sub{font-size:12px;color:var(--muted);margin-bottom:20px}
.role-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:18px}
.role-opt{border:1.5px solid var(--border);border-radius:10px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;background:#f8f9fb}
.role-opt:hover{border-color:var(--accent);background:#f0f4ff}
.role-opt.selected{border-color:var(--accent);background:#eef2ff;box-shadow:0 0 0 3px rgba(59,91,219,.12)}
.role-opt svg{width:20px;height:20px;color:var(--accent);margin-bottom:6px}
.role-opt-label{font-size:11.5px;font-weight:700;color:var(--text)}
.role-opt-sub{font-size:9.5px;color:var(--muted);margin-top:1px}
.login-card .form-group{margin-bottom:14px}
.login-card .form-label{font-size:11px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px}
.login-card .form-input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;outline:none;background:#f8f9fb;color:var(--text)}
.login-card .form-input:focus{border-color:var(--accent);background:#fff}
.login-btn{width:100%;padding:11px;background:var(--accent);border:none;border-radius:9px;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:6px;transition:background .15s}
.login-btn:hover{background:#2f4cc4}
.login-btn:disabled{background:#c7cee0;cursor:not-allowed}
.login-error{font-size:11.5px;color:var(--red);margin-top:8px;display:none}
.role-badge{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.role-badge.admin{background:#eef2ff;color:var(--accent)}
.role-badge.developer{background:#d1fae5;color:#065f46}
.role-badge.tester{background:#fef3c7;color:#92400e}
.app-shell{display:none}
.app-shell.visible{display:flex;width:100%;}
/* COMMON ELEMENTS */
.add-btn{margin-left:auto;margin-right:1%;padding:7px 14px;border:1.5px dashed var(--border);border-radius:8px;background:transparent;background-color: #84cc16;color:#1e2235;font-weight: bold;font-size:12px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .15s;white-space:nowrap}
.add-btn:hover{border-color:var(--accent);background-color:#f9771e}
.action-btn{
	display: inline-flex;
	align-items: center;
	margin-left: 3%;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1.5px solid var(--border);
	background: var(--inp-bg);
	color: var(--label);
	cursor: pointer;
	transition: all 0.15s;
	white-space: nowrap;
	/*background-color:#f0f2f7;
	color:#040921;
	padding: 4px;
	margin-left: 3%;
	border: 1.5px dashed;
	margin-right:1%;
	border-radius:8px;
	font-weight: bold;font-size:11px;
	cursor:pointer;font-family:inherit;
	align-items:center;
	justify-content:center;
	gap:4px;
	transition:all .15s*/
	}
.action-btn:hover{border-color:var(--accent);color:var(--accent);}
.assign-btn {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 11px;
		font-weight: 600;
		padding: 4px 10px;
		border-radius: 6px;
		border: 1.5px solid var(--border);
		background: var(--inp-bg);
		color: var(--label);
		cursor: pointer;
		transition: all 0.15s;
		white-space: nowrap;
	}
.assign-btn:hover{border-color:var(--accent);color:var(--accent);}
.pms-tbl{
	width:100%;border-collapse:collapse;font-size:12px;
}
.pms-tbl th{
	padding:9px 10px;text-align:left;color:var(--muted);font-weight:600;
}
.pms-tbl tbody tr{
	border-bottom: 1px solid var(--border); cursor: pointer;
}
.pms-tbl thead tr{
	border-bottom:2px solid var(--border);
}
.pms-tbl td{
	padding:9px 10px;font-size:11px;color:#040921;font-weight:700;
	/*font-family:'DM Mono',monospace;*/
}
.input-required{color: var(--slds-g-color-error-base-40, #ea001e);margin: 0 .125rem;text-decoration: none;border-bottom: none;cursor: default;}
.slds-validation-error-message {color: red;font-size: .8125rem;}
.slim-select {
	border: 1px solid var(--border) !important;
		border-radius: 7px !important;
		font-size: 12px !important;
		color: #040921 !important;
}
.hide{display:none;}

.toggleBlock{
    /*border:1px solid var(--border);*/
    border-radius:8px;
    margin-bottom:12px;
    overflow:hidden;
}

.toggleHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 15px;
    cursor:pointer;
    background:#f8f9fb;
    font-weight:600;
    user-select:none;
}

.toggleHeader:hover{
    background:#eef2ff;
}

.toggleContent{
    /*padding:15px;*/
    display:block;
}

.toggleContent.hide{
    display:none;
}

.toggle-icon{
    transition:.25s;
}

.toggleHeader.collapsed .toggle-icon{
    transform:rotate(-90deg);
}
.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:20px;
    flex-wrap:wrap;
}

.pagination button{
    padding:6px 14px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    border-radius:6px;
}

.pagination button:hover{
    background:#f3f3f3;
}

.pagination button.active-page{
    background:#2563eb;
    color:#fff;
    border-color:#2563eb;
}

.pagination button:disabled{
    opacity:.5;
    cursor:not-allowed;
}
.date-range{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

#datePicker{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

#clearDateBtn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--muted);
    display: none;
    align-items: center;
    justify-content: center;
    outline: none;
    position: relative;
    z-index: 10;
    margin-left: 4px;
    transition: color 0.15s;
}

#clearDateBtn:hover {
    color: var(--red);
}

/* Custom Autocomplete Dropdown */
.autocomplete-wrapper {
	position: relative;
	width: 100%;
}
.autocomplete-wrapper .form-input {
	width: 100%;
}
.custom-autocomplete-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	max-height: 155px; /* height of approximately 5 records */
	overflow-y: auto;
	background: var(--card, #ffffff);
	border: 1px solid var(--border, #e4e8f0);
	border-radius: 7px;
	z-index: 1050;
	box-shadow: var(--shadow);
	margin-top: 4px;
	display: none;
}
.custom-autocomplete-dropdown::-webkit-scrollbar {
	width: 6px;
}
.custom-autocomplete-dropdown::-webkit-scrollbar-track {
	background: transparent;
}
.custom-autocomplete-dropdown::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}
.custom-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.2);
}
.custom-autocomplete-item {
	padding: 8px 12px;
	font-size: 12px;
	cursor: pointer;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 0.15s;
}
.custom-autocomplete-item:hover,
.custom-autocomplete-item.active {
	background-color: var(--bg, #f0f2f7);
	color: var(--accent, #3b5bdb);
}

/* Dashboard Loader styling */
.dashboard-loader {
	position: fixed;
	top: 56px;
	left: 220px;
	right: 0;
	bottom: 0;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 1;
	visibility: visible;
	transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.25s ease;
}
.dashboard-loader.hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.dashboard-loader .spinner {
	width: 44px;
	height: 44px;
	border: 3.5px solid rgba(59, 91, 219, 0.12);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin-loader 0.8s linear infinite;
	margin-bottom: 12px;
}
.dashboard-loader p {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.03em;
}
@keyframes spin-loader {
	to { transform: rotate(360deg); }
}
th.sortable-header {
	cursor: pointer;
	user-select: none;
	position: relative;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}
th.sortable-header:hover {
	background-color: rgba(0, 0, 0, 0.05);
}
th.sortable-header .sort-icon {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	vertical-align: middle;
	line-height: 1;
}
th.sortable-header .sort-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #3b82f6;
	color: #ffffff;
	font-size: 8px;
	font-weight: 700;
	border-radius: 50%;
	width: 12px;
	height: 12px;
	margin-left: 4px;
	vertical-align: middle;
}

/* SIDEBAR COLLAPSE & RESPONSIVE LAYOUT SYSTEM */
.logo-text,
.nav-section,
.nav-item span {
	transition: opacity 0.2s ease, visibility 0.2s ease;
	white-space: nowrap;
}


/* Collapsed state styling on desktop */
@media (min-width: 769px) {
	.app-shell.sidebar-collapsed .sidebar {
		width: 64px;
	}
	
	.app-shell.sidebar-collapsed .main {
		margin-left: 64px;
	}
	
	.app-shell.sidebar-collapsed .logo-text,
	.app-shell.sidebar-collapsed .nav-section,
	.app-shell.sidebar-collapsed .nav-item span {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
	
	
	.app-shell.sidebar-collapsed .logo {
		justify-content: center;
		padding: 20px 0 12px;
	}
	
	.app-shell.sidebar-collapsed .nav-item {
		justify-content: center;
		padding: 8px 0;
		margin: 0 8px 2px;
	}
	
	/* Sidebar hover expansion float */
	.app-shell.sidebar-collapsed .sidebar:hover {
		width: 220px;
		box-shadow: 4px 0 25px rgba(0, 0, 0, 0.25);
	}
	
	.app-shell.sidebar-collapsed .sidebar:hover .logo-text,
	.app-shell.sidebar-collapsed .sidebar:hover .nav-section,
	.app-shell.sidebar-collapsed .sidebar:hover .nav-item span {
		opacity: 1;
		visibility: visible;
		display: inline;
	}
	.app-shell.sidebar-collapsed .sidebar:hover .logo {
		padding: 20px 16px 12px;
	}
	
	.app-shell.sidebar-collapsed .sidebar:hover .nav-item {
		justify-content: flex-start;
		padding: 8px 10px;
		margin: 0 8px 2px;
	}
	
	/* Modal overlay shifts for collapsed sidebar */
	.app-shell.sidebar-collapsed .sidebar-modal-overlay {
		left: 64px;
		width: calc(100vw - 64px);
	}
	.app-shell.sidebar-collapsed .dashboard-loader {
		left: 64px;
	}
}

/* Mobile responsive view drawer */
@media (max-width: 768px) {
	.sidebar {
		left: -220px;
		width: 220px;
	}
	
	.main {
		margin-left: 0;
	}
	
	.app-shell.sidebar-open .sidebar {
		left: 0;
	}
	
	/* Overlay backdrop for mobile slide-out */
	.sidebar-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1000;
		display: none;
		opacity: 0;
		transition: opacity 0.25s ease;
	}
	
	.app-shell.sidebar-open .sidebar-overlay {
		display: block;
		opacity: 1;
	}
	
	.sidebar-modal-overlay {
		left: 0 !important;
		width: 100vw !important;
	}
	.dashboard-loader {
		left: 0 !important;
	}
}

.menu-toggle-btn:hover {
	background-color: var(--border);
}

/* Layout Constraints for Responsiveness */
.main {
	min-width: 0;
}
.card {
	max-width: 100%;
}
.content {
	max-width: 100%;
}
.tasks-header-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
}
.tasks-filters-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

@media (max-width: 1200px) {
	.metrics-row {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

@media (max-width: 992px) {
	.metrics-row {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.row2 {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 768px) {
	/* Topbar responsiveness */
	.topbar {
		padding: 0 12px !important;
		gap: 8px !important;
	}
	.topbar-title {
		display: none !important;
	}
	.search {
		max-width: 160px !important;
	}
	.date-range {
		padding: 6px 8px !important;
	}
	.date-range span {
		display: none !important; /* Hide date range text on mobile, keep calendar icon */
	}
	.topbar-profile .profile-details {
		display: none !important; /* Hide user name/role text next to avatar */
	}
	
	/* Layout content padding reduction */
	.content {
		padding: 12px 16px !important;
	}
	
	/* Metrics & Cards wrapping */
	.metrics-row {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.row2 {
		grid-template-columns: 1fr !important;
	}
	
	/* Header & filter lists wrapping */
	.tasks-header-wrap {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.tasks-filters-wrap {
		margin-left: 0 !important;
		width: 100% !important;
		justify-content: stretch !important;
		flex-wrap: wrap !important;
	}
	.tasks-filters-wrap .filter-btn, 
	.tasks-filters-wrap select {
		flex: 1 1 calc(50% - 6px) !important;
		min-width: 100px !important;
	}
	.tasks-filters-wrap .ss-main.filter-btn {
		max-width: none !important;
	}
	.tasks-filters-wrap .add-btn {
		flex: 1 1 100% !important;
		text-align: center !important;
		justify-content: center !important;
	}
}

@media (max-width: 480px) {
	.metrics-row {
		grid-template-columns: 1fr !important;
	}
	.search {
		max-width: 120px !important;
	}
	.tasks-filters-wrap .filter-btn, 
	.tasks-filters-wrap select {
		flex: 1 1 100% !important;
	}
}

/* SlimSelect Multi-select custom styling */
.ss-main.filter-btn {
	padding: 0 !important;
	border: 1px solid var(--border) !important;
	border-radius: 6px !important;
	background: var(--card) !important;
	height: 34px !important;
	display: inline-flex !important;
	align-items: center !important;
	min-width: 140px !important;
	max-width: 200px !important;
	position: relative !important;
}

.ss-main.filter-btn .ss-multi-selected {
	border: none !important;
	background: transparent !important;
	padding: 0 12px !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	box-sizing: border-box !important;
}

/* Hide default selected value tags completely */
.ss-main.filter-btn .ss-multi-selected .ss-values {
	display: none !important;
}

.ss-main.filter-btn .ss-multi-selected .ss-add {
	display: none !important;
}

.ss-main.filter-btn .ss-multi-selected .ss-placeholder {
	display: none !important;
}

/* Custom Checkbox Option List Styling */
.ss-main.filter-btn .ss-content {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	width: 100% !important;
	min-width: 180px !important;
	border: 1px solid var(--border) !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
	background: var(--card) !important;
	margin-top: 4px !important;
	overflow: hidden !important;
	z-index: 1000 !important;
}

.ss-main.filter-btn .ss-content .ss-list .ss-option {
	display: flex !important;
	align-items: center !important;
	padding: 8px 12px !important;
	font-size: 12px !important;
	color: var(--text) !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease !important;
}

.ss-main.filter-btn .ss-content .ss-list .ss-option:hover {
	background-color: var(--bg) !important;
}

/* Prepend checkbox square (multi-select only) */
.ss-main.filter-btn .ss-multi-selected ~ .ss-content .ss-list .ss-option:before {
	content: "" !important;
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	border: 1.5px solid var(--muted) !important;
	border-radius: 4px !important;
	margin-right: 8px !important;
	flex-shrink: 0 !important;
	transition: all 0.15s ease !important;
	background-color: #ffffff !important;
	box-sizing: border-box !important;
}

/* Selected option checkmark (multi-select only) */
.ss-main.filter-btn .ss-multi-selected ~ .ss-content .ss-list .ss-option.ss-option-selected {
	background-color: transparent !important;
	color: var(--text) !important;
}

.ss-main.filter-btn .ss-multi-selected ~ .ss-content .ss-list .ss-option.ss-option-selected:hover {
	background-color: var(--bg) !important;
}

.ss-main.filter-btn .ss-multi-selected ~ .ss-content .ss-list .ss-option.ss-option-selected:before {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	content: "\2713" !important; /* Unicode checkmark */
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: bold !important;
	line-height: 11px !important;
	text-align: center !important;
}

/* Prevent clear action buttons from stretching in responsive views */
.tasks-filters-wrap #clearFiltersBtn,
.tasks-filters-wrap #clearSortBtn {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: unset !important;
}

/* SlimSelect Single-select styling adjustments */
.ss-main.filter-btn .ss-single-selected {
	border: none !important;
	background: transparent !important;
	padding: 0 12px !important;
	height: 100% !important;
	font-size: 12px !important;
	color: var(--text) !important;
	font-weight: 500 !important;
}

.ss-main.filter-btn .ss-single-selected .ss-arrow span {
	border-color: var(--muted) !important;
}

/* Highlight the selected option in single-select filters to make it easily identifiable */
.ss-main.filter-btn .ss-single-selected ~ .ss-content .ss-list .ss-option.ss-option-selected,
.ss-main.filter-btn .ss-single-selected ~ .ss-content .ss-list .ss-option.ss-disabled.ss-option-selected {
	background-color: var(--accent) !important;
	color: #ffffff !important;
	opacity: 1 !important;
	font-weight: 600 !important;
}

/* Overlapping Avatar Stack */
.avatar-stack {
	display: inline-flex;
	align-items: center;
	margin-right: 4px;
}
.avatar-stack .task-avatar {
	margin-left: -6px;
	border: 1.5px solid var(--card) !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease;
	z-index: 1;
	flex-shrink: 0;
}
.avatar-stack .task-avatar:first-child {
	margin-left: 0;
	z-index: 2;
}
.avatar-stack .task-avatar:hover {
	transform: translateY(-2px);
	z-index: 10 !important;
	border-color: var(--accent) !important;
}

/* Global Task Details Tooltip */
#task-details-tooltip {
	position: absolute;
	display: none;
	z-index: 99999;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	width: 340px;
	max-width: 90vw;
	overflow: visible;
	font-size: 12px;
	color: #1e293b;
	line-height: 1.6;
	word-break: break-word;
	white-space: normal;
}
#task-details-tooltip.has-attachment {
	width: 680px;
}
.task-tooltip-header {
	font-weight: 700;
	font-size: 13px;
	color: #0f172a;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	padding: 10px 14px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.task-tooltip-body {
	padding: 12px 14px;
	max-height: 380px;
	overflow-y: auto;
}
.task-tooltip-body p {
	margin: 0 0 8px 0;
}
.task-tooltip-body p:last-child {
	margin-bottom: 0;
}
.task-tooltip-body img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	margin: 10px 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #cbd5e1;
}
.tooltip-arrow {
	position: absolute;
	width: 12px;
	height: 12px;
	transform: rotate(45deg);
	z-index: 100000;
}
#task-details-tooltip.arrow-bottom .tooltip-arrow {
	bottom: -7px;
	background: #ffffff;
	border-right: 1px solid #cbd5e1;
	border-bottom: 1px solid #cbd5e1;
}
#task-details-tooltip.arrow-top .tooltip-arrow {
	top: -7px;
	background: #f8fafc;
	border-left: 1px solid #cbd5e1;
	border-top: 1px solid #cbd5e1;
}
.task-table-clamp-8 {
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	max-height: 12.8em;
	line-height: 1.6em;
}

/* Dark Mode support for Tooltip */
[data-theme="dark"] #task-details-tooltip {
	background: #1e293b;
	border-color: #334155;
	color: #f1f5f9;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .task-tooltip-header {
	background: #0f172a;
	color: #f8fafc;
	border-bottom-color: #334155;
}
[data-theme="dark"] #task-details-tooltip.arrow-bottom .tooltip-arrow {
	background: #1e293b;
	border-right-color: #334155;
	border-bottom-color: #334155;
}
[data-theme="dark"] #task-details-tooltip.arrow-top .tooltip-arrow {
	background: #0f172a;
	border-left-color: #334155;
	border-top-color: #334155;
}

body.modal-open {
	overflow: hidden !important;
}

/* Active Filters Highlight Bar & Pills */
.active-filters-bar {
	display: none;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	margin-bottom: 8px;
	padding: 4px 0;
	flex-wrap: wrap;
	width: 100%;
}
.active-filters-label {
	font-size: 11px;
	font-weight: 700;
	color: #db2777; /* Attractive deep pink matching the filter theme */
	background-color: #fdf2f8; /* Soft pink background */
	border: 1px solid rgba(219, 39, 119, 0.15);
	padding: 4px 10px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1;
}
[data-theme="dark"] .active-filters-label {
	background-color: rgba(219, 39, 119, 0.15);
	color: #f472b6;
	border-color: rgba(219, 39, 119, 0.3);
}
.active-filters-list {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Category Group Pill */
.filter-group-pill {
	display: inline-flex;
	align-items: center;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 30px;
	padding: 3px 4px 3px 12px;
	gap: 8px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
[data-theme="dark"] .filter-group-pill {
	background: #1e2235;
}
.filter-group-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--text);
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-right: 1px solid var(--border);
	padding-right: 8px;
	line-height: 1.2;
}
.filter-group-items {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

/* Individual value pill inside category */
.filter-item-subpill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #fdf2f8; /* Soft pink background */
	color: #db2777; /* Deep pink text */
	border: 1px solid rgba(219, 39, 119, 0.12);
	padding: 2.5px 8px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	transition: all 0.2s ease;
}
[data-theme="dark"] .filter-item-subpill {
	background-color: rgba(219, 39, 119, 0.15);
	color: #f472b6;
	border-color: rgba(219, 39, 119, 0.25);
}
.filter-item-subpill:hover {
	background-color: #fce7f3;
	border-color: rgba(219, 39, 119, 0.25);
}
.filter-item-subpill .pill-close {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	color: #db2777;
	opacity: 0.7;
	transition: all 0.2s ease;
}
[data-theme="dark"] .filter-item-subpill .pill-close {
	color: #f472b6;
}
.filter-item-subpill .pill-close:hover {
	opacity: 1;
	background-color: rgba(219, 39, 119, 0.15);
}

/* "Clear Filters" Button inside Active Filters Bar */
#clearFiltersBtn.active-filters-clear-btn {
	display: none;
	align-items: center;
	gap: 6px;
	background: #fef2f2;
	color: #ef4444;
	border: 1px solid #fee2e2;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	line-height: 1;
	height: 24px;
	font-family: inherit;
	box-sizing: border-box;
}
#clearFiltersBtn.active-filters-clear-btn:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	transform: translateY(-0.5px);
}
[data-theme="dark"] #clearFiltersBtn.active-filters-clear-btn {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.25);
	color: #fca5a5;
}
[data-theme="dark"] #clearFiltersBtn.active-filters-clear-btn:hover {
	background: rgba(239, 68, 68, 0.25);
	border-color: rgba(239, 68, 68, 0.35);
}

/* "Inspect Matches" Button inside Active Filters Bar */
.active-filters-inspect-btn {
	display: none;
	align-items: center;
	gap: 6px;
	background: #fdf2f8; /* Soft pink background matching filter labels */
	color: #db2777; /* Deep pink text */
	border: 1px solid rgba(219, 39, 119, 0.3);
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	line-height: 1;
	height: 24px;
	font-family: inherit;
	box-sizing: border-box;
}
.active-filters-inspect-btn:hover {
	background: #fbcfe8; /* Slightly darker pink on hover */
	border-color: rgba(219, 39, 119, 0.5);
	transform: translateY(-0.5px);
}
[data-theme="dark"] .active-filters-inspect-btn {
	background: rgba(219, 39, 119, 0.15);
	border-color: rgba(219, 39, 119, 0.3);
	color: #f472b6;
}
[data-theme="dark"] .active-filters-inspect-btn:hover {
	background: rgba(219, 39, 119, 0.25);
	border-color: rgba(219, 39, 119, 0.4);
}

/* Dynamic Media Preview Enhancements */
#mediaPreviewModal .media-preview-container {
	border: 1px solid var(--border);
	background: var(--card);
}

/* Excel Tabs & Tables */
.excel-preview-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #f1f5f9;
	border-radius: 8px;
}
[data-theme="dark"] .excel-preview-wrapper {
	background: #0f172a;
}

.excel-tab-bar {
	display: flex;
	gap: 2px;
	background: #e2e8f0;
	padding: 8px 12px 0 12px;
	border-bottom: 1px solid #cbd5e1;
	overflow-x: auto;
}
[data-theme="dark"] .excel-tab-bar {
	background: #1e293b;
	border-bottom-color: #475569;
}

.sheet-tab-btn {
	padding: 8px 16px;
	border: 1px solid #cbd5e1;
	border-bottom: none;
	background: #cbd5e1;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	color: #475569;
	transition: all 0.15s ease;
	outline: none;
	margin-bottom: -1px;
}
.sheet-tab-btn:hover {
	background: #cbd5e1;
	color: #1e293b;
}
.sheet-tab-btn.active {
	background: #ffffff;
	color: #107c41; /* Excel green indicator */
	border-top: 3px solid #107c41;
	border-color: #cbd5e1 #cbd5e1 transparent #cbd5e1;
}
[data-theme="dark"] .sheet-tab-btn {
	background: #334155;
	border-color: #475569;
	color: #94a3b8;
}
[data-theme="dark"] .sheet-tab-btn:hover {
	background: #475569;
	color: #f1f5f9;
}
[data-theme="dark"] .sheet-tab-btn.active {
	background: #1e293b;
	color: #4ade80;
	border-top: 3px solid #4ade80;
	border-color: #475569 #475569 transparent #475569;
}

.excel-table-viewport {
	flex: 1;
	overflow: auto;
	padding: 24px;
	background: #ffffff;
}
[data-theme="dark"] .excel-table-viewport {
	background: #0f172a;
}

.preview-excel-table {
	border-collapse: collapse;
	width: max-content;
	min-width: 100%;
	font-size: 12.5px;
	font-family: 'DM Sans', sans-serif;
	color: #334155;
}
[data-theme="dark"] .preview-excel-table {
	color: #cbd5e1;
}

.preview-excel-table tr:nth-child(odd) {
	background-color: #ffffff;
}
.preview-excel-table tr:nth-child(even) {
	background-color: #f8fafc;
}
[data-theme="dark"] .preview-excel-table tr:nth-child(odd) {
	background-color: #1e293b;
}
[data-theme="dark"] .preview-excel-table tr:nth-child(even) {
	background-color: #0f172a;
}

.preview-excel-table td {
	border: 1px solid #e2e8f0;
	padding: 8px 12px;
	vertical-align: middle;
	line-height: 1.4;
}
[data-theme="dark"] .preview-excel-table td {
	border-color: #334155;
}

/* Style the spreadsheet headers dynamically */
.preview-excel-table tr:first-child {
	font-weight: 700;
	background: #f1f5f9 !important;
	color: #1e293b;
}
[data-theme="dark"] .preview-excel-table tr:first-child {
	background: #0f172a !important;
	color: #f1f5f9;
}
.preview-excel-table tr:first-child td {
	border: 1px solid #cbd5e1;
	background: #f1f5f9;
	text-align: center;
}
[data-theme="dark"] .preview-excel-table tr:first-child td {
	border-color: #475569;
	background: #0f172a;
}

/* Word (DOCX) Preview Layout */
.word-preview-desk {
	width: 100%;
	height: 100%;
	overflow: auto;
	background: #e2e8f0;
	padding: 30px 16px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}
[data-theme="dark"] .word-preview-desk {
	background: #0f172a;
}

#docx-container {
	width: 100%;
	max-width: 820px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
	border: 1px solid #cbd5e1;
	box-sizing: border-box;
	min-height: 100%;
}
[data-theme="dark"] #docx-container {
	background: #1e293b;
	border-color: #334155;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Override docx-preview styling to make it fit page card neatly */
#docx-container .docx {
	padding: 40px 50px !important;
	box-shadow: none !important;
	width: 100% !important;
	margin: 0 !important;
	background: transparent !important;
}
[data-theme="dark"] #docx-container .docx * {
	color: #cbd5e1 !important;
}

/* Download / Close Buttons Enhancements */
#mediaPreviewModal #mediaDownloadBtn {
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#mediaPreviewModal .modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	border: none;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}
#mediaPreviewModal .modal-close:hover {
	background: #fee2e2;
	color: #ef4444;
	transform: rotate(90deg);
}
[data-theme="dark"] #mediaPreviewModal .modal-close {
	background: #334155;
	color: #cbd5e1;
}
[data-theme="dark"] #mediaPreviewModal .modal-close:hover {
	background: rgba(239, 68, 68, 0.2);
	color: #ef4444;
}