:root{
  --line:#e5e7eb;
  --muted:#6b7280;
  --bg:#ffffff;
  --shadow: 0 1px 0 rgba(16,24,40,.02), 0 10px 25px rgba(16,24,40,.06);
  --brand1:#b7e36b;
  --brand2:#77b336;
}

/* ===== Sticky wrapper ===== */
.sticky-topbar{
  position: sticky;
  top: 0;
  z-index: 1100;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 10px 25px rgba(16,24,40,.06);
}

/* bottom header NOT sticky */
.sub-header{
  position: static;
  z-index: auto;
  box-shadow: none;
}

:root{
  --topH: 54px;
  --subH: 46px;
}

.page-wrap{
  display:flex;
  min-height: calc(100vh - var(--topH) - var(--subH));
}

.sidebar2{
  width: 290px;
  position: sticky;
  top: calc(var(--topH) + var(--subH));
  height: calc(100vh - var(--topH) - var(--subH));
  overflow-y: auto;
  background:#fff;
  border-right:1px solid #e5e7eb;
}

.content-area{
  flex:1;
  padding:12px;
  min-width:0;
}

.sticky-topbar{
  position: sticky;
  top: 0;
  z-index: 1100;
  background:#fff;
}

/* sub header NOT sticky (normal) */
.sub-header{
  position: static; /* important */
  z-index: auto;
  box-shadow: none;
}

/* dropdown menu visible on top */
.dropdown-menu{
  z-index: 1200;
}


/* ===== Top header ===== */
.top-header{
  height: 54px;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 12px;
  background:#fff;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-badge{
  width:38px;height:38px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--brand1), var(--brand2));
  display:grid;place-items:center;
  box-shadow: 0 10px 22px rgba(123,187,63,.25);
}
.brand-badge span{
  width:14px;height:14px;border-radius:50%;
  background:#fff;
  display:block;
}
.brand-badge.small{ width:30px;height:30px; box-shadow:none; }
.brand-badge.small span{ width:11px;height:11px; }

.brand-meta{ line-height:1.05; }
.brand-name{
  font-weight:800;
  font-size:14px;
}
.brand-name .tm{
  font-size:11px;
  vertical-align: super;
}
.brand-tag{
  font-size:10px;
  letter-spacing:.08em;
  color: var(--muted);
}

/* Search bar same look */
.searchbar{
  max-width: 880px;
  margin: 0 auto;
  height: 34px;
  border:1px solid #dfe6f0;
  border-radius: 999px;
  display:flex;
  align-items:center;
  background:#fff;
  overflow:hidden;
}
.search-left{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 0 12px;
  color:#64748b;
  font-size:12px;
  white-space:nowrap;
}
.search-left .sep{
  font-weight:600;
  color:#111827;
}
.searchbar input{
  border:0;
  outline:0;
  flex:1;
  font-size:12px;
  padding: 0 10px;
}
.search-btn{
  border:0;
  height:34px;
  width:44px;
  background:#fff;
  border-left:1px solid #eef2f7;
  color:#60a5fa;
}

.top-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
.icon-btn{
  width:32px;height:32px;border-radius:50%;
  border:1px solid #e6e9f2;
  background:#fff;
  display:grid;place-items:center;
  color:#6b7280;
}
.admin-pill{
  border:1px solid #e6e9f2;
  background:#fff;
  border-radius:999px;
  padding:5px 12px;
  font-size:12px;
  font-weight:600;
  color:#374151;
}

/* ===== Second header ===== */
.sub-header{
  height: 46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 12px;
  background:#fff;
  border-bottom: 1px solid var(--line);
}

.sub-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.company-name{
  font-weight:700;
  color:#374151;
  font-size:13px;
}

.sub-nav{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:12px;
}
.sub-nav a{
  text-decoration:none;
  color:#6b7280;
  font-weight:600;
}
.sub-nav a.active,
.sub-nav a:hover{
  color:#111827;
}

/* Push page content below headers (so it doesn't hide under sticky) */
.page-offset{
  padding-top: 10px;
}

