@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════
   BULLHOST PANEL v20 — APPROX STYLE
   Dark Sidebar + White Topbar + Light Content
   ═══════════════════════════════════════════════════════════ */
:root {
  --sb-w:      240px;
  --sb-bg:     #1a1f2e;
  --sb-bg2:    #222840;
  --sb-border: rgba(255,255,255,0.06);
  --sb-text:   rgba(255,255,255,0.6);
  --sb-hover:  rgba(255,255,255,0.06);
  --topbar-h:  60px;
  --accent:    #3b76ef;
  --accent-2:  #45c6dd;
  --gold:      #f0a500;
  --gold-l:    #fbbf24;
  --gold-d:    #b87800;
  --white:     #ffffff;
  --content-bg:#f4f6fb;
  --card-bg:   #ffffff;
  --g100:      #f1f5f9;
  --g200:      #e2e8f0;
  --g400:      #94a3b8;
  --g500:      #64748b;
  --g600:      #475569;
  --g700:      #334155;
  --g800:      #1e293b;
  --green:     #10b981;  --green-bg:#d1fae5;  --green-bd:#6ee7b7;
  --red:       #ef4444;  --red-bg:  #fee2e2;  --red-bd:  #fca5a5;
  --orange:    #f59e0b;  --org-bg:  #fef3c7;  --org-bd:  #fcd34d;
  --r:         8px;  --r-lg:12px;  --r-xl:18px;
  --font:      'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:      cubic-bezier(.4,0,.2,1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.14);
}

html body#modernpanel *,html body#modernpanel *::before,html body#modernpanel *::after{box-sizing:border-box!important;}
html body#modernpanel{font-family:var(--font)!important;background:var(--content-bg)!important;color:var(--g700)!important;margin:0!important;padding:0!important;overflow-x:hidden!important;min-height:100vh!important;-webkit-font-smoothing:antialiased!important;}
html body#modernpanel .fa,html body#modernpanel .fas,html body#modernpanel .far,html body#modernpanel [class*="fa-"]{font-family:"Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome!important;font-weight:900!important;font-style:normal!important;}
html body#modernpanel .fab{font-family:"Font Awesome 6 Brands","Font Awesome 5 Brands"!important;font-weight:400!important;}

/* OLD layout hidden */
html body#modernpanel .leftbar,html body#modernpanel .clear,html body#modernpanel .cd-top,html body#modernpanel .mpanelinfo,html body#modernpanel .headbutonlar,html body#modernpanel .wclientwelcome,html body#modernpanel .wclientnotifi,html body#modernpanel .alanadisorgu,html body#modernpanel .rightconhead,html body#modernpanel .sayfabaslik{display:none!important;}
html body#modernpanel .rightcontent{margin-left:0!important;width:100%!important;float:none!important;padding:0!important;}

/* ══════════════════════════════════════════════
   WRAPPER
   ══════════════════════════════════════════════ */
html body#modernpanel .bh-wrapper{display:flex!important;min-height:100vh!important;}

/* ══════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════ */
html body#modernpanel .bh-sidebar{
  width:var(--sb-w)!important; min-height:100vh!important; flex-shrink:0!important;
  background:var(--sb-bg)!important; position:fixed!important; top:0!important; left:0!important; bottom:0!important;
  z-index:100!important; display:flex!important; flex-direction:column!important;
  transition:width 0.25s var(--ease)!important; overflow:hidden!important;
  box-shadow:4px 0 20px rgba(0,0,0,0.15)!important;
}
html body#modernpanel .bh-sidebar.collapsed{width:64px!important;}

/* Brand */
html body#modernpanel .bh-sidebar-brand{
  height:var(--topbar-h)!important; display:flex!important; align-items:center!important;
  padding:0 16px!important; gap:10px!important;
  border-bottom:1px solid var(--sb-border)!important; flex-shrink:0!important;
  background:var(--sb-bg)!important;
}
html body#modernpanel .bh-logo-link{display:flex!important;align-items:center!important;flex:1!important;min-width:0!important;}
html body#modernpanel .bh-logo{height:32px!important;width:auto!important;max-width:130px!important;object-fit:contain!important;transition:opacity 0.2s!important;}
html body#modernpanel .bh-sidebar-toggle{background:none!important;border:none!important;color:rgba(255,255,255,0.5)!important;cursor:pointer!important;font-size:16px!important;padding:6px!important;border-radius:6px!important;transition:all 0.15s!important;flex-shrink:0!important;display:none!important;}
html body#modernpanel .bh-sidebar-toggle:hover{background:rgba(255,255,255,0.08)!important;color:#fff!important;}

/* Nav */
html body#modernpanel .bh-sidebar-nav{flex:1!important;overflow-y:auto!important;overflow-x:hidden!important;padding:12px 8px!important;scrollbar-width:thin!important;scrollbar-color:rgba(255,255,255,0.1) transparent!important;}
html body#modernpanel .bh-sidebar-nav::-webkit-scrollbar{width:3px!important;}
html body#modernpanel .bh-sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1)!important;border-radius:3px!important;}

html body#modernpanel .bh-nav-group-label{font-size:10px!important;font-weight:700!important;color:rgba(255,255,255,0.25)!important;text-transform:uppercase!important;letter-spacing:1.2px!important;padding:6px 10px 4px!important;font-family:var(--font)!important;white-space:nowrap!important;overflow:hidden!important;}

html body#modernpanel .bh-nav-item{
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:9px 12px!important;border-radius:var(--r)!important;
  color:var(--sb-text)!important;font-size:13.5px!important;font-weight:500!important;
  text-decoration:none!important;transition:all 0.18s var(--ease)!important;
  font-family:var(--font)!important;cursor:pointer!important;
  white-space:nowrap!important;overflow:hidden!important;
  margin-bottom:2px!important;
}
html body#modernpanel .bh-nav-item > i:first-child{width:18px!important;text-align:center!important;font-size:15px!important;flex-shrink:0!important;transition:color 0.15s!important;}
html body#modernpanel .bh-nav-item span{flex:1!important;overflow:hidden!important;text-overflow:ellipsis!important;}
html body#modernpanel .bh-nav-item:hover{background:var(--sb-hover)!important;color:rgba(255,255,255,0.9)!important;}
html body#modernpanel .bh-nav-item:hover > i:first-child{color:var(--gold-l)!important;}
html body#modernpanel .bh-nav-item.active{
  background:linear-gradient(90deg,var(--accent),var(--accent-2))!important;
  color:#fff!important;font-weight:600!important;
  box-shadow:0 4px 14px rgba(59,118,239,0.35)!important;
}
html body#modernpanel .bh-nav-item.active > i:first-child{color:#fff!important;}

/* Arrow for parent items */
html body#modernpanel .bh-nav-arrow{margin-left:auto!important;font-size:10px!important;transition:transform 0.2s!important;opacity:0.5!important;flex-shrink:0!important;}
html body#modernpanel .bh-nav-item-wrap.open > .bh-nav-item .bh-nav-arrow{transform:rotate(90deg)!important;}

