/* home.css — Veeva CRM Home (Mock) */

:root{
  --bg:#edf1f6;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#111827;
  --line:#d7dde6;
  --shadow: 0 2px 10px rgba(17,24,39,.08);

  --orange:#e67e22;

  --danger:#d11b1b;
  --warn:#d97706;
  --good:#0f7a2a;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Top bar */
.topbar{
  height:46px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 0 14px;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.topbar__title{
  font-weight:600;
  letter-spacing:.2px;
}

.clock{
  font-size:12px;
  color:var(--muted);
}

.topbar__right{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  position:relative;
}

.iconbtn{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  padding:6px 8px;
  border-radius:10px;
}
.iconbtn:hover{ background:#f3f4f6; }

/* Popover */
.popover{
  position:absolute;
  right:0;
  top:44px;
  width:220px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
  display:none;
  z-index:10;
}
.popover.is-open{ display:block; }
.popover__hdr{
  padding:10px 12px;
  font-weight:600;
  border-bottom:1px solid var(--line);
  background:#fafafa;
}
.popover__item{
  display:block;
  padding:10px 12px;
  color:var(--text);
  text-decoration:none;
}
.popover__item:hover{ background:#f3f4f6; }

/* Orange nav tabs */
.navtabs{
  background:var(--orange);
  height:46px;
  display:flex;
  gap:18px;
  align-items:center;
  padding: 0 14px;
  overflow:auto;
}

.tab{
  border:0;
  background:transparent;
  color:#fff;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  padding:10px 8px;
  border-radius:12px;
  opacity:.92;
}
.tab:hover{ background: rgba(255,255,255,.14); opacity:1; }
.tab.is-active{ background: rgba(255,255,255,.18); }

/* Content */
.content{
  flex:1;
  padding: 14px;
  padding-bottom: 84px; /* space for bottom nav */
}

.asof{
  font-size:12px;
  color:#374151;
  margin-bottom:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.asof .dot{ color:#9ca3af; }

/* Layout grid */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap:14px;
  align-items:start;
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card__hdr{
  padding:12px 12px 10px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.card__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}

.title-icon{
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:8px;
  background:#f3f4f6;
  font-size:14px;
}

.card__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.pill{
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:#374151;
}
.pill__num{
  color:var(--danger);
  font-weight:800;
}
.pill--danger{
  border-color: #f5c4c4;
  background:#fff5f5;
  color:var(--danger);
  font-weight:700;
}
.pill--warn{
  border-color: #fde0b3;
  background:#fffbeb;
  color:var(--warn);
  font-weight:700;
}
.pill--muted{
  background:#f3f4f6;
  color:#374151;
  border-color:#e5e7eb;
}

/* Lists */
.list{
  list-style:none;
  margin:0;
  padding:0;
}

.list__item{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 12px;
  border-top:1px solid var(--line);
  cursor:pointer;
}
.list__item:hover{ background:#f8fafc; }

.list__item.is-selected{
  background:#f0f6ff;
  outline: 1px solid #bcd5ff;
  outline-offset:-1px;
}

.avatar{
  width:28px; height:28px;
  border-radius:999px;
  background:#f3f4f6;
  display:grid; place-items:center;
  font-size:14px;
  flex:0 0 auto;
}

.list__body{ flex:1; min-width:0; }

.list__title{
  font-size:13px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.list__sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.muted{ color:var(--muted); font-weight:500; }

.chev{
  color:#9ca3af;
  font-size:22px;
  line-height:1;
  margin-left:4px;
}

.timecol{
  width:92px;
  flex:0 0 auto;
}
.timecol__date{
  font-size:12px;
  color:#374151;
  font-weight:600;
}
.timecol__time{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* KPI blocks */
.card--wide{
  grid-column: 1 / span 2;
  min-height: 0;
  display:flex;
  flex-direction:column;
}

.kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
}

.kpi{
  padding: 14px 14px 10px 14px;
  border-right:1px solid var(--line);
}
.kpi:last-child{ border-right:0; }

.kpi__hdr{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.kpi__icon{
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:8px;
  background:#f3f4f6;
  font-size:14px;
  flex:0 0 auto;
}

.kpi__title{
  font-size:12px;
  font-weight:700;
}
.kpi__sub{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

.kpi__value{
  text-align:center;
  font-size:26px;
  font-weight:800;
  padding: 8px 0 4px;
}

.kpi__value--neg{ color:var(--danger); }
.kpi__value--pos{ color:var(--good); }

.divider{
  height:1px;
  background:var(--line);
}

/* Mini KPI row */
.kpis--mini{
  grid-template-columns: 1.2fr repeat(6, 1fr);
  align-items:stretch;
  border-top:0;
}

.mini{
  padding: 12px 14px;
  border-right:1px solid var(--line);
  display:flex;
  align-items:center;
}
.mini:last-child{ border-right:0; }

.mini__hdr{
  display:flex;
  align-items:center;
  gap:10px;
}

.mini__icon{
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:8px;
  background:#f3f4f6;
  font-size:14px;
}

.mini__title{
  font-size:12px;
  font-weight:700;
}

.kpi-mini{
  flex-direction:column;
  justify-content:center;
  gap:4px;
}

.mini__value{
  font-size:22px;
  font-weight:800;
  text-align:center;
}
.mini__label{
  font-size:11px;
  color:var(--muted);
  text-align:center;
  line-height:1.2;
}

/* Right side card */
.card--side{
  grid-column: 3 / span 1;
  min-height: 250px;
}

.empty{
  border-top:1px solid var(--line);
  height: calc(100% - 48px);
  display:grid;
  place-items:center;
  padding: 18px;
}
.empty__msg{
  font-size:12px;
  color:var(--muted);
}

/* Bottom navigation */
.bottomnav{
  position:fixed;
  left:0; right:0; bottom:0;
  height:64px;
  background:#fff;
  border-top:1px solid var(--line);
  display:flex;
  gap:2px;
  padding:6px 6px 8px;
  z-index:20;
}

.btab{
  flex:1;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  position:relative;
}
.btab:hover{ background:#f3f4f6; }

.btab.is-active2{
  background:#f0f6ff;
  outline: 1px solid #bcd5ff;
  outline-offset:-1px;
}

.bicon{ font-size:18px; }
.blabel{ font-size:10px; color:#374151; font-weight:600; }

.badge{
  position:absolute;
  top:4px;
  right:18px;
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-weight:800;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:78px;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  font-size:12px;
  padding:10px 12px;
  border-radius:999px;
  box-shadow: var(--shadow);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index:30;
}
.toast.is-show{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}

/* Responsive */
@media (max-width: 1024px){
  .grid{ grid-template-columns: 1fr; }
  .card--wide{ grid-column: 1; }
  .card--side{ grid-column: 1; }
  .kpis{ grid-template-columns: 1fr; }
  .kpi{ border-right:0; border-bottom:1px solid var(--line); }
  .kpi:last-child{ border-bottom:0; }
  .kpis--mini{ grid-template-columns: 1fr 1fr; }
  .mini{ border-right:0; border-bottom:1px solid var(--line); }
}

.nav{background:#D4711A;display:flex;gap:0;padding:0 16px;}
.nav a{padding:12px 22px;color:rgba(255,255,255,0.88);text-decoration:none;font-size:13px;font-weight:500;border-bottom:3px solid transparent;white-space:nowrap;}
.nav a:hover{color:white;background:rgba(255,255,255,0.08);}
.nav a.active{color:white;border-bottom:3px solid white;font-weight:700;background:rgba(255,255,255,0.08);}


/* Bottom Nav */
.bottom{position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid #e5e7eb;padding:6px 4px;display:flex;justify-content:space-around;z-index:90;}
.bn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:4px;}
.bn span{font-size:10px;color:#6b7280;}
.bn.active span{color:#FF6B35;font-weight:600;}

/* remove underline for links inside list titles */
.list__title a {
  text-decoration: none;
  color: inherit;
}

/* optional: keep hover affordance without underline */
.list__title a:hover {
  text-decoration: none;
  opacity: 0.9;
}


.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
  line-height: 1;
}

.tag--new {
  background: rgba(34, 197, 94, 0.12); /* green tint */
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.25);
}