/* =====================================================================
MikeSport Work Management — Asana-inspired design system
Palette: MikeSport Orange #F1582B + White
===================================================================== */
:root{
/* Brand */
--ms-orange: #F1582B;
--ms-orange-600: #DB4A1F;
--ms-orange-700: #B83C17;
--ms-orange-50: #FFF2EC;
--ms-orange-100: #FFE4D7;
--ms-orange-200: #FFC9AF;
--ms-orange-tint: rgba(241,88,43,.10);
/* Neutrals */
--white: #FFFFFF;
--paper: #FAFAFA;
--ink-900: #1E1F21;
--ink-800: #2C2D30;
--ink-700: #44464A;
--ink-600: #6D6E70;
--ink-500: #8E8F92;
--ink-400: #B4B5B8;
--ink-300: #D7D8DB;
--ink-200: #EAEBEE;
--ink-100: #F3F4F6;
--ink-50: #F8F9FA;
/* Semantic */
--success: #14A37F;
--warning: #E8A317;
--danger: #E5484D;
--info: #3E7BFA;
/* Sizing */
--topbar-h: 56px;
--sidebar-w: 240px;
--sidebar-w-collapsed: 64px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
/* Shadows */
--shadow-xs: 0 1px 2px rgba(16,24,40,.05);
--shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.05);
--shadow-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
--shadow-lg: 0 12px 24px -6px rgba(16,24,40,.12), 0 4px 8px -4px rgba(16,24,40,.08);
--shadow-xl: 0 24px 48px -12px rgba(16,24,40,.18);
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
font-family:var(--font-sans);
font-size:14px;
color:var(--ink-900);
background:var(--white);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:transparent; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
svg{ width:20px; height:20px; flex-shrink:0; }
[hidden]{ display:none !important; }
.muted{ color:var(--ink-500); }
/* ╔══════════════════════════════════════════════════════╗
║ LOGIN SCREEN — MAGICAL MIKESPORT EDITION ║
╚══════════════════════════════════════════════════════╝ */
.login-screen{
position:fixed; inset:0; display:grid;
grid-template-columns: 1fr minmax(420px, 520px);
background: #0B0C10;
z-index:10;
overflow:hidden;
}
/* ── Right: form panel over dark frosted glass ───────── */
.login-panel{
position:relative;
display:flex; align-items:center; justify-content:center;
padding:48px 56px;
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,246,242,.98));
border-left: 1px solid rgba(241,88,43,.15);
box-shadow: -30px 0 80px rgba(241,88,43,.08);
z-index:2;
}
.login-card{
width:100%; max-width:360px;
display:flex; flex-direction:column; gap:28px;
animation: login-rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes login-rise{
from{ opacity:0; transform:translateY(14px); }
to{ opacity:1; transform:translateY(0); }
}
.login-brand{ display:flex; flex-direction:column; gap:10px; }
.login-logo{ display:flex; align-items:center; gap:14px; }
.logo-dot{
width: 48px; height: 48px;
background: url('/logo.png') center/contain no-repeat;
flex-shrink: 0;
filter: drop-shadow(0 6px 18px rgba(241,88,43,.35));
animation: logo-bob 4.5s ease-in-out infinite;
}
@keyframes logo-bob{
0%,100%{ transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-3px) rotate(2deg); }
}
.logo-text{
font-size:26px; font-weight:800; letter-spacing:-.02em;
color: var(--ink-900);
position: relative;
background: linear-gradient(90deg,
var(--ink-900) 0%, var(--ink-900) 38%,
#FFB38F 48%, #fff 50%, #FFB38F 52%,
var(--ink-900) 62%, var(--ink-900) 100%);
background-size: 220% 100%;
background-position: 100% 0;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: wordmark-shimmer 5.5s ease-in-out infinite;
}
@keyframes wordmark-shimmer{
0%,100%{ background-position: 120% 0; }
50% { background-position: -20% 0; }
}
.logo-text-accent{
background: linear-gradient(135deg, var(--ms-orange) 0%, #FF8A3D 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.login-tagline{
color:var(--ink-600); margin:0; font-size:15px; font-weight:500;
}
.login-form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size:12px; font-weight:600; color:var(--ink-700);
text-transform:uppercase; letter-spacing:.06em; }
.field input, .field select{
width:100%;
padding:13px 16px;
border:1.5px solid var(--ink-200);
border-radius:12px;
background:var(--white);
transition: border-color .2s, box-shadow .2s, transform .15s;
outline:none;
font-size:14px;
}
.field input:hover, .field select:hover{ border-color: var(--ink-300); }
.field input:focus, .field select:focus{
border-color: var(--ms-orange);
box-shadow:
0 0 0 4px var(--ms-orange-tint),
0 6px 20px -8px rgba(241,88,43,.35);
transform: translateY(-1px);
}
.login-error{
background:#FEECEC; color:var(--danger);
padding:11px 14px; border-radius:10px;
font-size:13px; font-weight:500;
border:1px solid rgba(229,72,77,.25);
animation: shake .4s;
}
@keyframes shake{
0%,100%{ transform:translateX(0); }
25%{ transform:translateX(-4px); }
75%{ transform:translateX(4px); }
}
/* Magical primary button (scoped to login) */
.login-btn{
position:relative; overflow:hidden;
padding:14px 20px;
font-size:14px; font-weight:700; letter-spacing:.02em;
color:#fff;
background: linear-gradient(135deg, var(--ms-orange) 0%, #FF7A3D 55%, var(--ms-orange-600) 100%);
border-radius:12px;
box-shadow:
0 8px 24px -6px rgba(241,88,43,.55),
0 2px 0 rgba(255,255,255,.18) inset,
0 -2px 0 rgba(0,0,0,.08) inset;
transition: transform .15s ease, box-shadow .2s ease, filter .2s;
isolation: isolate;
}
.login-btn::before{
content: '';
position: absolute; inset: -2px;
border-radius: 14px;
background: conic-gradient(from 0deg,
transparent 0deg,
rgba(255,255,255,.85) 40deg,
rgba(255,194,152,.9) 80deg,
transparent 140deg,
transparent 360deg);
animation: btn-ring 3.2s linear infinite;
z-index: -1;
opacity: .65;
filter: blur(2px);
}
@keyframes btn-ring{ to{ transform: rotate(360deg); } }
.login-btn:hover{
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow:
0 14px 36px -4px rgba(241,88,43,.75),
0 2px 0 rgba(255,255,255,.22) inset;
}
.login-btn:hover::before{ opacity: 1; }
.login-btn:active{ transform: translateY(0); }
.login-btn-label{ position:relative; z-index:2; }
.login-btn-shine{
position:absolute; top:0; left:-60%;
width:60%; height:100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
transform: skewX(-20deg);
animation: shine 3.4s ease-in-out infinite;
pointer-events:none;
}
@keyframes shine{
0% { left:-60%; }
55% { left:120%; }
100% { left:120%; }
}
.login-foot{
display:flex; align-items:center; gap:8px;
color:var(--ink-500); font-size:12px;
}
.foot-dot{
width:8px; height:8px; border-radius:50%;
background:var(--success);
box-shadow: 0 0 10px var(--success);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
0%,100%{ opacity:.9; transform:scale(1); }
50% { opacity:.55; transform:scale(1.25); }
}
/* ── Left: magical art stage ─────────────────────────── */
.login-art{
position:relative; overflow:hidden;
background:
radial-gradient(1000px 700px at 50% 50%, #1A1B20 0%, #0B0C10 70%);
}
.aurora{
position:absolute; border-radius:50%;
filter: blur(70px);
mix-blend-mode: screen;
will-change: transform, opacity;
}
.aurora-1{
width:700px; height:700px; top:-180px; right:-180px;
background: radial-gradient(circle, rgba(241,88,43,.85) 0%, transparent 65%);
animation: float-a 14s ease-in-out infinite;
}
.aurora-2{
width:560px; height:560px; bottom:-140px; left:-120px;
background: radial-gradient(circle, rgba(255,138,61,.55) 0%, transparent 70%);
animation: float-b 18s ease-in-out infinite;
}
.aurora-3{
width:420px; height:420px; top:40%; left:30%;
background: radial-gradient(circle, rgba(255,194,152,.35) 0%, transparent 70%);
animation: float-c 22s ease-in-out infinite;
}
@keyframes float-a{
0%,100%{ transform: translate(0,0) scale(1); opacity:.9; }
50% { transform: translate(-40px, 40px) scale(1.08); opacity:1; }
}
@keyframes float-b{
0%,100%{ transform: translate(0,0) scale(1); opacity:.85; }
50% { transform: translate(50px,-40px) scale(1.12); opacity:1; }
}
@keyframes float-c{
0%,100%{ transform: translate(0,0) scale(1); opacity:.7; }
50% { transform: translate(30px,30px) scale(1.15); opacity:.9; }
}
.art-grid{
position:absolute; inset:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
pointer-events:none;
}
/* Center emblem — giant + breathing glow + 3D parallax + sheen */
.emblem-stage{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
pointer-events:none;
transform-style: preserve-3d;
transition: transform .18s ease-out;
will-change: transform;
}
.emblem-hero{
position: relative; z-index: 2;
width: min(62%, 620px);
height:auto;
filter:
drop-shadow(0 30px 80px rgba(241,88,43,.6))
drop-shadow(0 0 50px rgba(255,138,61,.5))
drop-shadow(0 0 120px rgba(241,88,43,.25));
animation: emblem-float 8s ease-in-out infinite;
transform-origin: 50% 60%;
}
@keyframes emblem-float{
0%,100%{ transform: translateY(0) rotate(-2deg) scale(1); }
50% { transform: translateY(-14px) rotate(2deg) scale(1.02); }
}
.emblem-glow{
position:absolute; width: 70%; height: 70%;
border-radius:50%;
background: radial-gradient(circle, rgba(241,88,43,.55) 0%, transparent 65%);
filter: blur(55px);
animation: glow-pulse 5s ease-in-out infinite;
z-index: 1;
}
@keyframes glow-pulse{
0%,100%{ opacity:.8; transform: scale(1); }
50% { opacity:1; transform: scale(1.12); }
}
/* Orbiting dashed halo ring */
.emblem-ring{
position:absolute; width: 72%; aspect-ratio: 1/1;
border-radius: 50%;
border: 1.5px dashed rgba(255,194,152,.35);
mask-image: conic-gradient(from 0deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
-webkit-mask-image: conic-gradient(from 0deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
animation: ring-spin 22s linear infinite;
z-index: 0;
}
@keyframes ring-spin{ to{ transform: rotate(360deg); } }
/* Iridescent sheen sweeping across the emblem */
.emblem-sheen{
position:absolute; inset:8%;
background: linear-gradient(115deg,
transparent 30%, rgba(255,255,255,.22) 48%, rgba(255,220,190,.35) 50%,
rgba(255,255,255,.22) 52%, transparent 70%);
mix-blend-mode: screen;
opacity: .7;
filter: blur(1px);
animation: sheen-sweep 7s ease-in-out infinite;
z-index: 3;
mask-image: url('/logo.png');
-webkit-mask-image: url('/logo.png');
mask-size: contain; -webkit-mask-size: contain;
mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-position: center; -webkit-mask-position: center;
pointer-events: none;
}
@keyframes sheen-sweep{
0% { transform: translateX(-40%); opacity: 0; }
50% { transform: translateX(0); opacity: .9; }
100% { transform: translateX(40%); opacity: 0; }
}
/* Aurora conic ribbon spinning behind everything */
.aurora-ribbon{
position:absolute; top:50%; left:50%;
width: 140%; aspect-ratio: 1/1;
transform: translate(-50%,-50%);
background: conic-gradient(from 0deg,
transparent 0deg,
rgba(241,88,43,.28) 40deg,
rgba(255,138,61,.35) 70deg,
transparent 140deg,
rgba(255,194,152,.22) 210deg,
transparent 280deg,
rgba(241,88,43,.25) 330deg,
transparent 360deg);
filter: blur(40px);
mix-blend-mode: screen;
animation: ribbon-spin 30s linear infinite;
opacity: .9;
pointer-events: none;
}
@keyframes ribbon-spin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
/* Rising embers */
.embers{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ember{
position:absolute; bottom:-10px;
width:6px; height:6px; border-radius:50%;
background: radial-gradient(circle, #FFCFA3 0%, var(--ms-orange) 55%, transparent 75%);
box-shadow: 0 0 8px rgba(241,88,43,.9), 0 0 18px rgba(241,88,43,.5);
opacity: 0;
animation: ember-rise 9s linear infinite;
filter: blur(.4px);
}
.ember.e1 { left: 6%; animation-delay: 0s; animation-duration: 8s; }
.ember.e2 { left: 14%; animation-delay: 1.3s; animation-duration: 11s; width:4px; height:4px; }
.ember.e3 { left: 22%; animation-delay: 2.6s; animation-duration: 9s; }
.ember.e4 { left: 30%; animation-delay: 3.8s; animation-duration: 12s; width:5px; height:5px; }
.ember.e5 { left: 40%; animation-delay: 0.7s; animation-duration: 10s; }
.ember.e6 { left: 48%; animation-delay: 5.0s; animation-duration: 8s; width:4px; height:4px; }
.ember.e7 { left: 58%; animation-delay: 1.9s; animation-duration: 11s; }
.ember.e8 { left: 67%; animation-delay: 3.2s; animation-duration: 9s; width:5px; height:5px; }
.ember.e9 { left: 76%; animation-delay: 4.5s; animation-duration: 12s; }
.ember.e10{ left: 84%; animation-delay: 2.1s; animation-duration: 10s; width:4px; height:4px; }
.ember.e11{ left: 91%; animation-delay: 6.0s; animation-duration: 8s; }
.ember.e12{ left: 96%; animation-delay: 0.3s; animation-duration: 11s; width:3px; height:3px; }
@keyframes ember-rise{
0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
10% { opacity: 1; }
60% { transform: translateY(-60vh) translateX(20px) scale(1.1); opacity: .9; }
90% { opacity: .2; }
100%{ transform: translateY(-105vh) translateX(-10px) scale(.6); opacity: 0; }
}
/* Cursor spotlight (interactive; opacity animated via JS) */
.spotlight{
position:absolute; inset:0; pointer-events:none;
background: radial-gradient(320px 320px at var(--mx,50%) var(--my,50%),
rgba(255,138,61,.18) 0%, rgba(255,138,61,.08) 30%, transparent 60%);
mix-blend-mode: screen;
opacity: 0;
transition: opacity .3s;
z-index: 4;
}
/* Sparkles */
.sparkles{ position:absolute; inset:0; pointer-events:none; }
.spark{
position:absolute; width:4px; height:4px; border-radius:50%;
background:#fff;
box-shadow:
0 0 6px #fff,
0 0 14px rgba(255,200,150,.9),
0 0 22px rgba(241,88,43,.7);
opacity:0;
animation: twinkle 6s linear infinite;
}
.spark.s1{ top:14%; left:22%; animation-delay: 0s; }
.spark.s2{ top:28%; left:74%; animation-delay: .9s; width:3px; height:3px; }
.spark.s3{ top:58%; left:18%; animation-delay: 1.8s; }
.spark.s4{ top:74%; left:62%; animation-delay: 2.4s; width:5px; height:5px; }
.spark.s5{ top:42%; left:88%; animation-delay: 3.1s; }
.spark.s6{ top:82%; left:34%; animation-delay: 3.9s; width:3px; height:3px; }
.spark.s7{ top:20%; left:54%; animation-delay: 4.6s; }
.spark.s8{ top:66%; left:80%; animation-delay: 5.3s; width:5px; height:5px; }
@keyframes twinkle{
0%,100%{ opacity:0; transform: scale(.6); }
45% { opacity:1; transform: scale(1.2); }
55% { opacity:1; transform: scale(1); }
}
/* Caption at bottom of art panel */
.art-caption{
position:absolute; left:48px; bottom:40px;
color:#fff; z-index:2;
max-width:60%;
text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.art-caption-title{
font-size:28px; font-weight:700; letter-spacing:-.02em;
line-height:1.15;
background: linear-gradient(135deg, #fff 0%, #FFD1B8 60%, var(--ms-orange) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
.art-caption-sub{
margin-top:6px; font-size:13px; color:rgba(255,255,255,.65);
font-weight:500; letter-spacing:.01em;
}
/* ─── Mobile: stacked magical layout ─────────────────── */
@media(max-width: 980px){
.login-screen{
display: block;
overflow-y: auto;
background: #0B0C10;
}
.login-art{
position: relative;
height: 42vh; min-height: 280px; max-height: 380px;
width: 100%;
}
.art-caption{
left: 24px; right: 24px; bottom: 20px; max-width: 100%;
}
.art-caption-title{ font-size: 22px; }
.art-caption-sub{ font-size: 12px; }
.emblem-hero{ width: min(72%, 420px); }
.login-panel{
position: relative;
padding: 0 20px 40px;
margin-top: -48px;
background: transparent;
border-left: 0;
box-shadow: none;
z-index: 3;
}
.login-card{
background: rgba(255,255,255,0.92);
backdrop-filter: blur(22px) saturate(1.2);
-webkit-backdrop-filter: blur(22px) saturate(1.2);
max-width: 100%;
padding: 28px 24px 26px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 30px 60px -20px rgba(241,88,43,.35),
0 20px 40px -10px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.login-card .login-brand{ align-items: center; text-align: center; }
.login-card .login-logo{ justify-content: center; }
.login-card .login-tagline{ text-align: center; }
.login-card .login-foot{ justify-content: center; }
.logo-text{ font-size: 22px; }
}
@media(max-width: 480px){
.login-art{ height: 38vh; min-height: 240px; }
.art-caption-title{ font-size: 18px; line-height: 1.2; }
.emblem-hero{ width: 78%; }
.login-panel{ margin-top: -44px; padding: 0 14px 32px; }
.login-card{ padding: 24px 20px; border-radius: 18px; gap: 22px; }
.login-btn{ padding: 13px 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce){
.aurora, .aurora-ribbon, .emblem-hero, .emblem-glow, .emblem-ring, .emblem-sheen,
.spark, .ember, .login-btn-shine, .logo-dot, .foot-dot, .login-card, .logo-text,
.login-btn::before{
animation: none !important;
}
.emblem-stage{ transform: none !important; }
}
/* ╔══════════════════════════════════════════════════════╗
║ BUTTONS ║
╚══════════════════════════════════════════════════════╝ */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:9px 16px; border-radius:var(--radius-md);
font-size:14px; font-weight:600; line-height:1;
transition: background .15s, color .15s, box-shadow .15s, transform .05s;
white-space:nowrap; user-select:none;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
background: var(--ms-orange); color:var(--white);
box-shadow: 0 1px 2px rgba(241,88,43,.3);
}
.btn-primary:hover{ background: var(--ms-orange-600); }
.btn-primary:active{ background: var(--ms-orange-700); }
.btn-ghost{ background:transparent; color:var(--ink-700); }
.btn-ghost:hover{ background: var(--ink-100); }
.btn-outline{
background:var(--white); color:var(--ink-900);
border:1px solid var(--ink-300);
}
.btn-outline:hover{ border-color:var(--ink-400); background:var(--ink-50); }
.btn-danger{ background:var(--danger); color:var(--white); }
.btn-danger:hover{ background:#C43F43; }
.btn-block{ width:100%; padding:12px 16px; }
.icon-btn{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:var(--radius-md);
color:var(--ink-700);
position:relative;
transition: background .15s, color .15s;
}
.icon-btn:hover{ background:var(--ink-100); color:var(--ink-900); }
.badge{
position:absolute; top:4px; right:4px;
min-width:16px; height:16px; padding:0 4px;
background:var(--ms-orange); color:var(--white);
font-size:10px; font-weight:700;
border-radius:10px; display:flex; align-items:center; justify-content:center;
}
/* ╔══════════════════════════════════════════════════════╗
║ APP SHELL ║
╚══════════════════════════════════════════════════════╝ */
.app-shell{
display:flex; flex-direction:column;
height:100vh; width:100vw; overflow:hidden;
background:var(--white);
}
/* ── Top bar ─────────────────────────────────────────── */
.topbar{
height:var(--topbar-h); flex-shrink:0;
display:grid;
grid-template-columns: auto 1fr auto;
align-items:center;
padding: 0 16px;
background:var(--white);
border-bottom:1px solid var(--ink-200);
z-index: 5;
}
.topbar-left{ display:flex; align-items:center; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-dot{
width: 32px; height: 32px;
background: url('/logo.png') center/contain no-repeat;
flex-shrink: 0;
}
.brand-name{ font-weight:700; font-size:15px; letter-spacing:-.01em; }
.topbar-center{ display:flex; justify-content:center; padding: 0 24px; }
.search{
display:flex; align-items:center; gap:10px;
width:min(560px, 100%);
padding: 8px 14px;
background:var(--ink-50);
border:1px solid transparent;
border-radius: 999px;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.search:focus-within{
background:var(--white);
border-color: var(--ms-orange);
box-shadow: 0 0 0 3px var(--ms-orange-tint);
}
.search:focus-within input::placeholder{ color: var(--ink-400); }
.search svg{ color:var(--ink-500); width:18px; height:18px; }
.search input{
flex:1; border:0; outline:0; background:transparent;
font-size:14px; color:var(--ink-900);
}
.search input::placeholder{ color:var(--ink-500); }
.topbar-right{ display:flex; align-items:center; gap:4px; }
/* ── Avatar ──────────────────────────────────────────── */
.avatar-menu{ position:relative; }
.avatar{
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:50%;
background: linear-gradient(135deg, var(--ms-orange), var(--ms-orange-700));
color:var(--white); font-weight:700; font-size:12px;
margin-left:8px;
border:2px solid var(--white);
box-shadow: 0 2px 8px -2px rgba(241,88,43,.5);
}
.avatar:hover{ filter: brightness(1.05); }
.avatar-lg{ width:44px; height:44px; font-size:15px; margin:0; }
.dropdown{
position:absolute; top: calc(100% + 8px); right:0;
min-width: 260px;
background:var(--white);
border:1px solid var(--ink-200);
border-radius:var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 8px;
z-index: 100;
animation: drop-in .12s ease-out;
}
@keyframes drop-in{
from{ opacity:0; transform: translateY(-4px); }
to { opacity:1; transform: translateY(0); }
}
.dropdown-head{
display:flex; align-items:center; gap:12px;
padding: 8px 10px 12px;
}
.menu-name{ font-weight:600; font-size:14px; }
.menu-email{ color:var(--ink-500); font-size:12px; }
.dropdown-sep{ height:1px; background:var(--ink-200); margin:4px 0; }
.dropdown-item{
display:block; width:100%; text-align:left;
padding: 9px 10px; border-radius: var(--radius-sm);
font-size:14px; color:var(--ink-800);
}
.dropdown-item:hover{ background:var(--ink-100); }
.dropdown-danger{ color:var(--danger); }
.dropdown-danger:hover{ background:#FEECEC; }
/* ── Body split ──────────────────────────────────────── */
.shell-body{
flex:1; min-height:0;
display:grid;
grid-template-columns: var(--sidebar-w) 1fr;
transition: grid-template-columns .2s ease;
}
.app-shell.sidebar-collapsed .shell-body{
grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}
/* ── Sidebar ─────────────────────────────────────────── */
.sidebar{
border-right:1px solid var(--ink-200);
background:var(--paper);
display:flex; flex-direction:column;
overflow-y:auto;
padding: 12px 8px 16px;
position: relative;
}
/* Drag handle to resize sidebar */
.sidebar-resize{
position: absolute;
top: 0; right: -3px; bottom: 0;
width: 6px;
cursor: col-resize;
z-index: 20;
transition: background .15s;
}
.sidebar-resize:hover,
.sidebar-resize.dragging{ background: rgba(241,88,43,.25); }
body.sidebar-resizing{ cursor: col-resize; user-select: none; }
body.sidebar-resizing *{ pointer-events: none; }
body.sidebar-resizing .sidebar-resize{ pointer-events: auto; background: var(--ms-orange); }
/* ── Asana-style sidebar ──────────────────────────────── */
.sidebar-asana{
background: #F6F7F9;
padding: 10px 8px 10px;
}
.sidebar-asana .nav-top,
.sidebar-asana .nav-group{
display: flex; flex-direction: column; gap: 1px;
padding: 2px 2px;
}
.sidebar-asana .nav-item{
display: flex; align-items: center; gap: 12px;
padding: 8px 12px;
border-radius: 10px;
color: var(--ink-800); font-weight: 500; font-size: 14px;
position: relative;
transition: background .12s, color .12s;
}
.sidebar-asana .nav-item svg{ width: 18px; height: 18px; color: var(--ink-700); }
.sidebar-asana .nav-item:hover{ background: rgba(0,0,0,.04); }
.sidebar-asana .nav-item.active{
background: #E9EBEE;
color: var(--ink-900);
}
.sidebar-asana .nav-item.active svg{ color: var(--ms-orange); }
.nav-dot{
position: absolute; left: 25px; top: 8px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--ms-orange);
box-shadow: 0 0 0 2px #F6F7F9;
}
.sidebar-group{
display: flex; flex-direction: column;
margin-top: 8px;
}
.sidebar-group-label{
font-size: 11px; font-weight: 600;
color: var(--ink-500);
padding: 8px 14px 4px;
letter-spacing: .03em;
}
.sidebar-group-head-row{
display: flex; align-items: center; justify-content: space-between;
padding-right: 6px;
}
.sidebar-group-head{
display: flex; align-items: center; gap: 4px;
padding: 8px 10px;
background: transparent;
font-size: 11px; font-weight: 600;
color: var(--ink-500);
letter-spacing: .03em;
border-radius: 6px;
flex: 1;
text-align: left;
user-select: none;
}
.sidebar-group-head:hover{ color: var(--ink-800); }
.sidebar-group-head .chev{
width: 14px; height: 14px; color: var(--ink-500);
transition: transform .12s;
}
.sidebar-group.collapsed .chev{ transform: rotate(-90deg); }
.sidebar-group.collapsed .sidebar-list{ display: none; }
.sidebar-group-actions{ display: flex; align-items: center; gap: 4px; }
.sidebar-sep{
height: 1px; background: var(--ink-200);
margin: 8px 14px;
}
.sidebar-asana .sidebar-list{
display: flex; flex-direction: column; gap: 1px;
padding: 0 2px 4px;
}
.sidebar-asana .sidebar-item{
display: flex; align-items: center; gap: 10px;
padding: 7px 10px;
border-radius: 8px;
color: var(--ink-800); font-size: 14px;
cursor: pointer;
position: relative;
min-width: 0;
}
.sidebar-asana .sidebar-item:hover{ background: rgba(0,0,0,.04); }
.sidebar-asana .sidebar-item.active{
background: #E9EBEE;
color: var(--ink-900); font-weight: 500;
}
.sidebar-asana .sidebar-item .swatch{
width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
}
.sidebar-asana .sidebar-item > span:not(.swatch):not(.star-btn){
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1;
}
.sidebar-asana .star-btn{
flex-shrink: 0;
width: 0; height: 20px;
overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 4px;
color: var(--ink-400); opacity: 0;
transition: opacity .12s, color .12s, background .12s, width .12s;
background: transparent;
margin-left: 2px;
}
.sidebar-asana .star-btn{ display: none !important; }
.sidebar-asana .sidebar-empty{ padding: 6px 14px; color: var(--ink-500); font-size: 13px; }
/* Show more / Browse all (Asana-style) */
.sidebar-show-more,
.sidebar-browse-all{
display:flex; align-items:center; gap:8px;
width:calc(100% - 12px);
margin: 2px 6px;
padding: 6px 10px;
border-radius: 6px;
background: transparent;
color: var(--ink-600);
font-size: 12px; font-weight: 500;
cursor: pointer;
transition: background .12s, color .12s;
text-align: left;
}
.sidebar-show-more:hover,
.sidebar-browse-all:hover{
background: rgba(0,0,0,.04);
color: var(--ms-orange-700);
}
.sidebar-show-more svg,
.sidebar-browse-all svg{ width: 13px; height: 13px; flex-shrink:0; color: var(--ink-500); }
.sidebar-show-more:hover svg,
.sidebar-browse-all:hover svg{ color: var(--ms-orange); }
.sidebar-browse-all{
margin-top: 4px; margin-bottom: 10px;
color: var(--ms-orange-700);
font-weight: 600;
}
/* All projects modal */
.all-projects-list{
max-height: 60vh; overflow-y: auto;
display: flex; flex-direction: column; gap: 16px;
margin: 0 -6px; padding: 0 6px 4px;
}
.all-projects-list::-webkit-scrollbar{ width:10px; }
.all-projects-list::-webkit-scrollbar-thumb{
background: var(--ink-200); border-radius:10px;
border:2px solid transparent; background-clip: padding-box;
}
.all-proj-group{ display:flex; flex-direction:column; gap:2px; }
.all-proj-team{
display:flex; align-items:center; gap:8px;
padding: 6px 8px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
color: var(--ink-700);
position: sticky; top: 0;
background: var(--white);
z-index: 1;
}
.all-proj-items{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 4px;
}
.all-proj-item{
display:flex; align-items:center; gap:10px;
padding: 9px 12px;
border-radius: 8px;
background: transparent;
text-align: left;
cursor: pointer;
transition: background .12s, box-shadow .12s, transform .08s;
min-width: 0;
}
.all-proj-item:hover{
background: var(--ms-orange-50);
box-shadow: inset 0 0 0 1px var(--ms-orange-100);
}
.all-proj-item:active{ transform: scale(.99); }
.all-proj-item .swatch{
width: 18px; height: 18px; border-radius: 5px; flex-shrink:0;
}
.all-proj-name{
flex: 1; min-width: 0;
font-size: 13px; font-weight: 500; color: var(--ink-900);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.all-proj-item.locked .all-proj-name{ color: var(--ink-600); }
.all-proj-star{ width: 13px; height: 13px; color: var(--ms-orange); flex-shrink:0; }
.all-proj-lock{ width: 13px; height: 13px; color: var(--ink-400); flex-shrink:0; }
.sidebar-foot-cta{
margin-top: auto;
padding: 10px 6px 4px;
border-top: 1px solid var(--ink-200);
}
.sidebar-invite{
width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: var(--white);
font-weight: 500;
}
.sidebar-invite svg{ width: 16px; height: 16px; color: var(--ink-700); }
.sidebar-invite:hover{ border-color: var(--ms-orange); color: var(--ms-orange-700); }
.sidebar-invite:hover svg{ color: var(--ms-orange); }
.app-shell.sidebar-collapsed .sidebar .nav-item span,
.app-shell.sidebar-collapsed .sidebar .sidebar-section,
.app-shell.sidebar-collapsed .sidebar .sidebar-foot{ display:none; }
.nav-primary{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.nav-item{
display:flex; align-items:center; gap:12px;
padding: 8px 12px;
border-radius:var(--radius-md);
color:var(--ink-800); font-weight:500; font-size:14px;
transition: background .12s, color .12s;
}
.nav-item:hover{ background:var(--ink-100); }
.nav-item.active{
background: var(--ms-orange-tint);
color: var(--ms-orange-700);
}
.nav-item.active svg{ color: var(--ms-orange); }
.nav-item svg{ color:var(--ink-600); width:18px; height:18px; }
.sidebar-section{ display:flex; flex-direction:column; gap:2px; margin-top:16px; }
.sidebar-heading{
display:flex; align-items:center; justify-content:space-between;
padding: 4px 12px;
font-size: 11px; font-weight:700; letter-spacing:.06em;
color:var(--ink-500); text-transform:uppercase;
}
.sidebar-add{
width:20px; height:20px; border-radius:6px;
color:var(--ink-500);
font-size:16px; line-height:1;
}
.sidebar-add:hover{ background:var(--ink-200); color:var(--ink-900); }
.sync-toggle{
border: 1px solid var(--ink-300);
color: var(--ink-700);
transition: all .15s;
}
.sync-toggle:hover{ border-color: var(--ink-400); }
.sync-toggle .sync-dot{
width: 7px; height: 7px; border-radius: 50%;
background: var(--ink-400);
display: inline-block;
}
.sync-toggle.on{
background: var(--ms-orange-tint);
border-color: var(--ms-orange-200);
color: var(--ms-orange-700);
}
.sync-toggle.on .sync-dot{
background: var(--ms-orange);
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{ box-shadow: 0 0 0 0 rgba(241,88,43,.5); }
50% { box-shadow: 0 0 0 5px rgba(241,88,43,0); }
}
.sidebar-list{ display:flex; flex-direction:column; gap:1px; }
.sidebar-item{
display:flex; align-items:center; gap:10px;
padding: 7px 12px;
border-radius:var(--radius-sm);
color:var(--ink-800); font-size:14px;
cursor:pointer;
}
.sidebar-item:hover{ background:var(--ink-100); }
.sidebar-item.active{ background:var(--white); box-shadow: var(--shadow-xs); }
.sidebar-item .swatch{
width:14px; height:14px; border-radius:4px; flex-shrink:0;
background: var(--ms-orange);
}
.sidebar-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-empty{ padding: 8px 12px; color:var(--ink-500); font-size:13px; }
.sidebar-foot{
margin-top:auto; padding: 16px 12px 4px;
color: var(--ink-400); font-size:11px;
}
/* ── Main ────────────────────────────────────────────── */
.main{
overflow-y:auto; overflow-x:hidden;
background: var(--white);
position: relative;
}
.main::before{
content: '';
position: fixed;
right: -4%; bottom: -6%;
width: 62%; height: 62%;
background-image: url('/logo.png');
background-repeat: no-repeat;
background-position: bottom right;
background-size: contain;
opacity: 0.05;
filter: saturate(1.1);
transform: rotate(-4deg);
pointer-events: none;
z-index: 150;
transition: opacity .3s;
mix-blend-mode: multiply;
}
body.no-emblem .main::before{ display: none; }
/* Login emblem now lives inside .emblem-stage — no pseudo-element needed */
.view{ padding: 28px 40px 56px; max-width:1400px; margin:0 auto; }
.view-hero{ margin-bottom:28px; }
.view-hero h1{
margin:0; font-size:30px; font-weight:700; letter-spacing:-.02em;
}
.hero-sub{ color:var(--ink-500); font-size:14px; margin-top:4px; }
.view-header{
display:flex; align-items:flex-end; justify-content:space-between;
gap:16px; margin-bottom:24px;
padding-bottom:16px; border-bottom:1px solid var(--ink-200);
}
.view-header h1{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.view-sub{ color:var(--ink-500); font-size:13px; margin:4px 0 0; }
.view-tabs{ display:flex; gap:4px; align-items:center; }
.pill{
padding: 7px 14px; border-radius: 999px;
font-size:13px; font-weight:500; color:var(--ink-700);
background:transparent; transition: background .12s, color .12s;
}
.pill:hover{ background:var(--ink-100); }
.pill-active, .pill.active{
background: var(--ms-orange-tint); color:var(--ms-orange-700);
}
.view-body{ padding-top: 8px; }
/* ── Widgets (home) ─────────────────────────────────── */
.widget-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap:20px;
}
.widget{
background:var(--white);
border:1px solid var(--ink-200);
border-radius:var(--radius-lg);
box-shadow: var(--shadow-xs);
display:flex; flex-direction:column;
overflow:hidden;
transition: box-shadow .15s, border-color .15s;
}
.widget:hover{ box-shadow: var(--shadow-sm); border-color:var(--ink-300); }
.widget-head{
display:flex; align-items:center; justify-content:space-between;
padding: 16px 18px 12px;
}
.widget-head h3{ margin:0; font-size:15px; font-weight:600; }
.widget-link{ font-size:13px; color:var(--ms-orange); font-weight:500; }
.widget-link:hover{ text-decoration:underline; }
.widget-tabs{
display:flex; gap:4px;
padding: 0 16px 8px;
border-bottom: 1px solid var(--ink-200);
}
.widget-tab{
padding: 6px 10px; border-radius: var(--radius-sm);
font-size:13px; color:var(--ink-600); font-weight:500;
position:relative;
}
.widget-tab:hover{ color:var(--ink-900); }
.widget-tab.active{ color: var(--ms-orange-700); }
.widget-tab.active::after{
content:''; position:absolute; left:10px; right:10px; bottom:-9px;
height:2px; background: var(--ms-orange); border-radius:2px;
}
.widget-body{ padding: 8px 6px; min-height:160px; }
.widget-projects{ padding: 8px 10px 14px; display:flex; flex-direction:column; gap:6px; }
.widget-people{ padding:14px 18px; display:flex; flex-wrap:wrap; gap:6px; }
/* ── Empty state ─────────────────────────────────────── */
.empty-state{
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding: 48px 24px; text-align:center; color:var(--ink-600);
}
.empty-state.small{ padding: 24px; }
.empty-icon{
width:56px; height:56px; border-radius:50%;
background: var(--ms-orange-50); color: var(--ms-orange);
display:flex; align-items:center; justify-content:center;
font-size:26px; margin-bottom:14px;
}
.empty-state h3{ margin:0 0 4px; font-size:16px; color:var(--ink-900); }
.empty-state p{ margin:0; font-size:14px; color:var(--ink-500); }
/* ── Reports ─────────────────────────────────────────── */
.report-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap:16px;
}
.report-card{
display:flex; gap:14px; align-items:flex-start;
padding:18px;
border:1px solid var(--ink-200);
border-radius:var(--radius-lg);
background:var(--white);
transition: box-shadow .15s, border-color .15s, transform .05s;
}
.report-card:hover{
border-color: var(--ms-orange);
box-shadow: 0 6px 18px -10px rgba(241,88,43,.4);
transform: translateY(-1px);
}
.report-icon{
width:44px; height:44px; border-radius: 12px;
background: var(--ms-orange-50); color: var(--ms-orange);
display:flex; align-items:center; justify-content:center;
font-size:22px; flex-shrink:0;
}
.report-card h4{ margin:0 0 4px; font-size:15px; font-weight:600; }
.report-card p{ margin:0; color:var(--ink-500); font-size:13px; }
/* ── Tables ──────────────────────────────────────────── */
.table-wrap{
border:1px solid var(--ink-200);
border-radius:var(--radius-lg);
overflow:hidden;
background:var(--white);
}
.data-table{ width:100%; border-collapse: collapse; }
.data-table th,
.data-table td{
padding: 12px 16px;
text-align: left;
border-bottom:1px solid var(--ink-200);
font-size:14px;
}
.data-table th{
background: var(--ink-50);
font-weight:600; font-size:12px;
color:var(--ink-600); text-transform:uppercase; letter-spacing:.04em;
}
.data-table tbody tr:hover{ background: var(--ink-50); }
.data-table tbody tr:last-child td{ border-bottom:0; }
.role-pill{
display:inline-block; padding: 2px 10px;
font-size:11px; font-weight:600;
border-radius: 999px;
background: var(--ms-orange-tint); color: var(--ms-orange-700);
}
.role-pill.viewer{ background:var(--ink-100); color:var(--ink-700); }
.role-pill.pending{ background:#FEF3C7; color:#92400E; }
/* ── List rows (tasks / projects) ───────────────────── */
.row{
display:flex; align-items:center; gap:12px;
padding: 10px 12px;
border-radius:var(--radius-md);
transition: background .12s;
cursor:pointer;
}
.row:hover{ background: var(--ink-50); }
.row .check{
width:18px; height:18px; border-radius:50%;
border: 1.5px solid var(--ink-400);
flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition: border-color .12s, background .12s;
}
.row .check:hover{ border-color: var(--ms-orange); }
.row.done .check{ background:var(--success); border-color:var(--success); }
.row.done .check::after{
content:''; width:4px; height:8px;
border: solid white; border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px,-1px);
}
.row-title{
flex:1; min-width:0;
font-size:14px; color:var(--ink-900);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row.done .row-title{ color:var(--ink-500); text-decoration: line-through; }
.row-date{ font-size:12px; color:var(--ink-500); white-space:nowrap; }
.row-avatar{
width:24px; height:24px; border-radius:50%;
background: linear-gradient(135deg, var(--ms-orange), var(--ms-orange-600));
color:var(--white); font-size:10px; font-weight:700;
display:flex; align-items:center; justify-content:center;
}
/* ── Modals ──────────────────────────────────────────── */
.modal-root{
position:fixed; inset:0; z-index:100;
display:flex; align-items:center; justify-content:center;
padding: 24px;
}
.modal-backdrop{
position:absolute; inset:0;
background: rgba(16,24,40,.50);
backdrop-filter: blur(2px);
}
.modal{
position:relative; z-index:1;
width:100%; max-width:480px;
background:var(--white);
border-radius:var(--radius-lg);
box-shadow: var(--shadow-xl);
overflow:hidden;
animation: modal-in .15s ease-out;
}
@keyframes modal-in{
from{ opacity:0; transform: scale(.97) translateY(6px); }
to { opacity:1; transform: scale(1) translateY(0); }
}
.modal-head{
display:flex; align-items:center; justify-content:space-between;
padding: 18px 20px;
border-bottom:1px solid var(--ink-200);
}
.modal-head h3{ margin:0; font-size:16px; font-weight:600; }
.modal-body{ padding: 20px; display:flex; flex-direction:column; gap:14px; }
.modal-foot{
display:flex; justify-content:flex-end; gap:10px;
padding-top: 8px;
border-top:1px solid var(--ink-200);
margin: 8px -20px -20px;
padding: 14px 20px;
background: var(--paper);
}
/* ── Toasts ──────────────────────────────────────────── */
.toasts{
position:fixed; bottom:24px; right:24px; z-index:200;
display:flex; flex-direction:column; gap:8px;
}
.toast{
padding: 12px 16px;
background: var(--ink-900); color:var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size:14px; font-weight:500;
animation: toast-in .2s ease-out;
min-width: 240px; max-width: 400px;
}
.toast.success{ background: var(--success); }
.toast.error { background: var(--danger); }
.toast.warn { background: var(--warning); color:#3E2A00; }
@keyframes toast-in{
from{ opacity:0; transform: translateY(10px); }
to { opacity:1; transform: translateY(0); }
}
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 960px){
.shell-body{ grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.sidebar .nav-item span,
.sidebar .sidebar-section,
.sidebar .sidebar-foot{ display:none; }
.view{ padding: 20px 20px 40px; }
}
@media (max-width: 640px){
.topbar-center{ display:none; }
.widget-grid{ grid-template-columns: 1fr; }
}
/* ╔══════════════════════════════════════════════════════╗
║ PROJECT HEADER + TABS + TOOLBAR (Asana-style) ║
╚══════════════════════════════════════════════════════╝ */
/* Override default view padding for project view to match Asana density */
.view[data-view="project"]{ padding: 16px 28px 40px; max-width: none; }
.proj-band{
margin: 0 0 6px;
padding: 4px 0 0;
border-bottom: 1px solid var(--ink-200);
}
.proj-breadcrumb{ font-size: 12px; color: var(--ink-500); margin-bottom: 6px; }
.proj-breadcrumb .crumb{ color: var(--ink-500); text-decoration: none; }
.proj-breadcrumb .crumb:hover{ color: var(--ink-800); text-decoration: underline; }
.proj-title-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 2px 0 10px; }
.proj-identity{ display:flex; align-items:center; gap:8px; min-width:0; }
.proj-icon{
width:28px; height:28px; border-radius:6px;
display:inline-flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.proj-icon svg{ width:18px; height:18px; }
.proj-name{
margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.icon-btn-sm{ width:28px; height:28px; }
.icon-btn-sm svg{ width:16px; height:16px; }
.proj-status{
display:inline-flex; align-items:center; gap:8px;
padding: 4px 12px 4px 10px;
font-size:13px; font-weight:500;
color: var(--ink-700);
background: transparent;
border-radius: var(--radius-md);
margin-left: 4px;
}
.proj-status:hover{ background: var(--ink-100); }
.status-dot{ width:8px; height:8px; border-radius:50%; background: var(--ms-orange); }
.status-radio{
width:14px; height:14px; border-radius:50%;
border: 1.5px solid var(--ink-400);
}
.proj-actions{ display:flex; align-items:center; gap:6px; }
.avatar-stack{ display:flex; align-items:center; padding-right:4px; }
.avatar-stack .row-avatar{
width:28px; height:28px; font-size:11px;
margin-left:-6px; border:2px solid var(--white);
}
.avatar-stack .row-avatar:first-child{ margin-left:0; }
.row-avatar-more{
background: var(--ink-200) !important; color: var(--ink-700) !important;
font-weight: 600;
}
.btn-share{ padding-left: 10px; }
.btn-sm{ padding: 6px 12px; font-size:13px; }
.btn-xs{ padding: 3px 10px; font-size:12px; }
/* Tabs — underline style */
.proj-tabs{
display:flex; align-items:center; gap:2px;
margin-top: 4px;
}
.proj-tab{
position: relative;
padding: 10px 14px;
font-size: 14px; font-weight: 500;
color: var(--ink-700);
background: transparent;
border-radius: 0;
transition: color .12s;
}
.proj-tab:hover{ color: var(--ink-900); }
.proj-tab-active{ color: var(--ms-orange-700); font-weight: 600; }
.proj-tab-active::after{
content:''; position:absolute; left:12px; right:12px; bottom:-1px;
height:2px; background: var(--ms-orange); border-radius: 2px;
}
/* Toolbar */
.proj-toolbar{
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding: 10px 0 12px;
}
.tb-left, .tb-right{ display:flex; align-items:center; gap:4px; }
.tb-add{
padding: 6px 6px 6px 12px;
display:inline-flex; align-items:center; gap:6px;
}
.tb-add svg{ width:14px; height:14px; }
.tb-add-sep{
width: 1px; height: 16px;
background: rgba(255,255,255,.3);
margin: 0 2px;
}
.tb-btn{
display:inline-flex; align-items:center; gap:6px;
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size:13px; font-weight:500; color: var(--ink-700);
background: transparent;
transition: background .12s, color .12s;
}
.tb-btn:hover{ background: var(--ink-100); color: var(--ink-900); }
.tb-btn svg{ width:15px; height:15px; }
.tb-search-inline{
margin-left: 4px;
padding: 6px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--ink-300);
font-size: 13px;
width: 200px;
outline: none;
transition: border-color .12s, box-shadow .12s;
}
.tb-search-inline:focus{ border-color: var(--ms-orange); box-shadow: 0 0 0 3px var(--ms-orange-tint); }
/* ╔══════════════════════════════════════════════════════╗
║ PROJECT LIST — Asana-style spreadsheet ║
╚══════════════════════════════════════════════════════╝ */
.tl{
background: var(--white);
overflow-x: auto;
}
/* Column header row */
.tl-head{
display: grid;
align-items: center;
position: sticky; top: 0; z-index: 3;
background: var(--white);
border-bottom: 1px solid var(--ink-200);
font-size: 12px; font-weight: 500;
color: var(--ink-600);
}
.tl-h{
padding: 8px 12px;
border-right: 1px solid var(--ink-200);
user-select: none;
}
.tl-h:last-child{ border-right: 0; }
.tl-h-name{ padding-left: 48px; }
.tl-h-add{
display:flex; align-items:center; justify-content:center;
color: var(--ink-500); cursor: pointer;
}
.tl-h-add:hover{ background: var(--ink-50); color: var(--ink-900); }
.tl-h-add svg{ width:14px; height:14px; }
/* Sections — flat, no box */
.tl-section{ margin-top: 18px; }
.tl-section:first-of-type{ margin-top: 6px; }
.tl-section-head{
display:flex; align-items:center; gap:6px;
padding: 6px 2px 6px 8px;
cursor:pointer; user-select:none;
color: var(--ink-900);
}
.tl-section-head .chev{
width:16px; height:16px;
color: var(--ink-700);
transition: transform .12s;
}
.tl-section.collapsed .tl-section-head .chev{ transform: rotate(-90deg); }
.tl-section-head .section-name{
font-weight: 600; font-size: 14px; color: var(--ink-900);
}
.tl-rows{ display: flex; flex-direction: column; }
/* Task row */
.tl-row{
display: grid;
align-items: center;
border-bottom: 1px solid var(--ink-100);
transition: background .08s;
cursor: pointer;
min-height: 34px;
background: var(--white);
}
.tl-row:hover{ background: var(--ms-orange-50); }
.tl-row.done{ opacity: .85; }
.tl-row.done .row-title{ color: var(--ink-500); }
.tl-c{
padding: 4px 10px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
border-right: 1px solid var(--ink-100);
min-width: 0;
display:flex; align-items:center; gap:8px;
font-size: 13px;
height: 100%;
}
.tl-c:last-child{ border-right: 0; }
.tl-c-name{
padding-left: 14px;
font-weight: 400;
}
.tl-c-name .check{
width:18px; height:18px; border-radius: 50%;
border: 1.5px solid var(--ink-300); flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center;
transition: border-color .12s, background .12s;
}
.tl-c-name .check:hover{ border-color: var(--success); background: color-mix(in oklab, var(--success) 12%, transparent); }
.tl-row.done .check{ background: var(--success); border-color: var(--success); }
.tl-row.done .check::after{
content:''; width:4px; height:8px;
border: solid white; border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px,-1px);
}
.tl-c-name .row-title{
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
color: var(--ink-900); flex:1;
}
.sub-chip{
display:inline-flex; align-items:center; gap:3px;
padding: 1px 6px;
font-size: 11px; color: var(--ink-600); font-weight: 500;
background: var(--ink-100);
border-radius: 10px;
}
.sub-chip svg{ width:10px; height:10px; }
.tl-c-assignee, .tl-c-due{ color: var(--ink-800); }
.tl-c-due .due-txt{
font-size: 13px;
color: var(--ink-800);
}
.due-txt.due-today{ color: var(--ms-orange-700); font-weight: 600; }
.due-txt.due-soon{ color: var(--ink-800); }
.due-txt.due-overdue{ color: var(--danger); font-weight: 600; }
.assignee{ display:flex; align-items:center; gap:8px; min-width:0; }
.assignee .row-avatar{ width:22px; height:22px; font-size:10px; }
.assignee-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 13px; }
.avatar-placeholder{
width:22px; height:22px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
color: var(--ink-400);
flex-shrink: 0;
}
.avatar-placeholder svg{ width:22px; height:22px; }
.cell-empty{
display:inline-flex; align-items:center;
color: var(--ink-300);
}
.cell-empty svg{ width:16px; height:16px; }
.chip{
display:inline-flex; align-items:center;
padding: 2px 10px; border-radius: 999px;
font-size: 12px; font-weight: 500;
background: var(--ink-100); color: var(--ink-700);
border: 1px solid transparent;
white-space: nowrap;
max-width: 100%;
overflow: hidden; text-overflow: ellipsis;
}
.cf-empty{ color: var(--ink-300); font-size: 14px; }
.cf-val{ color: var(--ink-800); }
/* Inline "Add task..." row */
.tl-add{
display: grid;
align-items: center;
min-height: 32px;
padding: 0;
border-bottom: 1px solid var(--ink-100);
text-align: left;
background: transparent;
cursor: text;
}
.tl-add:hover{ background: var(--ink-50); }
.tl-add .tl-c{
background: transparent; border-right: 0;
}
.tl-add-text{
padding-left: 32px;
color: var(--ink-500); font-size: 13px;
font-style: italic;
}
.tl-add-section{ margin-top: 20px; }
.tl-add-section .row-add{
padding: 10px 14px;
background: transparent;
color: var(--ink-600); font-size: 13px;
font-weight: 500;
text-align: left;
transition: color .12s;
}
.tl-add-section .row-add:hover{ color: var(--ms-orange-700); }
.project-list{ display:flex; flex-direction:column; gap:16px; }
.section-block{
background: var(--white);
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
overflow:hidden;
}
.section-head{
display:flex; align-items:center; gap:8px;
padding: 12px 14px;
background: var(--ink-50);
border-bottom: 1px solid var(--ink-200);
cursor:pointer;
user-select:none;
transition: background .12s;
}
.section-head:hover{ background: var(--ink-100); }
.section-block.collapsed .section-head{ border-bottom-color: transparent; }
.section-block.collapsed .chev{ transform: rotate(-90deg); }
.chev{ width:16px; height:16px; color:var(--ink-600); transition: transform .15s; }
.section-name{ font-weight:600; font-size:14px; flex:1; color:var(--ink-900); }
.section-count{
background: var(--ink-200);
color: var(--ink-700);
font-size:11px; font-weight:700;
padding: 2px 8px; border-radius: 999px;
}
.section-rows{ display:flex; flex-direction:column; padding: 4px 6px 6px; }
.task-row{
border-radius: var(--radius-sm);
border-bottom: 1px solid transparent;
padding: 8px 10px;
gap: 10px;
}
.task-row:hover{ background: var(--ms-orange-50); }
.task-row .row-title{ font-size:14px; }
.row-meta{
font-size:12px; color:var(--ink-500);
padding: 2px 6px; background: var(--ink-100); border-radius:6px;
}
.row-date{
font-size:12px; padding: 2px 8px; border-radius: 999px;
background: var(--ink-100); color: var(--ink-700);
}
.row-date.due-today{ background:#FFE4D7; color:var(--ms-orange-700); font-weight:600; }
.row-date.due-soon{ background:#FEF3C7; color:#92400E; }
.row-date.due-overdue{ background:#FEECEC; color:var(--danger); font-weight:600; }
.row-avatar-empty{
background: transparent !important;
border: 1.5px dashed var(--ink-300);
color: var(--ink-500) !important;
}
.row-empty{
padding: 12px 14px; color: var(--ink-500); font-size:13px; font-style: italic;
}
.row-add{
margin: 2px 4px;
padding: 8px 10px;
border-radius: var(--radius-sm);
color: var(--ink-500); font-size:13px; text-align:left;
transition: background .12s, color .12s;
}
.row-add:hover{ background: var(--ms-orange-tint); color: var(--ms-orange-700); }
/* ── Board (kanban) ────────────────────────────────── */
.board{
display:flex; gap:16px;
overflow-x:auto; padding-bottom: 12px;
min-height: 60vh;
}
.board-col{
flex: 0 0 300px;
display:flex; flex-direction:column;
background: var(--ink-50);
border-radius: var(--radius-lg);
border: 1px solid var(--ink-200);
max-height: calc(100vh - 220px);
}
.board-col-head{
display:flex; align-items:center; gap:8px;
padding: 12px 14px;
border-bottom: 1px solid var(--ink-200);
}
.board-col-body{
padding: 8px;
display:flex; flex-direction:column; gap:8px;
overflow-y:auto; flex:1;
}
.card{
background: var(--white);
border: 1px solid var(--ink-200);
border-radius: var(--radius-md);
padding: 10px 12px;
cursor: pointer;
transition: box-shadow .15s, border-color .15s, transform .05s;
}
.card:hover{
border-color: var(--ms-orange-200);
box-shadow: 0 4px 10px -4px rgba(241,88,43,.25);
transform: translateY(-1px);
}
.card.done{ opacity: .6; }
.card.done .card-title{ text-decoration: line-through; color: var(--ink-500); }
.card-title{ font-size:14px; font-weight:500; color:var(--ink-900); margin-bottom: 8px; line-height:1.35; }
.card-meta{ display:flex; align-items:center; justify-content: space-between; gap:8px; }
/* ── Task side panel ───────────────────────────────── */
.task-panel-backdrop{
position:fixed; inset:0; z-index:120;
background: rgba(16,24,40,.35);
}
.task-panel{
position:fixed; top:0; right:0; bottom:0;
width: min(520px, 100vw);
z-index: 121;
background: var(--white);
border-left: 1px solid var(--ink-200);
box-shadow: var(--shadow-xl);
display:flex; flex-direction:column;
animation: slide-in .2s ease-out;
}
.task-panel-wide{ width: min(760px, 100vw); }
@keyframes slide-in{
from{ transform: translateX(20px); opacity:0; }
to{ transform: translateX(0); opacity:1; }
}
.task-panel-head{
display:flex; align-items:center; justify-content:space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--ink-200);
font-size:13px;
}
.task-panel-body{ padding: 20px 22px; overflow-y:auto; }
.task-title-row{ display:flex; align-items:flex-start; gap:12px; margin-bottom: 20px; }
.task-title-row .check{
width:22px; height:22px; margin-top:4px;
border:1.5px solid var(--ink-400); border-radius:50%;
}
.task-title-row .check.checked{ background: var(--success); border-color: var(--success); }
.task-title-row h2{ margin:0; font-size:20px; font-weight:600; letter-spacing:-.01em; line-height: 1.3; }
.task-props{ display:flex; flex-direction:column; gap:14px; margin: 0 0 20px; }
.task-props > div{ display:grid; grid-template-columns: 110px 1fr; gap:10px; align-items:center; }
.task-props dt{ font-size:12px; color:var(--ink-500); font-weight:500; text-transform:uppercase; letter-spacing:.04em; margin:0; }
.task-props dd{ font-size:14px; color:var(--ink-900); margin:0; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.followers{ display:flex; gap:4px; }
.followers .row-avatar{ width:24px; height:24px; font-size:10px; margin-left:-4px; border:2px solid var(--white); }
.followers .row-avatar:first-child{ margin-left: 0; }
.panel-section-title{
margin: 22px 0 8px;
font-size: 12px; font-weight: 700;
color: var(--ink-600);
text-transform: uppercase; letter-spacing: .06em;
}
.panel-desc{
padding: 12px 14px;
background: var(--ink-50);
border: 1px solid var(--ink-200);
border-radius: var(--radius-md);
font-size: 14px; color: var(--ink-800);
line-height: 1.5;
min-height: 80px;
}
.panel-actions{ margin-top: 20px; display:flex; gap:8px; }
/* ╔══════════════════════════════════════════════════════╗
║ TASK PANEL — Asana detail layout ║
╚══════════════════════════════════════════════════════╝ */
/* Top toolbar */
.task-panel-top{
display:flex; align-items:center; justify-content:space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--ink-200);
gap: 12px;
flex-shrink: 0;
background: var(--white);
}
.tp-top-right{ display:flex; align-items:center; gap:4px; }
.tp-collabs{ padding-right: 6px; }
.tp-add-collab{
width:28px; height:28px; border-radius: 50%;
border: 1.5px dashed var(--ink-300);
color: var(--ink-500);
font-size: 16px; font-weight: 500;
margin-left: -6px;
background: var(--white);
display:inline-flex; align-items:center; justify-content:center;
cursor: pointer;
transition: border-color .15s, color .15s;
}
.tp-add-collab:hover{ border-color: var(--ms-orange); color: var(--ms-orange); }
.task-complete-pill{
display:inline-flex; align-items:center; gap:6px;
padding: 5px 12px 5px 10px;
font-size: 13px; font-weight: 500;
color: var(--ink-700);
background: var(--white);
border: 1px solid var(--ink-300);
border-radius: var(--radius-sm);
transition: all .15s;
}
.task-complete-pill svg{ width: 15px; height: 15px; color: var(--ink-400); }
.task-complete-pill:hover{ background: color-mix(in oklab, var(--success) 8%, white); border-color: var(--success); color: var(--success); }
.task-complete-pill:hover svg{ color: var(--success); }
.task-complete-pill.completed{
background: color-mix(in oklab, var(--success) 12%, white);
border-color: color-mix(in oklab, var(--success) 40%, white);
color: var(--success); font-weight: 600;
}
.task-complete-pill.completed svg{ color: var(--success); }
/* Visibility strip */
.task-visibility{
display:flex; align-items:center; gap:8px;
padding: 10px 20px;
background: var(--ink-50);
border-bottom: 1px solid var(--ink-200);
font-size: 13px; color: var(--ink-700);
}
.task-visibility svg{ width: 14px; height: 14px; color: var(--ink-600); }
.task-visibility span{ flex: 1; }
.tp-link-btn{
color: var(--ms-orange); font-weight: 500; font-size: 13px;
background: transparent;
}
.tp-link-btn:hover{ text-decoration: underline; }
/* Body scroll area */
.task-panel-body{
padding: 24px 28px;
overflow-y: auto;
flex: 1;
}
.tp-title{
margin: 0 0 24px;
font-size: 24px; font-weight: 700;
letter-spacing: -.01em;
line-height: 1.25;
outline: none;
}
.tp-title:focus{ box-shadow: 0 0 0 2px var(--ms-orange-tint); border-radius: 4px; }
/* Properties grid */
.tp-props{ display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.tp-prop-row{
display: grid;
grid-template-columns: 130px 1fr;
align-items: center;
min-height: 36px;
padding: 4px 0;
}
.tp-prop-label{ font-size: 13px; color: var(--ink-600); font-weight: 500; }
.tp-prop-value{ display: flex; align-items: center; gap: 8px; min-width: 0; }
.tp-field{
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: 13.5px; color: var(--ink-900);
background: transparent;
border: 1px solid transparent;
transition: background .12s, border-color .12s;
min-height: 32px;
max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-field:hover{ background: var(--ink-50); border-color: var(--ink-200); }
.tp-field svg{ width: 16px; height: 16px; color: var(--ink-500); flex-shrink: 0; }
.tp-field .assignee .row-avatar{ width: 22px; height: 22px; font-size: 10px; }
.tp-field .muted{ color: var(--ink-500); }
.tp-field-empty:hover{ background: var(--ms-orange-50); border-color: var(--ms-orange-200); }
.tp-clear{
width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-500); font-size: 14px;
background: transparent;
transition: background .12s, color .12s;
}
.tp-clear:hover{ background: var(--ink-100); color: var(--ink-900); }
.tp-meta-pill{
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: 12px; color: var(--ink-600);
background: transparent;
border: 1px solid transparent;
}
.tp-meta-pill:hover{ background: var(--ink-100); }
.tp-meta-pill svg{ width: 12px; height: 12px; }
/* Sections (Projects / Description / Comments) */
.tp-section{ margin: 20px 0; }
.tp-section-head{ display:flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tp-section-head h4, .tp-section-title{
font-size: 13px; font-weight: 600; color: var(--ink-700);
text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px;
}
.tp-count{
display: inline-block;
font-size: 11px; padding: 1px 6px;
background: var(--ink-100); color: var(--ink-700);
border-radius: 999px; font-weight: 600;
margin-left: 4px;
text-transform: none;
}
.tp-icon-add{
width: 22px; height: 22px; border-radius: var(--radius-sm);
color: var(--ink-500); font-size: 16px; line-height: 1;
background: transparent;
}
.tp-icon-add:hover{ background: var(--ink-100); color: var(--ink-900); }
.tp-projects{ display: flex; flex-direction: column; gap: 6px; }
.tp-project-pill{
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
border: 1px solid var(--ink-200);
background: var(--white);
}
.tp-project-pill .swatch{ width: 14px; height: 14px; border-radius: 4px; flex-shrink:0; }
.tp-project-name{ font-size: 14px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-section-chip{
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
background: var(--ms-orange-tint);
color: var(--ms-orange-700);
border-radius: var(--radius-sm);
font-size: 12px; font-weight: 500;
border: 1px solid var(--ms-orange-200);
}
.tp-section-chip svg{ width: 12px; height: 12px; }
.tp-section-chip:hover{ background: var(--ms-orange-100); }
/* Comment composer (sticky bottom) */
.tp-comment-composer{
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
border-top: 1px solid var(--ink-200);
background: var(--white);
flex-shrink: 0;
}
.tp-comment-composer .tp-me{ width: 28px; height: 28px; font-size: 11px; flex-shrink:0; }
.tp-comment-composer input{
flex: 1;
padding: 9px 14px;
border: 1px solid var(--ink-300);
border-radius: 999px;
font-size: 13px; outline: none;
background: var(--ink-50);
}
.tp-comment-composer input:focus{
background: var(--white); border-color: var(--ms-orange);
box-shadow: 0 0 0 3px var(--ms-orange-tint);
}
.tp-comment-composer button[type="submit"]{ color: var(--ms-orange); }
.tp-comment-composer button[type="submit"]:hover{ color: var(--ms-orange-700); background: var(--ms-orange-tint); }
/* ╔══════════════════════════════════════════════════════╗
║ POPOVER PICKERS + CONTEXT MENU ║
╚══════════════════════════════════════════════════════╝ */
.picker{
position: fixed; z-index: 250;
min-width: 260px; max-width: 320px;
background: var(--white);
border: 1px solid var(--ink-200);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 8px;
animation: drop-in .1s ease-out;
}
.picker-search{
width: 100%;
padding: 8px 10px;
border: 1px solid var(--ink-300);
border-radius: var(--radius-sm);
font-size: 13px;
outline: none;
margin-bottom: 6px;
}
.picker-search:focus{ border-color: var(--ms-orange); box-shadow: 0 0 0 3px var(--ms-orange-tint); }
.picker-list{ max-height: 280px; overflow-y: auto; display:flex; flex-direction: column; gap: 1px; }
.picker-item{
display: flex; align-items: center; gap: 8px;
padding: 7px 10px;
border-radius: var(--radius-sm);
font-size: 13px; text-align: left;
background: transparent;
}
.picker-item:hover{ background: var(--ms-orange-tint); color: var(--ms-orange-700); }
.picker-item .row-avatar{ width:24px; height:24px; font-size:10px; }
.picker-date{ min-width: 220px; }
.picker-date input[type="date"]{
width: 100%; padding: 8px 10px;
border: 1px solid var(--ink-300); border-radius: var(--radius-sm);
font-size: 13px; outline: none;
}
.picker-actions{ display:flex; justify-content:space-between; margin-top: 8px; }
.ctx-menu{
position: fixed; z-index: 260;
min-width: 180px;
background: var(--white);
border: 1px solid var(--ink-200);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 4px;
animation: drop-in .1s ease-out;
}
.ctx-item{
display: block; width:100%; text-align:left;
padding: 8px 10px; border-radius: var(--radius-sm);
font-size: 13px; color: var(--ink-800);
}
.ctx-item:hover{ background: var(--ink-100); }
.ctx-danger{ color: var(--danger); }
.ctx-danger:hover{ background: #FEECEC; }
/* Color swatches (modal) */
.color-swatches{ display:flex; flex-wrap: wrap; gap: 8px; }
.color-swatch{
width: 26px; height: 26px; border-radius: 8px;
border: 2px solid transparent;
cursor: pointer;
}
.color-swatch:hover{ transform: scale(1.08); }
.color-swatch.active{ border-color: var(--ink-900); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ms-orange); }
/* Member list — Asana-style */
.member-list{
max-height: 380px; overflow-y: auto;
display:flex; flex-direction:column; gap: 2px;
padding: 4px 2px;
margin: 0 -4px;
}
.member-list::-webkit-scrollbar{ width: 10px; }
.member-list::-webkit-scrollbar-thumb{
background: var(--ink-200); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
}
.member-list::-webkit-scrollbar-thumb:hover{ background: var(--ink-300); background-clip: padding-box; border: 2px solid transparent; }
.member-row{
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
transition: background .15s ease, box-shadow .15s ease;
}
.member-row:hover{
background: var(--ms-orange-50);
box-shadow: inset 0 0 0 1px var(--ms-orange-100);
}
.member-row input[type="checkbox"]{
width: 18px; height: 18px;
accent-color: var(--ms-orange);
flex-shrink: 0;
cursor: pointer;
}
.member-row .row-avatar{ width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.member-row strong{ font-weight: 600; font-size: 14px; color: var(--ink-900); }
.member-row .muted{ font-size: 12px; color: var(--ink-500); margin-top: 1px; }
/* Role dropdown — Asana pill, no native OS look */
.member-row select{
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding: 6px 32px 6px 12px;
border: 1px solid var(--ink-200);
border-radius: 999px;
background-color: var(--white);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
font-size: 12px; font-weight: 600;
color: var(--ink-700);
cursor: pointer;
min-width: 112px;
transition: border-color .15s, box-shadow .15s, color .15s;
}
.member-row select:hover:not(:disabled){
border-color: var(--ms-orange-200);
color: var(--ms-orange-700);
}
.member-row select:focus{
outline: none;
border-color: var(--ms-orange);
box-shadow: 0 0 0 3px var(--ms-orange-tint);
}
.member-row select:disabled{ opacity: .45; cursor: not-allowed; }
/* Modal search input — smooth pill, no inline-style boxiness */
.modal-body input[type="search"],
.modal-body input#tmSearch,
.modal-body input#apmSearch,
.modal-body input[placeholder^="Search"]{
width: 100%;
padding: 10px 14px 10px 38px !important;
border: 1px solid var(--ink-200) !important;
border-radius: 999px !important;
background-color: var(--ink-50) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: left 12px center !important;
font-size: 14px !important;
transition: background-color .15s, border-color .15s, box-shadow .15s !important;
margin-bottom: 14px !important;
}
.modal-body input#tmSearch:focus,
.modal-body input#apmSearch:focus,
.modal-body input[placeholder^="Search"]:focus{
outline: none !important;
background-color: var(--white) !important;
border-color: var(--ms-orange) !important;
box-shadow: 0 0 0 3px var(--ms-orange-tint) !important;
}
/* Inbox */
.inbox-list{ display: flex; flex-direction: column; }
.inbox-item{
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--ink-200);
cursor: pointer;
}
.inbox-item:hover{ background: var(--ink-50); }
.inbox-item.unread{ background: var(--ms-orange-50); }
.inbox-item.unread .inbox-body::before{
content:''; position: absolute; left: -10px; top: 12px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--ms-orange);
}
.inbox-item .row-avatar{ flex-shrink:0; }
.inbox-body{ position: relative; flex: 1; font-size: 14px; }
.inbox-meta{ color: var(--ink-500); font-size: 12px; margin-top: 2px; }
/* Comments */
.panel-comments{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.comment{ display: flex; gap: 10px; }
.comment .row-avatar{ width: 28px; height: 28px; font-size: 11px; flex-shrink:0; }
.comment-body{ flex: 1; font-size: 13px; }
.panel-comment-form{ display: flex; gap: 8px; margin-top: 8px; }
.panel-comment-form input{
flex: 1; padding: 10px 12px;
border: 1px solid var(--ink-300);
border-radius: var(--radius-md);
font-size: 13px; outline: none;
}
.panel-comment-form input:focus{ border-color: var(--ms-orange); box-shadow: 0 0 0 3px var(--ms-orange-tint); }
.panel-attachments{ display: flex; flex-direction: column; gap: 6px; }
.attach-row{
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border: 1px solid var(--ink-200);
border-radius: var(--radius-md);
background: var(--white);
text-decoration: none; color: inherit;
transition: border-color .12s, background .12s;
cursor: pointer;
}
.attach-row:hover{ border-color: var(--ms-orange); background: var(--ms-orange-50); }
.attach-icon{
width: 36px; height: 36px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--ms-orange-tint); color: var(--ms-orange-700);
font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.attach-meta{ flex: 1; min-width: 0; }
.attach-name{ font-size: 13px; font-weight: 500; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-sub{ font-size: 11px; color: var(--ink-500); margin-top: 2px; }
.attach-dl{ width: 16px; height: 16px; color: var(--ink-500); flex-shrink: 0; }
.attach-row:hover .attach-dl{ color: var(--ms-orange); }
.tp-section-row{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tp-section-row .tp-section-title{ margin: 0; }
.panel-desc-view{
padding: 4px 2px 6px;
font-size: 14px; color: var(--ink-900); line-height: 1.6;
min-height: 60px;
cursor: text;
border-radius: var(--radius-sm);
transition: background .12s;
}
.panel-desc-view:hover{ background: var(--ink-50); }
.panel-desc-view .rich,
.panel-desc-view .rich body{ font-size: 14px; color: var(--ink-900); line-height: 1.6; }
.panel-desc-view .rich h1{ font-size: 20px; font-weight: 700; margin: 18px 0 8px; letter-spacing: -.01em; }
.panel-desc-view .rich h2{ font-size: 16px; font-weight: 700; margin: 16px 0 6px; }
.panel-desc-view .rich h3{ font-size: 14px; font-weight: 700; margin: 14px 0 4px; }
.panel-desc-view .rich p{ margin: 6px 0; }
.panel-desc-view .rich ul, .panel-desc-view .rich ol{ padding-left: 22px; margin: 6px 0; }
.panel-desc-view .rich li{ margin: 2px 0; }
.panel-desc-view .rich strong, .panel-desc-view .rich b{ font-weight: 600; color: var(--ink-900); }
.panel-desc-view .rich em, .panel-desc-view .rich i{ font-style: italic; }
.panel-desc-view .rich a{ color: var(--ms-orange-700); text-decoration: underline; }
.panel-desc-view .rich a:hover{ color: var(--ms-orange); }
.panel-desc-view .rich code{
background: var(--ink-100); padding: 1px 6px; border-radius: 4px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 12.5px; color: var(--ink-900);
}
.panel-desc-view .rich pre{
background: var(--ink-50); border: 1px solid var(--ink-200);
padding: 10px 12px; border-radius: var(--radius-md);
overflow-x: auto; margin: 8px 0;
font-size: 12.5px; line-height: 1.5;
}
.panel-desc-view .rich pre code{ background: transparent; padding: 0; }
.panel-desc-view .rich blockquote{
margin: 8px 0; padding: 6px 12px;
border-left: 3px solid var(--ms-orange);
color: var(--ink-700); background: var(--ms-orange-50);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.panel-desc-view .rich hr{ border: 0; border-top: 1px solid var(--ink-200); margin: 14px 0; }
.panel-desc-edit{
width: 100%;
padding: 12px 14px;
background: var(--white);
border: 1px solid var(--ink-200);
border-radius: var(--radius-md);
font-size: 14px; color: var(--ink-800);
font-family: inherit;
line-height: 1.5;
min-height: 80px;
resize: vertical;
outline: none;
}
.panel-desc-edit:focus{ border-color: var(--ms-orange); box-shadow: 0 0 0 3px var(--ms-orange-tint); }
/* Drag/drop */
.tl-row.dragging, .card.dragging{ opacity: 0.4; }
.drop-target{ background: var(--ms-orange-tint) !important; outline: 2px dashed var(--ms-orange); outline-offset: -2px; }
/* Clickable cell affordance in list */
.tl-c-assignee, .tl-c-due, .tl-c[data-priority]{ cursor: pointer; }
.tl-c-assignee:hover, .tl-c-due:hover, .tl-c[data-priority]:hover{ background: rgba(241,88,43,.04); }
/* ╔══════════════════════════════════════════════════════╗
║ OVERVIEW / CALENDAR / TIMELINE / DASHBOARD / GOALS ║
╚══════════════════════════════════════════════════════╝ */
.overview{ display:flex; flex-direction:column; gap:16px; max-width: 1000px; }
.ov-card{
background: var(--white); border: 1px solid var(--ink-200);
border-radius: var(--radius-lg); padding: 18px 20px;
}
.ov-card h4{ margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-800); }
.ov-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:820px){ .ov-cols{ grid-template-columns: 1fr; } }
.ov-roles{ display:flex; flex-direction:column; gap:10px; }
.ov-member{ display:flex; align-items:center; gap:10px; font-size:14px; }
.ov-progress-bar{ height: 8px; background: var(--ink-100); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.ov-progress-fill{ height:100%; background: linear-gradient(90deg, var(--ms-orange), var(--ms-orange-600)); transition: width .3s; }
.ov-progress-stats{ display:flex; gap: 24px; }
.ov-progress-stats > div{ display:flex; flex-direction:column; }
.ov-progress-stats strong{ font-size: 22px; font-weight: 700; }
.ov-progress-stats span{ font-size: 12px; color: var(--ink-500); }
.ov-list{ display:flex; flex-direction:column; gap: 2px; }
/* Calendar */
.cal{ border: 1px solid var(--ink-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.cal-head{ display:flex; align-items:center; gap:8px; padding: 12px 16px; border-bottom: 1px solid var(--ink-200); }
.cal-title{ font-size: 16px; font-weight: 600; flex: 1; }
.cal-weekdays{ display: grid; grid-template-columns: repeat(7, 1fr); background: var(--ink-50); border-bottom: 1px solid var(--ink-200); }
.cal-weekdays > div{ padding: 8px 10px; font-size: 11px; font-weight: 700; color: var(--ink-600); text-transform: uppercase; letter-spacing: .04em; }
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell{ border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); min-height: 110px; padding: 6px; position: relative; }
.cal-cell:nth-child(7n){ border-right: 0; }
.cal-other{ background: var(--ink-50); color: var(--ink-400); }
.cal-other .cal-daynum{ color: var(--ink-400); }
.cal-today{ background: var(--ms-orange-50); }
.cal-today .cal-daynum{ background: var(--ms-orange); color: var(--white); }
.cal-daynum{
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
font-size: 13px; font-weight: 600;
}
.cal-items{ display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.cal-chip{
display: flex; align-items: center; gap: 6px;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
background: var(--ms-orange-50);
color: var(--ink-800);
cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-chip .swatch{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cal-chip:hover{ background: var(--ms-orange-100); }
.cal-chip.done{ text-decoration: line-through; color: var(--ink-500); background: var(--ink-100); }
.cal-more{ font-size: 11px; color: var(--ink-500); padding: 2px 6px; }
/* Timeline (Gantt) */
.tl-gantt{ border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--white); overflow: auto; }
.tl-gantt-header{ display: flex; position: sticky; top: 0; background: var(--ink-50); border-bottom: 1px solid var(--ink-200); z-index: 2; }
.tl-gantt-name-h, .tl-gantt-name{ width: 240px; min-width: 240px; padding: 8px 12px; border-right: 1px solid var(--ink-200); display: flex; align-items: center; gap: 8px; }
.tl-gantt-name-h{ font-size: 11px; font-weight: 700; color: var(--ink-600); text-transform: uppercase; letter-spacing: .04em; }
.tl-gantt-ruler{ display: flex; }
.tl-gantt-day{
font-size: 11px; color: var(--ink-700); text-align: center;
border-right: 1px solid var(--ink-200);
padding: 4px 2px;
display: flex; flex-direction: column; align-items: center;
}
.tl-gantt-day small{ color: var(--ink-500); font-size: 9px; }
.tl-gantt-day.today{ background: var(--ms-orange-tint); color: var(--ms-orange-700); font-weight: 700; }
.tl-gantt-body{ display: flex; flex-direction: column; }
.tl-gantt-row{ display: flex; border-bottom: 1px solid var(--ink-100); min-height: 40px; }
.tl-gantt-row:hover{ background: var(--ms-orange-50); }
.tl-gantt-row .check{ width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-300); flex-shrink: 0; }
.tl-gantt-row .check.checked{ background: var(--success); border-color: var(--success); position: relative; }
.tl-gantt-row .check.checked::after{ content:''; position: absolute; left: 4px; top: 2px; width: 3px; height: 7px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tl-gantt-track{ flex: 1; position: relative; height: 40px; }
.tl-gantt-bar{
position: absolute; top: 8px; height: 24px;
border-radius: 6px;
padding: 0 10px;
display: flex; align-items: center;
color: white; font-size: 12px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: transform .1s, box-shadow .15s;
}
.tl-gantt-bar:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
.tl-gantt-bar.done{ opacity: .65; }
/* Dashboard */
.dash{ display: flex; flex-direction: column; gap: 16px; }
.dash-cards{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media(max-width: 820px){ .dash-cards{ grid-template-columns: repeat(2, 1fr); } }
.dash-card{
background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
padding: 18px 20px; text-align: left;
}
.dash-card .dash-n{ font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.dash-card .dash-l{ font-size: 12px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.dash-success .dash-n{ color: var(--success); }
.dash-warn .dash-n{ color: var(--warning); }
.dash-danger .dash-n{ color: var(--danger); }
.dash-cols{ display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
@media(max-width: 820px){ .dash-cols{ grid-template-columns: 1fr; } }
.dash-panel{ background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 20px; }
.dash-panel h4{ margin: 0 0 16px; font-size: 14px; font-weight: 600; }
.dash-donut{
width: 180px; height: 180px; margin: 0 auto; position: relative;
background: conic-gradient(var(--color) calc(var(--pct)*1%), var(--ink-200) 0);
border-radius: 50%;
}
.dash-donut-inner{
position: absolute; inset: 20px;
background: var(--white); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 28px; font-weight: 700;
}
.dash-legend{ text-align: center; margin-top: 10px; color: var(--ink-600); font-size: 13px; }
.dash-bars{ display: flex; flex-direction: column; gap: 10px; }
.dash-bar-row{ display: grid; grid-template-columns: 180px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; }
.dash-bar-label{ display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-label .row-avatar{ width: 22px; height: 22px; font-size: 10px; }
.dash-bar-track{ display: flex; height: 18px; background: var(--ink-100); border-radius: 6px; overflow: hidden; }
.dash-bar{ height: 100%; }
.dash-bar-num{ text-align: right; color: var(--ink-600); font-variant-numeric: tabular-nums; }
/* Goals */
.goals{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.goal-card{ background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 18px; }
.goal-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.goal-head h4{ margin: 0; font-size: 15px; font-weight: 600; }
.goal-card p{ margin: 4px 0 10px; font-size: 13px; color: var(--ink-600); }
.goal-meta{ font-size: 12px; color: var(--ink-500); margin-bottom: 10px; }
.goal-progress{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.goal-progress-bar{ flex: 1; height: 8px; background: var(--ink-100); border-radius: 999px; overflow: hidden; }
.goal-progress-fill{ height: 100%; background: var(--ms-orange); }
.goal-actions{ display: flex; gap: 6px; justify-content: flex-end; }
/* Profile */
.profile-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.avatar-xl{ width: 56px; height: 56px; font-size: 18px; }
.modal-wide{ max-width: 600px !important; }
/* Filter popover */
.filter-pop{ min-width: 280px; padding: 12px; }
.pop-section{ margin-bottom: 12px; }
.pop-label{ font-size: 11px; font-weight: 700; color: var(--ink-600); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.pop-radio{ display: flex; gap: 6px; flex-wrap: wrap; }
.pop-radio label{ display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; background: var(--ink-100); font-size: 12px; cursor: pointer; }
.pop-radio label:has(input:checked){ background: var(--ms-orange-tint); color: var(--ms-orange-700); }
.pop-radio input{ display: none; }
.pop-select{ width: 100%; padding: 6px 10px; border: 1px solid var(--ink-300); border-radius: 6px; font-size: 13px; outline: none; }
.pop-select:focus{ border-color: var(--ms-orange); box-shadow: 0 0 0 3px var(--ms-orange-tint); }
.pop-foot{ display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ink-200); }
/* ╔══════════════════════════════════════════════════════╗
║ OMNISEARCH ║
╚══════════════════════════════════════════════════════╝ */
.omni-panel{
position: fixed; z-index: 300;
max-height: 70vh; overflow-y: auto;
background: var(--white);
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: 12px;
animation: drop-in .12s ease-out;
}
.omni-panel[hidden]{ display: none; }
.omni-tokens{
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
padding: 10px 12px;
border: 2px solid var(--info);
border-radius: var(--radius-md);
margin-bottom: 10px;
background: var(--white);
position: relative;
}
.omni-token{
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 4px 4px 6px;
background: var(--ink-100);
border-radius: 6px;
font-size: 13px;
}
.omni-token-x{
width: 18px; height: 18px; border-radius: 4px;
color: var(--ink-500); font-size: 13px;
background: transparent;
}
.omni-token-x:hover{ background: var(--ink-200); color: var(--ink-900); }
.omni-filter-icon{
margin-left: auto;
width: 28px; height: 28px; border-radius: 6px;
color: var(--ink-500); background: transparent;
display: inline-flex; align-items: center; justify-content: center;
}
.omni-filter-icon svg{ width: 16px; height: 16px; }
.omni-chips-compact{ border-bottom: 0 !important; padding: 4px 4px 10px !important; }
.omni-chip-pill{
background: #EEF3FF;
border-color: #C7D7FE;
color: #2A4EC5;
}
.omni-chip-pill.active{
background: #EEF3FF;
border-color: #2A4EC5;
color: #2A4EC5;
}
.omni-chip-pill .chip-x{
margin-left: 4px; color: currentColor; opacity: .7;
font-size: 14px; line-height: 1;
}
.omni-chip-pill .chip-x:hover{ opacity: 1; }
.omni-members{ padding-right: 4px; }
.omni-members .row-avatar{ width: 26px; height: 26px; font-size: 10px; }
.omni-members .row-avatar-tok{
outline: 2px solid var(--ms-orange);
outline-offset: 1px;
z-index: 2;
position: relative;
}
.omni-sub svg{ width: 12px; height: 12px; }
.omni-chips{
display: flex; flex-wrap: wrap; gap: 6px;
padding: 4px 4px 12px;
border-bottom: 1px solid var(--ink-200);
}
.omni-chip{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border: 1px solid var(--ink-300);
border-radius: 999px;
font-size: 13px; font-weight: 500;
color: var(--ink-700); background: var(--white);
transition: all .12s;
}
.omni-chip svg{ width: 14px; height: 14px; color: var(--ink-600); }
.omni-chip:hover{ background: var(--ink-50); border-color: var(--ink-400); }
.omni-chip.active{
background: var(--ms-orange-tint);
border-color: var(--ms-orange);
color: var(--ms-orange-700);
}
.omni-chip.active svg{ color: var(--ms-orange); }
.omni-section{ padding: 12px 0 4px; }
.omni-section-head{
font-size: 11px; font-weight: 700;
color: var(--ink-500);
text-transform: uppercase; letter-spacing: .06em;
padding: 4px 8px 8px;
}
.omni-row{
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
cursor: pointer;
transition: background .12s;
}
.omni-row:hover{ background: var(--ms-orange-50); }
.omni-row .check{
width: 18px; height: 18px; border-radius: 50%;
border: 1.5px solid var(--ink-300); flex-shrink: 0;
}
.omni-row .check.checked{ background: var(--success); border-color: var(--success); position: relative; }
.omni-row .check.checked::after{
content:''; position: absolute; left: 5px; top: 3px;
width: 4px; height: 8px;
border: solid white; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.omni-row .row-avatar{ width: 28px; height: 28px; font-size: 11px; }
.omni-row .swatch{ width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; }
.omni-row .swatch-lg{ width: 22px; height: 22px; border-radius: 6px; }
.omni-row-main{ flex: 1; min-width: 0; }
.omni-title{ font-size: 14px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.omni-title.done{ color: var(--ink-500); text-decoration: line-through; }
.omni-sub{
display: flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--ink-500);
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.omni-sub .swatch{ width: 10px; height: 10px; border-radius: 3px; }
.omni-empty{
padding: 30px 20px; text-align: center;
color: var(--ink-500); font-size: 14px;
}
.omni-saved{ padding: 14px 4px 4px; border-top: 1px solid var(--ink-200); margin-top: 8px; }
.omni-saved-head{
font-size: 11px; font-weight: 700; color: var(--ink-500);
text-transform: uppercase; letter-spacing: .06em;
padding: 4px 8px 10px;
}
.omni-saved-list{ display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.omni-saved-pill{
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border: 1px solid var(--ink-200);
border-radius: 999px;
background: var(--white);
font-size: 13px; color: var(--ink-800);
transition: all .12s;
}
.omni-saved-pill:hover{
background: var(--ms-orange-tint);
border-color: var(--ms-orange-200);
color: var(--ms-orange-700);
}
.omni-saved-pill svg{ width: 14px; height: 14px; color: var(--ink-500); }
.omni-saved-pill:hover svg{ color: var(--ms-orange); }
.check-mini{
width:16px; height:16px; border-radius: 50%;
border: 1.5px solid var(--ink-300);
flex-shrink: 0;
}
/* ╔══════════════════════════════════════════════════════╗
║ MOBILE RESPONSIVE ║
╚══════════════════════════════════════════════════════╝ */
/* Scrim overlay for mobile drawer */
.sidebar-scrim{
position: fixed; inset: var(--topbar-h) 0 0 0;
background: rgba(16,24,40,.45);
z-index: 85;
animation: drop-in .15s ease-out;
}
@media (max-width: 768px){
:root{ --topbar-h: 52px; }
/* Topbar */
.topbar{ padding: 0 8px; gap: 6px; }
.topbar-left{ gap: 6px; }
.topbar-center{ padding: 0 4px; }
.topbar-right{ gap: 0; }
.brand-name{ display: none; }
.icon-btn{ width: 34px; height: 34px; }
.search{ padding: 6px 10px; }
.search input{ font-size: 13px; }
.avatar{ margin-left: 4px; }
/* Dropdown stays on-screen */
.dropdown{ right: 4px; min-width: 240px; }
/* Sidebar -> off-canvas drawer */
.shell-body,
.app-shell.sidebar-collapsed .shell-body{
grid-template-columns: 1fr !important;
}
.sidebar{
position: fixed;
top: var(--topbar-h); left: 0; bottom: 0;
width: 280px; max-width: 85vw;
transform: translateX(-100%);
transition: transform .22s ease;
z-index: 90;
box-shadow: var(--shadow-xl);
background: var(--paper);
}
.app-shell.sidebar-open .sidebar{ transform: translateX(0); }
/* Undo the 960px icon-only collapse — drawer always shows full labels */
.sidebar .nav-item span,
.sidebar .sidebar-section,
.sidebar .sidebar-foot{ display: revert !important; }
.sidebar .sidebar-section{ display: flex !important; }
.app-shell.sidebar-collapsed .sidebar{ transform: translateX(-100%); }
.app-shell.sidebar-collapsed.sidebar-open .sidebar{ transform: translateX(0); }
/* Main takes full width */
.main{ width: 100%; }
.main::before{ right: -10%; bottom: -8%; width: 90%; height: 50%; opacity: .04; }
/* Views */
.view{ padding: 16px 14px 40px; }
.view[data-view="project"]{ padding: 10px 12px 30px; }
.view-hero{ margin-bottom: 18px; }
.view-hero h1{ font-size: 24px; }
.view-header{
flex-wrap: wrap; align-items: flex-start;
gap: 10px; margin-bottom: 16px; padding-bottom: 12px;
}
.view-header h1{ font-size: 18px; }
.view-tabs{ flex-wrap: wrap; width: 100%; }
.view-tabs .pill{ padding: 6px 12px; font-size: 12px; }
/* Widgets */
.widget-grid{ grid-template-columns: 1fr; gap: 14px; }
.widget-head{ padding: 14px 14px 10px; }
.widget-tabs{ padding: 0 10px 8px; flex-wrap: wrap; }
.widget-people{ padding: 12px 14px; }
/* Reports */
.report-grid{ grid-template-columns: 1fr; }
/* Dashboard KPIs */
.dash-cards{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dash-card{ padding: 14px 14px; }
.dash-card .dash-n{ font-size: 22px; }
.dash-cols{ grid-template-columns: 1fr; }
.dash-panel{ padding: 16px; }
.dash-bar-row{ grid-template-columns: 110px 1fr 44px; font-size: 12px; gap: 8px; }
.dash-donut{ width: 150px; height: 150px; }
/* Project list — keep columns, horizontal scroll */
.tl{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tl-head, .tl-row, .tl-add{ min-width: 760px; }
.tl-h-name{ padding-left: 14px; }
.tl-c-name{ padding-left: 10px; }
/* Project toolbar + header */
.proj-band{ padding-top: 0; }
.proj-title-row{ flex-wrap: wrap; gap: 8px; padding: 2px 0 8px; }
.proj-name{ font-size: 17px; }
.proj-actions{ flex-wrap: wrap; width: 100%; justify-content: flex-start; overflow-x: auto; }
.proj-tabs{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px; }
.proj-tab{ white-space: nowrap; padding: 10px 12px; font-size: 13px; }
.proj-toolbar{ flex-wrap: wrap; gap: 6px; padding: 8px 0 10px; }
.tb-left, .tb-right{ flex-wrap: wrap; }
.tb-search-inline{ width: 100%; margin: 4px 0 0; }
/* Board (kanban) */
.board-col{ flex: 0 0 84vw; max-height: calc(100vh - 240px); }
/* Gantt / Timeline */
.tl-gantt-name-h, .tl-gantt-name{ width: 150px; min-width: 150px; }
/* Calendar */
.cal-cell{ min-height: 64px; padding: 3px; }
.cal-chip{ font-size: 10px; padding: 1px 4px; }
.cal-daynum{ width: 20px; height: 20px; font-size: 11px; }
.cal-weekdays > div{ padding: 6px 4px; font-size: 10px; }
.cal-head{ padding: 10px 12px; }
.cal-title{ font-size: 14px; }
/* Overview */
.overview{ max-width: 100%; }
.ov-card{ padding: 14px 16px; }
.ov-progress-stats{ gap: 14px; flex-wrap: wrap; }
/* Goals */
.goals{ grid-template-columns: 1fr; }
/* Tables */
.table-wrap{ overflow-x: auto; }
.data-table{ min-width: 560px; }
.data-table th, .data-table td{ padding: 9px 12px; font-size: 13px; }
/* Task side panel — full width on mobile */
.task-panel,
.task-panel-wide{ width: 100vw !important; max-width: 100vw; }
.task-panel-body{ padding: 16px; }
.task-title-row h2{ font-size: 17px; }
.task-props > div{ grid-template-columns: 90px 1fr; gap: 6px; }
/* Modals */
.modal-root{ padding: 12px; align-items: flex-start; padding-top: 40px; }
.modal{ max-width: 100%; width: 100%; }
.modal-body{ padding: 16px; }
.modal-head{ padding: 14px 16px; }
.modal-foot{ margin: 8px -16px -16px; padding: 12px 16px; flex-wrap: wrap; }
/* Login */
.login-panel{ padding: 28px 20px; gap: 24px; }
.logo-text{ font-size: 20px; }
/* Toasts */
.toasts{ left: 12px; right: 12px; bottom: 12px; }
.toast{ min-width: 0; max-width: 100%; font-size: 13px; }
/* Omnisearch popover */
.omni-panel{ left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; }
/* Context + picker menus */
.ctx-menu, .picker-menu{ max-width: calc(100vw - 24px); }
}
@media (max-width: 480px){
.topbar-center{ display: none; }
.dash-cards{ grid-template-columns: 1fr; }
.view-hero h1{ font-size: 20px; }
.view-header h1{ font-size: 17px; }
.dash-bar-row{ grid-template-columns: 90px 1fr 40px; font-size: 11px; }
.cal-cell{ min-height: 52px; }
.cal-weekdays > div{ padding: 4px 2px; font-size: 9px; }
.cal-daynum{ width: 18px; height: 18px; font-size: 10px; }
.proj-tab{ padding: 10px 10px; font-size: 12px; }
.widget-head h3{ font-size: 14px; }
.login-foot{ font-size: 11px; }
.brand-dot{ width: 22px; height: 22px; border-radius: 6px; }
.icon-btn{ width: 32px; height: 32px; }
.icon-btn svg{ width: 18px; height: 18px; }
.avatar{ width: 30px; height: 30px; }
}
/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse){
.row, .tl-row, .nav-item, .sidebar-item, .dropdown-item, .picker-item{
min-height: 40px;
}
.btn{ min-height: 40px; }
/* Avoid iOS focus zoom on inputs < 16px */
@media (max-width: 768px){
input:not([type="checkbox"]):not([type="radio"]),
select, textarea{ font-size: 16px !important; }
}
}
/* ╔══════════════════════════════════════════════════════╗
║ MOBILE — extra enhancements (override inline grids) ║
╚══════════════════════════════════════════════════════╝ */
@media (max-width: 768px){
/* Kill horizontal scroll on the whole app */
html, body{ overflow-x: hidden; max-width: 100vw; }
body{ -webkit-text-size-adjust: 100%; }
.app-shell{ max-width: 100vw; overflow-x: hidden; }
.shell-body, .main, .view{ min-width: 0; }
.view{ max-width: 100%; }
/* Reports dashboards (KPI / Ecom / PM) use inline grid-template-columns.
Collapse them via attribute selectors. */
.view-body [style*="grid-template-columns:repeat(4"],
.view-body [style*="grid-template-columns: repeat(4"]{
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.view-body [style*="grid-template-columns:repeat(3"],
.view-body [style*="grid-template-columns: repeat(3"]{
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.view-body [style*="grid-template-columns:3fr 2fr"],
.view-body [style*="grid-template-columns: 3fr 2fr"],
.view-body [style*="grid-template-columns:2fr 3fr"],
.view-body [style*="grid-template-columns: 2fr 3fr"],
.view-body [style*="grid-template-columns:1fr 1fr"],
.view-body [style*="grid-template-columns: 1fr 1fr"]{
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* KPI/chart card tweaks */
.kpi-grid{ grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
.kpi-card{ padding: 14px !important; gap: 8px !important; }
.kpi-card .kpi-value{ font-size: 22px !important; }
.kpi-chart-card{ padding: 14px !important; }
/* Inline-padded wrappers in reports */
.view-body [style*="padding:24px"],
.view-body [style*="padding: 24px"]{
padding: 14px !important;
}
/* Charts / SVG responsive */
.view-body canvas, .view-body svg{
max-width: 100% !important; height: auto !important;
}
/* Home widget tweaks */
.widget-body{ min-height: 120px; padding: 4px 2px; }
.widget-tab{ padding: 6px 8px; font-size: 12px; }
/* My tasks row density */
.row{ padding: 10px 10px; gap: 10px; }
.row-title{ font-size: 13px; }
.row-date{ font-size: 11px; }
/* Inbox */
.inbox-item{ padding: 12px 12px; gap: 10px; }
.inbox-body{ font-size: 13px; }
/* Board — snap scrolling for columns */
.board{ scroll-snap-type: x mandatory; gap: 10px; padding: 0 2px 10px; }
.board-col{ scroll-snap-align: start; }
/* Project list: let the scroll container span full view width */
.view[data-view="project"] .section-block{
border-radius: 0;
margin-left: -12px; margin-right: -12px;
border-left: 0; border-right: 0;
}
/* Avatar dropdown never overflows right edge */
.avatar-menu .dropdown{
position: fixed; top: calc(var(--topbar-h) + 4px);
right: 8px; left: 8px; width: auto; min-width: 0;
}
/* Task panel top toolbar can wrap */
.task-panel-top{ flex-wrap: wrap; gap: 8px; }
/* Search shrinks correctly */
.search, .search input{ min-width: 0; }
/* Sticky project band */
.proj-band{ position: sticky; top: 0; background: var(--white); z-index: 3; }
/* Timeline gantt mobile readability */
.tl-gantt-day{ min-width: 32px; font-size: 10px; }
/* Toolbar on mobile — drop separators */
.tb-add-sep{ display: none; }
/* Report activity/bar rows breathing room */
.view-body [style*="display:flex"][style*="align-items:center"]{ min-width: 0; }
}
@media (max-width: 480px){
.kpi-grid,
.view-body [style*="grid-template-columns:repeat(4"],
.view-body [style*="grid-template-columns: repeat(4"]{
grid-template-columns: 1fr !important;
}
.kpi-card .kpi-value{ font-size: 20px !important; }
.view[data-view="project"]{ padding: 8px 8px 24px; }
.view[data-view="project"] .section-block{ margin-left: -8px; margin-right: -8px; }
.topbar{ padding: 0 6px; }
.profile-head{ flex-direction: column; align-items: flex-start; }
.task-title-row h2{ font-size: 16px; }
.task-props > div{ grid-template-columns: 1fr; gap: 2px; }
.task-props dt{ margin-top: 6px; }
}
/* Landscape phones — slimmer hero + drawer */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){
.sidebar{ width: 240px; }
.view-hero{ margin-bottom: 12px; }
.view-hero h1{ font-size: 20px; }
}
/* ╔══════════════════════════════════════════════════════╗
║ TEAMS / PROJECT PREVIEW / JOIN REQUESTS ║
╚══════════════════════════════════════════════════════╝ */
.sidebar-subhead{
display: flex; align-items: center; gap: 8px;
padding: 10px 12px 4px;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
color: var(--ink-500); text-transform: uppercase;
}
.sidebar-item-locked{ opacity: .9; cursor: pointer; }
.sidebar-item-locked .lock-pill{
margin-left: auto;
width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-500);
}
.sidebar-item-locked .lock-pill svg{ width: 13px; height: 13px; }
.sidebar-item-locked:hover{ background: var(--ink-100); }
.sidebar-item-locked:hover .lock-pill{ color: var(--ms-orange); }
/* Project preview page */
.project-preview{ max-width: 760px; margin: 0 auto; }
.pp-hero{
display: flex; gap: 18px; align-items: center;
padding: 28px 28px;
border-radius: var(--radius-xl);
margin-bottom: 24px;
border: 1px solid var(--ink-200);
}
.pp-icon{
width: 60px; height: 60px; border-radius: 16px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.pp-icon svg{ width: 28px; height: 28px; }
.pp-breadcrumb{
font-size: 12px; font-weight: 600; color: var(--ink-600);
text-transform: uppercase; letter-spacing: .05em;
margin-bottom: 4px;
}
.pp-name{ margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.pp-desc{ margin: 0; color: var(--ink-600); font-size: 14px; line-height: 1.5; }
.pp-body h3{ font-size: 14px; font-weight: 700; color: var(--ink-700); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; }
.pp-members{ display: flex; flex-wrap: wrap; gap: 10px; }
.pp-member{
display: flex; align-items: center; gap: 8px;
padding: 6px 12px 6px 6px;
background: var(--ink-50);
border-radius: 999px;
font-size: 13px; color: var(--ink-800);
}
.pp-actions{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Inbox inline actions (approve/deny) */
.inbox-actions{ display: flex; gap: 8px; margin-top: 8px; }
/* Admin Teams panel */
.team-list{ display: flex; flex-direction: column; gap: 10px; }
.team-card{
background: var(--white);
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
padding: 14px 16px;
transition: border-color .15s, box-shadow .15s;
}
.team-card:hover{ border-color: var(--ms-orange-200); box-shadow: var(--shadow-sm); }
.team-card-head{ display: flex; align-items: center; gap: 12px; }
.team-card-head > .swatch{ width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; }
.team-card-name{ font-size: 15px; font-weight: 600; color: var(--ink-900); }
.team-card-meta{ font-size: 12px; color: var(--ink-500); margin-top: 2px; }
@media (max-width: 640px){
.team-card-head{ flex-wrap: wrap; }
.team-card-head > div:last-child{ width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.pp-hero{ flex-direction: column; align-items: flex-start; text-align: left; padding: 20px; }
}
/* Scrollbars */
.main::-webkit-scrollbar, .sidebar::-webkit-scrollbar{ width:10px; height:10px; }
.main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb{
background: var(--ink-200); border-radius:10px; border:2px solid var(--white);
}
.main::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover{
background: var(--ink-300);
}
/* ─── Reports (live KPI dashboard) ─────────────────────────────────────────── */
.rp-grid{ display:grid; gap:16px; margin-bottom:16px; }
.rp-kpi-row{ grid-template-columns: repeat(5, 1fr); }
.rp-charts-row{ grid-template-columns: 1.6fr 1fr; }
.rp-split-3-2{ grid-template-columns: 3fr 2fr; }
@media (max-width: 1100px){
.rp-kpi-row{ grid-template-columns: repeat(2, 1fr); }
.rp-charts-row, .rp-split-3-2{ grid-template-columns: 1fr; }
}
.rp-card{
background:#fff; border:1px solid var(--ink-100, #F3F4F6); border-radius:12px;
padding:16px 18px; box-shadow:0 1px 4px rgba(0,0,0,0.05);
display:flex; flex-direction:column; gap:6px;
}
.rp-card-top{ display:flex; justify-content:space-between; align-items:center; }
.rp-icon{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.rp-icon svg{ width:18px; height:18px; }
.rp-card-val{ font-size:24px; font-weight:700; color:#1A1D23; line-height:1.1; letter-spacing:-0.5px; }
.rp-card-lbl{ font-size:12px; color:#4B5563; font-weight:500; }
.rp-card-sub{ font-size:11px; color:#9CA3AF; }
.rp-panel{
background:#fff; border:1px solid var(--ink-100, #F3F4F6); border-radius:12px;
padding:18px; box-shadow:0 1px 4px rgba(0,0,0,0.05); margin-bottom:16px;
}
.rp-panel-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; gap:12px; }
.rp-panel-title{ font-size:14px; font-weight:700; color:#1A1D23; }
.rp-panel-sub{ font-size:11px; color:#6B7280; margin-top:2px; }
.rp-btn-ghost{ background:none; border:none; color:#F1582B; font-weight:600; font-size:12px; cursor:pointer; padding:4px 10px; border-radius:6px; }
.rp-btn-ghost:hover{ background:rgba(241,88,43,0.1); }
.rp-chart-wrap{ position:relative; height:240px; }
.rp-empty{ text-align:center; padding:28px 12px; color:#9CA3AF; font-size:13px; }
.rp-activity-row{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid #F9FAFB; }
.rp-activity-row:last-child{ border-bottom:none; }
.rp-activity-dot{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.rp-activity-title{ font-size:13px; color:#374151; line-height:1.4; }
.rp-activity-meta{ font-size:11px; color:#9CA3AF; margin-top:2px; }
.rp-leader{ display:flex; flex-direction:column; gap:6px; }
.rp-leader-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #F9FAFB; }
.rp-leader-row:last-child{ border-bottom:none; }
.rp-leader-rank{ width:18px; text-align:center; font-weight:700; color:#9CA3AF; font-size:12px; }
.rp-avatar{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:11px; flex-shrink:0; }
.rp-leader-info{ flex:1; min-width:0; }
.rp-leader-name{ font-size:13px; font-weight:600; color:#1A1D23; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-leader-meta{ font-size:11px; color:#6B7280; }
.rp-leader-track{ margin-top:4px; height:4px; background:#F3F4F6; border-radius:99px; overflow:hidden; }
.rp-leader-fill{ height:100%; border-radius:99px; transition:width 0.6s; }
.rp-leader-pct{ font-weight:700; font-size:13px; color:#1A1D23; }
.rp-bars{ display:flex; flex-direction:column; gap:10px; }
.rp-bar-row{ display:grid; grid-template-columns: minmax(200px, 260px) 1fr 48px; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid #F9FAFB; }
.rp-bar-label{ display:flex; gap:10px; align-items:center; min-width:0; }
.rp-bar-name{ font-size:13px; font-weight:600; color:#1A1D23; }
.rp-bar-meta{ font-size:11px; color:#6B7280; }
.rp-bar-track{ display:flex; height:12px; background:#F3F4F6; border-radius:99px; overflow:hidden; }
.rp-bar-done, .rp-bar-open{ height:100%; transition: width 0.6s; }
.rp-bar-pct{ text-align:right; font-weight:700; font-size:13px; color:#1A1D23; }
.rp-table{ display:flex; flex-direction:column; border-radius:10px; overflow:hidden; border:1px solid #F3F4F6; }
.rp-tr{ display:grid; grid-template-columns: minmax(220px, 2.4fr) 1.2fr 0.6fr 0.6fr 0.6fr 0.8fr; gap:12px; padding:11px 14px; align-items:center; }
.rp-th{ background:#FAFAFA; font-size:11px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:0.3px; }
.rp-trow{ text-decoration:none; color:#1A1D23; border-top:1px solid #F3F4F6; transition:background 0.15s; font-size:13px; }
.rp-trow:hover{ background:#FAFAFA; }
.rp-cell-name{ display:flex; align-items:center; gap:10px; font-weight:600; }
.rp-proj-dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.rp-cell-progress{ display:flex; align-items:center; gap:8px; }
.rp-pbar{ flex:1; height:8px; background:#F3F4F6; border-radius:99px; overflow:hidden; }
.rp-pbar-fill{ height:100%; transition:width 0.6s; }
.rp-pct{ font-size:12px; color:#6B7280; font-weight:600; min-width:36px; text-align:right; }
.rp-chip{ font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px; white-space:nowrap; }