/* Sub menu */
html body#modernpanel .bh-nav-sub{display:none!important;padding:2px 0 4px 28px!important;}
html body#modernpanel .bh-nav-item-wrap.open > .bh-nav-sub{display:block!important;}
html body#modernpanel .bh-nav-sub-item{display:flex!important;align-items:center!important;gap:8px!important;padding:7px 12px!important;border-radius:var(--r)!important;color:rgba(255,255,255,0.45)!important;font-size:13px!important;text-decoration:none!important;transition:all 0.15s!important;font-family:var(--font)!important;margin-bottom:1px!important;}
html body#modernpanel .bh-nav-sub-item:hover{background:rgba(255,255,255,0.05)!important;color:rgba(255,255,255,0.85)!important;}
html body#modernpanel .bh-nav-sub-item.active{color:var(--gold-l)!important;font-weight:600!important;}
html body#modernpanel .bh-nav-sub-item i{font-size:11px!important;color:var(--gold)!important;opacity:0.6!important;}
html body#modernpanel .bh-nav-sub-item.active i{opacity:1!important;}

/* Sidebar user card */
html body#modernpanel .bh-sidebar-user{
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:12px 14px!important;border-top:1px solid var(--sb-border)!important;
  flex-shrink:0!important;background:rgba(0,0,0,0.15)!important;overflow:hidden!important;
}
html body#modernpanel .bh-su-avatar{width:32px!important;height:32px!important;background:linear-gradient(135deg,var(--gold-l),var(--gold-d))!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;font-weight:800!important;color:var(--sb-bg)!important;flex-shrink:0!important;}
html body#modernpanel .bh-su-info{flex:1!important;min-width:0!important;}
html body#modernpanel .bh-su-name{font-size:12.5px!important;font-weight:600!important;color:rgba(255,255,255,0.85)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-family:var(--font)!important;}
html body#modernpanel .bh-su-role{font-size:11px!important;color:rgba(255,255,255,0.35)!important;font-family:var(--font)!important;}
html body#modernpanel .bh-su-logout{color:rgba(255,255,255,0.3)!important;font-size:14px!important;padding:4px!important;transition:color 0.15s!important;text-decoration:none!important;flex-shrink:0!important;}
html body#modernpanel .bh-su-logout:hover{color:var(--red)!important;}

/* ══════════════════════════════════════════════
   MAIN AREA
   ══════════════════════════════════════════════ */
html body#modernpanel .bh-main{
  margin-left:var(--sb-w)!important;flex:1!important;
  display:flex!important;flex-direction:column!important;
  min-height:100vh!important;transition:margin-left 0.25s var(--ease)!important;
}
html body#modernpanel .bh-main.expanded{margin-left:64px!important;}

/* ══════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════ */
html body#modernpanel .bh-topbar{
  height:var(--topbar-h)!important; background:var(--white)!important;
  border-bottom:1px solid var(--g200)!important;
  display:flex!important;align-items:center!important;
  padding:0 24px!important;gap:12px!important;
  position:sticky!important;top:0!important;z-index:99!important;
  box-shadow:var(--shadow-sm)!important;
}
html body#modernpanel .bh-topbar-left{display:flex!important;align-items:center!important;gap:12px!important;flex:1!important;}
html body#modernpanel .bh-topbar-right{display:flex!important;align-items:center!important;gap:6px!important;}
html body#modernpanel .bh-topbar-toggle{background:none!important;border:none!important;color:var(--g500)!important;cursor:pointer!important;font-size:18px!important;padding:6px 8px!important;border-radius:var(--r)!important;transition:all 0.15s!important;}
html body#modernpanel .bh-topbar-toggle:hover{background:var(--g100)!important;color:var(--g800)!important;}

/* Search */
html body#modernpanel .bh-search-wrap{position:relative!important;flex:1!important;max-width:340px!important;}
html body#modernpanel .bh-search-icon{position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;color:var(--g400)!important;font-size:14px!important;}
html body#modernpanel .bh-search{width:100%!important;height:38px!important;border:1.5px solid var(--g200)!important;border-radius:var(--r-lg)!important;padding:0 14px 0 36px!important;font-size:13.5px!important;font-family:var(--font)!important;color:var(--g700)!important;background:var(--g100)!important;outline:none!important;transition:all 0.18s!important;}
html body#modernpanel .bh-search:focus{border-color:var(--accent)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(59,118,239,0.1)!important;}

/* Topbar action buttons */
html body#modernpanel .bh-top-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:38px!important;height:38px!important;border-radius:var(--r-lg)!important;
  background:var(--g100)!important;border:1px solid var(--g200)!important;
  color:var(--g600)!important;font-size:16px!important;cursor:pointer!important;
  position:relative!important;transition:all 0.15s!important;text-decoration:none!important;
}
html body#modernpanel .bh-top-btn:hover{background:var(--g200)!important;color:var(--g800)!important;}
html body#modernpanel .bh-top-badge{
  position:absolute!important;top:-4px!important;right:-4px!important;
  min-width:16px!important;height:16px!important;
  background:var(--red)!important;color:#fff!important;
  font-size:9px!important;font-weight:700!important;border-radius:8px!important;
  padding:0 3px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border:2px solid #fff!important;animation:pulse-badge 2s infinite!important;
}
@keyframes pulse-badge{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4);}50%{box-shadow:0 0 0 4px rgba(239,68,68,0);}}
html body#modernpanel .bh-top-avatar{
  width:38px!important;height:38px!important;border-radius:50%!important;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;border:2px solid var(--g200)!important;transition:all 0.15s!important;
}
html body#modernpanel .bh-top-avatar:hover{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(59,118,239,0.15)!important;}
html body#modernpanel .bh-avatar-circle{width:34px!important;height:34px!important;background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;font-weight:800!important;color:#fff!important;font-family:var(--font)!important;}
html body#modernpanel .bh-avatar-lg{width:42px!important;height:42px!important;font-size:18px!important;}

