/* ═══════════════════════════════════════════════ PM COMMAND CENTER — Design System v8 ═══════════════════════════════════════════════ */ /* ── SVG Icon Utilities ─────────────────────── */ .icon{display:inline-block;vertical-align:middle;flex-shrink:0;} .icon-10{width:10px;height:10px;} .icon-11{width:11px;height:11px;} .icon-12{width:12px;height:12px;} .icon-13{width:13px;height:13px;} .icon-14{width:14px;height:14px;} .icon-15{width:15px;height:15px;} .icon-16{width:16px;height:16px;} .icon-17{width:17px;height:17px;} .icon-20{width:20px;height:20px;} .icon-21{width:21px;height:21px;} .icon-22{width:22px;height:22px;} .icon-28{width:28px;height:28px;} .icon-30{width:30px;height:30px;} :root{ /* Core palette */ --bg:#f1f5f9; --surface:#ffffff; --card:#ffffff; --border:#e2e8f0; --border-light:#f1f5f9; --bg-input:#f8fafc; --bg-hover:#f8fafc; --bg-overlay:rgba(15,23,42,.5); --sidebar-bg:#0f172a; --sidebar-border:rgba(99,102,241,.4); /* Brand */ --accent:#4f46e5; --accent-light:#ede9fe; --accent2:#0ea5e9; --accent2-light:#e0f2fe; /* Semantic */ --green:#10b981; --green-light:#d1fae5; --yellow:#f59e0b; --yellow-light:#fef3c7; --red:#ef4444; --red-light:#fee2e2; --purple:#8b5cf6; --purple-light:#ede9fe; --orange:#f97316; --orange-light:#ffedd5; --teal:#14b8a6; --teal-light:#ccfbf1; --pink:#ec4899; --pink-light:#fce7f3; /* Text */ --text:#0f172a; --text-2:#334155; --muted:#64748b; --muted-light:#94a3b8; /* Elevation */ --shadow-xs:0 1px 2px rgba(15,23,42,.05); --shadow-sm:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04); --shadow-md:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04); --shadow-lg:0 10px 32px rgba(15,23,42,.10),0 4px 8px rgba(15,23,42,.06); --shadow-xl:0 20px 60px rgba(15,23,42,.14),0 8px 16px rgba(15,23,42,.06); /* Typography */ --font:'Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono','Fira Code',monospace; /* Radius */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; } /* ── Dark Theme ── */ [data-theme="dark"]{ /* Layered dark surfaces — clear hierarchy */ --bg:#111827; --surface:#1f2937; --card:#1f2937; --border:#374151; --border-light:#1f2937; --bg-input:#111827; --bg-hover:rgba(255,255,255,.06); --bg-overlay:rgba(0,0,0,.65); --sidebar-bg:#0c1222; --sidebar-border:rgba(129,140,248,.25); /* Brighter accent for dark bg */ --accent:#a5b4fc; --accent-light:rgba(165,180,252,.12); --accent2:#67e8f9; --accent2-light:rgba(103,232,249,.12); /* Vivid semantic — high contrast on dark */ --green:#6ee7b7; --green-light:rgba(110,231,183,.12); --yellow:#fde68a; --yellow-light:rgba(253,230,138,.10); --red:#fca5a5; --red-light:rgba(252,165,165,.10); --purple:#c4b5fd; --purple-light:rgba(196,181,253,.10); --orange:#fdba74; --orange-light:rgba(253,186,116,.10); --teal:#5eead4; --teal-light:rgba(94,234,212,.10); --pink:#f9a8d4; --pink-light:rgba(249,168,212,.10); /* High-contrast text */ --text:#f1f5f9; --text-2:#e2e8f0; --muted:#9ca3af; --muted-light:#6b7280; /* Subtle glow shadows */ --shadow-xs:0 1px 3px rgba(0,0,0,.35); --shadow-sm:0 2px 6px rgba(0,0,0,.35); --shadow-md:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 10px 40px rgba(0,0,0,.5); --shadow-xl:0 24px 64px rgba(0,0,0,.6); } /* ── Reset & Base ── */ *{margin:0;padding:0;box-sizing:border-box;} html{-webkit-font-smoothing:antialiased;} body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;font-size:14px;line-height:1.5;} /* ── Loading ── */ .loading{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;z-index:999;} .spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;} @keyframes spin{to{transform:rotate(360deg)}} .loading-text{font-size:13px;color:var(--muted);font-family:var(--mono);letter-spacing:.03em;} .nav-hidden{display:none!important;} .spinner-sm{width:16px;height:16px;border-width:2px;} /* ══════════════════════════════════════════════ LOGIN PAGE ═══════════════════════════════════════════════ */ #loginScreen{display:none;min-height:100vh;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 40%,#312e81 100%);align-items:center;justify-content:center;position:relative;overflow:hidden;} #loginScreen::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234f46e5' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none;} .login-wrap{width:440px;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;z-index:1;} @keyframes fadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}} .login-brand{text-align:center;margin-bottom:36px;} .login-logo{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 16px;box-shadow:0 8px 32px rgba(99,102,241,.4);} .login-title{font-size:26px;font-weight:700;color:#f8fafc;letter-spacing:-.5px;} .login-sub{font-size:13px;color:rgba(248,250,252,.5);margin-top:5px;} .login-card{background:rgba(255,255,255,.97);border-radius:20px;padding:36px;box-shadow:var(--shadow-xl);} .login-card-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:24px;} .login-error{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;padding:10px 14px;font-size:12.5px;color:var(--red);margin-bottom:16px;display:none;align-items:center;gap:8px;} .login-error.show{display:flex;} .demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} .demo-acc{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:10px 8px;cursor:pointer;transition:all .2s;text-align:center;} .demo-acc:hover{border-color:var(--accent);background:var(--accent-light);} .demo-role{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px;} .demo-name{font-size:11px;color:var(--text);margin-bottom:2px;font-weight:600;} .demo-cred{font-size:10px;color:var(--muted);font-family:var(--mono);} /* ══════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════ */ .form-group{margin-bottom:16px;} .form-label{font-size:11px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;display:block;} .form-input,.form-select,.form-textarea{width:100%;background:#f8fafc;border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13px;padding:9px 12px;outline:none;transition:all .2s;} .form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.1);} .form-input::placeholder,.form-textarea::placeholder{color:var(--muted-light);} .form-select option{background:#fff;} .form-textarea{min-height:72px;resize:vertical;} /* ══ MULTI-SELECT ASSIGNEE ═══════════════════════════════════ */ .assignee-multi-wrap{position:relative;} .assignee-tags{min-height:38px;background:#f8fafc;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:5px 8px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;cursor:pointer;transition:all .2s;} .assignee-tags:focus-within,.assignee-tags.open{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.1);} .assignee-tag{display:inline-flex;align-items:center;gap:4px;background:#ede9fe;color:#6d28d9;border:1px solid #c4b5fd;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600;} .assignee-tag .tag-remove{cursor:pointer;color:#8b5cf6;line-height:1;font-size:13px;background:none;border:none;padding:0;} .assignee-tag .tag-remove:hover{color:#6d28d9;} .assignee-placeholder{font-size:13px;color:var(--muted-light);} .assignee-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid var(--accent);border-radius:var(--r-sm);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:9999;max-height:200px;overflow-y:auto;display:none;} .assignee-dropdown.open{display:block;} .assignee-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px;cursor:pointer;transition:background .12s;} .assignee-dropdown-item:hover{background:#f5f3ff;} .assignee-dropdown-item.selected{background:#ede9fe;color:#6d28d9;font-weight:600;} .assignee-dropdown-item .item-check{width:14px;height:14px;border:1.5px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .assignee-dropdown-item.selected .item-check{background:var(--accent);border-color:var(--accent);color:#fff;} /* ══ DATE INPUT STYLING ══════════════════════════════════════ */ .date-wrap{position:relative;display:block;} .date-wrap .form-input[type="date"]{padding-left:36px;cursor:pointer;color:var(--text);} .date-wrap .form-input[type="date"]::-webkit-calendar-picker-indicator{ opacity:0;position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;} .date-wrap .date-icon{ position:absolute;left:11px;top:50%;transform:translateY(-50%); color:var(--muted);pointer-events:none;display:flex;align-items:center;} .form-input[type="date"]:not(.date-wrap .form-input){ appearance:none;-webkit-appearance:none;cursor:pointer;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .form-hint{font-size:10.5px;color:var(--muted);margin-top:4px;} .input-wrap{position:relative;} .input-wrap .form-input{padding-left:40px;} .input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none;} /* ══════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════ */ .btn{padding:8px 16px;border-radius:var(--r-sm);border:none;font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;justify-content:center;gap:5px;letter-spacing:.01em;} .btn:active{transform:scale(.97);} .btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.3);} .btn-primary:hover{background:#4338ca;box-shadow:0 4px 14px rgba(79,70,229,.4);} .btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--border);} .btn-ghost:hover{color:var(--text);border-color:var(--accent);background:var(--accent-light);} .btn-danger{background:transparent;color:var(--red);border:1.5px solid #fca5a5;} .btn-danger:hover{background:var(--red-light);} .btn-warning{background:transparent;color:#d97706;border:1.5px solid #fcd34d;} .btn-warning:hover{background:var(--yellow-light);} .btn-teal{background:transparent;color:var(--teal);border:1.5px solid #99f6e4;} .btn-teal:hover{background:var(--teal-light);} .btn-purple{background:transparent;color:var(--purple);border:1.5px solid #c4b5fd;} .btn-purple:hover{background:var(--purple-light);} .btn-sm{padding:4px 10px;font-size:11px;border-radius:5px;} .btn-full{width:100%;padding:12px;} /* ══════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════ */ .app{display:flex;height:100vh;overflow:hidden;} /* ── Sidebar ── */ .sidebar{width:230px;background:#0f172a;display:flex;flex-direction:column;padding:0;flex-shrink:0;position:relative;} .sidebar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(99,102,241,.4),transparent);} .logo{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.06);} .logo-icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:10px;} .logo-text{font-size:14px;font-weight:700;color:#f1f5f9;letter-spacing:-.3px;} .logo-sub{font-size:10px;color:rgba(241,245,249,.35);font-family:var(--mono);margin-top:2px;} .nav{padding:12px 10px;flex:1;overflow-y:auto;} .nav-group{margin-bottom:2px;} /* Accordion toggle header */ .nav-group-toggle{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;cursor:pointer;border-radius:6px;transition:background .15s;user-select:none;} .nav-group-toggle:hover{background:rgba(255,255,255,.05);} .nav-group-toggle span{font-size:9.5px;font-weight:700;color:rgba(241,245,249,.35);text-transform:uppercase;letter-spacing:1px;} .nav-chevron{color:rgba(241,245,249,.25);transition:transform .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;} .nav-group.open .nav-chevron{transform:rotate(180deg);} /* Collapsible items container */ .nav-group-items{overflow:hidden;max-height:0;transition:max-height .28s cubic-bezier(.4,0,.2,1);} .nav-group.open .nav-group-items{max-height:600px;} .nav-item{display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer;color:rgba(241,245,249,.55);font-size:12.5px;font-weight:500;transition:all .18s;border-radius:8px;margin-bottom:1px;position:relative;} .nav-item:hover{color:#f1f5f9;background:rgba(255,255,255,.07);} .nav-item.active{color:#fff;background:linear-gradient(90deg,rgba(99,102,241,.25),rgba(99,102,241,.08));} .nav-item.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#818cf8,#6366f1);} .nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;} .nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;} .sidebar-user{padding:14px 16px;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.02);} .s-avatar{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 2px 6px rgba(79,70,229,.4);} .s-info{flex:1;min-width:0;} .s-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f1f5f9;} .s-role{font-size:10px;color:rgba(241,245,249,.4);margin-top:1px;} .logout-btn{background:none;border:none;cursor:pointer;color:rgba(241,245,249,.35);font-size:15px;padding:4px;border-radius:6px;transition:all .2s;flex-shrink:0;} .logout-btn:hover{color:var(--red);background:rgba(239,68,68,.1);} /* ── Main area ── */ .main{flex:1;display:flex;flex-direction:column;overflow:hidden;} .topbar{background:#fff;border-bottom:1px solid var(--border);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:var(--shadow-xs);} .topbar-left{display:flex;align-items:center;gap:14px;} .page-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.3px;} .page-sub{font-size:12px;color:var(--muted);border-left:1px solid var(--border);padding-left:12px;display:none;} .topbar-right{display:flex;gap:6px;align-items:center;} .topbar-date{font-size:11px;color:var(--muted);font-family:var(--mono);background:var(--bg);padding:4px 10px;border-radius:20px;border:1px solid var(--border);margin-right:4px;} .content{flex:1;overflow-y:auto;padding:24px 26px;} .content::-webkit-scrollbar{width:5px;} .content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;} .content::-webkit-scrollbar-track{background:transparent;} .page{display:none;} /* AI page fills full content height */ .content.ai-active{overflow:hidden;padding:0;display:flex;flex-direction:column;} .content.ai-active #page-ai{display:flex;flex-direction:column;flex:1;min-height:0;padding:20px;} .content.ai-active #page-ai .ai-panel{flex:1;min-height:0;} .page.active{display:block;animation:pageIn .2s ease both;} @keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ── Section header ── */ .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;} .section-heading{font-size:14px;font-weight:700;color:var(--text);} .section-sub{font-size:12px;color:var(--muted);margin-top:2px;} .section-title{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;display:flex;align-items:center;gap:8px;} .section-title::after{content:'';flex:1;height:1px;background:var(--border);} /* ══════════════════════════════════════════════ TOOLBAR / FILTERS ═══════════════════════════════════════════════ */ .toolbar{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap;} .search-box{position:relative;flex:1;min-width:180px;} .search-input{width:100%;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13px;padding:8px 12px 8px 34px;outline:none;transition:all .2s;} .search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.1);} .search-input::placeholder{color:var(--muted-light);} .search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none;} .filter-select{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:12.5px;padding:8px 12px;outline:none;cursor:pointer;transition:border-color .2s;} .filter-select:focus{border-color:var(--accent);} .filter-select option{background:#fff;} .result-count{font-size:11px;color:var(--muted);font-family:var(--mono);white-space:nowrap;background:var(--bg);padding:4px 10px;border-radius:20px;border:1px solid var(--border);} /* ══════════════════════════════════════════════ KPI CARDS ═══════════════════════════════════════════════ */ .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;} .kpi-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:all .2s;} .kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);} .kpi-card-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;flex-shrink:0;} .kpi-card.blue .kpi-card-icon{background:var(--accent-light);color:var(--accent);} .kpi-card.green .kpi-card-icon{background:var(--green-light);color:var(--green);} .kpi-card.yellow .kpi-card-icon{background:var(--yellow-light);color:#d97706;} .kpi-card.red .kpi-card-icon{background:var(--red-light);color:var(--red);} .kpi-card.purple .kpi-card-icon{background:var(--purple-light);color:var(--purple);} .kpi-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px;} .kpi-val{font-size:32px;font-weight:700;font-family:var(--mono);color:var(--text);line-height:1;margin-bottom:6px;} .kpi-sub{font-size:12px;color:var(--muted);} .kpi-trend{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;margin-top:6px;} .kpi-trend.up{background:var(--green-light);color:var(--green);} .kpi-trend.down{background:var(--red-light);color:var(--red);} .kpi-trend.neutral{background:var(--bg);color:var(--muted);} .kpi-bar{position:absolute;bottom:0;left:0;right:0;height:3px;} .kpi-card.blue .kpi-bar{background:linear-gradient(90deg,var(--accent),#818cf8);} .kpi-card.green .kpi-bar{background:linear-gradient(90deg,var(--green),var(--teal));} .kpi-card.yellow .kpi-bar{background:linear-gradient(90deg,var(--yellow),var(--orange));} .kpi-card.red .kpi-bar{background:linear-gradient(90deg,var(--red),var(--pink));} .kpi-card.purple .kpi-bar{background:linear-gradient(90deg,var(--purple),#ec4899);} /* ══════════════════════════════════════════════ DASHBOARD LAYOUT ═══════════════════════════════════════════════ */ .dash-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;} .dash-grid-70-30{display:grid;grid-template-columns:1fr 360px;gap:16px;margin-bottom:18px;} .dash-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px;} .chart-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);} .chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;} .chart-title{font-size:13px;font-weight:700;color:var(--text);} .chart-subtitle{font-size:11px;color:var(--muted);font-weight:400;margin-top:2px;} .chart-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;} .deadline-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-light);} .deadline-item:last-child{border-bottom:none;} .deadline-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .deadline-name{font-size:12.5px;font-weight:500;flex:1;} .deadline-pm{font-size:10.5px;color:var(--muted);} .deadline-days{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;} /* ── Summary strip ── */ .summary-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:22px;} .strip-item{background:#fff;padding:14px 18px;text-align:center;} .strip-val{font-size:22px;font-weight:700;font-family:var(--mono);color:var(--text);} .strip-label{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px;margin-top:3px;} /* ══════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════ */ .table-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow-xs);} table{width:100%;border-collapse:collapse;font-size:13px;} thead th{background:#f8fafc;padding:11px 14px;text-align:left;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border);white-space:nowrap;} td{padding:11px 14px;border-bottom:1px solid var(--border-light);vertical-align:middle;} tr:last-child td{border-bottom:none;} tbody tr{transition:background .12s;} tbody tr:hover td{background:#f8fafc;} .empty-row td{text-align:center;color:var(--muted);padding:36px;font-size:13px;} .table-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--muted);font-size:13px;} .td-primary{font-size:13px;font-weight:500;color:var(--text);line-height:1.4;} .td-sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.3;} .td-meta{font-size:12px;color:var(--text-2);} .row-muted td{opacity:.55;} .text-red{color:var(--red);font-weight:600;} /* ══════════════════════════════════════════════ BADGES & CHIPS ═══════════════════════════════════════════════ */ .badge{padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;display:inline-block;white-space:nowrap;} .badge-green{background:#dcfce7;color:#15803d;} .badge-blue{background:#dbeafe;color:#1d4ed8;} .badge-yellow{background:#fef3c7;color:#b45309;} .badge-red{background:#fee2e2;color:#b91c1c;} .badge-purple{background:#ede9fe;color:#6d28d9;} .badge-gray{background:#f1f5f9;color:#475569;} .badge-teal{background:#ccfbf1;color:#0f766e;} .badge-orange{background:#ffedd5;color:#c2410c;} .person-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:500;white-space:nowrap;} .person-chip.pm{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;} .person-chip.pmo{background:#f0fdfa;color:#0f766e;border:1px solid #99f6e4;} .chip-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.65;} .skill-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:600;background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd;margin:2px;} .skill-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;} .action-cell{display:flex;gap:4px;flex-wrap:nowrap;} .result-count-inline{font-size:11px;color:var(--muted);font-family:var(--mono);} /* ══════════════════════════════════════════════ PROGRESS ═══════════════════════════════════════════════ */ .progress-row{display:flex;align-items:center;gap:8px;} .progress-bar{background:var(--border);border-radius:4px;height:6px;overflow:hidden;flex:1;min-width:70px;} .progress-fill{height:100%;border-radius:4px;transition:width .5s ease;} .progress-pct{font-size:11px;font-family:var(--mono);color:var(--muted);width:32px;text-align:right;font-weight:600;} /* ══════════════════════════════════════════════ ACCESS BANNER ═══════════════════════════════════════════════ */ .access-banner{border-radius:var(--r-md);padding:11px 16px;font-size:12.5px;margin-bottom:18px;display:flex;align-items:center;gap:8px;} .access-banner.full{background:var(--green-light);border:1px solid var(--green);color:var(--green);} .access-banner.limited{background:var(--yellow-light);border:1px solid var(--yellow);color:var(--yellow);} /* ══════════════════════════════════════════════ KANBAN ═══════════════════════════════════════════════ */ .kanban-controls{display:flex;gap:8px;margin-bottom:16px;align-items:center;flex-wrap:wrap;} .kanban{display:flex;flex-direction:column;gap:0;margin-bottom:22px;} .kanban-project-block{margin-bottom:26px;} .kanban-project-card{background:linear-gradient(135deg,#f8faff 0%,#f0f4ff 100%);border:1.5px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:2px solid var(--accent2);padding:15px 20px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;} .kanban-project-card-main{flex:1;min-width:0;} .kanban-project-card-title{font-size:14px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;} .kanban-project-card-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:11.5px;color:var(--muted);} .kanban-project-card-meta span{display:flex;align-items:center;gap:4px;} .kanban-project-progress{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:120px;padding-top:2px;} .kanban-progress-bar{width:120px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;} .kanban-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#3b82f6,#14b8a6);} .kanban-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#fff;border:1.5px solid var(--border);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);padding:14px;} .kanban-col{background:#f8fafc;border:1px solid var(--border);border-radius:var(--r-md);padding:14px;min-height:200px;} .kanban-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border);} .kanban-title{font-size:12.5px;font-weight:700;} .kanban-count{background:#fff;color:var(--muted);font-size:11px;font-family:var(--mono);padding:2px 8px;border-radius:10px;border:1px solid var(--border);font-weight:700;} .task-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:13px;margin-bottom:10px;transition:all .18s;box-shadow:var(--shadow-xs);} .task-card:hover{border-color:rgba(79,70,229,.3);transform:translateY(-2px);box-shadow:var(--shadow-md);} /* Overdue task card */ .task-card.task-card-overdue{border-color:#fca5a5;background:linear-gradient(135deg,#fff5f5,#fff);box-shadow:0 0 0 1px rgba(239,68,68,.1),var(--shadow-xs);} .task-card.task-card-overdue:hover{border-color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.15),var(--shadow-md);} .overdue-badge{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;color:#dc2626;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);padding:1px 7px;border-radius:10px;white-space:nowrap;animation:overduePulse 2s ease-in-out infinite;} @keyframes overduePulse{0%,100%{opacity:1}50%{opacity:.7}} .task-dates.overdue-date{color:#dc2626;} .task-dates.overdue-date svg{color:#dc2626;} .overdue-days{font-weight:600;color:#dc2626;} [data-theme="dark"] .task-card.task-card-overdue{background:linear-gradient(135deg,rgba(239,68,68,.08),var(--card));border-color:rgba(252,165,165,.3);} [data-theme="dark"] .task-card.task-card-overdue:hover{border-color:rgba(252,165,165,.5);} [data-theme="dark"] .overdue-badge{color:#fca5a5;background:rgba(239,68,68,.15);border-color:rgba(252,165,165,.3);} [data-theme="dark"] .task-dates.overdue-date{color:#fca5a5;} [data-theme="dark"] .task-dates.overdue-date svg{color:#fca5a5;} [data-theme="dark"] .overdue-days{color:#fca5a5;} .task-title{font-size:12.5px;font-weight:600;margin-bottom:8px;line-height:1.4;color:var(--text);} .task-meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;} .task-proj{font-size:10.5px;color:var(--accent2);font-weight:500;} .task-dates{font-size:10.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:4px;} .task-actions{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap;} .task-assignee{display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border-light);} .task-avatar{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;} .task-assignee-name{font-size:11px;font-weight:500;color:var(--text-2);} /* ══════════════════════════════════════════════ TEAM ═══════════════════════════════════════════════ */ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px;} .team-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;cursor:pointer;transition:all .18s;box-shadow:var(--shadow-sm);} .team-card:hover{border-color:rgba(79,70,229,.3);transform:translateY(-3px);box-shadow:var(--shadow-md);} .team-card-header{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;} .team-avatar{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 3px 10px rgba(79,70,229,.25);} .team-name{font-size:14px;font-weight:700;color:var(--text);} .team-role{font-size:11.5px;color:var(--muted);margin-top:2px;} .team-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light);} .team-stat{text-align:center;padding:8px 4px;background:var(--bg);border-radius:8px;} .team-stat-val{font-size:20px;font-weight:700;font-family:var(--mono);} .team-stat-label{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:2px;} .team-cap-bar{margin-top:12px;} .team-cap-label{font-size:11px;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between;font-weight:500;} .team-score-row{display:flex;align-items:center;gap:7px;margin-top:10px;} .team-score-stars{display:flex;gap:2px;} .team-score-val{font-size:12px;font-weight:700;font-family:var(--mono);} .team-score-label{font-size:10.5px;color:var(--muted);} /* ══════════════════════════════════════════════ STARS & SCORES ═══════════════════════════════════════════════ */ .stars{display:inline-flex;gap:2px;} .star{font-size:13px;} .star.on{color:#f59e0b;} .star.off{color:#e2e8f0;} .score-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;} .score-pill.s5{background:#d1fae5;color:#065f46;} .score-pill.s4{background:#dbeafe;color:#1d4ed8;} .score-pill.s3{background:#fef3c7;color:#92400e;} .score-pill.s2{background:#ffedd5;color:#c2410c;} .score-pill.s1{background:#fee2e2;color:#b91c1c;} /* ══════════════════════════════════════════════ EVAL CARDS ═══════════════════════════════════════════════ */ .eval-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:14px;margin-bottom:10px;box-shadow:var(--shadow-xs);} .eval-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px;} .eval-category{font-size:12.5px;font-weight:700;color:var(--text);} .eval-meta{font-size:10.5px;color:var(--muted);margin-top:4px;font-family:var(--mono);} .eval-notes{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5;font-style:italic;border-top:1px solid var(--border-light);padding-top:6px;} .eval-actions{display:flex;gap:4px;margin-top:8px;justify-content:flex-end;} .appraisal-summary{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;margin-bottom:16px;} .appraisal-title{font-size:12.5px;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;} .appraisal-avg{font-size:24px;font-weight:700;font-family:var(--mono);color:var(--accent);} .cat-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;} .cat-bar-label{font-size:11px;color:var(--muted);width:130px;flex-shrink:0;} .cat-bar-track{flex:1;background:#e2e8f0;border-radius:4px;height:7px;overflow:hidden;} .cat-bar-fill{height:100%;border-radius:4px;} .cat-bar-val{font-size:11px;font-family:var(--mono);font-weight:700;width:28px;text-align:right;color:var(--text);} /* ══════════════════════════════════════════════ SCORE PICKER ═══════════════════════════════════════════════ */ .score-picker{display:flex;gap:8px;margin-top:8px;} .score-btn{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--border);background:#f8fafc;color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;} .score-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);} .score-btn.selected{border-color:#f59e0b;background:#fef3c7;color:#b45309;} .score-labels{display:flex;gap:8px;margin-top:5px;} .score-label-item{width:40px;font-size:9.5px;color:var(--muted);text-align:center;} /* ══════════════════════════════════════════════ TOAST ═══════════════════════════════════════════════ */ .toast{position:fixed;bottom:24px;right:24px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 18px;font-size:13px;display:flex;align-items:center;gap:9px;z-index:300;transform:translateY(80px);opacity:0;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg);min-width:220px;} .toast.show{transform:translateY(0);opacity:1;} .toast.success{border-color:#86efac;color:#15803d;background:#f0fdf4;} .toast.error{border-color:#fca5a5;color:#b91c1c;background:#fef2f2;} /* ══════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════ */ .modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;} .modal-overlay.open{display:flex;} .modal{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:modalIn .2s cubic-bezier(.16,1,.3,1);} /* Type tab buttons in task modal */ .type-tab{padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:#fff;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;font-family:var(--font);} .type-tab:hover{border-color:var(--accent);color:var(--accent);} .type-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.3);} #typeTab-Epic.active{background:#6d28d9;border-color:#6d28d9;} #typeTab-Subtask.active{background:#059669;border-color:#059669;} @keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}} .modal-wide{width:680px;} .modal-title{font-size:16px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px;color:var(--text);} .modal-actions{display:flex;gap:8px;margin-top:20px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border-light);} .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;} .modal-header .modal-title{margin-bottom:0;} .modal-body{margin-bottom:0;} .modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light);} .modal-close{background:none;border:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-sm);transition:all .12s;flex-shrink:0;padding:0;} .modal-close:hover{background:var(--bg-hover);color:var(--text);} .confirm-box{background:#fff;border-radius:var(--r-xl);padding:32px;width:380px;text-align:center;box-shadow:var(--shadow-xl);} .confirm-icon{font-size:40px;margin-bottom:12px;} .confirm-title{font-size:16px;font-weight:700;margin-bottom:8px;} .confirm-msg{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.6;} .confirm-actions{display:flex;gap:8px;justify-content:center;} /* ══════════════════════════════════════════════ DRAWER ═══════════════════════════════════════════════ */ .drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(3px);display:none;z-index:90;} .drawer-overlay.open{display:block;} .drawer{position:fixed;top:0;right:0;width:540px;height:100vh;background:#fff;border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:91;transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:-8px 0 32px rgba(15,23,42,.08);} .drawer.open{transform:translateX(0);} .drawer-header{padding:22px 24px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px;} .drawer-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:4px 6px;margin-left:auto;transition:all .2s;flex-shrink:0;border-radius:8px;} .drawer-close:hover{color:var(--text);background:var(--bg);} .drawer-body{flex:1;overflow-y:auto;padding:22px 24px;} .drawer-body::-webkit-scrollbar{width:4px;} .drawer-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px;} .drawer-section{margin-bottom:24px;} .drawer-section-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:6px;} .detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-light);} .detail-row:last-child{border-bottom:none;} .detail-label{font-size:12.5px;color:var(--muted);} .detail-value{font-size:12.5px;font-weight:600;text-align:right;color:var(--text);} .drawer-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;} .drawer-tab{padding:10px 18px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--muted);border-bottom:2.5px solid transparent;transition:all .18s;white-space:nowrap;} .drawer-tab.active{color:var(--accent);border-bottom-color:var(--accent);} .drawer-tab:hover{color:var(--text);} .tab-content{display:none;} .tab-content.active{display:block;animation:pageIn .15s ease both;} .pm-pmo-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;} .pm-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;} .pm-card-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;} .pm-card.is-pm .pm-card-type{color:var(--purple);} .pm-card.is-pmo .pm-card-type{color:var(--teal);} .pm-avatar-sm{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;margin-bottom:9px;} .pm-card.is-pm .pm-avatar-sm{background:linear-gradient(135deg,var(--purple),var(--accent));} .pm-card.is-pmo .pm-avatar-sm{background:linear-gradient(135deg,var(--teal),var(--accent2));} .pm-name{font-size:13px;font-weight:700;} .pm-role{font-size:11px;color:var(--muted);} .mini-task-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px 13px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:all .15s;} .mini-task-item:hover{border-color:rgba(79,70,229,.25);background:#f5f3ff;} .mini-task-title{font-size:12.5px;font-weight:500;flex:1;} .mini-task-meta{display:flex;gap:5px;align-items:center;flex-shrink:0;} .mini-risk-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 13px;margin-bottom:8px;} .mini-risk-title{font-size:12.5px;font-weight:500;margin-bottom:5px;} .mini-risk-meta{display:flex;gap:5px;flex-wrap:wrap;} /* ── Team member drawer ── */ .member-proj-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;margin-bottom:10px;transition:all .15s;} .member-proj-card:hover{border-color:rgba(79,70,229,.25);} .member-proj-title{font-size:12.5px;font-weight:700;margin-bottom:7px;} .member-proj-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;} .member-task-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;transition:all .15s;} .member-task-row:hover{border-color:rgba(79,70,229,.25);background:#f5f3ff;} .member-task-title{font-size:12px;font-weight:500;flex:1;} .member-task-meta{display:flex;gap:5px;align-items:center;flex-shrink:0;} /* ══════════════════════════════════════════════ TASK HISTORY / TIMELINE ═══════════════════════════════════════════════ */ .history-form{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;margin-bottom:20px;} .history-form-title{font-size:12.5px;font-weight:700;margin-bottom:14px;color:var(--accent2);} .timeline{position:relative;padding-left:2px;} .timeline::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),transparent);} .timeline-item{position:relative;padding-left:38px;margin-bottom:20px;} .timeline-dot{position:absolute;left:7px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fff;z-index:1;box-shadow:0 0 0 2px var(--accent);} .timeline-dot.has-obstacle{background:var(--yellow);box-shadow:0 0 0 2px var(--yellow);} .timeline-date{font-size:10.5px;color:var(--muted);font-family:var(--mono);margin-bottom:6px;font-weight:500;} .timeline-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow-xs);} .timeline-update{font-size:12.5px;line-height:1.6;margin-bottom:8px;color:var(--text);} .timeline-by{font-size:10.5px;color:var(--accent2);font-family:var(--mono);font-weight:600;} .obstacle-box,.solution-box{margin-top:10px;padding:9px 12px;border-radius:8px;font-size:12px;line-height:1.5;} .obstacle-box{background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;} .solution-box{background:#f0fdf4;border:1px solid #86efac;color:#15803d;} .obstacle-label,.solution-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;opacity:.75;} .timeline-actions{display:flex;justify-content:flex-end;margin-top:8px;} /* ── Activity Log ────────────────────────────────────────── */ .activity-log-wrap{display:flex;flex-direction:column;gap:0;} .activity-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--bg);} .activity-item:last-child{border-bottom:none;} .activity-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;} .activity-icon.created{background:#dbeafe;color:#1d4ed8;} .activity-icon.updated{background:#fef9c3;color:#854d0e;} .activity-icon.status{background:#dcfce7;color:#15803d;} .activity-icon.comment{background:#ede9fe;color:#6d28d9;} .activity-icon.deleted{background:#fee2e2;color:#b91c1c;} .activity-body{flex:1;min-width:0;} .activity-desc{font-size:12px;line-height:1.5;color:var(--text);} .activity-desc strong{color:var(--accent2);font-weight:600;} .activity-meta{font-size:10.5px;color:var(--muted);margin-top:2px;font-family:var(--mono);} /* ── Project File Upload ─────────────────────────────────── */ .proj-file-zone{border:1.5px dashed #c7d2fe;border-radius:9px;padding:12px 14px;display:flex;align-items:center;gap:9px;cursor:pointer;transition:all .2s;background:#fff;margin-top:4px;} .proj-file-zone:hover,.proj-file-zone.drag-over{border-color:var(--accent);background:#f5f3ff;} .proj-file-zone.has-file{border-style:solid;border-color:#10b981;background:#f0fdf4;} .proj-file-list{margin-top:8px;display:flex;flex-direction:column;gap:5px;} .proj-file-chip{display:flex;align-items:center;gap:7px;background:#f8fafc;border:1px solid var(--border);border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:500;color:var(--text);} .proj-file-chip a{color:var(--accent);text-decoration:none;font-size:11px;margin-left:auto;} .proj-file-chip a:hover{text-decoration:underline;} .proj-file-remove{margin-left:4px;color:var(--muted);cursor:pointer;font-size:12px;background:none;border:none;padding:0 2px;} .no-history{text-align:center;color:var(--muted);font-size:13px;padding:32px;} /* ══════════════════════════════════════════════ AI PANEL ═══════════════════════════════════════════════ */ .ai-panel{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:var(--shadow-sm);} .ai-header{background:linear-gradient(90deg,#f8fafc,#f1f5f9);padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;} .chat-messages{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px;background:#fafafa;min-height:0;} .chat-messages::-webkit-scrollbar{width:5px;} .chat-messages::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;} .msg{display:flex;gap:10px;max-width:88%;} .msg.user{align-self:flex-end;flex-direction:row-reverse;} .msg-bubble{background:#fff;border:1px solid var(--border);border-radius:14px;padding:13px 17px;font-size:13.5px;line-height:1.7;box-shadow:var(--shadow-xs);} .msg.user .msg-bubble{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#bfdbfe;color:#1e3a8a;} .msg-bubble.error-bubble{border-color:#fca5a5;background:#fef2f2;} .error-detail{font-size:11px;color:var(--red);margin-top:7px;font-family:var(--mono);background:#fff;border-radius:6px;padding:7px 9px;line-height:1.5;} .msg-avatar{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-top:3px;background:linear-gradient(135deg,#f0f4ff,#e0e7ff);border:1px solid #c7d2fe;} .msg.user .msg-avatar{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-color:#93c5fd;} .chat-input-row{padding:14px 18px;border-top:1px solid var(--border);display:flex;gap:9px;background:#fff;flex-shrink:0;} .chat-input{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13px;padding:10px 14px;outline:none;resize:none;transition:all .2s;max-height:120px;} .chat-input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.1);} .chat-input::placeholder{color:var(--muted-light);} .quick-prompts{padding:9px 16px;display:flex;flex-wrap:wrap;gap:6px;background:#f8fafc;border-bottom:1px solid var(--border);flex-shrink:0;} .qp{background:#fff;border:1.5px solid var(--border);color:var(--muted);font-size:10.5px;font-weight:500;padding:4px 10px;border-radius:20px;cursor:pointer;transition:all .18s;} .qp:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);} .ai-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:pulse 2s infinite;} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} .api-key-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-bottom:20px;border-top:3px solid var(--accent);box-shadow:var(--shadow-sm);} .api-key-status{font-size:12.5px;margin:8px 0;min-height:18px;} .api-key-status.ok{color:var(--green);} .api-key-status.err{color:var(--red);} .api-key-input-row{display:flex;gap:9px;margin-bottom:8px;} /* ── AI Upload Zone ─────────────────────────────────────── */ .upload-zone-wrap{padding:8px 16px 8px;background:#f8fafc;border-bottom:1px solid var(--border);flex-shrink:0;} .upload-zone{border:1.5px dashed #c7d2fe;border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s;background:#fff;min-height:46px;} .upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:#f5f3ff;} .upload-zone.has-file{border-style:solid;border-color:#10b981;background:#f0fdf4;} .upload-zone-icon{width:30px;height:30px;border-radius:8px;background:#ede9fe;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;} .upload-zone.has-file .upload-zone-icon{background:#dcfce7;} .upload-zone-text{flex:1;min-width:0;} .upload-zone-label{font-size:11.5px;font-weight:600;color:var(--text);} .upload-zone-sub{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .file-ext-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;} .file-ext-badge.pdf{background:#fee2e2;color:#991b1b;} .file-ext-badge.image{background:#fef3c7;color:#92400e;} .file-ext-badge.text{background:#dbeafe;color:#1e40af;} .upload-clear{width:22px;height:22px;border-radius:50%;border:1.5px solid #d1d5db;background:#fff;color:#9ca3af;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;line-height:1;} .upload-clear:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2;} /* ── Role-specific AI quick actions ────────────────────── */ .role-prompts{padding:7px 14px 8px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface);} .role-prompts-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:4px;margin-bottom:6px;} .role-prompts-btns{display:flex;flex-wrap:wrap;gap:5px;} .rqp{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:5px 12px;border-radius:20px;cursor:pointer;border:1.5px solid transparent;transition:all .18s;white-space:nowrap;} .rqp.rqp-product{background:#faf5ff;border-color:#d8b4fe;color:#7c3aed;} .rqp.rqp-product:hover{background:#7c3aed;color:#fff;border-color:#7c3aed;} .rqp.rqp-pm{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8;} .rqp.rqp-pm:hover{background:#1d4ed8;color:#fff;border-color:#1d4ed8;} .rqp.rqp-pmo{background:#f0fdf4;border-color:#86efac;color:#15803d;} .rqp.rqp-pmo:hover{background:#15803d;color:#fff;border-color:#15803d;} /* ── Doc analysis quick prompts ────────────────────────── */ .doc-prompts{padding:7px 14px;background:linear-gradient(90deg,#f5f3ff,#eff6ff);border-bottom:1px solid #e0e7ff;flex-shrink:0;display:none;flex-wrap:wrap;gap:5px;align-items:center;} .doc-prompts.show{display:flex;} .doc-prompts-label{font-size:9.5px;font-weight:700;color:#6366f1;text-transform:uppercase;letter-spacing:.5px;margin-right:2px;white-space:nowrap;} .dqp{background:#fff;border:1.5px solid #c7d2fe;color:#4f46e5;font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;cursor:pointer;transition:all .18s;white-space:nowrap;} .dqp:hover{background:#4f46e5;color:#fff;border-color:#4f46e5;} /* ── Chat file preview chip (in message) ───────────────── */ .file-chip{display:inline-flex;align-items:center;gap:6px;background:#f1f5f9;border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:7px;} .file-chip-icon{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:#e0e7ff;flex-shrink:0;} /* ── Download actions bar ───────────────────────────────── */ .msg-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06);} .dl-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:7px;font-size:10.5px;font-weight:600;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;cursor:pointer;transition:all .15s;} .dl-btn:hover{border-color:var(--accent);color:var(--accent);background:#f5f3ff;} .dl-btn.primary-dl{border-color:#6366f1;color:#6366f1;background:#f5f3ff;} .dl-btn.primary-dl:hover{background:#6366f1;color:#fff;} /* ── AI Tabs ─────────────────────────────────────────────── */ .ai-tab-btns{display:flex;gap:3px;align-items:center;} .ai-tab-btn{padding:4px 10px;border-radius:7px;border:1.5px solid transparent;background:transparent;color:var(--muted);font-size:10.5px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font);white-space:nowrap;} .ai-tab-btn:hover{background:var(--accent-light);color:var(--accent);} .ai-tab-btn.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);} /* ── AI Sub-header (History / Prompts tabs) ─────────────── */ .ai-sub-header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--border);background:#f8fafc;flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--text);} /* ── History list items ─────────────────────────────────── */ .ai-history-item{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;transition:all .15s;display:flex;align-items:flex-start;gap:10px;} .ai-history-item:hover{border-color:var(--accent);box-shadow:var(--shadow-xs);} .ai-history-item-body{flex:1;min-width:0;} .ai-history-item-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;} .ai-history-item-meta{font-size:10.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;} .ai-history-item-del{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;} .ai-history-item-del:hover{border-color:var(--red);color:var(--red);background:#fef2f2;} /* ── Custom Prompt items ────────────────────────────────── */ .ai-prompt-item{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;display:flex;align-items:flex-start;gap:10px;} .ai-prompt-item-body{flex:1;min-width:0;} .ai-prompt-item-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;} .ai-prompt-item-content{font-size:11.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .ai-prompt-item-actions{display:flex;gap:5px;flex-shrink:0;} .ai-prompt-use{padding:4px 12px;border-radius:7px;border:1.5px solid var(--accent);background:var(--accent-light);color:var(--accent);font-size:10.5px;font-weight:600;cursor:pointer;transition:all .15s;} .ai-prompt-use:hover{background:var(--accent);color:#fff;} .ai-prompt-edit{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--muted);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;} .ai-prompt-edit:hover{border-color:var(--accent);color:var(--accent);} .ai-prompt-del{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;} .ai-prompt-del:hover{border-color:var(--red);color:var(--red);background:#fef2f2;} /* ══════════════════════════════════════════════ PROFILE ═══════════════════════════════════════════════ */ .profile-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;max-width:520px;margin-bottom:20px;box-shadow:var(--shadow-sm);} .profile-header{display:flex;gap:18px;align-items:center;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);} .profile-big-avatar{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 4px 16px rgba(79,70,229,.3);} .pw-section{border-top:1px solid var(--border-light);padding-top:20px;margin-top:6px;} .pw-section-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:700;margin-bottom:14px;} /* ══════════════════════════════════════════════ GANTT ═══════════════════════════════════════════════ */ .gantt-project-block{margin-bottom:28px;} .gantt-project-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:2px solid var(--accent2);padding:16px 20px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;} .gantt-project-card-main{flex:1;min-width:0;} .gantt-project-card-title{font-size:15px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;} .gantt-project-card-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:11.5px;color:var(--muted);} .gantt-project-card-meta span{display:flex;align-items:center;gap:4px;} .gantt-project-progress{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:130px;} .gantt-progress-bar{width:130px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;} .gantt-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent2),var(--teal));} .gantt-project-block{margin-bottom:28px;} .gantt-project-card{background:linear-gradient(135deg,#f8faff 0%,#f0f4ff 100%);border:1.5px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:2px solid var(--accent2);padding:16px 22px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;} .gantt-project-card-main{flex:1;min-width:0;} .gantt-project-card-title{font-size:15px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;} .gantt-project-card-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:9px;font-size:11.5px;color:var(--muted);} .gantt-project-card-meta span{display:flex;align-items:center;gap:4px;} .gantt-project-progress{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:130px;padding-top:2px;} .gantt-progress-bar{width:130px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;} .gantt-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#3b82f6,#14b8a6);} .gantt-wrap{background:#fff;border:1.5px solid var(--border);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);} .gantt-header-row{background:#f8fafc;} .gantt-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;} .gantt-proj-title{font-size:14px;font-weight:700;} .gantt-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;} .gantt-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);} .gantt-legend-dot{width:10px;height:10px;border-radius:3px;} .gantt-area{overflow-x:auto;padding:0 0 4px;} .gantt-area::-webkit-scrollbar{height:5px;} .gantt-area::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;} .gantt-table{min-width:100%;border-collapse:collapse;} .gantt-row-label{padding:9px 16px;font-size:11.5px;font-weight:500;white-space:nowrap;min-width:160px;border-right:1px solid var(--border);vertical-align:middle;} .gantt-row-label-sub{font-size:10px;color:var(--muted);margin-top:2px;} .gantt-header-row th{background:#f8fafc;padding:7px 0;font-size:9px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--border);} .gantt-cell{padding:5px 2px;vertical-align:middle;position:relative;} .gantt-bar{height:24px;border-radius:6px;position:relative;min-width:4px;display:flex;align-items:center;padding:0 7px;font-size:10px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;cursor:default;transition:opacity .15s;} .gantt-bar:hover{opacity:.85;} .gantt-bar.todo{background:#94a3b8;} .gantt-bar.inprog{background:linear-gradient(90deg,#3b82f6,#6366f1);} .gantt-bar.done{background:linear-gradient(90deg,#10b981,#14b8a6);} .gantt-bar.overdue{background:linear-gradient(90deg,#ef4444,#f97316);} .gantt-bar.projbar{background:linear-gradient(90deg,#8b5cf6,#ec4899);} .gantt-bar.epicbar{background:linear-gradient(90deg,#6366f1,#8b5cf6);height:20px;border-radius:4px;font-size:9.5px;} .gantt-bar.subtaskbar{height:16px;border-radius:3px;font-size:9px;opacity:.9;} .gantt-no-date{font-size:11px;color:var(--muted);padding:14px 18px;} /* Task type badges */ .type-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px;letter-spacing:.3px;flex-shrink:0;} .type-badge.epic{background:#ede9fe;color:#6d28d9;border:1px solid #c4b5fd;} .type-badge.task{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd;} .type-badge.subtask{background:#f0fdf4;color:#15803d;border:1px solid #86efac;} /* Gantt row styles by type */ .gantt-row-epic{background:rgba(99,102,241,.05);} .gantt-row-subtask{background:rgba(16,185,129,.025);} .gantt-label-epic{padding-left:24px;font-weight:700;font-size:11.5px;color:#6d28d9;} .gantt-label-task-under-epic{padding-left:40px;} .gantt-label-subtask{padding-left:56px;font-size:10.5px;color:var(--muted);} .gantt-collapse-btn{cursor:pointer;font-size:10px;margin-right:4px;transition:transform .15s;display:inline-block;} /* ══════════════════════════════════════════════ AVAILABILITY ═══════════════════════════════════════════════ */ .avail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;} .avail-kpi{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);} .avail-kpi::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;} .avail-kpi.idle::after{background:linear-gradient(90deg,var(--green),var(--teal));} .avail-kpi.busy::after{background:linear-gradient(90deg,var(--red),var(--pink));} .avail-kpi.part::after{background:linear-gradient(90deg,var(--yellow),var(--orange));} .avail-kpi.all::after{background:linear-gradient(90deg,var(--accent),var(--accent2));} .avail-kpi-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:12px;} .avail-kpi.idle .avail-kpi-icon{background:var(--green-light);} .avail-kpi.busy .avail-kpi-icon{background:var(--red-light);} .avail-kpi.part .avail-kpi-icon{background:var(--yellow-light);} .avail-kpi.all .avail-kpi-icon{background:var(--accent-light);} .avail-kpi-label{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.7px;} .avail-kpi-val{font-size:30px;font-weight:700;font-family:var(--mono);margin:4px 0 2px;color:var(--text);} .avail-kpi-sub{font-size:11px;color:var(--muted);} .avail-timeline-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow-sm);} .avail-member-row{display:grid;grid-template-columns:190px 1fr;border-bottom:1px solid var(--border-light);} .avail-member-row:last-child{border-bottom:none;} .avail-member-row:hover{background:#f8fafc;} .avail-label-cell{padding:12px 16px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;gap:4px;} .avail-member-name{font-size:12.5px;font-weight:700;} .avail-member-role{font-size:10.5px;color:var(--muted);} .avail-bar-cell{padding:10px 12px;} .avail-bar-track{height:28px;background:#f0fdf4;border-radius:7px;position:relative;overflow:hidden;border:1px solid #bbf7d0;} .avail-bar-segment{position:absolute;top:0;height:100%;display:flex;align-items:center;padding:0 7px;font-size:10px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;transition:opacity .15s;} .avail-bar-segment:hover{opacity:.8;z-index:2;} .avail-bar-segment.seg-busy{background:linear-gradient(90deg,#3b82f6,#6366f1);} .avail-bar-segment.seg-full{background:linear-gradient(90deg,#ef4444,#f97316);} .avail-bar-segment.seg-idle{background:rgba(16,185,129,.25);color:#065f46;} .avail-idle-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700;margin-top:4px;} .avail-idle-pill.idle{background:#d1fae5;color:#065f46;} .avail-idle-pill.busy{background:#fee2e2;color:#b91c1c;} .avail-idle-pill.part{background:#fef3c7;color:#92400e;} .avail-date-header{display:grid;grid-template-columns:190px 1fr;border-bottom:1px solid var(--border);background:#f8fafc;} .avail-date-ticks{padding:7px 12px;position:relative;height:30px;} .avail-date-tick{position:absolute;font-size:9px;color:var(--muted);transform:translateX(-50%);white-space:nowrap;font-weight:600;} .suggest-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:18px;margin-bottom:10px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-xs);transition:all .18s;} .suggest-card:hover{border-color:rgba(79,70,229,.3);transform:translateY(-1px);box-shadow:var(--shadow-md);} .suggest-card.urgent{border-color:#fed7aa;background:#fffbf5;} .suggest-avatar{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 3px 8px rgba(79,70,229,.25);} .suggest-info{flex:1;} .suggest-name{font-size:13.5px;font-weight:700;} .suggest-detail{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.6;} .avail-filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;} .avail-legend{display:flex;gap:12px;align-items:center;margin-left:auto;flex-wrap:wrap;} .avail-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);} .avail-legend-dot{width:10px;height:10px;border-radius:3px;} .skill-filter-btn{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:#fff;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;font-family:var(--font);} .skill-filter-btn:hover,.skill-filter-btn.active{border-color:var(--accent2);background:var(--accent2-light);color:#0369a1;} /* ══════════════════════════════════════════════ EMPTY STATE ═══════════════════════════════════════════════ */ .empty-state{text-align:center;padding:48px 24px;color:var(--muted);} .empty-state-icon{font-size:40px;margin-bottom:12px;filter:grayscale(30%);} .empty-state-title{font-size:15px;font-weight:700;color:var(--text-2);margin-bottom:7px;} .empty-state-sub{font-size:13px;line-height:1.7;max-width:300px;margin:0 auto;} /* ══════════════════════════════════════════════ ROLES ═══════════════════════════════════════════════ */ .role-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;} .role-pill.admin{background:#fce7f3;color:#9d174d;} .role-pill.manager{background:var(--purple-light);color:#6d28d9;} .role-pill.pm{background:#dbeafe;color:#1d4ed8;} .role-pill.pmo{background:var(--teal-light);color:#0f766e;} .role-pill.developer{background:rgba(8,145,178,.1);color:#0891b2;border:1px solid rgba(8,145,178,.3);} .role-pill.viewer{background:var(--bg);color:var(--muted);border:1px solid var(--border);} /* ══════════════════════════════════════════════ PAGINATION ═══════════════════════════════════════════════ */ .pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border);background:#fafafa;flex-wrap:wrap;gap:8px;} .pagination-info{font-size:11.5px;color:var(--muted);font-family:var(--mono);} .pagination-controls{display:flex;align-items:center;gap:4px;} .pg-btn{width:32px;height:32px;border-radius:7px;border:1.5px solid var(--border);background:#fff;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;} .pg-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-light);} .pg-btn:disabled{opacity:.35;cursor:not-allowed;} .pg-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;} .pg-size{background:#fff;border:1.5px solid var(--border);border-radius:7px;color:var(--text);font-family:var(--font);font-size:12px;padding:5px 8px;outline:none;cursor:pointer;} .pg-size:focus{border-color:var(--accent);} /* ══ KANBAN MOUSE DRAG ═══════════════════════════════════════ */ .task-card{cursor:grab;user-select:none;} .task-card:active{cursor:grabbing;} .kd-clone{position:fixed;pointer-events:none;z-index:9999;opacity:.85;transform:rotate(2deg) scale(1.03);box-shadow:0 12px 32px rgba(79,70,229,.25);transition:none;border-radius:10px;background:#fff;} .kd-drop-zone{border:2px dashed var(--accent)!important;background:rgba(79,70,229,.05)!important;transition:background .15s;} .kd-drop-zone-done{border:2px dashed var(--green)!important;background:rgba(16,185,129,.05)!important;} .kd-drop-zone-inprog{border:2px dashed var(--accent)!important;background:rgba(59,130,246,.05)!important;} .kd-source{opacity:.3;} /* ══ IMPORT TASKS PAGE ═══════════════════════════════════════ */ /* Import container & cards */ .import-container{max-width:960px;margin:0 auto;} .import-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px;} .import-card-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;color:var(--accent);} .import-card-title{font-size:15px;font-weight:700;color:var(--text);} .import-card-desc{font-size:12px;color:var(--muted);margin-top:2px;} /* Step bar */ .import-steps-bar{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:28px;padding:0 40px;} .import-step-dot{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1;} .import-step-dot span{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;background:var(--bg);border:2px solid var(--border);color:var(--muted);transition:all .3s;} .import-step-dot small{font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap;} .import-step-dot.active span{background:var(--accent);border-color:var(--accent);color:#fff;} .import-step-dot.active small{color:var(--accent);} .import-step-dot.done span{background:var(--green);border-color:var(--green);color:#fff;} .import-step-dot.done small{color:var(--green);} .import-step-line{flex:1;height:2px;background:var(--border);margin:0 -4px;margin-bottom:18px;transition:background .3s;} .import-step-line.done{background:var(--green);} /* Drop zone */ .import-drop-zone{border:2px dashed var(--border);border-radius:var(--r-lg);padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg);} .import-drop-zone:hover,.import-drop-zone.drag-over{border-color:var(--accent);background:var(--accent-light);} .import-drop-icon{width:56px;height:56px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;} /* Column badges */ .import-col-badge{background:var(--bg);border:1px solid var(--border-light);border-radius:6px;padding:6px 10px;font-size:11.5px;color:var(--text);font-weight:500;display:flex;align-items:center;gap:4px;flex-wrap:wrap;} .import-col-req{color:var(--red);font-weight:700;margin-right:2px;} .import-col-hint{color:var(--muted);font-size:10px;} /* Editable table */ .import-table-wrap{max-height:calc(100vh - 360px);overflow:auto;border:1px solid var(--border);border-radius:var(--r-md);} .import-table{width:100%;border-collapse:collapse;font-size:12px;} .import-table thead{position:sticky;top:0;z-index:2;} .import-table th{background:var(--bg-input,#f8fafc);padding:8px 10px;text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--border);white-space:nowrap;} .import-table td{padding:4px 4px;border-bottom:1px solid var(--border-light);vertical-align:middle;} .import-table tr:hover td{background:var(--accent-light);} .import-table tr.row-error td{background:rgba(220,38,38,.04);} .import-table .import-cell-input{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;font-size:12px;font-family:var(--font);color:var(--text);border-radius:4px;transition:all .15s;outline:none;box-sizing:border-box;} .import-table .import-cell-input:hover{border-color:var(--border);} .import-table .import-cell-input:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 2px rgba(79,70,229,.1);} .import-table .import-cell-select{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;font-size:12px;font-family:var(--font);color:var(--text);border-radius:4px;cursor:pointer;outline:none;appearance:auto;} .import-table .import-cell-select:hover{border-color:var(--border);} .import-table .import-cell-select:focus{border-color:var(--accent);background:var(--card);} .import-table .import-row-num{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;width:32px;padding:4px 6px;} .import-table .import-row-actions{width:32px;text-align:center;padding:4px;} .import-row-del{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:4px;border-radius:4px;transition:all .15s;display:flex;align-items:center;justify-content:center;} .import-row-del:hover{background:var(--red-light);color:var(--red);} #importPreviewTable thead th{position:sticky;top:0;background:#1e293b;color:#f1f5f9;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:9px 12px;text-align:left;white-space:nowrap;} #importPreviewTable tbody tr{border-bottom:1px solid var(--border-light);} #importPreviewTable tbody tr:hover{background:#f8fafc;} #importPreviewTable tbody td{padding:8px 12px;color:var(--text);font-size:12.5px;vertical-align:middle;} #importPreviewTable tbody tr.row-error{background:#fff1f2;} #importPreviewTable tbody tr.row-error td{color:#dc2626;} .import-progress-bar{height:4px;background:#e2e8f0;border-radius:2px;margin-top:6px;overflow:hidden;} .import-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s;} /* ══ PROJECT TREE PAGE ═══════════════════════════════════════════ */ .tree-project-block{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-sm);} .tree-project-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;background:linear-gradient(135deg,#1e293b 0%,#334155 100%);user-select:none;transition:filter .15s;} .tree-project-header:hover{filter:brightness(1.1);} .tree-project-title{font-size:14px;font-weight:700;color:#f1f5f9;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tree-project-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;} .tree-project-toggle{color:#94a3b8;transition:transform .2s;flex-shrink:0;} .tree-project-toggle.open{transform:rotate(90deg);} .tree-project-body{padding:0;} .tree-project-body.collapsed{display:none;} .tree-project-stats{display:flex;gap:20px;padding:10px 18px;background:#f8fafc;border-bottom:1px solid var(--border-light);flex-wrap:wrap;} .tree-stat{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);} .tree-stat strong{color:var(--text);font-weight:700;} .tree-progress-bar{height:5px;background:#e2e8f0;border-radius:3px;overflow:hidden;width:80px;} .tree-progress-fill{height:100%;border-radius:3px;transition:width .3s;} /* Epic row */ .tree-epic{display:flex;align-items:flex-start;gap:0;padding:10px 18px;border-bottom:1px solid var(--border-light);cursor:pointer;background:#faf5ff;transition:background .12s;isolation:isolate;} .tree-epic:hover{background:#f3e8ff;} .tree-epic-toggle{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#7c3aed;flex-shrink:0;margin-right:4px;transition:transform .18s;} .tree-epic-toggle.open{transform:rotate(90deg);} .tree-epic-icon{width:22px;height:22px;background:#7c3aed;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px;position:relative;z-index:1;} .tree-epic-body{flex:1;min-width:0;} .tree-epic-title{font-size:13px;font-weight:700;color:#4c1d95;} .tree-epic-meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap;} .tree-epic-children{display:none;background:#fdf4ff;overflow:hidden;} .tree-epic-children.open{display:block;} /* Task row */ .tree-task{display:flex;align-items:flex-start;gap:0;padding:9px 18px 9px 54px;border-bottom:1px solid #f1f5f9;background:#fff;transition:background .12s;isolation:isolate;} .tree-task:hover{background:#f8fafc;} .tree-task-standalone{padding-left:18px;background:#fff;} .tree-task-icon{width:18px;height:18px;background:#3b82f6;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px;margin-top:0;position:relative;z-index:1;} .tree-task-toggle{min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#3b82f6;flex-shrink:0;transition:transform .18s;} .tree-task-toggle.open{transform:rotate(90deg);} .tree-task-body{flex:1;min-width:0;} .tree-task-title{font-size:12.5px;font-weight:600;color:var(--text);} .tree-task-meta{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap;} .tree-task-children{display:none;} .tree-task-children.open{display:block;} /* Subtask row */ .tree-subtask{display:flex;align-items:flex-start;gap:0;padding:7px 18px 7px 90px;border-bottom:1px solid #f8fafc;background:#f9fafb;transition:background .12s;isolation:isolate;} .tree-subtask:hover{background:#f1f5f9;} .tree-subtask-from-epic{padding-left:90px;} .tree-subtask-icon{width:16px;height:16px;background:#10b981;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px;margin-top:1px;position:relative;z-index:1;} .tree-subtask-body{flex:1;min-width:0;} .tree-subtask-title{font-size:12px;font-weight:500;color:var(--text);} .tree-subtask-meta{display:flex;align-items:center;gap:5px;margin-top:2px;flex-wrap:wrap;} /* No connector lines */ /* Empty state */ .tree-empty{padding:32px;text-align:center;color:var(--muted);font-size:13px;} /* ══ GANTT/TREE TABS ══════════════════════════════════════════ */ .tab-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:none;background:transparent;border-radius:7px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;} .tab-btn:hover{color:var(--text);background:rgba(0,0,0,.04);} .tab-btn.tab-active{background:#fff;color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.1);} .tree-epic,.tree-task,.tree-subtask{display:flex;} .tree-actions{display:none;align-items:center;gap:4px;flex-shrink:0;margin-left:8px;} .tree-epic:hover .tree-actions, .tree-task:hover .tree-actions, .tree-subtask:hover .tree-actions{display:flex;} .tree-actions .tree-action-btn{padding:3px 6px;line-height:1;} /* ══ KNOWLEDGE BASE ══════════════════════════════════════════ */ #page-kb{margin:-24px -26px;width:calc(100% + 52px);} .kb-layout{display:grid;grid-template-columns:220px 1fr;gap:0;width:100%;height:calc(100vh - 80px);overflow:hidden;} /* Sidebar */ .kb-sidebar{background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;padding:0;} .kb-sidebar-section{padding:14px 16px;border-bottom:1px solid var(--border-light);} .kb-sidebar-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted-light);margin-bottom:10px;} .kb-search{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:12.5px;font-family:var(--font);background:#f8fafc;transition:all .2s;} .kb-search:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.1);} .kb-filter-group{display:flex;flex-direction:column;gap:1px;} .kb-filter{padding:7px 10px;font-size:12.5px;border-radius:var(--r-sm);cursor:pointer;color:var(--text-2);transition:all .15s;font-weight:500;display:flex;align-items:center;gap:8px;} .kb-filter:hover{background:var(--accent-light);color:var(--accent);} .kb-filter.active{background:var(--accent);color:#fff;font-weight:600;} .kb-empty-small{font-size:11.5px;color:var(--muted-light);padding:8px 4px;} .kb-pinned-item{padding:6px 10px;font-size:12px;border-radius:var(--r-sm);cursor:pointer;color:var(--text-2);display:flex;align-items:center;gap:6px;transition:all .15s;} .kb-pinned-item:hover{background:var(--accent-light);color:var(--accent);} /* Main area */ .kb-main{overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;} .kb-tab-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:10px;} .kb-tabs{display:flex;gap:4px;background:var(--bg);padding:3px;border-radius:var(--r-md);flex-shrink:0;} .kb-tab{border:none;background:transparent;padding:7px 14px;font-size:12.5px;font-weight:600;font-family:var(--font);color:var(--muted);cursor:pointer;border-radius:var(--r-sm);transition:all .15s;white-space:nowrap;} .kb-tab:hover{color:var(--text);} .kb-tab.active{background:#fff;color:var(--accent);box-shadow:var(--shadow-xs);} .kb-actions{display:flex;gap:8px;flex-shrink:0;} /* Notes toolbar */ .kb-notes-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0;margin-bottom:4px;gap:10px;flex-wrap:wrap;} .kb-toolbar-left{display:flex;align-items:center;gap:8px;} .kb-toolbar-right{display:flex;align-items:center;gap:6px;} .kb-results-count{font-size:12px;color:var(--muted);font-weight:500;} .kb-toolbar-label{font-size:11px;color:var(--muted-light);font-weight:600;text-transform:uppercase;letter-spacing:.5px;} .kb-toolbar-select{font-size:12px;padding:4px 8px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--text);font-family:var(--font);cursor:pointer;transition:border-color .15s;} .kb-toolbar-select:focus{outline:none;border-color:var(--accent);} /* Pagination */ .kb-pagination{display:flex;justify-content:center;padding:20px 0 4px;} .kb-pag-inner{display:flex;align-items:center;gap:4px;} .kb-pag-btn{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font);} .kb-pag-btn:hover:not(:disabled):not(.active){border-color:var(--accent);color:var(--accent);background:var(--accent-light);} .kb-pag-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);} .kb-pag-btn:disabled{opacity:.35;cursor:not-allowed;} .kb-pag-ellipsis{padding:0 4px;color:var(--muted);font-size:13px;} /* Note cards */ .kb-notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;} .kb-note-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:18px;cursor:pointer;transition:all .18s;position:relative;} .kb-note-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px);} .kb-note-card .kb-card-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;} .kb-card-cat-meeting{background:var(--purple-light);color:#7c3aed;} .kb-card-cat-decision{background:var(--yellow-light);color:#b45309;} .kb-card-cat-technical{background:var(--accent2-light);color:#0369a1;} .kb-card-cat-general{background:var(--bg);color:var(--muted);} .kb-note-card .kb-card-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.35;} .kb-note-card .kb-card-preview{font-size:12.5px;color:var(--text-2);line-height:1.55;max-height:56px;overflow:hidden;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;} .kb-note-card .kb-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:10px;border-top:1px solid var(--border-light);font-size:11px;color:var(--muted);} .kb-note-card .kb-card-tags{display:flex;gap:4px;flex-wrap:wrap;} .kb-card-tag{background:var(--accent-light);color:var(--accent);padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;} .kb-card-author{margin-left:6px;font-style:italic;color:var(--accent);font-weight:500;} .kb-note-card .kb-pin-badge{position:absolute;top:10px;right:10px;color:var(--accent);} /* Editor */ .kb-editor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border-light);} .kb-editor-actions{display:flex;gap:8px;} .kb-editor-form{display:flex;flex-direction:column;gap:14px;flex:1;overflow-y:auto;} .kb-title-input{width:100%;padding:10px 0;border:none;font-size:22px;font-weight:700;font-family:var(--font);color:var(--text);background:transparent;outline:none;} .kb-title-input::placeholder{color:var(--muted-light);} .kb-meta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .kb-meta-select{max-width:200px;font-size:12.5px;padding:7px 10px;} .kb-custom-select{position:relative;display:inline-block;} .kb-custom-select-btn{display:flex;align-items:center;gap:6px;cursor:pointer;text-align:left;appearance:none;-webkit-appearance:none;background:#f8fafc;border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);white-space:nowrap;} .kb-custom-select-btn:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.1);} .kb-csel-icon{width:14px;height:14px;flex-shrink:0;color:var(--accent);} .kb-csel-chevron{width:10px;height:10px;flex-shrink:0;margin-left:auto;color:var(--muted);transition:transform .2s;} .kb-custom-select.open .kb-csel-chevron{transform:rotate(180deg);} .kb-custom-select-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:100%;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow);z-index:100;overflow:hidden;} .kb-custom-select.open .kb-custom-select-dropdown{display:block;} .kb-csel-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:12.5px;color:var(--text);transition:background .15s;} .kb-csel-option:hover{background:var(--bg-hover);} .kb-csel-option.active{background:rgba(79,70,229,.06);color:var(--accent);font-weight:600;} .kb-csel-option .kb-csel-icon{color:var(--accent);} .kb-meta-input{flex:1;min-width:140px;font-size:12.5px;padding:7px 10px;} .kb-content-textarea{flex:1;width:100%;min-height:75vh;padding:14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:var(--mono);font-size:13px;line-height:1.7;resize:vertical;background:#f8fafc;transition:all .2s;box-sizing:border-box;} .kb-content-textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.1);} .kb-backlinks{margin-top:10px;padding:14px;background:var(--bg);border-radius:var(--r-md);border:1px solid var(--border-light);} .kb-backlinks-label{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;} .kb-backlink-item{padding:5px 10px;font-size:12px;color:var(--accent);cursor:pointer;border-radius:var(--r-sm);transition:background .12s;font-weight:500;} .kb-backlink-item:hover{background:var(--accent-light);} /* AI menu dropdown */ .kb-ai-menu{position:absolute;top:calc(100% + 4px);right:0;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:100;min-width:180px;padding:4px;overflow:hidden;} .kb-ai-menu-item{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;border-radius:var(--r-sm);transition:all .12s;} .kb-ai-menu-item:hover{background:var(--accent-light);color:var(--accent);} .kb-ai-menu-item svg{flex-shrink:0;color:var(--muted);} .kb-ai-menu-item:hover svg{color:var(--accent);} /* Graph view */ .kb-graph-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:6px;} .kb-graph-info{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em;} .kb-graph-controls{display:flex;gap:4px;align-items:center;flex-wrap:wrap;} /* Legend — pill-style chips */ .kb-graph-legend{display:flex;gap:5px;padding:0 0 7px;flex-wrap:wrap;align-items:center;} .kb-graph-legend-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border-radius:20px;font-size:7px;font-weight:700;letter-spacing:.04em;border:1px solid transparent;line-height:1.7;} /* Node category dots */ .kb-graph-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 4px currentColor;} /* Edge type lines */ .kb-graph-edge-line{width:18px;height:0;flex-shrink:0;} /* Canvas */ .kb-graph-canvas{width:100%;height:calc(100vh - 225px);border:1px solid var(--border);border-radius:12px;cursor:grab;position:relative;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:box-shadow .2s;} .kb-graph-canvas:hover{box-shadow:0 4px 20px rgba(99,102,241,.1);} .kb-graph-canvas:active{cursor:grabbing;} /* Tooltip — glassmorphism */ .kb-graph-tooltip{ position:absolute;max-width:290px;padding:12px 16px; background:rgba(255,255,255,0.94); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(99,102,241,0.18); border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.13),0 0 0 1px rgba(255,255,255,.6) inset; font-size:12px;z-index:100;pointer-events:none;line-height:1.5; } .kb-graph-tooltip .tt-title{font-weight:700;font-size:13px;margin-bottom:5px;color:#1e293b;} .kb-graph-tooltip .tt-cat{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;margin-bottom:5px;letter-spacing:.03em;} .kb-graph-tooltip .tt-tags{font-size:10px;color:var(--muted);margin-bottom:4px;font-family:var(--mono,monospace);} .kb-graph-tooltip .tt-preview{font-size:12px;color:#334155;line-height:1.55;margin-bottom:2px;} .kb-graph-tooltip .tt-meta{font-size:10px;color:#94a3b8;margin-top:6px;display:flex;gap:10px;border-top:1px solid rgba(0,0,0,.06);padding-top:6px;} .kb-graph-tooltip .tt-meta span{display:inline-flex;align-items:center;gap:3px;} /* Fullscreen */ #kbGraphView.kb-graph-fullscreen{position:fixed;inset:0;z-index:99999;background:var(--bg);padding:18px;display:flex;flex-direction:column;} #kbGraphView.kb-graph-fullscreen .kb-graph-toolbar{flex-shrink:0;} #kbGraphView.kb-graph-fullscreen .kb-graph-canvas{flex:1;height:auto;border-radius:14px;} /* Dark mode overrides */ [data-theme="dark"] .kb-graph-tooltip{background:rgba(17,24,39,0.92);border-color:rgba(99,102,241,0.25);box-shadow:0 8px 28px rgba(0,0,0,.4);} [data-theme="dark"] .kb-graph-tooltip .tt-title{color:#f1f5f9;} [data-theme="dark"] .kb-graph-tooltip .tt-preview{color:#94a3b8;} [data-theme="dark"] .kb-graph-tooltip .tt-meta{border-color:rgba(255,255,255,.07);} [data-theme="dark"] .kb-graph-legend-chip{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.08)!important;color:#94a3b8!important;} /* Template modal */ .kb-tpl-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;margin-bottom:2px;} .kb-tpl-modal-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--text);} .kb-tpl-modal-title svg{color:var(--accent);} .kb-tpl-modal-desc{padding:0 24px;font-size:12.5px;color:var(--muted);margin-bottom:4px;} /* Templates */ .kb-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;padding:16px 20px 20px;} .kb-template-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px 14px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;} .kb-template-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px);} .tpl-icon-wrap{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:6px;transition:transform .2s;} .tpl-icon-wrap svg{width:22px;height:22px;} .kb-template-card:hover .tpl-icon-wrap{transform:scale(1.1);} .kb-template-card .tpl-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.3;} .kb-template-card .tpl-cat{font-size:10.5px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.4px;} /* Empty state */ .kb-notes-empty{text-align:center;padding:60px 24px;color:var(--muted);} .kb-notes-empty svg{width:52px;height:52px;margin-bottom:14px;opacity:.25;} .kb-notes-empty h3{font-size:16px;color:var(--text-2);margin-bottom:8px;font-weight:600;} .kb-notes-empty p{font-size:13px;line-height:1.5;} /* Project filter pills */ .kb-project-pill{display:inline-flex;padding:5px 12px;font-size:11.5px;border-radius:20px;cursor:pointer;color:var(--text-2);background:var(--bg);border:1.5px solid var(--border);margin:2px;transition:all .15s;font-weight:500;} .kb-project-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);} .kb-project-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);} /* ── KB Meeting Transcription ── */ .btn-accent2{background:var(--accent2);color:#fff;border:none;box-shadow:0 2px 8px rgba(14,165,233,.25);} .btn-accent2:hover{background:#0284c7;box-shadow:0 4px 14px rgba(14,165,233,.35);} .kb-meeting-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border-light);} .kb-meeting-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-2);font-family:var(--mono);} .kb-rec-dot{width:10px;height:10px;border-radius:50%;background:#94a3b8;display:inline-block;transition:background .2s;} .kb-rec-dot.recording{background:#ef4444;animation:kbPulse 1.2s ease-in-out infinite;} @keyframes kbPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);}} .kb-meeting-setup{display:flex;flex-direction:column;gap:14px;} .kb-meeting-title-row{margin-bottom:4px;} .kb-meeting-lang-row{display:flex;align-items:center;gap:10px;} .kb-transcript-area{margin-top:18px;flex:1;display:flex;flex-direction:column;min-height:0;} .kb-transcript-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted-light);margin-bottom:10px;} .kb-transcript-lines{flex:1;max-height:350px;overflow-y:auto;padding:14px;background:#f8fafc;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13px;line-height:1.7;color:var(--text-2);} .kb-transcript-lines .ts-line{padding:4px 0;border-bottom:1px solid var(--border-light);} .kb-transcript-lines .ts-time{font-size:10px;color:var(--muted-light);font-family:var(--mono);margin-right:10px;} .kb-transcript-current{padding:10px 14px;margin-top:8px;background:var(--accent-light);border-radius:var(--r-sm);font-size:13px;color:var(--accent);min-height:28px;font-style:italic;} .kb-meeting-actions{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border-light);} .kb-summary-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted-light);margin-bottom:10px;margin-top:18px;} .kb-summary-content{padding:16px;background:#f8fafc;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13px;line-height:1.7;color:var(--text);} .kb-summary-content h2,.kb-summary-content h3{margin:12px 0 6px;font-size:14px;font-weight:700;} .kb-summary-content ul{padding-left:20px;margin:6px 0;} .kb-summary-content li{margin:4px 0;} @media(max-width:900px){ .kb-layout{grid-template-columns:1fr;height:auto;} .kb-sidebar{border-right:none;border-bottom:1px solid var(--border);max-height:240px;} .kb-notes-grid{grid-template-columns:1fr;} .kb-tab-bar{flex-direction:column;align-items:stretch;} .kb-tabs{justify-content:center;} .kb-actions{justify-content:center;} } /* ══════════════════════════════════════════════ THEME TOGGLE BUTTON ═══════════════════════════════════════════════ */ .theme-toggle{width:36px;height:36px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--muted);padding:0;} .theme-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);} .theme-toggle svg{width:16px;height:16px;} .theme-icon-dark{display:none;} [data-theme="dark"] .theme-icon-light{display:none;} [data-theme="dark"] .theme-icon-dark{display:block;} /* ══════════════════════════════════════════════ DARK THEME — COMPREHENSIVE OVERRIDES ═══════════════════════════════════════════════ */ /* ── Base & Loading ── */ [data-theme="dark"] .loading{background:var(--bg);color:var(--text);} [data-theme="dark"] .loading-text{color:var(--muted);} [data-theme="dark"] .content::-webkit-scrollbar-thumb{background:var(--border);} [data-theme="dark"] .content::-webkit-scrollbar-track{background:transparent;} /* ── Sidebar (already dark — slightly adjust for deeper bg) ── */ [data-theme="dark"] .sidebar{background:var(--sidebar-bg);} [data-theme="dark"] .sidebar::after{background:linear-gradient(180deg,transparent,var(--sidebar-border),transparent);} [data-theme="dark"] .sidebar-user{border-top-color:rgba(255,255,255,.05);} /* ── Topbar ── */ [data-theme="dark"] .topbar{background:var(--surface);border-bottom-color:var(--border);box-shadow:0 1px 4px rgba(0,0,0,.25);} [data-theme="dark"] .topbar-date{background:var(--bg-input);border-color:var(--border);color:var(--muted);} /* ── Forms ── */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea{background:var(--bg-input);border-color:var(--border);color:var(--text);} [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .form-textarea:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px rgba(165,180,252,.12);} [data-theme="dark"] .form-select option{background:var(--surface);color:var(--text);} [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] .form-textarea::placeholder{color:var(--muted-light);} /* ── Assignee multi-select ── */ [data-theme="dark"] .assignee-tags{background:var(--bg-input);border-color:var(--border);} [data-theme="dark"] .assignee-tags:focus-within, [data-theme="dark"] .assignee-tags.open{background:var(--surface);border-color:var(--accent);} [data-theme="dark"] .assignee-dropdown{background:var(--surface);border-color:var(--border);} [data-theme="dark"] .assignee-option:hover{background:var(--bg-hover);} /* ── Search & Filters ── */ [data-theme="dark"] .search-input{background:var(--bg-input);border-color:var(--border);color:var(--text);} [data-theme="dark"] .search-input:focus{background:var(--surface);border-color:var(--accent);} [data-theme="dark"] .filter-select{background:var(--bg-input);border-color:var(--border);color:var(--text);} [data-theme="dark"] .filter-select option{background:var(--surface);color:var(--text);} /* ── Cards ── */ [data-theme="dark"] .kpi-card, [data-theme="dark"] .chart-card, [data-theme="dark"] .team-card, [data-theme="dark"] .eval-card{background:var(--card);border-color:var(--border);} [data-theme="dark"] .task-card{background:var(--card);border-color:var(--border);} [data-theme="dark"] .task-card:hover{border-color:var(--accent);background:rgba(165,180,252,.06);} /* ── Badges — inverted for dark (dark bg + bright text) ── */ [data-theme="dark"] .badge-green{background:rgba(110,231,183,.14);color:#6ee7b7;} [data-theme="dark"] .badge-blue{background:rgba(147,197,253,.14);color:#93c5fd;} [data-theme="dark"] .badge-yellow{background:rgba(253,230,138,.12);color:#fde68a;} [data-theme="dark"] .badge-red{background:rgba(252,165,165,.14);color:#fca5a5;} [data-theme="dark"] .badge-purple{background:rgba(196,181,253,.12);color:#c4b5fd;} [data-theme="dark"] .badge-gray{background:rgba(156,163,175,.12);color:#d1d5db;} [data-theme="dark"] .badge-teal{background:rgba(94,234,212,.12);color:#5eead4;} [data-theme="dark"] .badge-orange{background:rgba(253,186,116,.12);color:#fdba74;} /* ── Tables ── */ [data-theme="dark"] .table-wrap{background:var(--card);border-color:var(--border);} [data-theme="dark"] thead th{background:rgba(255,255,255,.03);color:var(--muted);border-color:var(--border);} [data-theme="dark"] tbody td{border-color:var(--border);color:var(--text);} [data-theme="dark"] tbody tr:hover td{background:var(--bg-hover);} /* ── Kanban ── */ [data-theme="dark"] .kanban-project-card{background:linear-gradient(135deg,rgba(165,180,252,.06),rgba(165,180,252,.02));border-color:var(--border);} [data-theme="dark"] .kanban-cols{background:var(--surface);border-color:var(--border);} [data-theme="dark"] .kanban-col{background:rgba(255,255,255,.03);border-color:var(--border);} [data-theme="dark"] .kanban-count{background:var(--bg-input);color:var(--muted);} [data-theme="dark"] .kanban-progress-bar{background:var(--border);} /* ── Strips ── */ [data-theme="dark"] .strip-item{background:var(--card);border-color:var(--border);} /* ── Buttons ── */ [data-theme="dark"] .btn{color:var(--text);} [data-theme="dark"] .btn-primary{background:var(--accent);color:#0f172a;box-shadow:0 2px 10px rgba(165,180,252,.2);} [data-theme="dark"] .btn-primary:hover{background:#c7d2fe;box-shadow:0 4px 16px rgba(165,180,252,.3);} [data-theme="dark"] .btn-ghost{color:var(--text-2);} [data-theme="dark"] .btn-ghost:hover{background:var(--bg-hover);color:var(--text);} [data-theme="dark"] .btn-outline{background:transparent;border-color:var(--border);color:var(--text-2);} [data-theme="dark"] .btn-outline:hover{background:var(--bg-hover);border-color:var(--muted);color:var(--text);} [data-theme="dark"] .btn-danger{color:var(--red);border-color:rgba(252,165,165,.3);} [data-theme="dark"] .btn-danger:hover{background:var(--red-light);} [data-theme="dark"] .btn-accent2{background:var(--accent2);color:#0f172a;} /* ── Modals ── */ [data-theme="dark"] .modal-overlay{background:var(--bg-overlay);} [data-theme="dark"] .modal{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-xl);} [data-theme="dark"] .modal-header{border-bottom-color:var(--border);color:var(--text);} [data-theme="dark"] .modal-footer{border-top-color:var(--border);background:rgba(255,255,255,.02);} [data-theme="dark"] .modal-body{color:var(--text);} /* ── Toast ── */ [data-theme="dark"] .toast{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-lg);} /* ── Gantt ── */ [data-theme="dark"] .gantt-wrap{background:var(--card);border-color:var(--border);} [data-theme="dark"] .gantt-grid{background:var(--card);} [data-theme="dark"] .gantt-header{border-bottom-color:var(--border);} [data-theme="dark"] .gantt-header-row, [data-theme="dark"] .gantt-header-row th{background:rgba(255,255,255,.03);border-color:var(--border);color:var(--muted);} [data-theme="dark"] .gantt-row-label{border-right-color:var(--border);color:var(--text);} [data-theme="dark"] .gantt-row-epic{background:rgba(99,102,241,.08);} [data-theme="dark"] .gantt-row-subtask{background:rgba(94,234,212,.04);} /* ── Risk ── */ [data-theme="dark"] .risk-cell{border-color:var(--border);} /* ── Availability ── */ [data-theme="dark"] .avail-card{background:var(--card);border-color:var(--border);} /* ── AI Chat Panel ── */ [data-theme="dark"] .ai-panel{background:var(--card);border-color:var(--border);} [data-theme="dark"] .ai-header{background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border-bottom-color:var(--border);} [data-theme="dark"] .chat-messages{background:var(--bg);} [data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb{background:var(--border);} [data-theme="dark"] .msg-bubble{background:var(--surface);border-color:var(--border);color:var(--text);} [data-theme="dark"] .msg.user .msg-bubble{background:linear-gradient(135deg,rgba(165,180,252,.15),rgba(165,180,252,.08));border-color:rgba(165,180,252,.2);color:var(--text);} [data-theme="dark"] .msg-bubble.error-bubble{border-color:rgba(252,165,165,.3);background:var(--red-light);} [data-theme="dark"] .error-detail{color:var(--red);background:var(--bg-input);} [data-theme="dark"] .msg-avatar{background:linear-gradient(135deg,rgba(165,180,252,.12),rgba(165,180,252,.06));border-color:rgba(165,180,252,.2);} [data-theme="dark"] .msg.user .msg-avatar{background:linear-gradient(135deg,rgba(103,232,249,.12),rgba(103,232,249,.06));border-color:rgba(103,232,249,.2);} [data-theme="dark"] .chat-input-row{background:var(--surface);border-top-color:var(--border);} [data-theme="dark"] .chat-input{background:var(--bg-input);border-color:var(--border);color:var(--text);} [data-theme="dark"] .chat-input:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px rgba(165,180,252,.1);} [data-theme="dark"] .quick-prompts{background:rgba(255,255,255,.02);border-bottom-color:var(--border);} [data-theme="dark"] .qp{background:var(--bg-input);border-color:var(--border);color:var(--muted);} [data-theme="dark"] .qp:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);} [data-theme="dark"] .api-key-card{background:var(--card);border-color:var(--border);border-top-color:var(--accent);} /* AI upload zone */ [data-theme="dark"] .upload-zone-wrap{background:rgba(255,255,255,.02);border-bottom-color:var(--border);} [data-theme="dark"] .upload-zone{border-color:rgba(165,180,252,.25);background:var(--bg-input);} [data-theme="dark"] .upload-zone:hover, [data-theme="dark"] .upload-zone.drag-over{border-color:var(--accent);background:var(--accent-light);} [data-theme="dark"] .upload-zone.has-file{border-color:var(--green);background:var(--green-light);} [data-theme="dark"] .upload-zone-icon{background:var(--accent-light);} [data-theme="dark"] .upload-zone.has-file .upload-zone-icon{background:var(--green-light);} [data-theme="dark"] .upload-clear{border-color:var(--border);background:var(--surface);color:var(--muted);} [data-theme="dark"] .upload-clear:hover{border-color:var(--red);color:var(--red);background:var(--red-light);} [data-theme="dark"] .role-prompts{background:var(--card);border-bottom-color:var(--border);} [data-theme="dark"] .rqp.rqp-product{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.35);color:#c4b5fd;} [data-theme="dark"] .rqp.rqp-product:hover{background:#7c3aed;color:#fff;border-color:#7c3aed;} [data-theme="dark"] .rqp.rqp-pm{background:rgba(29,78,216,.12);border-color:rgba(29,78,216,.35);color:#93c5fd;} [data-theme="dark"] .rqp.rqp-pm:hover{background:#1d4ed8;color:#fff;border-color:#1d4ed8;} [data-theme="dark"] .rqp.rqp-pmo{background:rgba(21,128,61,.12);border-color:rgba(21,128,61,.35);color:#86efac;} [data-theme="dark"] .rqp.rqp-pmo:hover{background:#15803d;color:#fff;border-color:#15803d;} [data-theme="dark"] .doc-prompts{background:linear-gradient(90deg,rgba(165,180,252,.06),rgba(103,232,249,.04));border-bottom-color:var(--border);} [data-theme="dark"] .doc-prompts-label{color:var(--accent);} [data-theme="dark"] .dqp{background:var(--bg-input);border-color:rgba(165,180,252,.25);color:var(--accent);} [data-theme="dark"] .dqp:hover{background:var(--accent);color:#0f172a;border-color:var(--accent);} [data-theme="dark"] .file-ext-badge.pdf{background:var(--red-light);color:var(--red);} [data-theme="dark"] .file-ext-badge.image{background:var(--yellow-light);color:var(--yellow);} [data-theme="dark"] .file-ext-badge.text{background:rgba(147,197,253,.14);color:#93c5fd;} /* ── Knowledge Base ── */ [data-theme="dark"] .kb-sidebar{background:var(--surface);border-right-color:var(--border);} [data-theme="dark"] .kb-search-input{background:var(--bg-input);border-color:var(--border);color:var(--text);} [data-theme="dark"] .kb-search-input:focus{background:var(--surface);border-color:var(--accent);} [data-theme="dark"] .kb-note-card{background:var(--card);border-color:var(--border);} [data-theme="dark"] .kb-note-card:hover{border-color:var(--accent);background:rgba(165,180,252,.04);} [data-theme="dark"] .kb-main{background:var(--bg);} [data-theme="dark"] .kb-graph-canvas{border-color:rgba(99,102,241,0.2);box-shadow:0 2px 12px rgba(0,0,0,.3);} [data-theme="dark"] .kb-content-textarea{background:var(--bg-input);border-color:var(--border);color:var(--text);} [data-theme="dark"] .kb-content-textarea:focus{background:var(--surface);border-color:var(--accent);} [data-theme="dark"] .kb-title-input{color:var(--text);} [data-theme="dark"] .kb-backlinks{background:rgba(255,255,255,.03);border-color:var(--border);} [data-theme="dark"] .kb-summary-content{background:var(--bg-input);border-color:var(--border);color:var(--text);} /* KB template modal */ [data-theme="dark"] .kb-tpl-card{background:var(--card);border-color:var(--border);} [data-theme="dark"] .kb-tpl-card:hover{border-color:var(--accent);background:rgba(165,180,252,.06);} [data-theme="dark"] .kb-tpl-modal-header{border-bottom-color:var(--border);} /* KB custom selects */ [data-theme="dark"] .kb-custom-select-btn{background:var(--bg-input);border-color:var(--border);color:var(--text);} [data-theme="dark"] .kb-custom-select-btn:focus{background:var(--surface);border-color:var(--accent);} [data-theme="dark"] .kb-custom-select-dropdown{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-lg);} [data-theme="dark"] .kb-csel-option:hover{background:var(--bg-hover);} [data-theme="dark"] .kb-csel-option.active{background:var(--accent-light);color:var(--accent);} /* KB category filters */ [data-theme="dark"] .kb-cat-filter{color:var(--muted);} [data-theme="dark"] .kb-cat-filter:hover{background:var(--bg-hover);color:var(--text);} [data-theme="dark"] .kb-cat-filter.active{background:var(--accent-light);color:var(--accent);} /* KB AI dropdown */ [data-theme="dark"] .kb-ai-menu{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-lg);} [data-theme="dark"] .kb-ai-menu div:hover{background:var(--bg-hover);} /* KB meeting */ [data-theme="dark"] .kb-transcript-area{background:var(--bg-input);border-color:var(--border);} [data-theme="dark"] .kb-meeting-setup{background:var(--surface);} /* ── Pagination ── */ [data-theme="dark"] .pagination button{background:var(--surface);border-color:var(--border);color:var(--text);} [data-theme="dark"] .pagination button:hover{background:var(--bg-hover);} /* ── Login — keep login screen mostly as-is (already dark gradient) ── */ [data-theme="dark"] .login-card{background:rgba(31,41,55,.97);box-shadow:var(--shadow-xl);} [data-theme="dark"] .login-card-title{color:var(--muted);} [data-theme="dark"] .login-error{background:var(--red-light);border-color:rgba(252,165,165,.3);} [data-theme="dark"] .demo-acc{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--text);} [data-theme="dark"] .demo-acc:hover{background:var(--accent-light);border-color:var(--accent);} [data-theme="dark"] .demo-name{color:var(--text);} [data-theme="dark"] .demo-cred{color:var(--muted);} /* ── Import ── */ [data-theme="dark"] .import-drop-zone{background:var(--bg-input);border-color:var(--border);} [data-theme="dark"] .import-card{background:var(--card);border-color:var(--border);} [data-theme="dark"] .import-table th{background:var(--bg-input);} [data-theme="dark"] .import-table .import-cell-input:focus,[data-theme="dark"] .import-table .import-cell-select:focus{background:var(--bg-input);} [data-theme="dark"] .import-drop-icon{background:rgba(165,180,252,.12);color:var(--accent);} /* ── Access banner ── */ [data-theme="dark"] .access-banner.limited{background:var(--yellow-light);border-color:rgba(253,230,138,.3);color:var(--yellow);} /* ── Scrollbar (global) ── */ [data-theme="dark"] ::-webkit-scrollbar-track{background:transparent;} [data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px;} [data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);} /* ══ PRODUCT MANAGEMENT — NAV ══════════════════════════════════════ */ .nav-product { display: flex; } /* ══ OKR ════════════════════════════════════════════════════════════ */ .okr-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); } .okr-card-header { display: flex; align-items: flex-start; gap: 12px; } .okr-title { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 2px; } .okr-desc { font-size: 12px; color: var(--muted); margin-top: 4px; } .okr-status-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .4px; } .okr-status-badge.active { background: var(--green-light); color: var(--green); } .okr-status-badge.draft { background: var(--surface2); color: var(--muted); } .okr-status-badge.completed { background: var(--green-light); color: var(--green); } .okr-status-badge.cancelled { background: var(--red-light); color: var(--red); } .okr-status-badge.on-track { background: var(--green-light); color: var(--green); } .okr-status-badge.at-risk { background: var(--yellow-light); color: var(--yellow); } .okr-status-badge.off-track { background: var(--red-light); color: var(--red); } .kr-list { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; } .kr-item { background: var(--bg); border-radius: 8px; padding: 10px 12px; } .kr-title { font-size: 12px; font-weight: 600; color: var(--text); } .kr-progress-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 3px 0; } .kr-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s ease; } /* ══ ROADMAP ════════════════════════════════════════════════════════ */ .roadmap-horizons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: calc(100vh - 180px); } @media (max-width: 900px) { .roadmap-horizons { grid-template-columns: 1fr; } } .horizon-column { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; min-height: 300px; } .horizon-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); } .horizon-header.horizon-now { border-bottom-color: var(--green); } .horizon-header.horizon-next { border-bottom-color: var(--yellow); } .horizon-header.horizon-later { border-bottom-color: var(--accent); } .horizon-title { font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; } .horizon-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .horizon-dot-now { background: var(--green); } .horizon-dot-next { background: var(--yellow); } .horizon-dot-later { background: var(--accent); } .horizon-count { background: var(--card); color: var(--muted); font-size:11px; font-family:var(--mono); padding:2px 8px; border-radius:10px; border:1px solid var(--border); font-weight:700; } .horizon-items { flex: 1; display: flex; flex-direction: column; gap: 8px; } .initiative-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px; box-shadow: var(--shadow-xs); transition: all .18s; cursor: grab; user-select: none; } .initiative-card:hover { border-color: rgba(79,70,229,.3); transform: translateY(-2px); box-shadow: var(--shadow-md); } .initiative-card:active { cursor: grabbing; } /* Drag-and-drop states */ .rd-clone { position:fixed; pointer-events:none; z-index:9999; opacity:.85; transform:rotate(2deg); box-shadow: var(--shadow-lg); } .rd-source { opacity:.3; } .rd-drop-zone { border:2px dashed var(--accent)!important; background:rgba(79,70,229,.04)!important; } .feature-chip { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px; background: var(--accent-light); color: var(--accent); font-weight: 600; } .feature-chip.feature-completed { background: var(--green-light); color: var(--green); } .feature-chip.feature-in-progress { background: var(--blue-light, rgba(37,99,235,.1)); color: var(--accent); } .feature-chip.feature-cancelled { background: var(--red-light); color: var(--red); } /* ── Initiative card internals ─────────────────────────────────── */ .init-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; } .init-card-meta { display:flex; gap:4px; flex-wrap:wrap; align-items:center; } .init-card-actions { display:flex; gap:3px; flex-shrink:0; } .init-rice-badge { font-size:10px; background:var(--accent); color:#fff; padding:1px 7px; border-radius:10px; font-weight:700; } .init-card-title { font-weight:600; font-size:13px; margin-bottom:4px; line-height:1.3; } .init-card-desc { font-size:11px; color:var(--muted); margin-bottom:6px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .init-card-links { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; } .init-card-link-chip { font-size:10px; background:var(--surface2,var(--surface)); border:1px solid var(--border); color:var(--muted); padding:1px 7px; border-radius:10px; display:inline-flex; align-items:center; gap:3px; } .init-doc-chip { background:var(--accent-light,rgba(37,99,235,.08)); color:var(--accent); border-color:transparent; } .init-progress-row { margin:6px 0; } .init-progress-label { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:3px; } .init-features-list { display:flex; flex-direction:column; gap:2px; margin:6px 0; } .init-feature-row { display:flex; justify-content:space-between; align-items:center; padding:3px 6px; border-radius:5px; background:var(--surface); } .init-feature-row:hover { background:var(--bg-hover); } .init-feature-left { display:flex; align-items:center; gap:5px; min-width:0; } .init-feature-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--muted); } .init-feat-completed { background:var(--green)!important; } .init-feat-in-progress { background:var(--accent)!important; } .init-feat-planned { background:var(--blue,var(--accent))!important; } .init-feat-cancelled { background:var(--red)!important; } .init-feature-name { font-size:11px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .init-feature-actions { display:flex; gap:2px; flex-shrink:0; opacity:0; transition:opacity .15s; } .init-feature-row:hover .init-feature-actions { opacity:1; } .init-add-feat-btn { margin-top:6px; width:100%; justify-content:center; } /* Project execution progress block */ .init-proj-progress { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:7px 9px; margin:6px 0; } .init-proj-progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; gap:6px; } .init-proj-progress-name { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--text); min-width:0; overflow:hidden; } .init-proj-progress-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .init-proj-progress-right { display:flex; align-items:center; gap:5px; flex-shrink:0; } .init-proj-pct { font-size:11px; font-weight:700; font-family:var(--mono); color:var(--accent); } .init-proj-fill { background: linear-gradient(90deg, var(--accent), var(--green)); } /* RICE section in modal */ .init-rice-section { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; } .init-rice-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .init-rice-hint { font-weight:400; text-transform:none; letter-spacing:0; font-size:11px; color:var(--muted); } .init-rice-score { font-size:12px; font-weight:700; color:var(--green); background:var(--green-light); padding:2px 10px; border-radius:10px; margin-left:auto; } /* ══ USER PERSONAS ══════════════════════════════════════════════════ */ .persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .persona-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; text-align: center; } .persona-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--purple, #7c3aed)); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .persona-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; } .persona-role { font-size: 11px; color: var(--muted); margin-bottom: 8px; } .persona-section { width: 100%; text-align: left; margin-bottom: 8px; } .persona-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted); margin-bottom: 2px; } .persona-section div { font-size: 12px; color: var(--text); } .pain-point-item { padding: 10px 12px; border-radius: 8px; margin-bottom: 6px; border-left: 3px solid var(--border); background: var(--bg); } .pain-point-item.pain-critical { border-color: var(--red); } .pain-point-item.pain-high { border-color: var(--yellow); } .pain-point-item.pain-medium { border-color: var(--accent); } .pain-point-item.pain-low { border-color: var(--green); } /* ══ CUSTOMER FEEDBACK ══════════════════════════════════════════════ */ .section-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 0; } .tab-btn { padding: 8px 16px; font-size: 13px; font-weight: 600; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; color: var(--muted); transition: color .15s, border-color .15s; } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-btn:hover { color: var(--text); } .fr-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 10px; } /* ══ PRODUCT METRICS ════════════════════════════════════════════════ */ .metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .metric-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-sm); } /* ══ RELEASES ═══════════════════════════════════════════════════════ */ .release-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 10px; box-shadow: var(--shadow-sm); transition: box-shadow .18s, border-color .18s; } .release-card:hover { border-color: rgba(79,70,229,.25); box-shadow: var(--shadow-md); } .release-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .release-card-left { flex:1; min-width:0; } .release-card-actions { display:flex; gap:6px; flex-shrink:0; align-items:flex-start; } .release-card-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; } .release-version { font-family:var(--mono); font-size:14px; font-weight:800; color:var(--accent); background:var(--accent-light); padding:2px 10px; border-radius:6px; } .release-name { font-size:13px; font-weight:600; color:var(--text); } .release-project-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); background:var(--surface); border:1px solid var(--border); padding:2px 8px; border-radius:10px; margin-bottom:6px; } .release-desc { font-size:12px; color:var(--muted); margin-bottom:6px; line-height:1.5; } .release-dates { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--muted); } .release-dates span { display:inline-flex; align-items:center; gap:3px; } .changelog-content { padding: 12px 0; max-height: 400px; overflow-y: auto; font-size: 13px; line-height: 1.7; } /* ── Changelog modal ─────────────────────────────────────────── */ .cl-modal { max-width: 640px; } .cl-release-meta { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:8px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:12px; } .cl-meta-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .cl-meta-title { font-size:13px; font-weight:600; color:var(--text); } .cl-meta-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .cl-meta-date { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--muted); } .cl-meta-released { color:var(--green); } .cl-release-desc { font-size:12px; color:var(--muted); margin-bottom:12px; line-height:1.5; } .cl-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; } .cl-notes-section { background:var(--surface); border-left:3px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:10px 14px; margin-bottom:14px; font-size:12px; line-height:1.6; } .cl-notes-body { color:var(--text); } .cl-features-section { margin-top:4px; } .cl-feature-list { display:flex; flex-direction:column; gap:2px; } .cl-h2 { font-size:13px; font-weight:700; color:var(--text); padding:4px 0; display:none; } .cl-type-header { margin:10px 0 4px; } .cl-type-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:2px 10px; border-radius:10px; } .cl-type-feature { background:var(--accent-light,rgba(79,70,229,.1)); color:var(--accent); } .cl-type-enhance { background:rgba(16,185,129,.1); color:var(--green); } .cl-type-bug { background:rgba(239,68,68,.1); color:var(--red); } .cl-type-debt { background:rgba(217,119,6,.1); color:var(--yellow); } .cl-type-research { background:rgba(139,92,246,.1); color:#7c3aed; } .cl-type-other { background:var(--surface2,var(--surface)); color:var(--muted); border:1px solid var(--border); } .cl-item { display:flex; align-items:baseline; gap:8px; padding:5px 8px; border-radius:6px; } .cl-item:hover { background:var(--bg-hover); } .cl-item-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:2px; } .cl-item-title { font-size:12px; font-weight:600; color:var(--text); flex-shrink:0; } .cl-item-desc { font-size:12px; color:var(--muted); } .cl-spacer { height:4px; } .cl-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 16px; color:var(--muted); font-size:12px; text-align:center; border:1px dashed var(--border); border-radius:var(--r-md); } .cl-empty svg { opacity:.4; } /* ══ HYPOTHESES ══════════════════════════════════════════════════════ */ .hypothesis-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); } .hypothesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } @media (max-width: 700px) { .hypothesis-grid { grid-template-columns: 1fr; } } .hyp-section { background: var(--bg); border-radius: 8px; padding: 10px 12px; } .hyp-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted); margin-bottom: 4px; } .hyp-section div { font-size: 12px; line-height: 1.5; } /* ══ COMPETITORS ═════════════════════════════════════════════════════ */ .competitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .competitor-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-sm); } .swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .swot-cell { background: var(--bg); border-radius: 8px; padding: 8px 10px; font-size: 12px; } .swot-cell.swot-s { border-left: 3px solid var(--green); } .swot-cell.swot-w { border-left: 3px solid var(--red); } .swot-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted); margin-bottom: 3px; } /* ══ EMPTY STATE ════════════════════════════════════════════════════ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 24px; color: var(--muted); font-size: 14px; text-align: center; } /* ══ DARK MODE ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .okr-card, [data-theme="dark"] .initiative-card, [data-theme="dark"] .persona-card, [data-theme="dark"] .fr-card, [data-theme="dark"] .metric-card, [data-theme="dark"] .release-card, [data-theme="dark"] .hypothesis-card, [data-theme="dark"] .competitor-card { background: var(--card); border-color: var(--border); } [data-theme="dark"] .kr-item, [data-theme="dark"] .pain-point-item, [data-theme="dark"] .hyp-section, [data-theme="dark"] .swot-cell { background: rgba(255,255,255,.04); } [data-theme="dark"] .horizon-column { background: rgba(255,255,255,.02); } [data-theme="dark"] .tab-btn { color: var(--muted); } [data-theme="dark"] .tab-btn.active { color: var(--accent); } /* ══ PRODUCT DOCS ═══════════════════════════════════════════════ */ /* Doc list grid — .content already provides padding:24px 26px */ .doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;} .doc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-xs);} .doc-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md);} .doc-card-header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .doc-card-del{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--muted);padding:3px 5px;border-radius:var(--r-sm);opacity:0;transition:opacity .15s,color .15s;} .doc-card:hover .doc-card-del{opacity:1;} .doc-card-del:hover{color:var(--red);} .doc-card-title{font-weight:700;font-size:14px;color:var(--text);line-height:1.4;word-break:break-word;} .doc-card-meta{font-size:11px;color:var(--muted);font-family:var(--mono);} /* Full-screen editor overlay */ .doc-editor-overlay{position:fixed;inset:0;background:var(--bg);z-index:200;display:none;flex-direction:column;} .doc-editor-overlay.open{display:flex;animation:pageIn .2s ease both;} /* Topbar matches .topbar exactly */ .doc-editor-topbar{display:flex;align-items:center;gap:12px;padding:0 24px;height:56px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;box-shadow:var(--shadow-xs);} .doc-editor-back{background:transparent;border:1.5px solid var(--border);color:var(--muted);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-sm);transition:all .18s;} .doc-editor-back:hover{color:var(--text);border-color:var(--accent);background:var(--accent-light);} .doc-editor-meta{display:flex;align-items:center;gap:10px;flex:1;min-width:0;} .doc-editor-type-badge{flex-shrink:0;} .doc-editor-title-input{flex:1;background:none;border:none;outline:none;font-size:15px;font-weight:700;color:var(--text);font-family:var(--font);letter-spacing:-.3px;min-width:0;} .doc-editor-title-input::placeholder{color:var(--muted-light);} .doc-editor-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;} /* Status select matches .filter-select */ .doc-editor-status-select{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:12.5px;padding:4px 10px;outline:none;cursor:pointer;transition:border-color .2s;} .doc-editor-status-select:focus{border-color:var(--accent);} /* Save indicator matches .topbar-date / .result-count */ .doc-save-indicator{font-size:11px;color:var(--muted);font-family:var(--mono);white-space:nowrap;background:var(--bg);padding:4px 10px;border-radius:20px;border:1px solid var(--border);} .doc-editor-body{flex:1;overflow-y:auto;position:relative;} .doc-editor-body::-webkit-scrollbar{width:5px;} .doc-editor-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;} .doc-editor-body::-webkit-scrollbar-track{background:transparent;} .doc-editor-content{max-width:760px;margin:0 auto;padding:8px 24px 80px;padding-left:80px;min-height:100%;counter-reset:list-counter;} /* Blocks */ .doc-block{outline:none;caret-color:var(--text);color:var(--text);line-height:1.7;padding:3px 6px;border-radius:var(--r-sm);margin:1px 0;min-height:1.7em;word-break:break-word;transition:background .12s;} .doc-block:empty::before{content:'Type / for commands…';color:var(--muted-light);pointer-events:none;} .doc-block:hover,.doc-block:focus{background:var(--bg-hover);} .doc-block-h1{font-size:2em;font-weight:700;letter-spacing:-.5px;margin-top:.6em;} .doc-block-h2{font-size:1.5em;font-weight:700;letter-spacing:-.3px;margin-top:.5em;} .doc-block-h3{font-size:1.2em;font-weight:700;letter-spacing:-.2px;margin-top:.4em;} .doc-block-bullet{padding-left:1.6em;position:relative;} .doc-block-bullet::before{content:'•';position:absolute;left:.4em;color:var(--muted);} .doc-block-numbered{padding-left:1.6em;position:relative;counter-increment:list-counter;} .doc-block-numbered::before{content:counter(list-counter)'.';position:absolute;left:.1em;color:var(--muted);} .doc-block-quote{border-left:3px solid var(--accent);padding-left:14px;color:var(--muted);font-style:italic;margin:4px 0;} .doc-block-callout{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-md);padding:12px 14px;margin:4px 0;} .callout-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;} .callout-text{flex:1;outline:none;caret-color:var(--text);color:var(--text);} .doc-block-code{font-family:var(--mono);font-size:12.5px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;white-space:pre-wrap;tab-size:2;margin:4px 0;color:var(--text-2);} .doc-block-divider{padding:8px 0;cursor:default;} .doc-block-divider:hover,.doc-block-divider:focus{background:transparent;} .doc-block-divider hr{border:none;border-top:1px solid var(--border);margin:0;} .doc-block-todo{display:flex;align-items:flex-start;gap:8px;padding:3px 6px;} .doc-block-todo:hover,.doc-block-todo:focus-within{background:var(--bg-hover);border-radius:var(--r-sm);} .todo-check{flex-shrink:0;margin-top:3px;accent-color:var(--accent);} .todo-text{flex:1;outline:none;caret-color:var(--text);color:var(--text);} /* Slash command menu — matches .assignee-dropdown / .suggest-card panel style */ .slash-menu{position:absolute;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);min-width:210px;z-index:500;display:none;flex-direction:column;overflow:hidden;} .slash-menu.open{display:flex;animation:fadeUp .15s cubic-bezier(.16,1,.3,1) both;} .slash-menu-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;font-size:13px;color:var(--text);transition:background .12s;} .slash-menu-item:hover,.slash-menu-item.active{background:var(--bg-hover);color:var(--accent);} .slash-menu-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);flex-shrink:0;} /* Inline format toolbar */ .inline-toolbar{position:absolute;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);display:none;align-items:center;gap:2px;padding:4px 6px;z-index:500;} .inline-toolbar.open{display:flex;animation:fadeUp .12s ease both;} .inline-toolbar button{background:none;border:none;cursor:pointer;color:var(--text-2);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-size:13px;font-family:var(--font);font-weight:700;transition:all .12s;} .inline-toolbar button:hover{background:var(--bg-hover);color:var(--accent);} /* Dark mode */ [data-theme="dark"] .doc-card{background:var(--card);border-color:var(--border);} [data-theme="dark"] .doc-card:hover{border-color:var(--accent);background:rgba(165,180,252,.04);} [data-theme="dark"] .doc-editor-overlay{background:var(--bg);} [data-theme="dark"] .doc-editor-topbar{background:var(--surface);border-color:var(--border);} [data-theme="dark"] .doc-editor-status-select{background:var(--bg-input);border-color:var(--border);color:var(--text);} [data-theme="dark"] .doc-block:hover,[data-theme="dark"] .doc-block:focus{background:var(--bg-hover);} [data-theme="dark"] .doc-block-todo:hover,[data-theme="dark"] .doc-block-todo:focus-within{background:var(--bg-hover);} [data-theme="dark"] .doc-block-code{background:var(--bg-input);border-color:var(--border);} [data-theme="dark"] .doc-callout-info{background:color-mix(in srgb,var(--accent) 12%,transparent);} [data-theme="dark"] .slash-menu,[data-theme="dark"] .inline-toolbar{background:var(--surface);border-color:var(--border);} [data-theme="dark"] .slash-menu-icon{background:var(--bg);border-color:var(--border);} [data-theme="dark"] .doc-editor-body::-webkit-scrollbar-thumb{background:var(--border);} [data-theme="dark"] .doc-save-indicator{background:var(--bg);border-color:var(--border);} /* Doc page header (Notion-style) */ .doc-page-header { max-width:760px; margin:0 auto; padding:48px 24px 8px; position:relative; } .doc-page-icon-wrap { position:relative; display:inline-block; margin-bottom:8px; } .doc-page-icon { font-size:52px; line-height:1.1; cursor:pointer; background:none; border:none; padding:4px 6px; border-radius:var(--r-md); transition:background .15s; display:block; } .doc-page-icon:hover { background:var(--bg-hover); } .doc-emoji-picker { position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:12px; z-index:600; width:280px; display:none; } .doc-emoji-picker.open { display:block; animation:fadeUp .15s cubic-bezier(.16,1,.3,1) both; } .doc-emoji-picker-title { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; } .doc-emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; } .doc-emoji-btn { font-size:22px; cursor:pointer; background:none; border:none; padding:4px; border-radius:var(--r-sm); transition:background .12s; line-height:1.2; text-align:center; } .doc-emoji-btn:hover { background:var(--bg-hover); } .doc-page-title { font-size:2.5em; font-weight:800; color:var(--text); letter-spacing:-.6px; line-height:1.2; outline:none; caret-color:var(--text); word-break:break-word; min-height:1.2em; margin-bottom:16px; } .doc-page-title:empty::before { content:attr(placeholder); color:var(--muted-light); pointer-events:none; } /* Block row wrapper */ .block-row { display:flex; align-items:flex-start; gap:0; position:relative; } .block-row:hover .block-actions, .block-row:focus-within .block-actions { opacity:1; } .block-actions { display:flex; align-items:center; gap:1px; opacity:0; transition:opacity .15s; flex-shrink:0; padding-top:5px; width:52px; justify-content:flex-end; margin-right:4px; } .block-add-btn { background:none; border:none; cursor:pointer; color:var(--muted); font-size:16px; line-height:1; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); transition:all .12s; padding:0; } .block-add-btn:hover { background:var(--bg-hover); color:var(--accent); } .block-drag-handle { background:none; border:none; cursor:grab; color:var(--muted); width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); transition:all .12s; padding:0; } .block-drag-handle:hover { background:var(--bg-hover); color:var(--text); } .block-drag-handle:active { cursor:grabbing; } .block-row .doc-block { flex:1; min-width:0; } .dragging-source { opacity: 0.25; } /* Dragging styles */ .block-drag-line { position:absolute; left:0; right:0; height:2px; background:var(--accent); border-radius:2px; pointer-events:none; z-index:400; } /* Slash menu improvements */ .slash-menu { min-width:260px; max-height:400px; overflow-y:auto; } .slash-menu-section { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; padding:10px 14px 4px; } .slash-menu-info { display:flex; flex-direction:column; gap:1px; } .slash-menu-name { font-size:13px; font-weight:600; color:var(--text); } .slash-menu-desc { font-size:11px; color:var(--muted); } .slash-menu-item { align-items:center; gap:10px; } .slash-menu-item:hover .slash-menu-name, .slash-menu-item.active .slash-menu-name { color:var(--accent); } /* Inline toolbar separator */ .inline-sep { width:1px; height:18px; background:var(--border); margin:0 2px; flex-shrink:0; } /* New callout variants */ .doc-callout-info { background:color-mix(in srgb,var(--accent) 10%,transparent); border-left:3px solid var(--accent); } .doc-callout-warning { background:color-mix(in srgb,#f59e0b 10%,transparent); border-left:3px solid #f59e0b; } .doc-callout-success { background:color-mix(in srgb,var(--green) 10%,transparent); border-left:3px solid var(--green); } /* Image blocks */ .doc-block-image-wrap { position:relative; border-radius:var(--r-md); overflow:hidden; margin:4px 0; cursor:pointer; } .doc-block-image-wrap:hover .doc-block-image-hint { opacity:1; } .doc-block-img { display:block; max-width:100%; border-radius:var(--r-md); } .doc-block-image-hint { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:4px 10px; border-radius:20px; opacity:0; transition:opacity .15s; display:flex; align-items:center; gap:4px; cursor:pointer; } .doc-block-image-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed var(--border); border-radius:var(--r-md); padding:32px; margin:4px 0; color:var(--muted); cursor:pointer; transition:border-color .15s; } .doc-block-image-placeholder:hover { border-color:var(--accent); } .doc-image-placeholder-text { font-size:13px; } .doc-image-url-input { width:100%; max-width:360px; padding:6px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-family:var(--font); font-size:13px; color:var(--text); background:var(--bg-input); outline:none; margin-top:4px; } .doc-image-url-input:focus { border-color:var(--accent); } /* Word count footer */ .doc-word-count-bar { max-width:760px; margin:0 auto; padding:8px 24px 24px; font-size:11px; color:var(--muted); font-family:var(--mono); text-align:right; } /* Doc card emoji icon */ .doc-card-icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; line-height:1; color:var(--text-2); } /* Dark mode additions */ [data-theme="dark"] .doc-emoji-picker { background:var(--surface); border-color:var(--border); } [data-theme="dark"] .doc-block-image-placeholder { border-color:var(--border); } [data-theme="dark"] .doc-image-url-input { background:var(--bg-input); border-color:var(--border); color:var(--text); } /* ── Doc Card Additions ─────────────────────────────────────────── */ .doc-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;} .doc-card-project{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .doc-card-kickoff-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-sm);border:1.5px solid var(--green-light);background:transparent;color:var(--green);font-size:11px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;flex-shrink:0;} .doc-card-kickoff-btn:hover{background:var(--green-light);} .doc-card-btn{background:none;border:none;cursor:pointer;color:var(--muted);opacity:0;transition:opacity .15s,color .12s;padding:3px;display:flex;align-items:center;border-radius:var(--r-sm);} .doc-card:hover .doc-card-btn{opacity:1;} .doc-card-btn:hover{color:var(--accent);background:var(--bg-hover);} /* ── Kickoff Requests Page ──────────────────────────────────────── */ .kickoff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;} .kickoff-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;gap:8px;} .kickoff-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md);} .kickoff-card-header{display:flex;align-items:center;gap:6px;} .kickoff-card-badges{display:flex;align-items:center;gap:5px;flex:1;flex-wrap:wrap;} .kickoff-card-del{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--muted);opacity:0;transition:opacity .15s,color .12s;padding:2px;display:flex;align-items:center;} .kickoff-card:hover .kickoff-card-del{opacity:1;} .kickoff-card-del:hover{color:var(--red);} .kickoff-card-title{font-weight:700;font-size:14px;color:var(--text);line-height:1.4;} .kickoff-doc-ref-small,.kickoff-proj-ref{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .kickoff-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;} .kickoff-card-meta{font-size:11px;color:var(--muted);font-family:var(--mono);} .kickoff-card-date{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-family:var(--mono);} /* Kickoff modal doc ref */ .kickoff-doc-ref{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-hover);border-radius:var(--r-md);border:1px solid var(--border);margin-bottom:16px;font-size:13px;color:var(--text);font-weight:500;} /* Kickoff detail modal */ .kickoff-detail-badges{display:flex;align-items:center;gap:8px;margin-bottom:14px;} .kickoff-detail-desc{font-size:14px;color:var(--text-2);line-height:1.6;margin-bottom:14px;} .kickoff-detail-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;} .kickoff-detail-row{display:flex;align-items:baseline;gap:10px;font-size:13.5px;} .kickoff-detail-label{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;min-width:100px;flex-shrink:0;} .kickoff-doc-ref-badge{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--text);} .kickoff-detail-notes{padding:12px 14px;background:var(--bg-hover);border-radius:var(--r-md);border:1px solid var(--border);} .kickoff-detail-notes p{font-size:13.5px;color:var(--text-2);line-height:1.6;margin:4px 0 0;} [data-theme="dark"] .kickoff-card{background:var(--card);border-color:var(--border);} [data-theme="dark"] .kickoff-card:hover{border-color:var(--accent);background:rgba(165,180,252,.04);} [data-theme="dark"] .kickoff-doc-ref{background:var(--bg-input);border-color:var(--border);} [data-theme="dark"] .kickoff-detail-notes{background:var(--bg-input);border-color:var(--border);}