/* construction-supplies/css/my-rfqs.css */

/* Blend into your shell layout */
.mr-page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

/* Sticky header that looks like your app */
.mr-top{
  display:flex;
  align-items:center;
  gap:12px;
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 12px 0;
  background: rgba(244,247,251,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(2,6,23,.08);
}

.mr-back{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius: 14px;
  text-decoration:none;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  color:#0b1220;
  font-weight:900;
}

.mr-title h1{ margin:0; font-size: 20px; font-weight: 950; letter-spacing:-.2px; }
.mr-sub{ margin:3px 0 0; font-size: 13px; color: rgba(11,18,32,.62); font-weight: 650; }

.mr-top-actions{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
}

.mr-primary, .mr-ghost{
  border-radius: 16px;
  padding: 10px 14px;
  font-weight: 950;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
}

.mr-ghost{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(2,6,23,.10);
  color:#0b1220;
}

.mr-primary{
  border: none;
  color:#fff;
  background: linear-gradient(135deg,#0078d7,#00b050);
}

.mr-badge{
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.22);
  color:#fff;
  font-size: 12px;
  font-weight: 950;
}

/* Tabs: match your soft pill style */
.mr-tabs{
  display:flex;
  gap:10px;
  padding: 14px 0 8px;
  overflow:auto;
}

.mr-tab{
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.95);
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 950;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  white-space: nowrap;
}

.mr-tab.active{
  border-color: rgba(0,120,215,.30);
  box-shadow: 0 16px 30px rgba(0,120,215,.10);
}

.mr-pill{
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,120,215,.10);
  color:#0b1220;
  font-size: 12px;
  font-weight: 950;
}

/* Layout grid */
.mr-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items:start;
}

@media (max-width: 980px){
  .mr-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.mr-card{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 46px rgba(2,6,23,.10);
}

.mr-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mr-card-head h2{
  margin:0;
  font-size: 15.5px;
  font-weight: 950;
  color:#0b1220;
  letter-spacing: -.2px;
}

.mr-hint{
  margin:6px 0 0;
  font-size: 12.8px;
  color: rgba(11,18,32,.62);
  font-weight: 700;
  line-height: 1.35;
}

.mr-list{ display:flex; flex-direction:column; gap:10px; }

/* Draft item row (tight + clean) */
.mr-item{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(245,248,255,.75);
}

.mr-item-img{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.10);
  background:#fff;
  object-fit: cover;
  flex: 0 0 auto;
}

.mr-item-mid{ flex:1; min-width: 0; }
.mr-item-title{
  margin:0;
  font-weight: 950;
  font-size: 14.5px;
  color:#0b1220;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mr-item-sub{
  margin:5px 0 0;
  color: rgba(11,18,32,.62);
  font-size: 12.5px;
  font-weight: 700;
}

/* Qty controls */
.mr-item-right{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }

.mr-qty{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

.mr-qty button{
  width:34px;height:34px;
  border-radius:999px;
  border: 1px solid rgba(2,6,23,.12);
  background: linear-gradient(135deg, rgba(0,120,215,.10), rgba(0,176,80,.08));
  font-weight: 950;
  cursor:pointer;
}
.mr-qty input{
  width: 56px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(2,6,23,.12);
  text-align:center;
  font-weight: 950;
  background:#fff;
}

.mr-mini{
  border-radius: 999px;
  padding: 9px 12px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.96);
  font-weight: 950;
  cursor:pointer;
}
.mr-mini.danger{
  color:#b00020;
  background: rgba(176,0,32,.06);
  border-color: rgba(176,0,32,.18);
}

/* Form */
.mr-form{ display:flex; flex-direction:column; gap: 12px; }
.mr-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px){ .mr-row{ grid-template-columns: 1fr; } }

.mr-field label{
  display:block;
  font-size: 12px;
  color: rgba(11,18,32,.75);
  font-weight: 900;
  margin: 0 0 6px;
}

.mr-field input, .mr-field select, .mr-field textarea{
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(148,163,184,.55);
  border-radius: 12px;
  outline:none;
  background:#fff;
  font-size: 14px;
  color:#0b1220;
  font-weight: 750;
}

.mr-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.mr-muted{
  color: rgba(11,18,32,.58);
  font-size: 12px;
  font-weight: 700;
}