/* Responsive */
@media (max-width: 992px){
  .top-header{
    grid-template-columns: 220px 1fr 220px;
  }
  .sub-nav{
    gap:12px;
    overflow:auto;
    white-space:nowrap;
  }
}
@media (max-width: 768px){
  .top-header{
    grid-template-columns: 1fr;
    height:auto;
    padding: 10px 12px;
    gap:10px;
  }
  .top-center{ order:3; }
  .top-right{ order:2; }
  .sub-header{
    flex-direction:column;
    height:auto;
    align-items:flex-start;
    gap:8px;
    padding: 10px 12px;
  }
}


/* ===== Layout ===== */
.app{
  display:flex;
  min-height: calc(100vh - 54px);
}

/* ===== Sidebar ===== */
/* ===== Sidebar dropdown like screenshot ===== */
.sidebar2{
  width: 260px;
  background:#fff;
  border-right:1px solid #e5e7eb;
  padding: 12px 10px;
  min-height: calc(100vh - 54px);
}

.logo-mini{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  text-decoration:none;
}
.logo-dot{
  width:34px;height:34px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #b7e36b, #77b336);
  box-shadow: 0 10px 22px rgba(123,187,63,.25);
}

/* main item */
.nav-item{
  margin: 6px 0;
  border-radius: 14px;
  overflow: hidden;
}

.nav-btn{
  width:100%;
  border:0;
  background: transparent;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-radius: 14px;
  cursor:pointer;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-ic{
  width:28px;
  text-align:center;
  font-size:20px;
  color:#6b7280;
}

.nav-text{
  font-size:14px;
  font-weight:600;
  color:#374151;
}

.nav-arrow{
  font-size:12px;
  color:#94a3b8;
  transition: transform .18s ease;
}

/* open state */
.nav-item.open{
  background:#f6f7fb;
}
.nav-item.open .nav-arrow{
  transform: rotate(180deg);
}
.brand-text img{
  width: 200px;
}

/* sub menu */
.nav-sub{
  display:none;
  padding: 0 10px 10px 52px;
}

.nav-item.open .nav-sub{
  display:block;
}

.nav-sub a{
  display:block;
  padding: 7px 8px;
  margin: 3px 0;
  border-radius: 10px;
  text-decoration:none;
  font-size:13px;
  color:#6b7280;
}

.nav-sub a i{
  margin-right:8px;
  color:#9aa3af;
}

.nav-sub a:hover{
  background:#eef6ff;
  color:#2563eb;
}

/* active item look (optional) */
.nav-item.active .nav-btn{
  background:#eef6ff;
}
.nav-item.active .nav-text{
  color:#1d4ed8;
}
.nav-item.active .nav-ic{
  color:#1d4ed8;
}

/* responsive */
@media(max-width:768px){
  .sidebar2{ width: 240px; }
}


/* ===== Content ===== */
.content{
  flex:1;
  padding:10px;
}

/* Dashboard header row inside content */
.dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:6px 2px 10px;
}
.dash-head .title{
  font-weight:800;
  font-size:14px;
}
.dash-head .btn-group .btn{
  font-size:11px;
  border-radius:999px !important;
  padding:5px 10px;
}

/* Card blocks */
.cardbox{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cardbox .cardbox-head{
  padding:6px 10px;
  border-bottom:1px solid #eef2f7;
  font-size:11px;
  font-weight:700;
  color:#374151;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cardbox .cardbox-body{
  padding:10px;
}

/* Stage bars */
.stage-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:7px 0;
}
.stage-label{
  width:120px;
  font-size:11px;
  color:#374151;
}
.stage-bar{
  flex:1;
  height:14px;
  border-radius:999px;
  background:#eaf1ff;
  position:relative;
  overflow:hidden;
}
.stage-bar > span{
  position:absolute;left:0;top:0;bottom:0;
  width:60%;
  background:#cfe2ff;
}
.stage-count{
  width:22px;
  text-align:right;
  font-size:11px;
  color:#6b7280;
}

