/* =========================
   BASE
========================= */
body{
    font-family: "Inter", Arial, sans-serif;
    padding: 20px;
    background:#f6f9fc;
    color:#33475b;
}
html, body{
    overflow-x: hidden;
}

/* =========================
   EXPORT BUTTON
========================= */
.export-btn{
    display:inline-block;
    margin: 10px 0 16px;
    padding:10px 14px;
    background:#ff7a59;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    font-weight:600;
    font-size:14px;
}
.export-btn:hover{
    opacity:0.92;
}

/* =========================
   HUBSPOT TOP FILTER BAR
========================= */
.hs-toolbar{
    display:flex;
    align-items:center;
    gap:22px;
    margin:14px 0 10px;
    padding:10px 14px;
    background:#f5f8fa;
    border:1px solid #eaf0f6;
    border-radius:12px;
}

.hs-toolbar a{
    color:#0091ae;
    font-weight:700;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
}

.hs-toolbar .divider{
    width:1px;
    height:22px;
    background:#cbd6e2;
    opacity:0.9;
}

/* =========================
   DATE RANGE FILTER TRIGGER
========================= */
.hs-filter-trigger{
    cursor:pointer;
    user-select:none;
    position:relative;
    padding:6px 10px;
    border-radius:8px;
}
.hs-filter-trigger:hover{
    background:#eaf0f6;
}

/* =========================
   HUBSPOT POPUP (COMPACT WIDTH)
========================= */
.hs-popup{
    position:absolute;
    top:46px;
    left:-20px;
    width:400px;
    background:#fff;
    border:1px solid #cbd6e2;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.10);
    z-index:999;
    padding:20px 20px 16px;
    display:none;
}

/* Popup Notch */
.hs-popup:before{
    content:"";
    position:absolute;
    top:-11px;
    left:150px;
    width:0;
    height:0;
    border-left:11px solid transparent;
    border-right:11px solid transparent;
    border-bottom:11px solid #cbd6e2;
}
.hs-popup:after{
    content:"";
    position:absolute;
    top:-10px;
    left:150px;
    width:0;
    height:0;
    border-left:11px solid transparent;
    border-right:11px solid transparent;
    border-bottom:11px solid #fff;
}

/* Responsive Popup */
@media(max-width: 700px){
    .hs-popup{
        width: calc(100vw - 30px);
        left: -10px;
    }
}

/* =========================
   POPUP HEADER
========================= */
.hs-popup-head{
    display:flex;
    gap:12px;
    margin-bottom:14px;
}
.hs-popup-head .bolt{
    font-size:22px;
    margin-top:2px;
}
.hs-popup-head h3{
    margin:0;
    font-size:18px;
    color:#33475b;
    font-weight:800;
}
.hs-popup-head p{
    margin:4px 0 0;
    color:#7c98b6;
    font-weight:600;
    line-height:1.4;
    font-size:14px;
}

/* =========================
   CUSTOM OPERATOR DROPDOWN (HubSpot style)
========================= */
.hs-dd{
    position:relative;
    width:100%;
}

.hs-dd-btn{
    width:100%;
    height:46px;
    border:1px solid #cbd6e2;
    border-radius:6px;
    padding:12px 14px;
    font-size:15px;
    background:#f5f8fa;
    color:#33475b;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    box-sizing:border-box;
}

.hs-dd-btn:hover{
    background:#fff;
}

.hs-dd-btn.active{
    border-color:#0091ae;
    box-shadow:0 0 0 3px rgba(0,145,174,0.15);
    background:#fff;
}

.hs-dd-arrow{
    color:#7c98b6;
    font-size:14px;
}

/* Dropdown menu */
.hs-dd-menu{
    position:absolute;
    left:0;
    top:calc(100% + 8px);
    width:100%;
    background:#fff;
    border:1px solid #cbd6e2;
    border-radius:8px;
    box-shadow:0 12px 26px rgba(0,0,0,0.12);
    z-index:9999;
    overflow:hidden;
    max-height:240px;
    overflow-y:auto;
    display:none;
}
.hs-dd-menu.show{
    display:block;
}

