.elementor-12 .elementor-element.elementor-element-8ecd574{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-30px;--margin-bottom:-100px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-12:not(.elementor-motion-effects-element-type-background), body.elementor-page-12 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#010113;}body.elementor-page-12{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for shortcode, class: .elementor-element-8fec616 */:root {
    --bg: #010113;
    --card: #0b0b1a;
    --primary: #644AE1;
    --text-main: #ffffff;
    --text-muted: #a0a0b9;
    --border: rgba(255,255,255,0.08);
    --shadow: 0 8px 30px rgba(0,0,0,0.5);
    --danger: #ff4757;
    --success: #2ed573;
    --warning: #ffa502;
    --info: #1e90ff;
}

/* Layout */
.pwd-wrapper * { box-sizing: border-box; }
.pwd-wrapper { display: flex; min-height: 800px; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); margin: 30px 0; }
.pwd-sidebar { width: 280px; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.pwd-main { flex-grow: 1; padding: 40px; overflow-y: auto; background: var(--bg); position: relative; }

/* Sidebar */
.pwd-logo { padding: 30px; font-size: 1.4rem; font-weight: 800; letter-spacing: 1px; color: var(--primary); text-transform: uppercase; }
.pwd-menu { list-style:none; padding:0; margin:0; flex-grow:1; }
.pwd-menu a { display: flex; align-items: center; padding: 16px 30px; color: var(--text-muted); text-decoration: none; font-weight: 500; transition: 0.2s; }
.pwd-menu a:hover, .pwd-menu li.active a { color: #fff; background: rgba(255,255,255,0.03); border-left: 4px solid var(--primary); }
.pwd-menu .dashicons { margin-right: 15px; font-size: 1.2rem; }
.pwd-logout { margin-top: auto; border-top: 1px solid var(--border); }

/* Header & Notifications */
.pwd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.pwd-header h2 { margin: 0; font-size: 2rem; color: #fff; font-weight: 700; }
.pwd-header-actions { display: flex; align-items: center; gap: 20px; }
.pwd-notif-bell { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; transition: 0.2s; }
.pwd-notif-bell:hover { background: rgba(255,255,255,0.05); }
.pwd-notif-bell .dashicons { font-size: 1.5rem; color: #fff; }
.notif-badge { position: absolute; top: 5px; right: 5px; background: var(--danger); color: #fff; font-size: 0.6rem; padding: 2px 5px; border-radius: 50%; box-shadow: 0 0 5px var(--danger); }
.notif-dropdown { position: absolute; top: 60px; right: 40px; width: 320px; background: #151525; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); display: none; z-index: 999; }
.notif-header { padding:15px; border-bottom:1px solid #333; display:flex; justify-content:space-between; align-items:center; }
.notif-list { max-height: 300px; overflow-y: auto; }
.notif-item { display: block; padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ddd; text-decoration: none; font-size: 0.9rem; transition:0.2s; }
.notif-item:hover { background: rgba(255,255,255,0.05); padding-left:20px; }
.notif-time { font-size:0.7rem; color:#666; display: block; margin-top: 2px; }

/* Filter Bar */
.pwd-filter-bar { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.pwd-filter-bar a.active { background: rgba(255,255,255,0.1); border-color: #fff; }

/* Global Buttons & Inputs */
.pwd-btn { background: var(--primary); color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9rem; transition: 0.2s; }
.pwd-btn:hover { transform: translateY(-2px); opacity: 0.9; color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.btn-warn { background: var(--warning); color: #000; }
.btn-success { background: var(--success); color: #000; }
.btn-text { background: none; border: none; color: var(--text-muted); cursor: pointer; }
.btn-full { width: 100%; margin-top: 10px; }

/* FORM LAYOUT FIX */
.pwd-form-group { margin-bottom: 20px; }
.pwd-form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #ccc; font-size: 0.9rem; }
.pwd-input { width: 100%; padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; color: #fff; margin-bottom: 15px; display: block; }

/* DROPDOWN FIX */
select.pwd-input { color: #fff; background-color: rgba(255,255,255,0.03); }
select.pwd-input option { background-color: #0b0b1a; color: #fff; }

/* Grid & Cards */
.pwd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
.pwd-card { background: var(--card); padding: 30px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
.stat-num { font-size:3rem; margin:10px 0; }
.stat-warn { color: var(--warning); }
.stat-danger { color: var(--danger); }
.stat-success { color: var(--success); }
.text-center { text-align: center; }

/* --- DASHBOARD STATS GRID (FIXED) --- */
.pwd-grid-4 { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
    margin-bottom: 30px; 
}

/* --- ANALYTICS GRAPH (NEW) --- */
.analytics-graph-container { height: 300px; width: 100%; background: rgba(255,255,255,0.02); border-radius: 10px; padding: 20px; box-sizing: border-box; }
.analytics-table { width: 100%; border-collapse: collapse; }
.analytics-table th, .analytics-table td { padding: 15px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ddd; }
.analytics-table th { color: var(--text-muted); font-size: 0.9rem; }

/* --- TASK ITEM --- */
.pwd-task-item { background: var(--card); padding: 25px; margin-bottom: 20px; border-radius: 12px; border: 1px solid var(--border); display: flex; gap: 20px; justify-content: space-between; align-items: center; transition: 0.2s; border-left: 4px solid transparent; }
.pwd-task-item:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.15); }
.status-active { border-left-color: var(--success); }
.status-in_review { border-left-color: var(--warning); }
.status-changes_requested { border-left-color: var(--danger); }

.task-info { flex: 1; }
.task-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.task-details-row { font-size: 0.85rem; color: #ccc; margin-bottom: 5px; display: flex; gap: 15px; align-items: center; }
.status-alert { color: var(--danger); font-weight: bold; background: rgba(255, 71, 87, 0.1); padding: 2px 6px; border-radius: 4px; }
.task-meta { color: var(--text-muted); font-size: 0.8rem; }
.task-right-actions { display: flex; align-items: center; gap: 15px; }

/* --- ROUND TIMER --- */
.pwd-round-timer { position: relative; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.timer-ring { transform: rotate(-90deg); }
.timer-ring-circle { stroke-dasharray: 126; stroke-dashoffset: 10; transition: stroke-dashoffset 0.5s; stroke-linecap: round; }
.timer-text { position: absolute; font-size: 0.65rem; color: #fff; text-align: center; line-height: 1.1; font-weight: bold; }

/* BADGES (UPDATED) */
.pwd-badge { padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; margin-right: 10px; }
.badge-emergency { background: rgba(255, 71, 87, 0.15); color: var(--danger); }
.badge-high { background: rgba(255, 165, 2, 0.15); color: var(--warning); }
.badge-medium { background: rgba(30, 144, 255, 0.15); color: var(--info); }
.badge-normal { background: rgba(46, 213, 115, 0.15); color: var(--success); }

/* STATUS BADGES (Exact Request) */
.status-badge { display: inline-block; }
.status-active { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); } 
.status-in_review { background: rgba(255, 165, 2, 0.15); color: var(--warning); border: none; }
.status-changes_requested { background: rgba(255, 71, 87, 0.15); color: var(--danger); border: none; }
.status-completed { background: rgba(46, 213, 115, 0.15); color: var(--success); border: none; }

/* Discussion Feed */
.discussion-filters { display: flex; align-items: flex-end; gap: 15px; margin-bottom: 25px; padding: 20px; }
.comment-feed-item { margin-bottom: 20px; }
.feed-header { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px; margin-bottom: 15px; }
.feed-project-tag { color: var(--primary); font-weight: bold; font-size: 0.9rem; }
.feed-time { color: var(--text-muted); font-size: 0.8rem; }

/* Detail Page Structure */
.detail-header-block { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 25px; flex-wrap: wrap; gap:15px; }
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.action-btns { display: flex; gap: 10px; }
.web-details { margin-top:20px; background:rgba(100, 74, 225, 0.1); padding:20px; border-radius:10px; border:1px solid rgba(100, 74, 225, 0.3); }

/* --- ATTACHMENT PREVIEW (NEW) --- */
.attachment-section { margin-top: 20px; }
.attachment-preview img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.file-card { display: flex; align-items: center; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; border: 1px solid var(--border); }
.file-icon { font-size: 2rem; color: var(--text-muted); margin-right: 15px; }
.file-info { display: flex; flex-direction: column; }
.file-name { font-weight: bold; color: var(--text-main); font-size: 0.9rem; }

/* Links */
.back-link { color: var(--text-muted); text-decoration: none; margin-bottom: 20px; display: inline-block; font-size: 0.9rem; }
.back-link:hover { color: #fff; }

/* Comments */
.comment-list { max-height: 400px; overflow-y: auto; margin-bottom: 20px; padding-right: 10px; }
.comment-item { display: flex; gap: 15px; margin-bottom: 20px; }
.comment-item.mine { flex-direction: row-reverse; }
.c-avatar img { border-radius: 50%; border: 1px solid var(--border); }
.c-body { background: rgba(255,255,255,0.03); padding: 15px; border-radius: 8px; flex: 1; border: 1px solid var(--border); }
.mine .c-body { background: rgba(100,74,225,0.2); border-color: var(--primary); }

/* Responsive */
@media (max-width: 900px) {
    .pwd-wrapper { flex-direction: column; }
    .pwd-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding-bottom: 10px; }
    .detail-grid, .grid-2 { grid-template-columns: 1fr; }
    .pwd-task-item { flex-direction: column; align-items: flex-start; gap: 15px; }
    .pwd-task-item .pwd-btn { width: 100%; }
    .task-right-actions { width: 100%; justify-content: space-between; }
    .pwd-grid-4 { grid-template-columns: 1fr; }
}/* End custom CSS */