/* Topbar dropdowns */
html body#modernpanel .bh-top-dropdown-wrap{position:relative!important;}
html body#modernpanel .bh-top-dropdown{
  position:absolute!important;top:calc(100% + 10px)!important;right:0!important;
  width:300px!important;background:var(--white)!important;
  border:1px solid var(--g200)!important;border-radius:var(--r-xl)!important;
  box-shadow:var(--shadow-lg)!important;z-index:2000!important;
  display:none!important;overflow:hidden!important;
  animation:dropIn 0.18s var(--ease)!important;
}
html body#modernpanel .bh-top-dropdown.show{display:block!important;}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
html body#modernpanel .bh-td-head{padding:14px 16px!important;border-bottom:1px solid var(--g100)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;}
html body#modernpanel .bh-td-head span{font-size:13px!important;font-weight:700!important;color:var(--g700)!important;font-family:var(--font)!important;}
html body#modernpanel .bh-td-readall{font-size:11.5px!important;color:var(--accent)!important;font-weight:600!important;text-decoration:none!important;font-family:var(--font)!important;}
html body#modernpanel .bh-td-body{max-height:280px!important;overflow-y:auto!important;}
html body#modernpanel .bh-td-item{display:flex!important;align-items:center!important;gap:10px!important;padding:10px 16px!important;border-bottom:1px solid var(--g100)!important;transition:background 0.12s!important;}
html body#modernpanel .bh-td-item:hover{background:var(--g100)!important;}
html body#modernpanel .bh-td-item:last-child{border-bottom:none!important;}
html body#modernpanel .bh-td-icon{width:30px!important;height:30px!important;background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-size:12px!important;flex-shrink:0!important;}
html body#modernpanel .bh-td-text{font-size:12.5px!important;color:var(--g600)!important;font-family:var(--font)!important;line-height:1.4!important;}
html body#modernpanel .bh-td-empty{text-align:center!important;padding:24px!important;color:var(--g400)!important;font-size:13px!important;font-family:var(--font)!important;}
html body#modernpanel .bh-td-empty i{display:block!important;font-size:28px!important;margin-bottom:8px!important;color:var(--green)!important;}
/* User dropdown */
html body#modernpanel .bh-user-head{gap:12px!important;background:linear-gradient(135deg,#eff6ff,#f0f9ff)!important;}
html body#modernpanel .bh-td-uname{font-size:13.5px!important;font-weight:700!important;color:var(--g800)!important;font-family:var(--font)!important;}
html body#modernpanel .bh-td-urole{font-size:11.5px!important;color:var(--g400)!important;font-family:var(--font)!important;margin-top:2px!important;}
html body#modernpanel .bh-td-link{text-decoration:none!important;color:var(--g600)!important;font-size:13.5px!important;font-weight:500!important;}
html body#modernpanel .bh-td-link:hover{color:var(--accent)!important;background:var(--g100)!important;}
html body#modernpanel .bh-td-link i{width:16px!important;text-align:center!important;color:var(--accent)!important;font-size:13px!important;}
html body#modernpanel .bh-td-sep{height:1px!important;background:var(--g100)!important;margin:4px 0!important;}
html body#modernpanel .bh-td-logout,html body#modernpanel .bh-td-logout i{color:var(--red)!important;}
html body#modernpanel .bh-td-logout:hover{background:#fee2e2!important;color:var(--red)!important;}

/* ══════════════════════════════════════════════
   CONTENT
   ══════════════════════════════════════════════ */
html body#modernpanel .bh-content{
  flex:1!important;padding:24px!important;background:var(--content-bg)!important;
  min-height:calc(100vh - var(--topbar-h))!important;
}
html body#modernpanel .padding20,html body#modernpanel .modernclient-rightcon{padding:0!important;}

/* ══════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════ */
html body#modernpanel .bh-stats{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:16px!important;margin-bottom:20px!important;}
html body#modernpanel .bh-stat-card{border-radius:var(--r-xl)!important;overflow:hidden!important;height:128px!important;display:flex!important;flex-direction:column!important;cursor:pointer!important;transition:transform 0.22s,box-shadow 0.22s!important;text-decoration:none!important;}
html body#modernpanel .bh-stat-card:hover{transform:translateY(-4px)!important;}
html body#modernpanel .bh-stat-body{flex:1!important;padding:16px 16px 8px!important;position:relative!important;}
html body#modernpanel .bh-stat-num{font-size:34px!important;font-weight:900!important;color:#fff!important;line-height:1!important;font-family:var(--font)!important;letter-spacing:-1.5px!important;}
html body#modernpanel .bh-stat-label{font-size:10px!important;font-weight:700!important;color:rgba(255,255,255,0.7)!important;text-transform:uppercase!important;letter-spacing:0.8px!important;margin-top:5px!important;font-family:var(--font)!important;}
html body#modernpanel .bh-stat-icon{position:absolute!important;right:12px!important;top:12px!important;font-size:38px!important;color:rgba(255,255,255,0.12)!important;font-family:"Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome!important;font-weight:900!important;transition:transform 0.3s!important;}
html body#modernpanel .bh-stat-card:hover .bh-stat-icon{transform:scale(1.15) rotate(-8deg)!important;color:rgba(255,255,255,0.18)!important;}
html body#modernpanel .bh-stat-footer{height:34px!important;display:flex!important;align-items:center!important;padding:0 16px!important;background:rgba(0,0,0,0.18)!important;border-top:1px solid rgba(255,255,255,0.08)!important;font-size:10px!important;font-weight:700!important;color:rgba(255,255,255,0.75)!important;text-transform:uppercase!important;letter-spacing:0.6px!important;font-family:var(--font)!important;justify-content:space-between!important;}
html body#modernpanel .bh-stat-card.c1{background:linear-gradient(135deg,#6366f1,#4338ca)!important;box-shadow:0 6px 18px rgba(99,102,241,0.3)!important;}
html body#modernpanel .bh-stat-card.c2{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;box-shadow:0 6px 18px rgba(59,118,239,0.3)!important;}
html body#modernpanel .bh-stat-card.c3{background:linear-gradient(135deg,#f43f5e,#be123c)!important;box-shadow:0 6px 18px rgba(244,63,94,0.3)!important;}
html body#modernpanel .bh-stat-card.c4{background:linear-gradient(135deg,var(--gold),var(--gold-d))!important;box-shadow:0 6px 18px rgba(240,165,0,0.3)!important;}
html body#modernpanel .bh-stat-card.c5{background:linear-gradient(135deg,var(--green),#047857)!important;box-shadow:0 6px 18px rgba(16,185,129,0.3)!important;}

/* Domain search */
html body#modernpanel .bh-domain-search{background:linear-gradient(135deg,var(--sb-bg2),var(--sb-bg))!important;border-radius:var(--r-xl)!important;padding:20px 24px!important;border:1px solid rgba(255,255,255,0.06)!important;box-shadow:var(--shadow)!important;margin-bottom:20px!important;position:relative!important;overflow:hidden!important;}
html body#modernpanel .bh-domain-search::before{content:''!important;position:absolute!important;top:-40px!important;right:-40px!important;width:160px!important;height:160px!important;background:radial-gradient(circle,rgba(59,118,239,0.15),transparent 70%)!important;pointer-events:none!important;}
html body#modernpanel .bh-domain-search h2{font-size:14.5px!important;font-weight:700!important;color:#fff!important;margin:0 0 12px!important;font-family:var(--font)!important;position:relative!important;z-index:1!important;}
html body#modernpanel .bh-domain-search h2 .bh-price{color:var(--gold-l)!important;font-weight:900!important;}
html body#modernpanel .bh-domain-form{display:flex!important;max-width:580px!important;border-radius:10px!important;overflow:hidden!important;box-shadow:0 4px 16px rgba(0,0,0,0.25)!important;position:relative!important;z-index:1!important;}
html body#modernpanel .bh-domain-input{flex:1!important;height:46px!important;border:none!important;padding:0 18px!important;font-size:14px!important;font-family:var(--font)!important;background:rgba(255,255,255,0.95)!important;color:var(--g800)!important;outline:none!important;}
html body#modernpanel .bh-domain-btn{height:46px!important;padding:0 24px!important;background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border:none!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;font-family:var(--font)!important;transition:all 0.2s!important;white-space:nowrap!important;display:flex!important;align-items:center!important;gap:7px!important;}
html body#modernpanel .bh-domain-btn:hover{background:linear-gradient(135deg,var(--accent-2),var(--accent))!important;}