/* Dropdown items */
.hs-dd-item{
    padding:14px 16px;
    font-size:15px;
    font-weight:700;
    color:#33475b;
    cursor:pointer;
}
.hs-dd-item:hover,
.hs-dd-item.selected{
    background:#e5f5f8;
}

/* Scrollbar */
.hs-dd-menu::-webkit-scrollbar{
    width:10px;
}
.hs-dd-menu::-webkit-scrollbar-thumb{
    background:#cbd6e2;
    border-radius:10px;
}
.hs-dd-menu::-webkit-scrollbar-track{
    background:#f5f8fa;
}

/* =========================
   DATE INPUTS (Single + Between)
========================= */
.hs-date-single{
    display:none;
    margin-top:12px;
}

.hs-date-row{
    margin-top:12px;
    display:none;
}

.hs-date{
    width:100%;
    height:46px;
    border:1px solid #cbd6e2;
    border-radius:6px;
    padding:12px 14px 12px 44px;
    font-size:15px;
    background:#f5f8fa;
    color:#33475b;
    outline:none;
    font-weight:700;
    box-sizing:border-box;
}

.hs-date:focus{
    border-color:#0091ae;
    box-shadow:0 0 0 3px rgba(0,145,174,0.15);
    background:#fff;
}

/* Icon inside date field */
.hs-date-icon{
    position:relative;
    width:100%;
}

.hs-date-icon:before{
    content:"";
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    opacity:0.75;
    background-repeat:no-repeat;
    background-size:16px 16px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%236B7B93' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E");
}

/* Between row style (no "to") */
.hs-between-row{
    display:flex;
    gap:14px;
    align-items:center;
    width:100%;
}
.hs-between-row .hs-date-icon{
    flex:1;
}
.hs-between{
  display:flex;
  gap:12px;
  align-items:center;
  width:100%;
}
.hs-between-to{
  font-weight:700;
  color:#7c98b6;
  font-size:14px;
}

/* preset search */
.hs-dd-search{
    padding:12px;
    border-bottom:1px solid #eaf0f6;
    background:#fff;
    position:sticky;
    top:0;
    z-index:5;
}
.hs-dd-search input{
    width:100%;
    padding:12px 40px 12px 14px;
    border:1px solid #cbd6e2;
    border-radius:6px;
    outline:none;
    font-size:15px;
    font-weight:600;
    background:#f5f8fa;
    box-sizing:border-box;
}
.hs-dd-search input:focus{
    border-color:#0091ae;
    box-shadow:0 0 0 3px rgba(0,145,174,0.15);
    background:#fff;
}
.hs-dd-search-icon{
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    opacity:0.7;
}

/* preset rows */
.hs-dd-item2{
    padding:14px 16px;
    cursor:pointer;
    border-bottom:1px solid #f5f8fa;
}
.hs-dd-item2:hover{
    background:#e5f5f8;
}
.hs-dd-item2 .t{
    font-size:16px;
    font-weight:700;
    color:#33475b;
}

/* =========================
   ACTION BUTTONS
========================= */
.hs-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:18px;
}

.hs-apply{
    padding:10px 18px;
    border-radius:6px;
    border:none;
    font-weight:800;
    font-size:14px;
    background:#eaf0f6;
    color:#a8b6c8;
    cursor:not-allowed;
}
.hs-apply.active{
    background:#ff7a59;
    color:#fff;
    cursor:pointer;
}

.hs-remove{
    display:flex;
    align-items:center;
    gap:8px;
    color:#0091ae;
    font-weight:800;
    text-decoration:none;
}
.hs-remove:hover{
    text-decoration:underline;
}

/* =========================
   FLATPICKR (HubSpot-like)
========================= */
.flatpickr-calendar{
    border-radius:12px !important;
    border:1px solid #cbd6e2 !important;
    box-shadow:0 12px 30px rgba(0,0,0,0.12) !important;
    font-family: "Inter", Arial, sans-serif !important;
}