.mr-alert{
  border: 1px solid rgba(0,120,215,.25);
  background: rgba(0,120,215,.06);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 750;
}

.mr-empty{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed rgba(2,6,23,.18);
  background: rgba(255,255,255,.92);
  color: rgba(11,18,32,.70);
  font-weight: 800;
}
.mr-empty h3{ margin:0 0 4px; font-weight: 950; }
.mr-empty p{ margin:0; font-weight: 650; }
.mr-empty-ic{ font-size: 22px; }
/* =========================
   FIXES: button + qty + cards
   ========================= */

/* Make "Add more items" match premium buttons */
.mr-primary{
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 950;
  letter-spacing: -.1px;
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
  background: linear-gradient(135deg,#0078d7,#00b050);
}
.mr-primary:hover{ filter: brightness(0.98); transform: translateY(-1px); }
.mr-primary:active{ transform: translateY(0px); }

/* Badge inside add more items: looks cleaner */
.mr-badge{
  min-width: 26px;
  height: 26px;
  padding: 0 9px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  color:#fff;
}

/* Draft item card feels "attached" (image + details) */
.mr-item{
  align-items:center;
  background: rgba(245,248,255,.72);
  border-color: rgba(2,6,23,.10);
  box-shadow: 0 12px 26px rgba(2,6,23,.06);
}
.mr-item:hover{
  border-color: rgba(0,120,215,.20);
  box-shadow: 0 16px 34px rgba(0,120,215,.08);
}
.mr-item-img{
  width: 62px;
  height: 62px;
  border-radius: 16px;
  border-color: rgba(2,6,23,.12);
}

/* Show more product info nicely (optional if present) */
.mr-item-sub{
  max-width: 560px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Qty pill: stronger contrast + visible +/- */
.mr-qty{
  gap:10px;
  padding:7px 10px;
  border-color: rgba(2,6,23,.12);
  box-shadow: 0 10px 22px rgba(2,6,23,.07);
}
.mr-qty button{
  width:36px;
  height:36px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.16);

  /* Make buttons bold + visible */
  background: linear-gradient(135deg,#0078d7,#00b050);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;

  box-shadow: 0 10px 18px rgba(2,6,23,.10);
}
.mr-qty button:hover{ filter: brightness(0.98); transform: translateY(-1px); }
.mr-qty button:active{ transform: translateY(0px); }

/* Qty number: stronger */
.mr-qty input{
  width: 54px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(2,6,23,.14);
  background:#fff;
  color:#0b1220;
  font-weight: 950;
}

/* Remove button: match your style */
.mr-mini.danger{
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 950;
}
/* Make Add-more-items look like your premium buttons */
.mr-top-actions .mr-primary{
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 14px;
  align-items: center;
}
.mr-top-actions .mr-primary .mr-badge{
  min-width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,.30);
}
/* FORCE Add more items to be horizontal + premium */
.mr-top-actions .mr-primary{
  display:flex !important;
  flex-direction: row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  min-width: 170px !important;
  padding: 12px 16px !important;

  white-space: nowrap !important;
  line-height: 1 !important;
  text-align: left !important;
}

/* prevent each word going on a new line */
.mr-top-actions .mr-primary *{
  white-space: nowrap !important;
}

/* badge sits nicely at the end */
.mr-top-actions .mr-primary .mr-badge{
  margin-left: 2px !important;
}
/* ============================
   FIX: Pale header buttons/tabs
   (surgical overrides only)
============================ */

/* Make the sticky header less “foggy” */
.mr-top{
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(2,6,23,.14) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.10) !important;
  backdrop-filter: blur(10px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.25) !important;
}

/* Ensure buttons NEVER inherit any weird opacity/filter */
.mr-top-actions .mr-ghost,
.mr-top-actions .mr-primary{
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: translateZ(0); /* keeps it crisp on some GPUs */
}

/* Refresh button (ghost) — stronger contrast */
.mr-top-actions .mr-ghost{
  background: #ffffff !important;
  color: #0b1220 !important;
  border: 1px solid rgba(2,6,23,.18) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.12) !important;
}
.mr-top-actions .mr-ghost:hover{
  border-color: rgba(0,120,215,.35) !important;
  box-shadow: 0 18px 42px rgba(0,120,215,.12) !important;
}