/* ══════════════════════════════════════════════
   CARD PANELS
   ══════════════════════════════════════════════ */
html body#modernpanel .tabcontentcon,html body#modernpanel .dashboardorderbox,html body#modernpanel .dashboardticketbox,html body#modernpanel .moderncliendblock,html body#modernpanel .mclientlastblocks,html body#modernpanel .mpanelrightcon,html body#modernpanel .wclientblockscon,html body#modernpanel .mpanelhaber,html body#modernpanel .mpanelright{background:var(--card-bg)!important;border-radius:var(--r-lg)!important;border:1px solid var(--g200)!important;box-shadow:var(--shadow-sm)!important;overflow:hidden!important;margin-bottom:20px!important;padding:0!important;transition:box-shadow 0.2s!important;}
html body#modernpanel .tabcontentcon:hover,html body#modernpanel .dashboardorderbox:hover,html body#modernpanel .dashboardticketbox:hover{box-shadow:var(--shadow)!important;}
html body#modernpanel .mpaneltitle{padding:16px 20px!important;border-bottom:1px solid var(--g100)!important;background:var(--white)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
html body#modernpanel .mpaneltitle h4{font-size:14px!important;font-weight:700!important;color:var(--g800)!important;margin:0!important;font-family:var(--font)!important;display:flex!important;align-items:center!important;gap:10px!important;}
html body#modernpanel .mpaneltitle h4::before{content:''!important;width:3px!important;height:16px!important;background:linear-gradient(180deg,var(--accent),var(--accent-2))!important;border-radius:2px!important;display:inline-block!important;flex-shrink:0!important;}
html body#modernpanel .mpaneltitle h4 a,html body#modernpanel .mpaneltitle h4 strong{color:var(--g800)!important;text-decoration:none!important;font-weight:700!important;}
html body#modernpanel .wclientblockscon{display:grid!important;grid-template-columns:1fr 1fr!important;gap:20px!important;background:transparent!important;border:none!important;box-shadow:none!important;}
@media(max-width:900px){html body#modernpanel .wclientblockscon{grid-template-columns:1fr!important;}}

/* ══════════════════════════════════════════════
   ZERO TABLE SYSTEM
   ══════════════════════════════════════════════ */
html body#modernpanel table,html body#modernpanel thead,html body#modernpanel tbody,html body#modernpanel tfoot,html body#modernpanel tr,html body#modernpanel th,html body#modernpanel td{display:block!important;}
html body#modernpanel thead{display:none!important;}
html body#modernpanel tbody{display:flex!important;flex-direction:column!important;gap:8px!important;padding:14px!important;}
html body#modernpanel tbody tr{display:flex!important;align-items:center!important;background:var(--white)!important;border:1px solid var(--g200)!important;border-radius:var(--r-lg)!important;padding:12px 16px!important;transition:all 0.18s var(--ease)!important;box-shadow:var(--shadow-sm)!important;position:relative!important;overflow:hidden!important;}
html body#modernpanel tbody tr::before{content:''!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:3px!important;background:linear-gradient(180deg,var(--accent),var(--accent-2))!important;opacity:0!important;transition:opacity 0.18s!important;}
html body#modernpanel tbody tr:hover{border-color:var(--accent)!important;box-shadow:0 4px 16px rgba(59,118,239,0.1)!important;transform:translateX(3px)!important;}
html body#modernpanel tbody tr:hover::before{opacity:1!important;}
html body#modernpanel tbody td{display:flex!important;align-items:center!important;flex:1!important;min-width:0!important;padding:0 10px!important;border:none!important;color:var(--g600)!important;font-size:13.5px!important;font-family:var(--font)!important;}
html body#modernpanel tbody td:first-child{flex:2.5!important;font-weight:600!important;color:var(--g800)!important;padding-left:14px!important;}
html body#modernpanel tbody td:last-child{flex:0 0 auto!important;gap:6px!important;}
html body#modernpanel tbody td a:not(.gonderbtn):not(.incelebtn){color:var(--g800)!important;font-weight:600!important;text-decoration:none!important;}
html body#modernpanel tbody td a:not(.gonderbtn):not(.incelebtn):hover{color:var(--accent)!important;}
html body#modernpanel span.productinfo{display:block!important;font-size:11.5px!important;color:var(--g400)!important;font-family:var(--font)!important;margin-top:2px!important;font-weight:400!important;}

/* Status pills */
html body#modernpanel tbody td .gonderbtn,html body#modernpanel tbody td a.gonderbtn{padding:4px 12px!important;border-radius:20px!important;font-size:11px!important;font-weight:700!important;box-shadow:none!important;transform:none!important;display:inline-flex!important;align-items:center!important;gap:4px!important;white-space:nowrap!important;letter-spacing:0.3px!important;text-transform:uppercase!important;border:1.5px solid!important;}
html body#modernpanel tbody td .gonderbtn:hover{transform:none!important;box-shadow:none!important;}
html body#modernpanel tbody td .gonderbtn[style*="#4caf50"],html body#modernpanel tbody td .gonderbtn[style*="green"]{background:var(--green-bg)!important;color:#15803d!important;border-color:var(--green-bd)!important;}
html body#modernpanel tbody td .gonderbtn[style*="#f44336"],html body#modernpanel tbody td .gonderbtn[style*="red"]{background:var(--red-bg)!important;color:#dc2626!important;border-color:var(--red-bd)!important;}
html body#modernpanel tbody td .gonderbtn[style*="#ff9800"],html body#modernpanel tbody td .gonderbtn[style*="orange"]{background:var(--org-bg)!important;color:#c2410c!important;border-color:var(--org-bd)!important;}
html body#modernpanel tbody td .gonderbtn[style*="#9e9e9e"],html body#modernpanel tbody td .gonderbtn[style*="grey"]{background:var(--g100)!important;color:var(--g500)!important;border-color:var(--g200)!important;}
html body#modernpanel tbody td .gonderbtn:not([style]){background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border-color:var(--accent)!important;}

/* Action buttons */
html body#modernpanel a.incelebtn,html body#modernpanel .incelebtn{display:inline-flex!important;align-items:center!important;gap:5px!important;padding:5px 12px!important;border-radius:20px!important;font-size:12px!important;font-weight:600!important;color:var(--g600)!important;background:var(--g100)!important;border:1px solid var(--g200)!important;text-decoration:none!important;transition:all 0.15s!important;font-family:var(--font)!important;white-space:nowrap!important;}
html body#modernpanel a.incelebtn:hover{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border-color:var(--accent)!important;box-shadow:0 2px 10px rgba(59,118,239,0.25)!important;}
html body#modernpanel a.incelebtn[style*="grayscale"],html body#modernpanel a.incelebtn[style*="opacity"]{opacity:0.35!important;cursor:not-allowed!important;pointer-events:none!important;}
html body#modernpanel tbody td a i.fa-cog{font-size:15px!important;color:var(--g400)!important;transition:color 0.15s,transform 0.3s!important;}
html body#modernpanel tbody td a:hover i.fa-cog{color:var(--accent)!important;transform:rotate(90deg)!important;}

/* DataTable controls */
html body#modernpanel .dataTables_wrapper .dataTables_length,html body#modernpanel .dataTables_wrapper .dataTables_filter{padding:12px 18px!important;background:var(--g100)!important;border-bottom:1px solid var(--g200)!important;font-size:13px!important;color:var(--g600)!important;font-family:var(--font)!important;}
html body#modernpanel .dataTables_wrapper .dataTables_filter{text-align:right!important;}
html body#modernpanel .dataTables_wrapper .dataTables_filter input,html body#modernpanel .dataTables_wrapper select{border:1.5px solid var(--g200)!important;border-radius:var(--r)!important;padding:6px 12px!important;font-size:13px!important;background:#fff!important;height:auto!important;width:auto!important;outline:none!important;}
html body#modernpanel .dataTables_wrapper .dataTables_info,html body#modernpanel .dataTables_wrapper .dataTables_paginate{padding:12px 18px!important;border-top:1px solid var(--g200)!important;background:var(--g100)!important;font-size:13px!important;color:var(--g600)!important;font-family:var(--font)!important;}
html body#modernpanel .paginate_button{border-radius:8px!important;padding:5px 11px!important;font-size:12.5px!important;color:var(--g600)!important;border:1px solid var(--g200)!important;background:#fff!important;cursor:pointer!important;margin:0 2px!important;transition:all 0.15s!important;}
html body#modernpanel .paginate_button.current,html body#modernpanel .paginate_button:hover:not(.disabled){background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border-color:var(--accent)!important;font-weight:700!important;}
html body#modernpanel .paginate_button.disabled{opacity:0.35!important;}

/* Empty state */
html body#modernpanel .noentryblock,html body#modernpanel #empty_list{text-align:center!important;padding:48px 24px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;}
html body#modernpanel .noentryblock i,html body#modernpanel #empty_list i{display:none!important;}
html body#modernpanel .noentryblock::before,html body#modernpanel #empty_list::before{content:''!important;display:block!important;width:72px!important;height:72px!important;background:linear-gradient(135deg,#eff6ff,#f0f9ff)!important;border:2px solid var(--g200)!important;border-radius:20px!important;margin:0 auto 20px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Crect x='12' y='18' width='40' height='30' rx='4' stroke='%2393c5fd' stroke-width='3'/%3E%3Cpath d='M12 28h40' stroke='%2393c5fd' stroke-width='3'/%3E%3Cpath d='M20 38h8M20 44h16' stroke='%23bae6fd' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:44px!important;}
html body#modernpanel .noentryblock h4,html body#modernpanel #empty_list h4{font-size:16px!important;font-weight:700!important;color:var(--g700)!important;margin:0 0 8px!important;font-family:var(--font)!important;}
html body#modernpanel .noentryblock span,html body#modernpanel .noentryblock p,html body#modernpanel #empty_list span{font-size:13.5px!important;color:var(--g400)!important;font-family:var(--font)!important;line-height:1.6!important;max-width:320px!important;}

/* Tabs + pills */
html body#modernpanel .miotab{display:flex!important;flex-wrap:wrap!important;gap:4px!important;padding:12px 18px!important;border-bottom:1px solid var(--g100)!important;}
html body#modernpanel .miotab a{padding:5px 14px!important;border-radius:20px!important;font-size:12.5px!important;font-weight:500!important;color:var(--g600)!important;background:var(--g100)!important;text-decoration:none!important;border:1px solid var(--g200)!important;font-family:var(--font)!important;transition:all 0.15s!important;}
html body#modernpanel .miotab a:hover,html body#modernpanel .miotab a#aktifmiotab{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border-color:var(--accent)!important;font-weight:700!important;}
html body#modernpanel .ac-domainlist-status{display:flex!important;gap:4px!important;flex-wrap:wrap!important;padding:10px 14px!important;border-bottom:1px solid var(--g100)!important;background:var(--g100)!important;}
html body#modernpanel .ac-domainlist-status a{display:inline-flex!important;align-items:center!important;padding:4px 12px!important;border-radius:20px!important;font-size:12px!important;font-weight:500!important;color:var(--g500)!important;background:var(--white)!important;border:1px solid var(--g200)!important;text-decoration:none!important;transition:all 0.15s!important;font-family:var(--font)!important;}
html body#modernpanel .ac-domainlist-status a.active,html body#modernpanel .ac-domainlist-status a:hover{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border-color:var(--accent)!important;font-weight:700!important;}

/* Buttons */
html body#modernpanel .gonderbtn,html body#modernpanel a.gonderbtn,html body#modernpanel button.gonderbtn{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border:none!important;border-radius:var(--r)!important;font-weight:700!important;font-size:13px!important;padding:9px 18px!important;cursor:pointer!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;gap:6px!important;font-family:var(--font)!important;line-height:1!important;box-shadow:0 2px 10px rgba(59,118,239,0.25)!important;transition:all 0.18s!important;}
html body#modernpanel .gonderbtn:hover{transform:translateY(-1px)!important;box-shadow:0 4px 18px rgba(59,118,239,0.4)!important;color:#fff!important;}
html body#modernpanel .yesilbtn,html body#modernpanel a.yesilbtn{background:linear-gradient(135deg,var(--green),#047857)!important;color:#fff!important;border:none!important;border-radius:var(--r)!important;font-weight:700!important;font-size:13px!important;padding:9px 18px!important;cursor:pointer!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;gap:6px!important;font-family:var(--font)!important;}
html body#modernpanel .sbtn,html body#modernpanel a.sbtn,html body#modernpanel .lbtn{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:5px 14px!important;border-radius:20px!important;font-size:12.5px!important;font-weight:600!important;color:var(--g600)!important;background:var(--g100)!important;border:1px solid var(--g200)!important;text-decoration:none!important;transition:all 0.15s!important;font-family:var(--font)!important;white-space:nowrap!important;}
html body#modernpanel .sbtn:hover,html body#modernpanel a.sbtn:hover{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border-color:var(--accent)!important;}

/* Forms */
html body#modernpanel input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),html body#modernpanel textarea,html body#modernpanel select{border:1.5px solid var(--g200)!important;border-style:solid!important;border-radius:var(--r)!important;padding:10px 14px!important;font-size:13.5px!important;outline:none!important;color:var(--g800)!important;font-family:var(--font)!important;background:#fff!important;height:auto!important;transition:border-color 0.18s,box-shadow 0.18s!important;}
html body#modernpanel input:focus,html body#modernpanel textarea:focus,html body#modernpanel select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(59,118,239,0.1)!important;}
html body#modernpanel textarea{resize:vertical!important;min-height:100px!important;}
html body#modernpanel .red-info{background:#fff5f5!important;border:1.5px solid var(--red-bd)!important;border-left:4px solid var(--red)!important;border-radius:var(--r)!important;padding:12px 16px!important;color:#dc2626!important;font-size:13.5px!important;font-family:var(--font)!important;display:block!important;margin-bottom:14px!important;}
html body#modernpanel .green-info{background:#f0fdf4!important;border:1.5px solid var(--green-bd)!important;border-left:4px solid var(--green)!important;border-radius:var(--r)!important;padding:12px 16px!important;color:#15803d!important;font-size:13.5px!important;font-family:var(--font)!important;display:block!important;margin-bottom:14px!important;}
html body#modernpanel .blue-info{background:#eff6ff!important;border:1.5px solid var(--blue-bd,#93c5fd)!important;border-left:4px solid var(--accent)!important;border-radius:var(--r)!important;padding:12px 16px!important;color:#1d4ed8!important;font-size:13.5px!important;font-family:var(--font)!important;display:block!important;margin-bottom:14px!important;}

/* Footer */
html body#modernpanel .clientcopyright,html body#modernpanel .lastentry,html body#modernpanel .ackfooter{text-align:center!important;padding:16px 24px!important;color:var(--g400)!important;font-size:12px!important;border-top:1px solid var(--g200)!important;font-family:var(--font)!important;background:var(--white)!important;}

/* Mobile overlay */
html body#modernpanel .bh-overlay{display:none!important;position:fixed!important;inset:0!important;background:rgba(0,0,0,0.5)!important;z-index:99!important;}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media(max-width:1280px){html body#modernpanel .bh-stats{grid-template-columns:repeat(3,1fr)!important;}}
@media(max-width:992px){
  html body#modernpanel .bh-sidebar{transform:translateX(-100%)!important;transition:transform 0.25s!important;width:var(--sb-w)!important;}
  html body#modernpanel .bh-sidebar.open{transform:translateX(0)!important;}
  html body#modernpanel .bh-overlay.active{display:block!important;}
  html body#modernpanel .bh-main{margin-left:0!important;}
  html body#modernpanel .bh-topbar-toggle{display:flex!important;}
}
@media(max-width:768px){
  html body#modernpanel .bh-stats{grid-template-columns:repeat(2,1fr)!important;}
  html body#modernpanel .bh-content{padding:16px!important;}
  html body#modernpanel .wclientblockscon{grid-template-columns:1fr!important;}
}
@media(max-width:480px){
  html body#modernpanel .bh-stats{grid-template-columns:1fr!important;}
  html body#modernpanel tbody tr{flex-direction:column!important;align-items:flex-start!important;}
  html body#modernpanel tbody td{flex:1 1 100%!important;width:100%!important;}
}


/* ══════════════════════════════════════════════════════════════
   APPROX-STYLE CARD ROWS v20.1 — Fixed column widths, no overlap
   ══════════════════════════════════════════════════════════════ */

/* Override the generic flex cells with proper fixed widths */
html body#modernpanel tbody td {
  flex: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* Column 1: Product name + domain (widest, grows) */
html body#modernpanel tbody td:nth-child(1) {
  flex: 1 1 200px !important;
  min-width: 140px !important;
  padding-left: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  white-space: normal !important;
}
html body#modernpanel tbody td:nth-child(1) a {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--g800) !important;
  text-decoration: none !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
