/* =========================================================
   TPKELE CRM — Brand Light theme (white + brand green)
   Loaded LAST so it wins specificity. Layout untouched.
   Aligned with tpkele.com website design tokens.
   Palette:
     --bg       #f5f7f6   page background (soft wash)
     --panel    #ffffff   card / panel background
     --panel-2  #f9fbfa   elevated / sub-panel
     --hover    #eef4f0   hover surface
     --selected #eaf8ef   selected surface (green-soft)
     --border   #e7ece9   hairline borders
     --text     #111718   primary text (AAA on white)
     --muted    #5f6d68   secondary text (AA on white)
     --primary  #0b9b3f   brand green
     --primary-d#066128   deep green (hover/active)
     --accent   #14b85a   bright green accent
     --danger   #d92d20
   ========================================================= */

/* Unified font */
html,body,input,textarea,select,button,table,th,td,
h1,h2,h3,h4,h5,h6,p,span,div,label,a,li,small,strong,em,
.btn,.qa-btn,.nav-item,.modal,.dropdown,.card,.panel,
.topbar,.sidebar,.toast,.dialog{
  font-family:"Microsoft YaHei","微软雅黑",
              "Segoe UI","Helvetica Neue",
              -apple-system,BlinkMacSystemFont,
              "PingFang SC","Hiragino Sans GB",Arial,sans-serif !important;
  font-weight:400 !important;
}
h1,h2,h3,h4,h5,h6,strong,th,.btn-primary,.qa-btn.primary,
button.primary,.btn.primary{ font-weight:700 !important; }

:root{
  --bg:#f5f7f6 !important;
  --panel:#ffffff !important;
  --panel-2:#f9fbfa !important;
  --text:#111718 !important;
  --muted:#5f6d68 !important;
  --muted2:#41514b !important;
  --border:#e7ece9 !important;
  --primary:#0b9b3f !important;
  --cyan:#14b85a !important;
  --purple:#066128 !important;
  --danger:#d92d20 !important;
  --shadow:0 18px 45px rgba(13,34,28,.10) !important;
  --radius:10px !important;
}

html,body{
  background:#f5f7f6 !important;
  color:#111718 !important;
}

/* Decorative canvases off */
#circuit,#particles,.bg-canvas,.aurora,.stars{display:none !important;}

*{
  text-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}

