*{box-sizing:border-box;margin:0;padding:0}
:root{
  --color-background-primary:#ffffff;
  --color-background-secondary:#f8f8f6;
  --color-background-tertiary:#f2f1ec;
  --color-border-primary:#c4c2bb;
  --color-border-secondary:#d4d2cb;
  --color-border-tertiary:#e4e2db;
  --color-text-primary:#1a1a18;
  --color-text-secondary:#6b6963;
  --border-radius-md:6px;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body{font-family:var(--font-sans);font-size:13px;background:var(--color-background-tertiary)}

/* ── Layout ── */
.app{display:flex;min-height:100vh}
.main{flex:1;background:var(--color-background-tertiary);display:flex;flex-direction:column;min-width:0}
.content{padding:16px;flex:1}

/* ── Sidebar ── */
.sidebar{width:200px;display:flex;flex-direction:column;flex-shrink:0}
.sb-dark{background:#1a1a1a}
.sb-light{background:#f0f0f0}

.sidebar-logo{padding:20px 16px 16px}
.sb-dark .sidebar-logo{border-bottom:0.5px solid #333}
.sb-light .sidebar-logo{border-bottom:0.5px solid #ddd}
.logo-text{font-size:18px;font-weight:500}
.logo-sub{font-size:11px;margin-top:2px}
.sb-dark .logo-text{color:#fff}
.sb-dark .logo-sub{color:#888}
.sb-light .logo-text{color:#1a1a1a}
.sb-light .logo-sub{color:#888}

.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}
.nav-section{padding:8px 16px 4px;font-size:10px;letter-spacing:0.8px;text-transform:uppercase}
.sb-dark .nav-section{color:#666}
.sb-light .nav-section{color:#999}

.nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;border-left:3px solid transparent;text-decoration:none}
.sb-dark .nav-item{color:#aaa}
.sb-light .nav-item{color:#555}
.sb-dark .nav-item:hover,.sb-dark .nav-item.active{color:#fff;background:#252525}
.sb-light .nav-item:hover,.sb-light .nav-item.active{color:#1a1a1a;background:#e2e2e2}
.nav-item.active{border-left-color:#c0392b}
.nav-item i{font-size:16px}
.nav-item span{font-size:13px}

.sidebar-bottom{padding:10px 16px 14px}
.sb-dark .sidebar-bottom{border-top:0.5px solid #333}
.sb-light .sidebar-bottom{border-top:0.5px solid #ddd}

.theme-row{display:flex;align-items:center;gap:6px;margin-bottom:10px;cursor:pointer;padding:4px 0}
.theme-row i{font-size:15px}
.theme-row span{font-size:12px}
.sb-dark .theme-row{color:#888}
.sb-light .theme-row{color:#777}
.sb-dark .theme-row:hover{color:#ccc}
.sb-light .theme-row:hover{color:#333}

.user-row{display:flex;align-items:center;gap:8px}
.user-avatar{width:28px;height:28px;border-radius:50%;background:#c0392b;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#fff;flex-shrink:0}
.user-name{font-size:12px}
.sb-dark .user-name{color:#ccc}
.sb-light .user-name{color:#444}

/* ── Topbar ── */
.topbar{background:var(--color-background-primary);border-bottom:0.5px solid var(--color-border-tertiary);padding:0 20px;height:48px;display:flex;align-items:center}
.topbar-title{font-size:15px;font-weight:500;color:var(--color-text-primary)}
.topbar-sub{font-size:15px;color:var(--color-text-secondary);margin-left:6px}
.topbar-spacer{flex:1}
.view-btn{background:none;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);padding:5px 12px;font-size:12px;color:var(--color-text-secondary);cursor:pointer;text-decoration:none}
.view-btn:hover{border-color:var(--color-border-primary);color:var(--color-text-primary)}

/* ── Metric cards ── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.metric-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:12px 14px}
.metric-card.accent{border-left:3px solid #c0392b}
.metric-label{font-size:11px;color:var(--color-text-secondary);margin-bottom:4px}
.metric-value{font-size:22px;font-weight:500;color:var(--color-text-primary)}
.metric-value.overdue{color:#E24B4A}
.metric-sub{font-size:11px;color:var(--color-text-secondary);margin-top:2px}

/* ── Cards ── */
.grid-main{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:14px}
.card-title{font-size:13px;font-weight:500;color:var(--color-text-primary);margin-bottom:10px;display:flex;align-items:center}
.card-title-text{flex:1}
.card-actions{display:flex;align-items:center;gap:10px}

/* Sort dropdown */
.sort-wrap{position:relative;display:inline-flex;align-items:center}
.sort-label{font-size:11px;color:#c0392b;cursor:pointer;white-space:nowrap}
.sort-label i{font-size:10px;margin-left:2px}
.sort-menu{display:none;position:absolute;right:0;top:18px;background:var(--color-background-primary);border:0.5px solid var(--color-border-secondary);border-radius:4px;z-index:100;min-width:150px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.sort-menu.open{display:block}
.sort-option{padding:6px 12px;font-size:11px;color:var(--color-text-primary);cursor:pointer;white-space:nowrap}
.sort-option:hover{background:var(--color-background-secondary)}
.sort-option.selected{color:#c0392b;font-weight:500}
.link-red{font-size:11px;color:#c0392b;cursor:pointer;white-space:nowrap;text-decoration:none}
.link-red:hover{text-decoration:underline}

/* ── Opportunity rows ── */
.opp-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:0.5px solid var(--color-border-tertiary)}
.opp-row:last-child{border-bottom:none}
.opp-main{flex:1;min-width:0}
.opp-name{font-size:12px;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp-sub{font-size:11px;color:var(--color-text-secondary)}
.prob{font-size:11px;color:var(--color-text-secondary);min-width:26px;text-align:right}

/* ── Badges ── */
.badge{padding:2px 7px;border-radius:10px;font-size:10px;font-weight:500;white-space:nowrap}
.badge-blue{background:#E6F1FB;color:#0C447C}
.badge-amber{background:#FAEEDA;color:#633806}
.badge-green{background:#EAF3DE;color:#27500A}
.badge-red{background:#FCEBEB;color:#791F1F}

/* ── Task rows ── */
.task-row{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:0.5px solid var(--color-border-tertiary)}
.task-row:last-child{border-bottom:none}
.task-check{width:13px;height:13px;border:0.5px solid var(--color-border-secondary);border-radius:3px;flex-shrink:0;margin-top:2px;cursor:pointer}
.task-text{font-size:12px;color:var(--color-text-primary);flex:1}
.task-meta{font-size:11px;color:var(--color-text-secondary)}
.task-meta.overdue{color:#E24B4A}

/* ── Drill-down ── */
.drill-header{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:0.5px solid var(--color-border-tertiary);cursor:pointer}
.drill-opp{flex:1;font-size:12px;font-weight:500;color:var(--color-text-primary)}
.drill-task{display:flex;align-items:center;gap:8px;padding:4px 0 4px 22px;border-bottom:0.5px solid var(--color-border-tertiary)}
.drill-task:last-child{border-bottom:none}
.drill-task-name{font-size:11px;color:var(--color-text-secondary);flex:1}

/* Deadline dots */
.dl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dl-red{background:#E24B4A}
.dl-amber{background:#EF9F27}
.dl-green{background:#639922}

/* ── Responsive ── */
@media(max-width:768px){
  .sidebar{display:none}
  .sidebar.open{display:flex;position:fixed;top:0;left:0;height:100%;z-index:200}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .grid-main{grid-template-columns:1fr}
  .topbar{padding:0 12px}
  .content{padding:10px}
}