:root{
  --bg1:#dfe9ff;
  --bg2:#f6f9ff;
  --sidebar1:#2f3f58;
  --sidebar2:#1f2f49;
  --sidebarText:#dbe6ff;
  --sidebarMuted:rgba(255,255,255,.65);
  --card:#ffffff;
  --stroke:#e8eef9;
  --shadow: 0 14px 30px rgba(25,45,85,.10);
  --shadow2: 0 10px 22px rgba(25,45,85,.10);
  --primary:#2f80ed;
  --teal:#19c7c7;
  --orange:#ff9a3c;
  --green:#23c177;
  --radius:18px;
  --radius2:14px;
  --text:#21324a;
  --muted:#7a8aa6;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
}
.app{
  width: 1400px;
  max-width: calc(100vw - 48px);
  margin: 26px auto;
  display:grid;
  grid-template-columns: 270px 1fr;
  gap: 18px;
}
.sidebar{
  background: linear-gradient(180deg,var(--sidebar1),var(--sidebar2));
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: var(--shadow2);
  position: relative;
  overflow:hidden;
  min-height: 880px;
}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 16px}
.avatar-circle{
  width:40px;height:40px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #5aa9ff, #2f80ed);
  display:grid;place-items:center;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.brand h1{font-size:18px;margin:0;color:#fff;line-height:1.1;font-weight:700}
.brand small{display:flex;align-items:center;gap:6px;color:var(--sidebarMuted);font-size:12px;margin-top:4px}
.caret{width:10px;height:10px;opacity:.9}
.nav{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:12px;
  color:var(--sidebarText);text-decoration:none;
  font-size:13px;font-weight:500;opacity:.95;
}
.nav-item .ico{width:18px;height:18px;opacity:.95;flex:0 0 auto}
.nav-item.active{background: rgba(255,255,255,.11);box-shadow: inset 0 1px 0 rgba(255,255,255,.14)}
.nav-item .drop{margin-left:auto;width:14px;height:14px;opacity:.75}

/* Ensure dropdown arrows for parent menu items match the size used elsewhere
   The previous design had an oversized arrow for the Product Manager section. This
   rule forces all dropdown arrows inside .nav-parent buttons to use the same
   dimensions and opacity as regular nav items. */
.nav-parent .drop{
  width:14px;
  height:14px;
  opacity:.75;
  flex:0 0 auto;
}
.sidebar-divider{height:1px;background: rgba(255,255,255,.10);margin: 16px 8px}
.system-logs{
  position:absolute;left:16px;right:16px;bottom:14px;
  display:flex;align-items:center;gap:10px;
  padding:12px 12px;border-radius:12px;
  background: rgba(0,0,0,.10);
  color:var(--sidebarText);font-size:13px;text-decoration:none;
}
.system-logs .ico{width:18px;height:18px;opacity:.9}
.system-logs .arrow{margin-left:auto;width:14px;height:14px;opacity:.8}
.main{padding:6px 6px 6px 0;min-height:880px}
.topbar{
  display:flex;align-items:center;gap:16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(232,238,249,.9);
  border-radius: 16px;height:56px;padding:0 14px;
  box-shadow: 0 10px 22px rgba(25,45,85,.08);
  backdrop-filter: blur(8px);
}
.search{
  flex:1;height:40px;border-radius:12px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(232,238,249,.9);
}
.top-icons{display:flex;align-items:center;gap:14px;padding-right:6px}
.icon-btn{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:transparent;border:none;cursor:pointer;
}
.icon-btn svg{width:20px;height:20px;stroke:#6d7fa0}
.user-pill{
  width:28px;height:28px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffd18f, #ff9a3c);
  display:grid;place-items:center;
  box-shadow: 0 10px 18px rgba(255,154,60,.22);
  margin-left:2px;
}
.stats{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:14px 16px;
  display:flex;align-items:center;gap:12px;
}
.stat .badge{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}
.badge.blue{background: rgba(47,128,237,.12)}
.badge.red{background: rgba(235,87,87,.12)}
.badge.orange{background: rgba(255,154,60,.14)}
.badge.green{background: rgba(35,193,119,.14)}
.stat .k{font-size:12px;color:var(--muted);margin:0;font-weight:600}
.stat .v{font-size:22px;margin:2px 0 0;font-weight:700;letter-spacing:.2px;line-height:1.1}
.content{margin-top:14px;display:grid;grid-template-columns:1.55fr .95fr;gap:14px;align-items:start}
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 8px}
.card-title{margin:0;font-size:14px;font-weight:700}
.dots{display:flex;gap:7px;align-items:center}
.dot{width:10px;height:10px;border-radius:50%}
.dot.blue{background:#7bb6ff}
.dot.gold{background:#ffd36c}
.dot.gray{background:#d6deef}
.tabs{
  display:inline-flex;background:#f3f6ff;
  border:1px solid rgba(232,238,249,.9);
  border-radius:12px;overflow:hidden;margin:0 16px 8px;
}
.tab{
  padding:8px 14px;font-size:12px;font-weight:600;color:#66799a;
  border-right:1px solid rgba(232,238,249,.9);
}
.tab:last-child{border-right:none}
.tab.active{background:var(--primary);color:#fff;position:relative}
.tab.active:after{
  content:"";position:absolute;left:16px;bottom:-7px;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid var(--primary);
}
.chart-wrap{padding:0 16px 14px}
.chart{
  width:100%;height:230px;border-radius:14px;background:#fbfdff;
  border:1px solid rgba(232,238,249,.9);overflow:hidden;display:block;
}
.offers{padding:10px 16px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.offer{
  border-radius:14px;border:1px solid rgba(232,238,249,.9);
  overflow:hidden;background:#fff;box-shadow: 0 10px 20px rgba(25,45,85,.06);
}
.offer .img{height:84px;position:relative;overflow:hidden}
.img.banner1{
  background: linear-gradient(135deg, rgba(12,76,176,.96), rgba(47,128,237,.65)),
              radial-gradient(circle at 80% 40%, rgba(255,255,255,.25), transparent 55%);
}
.img.banner2{
  background: linear-gradient(135deg, rgba(210,79,35,.96), rgba(255,154,60,.6)),
              radial-gradient(circle at 75% 35%, rgba(255,255,255,.22), transparent 55%);
}
.img.banner3{
  background: linear-gradient(135deg, rgba(10,115,140,.96), rgba(25,199,199,.55)),
              radial-gradient(circle at 75% 35%, rgba(255,255,255,.22), transparent 55%);
}
.offer .badgeText{
  position:absolute;left:10px;top:10px;color:#fff;font-weight:800;
  font-size:28px;line-height:1;letter-spacing:.5px;text-shadow:0 8px 18px rgba(0,0,0,.18);
}
.offer .subText{
  position:absolute;left:12px;bottom:10px;color:rgba(255,255,255,.95);
  font-size:12px;font-weight:700;background:rgba(0,0,0,.16);
  padding:4px 8px;border-radius:999px;
}
.offer .cap{padding:10px 10px;font-size:12px;font-weight:700;color:#2a3a55}
.pending{padding:10px 16px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini{
  border-radius:14px;border:1px solid rgba(232,238,249,.9);
  padding:12px 12px;box-shadow:0 10px 18px rgba(25,45,85,.06);
  min-height:104px;display:flex;flex-direction:column;gap:6px;
}
.mini.blue{background:#eaf2ff}
.mini.orange{background:#fff1df}
.mini.pink{background:#ffe9ee}
.mini .sq{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.7);
}
.mini .num{font-size:22px;font-weight:800;margin-top:2px}
.mini .lbl{font-size:11px;font-weight:700;color:#3c4f6c;line-height:1.1}
.orders{padding:6px 16px 14px}
.order-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(232,238,249,.9)}
.order-row:last-child{border-bottom:none}
.circ{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid rgba(232,238,249,.9);background:#f6f9ff;
}
.order-id{font-size:12px;font-weight:800;color:#2a3a55;min-width:64px}
.status{font-size:12px;font-weight:800}
.status.blue{color:var(--primary)}
.status.green{color:var(--green)}
.status.orange{color:var(--orange)}
.status.red{color:#eb5757}
.spacer{flex:1}
.tiny{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  border:1px solid rgba(232,238,249,.9);background:#fff;
}
.chev{width:16px;height:16px;opacity:.55}
.bottom-left{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:start}
.noti{padding:6px 16px 14px}
.noti-row{
  display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(232,238,249,.9);
  font-size:12px;font-weight:700;color:#2a3a55;
}
.noti-row:last-child{border-bottom:none}
.bell{
  width:28px;height:28px;border-radius:10px;display:grid;place-items:center;
  border:1px solid rgba(232,238,249,.9);background:#f6f9ff;flex:0 0 auto;
}
.noti-row .mut{font-weight:600;color:#6f83a5}
.pill{
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;margin-left:auto;
  border:1px solid rgba(232,238,249,.9);background:#fff;
}
.pill.red{color:#eb5757}
.pill.green{color:var(--green)}
.pill.yellow{color:#f2b705}
.list-mini{padding:10px 16px 14px;display:flex;flex-direction:column;gap:10px}
.list-mini .item{display:flex;align-items:center;gap:10px}
.list-mini .sq{width:28px;height:28px;border-radius:8px;border:1px solid rgba(232,238,249,.9);background:#f6f9ff}
.list-mini .lines{flex:1}
.line{height:6px;border-radius:999px;background:#e7eefc;margin:4px 0;width:90%}
.line.sm{width:70%}
.line.xs{width:55%}
.analytics{padding:10px 16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ana-card{
  border-radius:14px;border:1px solid rgba(232,238,249,.9);
  overflow:hidden;background:#fff;box-shadow:0 10px 18px rgba(25,45,85,.06);
}
.ana-tabs{display:flex;background:#f3f6ff;border-bottom:1px solid rgba(232,238,249,.9)}
.ana-tabs .t{
  flex:1;padding:10px 10px;text-align:center;font-size:12px;font-weight:800;color:#62779a;
  border-right:1px solid rgba(232,238,249,.9);background:#eef3ff;
}
.ana-tabs .t:last-child{border-right:none}
.ana-body{padding:10px 12px 12px}
.money{font-size:22px;font-weight:900;margin:4px 0 8px}
.mini-chart{
  width:100%;height:70px;background: linear-gradient(180deg, rgba(35,193,119,.22), rgba(35,193,119,0));
  border-radius:12px;border:1px solid rgba(232,238,249,.9);position:relative;overflow:hidden;
}
.mini-chart svg{position:absolute;inset:0}
.brands{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.brand-badge{font-weight:900;letter-spacing:.3px;color:#d13a3a;font-size:20px;line-height:1}
.brand-badge.sm{font-size:16px;color:#c73333}
.lev{display:inline-block;background:#e53935;color:#fff;padding:6px 10px;border-radius:8px;font-weight:900;width:fit-content;font-size:14px}
@media (max-width:900px){
  .app{grid-template-columns:250px 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .content{grid-template-columns:1fr}
  .bottom-left{grid-template-columns:1fr}
  .pending{grid-template-columns:repeat(3,1fr)}
  .analytics{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  /* On very small screens we still want the sidebar and content side‑by‑side
     rather than stacking. Adjust the grid to two columns with a narrow
     sidebar and allow horizontal scrolling if necessary. */
  .app{grid-template-columns:220px 1fr;max-width:calc(100vw - 24px)}
  .sidebar{min-height:auto}
  .stats{grid-template-columns:1fr}
  .offers{grid-template-columns:1fr}
  .pending{grid-template-columns:1fr}
  .analytics{grid-template-columns:1fr}
  .topbar{gap:10px}
}

/* --- Product Manager UI --- */
.page-title{font-size:16px;font-weight:800;margin:0}
.subtle{color:var(--muted);font-size:12px;font-weight:600}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(232,238,249,.9)}
.btn{
  height:36px;padding:0 12px;border-radius:10px;
  border:1px solid rgba(232,238,249,.9);
  background:#fff;cursor:pointer;
  font-weight:700;font-size:12px;color:#2a3a55;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow: 0 10px 18px rgba(25,45,85,.06);
}
.btn.primary{background:var(--primary);border-color:rgba(47,128,237,.35);color:#fff}
.btn.danger{background:#eb5757;border-color:rgba(235,87,87,.35);color:#fff}
.btn.soft{background:#f3f6ff}
.btn:active{transform: translateY(1px)}
.form{
  padding:14px 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:12px;font-weight:800;color:#2a3a55}
.input,.select,.textarea{
  height:38px;border-radius:12px;
  border:1px solid rgba(232,238,249,.95);
  background:#fbfdff;
  padding:0 12px;
  font-size:13px;font-weight:500;color:#2a3a55;
  outline:none;
}
.textarea{height:auto;min-height:78px;padding:10px 12px;grid-column:1 / -1;resize:vertical}
.form .actions{grid-column:1 / -1;display:flex;gap:10px;justify-content:flex-end}
.hr{height:1px;background:rgba(232,238,249,.95);margin:0}
.table-wrap{padding:10px 16px 14px}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{
  text-align:left;font-size:11px;letter-spacing:.2px;
  color:#6f83a5;font-weight:900;padding:0 10px;
}
.row{
  background:#fff;border:1px solid rgba(232,238,249,.9);
  box-shadow: 0 10px 18px rgba(25,45,85,.06);
}
.table td{
  padding:10px 10px;font-size:12px;font-weight:700;color:#2a3a55;
  border-top:1px solid rgba(232,238,249,.9);
  border-bottom:1px solid rgba(232,238,249,.9);
}
.table tr.row td:first-child{border-left:1px solid rgba(232,238,249,.9);border-radius:12px 0 0 12px}
.table tr.row td:last-child{border-right:1px solid rgba(232,238,249,.9);border-radius:0 12px 12px 0}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 8px;border-radius:999px;
  border:1px solid rgba(232,238,249,.9);
  background:#f6f9ff;
  font-size:11px;font-weight:900;color:#62779a;
}
.tag.green{background:#eaf8f1;color:#1f8c56;border-color:rgba(35,193,119,.25)}
.tag.gray{background:#f3f6ff;color:#66799a}
.tag.orange{background:#fff1df;color:#b46319;border-color:rgba(255,154,60,.25)}
.flash{
  margin:12px 16px 0;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(232,238,249,.95);
  background:#fbfdff;
  font-size:12px;font-weight:800;color:#2a3a55;
}
.flash.ok{background:#eaf8f1;border-color:rgba(35,193,119,.25);color:#1f8c56}
.flash.err{background:#ffe9ee;border-color:rgba(235,87,87,.25);color:#b02b2b}

/* --- Main panel white --- */
.main{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(232,238,249,.9);
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(25,45,85,.10);
  padding: 14px;
}
.topbar{background:#fff;border:1px solid rgba(232,238,249,.9);box-shadow:0 10px 22px rgba(25,45,85,.08)}
.search{background:#f6f9ff}

/* --- Standard form UI (inputs) --- */
.input,.select,.textarea{
  background:#ffffff;
  border:1px solid rgba(214,222,239,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.input:focus,.select:focus,.textarea:focus{
  border-color: rgba(47,128,237,.45);
  box-shadow: 0 0 0 4px rgba(47,128,237,.12);
}
.field .hint{font-size:11px;color:#6f83a5;font-weight:600}

/* --- Sidebar dropdown --- */
.nav-group{border-radius:12px;overflow:hidden}
.nav-parent{
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:12px;
  color:var(--sidebarText);
  font-size:13px;font-weight:500;
  background: transparent;border:0;cursor:pointer;
}
.nav-parent:hover{background:rgba(255,255,255,.08)}
.nav-children{display:none;padding:6px 6px 8px 38px}
.nav-group.open .nav-children{display:block}
.nav-child{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;
  color:var(--sidebarText);text-decoration:none;
  font-size:12px;font-weight:600;opacity:.92;
}
.nav-child:hover{background:rgba(255,255,255,.08)}
.nav-child.active{background:rgba(255,255,255,.11)}
.bullet{width:8px;height:8px;border-radius:50%;background: rgba(255,255,255,.55)}
.rotate{transition:transform .2s ease}
.nav-group.open .rotate{transform:rotate(180deg)}

.nav-parent .ico{width:18px;height:18px;opacity:.95;flex:0 0 auto}


/* =========================================================
   Responsive layout: sticky sidebar + mobile drawer toggle
   ========================================================= */
:root{
  --sidebarW: 270px;
  --sidebarCollapsedW: 86px;
  --appPad: 26px;
  --appGap: 18px;
}

/* Make the layout fluid */
.app{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--appPad);
  display: block;
}

/* Sticky sidebar */
.sidebar{
  position: fixed;
  top: 0;
  left: var(--appPad);
  width: var(--sidebarW);
  height: 100vh;
  min-height: auto;
  overflow-y: auto;
  z-index: 50;
  padding: 0 16px;
  padding-bottom: 0;
}

/* Content shifts to the right of the sidebar */
.main{
  margin-left: calc(var(--sidebarW) + var(--appGap));
  min-height: 100vh;
}

/* Overlay for mobile drawer */
.sidebar-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 40;
  display: none;
}

/* Close button (only used on mobile) */
.sidebar-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
  display: none;
  place-items: center;
  cursor: pointer;
}
.sidebar-close svg{width:18px;height:18px}

/* Desktop collapse (icon-only sidebar) */
body.sidebar-collapsed .sidebar{
  width: var(--sidebarCollapsedW);
  padding-left: 10px;
  padding-right: 10px;
}
body.sidebar-collapsed .main{
  margin-left: calc(var(--sidebarCollapsedW) + var(--appGap));
}
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .sidebar .sidebar-divider,
body.sidebar-collapsed .system-logs{
  display: none !important;
}
body.sidebar-collapsed .brand{justify-content:center}
body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .nav-parent{
  justify-content: center;
}
body.sidebar-collapsed .nav-item .drop,
body.sidebar-collapsed .nav-parent .drop{
  display:none !important;
}
body.sidebar-collapsed .nav-children{
  display:none !important;
}

/* Make forms stack on small screens */
@media (max-width: 720px){
  .form{grid-template-columns: 1fr;}
}

/* Mobile: off-canvas sidebar */
@media (max-width: 900px){
  :root{ --appPad: 14px; }

  .sidebar{
    top: 0;
    left: 0;
    height: 100vh;
    border-radius: 0;
    transform: translateX(-105%);
    transition: transform .25s ease;
  }
  .main{
    margin-left: 0;
    min-height: auto;
  }
  body.sidebar-open .sidebar{
    transform: translateX(0);
  }
  body.sidebar-open .sidebar-overlay{
    display: block;
  }
  .sidebar-close{
    display: grid;
  }
}

/* Ensure the sidebar toggle button is visible and aligned */
.sidebar-toggle{
  display: grid;
}

/* =========================================================
   Tables: no horizontal slide (desktop & mobile)
   ========================================================= */

/* Allow children to shrink instead of pushing the layout wider */
.main,
.card,
.toolbar,
.toolbar > div,
.toolbar form{
  min-width: 0;
}

/* Desktop: never force horizontal scrolling */
.table-wrap{ overflow: visible; }
.table{ width: 100%; min-width: 0; table-layout: auto; }
.table th,
.table td{
  white-space: normal;
  word-break: break-word;
}

/* Mobile: convert tables into stacked cards so everything is visible (no slide) */
@media (max-width: 900px){
  .table{ border: 0; }
  .table thead{ display: none; }
  .table,
  .table tbody,
  .table tr,
  .table td{ display: block; width: 100%; }

  .table tr{
    margin: 10px 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
  }
  .table td{
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .table td:last-child{ border-bottom: 0; }
  .table td::before{
    content: attr(data-label);
    font-weight: 600;
    opacity: .85;
    padding-right: 10px;
    flex: 0 0 auto;
  }
  .table td > *{ max-width: 70%; }
}

/* Toolbar (filters + buttons) should wrap nicely on mobile */
@media (max-width: 900px){
  .toolbar{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  /* Make the right-side actions stack */
  .toolbar > div:last-child{
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .toolbar form{
    width: 100%;
    flex-wrap: wrap;
  }

  /* Override inline widths used in some pages */
  .toolbar form .input,
  .toolbar form .select{
    width: 100% !important;
  }

  .toolbar form button,
  .toolbar a.btn{
    width: 100%;
    justify-content: center;
  }
}