html body#modernpanel tbody td:nth-child(1) a:hover { color: var(--accent) !important; }
html body#modernpanel tbody td:nth-child(1) span.productinfo,
html body#modernpanel tbody td:nth-child(1) small {
  font-size: 11px !important;
  color: var(--g400) !important;
  font-weight: 400 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Column 2: Price (shrink fixed) */
html body#modernpanel tbody td:nth-child(2) {
  flex: 0 0 90px !important;
  font-weight: 700 !important;
  color: var(--g800) !important;
  font-size: 13px !important;
  text-align: right !important;
  justify-content: flex-end !important;
}

/* Column 3: Date (shrink fixed) */
html body#modernpanel tbody td:nth-child(3) {
  flex: 0 0 100px !important;
  font-size: 12.5px !important;
  color: var(--g500) !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Column 4: Status badge */
html body#modernpanel tbody td:nth-child(4) {
  flex: 0 0 100px !important;
  justify-content: center !important;
}

/* Column 5: Action (cog) */
html body#modernpanel tbody td:nth-child(5) {
  flex: 0 0 44px !important;
  justify-content: center !important;
}

/* For tables with fewer columns (3 col: name, status, action) */
html body#modernpanel tbody tr td:first-child:last-child {
  flex: 1 !important;
}

/* Approx card row: left accent bar only on hover */
html body#modernpanel tbody tr {
  padding: 14px 16px !important;
  min-height: 64px !important;
  gap: 4px !important;
}

