/* TradeFlow taste pass
   Preserve the existing information architecture and brand while making the
   daily workspace calmer, denser and more consistent. */

:root{
  --bg:#f3f6f5;
  --paper:#fcfdfc;
  --sidebar:#f7f9f7;
  --ink:#17201f;
  --muted:#697472;
  --line:#dfe5e2;
  --teal:#109b91;
  --teal-dark:#0a716a;
  --mint:#eaf7f3;
  --navy:#111827;
  --shadow:0 1px 2px rgba(18,31,29,.035),0 12px 30px -28px rgba(18,31,29,.42);
  --radius:12px;
  --tf-control-radius:10px;
  --tf-soft:#f5f8f6;
  --tf-soft-strong:#edf3f0;
  --tf-focus:0 0 0 3px rgba(16,155,145,.15);
}

html{background:var(--bg);scrollbar-color:#b8c1bd transparent}
body,#app{
  color:var(--ink);
  background:var(--bg);
  font-family:"Segoe UI Variable","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#cdebe4;color:#12332f}
button,input,select,textarea{font:inherit}
button{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease}
button:active:not(:disabled){transform:scale(.985)}
button:disabled{cursor:not-allowed;opacity:.55}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(10,113,106,.52);
  outline-offset:2px;
}
input::placeholder,textarea::placeholder{color:#87918e;opacity:1}

.app-shell{min-height:100dvh;background:var(--bg)}
.sidebar{
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:var(--sidebar);
  box-shadow:none;
}
.brand{height:70px;margin-bottom:14px;padding:0 12px 14px;border-bottom-color:var(--line)}
.brand-title{font-size:21px;letter-spacing:-.04em}
.brand-sub{color:#8a5b33;letter-spacing:.13em}
.brand-version{color:#7d8683}
.menu-section{margin:21px 10px 7px;color:#8a9491;font-size:11px;font-weight:650;letter-spacing:.04em}
.menu-item{
  height:40px;
  border:1px solid transparent!important;
  border-radius:9px;
  color:#414a48;
  font-size:13px;
  box-shadow:none!important;
}
.menu-item:hover{background:#f0f4f2;color:#1f2b29}
.menu-item.active{
  border-color:#d5e7e1!important;
  background:#eaf5f1!important;
  color:#0b6f67!important;
  font-weight:700;
  box-shadow:none!important;
}
.menu-item.active:before{
  content:"";
  position:absolute;
  left:4px;
  width:3px;
  height:18px;
  border-radius:3px;
  background:var(--teal-dark);
}
.menu-item .mi-icon{color:currentColor}
.submenu{border-left-color:#dbe2df}
.submenu .menu-item{height:37px;color:#626d6a}
.sidebar-account{
  height:58px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(252,253,252,.96);
  box-shadow:0 8px 28px -24px rgba(17,24,39,.55);
}
.avatar{border-radius:10px;background:#17211f}
.account-name{font-weight:720}
.account-role{color:#78827f}

.topbar{
  height:64px;
  border-bottom-color:var(--line);
  background:rgba(248,250,248,.94);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
}
.module-icon{
  border-color:#d5e8e2;
  border-radius:10px;
  background:#edf7f4;
  color:#0c7e75;
}
.breadcrumb{color:#8a9491}
.breadcrumb strong{color:#202826;font-weight:720}
.top-pill{
  border-color:var(--line);
  border-radius:10px;
  background:#fcfdfc;
  box-shadow:none;
}
.top-pill:hover,.icon-btn:hover{border-color:#d5dfdb;background:#f1f5f3}
.currency{color:#596360;font-variant-numeric:tabular-nums}

.page{width:100%;max-width:1660px;margin:0 auto;padding:0 clamp(18px,2.2vw,34px) 38px}
.page-heading{min-height:96px;height:auto;padding:18px 0;gap:24px}
.page-heading h1{margin:0 0 5px;color:#17201f;font-size:26px;font-weight:760;line-height:1.2;letter-spacing:-.035em}
.page-heading p{max-width:68ch;color:#737d7a;font-size:12px;line-height:1.55}
.page-heading .heading-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

.panel,.table-card,.toolbar,.stat-box,.product-card,.empty-state{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.panel{border-radius:var(--radius);background:#fcfdfc}
.btn{
  height:38px;
  padding:0 13px;
  border-color:#dbe2df;
  border-radius:var(--tf-control-radius);
  background:#fcfdfc;
  color:#25302e;
  font-size:13px;
  font-weight:680;
  box-shadow:none;
  white-space:nowrap;
}
.btn:hover{border-color:#cbd7d2;background:#f4f7f5;box-shadow:none;transform:none}
.btn.primary{border-color:var(--navy);background:var(--navy);color:#f8faf9}
.btn.primary:hover{border-color:#223047;background:#223047;color:#fff}
.btn.teal{border-color:var(--teal-dark);background:var(--teal-dark);color:#f7fffd}
.btn.teal:hover{border-color:#095f59;background:#095f59;color:#fff}
.btn.small{height:32px;padding:0 10px}
.icon-btn{border-radius:9px}

.select,.search,.model-select,
.form-field input,.form-field select,.form-field textarea{
  border-color:#d8e0dc;
  border-radius:var(--tf-control-radius);
  background:#fcfdfc;
  color:#26302e;
  box-shadow:none;
}
.select:hover,.search:hover,.model-select:hover,
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:#c5d1cc}
.select:focus,.search:focus,.model-select:focus,
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--teal);
  box-shadow:var(--tf-focus);
}
.form-field label{color:#56615e;font-weight:620}

.stats-strip{
  display:grid;
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--line);
  box-shadow:none;
}
.stat-box{
  min-width:0;
  border:0;
  border-radius:0;
  background:#fcfdfc;
  box-shadow:none;
}
.stat-box span{color:#717b78;font-weight:570}
.stat-box strong{color:#17201f;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.stat-box .tiny-icon{color:#2c9289}

.toolbar{
  padding:12px 14px;
  border-radius:12px 12px 0 0;
  background:#fcfdfc;
  box-shadow:none;
}
.table-card{border-radius:0 0 12px 12px;background:#fcfdfc;box-shadow:none}
.data-table{color:#2d3734;font-size:12px;font-variant-numeric:tabular-nums}
.data-table th{
  padding:12px 14px;
  border-bottom-color:var(--line);
  background:#f5f8f6;
  color:#65706d;
  font-size:11px;
  font-weight:720;
}
.data-table td{padding:14px;border-bottom-color:#e8ecea;color:#313b38}
.data-table tbody tr:hover{background:#f8faf9}
.data-table th:last-child{background:#f5f8f6}
.data-table td:last-child:not([colspan]){background:#fcfdfc}
.data-table tbody tr:hover td:last-child:not([colspan]){background:#f8faf9}
.table-actions{gap:5px}
.table-actions button{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  color:#527a75;
}
.table-actions button:hover{border-color:#d5e5e0;background:#edf7f4;color:#0b7169}
.pagination{height:52px;border-top-color:var(--line);background:#fafcfa}
.page-num{border-color:#d9e1dd;border-radius:8px}
.page-num.active{border-color:var(--navy);background:var(--navy)}

.dashboard-compact{gap:14px}
.dashboard-greeting{
  min-height:68px;
  gap:0;
  padding:8px 2px 13px;
  border-bottom-color:var(--line);
}
.dashboard-reminder-symbol,.dashboard-greeting>i{display:none}
.dashboard-greeting small{color:#7b8582;font-size:11px;font-weight:620}
.dashboard-greeting h1{
  margin-top:2px;
  color:#1c2523;
  font-family:inherit;
  font-size:23px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.035em;
}
.dashboard-greeting h1 em{color:var(--teal-dark);font-style:normal}
.dashboard-compact>.dashboard-toolbar{
  min-height:60px;
  padding:10px 12px;
  border-color:var(--line);
  border-radius:12px;
  background:#fcfdfc;
  box-shadow:none;
}
.dashboard-title>span{display:none}
.dashboard-title h1{color:#1b2422!important;font-size:18px!important;letter-spacing:-.025em}
.dashboard-toolbar-controls .periods{
  padding:3px;
  border:0!important;
  border-radius:9px!important;
  background:#f0f4f2!important;
}
.dashboard-toolbar-controls .period{height:34px!important;border-radius:7px!important;color:#68726f}
.dashboard-toolbar-controls .period.active{
  border-color:#d9e1dd;
  background:#fcfdfc;
  color:#17201f;
  box-shadow:0 1px 3px rgba(24,35,32,.08);
}
.dashboard-stage{gap:14px}
.dashboard-cockpit{padding:18px}
.cockpit-head{gap:9px}
.cockpit-meta{flex:1 1 180px}
.health-chip,.date-chip{flex:0 0 auto;border-radius:7px;white-space:nowrap}
.health-chip{border-color:#eadfae;background:#fffbea;color:#8d6719}
.date-chip{border-color:#dfe5e2;background:#f8faf9;color:#66716e}
.dashboard-cockpit .cockpit-title{margin:16px 0 3px;font-size:21px;letter-spacing:-.025em}
.dashboard-cockpit .cockpit-sub{color:#77817e}
.dashboard-primary-metrics,.dashboard-secondary-metrics{
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--line);
}
.dashboard-primary-metrics{padding-top:0!important;margin-top:16px}
.dashboard-primary-metrics .metric,.dashboard-secondary-metrics .metric{
  min-height:132px;
  padding:15px 13px;
  border:0;
  border-radius:0;
  background:#fcfdfc;
  box-shadow:none;
}
.dashboard-primary-metrics .metric:hover,.dashboard-secondary-metrics .metric:hover{
  border:0;
  background:#f8fbf9;
  box-shadow:none;
  transform:none;
}
.dashboard-primary-metrics .metric-value,.dashboard-secondary-metrics .metric-value{
  margin:10px 0 12px;
  font-size:25px;
}
.metric-icon{
  border:0;
  border-radius:9px;
  background:#eaf7f3;
  color:#128b81;
}
.metric-icon.warn{border:0;background:#fff7de;color:#9b6b16}
.dashboard-target-panel{padding:19px;border-color:var(--line);box-shadow:none}
.dashboard-target-panel .rhythm-icon{right:17px;top:17px;border:0;background:#eaf7f3}
.dashboard-target-panel .rhythm-value{font-size:34px}
.dashboard-target-panel .rhythm-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 14px}
.business-health-panel{padding:18px;box-shadow:none}
.business-health-details{gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--line)}
.business-health-details article{border:0;border-radius:0;background:#fcfdfc}

.product-segment-summary{
  gap:0;
  margin:-2px 0 14px;
  border-bottom:1px solid var(--line);
}
.product-segment-summary span{
  padding:8px 14px 9px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#6b7673;
}
.product-segment-summary span+span{padding-left:14px;border-left:1px solid var(--line)}
.product-catalog-toolbar,.product-category-rail,.product-catalog-content .product-card{border-color:var(--line);box-shadow:none}
.product-category-rail{border-radius:12px}
.product-category-list{gap:2px!important;padding:8px!important}
.product-category-row{min-height:48px!important;border-radius:8px!important;background:transparent!important}
.product-category-row:hover{background:#f2f6f4!important}
.product-category-row.active{border-color:#cfe5de!important;background:#eaf6f2!important;box-shadow:none!important}
.product-catalog-content .cards-grid{gap:12px!important}
.product-catalog-content .product-card{border-radius:12px;box-shadow:none!important}
.product-catalog-content .product-card:hover{border-color:#bfdcd4;box-shadow:0 12px 28px -25px rgba(17,70,64,.55)!important;transform:none!important}
.product-catalog-content .product-media-trigger{background:#f3f6f4!important}
.product-catalog-content .product-media-trigger img{border-radius:8px!important;box-shadow:inset 0 0 0 1px rgba(23,32,31,.06)!important}

.expense-cycle-banner{border-color:#cfe5de;background:#eef8f5}
.expense-cycle-banner>span{background:#d9f0e9;color:#0a716a}
.expense-stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:1px}
.expense-stats .stat-box{min-height:84px;padding:15px}

.drawer-mask,.detail-overlay,.assistant-overlay{background:rgba(17,24,39,.34);backdrop-filter:blur(2px)}
.form-drawer{background:#f8faf8;box-shadow:-22px 0 60px -34px rgba(17,24,39,.5)}
.drawer-header,.drawer-footer{border-color:var(--line);background:#fcfdfc}
.detail-dialog,.assistant-drawer,.product-category-dialog{border-color:var(--line);border-radius:16px;box-shadow:0 28px 80px -35px rgba(17,24,39,.58)}
.toast{border-radius:10px;background:#17211f;box-shadow:0 16px 44px -22px rgba(17,24,39,.65)}

.ai-fab{
  right:20px!important;
  bottom:20px!important;
  width:50px!important;
  height:50px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px!important;
  background:#111827;
  box-shadow:0 14px 34px -18px rgba(17,24,39,.8);
}
.ai-fab:after{display:none}
.ai-fab .fab-label{display:none}
.ai-fab .fab-monogram{font-size:13px;letter-spacing:.04em}

@media(min-width:1024px){
  .dashboard-stage{grid-template-columns:minmax(0,1.72fr) minmax(270px,.82fr)}
}

@media(max-width:1180px){
  .sidebar{border-right:1px solid var(--line);box-shadow:18px 0 45px -30px rgba(17,24,39,.48)}
  .page{padding-inline:22px}
}

@media(max-width:900px){
  .page{padding-inline:18px}
  .page-heading{min-height:86px;padding:16px 0}
  .page-heading .heading-actions{justify-content:flex-start}
  .expense-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
  .page{padding-inline:14px;padding-bottom:28px}
  .page-heading{display:block;min-height:0;padding:18px 0}
  .page-heading h1{font-size:23px}
  .page-heading .heading-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:13px}
  .page-heading .heading-actions .btn{width:100%;min-width:0;padding:0 9px}
  .stats-strip{gap:8px;overflow:visible;border:0;background:transparent}
  .stat-box{border:1px solid var(--line);border-radius:10px}
  .toolbar{gap:8px;padding:11px}
  .dashboard-greeting{min-height:58px}
  .dashboard-greeting h1{font-size:20px}
  .dashboard-primary-metrics,.dashboard-secondary-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
  .dashboard-primary-metrics .metric,.dashboard-secondary-metrics .metric{border:0;border-radius:0}
  .expense-stats{grid-template-columns:1fr 1fr}
  .product-segment-summary span{flex:1;padding:8px 7px;text-align:center}
  .product-segment-summary span+span{padding-left:7px}
}

@media(max-width:430px){
  .page-heading .heading-actions{grid-template-columns:1fr}
  .dashboard-primary-metrics,.dashboard-secondary-metrics{grid-template-columns:1fr}
  .expense-stats{grid-template-columns:1fr}
  .ai-fab{right:14px!important;bottom:14px!important;width:46px!important;height:46px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}