.flatpickr-months{
    padding:10px 10px 0 !important;
}
.flatpickr-month{
    color:#33475b !important;
    font-weight:800 !important;
}
.flatpickr-current-month{
    font-size:15px !important;
    font-weight:800 !important;
}

.flatpickr-weekdays{
    background:#fff !important;
    padding:8px 0 !important;
}
.flatpickr-weekday{
    color:#7c98b6 !important;
    font-weight:700 !important;
}

.flatpickr-day{
    border-radius:8px !important;
    font-weight:700 !important;
    color:#33475b !important;
}
.flatpickr-day.today{
    border:1px solid #0091ae !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover{
    background:#0091ae !important;
    border-color:#0091ae !important;
    color:#fff !important;
}
.flatpickr-day:hover{
    background:#eaf0f6 !important;
}

/* =========================
   REPORT TABLE UI
========================= */
.report-card{
    background:#fff;
    border:1px solid #cbd6e2;
    border-radius:12px;
    padding:0;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
    margin-top:20px;
    overflow-x:auto;
    width: calc(100% - 40px);
    margin: 20px auto;
}

.report-card::-webkit-scrollbar{ height:10px; }
.report-card::-webkit-scrollbar-thumb{
    background:#cbd6e2;
    border-radius:10px;
}
.report-card::-webkit-scrollbar-track{ background:#f5f8fa; }

table{
    border-collapse:separate;
    width:max-content;
    min-width:100%;
    max-width:100%;
    background:#fff;
    border-spacing:0;
    outline:1px solid #cbd6e2;
    outline-offset:-1px;
}

th, td{
    border:1px solid #eaf0f6;
    padding:10px;
    vertical-align:top;
    font-size:13px;
}

th{
    background:#f5f8fa;
    color:#33475b;
    font-weight:600;
    text-align:center;
}

thead th{
    position:sticky;
    top:0;
    z-index:5;
}

tr:hover td{
    background:#f9fbfd;
}

/* sticky columns */
th:first-child,
td:first-child{
    position:sticky;
    left:0;
    z-index:3;
    background:#fff;
    font-weight:700;
    min-width:200px;
}

th:nth-child(2),
td:nth-child(2){
    position:sticky;
    left:200px;
    z-index:3;
    background:#fff;
    min-width:140px;
    text-align:center;
    font-weight:700;
}

thead tr:first-child th{
    background:#eef3f8;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:0.3px;
}

.hs-th-title{
    max-width:190px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:inline-block;
    vertical-align:middle;
    cursor:help;
}

.cell-center{
    text-align:center;
    vertical-align:middle;
    font-weight:700;
    color:#0091ae;
}

.deal-list{
    margin:0;
    padding-left:18px;
}
.deal-list li{
    margin:2px 0;
    color:#33475b;
    font-weight:500;
}

.empty-cell{
    text-align:center;
    color:#7c98b6;
    font-weight:700;
}

.stage-group{
    background:#eef3f8 !important;
}
.stage-start{
    border-left:2px solid #a8b6c8 !important;
}
/* ✅ Loading overlay (HubSpot-like) */
#hsLoadingOverlay{
  position:fixed;
  inset:0;
  background:rgba(245,248,250,0.75);
  backdrop-filter: blur(2px);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hs-loader-box{
  background:#fff;
  border:1px solid #cbd6e2;
  border-radius:14px;
  padding:18px 22px;
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
  display:flex;
  align-items:center;
  gap:12px;
}

.hs-loader-text{
  font-size:14px;
  font-weight:800;
  color:#33475b;
}

/* spinner */
.hs-spinner{
  width:18px;
  height:18px;
  border:3px solid #cbd6e2;
  border-top-color:#0091ae;
  border-radius:50%;
  animation: hsSpin 0.8s linear infinite;
}

@keyframes hsSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}