/* Product icon placeholder (pseudo element) */
html body#modernpanel tbody td:nth-child(1)::before {
  content: '' !important;
  display: none !important; /* Remove if columns don't need icon */
}

/* ── APPROX LIST ITEM: icon + info side by side ── */
/* If only 1 cell with a link, style it differently (ticket/info lists) */
html body#modernpanel tbody tr:has(td:only-child) {
  padding: 14px 20px !important;
}

/* ── STATUS BADGE improvements ── */
html body#modernpanel tbody .gonderbtn,
html body#modernpanel tbody a.gonderbtn {
  font-size: 10.5px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.4px !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
}
/* Green active */
html body#modernpanel tbody .gonderbtn[style*="#4caf50"],
html body#modernpanel tbody .gonderbtn[style*="green"] {
  background: #dcfce7 !important; color: #16a34a !important;
  border: 1.5px solid #bbf7d0 !important;
}
html body#modernpanel tbody .gonderbtn[style*="#4caf50"]::before,
html body#modernpanel tbody .gonderbtn[style*="green"]::before {
  content: '● ' !important; font-size: 6px !important;
}
/* Red cancelled */
html body#modernpanel tbody .gonderbtn[style*="#f44336"],
html body#modernpanel tbody .gonderbtn[style*="red"],
html body#modernpanel tbody .gonderbtn[style*="#e53935"] {
  background: #fee2e2 !important; color: #dc2626 !important;
  border: 1.5px solid #fca5a5 !important;
}
html body#modernpanel tbody .gonderbtn[style*="#f44336"]::before,
html body#modernpanel tbody .gonderbtn[style*="red"]::before {
  content: '✕ ' !important; font-size: 8px !important;
}
/* Orange pending */
html body#modernpanel tbody .gonderbtn[style*="#ff9800"],
html body#modernpanel tbody .gonderbtn[style*="orange"] {
  background: #fef9c3 !important; color: #a16207 !important;
  border: 1.5px solid #fde68a !important;
}
/* Gray default */
html body#modernpanel tbody .gonderbtn:not([style]) {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important; border-color: var(--accent) !important;
}

/* ── COG ICON as round icon button ── */
html body#modernpanel tbody a[href*="hesabim"] i.fa-cog,
html body#modernpanel tbody a i.fa-cog {
  font-size: 15px !important;
  color: var(--g300, #94a3b8) !important;
  transition: color 0.2s, transform 0.35s !important;
  display: block !important;
}
html body#modernpanel tbody a:hover i.fa-cog {
  color: var(--accent) !important;
  transform: rotate(90deg) !important;
}

