/* Page Top Stat Cards
   A titled card holding a row of numbers. Sits at the top of a page, above the
   listing. Matches .ord-tabs-card below (same border/radius/gap) so the two read
   as one system.

     <div class="stats-card">
       <div class="stats-card-title"><i class="fe fe-share-2"></i> Overview</div>
       <div class="stat-cards">
         <div class="stat-card">
           <div class="stat-label">Total Referrals</div>
           <div class="stat-value" data-stat="total_referrals">13</div>
         </div>
       </div>
     </div>

   To load the numbers AFTER the page (keeps a slow COUNT off the page load), put
   the url on the card and leave each value as a skeleton — custom.js fills them:

     <div class="stats-card" data-stats-url="<?=cn('admin/affiliate/ajax_stats')?>">
       ...
       <div class="stat-value" data-stat="total_referrals"><span class="stat-skel"></span></div>

   The endpoint answers  {"total_referrals": {"value": "13"}, ...}  — same shape
   the reports pages use. */

.stats-card{
    margin-bottom:15px;
    background:#fff;
    border:1px solid rgb(204, 204, 204);
    border-radius:12px;
    padding:12px;
}

.stats-card-title{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
    font-size:13px;
    font-weight:700;
    color:#333;
}

.stat-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:8px;
}

.stat-card{
    background:#f8f9fc;
    border:1px solid #eef1f6;
    border-radius:10px;
    padding:10px 12px;
    text-align:center;
    min-width:0;
}

.stat-label{
    margin-bottom:4px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#98a0b3;
}

.stat-value{
    font-size:17px;
    font-weight:700;
    color:#2b3245;
    word-break:break-word;
}

