.simpinby-suggestions {
  position: relative;
}

.simpinby-suggestions-box {
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  width: 100%;
  max-height: 180px;
  overflow: auto;
  z-index: 9999;
  border-radius: 6px;
}

.simpinby-suggestion-item {
  padding: 8px 10px;
  cursor: pointer;
}

.simpinby-suggestion-item:hover {
  background: #f1f1f1;
}

/* invoice listing css */
  .simpinby-widgets-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:14px;
    margin:16px 0 18px;
  }

  .simpinby-widget-card{
    background:#fff;
    border:1px solid #eaecf0;
    border-radius:14px;
    padding:14px 14px;
    box-shadow:0 2px 10px rgba(16,24,40,.05);
    min-height:92px;
  }

  .simpinby-widget-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
  }

  .simpinby-widget-title{
    font-size:13px;
    color:#667085;
    font-weight:800;
    margin:0;
  }

  .simpinby-widget-value{
    font-size:24px;
    font-weight:900;
    color:#101828;
    margin:0;
    line-height:1.2;
  }

  .simpinby-widget-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    border:1px solid #eaecf0;
    background:#f9fafb;
    color:#344054;
    white-space:nowrap;
  }

  .simpinby-widget-badge-blue{
    background:#eff8ff;
    border-color:#b2ddff;
    color:#175cd3;
  }

  .simpinby-widget-badge-green{
    background:#ecfdf3;
    border-color:#abefc6;
    color:#027a48;
  }

  .simpinby-widget-badge-red{
    background:#fef3f2;
    border-color:#fecdca;
    color:#b42318;
  }

  .simpinby-widget-sub{
    margin-top:6px;
    font-size:12px;
    color:#667085;
  }

  .simpinby-widget-progress{
    height:8px;
    border-radius:999px;
    background:#f2f4f7;
    overflow:hidden;
    margin-top:10px;
  }

  .simpinby-widget-progress span{
    display:block;
    height:100%;
    width:0%;
    background:#12b76a;
    border-radius:999px;
  }

  .simpinby-col-4{ grid-column:span 4; }

  @media (max-width:1200px){
    .simpinby-col-4{ grid-column:span 6; }
  }

  @media (max-width:782px){
    .simpinby-col-4{ grid-column:span 12; }
  }

  /* ==============================
     Dashboard UI
     ============================== */
  .simpinby-dashboard-wrap {
    margin-top: 14px;
  }

  .simpinby-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  .simpinby-dashboard-title h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.2px;
  }

  .simpinby-dashboard-title p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 13px;
  }

  .simpinby-dashboard-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }

  .simpinby-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid #d0d5dd;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    color: #101828;
    transition: 0.15s ease;
  }

  .simpinby-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
  }

  .simpinby-btn-primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
  }

  .simpinby-grid-cards {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    margin-bottom: 18px;
  }

  .simpinby-card {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    padding: 14px 14px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
    min-height: 92px;
  }

  .simpinby-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }

  .simpinby-card-title {
    font-size: 13px;
    color: #667085;
    font-weight: 700;
    margin: 0;
  }

  .simpinby-card-value {
    font-size: 22px;
    font-weight: 900;
    color: #101828;
    margin: 0;
    line-height: 1.2;
  }

  .simpinby-card-sub {
    margin-top: 6px;
    font-size: 12px;
    color: #667085;
  }

  .simpinby-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid #eaecf0;
    background: #f9fafb;
    color: #344054;
    white-space: nowrap;
  }

  .simpinby-badge-green {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #027a48;
  }

  .simpinby-badge-red {
    background: #fef3f2;
    border-color: #fecdca;
    color: #b42318;
  }

  .simpinby-badge-blue {
    background: #eff8ff;
    border-color: #b2ddff;
    color: #175cd3;
  }

  .simpinby-progress {
    height: 8px;
    border-radius: 999px;
    background: #f2f4f7;
    overflow: hidden;
    margin-top: 10px;
  }

  .simpinby-progress > span {
    display: block;
    height: 100%;
    width: 0%;
    background: #12b76a;
    border-radius: 999px;
  }

  .simpinby-panels {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
  }

  .simpinby-panel {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
    overflow: hidden;
  }

  .simpinby-panel-head {
    padding: 14px 14px;
    border-bottom: 1px solid #eaecf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .simpinby-panel-head h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    color: #101828;
  }

  .simpinby-panel-body {
    padding: 12px 14px 14px;
  }

  .simpinby-table {
    width: 100%;
    border-collapse: collapse;
  }

  .simpinby-table th {
    text-align: left;
    font-size: 12px;
    color: #667085;
    padding: 10px 8px;
    border-bottom: 1px solid #eaecf0;
    font-weight: 800;
  }

  .simpinby-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f2f4f7;
    vertical-align: top;
    font-size: 13px;
    color: #101828;
  }

  .simpinby-table tr:last-child td {
    border-bottom: none;
  }

  .simpinby-muted {
    color: #667085;
    font-size: 12px;
  }

  .simpinby-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid transparent;
  }

  .simpinby-status-paid {
    background: #ecfdf3;
    color: #027a48;
    border-color: #abefc6;
  }

  .simpinby-status-unpaid {
    background: #fef3f2;
    color: #b42318;
    border-color: #fecdca;
  }

  #simpinby-full-loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.6);
    z-index: 999999;
    align-items: center;
    justify-content: center;
  }

  /* Loader Card */
  .simpinby-loader-box {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    animation: siFadeIn 0.3s ease;
  }

  /* Spinner Upgrade */
  .simpinby-loader-box .spinner {
    float: none;
    margin: 0 auto;
    width: 42px;
    height: 42px;
  }

  /* Text */
  #simpinby-loader-text {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    letter-spacing: 0.3px;
  }

  /* Animation */
  @keyframes siFadeIn {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .simpinby-loader-box {
    position: relative;
  }

  .simpinby-loader-box::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: linear-gradient(120deg, #4f46e5, #06b6d4);
    opacity: 0.08;
    filter: blur(10px);
    z-index: -1;
  }

  /* Card spans */
  .simpinby-col-3 { grid-column: span 3; }
  .simpinby-col-4 { grid-column: span 4; }
  .simpinby-col-6 { grid-column: span 6; }
  .simpinby-col-12 { grid-column: span 12; }

  @media (max-width: 1200px) {
    .simpinby-col-3 { grid-column: span 6; }
    .simpinby-col-4 { grid-column: span 6; }
  }

  @media (max-width: 782px) {
    .simpinby-col-3,
    .simpinby-col-4,
    .simpinby-col-6 {
      grid-column: span 12;
    }
  }