:root {
            --bg-main: #f0f4f3;
            --text-dark: #1a1a1a;
            --text-grey: #4a4a4a;
            --text-light-grey: #8e9e97;
            --white: #ffffff;
            --card-border: #e8edea;
            --accent: #0a7a5c;
            --accent-light: #e6f4ed;
            --accent-gradient: linear-gradient(135deg, #c9e8da 0%, #a8dcc4 50%, #d2f0e2 100%);
            --blue: #2563eb;
            --blue-light: #eff6ff;
            --blue-bg: #dbeafe;
            --orange: #f59e0b;
            --red: #ef4444;
            --red-light: #fef2f2;
            --green-done: #16a34a;
            --purple: #7c3aed;

            /* Company brand colors */
            --brand-sarekam: #0d9488;
            --brand-sales: #ea580c;
            --brand-xern: #2563eb;
            --brand-choice: #7c3aed;
            --brand-property: #0369a1;

            /* Profile/Location inherited */
            --home-header-bg: #cee7d6;
            --swiggy-green: #0a7a5c;
            --profile-bg: #f8f9fa;
            --pass-gradient-start: #f3e8ff;
            --pass-gradient-end: #e0d4f5;
            --pass-text: #4c1d95;
            --logout-red: #d32f2f;
            --loc-bg: #f3f4f6;
            --loc-orange: #ff5200;
            --loc-green: #25D366;
            --dropdown-bg: #1c1d22;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
        body { background-color: #d1d9e0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }

        /* === DEVICE SHELL === */
        .device { width: 100%; max-width: 393px; height: 852px; background-color: var(--white); position: relative; overflow: hidden; border-radius: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.2), inset 0 0 0 8px #1a1a1a; }
        .main-content { height: 100%; overflow-y: auto; overflow-x: hidden; background-color: var(--bg-main); }
        .main-content::-webkit-scrollbar { display: none; }

        /* ============================================
           PM HEADER
           ============================================ */
        .pm-header {
            background: var(--accent-gradient);
            padding: 38px 18px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        .pm-header-left { display: flex; align-items: center; gap: 14px; }
        .pm-hamburger {
            width: 36px; height: 36px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; color: var(--text-dark); cursor: pointer;
            background: rgba(255,255,255,0.45); backdrop-filter: blur(6px);
            transition: all 0.2s;
        }
        .pm-hamburger:active { transform: scale(0.92); }
        .pm-header-info { display: flex; flex-direction: column; }
        .pm-header-name { font-size: 17px; font-weight: 800; color: var(--text-dark); letter-spacing: -0.3px; }
        .pm-header-role { font-size: 11.5px; font-weight: 600; color: #3d6b56; letter-spacing: 0.2px; }
        .pm-header-avatar {
            width: 42px; height: 42px; border-radius: 50%;
            background: linear-gradient(135deg, #0a7a5c, #16a34a);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 18px; font-weight: 800;
            box-shadow: 0 3px 12px rgba(10,122,92,0.3);
            cursor: pointer; transition: transform 0.2s;
        }
        .pm-header-avatar:active { transform: scale(0.93); }
        .pm-notif-badge {
            position: absolute; top: -3px; right: -3px;
            background: var(--red);
            color: #fff;
            font-size: 8px; font-weight: 800;
            width: 14px; height: 14px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            border: 1.5px solid #fff;
        }

        /* ============================================
           COMPANY SELECTOR BAR
           ============================================ */
        .pm-company-bar {
            background: var(--accent-gradient);
            padding: 16px 0 18px;
            display: flex;
            overflow-x: auto;
            gap: 16px;
            scrollbar-width: none;
            padding-left: 18px;
            padding-right: 18px;
        }
        .pm-company-bar::-webkit-scrollbar { display: none; }

        .pm-company-item {
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            min-width: 60px; cursor: pointer;
            opacity: 0.55; transition: all 0.25s ease;
        }
        .pm-company-item.active { opacity: 1; transform: translateY(-2px); }
        .pm-company-icon {
            width: 48px; height: 48px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; color: #fff;
            transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .pm-company-item.active .pm-company-icon {
            box-shadow: 0 4px 18px rgba(0,0,0,0.2);
            transform: scale(1.1);
        }
        .pm-company-label {
            font-size: 10px; font-weight: 700; color: #3b6b55;
            white-space: nowrap; text-align: center; letter-spacing: 0.1px;
        }
        .pm-company-item.active .pm-company-label { font-weight: 800; color: #0a5c44; }

        /* ============================================
           CATEGORY CHIPS
           ============================================ */
        .pm-chips-row {
            display: flex; overflow-x: auto; gap: 8px;
            padding: 14px 18px 10px; background: var(--white);
            scrollbar-width: none;
            border-bottom: 1px solid #eef2f0;
        }
        .pm-chips-row::-webkit-scrollbar { display: none; }
        .pm-chip {
            padding: 7px 16px; border-radius: 20px;
            font-size: 12px; font-weight: 700; white-space: nowrap;
            cursor: pointer; transition: all 0.2s ease;
            border: 1.5px solid #e0e8e4; background: #f5f8f6; color: #5a6e64;
        }
        .pm-chip.active {
            background: var(--text-dark); color: var(--white);
            border-color: var(--text-dark);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .pm-chip:active { transform: scale(0.95); }

        /* ============================================
        /* ============================================
           SEARCH BAR
           ============================================ */
        .pm-search-wrap {
            padding: 10px 18px 14px; background: var(--white);
        }
        .pm-search-box {
            display: flex; align-items: center; gap: 12px;
            background: #f8faf9; border-radius: 16px;
            padding: 0 16px; height: 50px;
            border: 1px solid #eef2f0;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
            transition: all 0.3s ease;
        }
        .pm-search-box:focus-within {
            background: #ffffff;
            border-color: rgba(10, 122, 92, 0.3);
            box-shadow: 0 4px 15px rgba(10, 122, 92, 0.08), inset 0 2px 4px rgba(0,0,0,0.01);
        }
        .pm-search-box i { color: #94a3b8; font-size: 16px; }
        .pm-search-box input {
            flex: 1; border: none; outline: none; background: transparent;
            font-size: 14px; font-weight: 600; color: var(--text-dark);
        }
        .pm-search-box input::placeholder { color: #94a3b8; font-weight: 500; }
        .pm-search-mic { color: #94a3b8; font-size: 18px; cursor: pointer; transition: color 0.2s; }
        .pm-search-mic:hover { color: var(--text-dark); }
        .pm-filter-btn {
            width: 50px; height: 50px; border-radius: 16px;
            background: linear-gradient(135deg, var(--text-dark), #0f172a); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; cursor: pointer; transition: all 0.2s;
            flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .pm-filter-btn:active { transform: scale(0.92); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .pm-company-list-item {
            display: flex; align-items: center; gap: 16px;
            padding: 16px; background: var(--white); border-radius: 16px;
            margin-bottom: 12px; cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.03); border: 1px solid #eef2f0;
            transition: all 0.2s;
        }
        .pm-company-list-item:active { transform: scale(0.98); background: #f9fbfa; }
        .pm-company-list-item.active { border-color: var(--accent); background: var(--accent-light); }

        /* ============================================
           SCROLLABLE CONTENT AREA
           ============================================ */
        .pm-content-scroll {
            padding: 14px 16px 100px;
            min-height: 300px;
        }

        /* ============================================
           DASHBOARD - URGENT ACTION ITEMS
           ============================================ */
        .pm-section-title {
            font-size: 16px; font-weight: 800; color: var(--text-dark);
            margin-bottom: 12px; letter-spacing: -0.2px;
            display: flex; align-items: center;
        }
        .pm-urgent-card {
            background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border-radius: 20px;
            padding: 8px 18px; margin-bottom: 16px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02), inset 0 0 0 1px rgba(255,255,255,0.5);
            border: 1px solid #eef2f0;
        }
        .pm-urgent-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 0;
            border-bottom: 1px dashed #e2e8f0;
            cursor: pointer; transition: all 0.2s;
        }
        .pm-urgent-item:last-child { border-bottom: none; }
        .pm-urgent-item:active { transform: scale(0.98); opacity: 0.8; }
        .pm-urgent-icon {
            width: 32px; height: 32px; border-radius: 10px; background: rgba(239, 68, 68, 0.1); color: #ef4444;
            display: flex; align-items: center; justify-content: center; font-size: 14px;
            margin-right: 12px; flex-shrink: 0;
        }
        .pm-urgent-text { font-size: 13.5px; font-weight: 700; color: var(--text-dark); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
        .pm-urgent-badge {
            padding: 4px 10px; border-radius: 8px;
            font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
            flex-shrink: 0;
        }

        /* ============================================
           STATS SUMMARY ROW
           ============================================ */
        .pm-stats-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
            margin-bottom: 16px;
        }
        .pm-stat-card {
            background: linear-gradient(145deg, #ffffff, #f9fafb); border-radius: 18px; padding: 16px;
            border: 1px solid #eef2f0;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
            display: flex; flex-direction: row; align-items: center; gap: 12px;
            transition: transform 0.2s;
        }
        .pm-stat-card:active { transform: scale(0.96); }
        .pm-stat-icon {
            width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
        }
        .pm-stat-total .pm-stat-icon { background: rgba(142, 158, 151, 0.1); color: #64748b; }
        .pm-stat-completed .pm-stat-icon { background: rgba(16, 185, 129, 0.1); color: var(--green-done); }
        .pm-stat-progress .pm-stat-icon { background: rgba(59, 130, 246, 0.1); color: var(--blue); }
        .pm-stat-budget .pm-stat-icon { background: rgba(245, 158, 11, 0.1); color: var(--orange); }
        
        .pm-stat-value { font-size: 20px; font-weight: 900; color: var(--text-dark); letter-spacing: -0.5px; line-height: 1.1; }
        .pm-stat-label { font-size: 11px; font-weight: 600; color: var(--text-light-grey); margin-top: 2px; }

        /* ============================================
           FOLDER CARDS
           ============================================ */
        .pm-folder-grid {
            display: grid; grid-template-columns: 1fr; gap: 14px;
            margin-top: 10px;
        }
        .pm-folder-card {
            background: var(--white); border-radius: 20px;
            padding: 18px; border: 1px solid #eef2f0;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
            display: flex; align-items: center; gap: 16px;
            cursor: pointer; transition: all 0.2s ease;
        }
        .pm-folder-card:active { transform: scale(0.98); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .pm-folder-icon {
            width: 50px; height: 50px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; color: #fff; flex-shrink: 0;
        }
        .pm-folder-info { flex: 1; overflow: hidden; }
        .pm-folder-title { font-size: 16px; font-weight: 800; color: var(--text-dark); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pm-folder-stats { font-size: 12px; font-weight: 600; color: var(--text-grey); }
        .pm-folder-company { font-size: 10px; font-weight: 700; color: var(--text-light-grey); margin-top: 4px; }
        
        .pm-folder-filter-bar {
            background: #e6f4ed; border-radius: 12px; padding: 12px 16px;
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 16px; border: 1px solid #bce3d0;
        }
        .pm-folder-filter-text { font-size: 13px; font-weight: 700; color: #0a7a5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; margin-right: 10px; }
        .pm-folder-filter-clear { font-size: 12px; font-weight: 800; color: #fff; background: var(--text-dark); padding: 4px 10px; border-radius: 6px; cursor: pointer; }

        /* ============================================
           TASK CARDS
           ============================================ */
        .pm-task-card {
            background: var(--white); border-radius: 20px;
            padding: 20px; margin-bottom: 16px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(0,0,0,0.04);
            cursor: pointer; transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
            position: relative; overflow: hidden;
        }
        .pm-task-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.04); }
        .pm-task-card:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(0,0,0,0.04); }
        
        .pm-task-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .pm-task-badges-left { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
        .pm-badge-code { background: #f1f5f9; color: #475569; font-family: monospace; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
        .pm-badge.cat { background: var(--text-dark); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
        .pm-task-client { font-size: 11.5px; font-weight: 700; color: #059669; background: #ecfdf5; padding: 4px 10px; border-radius: 6px; }
        
        .pm-task-title { font-size: 16px; font-weight: 800; color: var(--text-dark); margin-bottom: 16px; line-height: 1.35; letter-spacing: -0.2px; }
        
        .pm-task-footer-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
        .pm-task-assignee { display: flex; align-items: center; gap: 8px; }
        .pm-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; box-shadow: 0 2px 6px rgba(59,130,246,0.3); }
        .pm-assignee-name { font-size: 12px; font-weight: 700; color: #475569; }
        
        .pm-task-status-pill { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: #f8faf9; border: 1px solid #f1f5f9; transition: all 0.2s; }
        .pm-task-status-pill.todo { background: #f8fafc; border-color: #e2e8f0; }
        .pm-task-status-pill.in_progress { background: #eff6ff; border-color: #dbeafe; }
        .pm-task-status-pill.done { background: #f0fdf4; border-color: #dcfce7; }
        
        .pm-status-icon { font-size: 14px; }
        .pm-status-icon.todo { color: #94a3b8; }
        .pm-status-icon.in_progress { color: var(--blue); }
        .pm-status-icon.done { color: var(--green-done); }
        .pm-status-text { font-size: 11px; font-weight: 800; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.5px; }
        
        .pm-progress-container { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
        .pm-progress-bar-wrap { flex: 1; height: 6px; border-radius: 3px; background: #f1f5f9; overflow: hidden; }
        .pm-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 3px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
        .pm-progress-bar-fill.done-bar { background: linear-gradient(90deg, #10b981, #34d399); }
        .pm-progress-text { font-size: 11px; font-weight: 800; color: var(--blue); min-width: 30px; text-align: right; }

        /* ============================================
           BOTTOM NAVIGATION
           ============================================ */
        .pm-bottom-nav {
            position: absolute; bottom: 0; width: 100%;
            background: var(--white); z-index: 10;
            border-top: 1px solid #e8edea;
            padding-bottom: 20px;
        }
        .pm-nav-grid {
            display: flex; justify-content: space-around; align-items: flex-end;
            padding: 10px 0 4px; position: relative;
        }
        .pm-nav-item {
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            font-size: 10.5px; font-weight: 700; color: #9ba8a3;
            cursor: pointer; transition: color 0.2s;
            min-width: 50px;
        }
        .pm-nav-item.active { color: var(--blue); }
        .pm-nav-item i { font-size: 20px; }
        .pm-nav-add {
            width: 52px; height: 52px; border-radius: 50%;
            background: linear-gradient(135deg, var(--blue), #3b82f6);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 24px;
            box-shadow: 0 4px 20px rgba(37,99,235,0.4);
            cursor: pointer; transition: all 0.2s;
            margin-top: -26px;
        }
        .pm-nav-add:active { transform: scale(0.9); }

        /* ============================================
           TASK DETAIL OVERLAY
           ============================================ */
        .task-detail-view {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #f3f6f5; z-index: 55;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), opacity 0.3s;
            display: flex; flex-direction: column; border-radius: 40px;
            opacity: 0; pointer-events: none;
        }
        .task-detail-view.active { transform: translateX(0); opacity: 1; pointer-events: auto; }

        .td-header {
            padding: 40px 18px 14px; background: var(--white);
            display: flex; align-items: flex-start; gap: 14px;
        }
        .td-back { font-size: 20px; color: var(--text-dark); cursor: pointer; padding: 6px; }
        .td-back:active { opacity: 0.6; }
        .td-header-title { font-size: 17px; font-weight: 800; color: var(--text-dark); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

        /* Project badges row */
        .td-project-badges {
            display: flex; gap: 10px; padding: 10px 18px 12px;
            background: var(--white); overflow-x: auto; scrollbar-width: none;
        }
        .td-project-badges::-webkit-scrollbar { display: none; }
        .td-project-badge {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 14px; border-radius: 12px;
            background: var(--blue-light); border: 1px solid #dbeafe;
            white-space: nowrap;
        }
        .td-project-badge i { font-size: 16px; color: var(--blue); }
        .td-project-badge-text { display: flex; flex-direction: column; }
        .td-project-badge-name { font-size: 12px; font-weight: 800; color: var(--text-dark); }
        .td-project-badge-co { font-size: 10px; font-weight: 600; color: var(--text-light-grey); }

        /* Sub-tab row with custom visual slidebar scrollbar */
        .td-tabs-row {
            display: flex; gap: 0; background: var(--white);
            border-bottom: 1px solid #eef2f0;
            padding: 0 18px; /* Removed slider space */
            overflow-x: auto; white-space: nowrap;
            scrollbar-width: none; /* Hide scrollbar for clean UI */
        }
        .td-tabs-row::-webkit-scrollbar { display: none; }
        .td-tab {
            padding: 10px 14px; font-size: 12.5px; font-weight: 700;
            color: #8e9e97; cursor: pointer;
            border-bottom: 2.5px solid transparent;
            transition: all 0.2s;
        }
        .td-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

        /* Content panels */
        .td-scroll { flex: 1; overflow-y: auto; padding: 16px 16px 80px; }
        .td-scroll::-webkit-scrollbar { display: none; }
        .td-panel { display: none; }
        .td-panel.active { display: block; }

        /* Robustness Blueprint */
        .td-section-header { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 3px; }
        .td-section-sub { font-size: 12px; font-weight: 600; color: var(--text-light-grey); margin-bottom: 16px; }
        .td-blueprint-card {
            background: var(--white); border-radius: 20px; padding: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid #eef2f0;
            margin-bottom: 16px;
        }
        .td-bp-title { font-size: 15px; font-weight: 800; color: var(--text-dark); margin-bottom: 14px; }
        .td-bp-field { margin-bottom: 14px; }
        .td-bp-field:last-child { margin-bottom: 0; }
        .td-bp-label { font-size: 12px; font-weight: 800; margin-bottom: 3px; }
        .td-bp-label.who { color: var(--blue); }
        .td-bp-label.why { color: var(--red); }
        .td-bp-label.how { color: var(--accent); }
        .td-bp-label.tech { color: var(--purple); }
        .td-bp-value { font-size: 13px; font-weight: 600; color: var(--text-grey); line-height: 1.5; }

        .td-action-btn {
            width: 100%; height: 50px; border-radius: 14px; border: none;
            font-size: 15px; font-weight: 700; cursor: pointer;
            background: linear-gradient(135deg, var(--blue), #3b82f6);
            color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,0.3);
            transition: all 0.2s;
        }
        .td-action-btn:active { transform: scale(0.97); }

        /* Resources & Budget */
        .td-resource-card {
            background: var(--white); border-radius: 20px; padding: 18px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid #eef2f0;
            margin-bottom: 12px;
        }
        .td-res-title { font-size: 14px; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; }
        .td-res-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
        .td-res-label { font-size: 12.5px; font-weight: 600; color: var(--text-light-grey); }
        .td-res-value { font-size: 12.5px; font-weight: 800; color: var(--text-dark); }
        .td-budget-badge {
            display: inline-block; padding: 4px 10px; border-radius: 6px;
            font-size: 11px; font-weight: 800; margin-top: 6px;
        }
        .td-budget-badge.approved { background: #dcfce7; color: #16a34a; }
        .td-budget-badge.awaiting { background: #fef3c7; color: #d97706; }

        .td-outlay-card {
            background: var(--white); border-radius: 20px; padding: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid #eef2f0;
            margin-bottom: 16px;
        }
        .td-outlay-label { font-size: 13px; font-weight: 700; color: var(--text-grey); margin-bottom: 4px; }
        .td-outlay-amount { font-size: 28px; font-weight: 800; color: var(--text-dark); letter-spacing: -0.5px; margin-bottom: 10px; }
        .td-outlay-bar-wrap { height: 8px; border-radius: 4px; background: #e8edea; overflow: hidden; }
        .td-outlay-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), #60a5fa); transition: width 0.5s ease; }
        .td-outlay-pct { font-size: 12px; font-weight: 700; color: var(--text-light-grey); margin-top: 6px; text-align: right; }

        /* Collaboration Hub */
        .td-collab-card {
            background: var(--white); border-radius: 20px; padding: 18px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid #eef2f0;
            margin-bottom: 12px;
        }
        .td-collab-title { font-size: 14px; font-weight: 800; color: var(--text-dark); margin-bottom: 4px; }
        .td-collab-company { font-size: 11px; font-weight: 600; color: var(--text-light-grey); margin-bottom: 10px; }
        .td-collab-field { margin-bottom: 8px; }
        .td-collab-field-label { font-size: 11.5px; font-weight: 700; color: var(--text-grey); }
        .td-collab-field-value { font-size: 13px; font-weight: 600; color: var(--text-dark); }
        .td-priority-badge {
            display: inline-block; padding: 4px 12px; border-radius: 6px;
            font-size: 11px; font-weight: 800; margin-top: 6px;
        }
        .td-priority-badge.high { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
        .td-priority-badge.medium { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
        .td-priority-badge.low { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }

        /* ============================================
           ADD TASK/PROJECT FORM OVERLAY
           ============================================ */
        .pm-form-view {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--white); z-index: 60;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), opacity 0.3s;
            display: flex; flex-direction: column; border-radius: 40px;
            opacity: 0; pointer-events: none;
        }
        .pm-form-view.active { transform: translateX(0); opacity: 1; pointer-events: auto; }
        .pm-form-header {
            padding: 40px 18px 16px; display: flex; align-items: center; gap: 14px;
            background: var(--white); border-bottom: 1px solid #eef2f0;
        }
        .pm-form-header i { font-size: 20px; color: var(--text-dark); cursor: pointer; padding: 6px; }
        .pm-form-header h2 { font-size: 18px; font-weight: 800; color: var(--text-dark); }
        .pm-form-scroll { flex: 1; overflow-y: auto; padding: 20px 18px 120px; }
        .pm-form-scroll::-webkit-scrollbar { display: none; }
        .pm-form-group { margin-bottom: 20px; }
        .pm-form-group label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 7px; }
        .pm-form-group input, .pm-form-group select, .pm-form-group textarea {
            width: 100%; height: 48px; border: 1.5px solid #d1dbd6; border-radius: 12px;
            padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--text-dark);
            outline: none; transition: border-color 0.2s; background: var(--white);
            font-family: 'Manrope', sans-serif;
        }
        .pm-form-group textarea { height: 80px; padding: 12px 16px; resize: none; }
        .pm-form-group input:focus, .pm-form-group select:focus, .pm-form-group textarea:focus { border-color: var(--blue); }
        .pm-form-group input::placeholder, .pm-form-group textarea::placeholder { color: #a4b3ac; font-weight: 500; }
        .pm-form-bottom {
            position: absolute; bottom: 0; width: 100%;
            padding: 16px 18px 30px; background: var(--white);
            border-top: 1px solid #eef2f0; border-radius: 0 0 40px 40px;
        }
        .pm-form-submit {
            width: 100%; height: 50px; border-radius: 14px; border: none;
            font-size: 15px; font-weight: 700; cursor: pointer;
            background: linear-gradient(135deg, var(--blue), #3b82f6);
            color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,0.3);
            transition: all 0.2s; font-family: 'Manrope', sans-serif;
        }
        .pm-form-submit:active { transform: scale(0.97); }

        /* ============================================
           ADD FOLDER FORM OVERLAY
           ============================================ */
        .pm-form-view#folderFormView {
            z-index: 61; /* Sit above tasks form if both open somehow */
        }

        /* ============================================
           EMPTY STATE
           ============================================ */
        .pm-empty {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; padding: 50px 20px; text-align: center;
        }
        .pm-empty i { font-size: 48px; color: #d4ddd8; margin-bottom: 14px; }
        .pm-empty-title { font-size: 16px; font-weight: 800; color: var(--text-grey); margin-bottom: 4px; }
        .pm-empty-sub { font-size: 13px; font-weight: 600; color: var(--text-light-grey); }

        /* ============================================
           EXISTING OVERLAY STYLES (kept intact)
           ============================================ */
        .location-view, .edit-address-view, .full-map-view, .profile-view, .notif-view, .edit-profile-view, .contact-form-view, .contact-details-view, .filter-view {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), opacity 0.3s;
            display: flex; flex-direction: column; border-radius: 40px;
            opacity: 0; pointer-events: none;
        }
        .location-view { background: var(--loc-bg); z-index: 55; }
        .edit-address-view { background: var(--white); z-index: 65; }
        .full-map-view { background: #e8ebe8; z-index: 70; overflow: hidden; }
        .profile-view { background: var(--profile-bg); z-index: 50; }
        .notif-view { background: #f3f6f5; z-index: 50; }
        .edit-profile-view { background: var(--profile-bg); z-index: 60; }
        .contact-form-view { background: var(--white); z-index: 62; }
        .contact-details-view { background: #f3f6f5; z-index: 61; }
        .filter-view { background: #f3f6f5; z-index: 60; }
        .location-view.active, .edit-address-view.active, .full-map-view.active,
        .profile-view.active, .notif-view.active, .edit-profile-view.active, .contact-form-view.active,
        .contact-details-view.active, .filter-view.active { transform: translateX(0); opacity: 1; pointer-events: auto; }

        .loc-header-nav { display: flex; align-items: center; padding: 40px 20px 20px; gap: 16px; }
        .loc-header-nav .back-btn { font-size: 20px; color: var(--text-dark); cursor: pointer; padding: 8px 8px 8px 0; }
        .loc-header-nav h2 { font-size: 18px; font-weight: 800; color: var(--text-dark); }
        .profile-header { display: flex; align-items: center; padding: 40px 20px 20px; gap: 16px; }
        .profile-header .back-btn { font-size: 20px; color: var(--text-dark); cursor: pointer; padding: 8px; }
        .profile-header h2 { font-size: 20px; font-weight: 800; color: var(--text-dark); }
        .profile-scroll { flex: 1; overflow-y: auto; padding: 0 20px 40px; }
        .profile-scroll::-webkit-scrollbar { display: none; }

        /* Loader spinner */
        @keyframes spin { to { transform: rotate(360deg); } }
        .pm-loader { display: flex; justify-content: center; padding: 40px; }
        .pm-loader::after {
            content: ''; width: 32px; height: 32px; border-radius: 50%;
            border: 3px solid #e8edea; border-top-color: var(--blue);
            animation: spin 0.7s linear infinite;
        }

        /* =========================================
           CALENDAR UI
           ========================================= */
        .pm-calendar-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 20px; font-weight: 800; font-size: 18px;
        }
        .pm-calendar-grid {
            display: grid; grid-template-columns: repeat(7, 1fr);
            gap: 5px; padding: 10px 20px; text-align: center;
        }
        .pm-calendar-day-header {
            font-size: 12px; font-weight: 700; color: #8e9e97; margin-bottom: 5px;
        }
        .pm-calendar-day {
            aspect-ratio: 1; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; padding-top: 10px;
            border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
            transition: all 0.2s; position: relative; color: var(--text-dark);
        }
        .pm-calendar-day.active { border: 2px solid #7cb5ec; }
        .pm-calendar-day.has-events::after {
            content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px;
            background: var(--accent); border-radius: 50%;
        }
        .pm-agenda-view {
            padding: 20px; border-top: 1px solid #e8edea;
            flex: 1; overflow-y: auto; background: #fafcfa;
        }
        .pm-agenda-date {
            font-size: 16px; font-weight: 800; margin-bottom: 15px; color: var(--text-dark); display:flex; justify-content: space-between; align-items:center;
        }
        .pm-event-card {
            background: white; border-radius: 12px; padding: 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.03); margin-bottom: 12px;
            border-left: 4px solid #7cb5ec; /* Lighter blue like Samsung */
            display: flex; flex-direction: column; gap: 8px;
        }
        .pm-event-time { font-size: 13px; font-weight: 700; color: #7cb5ec; width: 60px; flex-shrink: 0; }
        .pm-event-title { font-size: 15px; font-weight: 700; color: var(--text-dark); }
        .pm-event-meta { font-size: 12px; color: #8e9e97; display: flex; gap: 10px; align-items: center; }
        
        .pm-event-row {
            display: flex; gap: 15px; align-items: flex-start;
        }
        
        .pm-event-body {
            flex: 1;
            background: #e1f0fc; /* Light blue background for event block */
            border-radius: 6px;
            padding: 10px;
        }

        /* Calendar Sidebar */
        .cal-sidebar-item {
            padding: 14px 24px;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-dark);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: background 0.2s;
            border-radius: 0 30px 30px 0;
            margin-right: 20px;
        }
        .cal-sidebar-item:hover {
            background: #f0f4f2;
        }
        .cal-sidebar-item.cal-sidebar-active {
            background: #e8f5e9;
            color: var(--accent);
            font-weight: 700;
        }
        .cal-sidebar-item i {
            width: 20px;
            text-align: center;
            font-size: 16px;
        }

        /* ============================================
           RESPONSIVE MOBILE STYLES
           ============================================ */
        @media (max-width: 600px) {
            body {
                background-color: var(--bg-main);
                align-items: flex-start; /* So it doesn't try to vertically center when keyboard opens */
            }
            .device {
                max-width: 100%;
                width: 100vw;
                height: 100dvh;
                border-radius: 0;
                box-shadow: none;
                border: none;
            }
            /* Adjust overlays to also be full screen without rounded corners on mobile */
            .location-view, .edit-address-view, .full-map-view, .profile-view, .notif-view, .edit-profile-view, .contact-form-view, .contact-details-view, .filter-view, .pm-form-view, .task-detail-view {
                border-radius: 0;
            }
        }