/* KPI cards (top row) */
.kpi{
  height:78px;
}
.kpi .kpi-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:#6b7280;
}
.kpi .kpi-value{
  font-weight:900;
  font-size:18px;
  margin-top:6px;
}
.kpi.blue{
  background: linear-gradient(0deg,#5a86e8,#5a86e8);
  color:#fff;
  border: none;
}
.kpi.blue .kpi-top{ color: rgba(255,255,255,.85); }
.kpi.blue .kpi-value{ color:#fff; }

/* tiny list */
.tiny-list{
  font-size:11px;
  color:#374151;
}
.tiny-list .row-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px dashed #eef2f7;
}
.tiny-list .row-item:last-child{ border-bottom:0; }
.tiny-list .neg{ color:#ef4444; font-weight:700; }
.tiny-list .pos{ color:#10b981; font-weight:700; }

/* chart placeholders */
.chart-line{
  height:120px;
  border-radius:10px;
  background: linear-gradient(180deg,#f5f9ff,#ffffff);
  border:1px solid #eef2f7;
  position:relative;
}
.chart-line:before{
  content:"";
  position:absolute;left:10px;right:10px;top:55px;height:2px;
  background:#cfe2ff;
}
.chart-line:after{
  content:"";
  position:absolute;left:10px;top:40px;width:6px;height:6px;border-radius:50%;
  background:#2563eb;
  box-shadow: 70px 20px 0 #2563eb, 140px 10px 0 #2563eb, 210px 30px 0 #2563eb, 280px 15px 0 #2563eb;
  opacity:.85;
}

.chart-pie{
  height:170px;
  display:grid;
  place-items:center;
}
.chart-pie .circle{
  width:120px;height:120px;border-radius:50%;
  background:#2ea8ff;
}

/* tables */
.table-mini{
  font-size:11px;
}
.table-mini thead th{
  background:#f7f9ff;
  color:#374151;
  font-weight:800;
  border-bottom:1px solid #eef2f7 !important;
}
.table-mini td, .table-mini th{
  padding:6px 8px !important;
}

/* ===== Pending Follow-ups modal look ===== */
.pf-modal{
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(16,24,40,.18);
}
.pf-header{
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid #eef2f7;
}
.pf-table thead th{
  font-size: 12px;
  font-weight: 800;
  color: #374151;
  background: #fafbff;
  border-bottom: 1px solid #eef2f7 !important;
  white-space: nowrap;
}
.pf-table td{
  font-size: 12px;
  color:#111827;
  border-top: 1px solid #f1f5f9;
}
.pf-table tbody tr:nth-child(even){
  background: #fbfdff;
}
.pf-highlight{
  background: #dbeafe !important;
}

/* Responsive */
@media (max-width: 992px){
  .search-wrap{ display:none; }
}
@media (max-width: 768px){
  .sidebar{ display:none; }
  .content{ padding:8px; }
}
/* When popup is open: keep layout visible but disabled */
.app-locked{
  filter: blur(1.2px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

/* Modal should remain sharp over blur */
.modal{
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Bigger spacing + bigger cards */
.content{
  padding: 14px; /* pehle 10px tha */
}

.cardbox{
  border-radius: 14px;
}

.cardbox .cardbox-head{
  padding: 10px 14px;         /* bigger */
  font-size: 12px;            /* bigger title */
}

.cardbox .cardbox-body{
  padding: 14px;              /* bigger inside spacing */
}

/* Make KPI cards bigger */
.kpi{
  height: 110px;              /* pehle 78px */
}
.kpi .kpi-value{
  font-size: 22px;            /* bigger */
}

/* Stage bars bigger */
.stage-label{
  width: 140px;
  font-size: 12px;
}
.stage-bar{
  height: 18px;               /* pehle 14px */
}

/* Charts placeholder bigger */
.chart-line{
  height: 180px;              /* pehle 120px */
}
.chart-pie{
  height: 240px;              /* bigger */
}
.chart-pie .circle{
  width: 160px; height: 160px;/* bigger pie circle */
}
/* Fit content inside cards: scroll if content too big */
.cardbox .cardbox-body{
  overflow: auto;
}

/* Tables fit & scroll nicely */
.table-responsive{
  overflow: auto;
}
.table-mini{
  font-size: 12px; /* bigger */
}
.table-mini td, .table-mini th{
  white-space: nowrap; /* columns break na ho */
}
/* Bigger modal width & padding */
.modal-lg{
  max-width: 920px;
}

.pf-header{
  padding: 12px 16px;
}

.pf-table thead th,
.pf-table td{
  font-size: 13px; /* bigger text */
}