/* ── DOMAIN ORDERS TABLE specific (domain-orders class) ── */
html body#modernpanel table.domain-orders tbody td:nth-child(1) {
  flex: 1 1 180px !important;
}
html body#modernpanel table.domain-orders tbody td:nth-child(2) {
  flex: 0 0 80px !important;
}
html body#modernpanel table.domain-orders tbody td:nth-child(3) {
  flex: 0 0 100px !important;
}
html body#modernpanel table.domain-orders tbody td:nth-child(4) {
  flex: 0 0 90px !important;
}

/* ── Empty state rows (colspan) ── */
html body#modernpanel tbody tr:has(td[colspan]) {
  padding: 0 !important;
  border-style: dashed !important;
  background: var(--g100) !important;
  min-height: auto !important;
}
html body#modernpanel tbody tr:has(td[colspan]):hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--g200) !important;
}
html body#modernpanel tbody tr:has(td[colspan]) td {
  flex: 1 !important;
  overflow: visible !important;
  white-space: normal !important;
  border-left: none !important;
}

/* ── dataTables filter row fix ── */
html body#modernpanel .dataTables_wrapper tbody td {
  font-size: 13px !important;
}

/* ── DataTable: "Kayıt Göster" row ── */
html body#modernpanel .dataTables_length label,
html body#modernpanel .dataTables_filter label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--g500) !important;
}
html body#modernpanel .dataTables_length select {
  border: 1.5px solid var(--g200) !important;
  border-radius: var(--r) !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  background: #fff !important;
  height: auto !important; width: auto !important;
}
html body#modernpanel .dataTables_filter input {
  border: 1.5px solid var(--g200) !important;
  border-radius: var(--r) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  background: #fff !important;
  height: auto !important; width: 180px !important;
}

/* ── "Önceki | 1 | Sonraki" pagination override for WiseCP ── */
html body#modernpanel .dataTables_paginate {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
html body#modernpanel .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  border: 1px solid var(--g200) !important;
  background: #fff !important;
  color: var(--g600) !important;
}
html body#modernpanel .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  font-weight: 700 !important;
}
html body#modernpanel .dataTables_paginate .paginate_button:hover:not(.disabled) {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
html body#modernpanel .dataTables_paginate .paginate_button.disabled {
  opacity: 0.3 !important;
  cursor: default !important;
}

/* ══════════════════════════════════════════════════════════
   BH CARD SYSTEM — v21 — ZERO TABLE, PURE CARDS
   ══════════════════════════════════════════════════════════ */

/* Dashboard grid: 2 columns */
html body#modernpanel .bh-dashboard-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-items: start !important;
}
html body#modernpanel .bh-full-width {
  grid-column: 1 / -1 !important;
}
@media(max-width:900px){
  html body#modernpanel .bh-dashboard-grid { grid-template-columns: 1fr !important; }
}

/* Card */
html body#modernpanel .bh-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--g200) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s !important;
}
html body#modernpanel .bh-card:hover { box-shadow: var(--shadow) !important; }

/* Card Header */
html body#modernpanel .bh-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--g100) !important;
  background: var(--white) !important;
  gap: 12px !important;
}
html body#modernpanel .bh-card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--g800) !important;
  font-family: var(--font) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body#modernpanel .bh-card-title i {
  color: var(--accent) !important;
  font-size: 14px !important;
  width: 18px !important;
  text-align: center !important;
}
html body#modernpanel .bh-card-link {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--g500) !important;
  text-decoration: none !important;
  font-family: var(--font) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  background: var(--g100) !important;
  border: 1px solid var(--g200) !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
html body#modernpanel .bh-card-link:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
html body#modernpanel .bh-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
html body#modernpanel .bh-btn-primary:hover {
  box-shadow: 0 3px 10px rgba(59,118,239,0.3) !important;
}

/* ── LIST ── */
html body#modernpanel .bh-list {
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
html body#modernpanel .bh-list--compact { gap: 4px !important; }

/* ── LIST ITEM ── */
html body#modernpanel .bh-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: var(--white) !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 12px !important;
  transition: all 0.18s var(--ease) !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
html body#modernpanel .bh-list-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  opacity: 0 !important;
  transition: opacity 0.18s !important;
}
html body#modernpanel .bh-list-item:hover {
  border-color: rgba(59,118,239,0.35) !important;
  box-shadow: 0 4px 16px rgba(59,118,239,0.1) !important;
  transform: translateX(4px) !important;
  background: #f8faff !important;
}
html body#modernpanel .bh-list-item:hover::before { opacity: 1 !important; }
html body#modernpanel .bh-list-item--activity:hover { transform: none !important; }

/* ── ICON ── */
html body#modernpanel .bh-li-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  color: #fff !important;
}
html body#modernpanel .bh-li-icon i {
  font-size: 16px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  font-weight: 900 !important;
}
html body#modernpanel .bh-li-icon--blue   { background: linear-gradient(135deg,var(--accent),var(--accent-2)) !important; }
html body#modernpanel .bh-li-icon--purple { background: linear-gradient(135deg,#8b5cf6,#6d28d9) !important; }
html body#modernpanel .bh-li-icon--green  { background: linear-gradient(135deg,#10b981,#047857) !important; }
html body#modernpanel .bh-li-icon--orange { background: linear-gradient(135deg,#f59e0b,#b45309) !important; }
html body#modernpanel .bh-li-icon--teal   { background: linear-gradient(135deg,#06b6d4,#0e7490) !important; }
html body#modernpanel .bh-li-icon--gold   { background: linear-gradient(135deg,var(--gold-l),var(--gold-d)) !important; color:var(--navy) !important; }
html body#modernpanel .bh-li-icon--navy   { background: linear-gradient(135deg,var(--navy-3),var(--navy-4)) !important; }
html body#modernpanel .bh-li-icon--red    { background: linear-gradient(135deg,#ef4444,#b91c1c) !important; }

/* ── INFO (title + sub) ── */
html body#modernpanel .bh-li-info {
  flex: 1 !important;
  min-width: 0 !important;
}
html body#modernpanel .bh-li-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--g800) !important;
  font-family: var(--font) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
html body#modernpanel .bh-li-title a {
  color: var(--g800) !important;
  text-decoration: none !important;
}
html body#modernpanel .bh-li-title a:hover { color: var(--accent) !important; }
html body#modernpanel .bh-li-sub {
  font-size: 11.5px !important;
  color: var(--g400) !important;
  font-family: var(--font) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
}
html body#modernpanel .bh-li-sub code {
  background: var(--g100) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  color: var(--accent) !important;
  font-family: monospace !important;
}

/* ── AMOUNT ── */
html body#modernpanel .bh-li-amount {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--g700) !important;
  font-family: var(--font) !important;
  flex-shrink: 0 !important;
  text-align: right !important;
  line-height: 1.2 !important;
  min-width: 70px !important;
}
html body#modernpanel .bh-li-amount small {
  display: block !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: var(--g400) !important;
}

/* ── DATE ── */
html body#modernpanel .bh-li-date {
  font-size: 12px !important;
  color: var(--g500) !important;
  font-family: var(--font) !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 100px !important;
  justify-content: center !important;
}
html body#modernpanel .bh-li-date i { font-size: 11px !important; color: var(--g400) !important; }