/* shown while an ajax-loaded value is on its way (see .stats-card note above) */
.stat-skel{
    display:inline-block;
    width:70px;
    height:20px;
    border-radius:6px;
    background:linear-gradient(90deg, #eef0f5 25%, #e2e6ef 37%, #eef0f5 63%);
    background-size:400% 100%;
    animation:stat-shimmer 1.3s ease infinite;
}
@keyframes stat-shimmer{
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (max-width:768px){
    .stat-cards{ grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }
    .stat-value{ font-size:15px; }
}


/* Page Top Status Card */

.ord-tabs-card{
    margin-bottom:15px;
    background:#fff;
    border:1px solid rgb(204, 204, 204);
    border-radius:12px;
    padding:12px;
}

.ord-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ord-tab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:38px;
    padding:0 13px;
    border-radius:10px;
    border:1px solid #eceef3;
    background:#f5f6fa;
    color:#3c4250 !important;
    font-size:13px;
    font-weight:600;
    text-decoration:none !important;
    white-space:nowrap;
    flex:0 0 auto;
}

.ord-tab:hover{
    background:#eceef3;
    border-color:#dfe2ea;
    color:#3c4250 !important;
}

.ord-tab .ord-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    flex:0 0 auto;
}
.d-all{background:#6366f1}
.d-pending{background:#d97706}
.d-processing{background:#378add}
.d-inprogress{background:#4f46e5}
.d-completed{background:#059669}
.d-partial{background:#7c3aed}
.d-canceled{background:#9aa3b2}
.d-error{background:#ef4444}

.ord-tab .ord-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:30px;
    background:#eef2ff;
    color:#4f46e5;
    font-size:11px;
    font-weight:700;
}

.ord-tab .ord-count.is-error{
    background:#fef2f2;
    color:#dc2626;
}

/* Active tab */
.ord-tab.is-active{
    background:#4f46e5;
    border-color:#4f46e5;
    color:#fff !important;
}
.ord-tab.is-active:hover{
    background:#4338ca;
    border-color:#4338ca;
}
.ord-tab.is-active .ord-dot{
    background:#fff !important;
}
.ord-tab.is-active .ord-count{
    background:rgba(255,255,255,.22);
    color:#fff;
}

@media(max-width:767px){
    .ord-tabs-card{
        padding:10px;
    }
    .ord-tabs{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
    }
    .ord-tab{
        width:100%;
        height:34px;
        font-size:12px;
        padding:0 10px;
        gap:6px;
    }
    .ord-tab .ord-count{
        margin-left:auto;
        min-width:18px;
        height:18px;
        font-size:10px;
    }
}





.api-status-muted{
  display:inline-block; 
  padding: 1px 10px; 
  border: 1px solid #D6D6D6;
  border-radius: 5px;
  font-size:10px; 
  font-weight:600;
  background:#f1f5f9; 
  color:#64748b;
  margin-top: 10px;
}

/* Page Top Filters Card */


.orders-v2-filter-wrap{
    margin-bottom:15px;
    background:#fff;
    border:1px solid rgb(204, 204, 204);
    border-radius:12px;
    padding:14px;
}

.orders-v2-order-row{
    display:grid;
    grid-template-columns:1fr;
    margin-bottom:12px;
}

.orders-v2-more-box{
    margin-bottom:12px;
}

.orders-v2-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
}

.orders-v2-actions{
    display:grid;
    grid-template-columns:auto auto auto;
    gap:10px;
    justify-content:end;
    padding-top: 10px;
    border-top:1px solid #e9ecf2;
}

.orders-v2-field label{
    display:block;
    margin-bottom:2px;
    font-size:12px;
    font-weight:700;
    color:#3c4250;
}

.orders-v2-field input,
.orders-v2-field select{
    width:100%;
    height:38px;
    border:1px solid rgb(204, 204, 204);
    border-radius:10px;
    padding:7px 10px;
    font-size:13px;
    outline:none;
    background:#fcfcfe;
    color:#1a1d29;
    font-weight:600;
}

.orders-v2-field input:focus,
.orders-v2-field select:focus{
    border-color:#4f46e5;
    box-shadow:0 0 0 3px rgba(79,70,229,.12);
}

.orders-v2-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    height:38px;
    padding:8px 13px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    border:0;
    text-decoration:none !important;
    cursor:pointer;
    white-space:nowrap;
}

.orders-v2-btn-more,
.orders-v2-btn-reset{
    background:#f1f3f7;
    color:#4a5160 !important;
    border: 1px solid #4f46e5;
}

.orders-v2-btn-more:hover,
.orders-v2-btn-reset:hover{
    background:#e8ebf1;
}

.orders-v2-btn-reset:focus{
    border: 3px solid #000;
    outline:none;
}

.orders-v2-btn-search{
    background:#4f46e5;
    color:#fff !important;
    box-shadow:0 6px 16px rgba(79,70,229,.30);
}

.orders-v2-btn-search:hover{
    background:#4338ca;
}

@media(min-width:768px){
    .orders-v2-more-box{
        display:none;
    }

    .orders-v2-more-box.active{
        display:block;
    }
}

@media(max-width:991px){
    .orders-v2-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media(max-width:767px){
    .orders-v2-filter-wrap{
        padding:10px;
    }

    .orders-v2-btn-reset:focus{
        border: 2px solid #000;
        outline:none;
    }

    .orders-v2-order-row{
        margin-bottom:10px;
    }

    .orders-v2-more-box{
        display:none;
        margin-bottom:10px;
    }

    .orders-v2-more-box.active{
        display:block;
    }

    .orders-v2-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:9px;
    }

    .orders-v2-actions{
        grid-template-columns:repeat(3, 1fr);
        gap:7px;
        justify-content:normal;
    }

    .orders-v2-field label{
        font-size:11px;
    }

    .orders-v2-field input,
    .orders-v2-field select{
        height:36px;
        font-size:12px;
        padding:6px 8px;
    }

    .orders-v2-btn{
        width:100%;
        height:36px;
        font-size:11px;
        padding:7px 6px;
    }

    .orders-v2-btn i{
        font-size:11px;
    }
}

.orders-v2-field.has-error input {
    border-color: #e74c3c !important;
    background: #fff6f6;
}
.orders-v2-field-error {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
    display: block;
    line-height: 1.3;
}


@media(max-width:767px){

    .dropdown-menu-right {
      margin-top: 10px;
      margin-left: 6px;
    }

}



/* Page Top action button */

.orders-v2-toolbar{
    margin-bottom:15px;
}

.orders-v2-toolbar-inner{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.orders-v2-tool-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid #e9ecf2;
    background:#fff;
    color:#3c4250 !important;
    font-size:13px;
    font-weight:600;
    text-decoration:none !important;
    cursor:pointer;
}

.orders-v2-tool-btn:hover{
    background:#f7f8fc;
    border-color:#d7dbe6;
}

/* Resend Button */

.orders-v2-resend-btn{
    background:#eef2ff;
    border-color:#c7d2fe;
    color:#4f46e5 !important;
}

.orders-v2-resend-btn:hover{
    background:#e4e9ff;
    border-color:#a5b4fc;
}

.orders-v2-resend-btn i{
    color:#4f46e5;
}

/* Action Button */

.orders-v2-action-btn{
    background:#4f46e5;
    border-color:#4f46e5;
    color:#fff !important;
    
    border-color:#a5b4fc;
}

.orders-v2-action-btn:hover{
    background:#4338ca;
    border-color:#4338ca;
    color:#fff !important;
}

.orders-v2-action-btn i{
    color:#fff;
}

/* Badge */

.orders-v2-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 7px;
    border-radius:30px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:700;
}

/* Dropdown */

.orders-v2-action-wrap{
    position:relative;
}

.orders-v2-action-menu{
    min-width:220px;
    border:1px solid #eef0f4;
    border-radius:12px;
    padding:6px;
    box-shadow:0 12px 28px rgba(20,24,40,.10);
}

.orders-v2-action-menu .dropdown-item{
    border-radius:8px;
    padding:9px 12px;
    font-size:13px;
    color:#3c4250;
}

.orders-v2-action-menu .dropdown-item:hover{
    background:#eef2ff;
    color:#4f46e5;
}

.orders-v2-tool-btn.disabled{
    opacity:.5;
    pointer-events:none;
    cursor:not-allowed;
}

/* Mobile */

@media(max-width:767px){

    .orders-v2-toolbar-inner{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .orders-v2-tool-btn{
        width:100%;
        min-height:36px;
        font-size:12px;
        padding:0 10px;
    }

    .orders-v2-action-wrap{
        width:100%;
    }

    .orders-v2-action-wrap .orders-v2-tool-btn{
        width:100%;
    }

    .orders-v2-action-menu{
        min-width:100%;
    }
}


/* ============================================================
   ACTION TOOLBAR + BUTTONS (Theme: Indigo)
   ============================================================ */

.indigo-action-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.indigo-right-group{
    display:flex;
    align-items:center;
    gap:10px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.indigo-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:140px;
    height:30px;
    padding:0 12px;
    border:0;
    border-radius:8px;
    background:#4f46e5;
    color:#fff;
    font:600 13px inherit;
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:0 4px 12px rgba(79,70,229,.28);
    outline:none;
    transition:background .2s ease;
}

.indigo-btn:hover{
    background:#4338ca;
}

.indigo-btn:focus,
.indigo-btn:focus-visible,
.indigo-btn:active{
    outline:none !important;
    box-shadow:0 4px 12px rgba(79,70,229,.28);
}

.indigo-btn svg{
    width:15px;
    height:15px;
    flex:0 0 auto;
}

.indigo-btn::-moz-focus-inner{
    border:0;
}

/* ============================================================
   ACTION DROPDOWN
   ============================================================ */

.indigo-action{
    position:relative;
    display:inline-flex;
}

.indigo-caret{
    width:13px;
    height:13px;
    transition:transform .18s ease;
}

.indigo-action.open .indigo-caret{
    transform:rotate(180deg);
}

.indigo-action-menu{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    min-width:224px;
    padding:6px;
    background:#fff;
    border:1px solid #ccc;
    border-radius:12px;
    box-shadow:0 14px 32px rgba(20,24,40,.14);
    z-index:60;
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
}

.indigo-action.open .indigo-action-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.indigo-action-item{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:9px 12px;
    border:0;
    border-radius:8px;
    background:none;
    color:#3c4250;
    font:600 13px inherit;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
}

.indigo-action-item i{
    width:15px;
    height:15px;
    flex:0 0 auto;
    color:#9aa3b2;
}

.indigo-action-item:hover{
    background:#eef2ff;
    color:#4f46e5;
}

.indigo-action-item:hover i{
    color:#4f46e5;
}

.indigo-action-divider{
    height:1px;
    margin:6px 4px;
    background:#eef0f4;
}

.indigo-action-item.is-danger{
    color:#dc2626;
}

.indigo-action-item.is-danger i{
    color:#dc2626;
}

.indigo-action-item.is-danger:hover{
    background:#fef2f2;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:480px){

    .indigo-btn{
        width:118px;
        height:34px;
        font-size:12px;
        gap:6px;
    }

}



/* ACTION BUTTON ITEMS  */

.idgrow{ position:relative; display:inline-flex; }

.idgrow-menu{
  position:absolute; top:calc(100% + 2px); right:0; left:auto;
  min-width:166px; background:#fff; border:1px solid #eef0f4;
  border-radius:10px; padding:5px; box-shadow:0 12px 28px rgba(20,24,40,.14);
  z-index:999; opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.idgrow.open .idgrow-menu{ opacity:1; visibility:visible; transform:translateY(0); }
/* PORTAL: iPhone par .table-responsive ke overflow-y:hidden + -webkit-overflow-scrolling:touch
   position:fixed menu ko bhi trap/clip kar dete (card ke neeche kat jata). Is liye khulte waqt
   menu ko document.body mein le jaate — tab wo .idgrow ka descendant nahi rehta, is liye upar wala
   `.idgrow.open .idgrow-menu` rule nahi lagta. Body mein menu ko is-open se dikhao. */
.idgrow-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.idgrow-item{
  display:flex; align-items:center; gap:10px; padding:8px 11px;
  border-radius:7px; font-size:12.5px; font-weight:600; color:#3c4250;
  text-decoration:none; white-space:nowrap; cursor:pointer;
}

/* upar khulne ke liye */
.idgrow-menu.drop-up{
  top: auto;
  bottom: calc(100% + 2px);
  transform: translateY(4px);
}
.idgrow.open .idgrow-menu.drop-up{ transform: translateY(0); }

.idgrow-item i{ width:15px; text-align:center; font-size:13px; color:#9aa3b2; flex:0 0 auto; }
.idgrow-item:hover{ background:#eef2ff; color:#4f46e5; }
.idgrow-item:hover i{ color:#4f46e5; }
.idgrow-divider{ height:1px; background:#eef0f4; margin:5px 4px; }
.idgrow-item.is-danger{ color:#dc2626; }
.idgrow-item.is-danger i{ color:#dc2626; }
.idgrow-item.is-danger:hover{ background:#fef2f2; color:#dc2626; }
.idgrow-item.is-danger:hover i{ color:#dc2626; }

.idgrow-btn{
  display:inline-flex; align-items:center; gap:5px;
  height:28px; padding:0 11px; border:1px solid #2e333c; border-radius:8px;   /* OUTLINE (tha solid indigo) + category button jitna size */
  background:transparent; color:#2e333c; font-size:12px; font-weight:700;      /* black-ish text/border (indigo nahi) + BOLD */
  font-family:inherit; cursor:pointer; white-space:nowrap; outline:none;
}
.idgrow-btn:hover{ background:rgba(46,51,60,.07); color:#2e333c; }               /* halka dark tint (tha solid indigo hover) */
/* click/focus pe browser ka default outline na aaye — core.css `button:focus{outline:5px auto}` (0,1,1) base ko
   beat karta tha, is liye !important. Keyboard (:focus-visible) pe halka dark ring rakha (accessibility). */
.idgrow-btn:focus{ outline:none !important; box-shadow:none; }
.idgrow-btn:focus-visible{ outline:none !important; box-shadow:0 0 0 2px rgba(46,51,60,.20); }
.idgrow-btn i{ font-size:11px; line-height:1; }
.idgrow-btn i.idgrow-caret{ transition:transform .18s ease; }
.idgrow.open .idgrow-btn i.idgrow-caret{ transform:rotate(180deg); }



.idgrow-item{
  display:flex; align-items:center; gap:10px; padding:8px 11px;
  border-radius:7px; font-size:12.5px; font-weight:600; color:#3c4250;
  text-decoration:none; white-space:nowrap; cursor:pointer;
}
.idgrow-item i{ width:15px; text-align:center; font-size:13px; color:#9aa3b2; flex:0 0 auto; }
.idgrow-item:hover{ background:#eef2ff; color:#4f46e5; }
.idgrow-item:hover i{ color:#4f46e5; }

.idgrow-divider{ height:1px; background:#eef0f4; margin:5px 4px; }

/* A hairline between stacked items, so a 2-3 item menu reads as separate rows
   instead of one block. Not on the first item, and not where the manual
   .idgrow-divider already draws its own line (users/orders put one before the
   danger actions) — two lines touching would look like a mistake. */
.idgrow-item + .idgrow-item{ border-top:1px solid #f0f2f6; }
.idgrow-divider + .idgrow-item{ border-top:0; }

.idgrow-item.is-danger{ color:#dc2626; }
.idgrow-item.is-danger i{ color:#dc2626; }
.idgrow-item.is-danger:hover{ background:#fef2f2; color:#dc2626; }
.idgrow-item.is-danger:hover i{ color:#dc2626; }

/* BUTTONS  */

.idgo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:30px;
  padding:0 14px;
  border:0;
  border-radius:8px;
  background:#4f46e5;
  color:#fff !important;
  font-size:12.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none !important;
}
.idgo-btn:hover{ background:#4338ca; color:#fff !important; }
.idgo-btn:active{ background:#3c34b8; }
/* click pe browser outline na aaye — Hide All <button> pe core.css `button:focus{outline:5px auto}` (0,1,1) aata tha.
   !important se beat. keyboard (:focus-visible) pe halka ring (accessibility). */
.idgo-btn:focus{ outline:none !important; box-shadow:none; }
.idgo-btn:focus-visible{ outline:none !important; box-shadow:0 0 0 3px rgba(79,70,229,.35); }
.idgo-btn i{ font-size:12px; line-height:1; }
.idgo-btn:disabled,
.idgo-btn.disabled{ opacity:.55; pointer-events:none; }

/* optional variants */
.idgo-btn.is-outline{
  background:#eef2ff;
  color:#4f46e5 !important;
  border:1px solid #c7d2fe;
}
.idgo-btn.is-outline:hover{ background:#e0e7ff; color:#4f46e5 !important; }

/* indigo-OUTLINE variant — transparent bg + indigo border/text, Action button jaisa size/shape.
   (Existing .is-outline se alag: wo light-indigo FILLED hai; ye true transparent outline.) Resend button ise use karta. */
.idgo-btn.is-outline-indigo{
  height:28px; padding:0 11px;
  border:1px solid #4f46e5; background:transparent;
  color:#4f46e5 !important; font-size:12px; font-weight:700;
}
.idgo-btn.is-outline-indigo:hover{ background:rgba(79,70,229,.07); color:#4f46e5 !important; }

.idgo-btn.is-danger{ background:#dc2626; }
.idgo-btn.is-danger:hover{ background:#b91c1c; }

.idgo-btn.is-block{ width:100%; }


/* transparent button bar — sirf buttons manage karta hai */
.idgo-btnbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  background:transparent;
  border:0;
  padding:0;
  margin:0 0 12px 0;
}

/* alignment variants (chahein to add karo) */
.idgo-btnbar.is-right{   justify-content:flex-end; }
.idgo-btnbar.is-center{  justify-content:center; }
.idgo-btnbar.is-between{ justify-content:space-between; }

/* mobile: buttons full-width stack (optional) */
@media(max-width:575px){
  .idgo-btnbar.is-stack > *{ flex:1 1 100%; }
}

.indigo-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:30px;
    padding:0 12px;
    border: 2px solid #4f46e5;
    border-radius: 8px;
    background:transparent;
    color:#4f46e5;
    font:600 13px inherit;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:none;
    outline:none;
    transition:all .2s ease;
}

.indigo-outline-btn:hover{
    background:#4f46e5;
    color:#fff;
}

.indigo-outline-btn:focus,
.indigo-outline-btn:focus-visible,
.indigo-outline-btn:active{
    outline:none !important;
    border-color:#4f46e5;
    box-shadow:0 0 0 3px rgba(79,70,229,.15);
}

.indigo-outline-btn svg{
    width:15px;
    height:15px;
    flex:0 0 auto;
}

.indigo-outline-btn::-moz-focus-inner{
    border:0;
}

@media (max-width:480px){

    .indigo-outline-btn{
        gap:6px;
        font-weight:700;
    }

}
/* ===== User Logs page ===== */
.user-log-action{
    font-size: 13px;
    padding: 6px 12px;
    font-weight: 600;
}
.user-log-details{
    min-width: 280px;
}