@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');
/* FSS theme: raised keycap buttons, recessed inputs, layered cards.  Loaded last so it overrides the base styles. */
:root{
  --ink:#12222e; --muted:#5b7080; --line:#cfdae3; --line-2:#e1e9ef;
  --navy-900:#0a1824; --navy-800:#10283a; --navy-700:#1a3a52;
  --teal-300:#3bc0d3; --teal-500:#119bb0; --teal-600:#0b7f93; --teal-700:#086678; --teal-900:#04414f;
  --amber:#f0a81c; --amber-d:#c98700; --red-600:#c0392b; --red-800:#8f2418;
  --paper:#e8eef2; --card:#ffffff;
  --font:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
:root{font-family:var(--font)!important;color:var(--ink);background:var(--paper)}
html,body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
body{background:radial-gradient(1200px 500px at 50% -120px,#f7fafc 0,transparent 70%),var(--paper)}
input,select,textarea,button{font-family:var(--font)}
td,th,.quoteNum,input[type=number]{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
header,.dashHead,.fssHubHead{background:linear-gradient(180deg,var(--navy-700) 0,var(--navy-800) 45%,var(--navy-900) 100%)!important;color:#fff;
  border-bottom:3px solid var(--amber)!important;box-shadow:0 6px 18px -6px rgba(5,18,28,.55)}
header h1,header h2,.dashHead h1,.fssHubHead h1,.fssHubHead h2{letter-spacing:.2px;font-weight:700}

/* ---------- buttons: raised keycaps ---------- */
button,.fssImportBtn,.fssExcelMenu summary{
  font-weight:600;font-size:13px;letter-spacing:.1px;cursor:pointer;
  border-radius:8px;padding:9px 15px;margin-bottom:3px;
  color:#fff;text-shadow:0 -1px 0 rgba(0,40,52,.45);
  background:linear-gradient(180deg,#1aa7bd 0,var(--teal-600) 52%,var(--teal-700) 100%);
  border:1px solid var(--teal-900)!important;border-top-color:#0a8aa0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -1px 0 rgba(0,0,0,.12) inset,0 3px 0 var(--teal-900),0 6px 10px -2px rgba(4,50,64,.38);
  transition:transform .07s ease,box-shadow .07s ease,filter .12s ease;
}
button:hover{filter:brightness(1.07)}
button:active,button.fssPressed{
  transform:translateY(3px);filter:brightness(.97);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 0 0 var(--teal-900),0 1px 3px rgba(4,50,64,.35)}
button:focus-visible{outline:3px solid rgba(240,168,28,.7);outline-offset:2px}
button:disabled{opacity:.5;filter:grayscale(.5);cursor:not-allowed;transform:none;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 2px 0 var(--teal-900)}

button.secondary,button.ghost,.dashAction.ghost,.fssImportBtn,.fssExcelMenu summary,.fssTopBar button.secondary,.sbTab:not(.active){
  color:#1b3446;text-shadow:0 1px 0 #fff;
  background:linear-gradient(180deg,#ffffff 0,#edf2f6 55%,#dde6ed 100%);
  border:1px solid #aebdca!important;border-top-color:#d3dde5!important;
  box-shadow:0 1px 0 #fff inset,0 3px 0 #a7b8c6,0 6px 10px -3px rgba(18,40,58,.25)}
button.secondary:active,button.ghost:active{box-shadow:0 1px 0 #fff inset,0 0 0 #a7b8c6,0 1px 3px rgba(18,40,58,.25)}
.fssExcelMenu summary{display:inline-block}

/* toggled / selected key = pressed-in amber */
button.active:not(.quoteStageButton),.quoteStageButton.active{
  color:#2b1d00!important;text-shadow:0 1px 0 rgba(255,255,255,.4);
  background:linear-gradient(180deg,#f7bf49 0,var(--amber) 50%,#e29a0c 100%)!important;
  border-color:#a56f00!important;
  box-shadow:0 2px 5px rgba(90,55,0,.4) inset,0 1px 0 rgba(255,255,255,.4)!important;transform:translateY(2px)}

/* danger */
.fss-dangerBtn,button.fss-danger,.fss-danger button,.fss-primary.fss-danger{
  background:linear-gradient(180deg,#e0584a 0,var(--red-600) 55%,#a52f22 100%)!important;border-color:var(--red-800)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 3px 0 var(--red-800),0 6px 10px -2px rgba(100,20,10,.35)!important}

/* small buttons inside tables and rows sit lower */
td button,.dashRowActions button,.fssTopBar button{padding:6px 11px;font-size:12px;border-radius:7px;margin-bottom:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 0 var(--teal-900),0 4px 7px -2px rgba(4,50,64,.3)}
td button.secondary,.fssTopBar button.secondary,td button.ghost{box-shadow:0 1px 0 #fff inset,0 2px 0 #a7b8c6,0 4px 7px -3px rgba(18,40,58,.25)}
td button:active,.fssTopBar button:active{transform:translateY(2px);box-shadow:0 1px 3px rgba(4,50,64,.3)}

/* ---------- inputs: recessed ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{
  background:linear-gradient(180deg,#eef3f7 0,#fbfdfe 40%);color:var(--ink);
  border:1px solid #aebdca;border-radius:7px;padding:9px 11px;
  box-shadow:0 2px 4px rgba(18,40,58,.13) inset,0 1px 0 #fff;
  transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:#8a9eac}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal-500);
  box-shadow:0 2px 4px rgba(18,40,58,.1) inset,0 0 0 3px rgba(17,155,176,.28)}
input[type=checkbox],input[type=radio]{accent-color:var(--teal-600);width:16px;height:16px}
label{color:#2c4558;font-weight:600}

/* ---------- cards & panels ---------- */
aside,.work,.dashCard,.dashStat,.fssHubCard,.fssOverviewCard,.quoteSettings,.fssSetupBlock{
  background:linear-gradient(180deg,#ffffff 0,#fbfdfe 100%);
  border:1px solid var(--line);border-radius:13px;
  box-shadow:0 1px 0 #fff inset,0 2px 0 rgba(20,45,65,.05),0 12px 26px -12px rgba(12,38,58,.32)}
.dashStat{border-top:3px solid var(--teal-500)}
.dashStat strong{font-weight:700;color:var(--navy-800)}
.fssHubCard{transition:transform .15s ease,box-shadow .15s ease}
.fssHubCard:hover{transform:translateY(-2px);box-shadow:0 1px 0 #fff inset,0 2px 0 rgba(20,45,65,.05),0 18px 30px -12px rgba(12,38,58,.4)}
.stage{background:#dbe4ea;border:1px solid #bccbd6;border-radius:9px;box-shadow:0 3px 8px rgba(18,40,58,.18) inset}

/* ---------- tables ---------- */
table th,.dashTable th{background:linear-gradient(180deg,#f6f9fb 0,#e3ebf1 100%);color:#2f4b5f;font-weight:700;
  border-bottom:2px solid #c3d2dd!important;text-shadow:0 1px 0 #fff}
.dashTable tbody tr:nth-child(even) td{background:#f8fbfc}
.dashTable tbody tr{transition:background .1s}
.dashTable tbody tr:hover td{background:#e9f4f7!important}
.dashTable td{border-bottom:1px solid var(--line-2)}

/* ---------- pop-ups ---------- */
.dashModal{background:rgba(7,22,33,.58)!important;backdrop-filter:blur(3px)}
.dashModalBox{background:linear-gradient(180deg,#ffffff 0,#f8fbfd 100%);border:1px solid #bccbd6;border-radius:15px!important;
  box-shadow:0 1px 0 #fff inset,0 34px 70px -14px rgba(3,16,26,.65),0 10px 20px -8px rgba(3,16,26,.35)}
.dashModalBox h2{color:var(--navy-800);font-weight:700}
.fssTopBar{background:linear-gradient(180deg,#fff 0,#eef3f7 100%);border-bottom:1px solid #c3d2dd;box-shadow:0 6px 10px -8px rgba(18,40,58,.35)}
.dashMuted,.small{color:var(--muted)}

/* ---------- quotation stage tabs ---------- */
.quoteStageButton{background:linear-gradient(180deg,#ffffff 0,#e9f0f4 100%);color:#19394a;border:1px solid #aebdca!important;border-radius:9px;
  box-shadow:0 1px 0 #fff inset,0 3px 0 #a7b8c6,0 6px 9px -3px rgba(18,40,58,.25);margin-bottom:5px}
#quoteModal .quoteStageButton.active{background:linear-gradient(180deg,#139cb2 0,var(--teal-600) 55%,var(--teal-700) 100%)!important;color:#fff!important;
  border-color:var(--teal-900)!important;box-shadow:0 2px 6px rgba(0,40,52,.5) inset,0 1px 0 rgba(255,255,255,.2)!important;text-shadow:0 -1px 0 rgba(0,40,52,.5)}

/* ---------- misc ---------- */
.dashPill{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 1px 3px rgba(18,40,58,.18)}
::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#b4c4d0,#9fb1bf);border-radius:8px;border:2px solid #e4ebf0}
::-webkit-scrollbar-track{background:#e4ebf0}
@media (prefers-reduced-motion:reduce){button,.fssHubCard{transition:none}}
/* sign-in page */
button.link{background:none!important;border:0!important;box-shadow:none!important;color:var(--teal-600)!important;text-shadow:none!important;padding:0!important;margin:0!important;font-weight:500;transform:none!important;filter:none!important}
button.link:hover{color:var(--teal-700)!important}
.card{border:1px solid var(--line);border-radius:14px!important;box-shadow:0 1px 0 #fff inset,0 28px 50px -22px rgba(8,30,46,.5),0 6px 14px -6px rgba(8,30,46,.25)!important}

/* ======== v8: flat, professional buttons (overrides the keycap look above) ======== */
button,.fssImportBtn,.fssExcelMenu summary{
  background:var(--teal-600);color:#fff;text-shadow:none;
  border:1px solid var(--teal-600)!important;border-top-color:var(--teal-600)!important;border-radius:7px;
  box-shadow:0 1px 2px rgba(10,40,55,.18);margin-bottom:0;font-weight:600;letter-spacing:0;
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
button:hover,.fssImportBtn:hover,.fssExcelMenu summary:hover{filter:none;background:var(--teal-700);border-color:var(--teal-700)!important}
button:active,button.fssPressed{transform:none;filter:none;background:var(--teal-900);box-shadow:none}
button:disabled{opacity:.45;filter:none;box-shadow:none;background:var(--teal-600)}
button.secondary,button.ghost,.dashAction.ghost,.fssImportBtn,.fssExcelMenu summary,.fssTopBar button.secondary,.sbTab:not(.active){
  background:#fff;color:#1b3446;text-shadow:none;border:1px solid #bccbd6!important;box-shadow:0 1px 2px rgba(18,40,58,.08)}
.fssImportBtn:hover,.fssExcelMenu summary:hover,button.secondary:hover,button.ghost:hover,.dashAction.ghost:hover,.sbTab:not(.active):hover{background:#f0f5f8;border-color:#9fb2c1!important}
button.secondary:active,button.ghost:active{background:#e4ecf1;box-shadow:none}
button.active:not(.quoteStageButton),.quoteStageButton.active{
  background:var(--amber)!important;border-color:var(--amber-d)!important;color:#2b1d00!important;text-shadow:none;box-shadow:none!important;transform:none}
.fss-dangerBtn,button.fss-danger,.fss-danger button,.fss-primary.fss-danger{background:var(--red-600)!important;border-color:var(--red-600)!important;box-shadow:0 1px 2px rgba(100,20,10,.25)!important}
.fss-dangerBtn:hover,button.fss-danger:hover{background:var(--red-800)!important}
td button,.dashRowActions button,.fssTopBar button{padding:6px 12px;font-size:12px;border-radius:6px;margin-bottom:0;box-shadow:0 1px 2px rgba(10,40,55,.15)}
td button.secondary,.fssTopBar button.secondary,td button.ghost{box-shadow:0 1px 2px rgba(18,40,58,.08)}
td button:active,.fssTopBar button:active{transform:none;box-shadow:none}
.quoteStageButton{background:#fff;color:#19394a;border:1px solid #bccbd6!important;border-radius:7px;box-shadow:0 1px 2px rgba(18,40,58,.08);margin-bottom:0}
#quoteModal .quoteStageButton.active{background:var(--teal-600)!important;color:#fff!important;border-color:var(--teal-600)!important;box-shadow:none!important;text-shadow:none}
button.link{box-shadow:none!important}

/* header controls on the dark navy bar */
.dashHead .dashAction,.fssHubHead button{padding:10px 18px;border-radius:7px;font-size:14px}
.dashHead #dashNew{background:var(--amber);border-color:var(--amber)!important;color:#1d1400;box-shadow:none}
.dashHead #dashNew:hover{background:#ffbb33;border-color:#ffbb33!important}
.dashHead .fssCogBtn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)!important;box-shadow:none;height:40px;border-radius:7px;padding:0 14px}
.dashHead .fssCogBtn:hover{background:rgba(255,255,255,.14);border-color:#fff!important}
.dashHead .fssAvatarBtn{background:#1f6f80;border:2px solid rgba(255,255,255,.75)!important;box-shadow:none;width:40px;height:40px}
.dashHead .fssAvatarBtn:hover{border-color:#fff!important;background:#268096}
.fssAvatarBig{box-shadow:none;border:2px solid #d3dde5}
.fssHubHead button.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)!important;box-shadow:none}
.fssHubHead button.secondary:hover{background:rgba(255,255,255,.14)}
/* menu items stay plain text rows */
.fssAcctMenu button{background:none!important;border:0!important;box-shadow:none!important}
.dashPill{box-shadow:none}

/* quotation tabs: warning triangle instead of the orange square, readable "need pricing" note */
.quoteStageButton .fssActionDot{top:7px!important;right:8px!important;width:20px!important;height:18px!important;border-radius:0!important;box-shadow:none!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1.6 23 20.4H1z' fill='%23ffc61a' stroke='%236b4200' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12 8v6' stroke='%232b1a00' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.4' fill='%232b1a00'/%3E%3C/svg%3E") center/contain no-repeat!important;
  display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.quoteStageButton .fssActionNote{color:#8a4300!important;font-weight:700;opacity:1!important;font-size:11px}
.quoteStageButton.active .fssActionNote,#quoteModal .quoteStageButton.active .fssActionNote{color:#fff!important;text-shadow:none}