/* Add more items — richer gradient + clearer text */
.mr-top-actions .mr-primary{
  background: linear-gradient(135deg,#0078d7 0%, #00b050 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 44px rgba(0,120,215,.18) !important;
}
.mr-top-actions .mr-primary:hover{
  box-shadow: 0 22px 52px rgba(0,176,80,.18) !important;
}

/* Badge inside the green/blue button — make it pop */
.mr-top-actions .mr-primary .mr-badge{
  background: rgba(255,255,255,.30) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* Tabs/pills at top: stop them looking faded */
.mr-tab{
  background: #ffffff !important;
  border: 1px solid rgba(2,6,23,.14) !important;
  box-shadow: 0 12px 28px rgba(2,6,23,.10) !important;
  opacity: 1 !important;
}
.mr-tab.active{
  border-color: rgba(0,120,215,.40) !important;
  box-shadow: 0 18px 38px rgba(0,120,215,.14) !important;
}
.mr-pill{
  background: rgba(0,120,215,.14) !important;
  color:#0b1220 !important;
}
/* ================================
   HARD FIX: remove parent wash-out
   (opacity/filter from other css)
================================ */

/* If shell/style is applying opacity/filter to main/header/nav, kill it */
body,
main.mr-page,
.mr-page,
.mr-top,
.mr-tabs,
.mr-top-actions{
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Some shells add “glass” overlay via pseudo elements */
.mr-top::before,
.mr-top::after,
.mr-tabs::before,
.mr-tabs::after{
  content: none !important;
  display: none !important;
}

/* Force strong, non-pale buttons */
.mr-top-actions .mr-ghost{
  background: #fff !important;
  color: #0b1220 !important;
  border: 1px solid rgba(2,6,23,.22) !important;
  box-shadow: 0 16px 40px rgba(2,6,23,.14) !important;
}

.mr-top-actions .mr-primary{
  background: linear-gradient(135deg,#0078d7,#00b050) !important;
  color:#fff !important;
  border: 0 !important;
  box-shadow: 0 18px 44px rgba(0,120,215,.22) !important;
}

.mr-top-actions .mr-primary .mr-badge{
  background: rgba(255,255,255,.35) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
}

/* Tabs should be crisp, not faded */
.mr-tab{
  background: #fff !important;
  border: 1px solid rgba(2,6,23,.16) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.12) !important;
  opacity: 1 !important;
  filter: none !important;
}
/* ===================================================
   FIX: global shell header is applying backdrop blur
   Node seen in console: header.m...
   This file loads ONLY on my-rfqs.html, so safe.
=================================================== */

body > header{
  /* kill the glass blur */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* make it solid */
  background: #ffffff !important;

  /* avoid any “frosted” overlays */
  filter: none !important;
  opacity: 1 !important;
}

/* some shells use pseudo overlays on header */
body > header::before,
body > header::after{
  content: none !important;
  display: none !important;
}

/* ensure your RFQ header is never “under” any overlay */
.mr-top{
  position: sticky !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* =========================================================
   MOBILE FIX: My-RFQs header + tabs + grid on small screens
   (Put this at the BOTTOM of my-rfqs.css)
========================================================= */

@media (max-width: 720px){

  /* page padding */
  .mr-page{ padding: 12px 12px 70px; }

  /* header becomes a clean stacked block */
  .mr-top{
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 10px 0 12px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* back button smaller */
  .mr-back{ width:40px; height:40px; border-radius: 14px; }

  /* title should not force weird line breaks */
  .mr-title{
    flex: 1 1 auto;
    min-width: 0;
  }
  .mr-title h1{
    font-size: 18px;
    line-height: 1.1;
  }
  /* SUBTITLE: keep it short, prevent that tall left column you see */
  .mr-sub{
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.25;
    max-width: 34ch;
  }

  /* actions row goes FULL width below title */
  .mr-top-actions{
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Refresh | Add more items */
    gap: 10px;
    align-items: stretch;
  }

  /* buttons fill and stay same height */
  .mr-top-actions .mr-ghost,
  .mr-top-actions .mr-primary{
    width: 100%;
    justify-content: center;
    min-height: 46px;
    border-radius: 14px;
    padding: 12px 14px;
  }

  /* badge stays compact */
  .mr-top-actions .mr-primary .mr-badge{
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
  }

  /* tabs: tighter + horizontal scroll */
  .mr-tabs{
    padding: 10px 0 6px;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .mr-tab{
    scroll-snap-align: start;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 999px;
  }

  /* grid becomes single column */
  .mr-grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* draft row spacing tighter */
  .mr-item{
    padding: 12px;
    gap: 10px;
  }
  .mr-item-img{
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  /* qty cluster wraps better on small screens */
  .mr-item-right{
    align-items: flex-end;
  }
  .mr-qty{
    gap: 8px;
    padding: 6px 8px;
  }
  .mr-qty button{
    width: 36px;
    height: 36px;
  }
  .mr-qty input{
    width: 52px;
    height: 36px;
  }

  /* form: nicer spacing */
  .mr-field input, .mr-field select, .mr-field textarea{
    padding: 12px 12px;
    border-radius: 12px;
  }
}

/* even smaller phones */
@media (max-width: 420px){
  .mr-top-actions{
    grid-template-columns: 1fr; /* stack Refresh then Add more items */
  }
  .mr-sub{ max-width: 26ch; }
}
/* ================================
   MY RFQs — FIX PILLS + ROUNDED TOP
   (Page-only, no changes to style.css)
   ================================ */

/* 1) Round the top white header card */
.mr-top{
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* If mr-top is sitting on a card-like wrapper in your CSS */
.mr-page{
  padding-top: 18px;
}

/* 2) Your global style.css applies gradient + shine to ALL buttons
      That can make tab text/pills look washed.
      Force tabs back to clean white */
.mr-tabs .mr-tab{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(2,6,23,.12) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.08) !important;
  position: relative;
}

/* Kill the global "shine sweep" pseudo-element on these specific buttons */
.mr-tabs .mr-tab::after{
  content: none !important;
  display: none !important;
}

/* 3) Fix the “pale pills” numbers */
.mr-tabs .mr-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 26px !important;
  height: 22px !important;
  padding: 0 8px !important;
  margin-left: 8px !important;

  background: #eaf3ff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0,120,215,.22) !important;
  border-radius: 999px !important;

  font-weight: 900 !important;
  font-size: 12px !important;
  opacity: 1 !important;
}

/* 4) Active tab should pop */
.mr-tabs .mr-tab.active{
  border-color: rgba(0,120,215,.45) !important;
  box-shadow: 0 12px 32px rgba(0,120,215,.14) !important;
}

/* Optional: soften the tabs row container corners too */
.mr-tabs{
  border-radius: 18px !important;
}
/* ==================================
   RFQ GRID WIDTH IMPROVEMENT
   ================================== */

.mr-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* Left slightly wider */
  gap: 24px;
}

/* Optional: give form card a little more breathing room */
.mr-grid .mr-card:last-child{
  padding: 26px;
}

/* On smaller laptops reduce gap slightly */
@media (max-width: 1300px){
  .mr-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* On tablets stack nicely */
@media (max-width: 980px){
  .mr-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================
   MOBILE TAB BADGE FIX (pill spilling out)
   ========================================= */

/* Tabs row: allow neat sizing on small screens */
.mr-tabs{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:center;
}

/* Each tab button becomes a flex container */
.mr-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:10px 14px;         /* give room for pill */
  border-radius:999px;
  overflow:hidden;           /* stops pill bleeding outside */
  white-space:nowrap;        /* keep label + pill on one line */
}

/* The count badge/pill */
.mr-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:22px;            /* consistent circle */
  height:22px;
  padding:0 6px;             /* allows 10+ to become oval */
  border-radius:999px;

  font-size:12px;
  line-height:1;
  font-weight:800;

  flex:0 0 auto;             /* never shrink the pill */
}

/* Extra-tight phones */
@media (max-width: 420px){
  .mr-tab{
    padding:9px 12px;
    gap:6px;
  }
  .mr-pill{
    min-width:20px;
    height:20px;
    font-size:11px;
    padding:0 5px;
  }
}
/* =========================================================
   MOBILE FIX: My RFQs tab badges should NOT overflow pills
   Targeting your exact classes: .mr-tabs .mr-tab .mr-pill
========================================================= */

/* Make the tabs row behave nicely on small screens */
@media (max-width: 520px){
  .mr-tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }
}

/* Force tab buttons to contain the pill properly */
.mr-tabs .mr-tab{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  /* space for pill */
  padding-right: 12px !important;

  /* prevent overflow */
  overflow: hidden !important;
}

/* Force the count pill to sit INSIDE the button (no absolute) */
.mr-tabs .mr-tab .mr-pill{
  position: static !important;
  transform: none !important;
  margin-left: 6px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}
/* ==============================
   MOBILE FIX: My RFQs tabs row
   ============================== */

.mr-tabs{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* make each tab a clean pill that never overflows */
.mr-tab{
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 10px 10px;
  border-radius: 999px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* keep text from pushing badge out */
.mr-tab span,
.mr-tab:not(.mr-pill){
  min-width: 0;
}

/* badge stays INSIDE */
.mr-pill{
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  line-height: 1;
  font-weight: 900;
}

/* smaller phones: tighten */
@media (max-width: 420px){
  .mr-tabs{ gap: 8px; }
  .mr-tab{ padding: 9px 9px; font-size: 12px; }
  .mr-pill{ min-width: 26px; height: 26px; padding: 0 7px; }
}

/* super small phones: allow 2 rows (still neat) */
@media (max-width: 360px){
  .mr-tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =========================================================
   MOBILE FIT FIX (My RFQs)
   - removes horizontal overflow
   - forces single-column layout
   - makes draft list items + form fit screen
========================================================= */
@media (max-width: 640px){

  /* 1) Stop any child from causing sideways scrolling */
  html, body { max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }

  /* 2) Page padding tuned for phone */
  .mr-page{
    width: 100%;
    max-width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 3) Main grid becomes ONE column (Draft + RFQ Details stack) */
  .mr-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 4) Cards must never exceed viewport */
  .mr-card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  /* 5) Draft list container fits */
  .mr-list{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 6) Any draft list “row/item” must be allowed to shrink */
  .mr-list > *{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* If your list items are flex rows, this prevents text from forcing overflow */
  .mr-item, .mr-row, .mr-line{
    min-width: 0 !important;
  }

  /* Common pattern: left thumb + right text */
  .mr-item{
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .mr-item .mr-thumb{
    flex: 0 0 44px;          /* smaller thumb on mobile */
    width: 44px;
    height: 44px;
  }
  .mr-item .mr-info{
    flex: 1 1 auto;
    min-width: 0;            /* KEY: allows ellipsis */
  }
  .mr-item .mr-title,
  .mr-item h3,
  .mr-item h4{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mr-item .mr-meta,
  .mr-item p{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 7) Form fields must not exceed width */
  .mr-form,
  .mr-field,
  .mr-field input,
  .mr-field select,
  .mr-field textarea{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 8) Any “two fields in a row” stacks on mobile */
  .mr-row{
    flex-direction: column !important;
    gap: 10px !important;
  }
}
/* ================================
   FIX: Quoted tab Checkout button visibility
   (white-on-white / low-contrast)
================================ */
#panelQuoted .mr-list button,
#panelQuoted .mr-list a.mr-primary,
#panelQuoted .mr-list .mr-primary,
#panelQuoted .mr-list .btn,
#panelQuoted .mr-list .btn-primary{
  background: linear-gradient(135deg, #0078d7, #00b050) !important;
  color: #ffffff !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#panelQuoted .mr-list button:hover,
#panelQuoted .mr-list a.mr-primary:hover,
#panelQuoted .mr-list .mr-primary:hover{
  filter: brightness(0.97);
}

#panelQuoted .mr-list button:disabled,
#panelQuoted .mr-list .mr-primary:disabled{
  opacity: .6 !important;
}

/* If a parent container is forcing weird opacity */
#panelQuoted .mr-list,
#panelQuoted .mr-card,
#panelQuoted .mr-card *{
  opacity: 1;
}
/* ===== LOW-RISK MY-RFQS ACCESSIBILITY / STABILITY PATCH ===== */
.mr-primary:focus-visible,
.mr-ghost:focus-visible,
.mr-tab:focus-visible,
.mr-mini:focus-visible,
.mr-qty button:focus-visible,
.mr-field input:focus-visible,
.mr-field select:focus-visible,
.mr-field textarea:focus-visible{
  outline: 2px solid rgba(0,120,215,.28);
  outline-offset: 2px;
}