/* Generic surfaces */
.card,.panel,.panel-2,.chart-card,.section,.tile,.box,.list,
.modal,.modal-content,.dialog,.dropdown,.dd,.dd-item,
.search-wrap,.search-dropdown,.sd-item,
.login-panel,.fp-panel,.brand-wrap,.content,.main,.aside{
  background:#ffffff !important;
  color:#111718 !important;
  border-color:#e7ece9 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Page wrapper */
.page,body>.app,body>.layout,body>.wrap{
  background:#f5f7f6 !important;
}

/* Sidebar — white with hairline, deeper than page wash */
.sidebar,aside.sidebar,nav.sidebar{
  background:#ffffff !important;
  color:#111718 !important;
  border-right:1px solid #e7ece9 !important;
}
.sidebar *,.nav-item,.nav-collapse-hd{color:#41514b !important;}
.nav-item:hover,.nav-collapse-hd:hover{
  background:#eef4f0 !important;color:#111718 !important;
}
.nav-item.active,.nav-item.selected,.nav-item.current{
  background:#eaf8ef !important;
  color:#066128 !important;
  font-weight:600 !important;
  box-shadow:inset 3px 0 0 #0b9b3f !important;
}

/* Topbar */
.topbar,header.topbar{
  background:#ffffff !important;
  border-bottom:1px solid #e7ece9 !important;
  color:#111718 !important;
}

/* Headings & text */
h1,h2,h3,h4,h5,h6,p,span,div,label,small,strong,em,li,td,th,a{
  text-shadow:none !important;
}
h1,h2,h3,h4,h5,h6{color:#111718 !important;}
.section-sub,.kpi-label,.muted{color:#5f6d68 !important;}

/* Inputs */
input,textarea,select{
  background:#ffffff !important;
  color:#111718 !important;
  border:1px solid #d8e0db !important;
  border-radius:8px !important;
  box-shadow:none !important;
}
input::placeholder,textarea::placeholder{color:#90a39a !important;}
input:focus,textarea:focus,select:focus{
  border-color:#0b9b3f !important;
  background:#ffffff !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(11,155,63,.14) !important;
}
.search-wrap input{background:#ffffff !important;}

/* ---------- Buttons: pill outline + brand-green hover ---------- */
button,.btn,.qa-btn,
input[type="button"],input[type="submit"],input[type="reset"]{
  background:transparent !important;
  color:#0b9b3f !important;
  border:1.5px solid #0b9b3f !important;
  border-radius:999px !important;
  padding:6px 16px !important;
  box-shadow:none !important;
  text-shadow:none !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:background-color .18s ease,
             color .18s ease,
             transform .08s ease,
             box-shadow .18s ease !important;
}
button:hover,.btn:hover,.qa-btn:hover,
input[type="button"]:hover,input[type="submit"]:hover{
  background:#eaf8ef !important;
  color:#066128 !important;
  border-color:#0b9b3f !important;
  box-shadow:0 2px 10px rgba(11,155,63,.16) !important;
}
button:active,.btn:active,.qa-btn:active,
input[type="button"]:active,input[type="submit"]:active{
  background:#d6f0e0 !important;
  transform:scale(.97) !important;
}

/* Primary button — solid brand green, white bold text */
.btn-primary,.qa-btn.primary,button.primary,.btn.primary{
  background:#0b9b3f !important;
  color:#ffffff !important;
  border:1.5px solid #0b9b3f !important;
  font-weight:700 !important;
}
.btn-primary:hover,.qa-btn.primary:hover,button.primary:hover,.btn.primary:hover{
  background:#066128 !important;
  border-color:#066128 !important;
  color:#ffffff !important;
  box-shadow:0 6px 18px rgba(11,155,63,.28) !important;
}

/* Danger */
.btn-danger,button.danger,.btn.danger{
  background:transparent !important;
  color:#d92d20 !important;
  border:1.5px solid #d92d20 !important;
}
.btn-danger:hover{background:#fef2f2 !important;color:#b91c1c !important;border-color:#d92d20 !important;}

/* Cyan / accent */
.btn-cyan{
  background:transparent !important;
  color:#066128 !important;
  border:1.5px solid #14b85a !important;
}

/* Borderless icon buttons */
.del-col,.icon-btn,.btn-icon{
  background:transparent !important;
  border:none !important;
  border-radius:6px !important;
  color:#5f6d68 !important;
  padding:2px !important;
}
.del-col:hover,.icon-btn:hover,.btn-icon:hover{
  background:#eef4f0 !important;
  color:#0b9b3f !important;
  transform:none !important;
}

/* Tables */
table{background:#ffffff !important;color:#111718 !important;}
th{
  background:#f4f7f5 !important;
  color:#5f6d68 !important;
  border-bottom:1px solid #e7ece9 !important;
  font-weight:600 !important;
}
td{border-bottom:1px solid #eef2f0 !important;color:#111718 !important;}
tr:hover td{background:#f7faf8 !important;}

/* Modals / dropdowns */
.modal,.modal-content,.dialog,.dropdown,.dd,.search-dropdown{
  background:#ffffff !important;
  color:#111718 !important;
  border:1px solid #e7ece9 !important;
  box-shadow:0 24px 60px rgba(13,34,28,.18) !important;
}
.dd-item:hover,.sd-item:hover{background:#eef4f0 !important;color:#066128 !important;}

/* Modal backdrop */
.modal-backdrop,.overlay,.backdrop{
  background:rgba(15,31,28,.42) !important;
  backdrop-filter:blur(2px) !important;
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#eef2f0 !important;}
::-webkit-scrollbar-thumb{background:#cdd8d2 !important;border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:#0b9b3f !important;}

/* Login fingerprint panel */
.brand-title,.sub-title{color:#111718 !important;letter-spacing:2px !important;}
.fp-outer,.fp-inner{
  border-color:#0b9b3f !important;
  background:#ffffff !important;
  box-shadow:0 0 30px rgba(11,155,63,.14) !important;
}
.fp-outer::before{border-color:#e7ece9 !important;border-top-color:#0b9b3f !important;}
.fp-scan{background:linear-gradient(90deg,transparent,#14b85a,transparent) !important;}
.fp-svg{filter:none !important;opacity:1 !important;}
.fp-svg [stroke]{stroke:#0b9b3f !important;}
.fp-svg [fill]:not([fill="none"]){fill:#0b9b3f !important;}

/* Login page brand watermark */
body:has(.brand-wrap) .brand-wrap{display:none !important;}
body:has(.brand-wrap)::before{
  content:"TPKELE";
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:"Microsoft YaHei","微软雅黑","Segoe UI",sans-serif;
  font-weight:900;
  font-size:clamp(120px,18vw,260px);
  letter-spacing:14px;
  color:#0b9b3f;
  opacity:.05;
  pointer-events:none;
  user-select:none;
  z-index:0;
  white-space:nowrap;
}
body:has(.brand-wrap) .page>.card,
body:has(.brand-wrap) .card{position:relative;z-index:1;}

/* Charts container */
canvas{background:transparent !important;}

/* Kill rogue inline gradients */
[style*="linear-gradient"]{background-image:none !important;}

/* Links */
a{color:#0b9b3f !important;}
a:hover{color:#066128 !important;}

/* =========================================================
   Sidebar nav icons → hollow circle with green dot
   ========================================================= */
.nav-icon{
  font-size:0 !important;
  line-height:0 !important;
  width:18px !important;
  height:18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  flex-shrink:0 !important;
}
.nav-icon::before{
  content:"" !important;
  width:14px;height:14px;
  border-radius:50%;
  border:1.5px solid #0b9b3f;
  background:transparent;
  display:block;
  box-sizing:border-box;
  transition:border-color .18s ease,background-color .18s ease;
}
.nav-icon::after{
  content:"" !important;
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:#0b9b3f;
  transition:transform .18s ease,background-color .18s ease;
}
.nav-item:hover .nav-icon::before{border-color:#066128;}
.nav-item:hover .nav-icon::after{transform:scale(1.15);background:#066128;}
.nav-item.active .nav-icon::before,
.nav-item.selected .nav-icon::before,
.nav-item.current .nav-icon::before{
  border-color:#0b9b3f;
  background:rgba(11,155,63,.14);
}
.nav-item.active .nav-icon::after,
.nav-item.selected .nav-icon::after,
.nav-item.current .nav-icon::after{
  background:#0b9b3f;
  transform:scale(1.25);
  box-shadow:0 0 8px rgba(11,155,63,.45);
}

/* =========================================================
   Live USD → CNY rate widget (dashboard)
   ========================================================= */
#sec-dashboard{position:relative !important;}
.fx-widget{
  position:absolute !important;
  top:18px !important;
  right:18px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:#ffffff !important;
  border:1px solid #e7ece9 !important;
  border-radius:999px !important;
  padding:8px 16px !important;
  font-size:13px !important;
  color:#111718 !important;
  box-shadow:0 2px 10px rgba(13,34,28,.08) !important;
  z-index:5 !important;
  user-select:none;
}
.fx-widget .fx-pair{font-weight:400;color:#5f6d68;font-size:14px;}
.fx-widget .fx-rate{font-weight:800;color:#0b9b3f;font-size:18px;letter-spacing:.5px;}
.fx-widget .fx-time{font-size:13px;color:#90a39a;margin-left:4px;}
.fx-widget .fx-arrow{color:#0b9b3f;font-size:15px;}
.fx-widget.loading .fx-rate{color:#90a39a;}
@media(max-width:680px){
  .fx-widget{position:static !important;margin:8px 0 12px !important;}
}

/* =========================================================
   Sidebar TPKELE CRM brand: hide hexagon icon, bold text
   ========================================================= */
.sb-logo .logo-icon{display:none !important;}
.sb-logo .logo-text{
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:3px !important;
  color:#111718 !important;
  text-transform:uppercase;
}
.sb-logo .logo-text span{color:#0b9b3f !important;}
.sb-logo{padding:20px 16px !important;}

/* =========================================================
   Sidebar collapse headers (文件 / 工具)
   ========================================================= */
.nav-collapse-hd{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.nav-collapse-hd::before{
  content:"" !important;
  width:14px;height:14px;
  flex-shrink:0;
  border-radius:50%;
  border:1.5px solid #0b9b3f;
  background:radial-gradient(#0b9b3f 0 3px,transparent 3px);
  box-sizing:border-box;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.nav-collapse-hd:hover::before{
  border-color:#066128;
  background:radial-gradient(#066128 0 3.5px,transparent 3.5px);
  transform:scale(1.1);
}
.nav-collapse-hd.open::before,
.nav-collapse-hd[data-open="true"]::before{
  border-color:#0b9b3f;
  background:radial-gradient(#0b9b3f 0 3.5px,rgba(11,155,63,.18) 3.5px);
  box-shadow:0 0 8px rgba(11,155,63,.35);
}
.nav-collapse-hd .nav-collapse-arrow{margin-left:auto !important;}

/* =========================================================
   Dashboard KPI value colors and avatar
   ========================================================= */
.kpi-value{ color:#111718 !important; }
.kpi-value.green { color:#0b9b3f !important; }
.kpi-value.cyan  { color:#14b85a !important; }
.kpi-value.purple{ color:#066128 !important; }

.user-avatar{
  background:#0b9b3f !important;
  background-image:none !important;
  border:1px solid #0b9b3f !important;
  color:#ffffff !important;
}
.user-btn{
  border-color:#e7ece9 !important;
  color:#111718 !important;
  background:#ffffff !important;
}
.user-btn:hover{border-color:#0b9b3f !important;background:#f7faf8 !important;}

.nav-collapse-hd,.sidebar-collapse,.btn-collapse{
  color:#5f6d68 !important;
}

/* =========================================================
   Status badges (generic)
   ========================================================= */
.badge,.tag,.status,.chip,.pill{
  background:#eaf8ef !important;
  color:#066128 !important;
  border:1px solid rgba(11,155,63,.30) !important;
  border-radius:999px !important;
  padding:2px 10px !important;
  font-size:11px !important;
}
.badge.warn,.tag.warn,.status.warning,.chip.warn{
  background:#fff7e6 !important;
  color:#b45309 !important;
  border-color:rgba(245,158,11,.40) !important;
}
.badge.danger,.tag.danger,.status.danger,.chip.danger,
.badge.error,.status.error{
  background:#fef2f2 !important;
  color:#b91c1c !important;
  border-color:rgba(217,45,32,.35) !important;
}

/* =========================================================
   Page-specific
   ========================================================= */

/* dashboard.html — AI assistant chat */
.ai-bubble,
.ai-msg-bot .ai-bubble,
.ai-msg-user .ai-bubble{
  background:#f4f7f5 !important;
  background-image:none !important;
  color:#111718 !important;
  border:1px solid #e7ece9 !important;
  border-radius:12px !important;
}
.ai-msg-user .ai-bubble{
  background:#0b9b3f !important;
  color:#ffffff !important;
  border-color:#0b9b3f !important;
}
.ai-bubble pre,.ai-bubble code{
  background:#f0f4f1 !important;
  color:#066128 !important;
  border:1px solid #e7ece9 !important;
}
.ai-msg-user .ai-bubble pre,.ai-msg-user .ai-bubble code{
  background:rgba(255,255,255,.16) !important;color:#ffffff !important;border-color:rgba(255,255,255,.3) !important;
}
.ai-avatar,.ai-msg-user .ai-avatar{
  background:#eaf8ef !important;
  background-image:none !important;
  color:#0b9b3f !important;
  border:1px solid #cfe9d9 !important;
}

/* dashboard.html — Quick Export floating panel */
.quick-export{
  background:#ffffff !important;
  border:1px solid #e7ece9 !important;
  box-shadow:0 16px 44px rgba(13,34,28,.16) !important;
  color:#111718 !important;
}
.qe-head{
  background:#f4f7f5 !important;
  color:#111718 !important;
  border-bottom:1px solid #e7ece9 !important;
}
.qe-head:hover{background:#eef4f0 !important;}
.qe-label{color:#5f6d68 !important;}
.qe-body select{
  background:#ffffff !important;color:#111718 !important;
  border:1px solid #d8e0db !important;border-radius:8px !important;
}
.qe-btns button{
  width:100% !important;
  background:transparent !important;color:#0b9b3f !important;
  border:1.5px solid #0b9b3f !important;
  border-radius:999px !important;
  text-align:center !important;
}
.qe-btns button:hover{
  background:#eaf8ef !important;color:#066128 !important;border-color:#0b9b3f !important;
}

/* email.html — folder list */
.folder-item{color:#41514b !important;border-left:3px solid transparent !important;}
.folder-item:hover{background:#eef4f0 !important;color:#111718 !important;}
.folder-item.active{
  background:#eaf8ef !important;
  color:#066128 !important;
  border-left-color:#0b9b3f !important;
  font-weight:600 !important;
}
.folder-item .badge{
  background:#0b9b3f !important;color:#ffffff !important;border:none !important;
}

/* email.html — email list items */
.email-item{border-bottom:1px solid #eef2f0 !important;}
.email-item:hover{background:#f7faf8 !important;}
.email-item.active{
  background:#eaf8ef !important;
  border-left:3px solid #0b9b3f !important;
  color:#066128 !important;
}
.email-item.selected{background:#eef4f0 !important;}
.email-item.unread .ei-subject{color:#111718 !important;font-weight:700 !important;}
.email-item.unread .ei-from{color:#066128 !important;}

/* Notification bell */
.icon-btn[title="Notifications"],
button[title="Notifications"]{
  background:transparent !important;
  border:none !important;
  border-radius:50% !important;
  color:#5f6d68 !important;
  width:36px !important;height:36px !important;
  padding:0 !important;
}
.icon-btn[title="Notifications"]:hover,
button[title="Notifications"]:hover{
  background:#eef4f0 !important;
  color:#0b9b3f !important;
}