/**************************************************************
 FS Affiliates – Dashboard stylesheet (full)
 - Background from #ddd -> #55535324
 - Remove solid background on .fs_affiliates_menu
 - Dark UI panels, consistent tables & badges
 - Mobile responsive: tabs become horizontal scroll,
   tables wrapped in .fs-scroll do horizontal scroll,
   charts/cards stack nicely, MLM area is scrollable.
**************************************************************/

/* ==== Color system (can be tuned) ==== */
:root{
  --dash-bg:    #55535324;          /* requested translucent bg */
  --panel:      #0f1115;            /* dark card bg */
  --panel-2:    #0e141c;            /* row alt */
  --border:     #2a2d33;
  --muted:      #9aa2ad;
  --text:       #e5e7eb;
  --text-soft:  #cbd5e1;
  --brand:      #cd1719;            /* accent red */
  --ok:         #16a34a;            /* green */
  --warn:       #f59e0b;            /* amber */
  --err:        #dc2626;            /* red */
}

/* ==== Dashboard shell ==== */
.fs_affiliates_frontend_dashboard{
  background: var(--dash-bg) !important;
  border: 2px solid #1e2519;
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* remove any forced menu background */
.fs_affiliates_frontend_dashboard .fs_affiliates_menu{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* content area spacing (safe defaults) */
.fs_affiliates_frontend_dashboard .fs_affiliates_menu_content{
  padding: 8px 0 16px;
}

/* ==== Menu / Tabs ==== */
.fs_affiliates_frontend_dashboard .fs_affiliates_menu_ul{
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
}
.fs_affiliates_frontend_dashboard .fs_affiliates_menu_ul > li{
  display: inline-block;
  margin: 0 8px 8px 0;
}
.fs_affiliates_frontend_dashboard .fs_affiliates_menu_ul > li > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.fs_affiliates_frontend_dashboard .fs_affiliates_menu_ul > li > a:hover{
  border-color: #3b82f6;
}
.fs_affiliates_frontend_dashboard .fs_affiliates_menu_ul > li > a.current{
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: var(--brand);
  color: #fff;
}
.fs_affiliates_frontend_dashboard .fs_affiliates_menu_ul .submenu{
  margin-top: 6px;
  padding-left: 0;
}
.fs_affiliates_frontend_dashboard .fs_affiliates_menu_ul .submenu li{
  display: inline-block;
  margin: 0 6px 6px 0;
}
.fs_affiliates_frontend_dashboard .fs_affiliates_menu_ul .submenu a{
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px dashed var(--border);
  color: var(--text-soft);
}

/* ==== Cards (dark) ==== */
.fs-card-dark{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.fs-card-dark h3{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}

/* KPI tiles if present */
.fs-kpi{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.fs-kpi .muted{ color: var(--muted); }

/* Grids (fallbacks if theme doesn't set them) */
.fs-grid{ display: grid; gap: 14px; }
.fs-kpi-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fs-chart-grid{ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ==== Tables ==== */
.fs-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.fs-table thead th{
  background: #151a24;
  color: var(--text);
  font-weight: 700;
  text-align: center;
  padding: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.fs-table tbody td{
  padding: 10px;
  border-top: 1px solid var(--border);
  color: var(--text);
}
.fs-table tbody tr:nth-child(2n){
  background: var(--panel-2);
}
.fs-table .text-right{ text-align: right; }

/* Small scroll wrapper for wide tables */
.fs-scroll{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.fs-scroll .fs-table{
  min-width: 640px; /* allow horizontal scroll on mobiles if too many cols */
}

/* ==== Badges (status) ==== */
.fs-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px}
.fs-badge.ok{background:var(--ok);color:#fff}
.fs-badge.warn{background:var(--warn);color:#111}
.fs-badge.err{background:var(--err);color:#fff}

/* ==== Forms (filters) quick polish ==== */
.fs_affiliates_frontend_dashboard form .fs_affiliates_form_save,
.fs_affiliates_frontend_dashboard button,
.fs_affiliates_frontend_dashboard .affdl-btn,
.fs_affiliates_frontend_dashboard .affdev-btn{
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  line-height: 1;
}
.fs_affiliates_frontend_dashboard button:hover,
.fs_affiliates_frontend_dashboard .affdl-btn:hover,
.fs_affiliates_frontend_dashboard .affdev-btn:hover{
  filter: brightness(.92);
}

/* ==== Downloads / Devices tables basic unify ==== */
.affdl-wrap, .affdev-wrap{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.affdl-list table, .affdev-table{
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.affdl-list th, .affdev-table th{
  background: #151a24; text-align: left; padding: 10px; font-weight: 700; color: var(--text);
}
.affdl-list td, .affdev-table td{
  padding: 10px; border-top: 1px solid var(--border);
}

/* ==== MLM area – keep it inside the screen ==== */
.mlm-tree-wrap, .fs-mlm-wrap, .fs-mlm, .mlm-tree{
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.mlm-tree-wrap svg, .mlm-tree-wrap canvas,
.fs-mlm-wrap svg, .fs-mlm-wrap canvas{
  max-width: 100% !important; height: auto !important;
}

/* ==== Misc small utilities ==== */
.fs-muted{ color: var(--muted); }
.fs-note{ font-size: 12px; color: var(--muted); }

/* =========================================================
   RESPONSIVE
========================================================= */

/* Tablet & below */
@media (max-width: 991px){
  /* Tabs become horizontal scroll */
  .fs_affiliates_frontend_dashboard .fs_affiliates_menu .fs_affiliates_menu_ul{
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
    -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .fs_affiliates_frontend_dashboard .fs_affiliates_menu .fs_affiliates_menu_ul > li{
    display: inline-block; margin: 0;
  }
  .fs_affiliates_frontend_dashboard .fs_affiliates_menu .fs_affiliates_menu_ul > li > a{
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
  }

  /* Stack grids */
  .fs-kpi-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
  .fs-chart-grid{ grid-template-columns: 1fr; }

  /* Wider min-width for sales/team tables, but still scrollable */
  .fs-scroll .fs-table{ min-width: 520px; }
}

/* Phones */
@media (max-width: 640px){
  .fs_affiliates_frontend_dashboard{ padding: 12px; }
  .fs-card-dark{ padding: 12px; }
  .fs-scroll .fs-table{ min-width: 460px; }

  /* Make table cells a bit denser */
  .fs-table thead th, .fs-table tbody td{ padding: 8px; }
}

/* Very small phones */
@media (max-width: 420px){
  .fs-scroll .fs-table{ min-width: 400px; }
  .fs_affiliates_frontend_dashboard .fs_affiliates_menu .fs_affiliates_menu_ul > li > a{
    padding: 6px 10px; font-size: 13px;
  }
}

/* =========================================================
   OPTIONAL: fine-tune Chart.js canvas background to match
========================================================= */
.fs-card-dark canvas{
  background: transparent;
}

/* End of file */