/* ── STATUS ── */
html body#modernpanel .bh-li-status {
  flex-shrink: 0 !important;
  min-width: 72px !important;
  display: flex !important;
  justify-content: center !important;
}

/* Style the WiseCP gonderbtn badges inside our cards */
html body#modernpanel .bh-li-status .gonderbtn,
html body#modernpanel .bh-li-status a.gonderbtn {
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1.5px solid !important;
}
html body#modernpanel .bh-li-status .gonderbtn:hover { transform: none !important; }
html body#modernpanel .bh-li-status .gonderbtn[style*="4caf50"],
html body#modernpanel .bh-li-status .gonderbtn[style*="green"] {
  background: #dcfce7 !important; color: #16a34a !important; border-color: #86efac !important;
}
html body#modernpanel .bh-li-status .gonderbtn[style*="f44336"],
html body#modernpanel .bh-li-status .gonderbtn[style*="red"] {
  background: #fee2e2 !important; color: #dc2626 !important; border-color: #fca5a5 !important;
}
html body#modernpanel .bh-li-status .gonderbtn[style*="ff9800"],
html body#modernpanel .bh-li-status .gonderbtn[style*="orange"] {
  background: #fef9c3 !important; color: #a16207 !important; border-color: #fde68a !important;
}
html body#modernpanel .bh-li-status .gonderbtn[style*="9e9e9e"],
html body#modernpanel .bh-li-status .gonderbtn[style*="607d8b"] {
  background: #f1f5f9 !important; color: #64748b !important; border-color: #cbd5e1 !important;
}
html body#modernpanel .bh-li-status .gonderbtn:not([style]) {
  background: linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
  color: #fff !important; border-color: var(--accent) !important;
}

/* ── ACTION BUTTON ── */
html body#modernpanel .bh-action-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--g100) !important;
  border: 1px solid var(--g200) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--g500) !important;
  text-decoration: none !important;
  transition: all 0.18s !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}
html body#modernpanel .bh-action-btn:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 8px rgba(59,118,239,0.25) !important;
}
html body#modernpanel .bh-action-btn i {
  font-size: 13px !important;
  transition: transform 0.3s !important;
}
html body#modernpanel .bh-action-btn:hover i.fa-cog { transform: rotate(90deg) !important; }
html body#modernpanel .bh-action-disabled {
  opacity: 0.3 !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ── EMPTY STATE ── */
html body#modernpanel .bh-empty {
  text-align: center !important;
  padding: 48px 24px !important;
}
html body#modernpanel .bh-empty-icon {
  width: 72px !important;
  height: 72px !important;
  background: linear-gradient(135deg, #eff6ff, #f0f9ff) !important;
  border: 2px solid var(--g200) !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
  font-size: 28px !important;
  color: var(--accent) !important;
}
html body#modernpanel .bh-empty-icon i {
  font-size: 28px !important;
  color: var(--accent) !important;
  opacity: 0.6 !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome !important;
  font-weight: 900 !important;
}
html body#modernpanel .bh-empty-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--g700) !important;
  margin-bottom: 6px !important;
  font-family: var(--font) !important;
}
html body#modernpanel .bh-empty-text {
  font-size: 13.5px !important;
  color: var(--g400) !important;
  font-family: var(--font) !important;
  line-height: 1.6 !important;
  max-width: 300px !important;
  margin: 0 auto !important;
}

/* ── TAB PILLS ── */
html body#modernpanel .bh-tab-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--g100) !important;
  background: var(--g100) !important;
}
html body#modernpanel .bh-tab-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--g500) !important;
  background: var(--white) !important;
  border: 1px solid var(--g200) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  font-family: var(--font) !important;
}
html body#modernpanel .bh-tab-pill.active,
html body#modernpanel .bh-tab-pill:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  font-weight: 700 !important;
}
html body#modernpanel .bh-tab-count {
  background: rgba(255,255,255,0.25) !important;
  border-radius: 10px !important;
  padding: 1px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html body#modernpanel .bh-tab-pill:not(.active) .bh-tab-count {
  background: var(--g200) !important;
  color: var(--g600) !important;
}
html body#modernpanel .bh-tab-pane.hidden { display: none !important; }

/* ── INFO BOX ── */
html body#modernpanel .bh-info-box {
  margin: 14px 14px 0 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1.5px solid !important;
}
html body#modernpanel .bh-info-blue {
  background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important;
}

/* ── LIST PAGINATION ── */
html body#modernpanel .bh-list-pagination {
  padding: 12px 16px !important;
  border-top: 1px solid var(--g100) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
html body#modernpanel .bh-list-pagination a,
html body#modernpanel .bh-list-pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  border: 1px solid var(--g200) !important;
  background: #fff !important;
  color: var(--g600) !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  padding: 0 8px !important;
}
html body#modernpanel .bh-list-pagination a:hover,
html body#modernpanel .bh-list-pagination span.current,
html body#modernpanel .bh-list-pagination span.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* ══ KEEP EXISTING TABLE STYLES FOR NON-DASHBOARD PAGES (detail pages etc) ══ */
/* These pages still use WiseCP tables on product detail/invoice pages */
html body#modernpanel .modernclient-rightcon table,
html body#modernpanel .modernclient-rightcon thead,
html body#modernpanel .modernclient-rightcon tbody,
html body#modernpanel .modernclient-rightcon tr,
html body#modernpanel .modernclient-rightcon td,
html body#modernpanel .modernclient-rightcon th { display: revert !important; }
html body#modernpanel .modernclient-rightcon table { width: 100% !important; border-collapse: collapse !important; }
html body#modernpanel .modernclient-rightcon tbody tr { background: #fff !important; border-bottom: 1px solid var(--g100) !important; }
html body#modernpanel .modernclient-rightcon tbody tr:hover { background: #f8faff !important; }
html body#modernpanel .modernclient-rightcon th {
  background: var(--g100) !important; color: var(--g600) !important;
  font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.5px !important; padding: 10px 14px !important; font-family: var(--font) !important;
  border-bottom: 2px solid var(--g200) !important;
}
html body#modernpanel .modernclient-rightcon td {
  padding: 12px 14px !important; font-size: 13.5px !important;
  color: var(--g600) !important; font-family: var(--font) !important; border: none !important;
  display: table-cell !important;
}

/* ── wclientblockscon on dashboard now points to grid ── */
html body#modernpanel .wclientblockscon {
  display: block !important; /* Dashboard now uses bh-dashboard-grid */
  background: transparent !important;
  border: none !important; box-shadow: none !important; padding: 0 !important;
}

/* bh-hidden utility */
html body#modernpanel .bh-hidden { display: none !important; }

/* wclientblockscon = dashboard grid wrapper */
html body#modernpanel .wclientblockscon.bh-dashboard-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-items: start !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
}
@media(max-width:900px){
  html body#modernpanel .wclientblockscon.bh-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}
html body#modernpanel .bh-full-width {
  grid-column: 1 / -1 !important;
}