/* QuoteFlow Cloud 2026 UI system
   Approved direction: compact enterprise SaaS, deep-blue navigation,
   white workspace, clear hierarchy, explicit form/save actions. */

:root{
  --qf-sidebar:#153f91;
  --qf-sidebar-deep:#12377f;
  --qf-sidebar-active:#2b66c9;
  --qf-page:#f4f7fc;
  --qf-surface:#ffffff;
  --qf-line:#d8e2f0;
  --qf-line-strong:#c7d5e8;
  --qf-text:#10213f;
  --qf-muted:#66758d;
  --qf-primary:#2467df;
  --qf-primary-dark:#1d55bc;
  --qf-save:#ed3c6b;
  --qf-save-dark:#d92d5b;
  --qf-shadow:0 8px 24px rgba(25,55,105,.07);
}

body{
  background:var(--qf-page);
  color:var(--qf-text);
}

/* Split top bar: brand zone left, utility zone right */
header{
  height:68px;
  background:linear-gradient(90deg,var(--qf-sidebar) 0 248px,#fff 248px 100%);
  color:var(--qf-text);
  border-bottom:1px solid #dfe7f2;
  box-shadow:0 2px 12px rgba(15,37,74,.06);
  grid-template-columns:248px minmax(280px,620px) minmax(320px,1fr);
  gap:20px;
  padding:0 20px 0 0;
}
header .brandBlock{
  height:68px;
  display:flex;
  align-items:center;
  padding:0 22px;
}
header .brand,
header .brandText .sub{color:#fff}
header .brandText .sub{opacity:.68}
header .brandCloud{color:#cfe1ff}
header .globalSearch{
  min-height:42px;
  border:1px solid #dce5f1;
  box-shadow:none;
  border-radius:10px;
  background:#f8faff;
}
header .headerActions{color:#32415b}
header .headerPill{
  background:#f5f8fc;
  color:#53627a;
  border:1px solid #dce5f1;
}
header .headerIconBtn{
  background:#fff;
  color:#243a62;
  border:1px solid #d8e2f0;
  box-shadow:none;
}
header .headerIconBtn:hover{background:#f5f8ff;border-color:#b9cbea}
header .notificationCount{border-color:#fff}
header .profileBadge{color:#243552}
header .headerLogout{
  background:#fff;
  color:#40506a;
  border:1px solid #d8e2f0;
}
header .headerLogout:hover{background:#f5f8fc}

.wrap{
  max-width:none;
  width:100%;
  margin:0;
  padding:0 22px 22px 0;
}
#appView{width:100%}

/* Application frame */
#appView .appShell{
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  gap:0;
  min-height:calc(100dvh - 68px);
  align-items:stretch;
}
#appView .side{
  position:sticky;
  top:68px;
  align-self:start;
  height:calc(100dvh - 68px);
  max-height:none;
  overflow:auto;
  background:linear-gradient(180deg,var(--qf-sidebar),var(--qf-sidebar-deep));
  border:0;
  border-radius:0;
  color:#fff;
  padding:18px 12px 20px;
  box-shadow:inset -1px 0 rgba(255,255,255,.08);
}
#appView .navGroupMenu{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0;
  border:0;
  overflow:visible;
}
#appView .navGroupSwitch{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#e7efff;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  text-align:left;
  white-space:normal;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
#appView .navGroupSwitch::after{
  content:"›";
  margin-left:auto;
  color:#a8c3f4;
  font-size:17px;
  line-height:1;
  transform:rotate(0deg);
}
#appView .navGroupSwitch:hover{background:rgba(255,255,255,.08);color:#fff}
#appView .navGroupSwitch.active{
  background:linear-gradient(90deg,#2b67ca,#316fd4);
  color:#fff;
  box-shadow:inset 3px 0 #9bc2ff;
}
#appView .navGroupSwitch.active::after{transform:rotate(90deg);color:#fff}
#appView .navGroupSwitchIcon{width:22px;height:22px;display:grid;place-items:center}
#appView .navGroupSwitchIcon svg{width:20px;height:20px;stroke-width:1.8}
#appView .navGroupSwitchLabel{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  min-width:0;
}

#appView #navMenu{
  display:block;
  margin-top:12px;
  padding:12px 8px 6px;
  border-top:1px solid rgba(255,255,255,.14);
  overflow:visible;
}
#appView #navMenu .navGroup{display:none;border:0;padding:0}
#appView #navMenu .navGroup.mobileActive{display:block}
#appView #navMenu .navGroupTitle{
  padding:0 7px 8px;
  color:#9fbbeb;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#appView #navMenu .navGroupLinks{display:grid;gap:3px}
#appView #navMenu .navBtn{
  width:100%;
  min-height:38px;
  padding:8px 10px 8px 16px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#cbdcff;
  font-size:12px;
  font-weight:700;
  text-align:left;
  white-space:normal;
  position:relative;
}
#appView #navMenu .navBtn::before{
  content:"";
  position:absolute;
  left:5px;
  top:50%;
  width:4px;
  height:4px;
  margin-top:-2px;
  border-radius:50%;
  background:#6f96d9;
}
#appView #navMenu .navBtn:hover{background:rgba(255,255,255,.07);color:#fff}
#appView #navMenu .navBtn.active{
  background:rgba(255,255,255,.13);
  color:#fff;
  border:0;
  box-shadow:none;
}
#appView #navMenu .navBtn.active::before{background:#fff}

/* Main workspace */
#appView .workspace{
  min-width:0;
  min-height:calc(100dvh - 68px);
  background:var(--qf-page);
  padding:0 24px 28px;
  display:flex;
  flex-direction:column;
}
#appView .workspaceHead{
  flex:0 0 auto;
  background:#fff;
  margin:0 -24px 18px;
  padding:15px 24px 17px;
  border:0;
  border-bottom:1px solid #dfe7f2;
  border-radius:0;
  box-shadow:0 3px 12px rgba(26,54,101,.04);
}
#appView .workspaceNavRow{
  min-height:30px;
  border:0;
  padding:0;
  margin:0 0 8px;
}
#appView .workspaceBackBtn{
  min-height:30px;
  padding:5px 9px;
  border:0;
  border-radius:7px;
  background:#f2f6fc;
  color:#53627a;
  font-size:11px;
}
#appView .workspaceBackBtn:hover{background:#e7eef8;color:#244b8d}
#appView .breadcrumbTrail{font-size:11px;color:#71809a}
#appView .breadcrumbTrail strong{color:#27436f}
#appView .workspaceTitleRow{
  align-items:center;
  min-height:46px;
}
#appView .workspaceTitleRow>div:first-child{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"icon title" "icon meta";
  column-gap:12px;
  align-items:center;
}
#appView .workspacePageIcon{
  grid-area:icon;
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eaf2ff;
  color:#2467df;
}
#appView .workspacePageIcon svg{width:23px;height:23px}
#appView .workspaceHead h1{
  grid-area:title;
  margin:0;
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.02em;
  color:#10213f;
}
#appView .workspaceHead .meta{
  grid-area:meta;
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
  color:#728198;
  font-size:11px;
}
#appView #home{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 2px 20px 0;
  scrollbar-gutter:stable;
}

/* Page hierarchy */
#appView .pageIntro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
  padding:0 2px;
}
#appView .pageIntro h2{
  margin:0 0 5px;
  color:#142849;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.01em;
}
#appView .pageIntro p{
  margin:0;
  color:#6b7890;
  font-size:12px;
  line-height:1.65;
}

#appView .workspaceTabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:10px 0 16px;
  padding:0 0 14px;
  background:transparent;
  border:0;
  border-bottom:1px solid #d6e1ef;
  border-radius:0;
}
#appView .workspaceTab{
  min-height:42px;
  padding:10px 22px;
  border:1px solid transparent;
  border-radius:8px;
  background:#eaf0f8;
  color:#40516d;
  font-size:12px;
  font-weight:800;
  box-shadow:none;
}
#appView .workspaceTab:hover{background:#dfe9f7}
#appView .workspaceTab.active{
  background:linear-gradient(180deg,#2c70e6,#2463d3);
  color:#fff;
  border-color:#2463d3;
  box-shadow:0 4px 12px rgba(36,99,211,.18);
}

/* Surfaces */
#appView .card{
  background:#fff;
  border:1px solid #dce5f0;
  border-radius:14px;
  padding:18px;
  box-shadow:var(--qf-shadow);
}
#appView .card.section,
#appView section.card.section{
  margin-top:14px;
}
#appView .section h2,
#appView .section h3{
  color:#142849;
  letter-spacing:-.01em;
}
#appView .section h2{
  position:relative;
  padding-left:15px;
  font-size:17px;
  margin:0 0 7px;
}
#appView .section h2::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:4px;
  border-radius:4px;
  background:#2470e6;
}
#appView .sectionDesc{
  color:#6c7890;
  font-size:12px;
  line-height:1.6;
}
#appView .item{
  border:1px solid #e0e7f0;
  border-radius:10px;
  background:#fff;
}

/* Form system */
#appView .field{gap:7px;margin:12px 0}
#appView .field label{
  color:#253754;
  font-size:12px;
  font-weight:800;
}
#appView .field input,
#appView .field textarea,
#appView .field select{
  min-height:42px;
  padding:10px 12px;
  border:1px solid #cbd8e9;
  border-radius:8px;
  background:#fff;
  color:#172844;
  box-shadow:inset 0 1px 1px rgba(20,52,99,.02);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
#appView .field textarea{min-height:88px;resize:vertical}
#appView .field input:hover,
#appView .field textarea:hover,
#appView .field select:hover{border-color:#aebfd7}
#appView .field input:focus,
#appView .field textarea:focus,
#appView .field select:focus{
  outline:none;
  border-color:#4d83e4;
  box-shadow:0 0 0 3px rgba(48,108,220,.10);
}
#appView input:disabled,
#appView select:disabled,
#appView textarea:disabled{background:#f5f7fb;color:#8994a7}

/* Buttons: blue for actions, pink for save/submit, white for secondary */
#appView button{
  border-radius:8px;
  min-height:38px;
  padding:9px 14px;
  font-size:12px;
  font-weight:800;
}
#appView .primary{
  background:linear-gradient(180deg,#2c70e6,#2463d3);
  color:#fff;
  box-shadow:0 3px 8px rgba(36,99,211,.14);
}
#appView .primary:hover{background:linear-gradient(180deg,#2868d7,#1e56bf)}
#appView button.primary[type="submit"],
#appView form button.primary[type="submit"]{
  background:linear-gradient(180deg,#f04a76,#e73565);
  box-shadow:0 4px 10px rgba(231,53,101,.18);
}
#appView button.primary[type="submit"]:hover,
#appView form button.primary[type="submit"]:hover{
  background:linear-gradient(180deg,#e8406d,#d82d5c);
}
#appView .ghost{
  background:#fff;
  color:#263955;
  border:1px solid #ccd8e7;
  box-shadow:none;
}
#appView .ghost:hover{background:#f6f8fc;border-color:#b8c8dc}
#appView .orange{background:#e9792f;color:#fff}
#appView .green{background:#13996b;color:#fff}

/* Lists and tables */
#appView .tableWrap{
  border:1px solid #dce5ef;
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}
#appView table{min-width:760px}
#appView th{
  background:#f6f8fc;
  color:#56657c;
  font-size:11px;
  font-weight:800;
  border-bottom:1px solid #dce5ef;
}
#appView td{
  color:#2c3d58;
  border-bottom:1px solid #edf1f6;
  font-size:12px;
}
#appView tbody tr:hover td{background:#fbfcff}
#appView .pill{
  border-radius:6px;
  padding:4px 7px;
  background:#f3f6fa;
  border-color:#dce4ef;
  font-size:10px;
}

/* KPI tiles */
#appView .grid{gap:10px;margin:12px 0}
#appView .kpi{
  border:1px solid #dce5ef;
  border-radius:12px;
  padding:14px 16px;
  box-shadow:none;
}
#appView .kpi .label{font-size:11px;color:#718097}
#appView .kpi .value{font-size:24px;color:#142849}

/* Modals follow the same pattern */
#appView .appModal{
  border-radius:14px;
  border:1px solid #d9e3f0;
  box-shadow:0 24px 70px rgba(16,40,78,.22);
}
#appView .appModalHead{
  background:#fff;
  border-bottom:1px solid #e2e8f1;
}
#appView .appModalFoot{
  background:#f4f7fc;
  border-top:1px solid #dce5f0;
}

/* Settings/forms look like the approved reference */
#appView form{
  accent-color:#2467df;
}
#appView .formSectionHead{
  border-bottom:1px solid #e3e9f1;
  padding-bottom:9px;
}
#appView .formSectionHead h2,
#appView .formSectionHead h3{margin:0}
#appView .sectionNo{
  background:#eaf2ff;
  color:#2467df;
  border-radius:7px;
}

/* Analytics / knowledge / CallConnect / settings workspaces */
#appView .workspaceSuiteNav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin:0 0 14px;
  padding:8px;
  border:1px solid #d9e3ef;
  border-radius:12px;
  background:#f3f6fb;
}
#appView .workspaceSuiteNav.analysisSuite{grid-template-columns:repeat(3,minmax(0,1fr))}
#appView .workspaceSuiteItem{
  min-height:62px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#526179;
  text-align:left;
  box-shadow:none;
}
#appView .workspaceSuiteItem:hover{background:#fff;border-color:#d9e3ef}
#appView .workspaceSuiteItem.active{
  background:linear-gradient(180deg,#2c70e6,#2463d3);
  border-color:#2463d3;
  color:#fff;
  box-shadow:0 4px 12px rgba(36,99,211,.16);
}
#appView .workspaceSuiteNo{
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#dfe6f0;
  color:#62728a;
  font-size:10px;
  font-weight:900;
}
#appView .workspaceSuiteItem.active .workspaceSuiteNo{background:#fff;color:#2463d3}
#appView .workspaceSuiteItem strong{display:block;color:#344963;font-size:11px}
#appView .workspaceSuiteItem small{display:block;margin-top:3px;color:#7b8798;font-size:9px;line-height:1.35}
#appView .workspaceSuiteItem.active strong,
#appView .workspaceSuiteItem.active small{color:#fff}

#appView .analysisOverview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:0 0 14px;
}
#appView .analysisHeroCard{
  min-height:104px;
  padding:16px;
  border:1px solid #dbe4ef;
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 16px rgba(23,51,96,.04);
}
#appView .analysisHeroCard span{
  display:block;
  color:#718097;
  font-size:10px;
  font-weight:800;
}
#appView .analysisHeroCard strong{
  display:block;
  margin-top:9px;
  color:#173158;
  font-size:24px;
  line-height:1.15;
}
#appView .analysisHeroCard small{
  display:block;
  margin-top:8px;
  color:#7b8798;
  font-size:10px;
}
#appView .analysisHeroCard.emphasis{
  background:linear-gradient(180deg,#f3f7ff,#fff);
  border-color:#c8daf4;
}
#appView .analysisHeroCard.emphasis strong{color:#205fc4}
#appView .analysisOpsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
#appView .analysisOpsGrid>.card.section{margin-top:0}

#appView #callconnectHistoryTable .tableWrap{
  max-height:55vh;
  overflow:auto;
}
#appView #callconnectHistoryTable table{min-width:1040px}
#appView #callconnectHistoryTable td:nth-child(3) strong{color:#173158}
#appView #callconnectHistoryTable .callconnectCustomerSelect{
  min-width:180px;
  min-height:36px;
  border:1px solid #cad7e8;
  border-radius:8px;
  background:#fff;
}
#appView .knowledgeCandidatePublish,
#appView .knowledgeCandidateMerge,
#appView .knowledgeAdminEdit,
#appView .knowledgeCandidateReject{
  min-height:36px;
}
#appView #settingsBody>.card.section:first-child,
#appView #home>.workspaceSuiteNav+.pageIntro+.card.section{
  margin-top:0;
}
#appView #settingsBody .formSectionHead{
  margin-bottom:12px;
}
#appView #settingsBody form{
  padding-top:4px;
}
#appView #settingsBody .notice{
  border-radius:9px;
  box-shadow:none;
}
#appView #settingsBody .grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
#appView #settingsBody .kpi{
  min-height:84px;
  background:#f8fafd;
}
#appView #settingsBody .kpi .value{
  font-size:17px;
  word-break:break-word;
}

@media(max-width:980px){
  #appView .workspaceSuiteNav,
  #appView .workspaceSuiteNav.analysisSuite{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  #appView .workspaceSuiteNav::-webkit-scrollbar{display:none}
  #appView .workspaceSuiteItem{
    flex:0 0 160px;
    min-height:56px;
  }
  #appView .analysisOverview{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appView .analysisOpsGrid{grid-template-columns:1fr}
  #appView #settingsBody .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Product / procurement / delivery / asset workflow */
#appView .procurementFlow{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  margin:0 0 14px;
  padding:8px;
  border:1px solid #d9e3ef;
  border-radius:12px;
  background:#f3f6fb;
}
#appView .procurementFlowStep{
  min-height:66px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#526179;
  text-align:left;
  box-shadow:none;
}
#appView .procurementFlowStep:hover{
  background:#fff;
  border-color:#d9e3ef;
}
#appView .procurementFlowStep.active{
  background:linear-gradient(180deg,#2c70e6,#2463d3);
  border-color:#2463d3;
  color:#fff;
  box-shadow:0 4px 12px rgba(36,99,211,.16);
}
#appView .procurementFlowNo{
  flex:0 0 27px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#dfe6f0;
  color:#64748a;
  font-size:10px;
  font-weight:900;
}
#appView .procurementFlowStep.active .procurementFlowNo{
  background:#fff;
  color:#2463d3;
}
#appView .procurementFlowStep strong{
  display:block;
  color:#354a68;
  font-size:11px;
}
#appView .procurementFlowStep small{
  display:block;
  margin-top:3px;
  color:#7b8799;
  font-size:9px;
  line-height:1.35;
}
#appView .procurementFlowStep.active strong,
#appView .procurementFlowStep.active small{color:#fff}

#appView .procurementSummary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0 0 12px;
}
#appView .procurementSummary>div{
  min-height:72px;
  padding:11px 12px;
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#fff;
}
#appView .procurementSummary span{
  display:block;
  color:#718097;
  font-size:10px;
  font-weight:800;
}
#appView .procurementSummary strong{
  display:block;
  margin-top:7px;
  color:#173158;
  font-size:20px;
  line-height:1.2;
}
#appView .procurementSummary>div:nth-child(2),
#appView .procurementSummary>div:nth-child(3){
  background:#f6f9ff;
}
#appView .procurementLinkNotice{
  margin:0 0 12px;
  border-color:#c9ddf7;
  background:#f4f8ff;
  color:#2a558e;
}
#appView #procurementInner>.card.section:first-child{
  margin-top:0;
}
#appView #procurementInner .quoteDetailHead{
  border-bottom:1px solid #e5eaf1;
  padding-bottom:10px;
  margin-bottom:12px;
}
#appView #procurementInner .tableWrap{
  margin-top:10px;
}
#appView #productListHost td .pill.good{
  background:#edf6f1;
  border-color:#cde4d7;
  color:#2e7053;
}

@media(max-width:980px){
  #appView .procurementFlow{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  #appView .procurementFlow::-webkit-scrollbar{display:none}
  #appView .procurementFlowStep{
    flex:0 0 150px;
    min-height:58px;
  }
  #appView .procurementSummary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Property / contract / monthly payment management */
#appView .businessRuleSummary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0 0 12px;
}
#appView .businessRuleSummary>div{
  min-height:70px;
  padding:11px 12px;
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#f9fbfe;
}
#appView .businessRuleSummary span{
  display:block;
  color:#748198;
  font-size:10px;
  font-weight:800;
}
#appView .businessRuleSummary strong{
  display:block;
  margin-top:7px;
  color:#173158;
  font-size:18px;
  line-height:1.2;
}
#appView .businessRuleSummary>div:last-child{
  background:#f4f8ff;
  border-color:#cbdcf3;
}
#appView .customerChartBody table .pill.warn{
  margin-left:6px;
}
@media(max-width:760px){
  #appView .businessRuleSummary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Support / incident workspace: seven-stage guided flow */
#appView .supportWorkspaceHeader{
  margin-top:0;
  padding:0;
  overflow:hidden;
  border-radius:14px;
}
#appView .supportWorkspaceHeaderRow{
  min-height:86px;
  padding:16px 18px;
  align-items:center!important;
  background:#fff;
}
#appView .supportWorkspaceHeader h2{
  margin:5px 0 3px;
  color:#142849;
  font-size:19px;
}
#appView .supportWorkspaceHeader .sectionDesc{margin:0}
#appView .supportWorkspaceHeader .pill.good{
  background:#edf5ff;
  border-color:#c8dcfa;
  color:#245fae;
}

#appView .supportJourney{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  margin:12px 0 16px;
  padding:8px;
  border:1px solid #d9e3ef;
  border-radius:12px;
  background:#f3f6fb;
}
#appView .supportJourneyStep{
  min-width:0;
  min-height:62px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#5d6b80;
  text-align:left;
  box-shadow:none;
}
#appView .supportJourneyStep:hover{
  background:#fff;
  border-color:#d9e3ef;
}
#appView .supportJourneyNo{
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#dfe6f1;
  color:#65748a;
  font-size:10px;
  font-weight:900;
}
#appView .supportJourneyStep>span:last-child{min-width:0}
#appView .supportJourneyStep strong{
  display:block;
  color:#42526c;
  font-size:11px;
  white-space:normal;
}
#appView .supportJourneyStep small{
  display:block;
  margin-top:3px;
  color:#8390a2;
  font-size:9px;
  line-height:1.3;
  white-space:normal;
}
#appView .supportJourneyStep.done{
  background:#f8fbff;
  border-color:#d5e2f4;
}
#appView .supportJourneyStep.done .supportJourneyNo{
  background:#dbe9ff;
  color:#2867c4;
}
#appView .supportJourneyStep.active{
  background:linear-gradient(180deg,#2d71e6,#2463d3);
  border-color:#2463d3;
  color:#fff;
  box-shadow:0 4px 12px rgba(36,99,211,.16);
}
#appView .supportJourneyStep.active .supportJourneyNo{
  background:#fff;
  color:#2463d3;
}
#appView .supportJourneyStep.active strong,
#appView .supportJourneyStep.active small{color:#fff}

#appView .supportTicketTopbar,
#appView .internalTicketTopbar{
  position:sticky;
  top:0;
  z-index:6;
  margin:0 0 12px;
  padding:14px 16px;
  border:1px solid #d9e3ef;
  border-radius:12px;
  background:#fff;
  color:#1c3151;
  box-shadow:0 5px 16px rgba(23,51,96,.06);
}
#appView .supportTicketTopbar strong,
#appView .internalTicketTopbar strong{color:#173158}
#appView .supportTicketTopbar small,
#appView .internalTicketTopbar small{color:#718097}
#appView .supportTicketTopbar .supportTopCommand,
#appView .internalTicketTopbar .supportTopCommand{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #d4e2f5;
  border-radius:9px;
  background:#f4f8ff;
  color:#244f91;
}
#appView .supportTicketTopbar .supportQuickActions,
#appView .internalTicketTopbar .supportQuickActions{margin:8px 0 0}
#appView .internalTicketTopbar.danger,
#appView .internalTicketTopbar.warn{
  border-color:#d9e3ef;
  box-shadow:inset 4px 0 #e86165,0 5px 16px rgba(23,51,96,.06);
}

#appView .supportLinearFlow{
  gap:10px;
  margin:10px 0;
}
#appView .supportLinearCard{
  border:1px solid #dbe4ef;
  border-radius:11px;
  padding:0;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
}
#appView .supportLinearCard.active{
  border:1px solid #a9c6ee;
  background:#fff;
  box-shadow:0 5px 15px rgba(36,99,211,.06);
}
#appView .supportLinearCard.done{
  border-color:#d8e3ee;
  background:#fbfcfe;
}
#appView .supportLinearHead{
  gap:10px;
  padding:12px 14px;
  background:#f8fafd;
  border-bottom:1px solid #e6ecf3;
}
#appView .supportLinearCard.active .supportLinearHead{background:#f1f6ff}
#appView .supportLinearHead strong{
  color:#223956;
  font-size:13px;
}
#appView .supportLinearHead small{
  color:#758297;
  font-size:10px;
}
#appView .supportLinearIndex{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:7px;
  background:#e5ebf3;
  color:#5d6d83;
  font-size:10px;
}
#appView .supportLinearCard.active .supportLinearIndex{
  background:#2467df;
  color:#fff;
}
#appView .supportLinearCard.done .supportLinearIndex{
  background:#dce9fb;
  color:#2a66bb;
}
#appView .supportLinearBody{
  margin:0;
  padding:13px 14px 15px;
}
#appView .supportLinearSummary{
  border:1px solid #dde6f0;
  border-radius:9px;
  background:#fbfcff;
}
#appView .supportLinearSummary span{
  color:#728198;
  font-size:9px;
}
#appView .supportLinearSummary p{
  color:#334863;
  font-size:12px;
}

#appView .supportMainActions{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0 12px;
}
#appView .supportMainAction{
  min-height:76px;
  padding:12px;
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}
#appView .supportMainAction:hover{
  border-color:#b8cbe7;
  background:#f6f9fe;
}
#appView .supportMainAction strong{
  color:#263d5e;
  font-size:12px;
}
#appView .supportMainAction small{
  color:#7b8799;
  font-size:10px;
}
#appView .supportMainAction.orange,
#appView .supportMainAction.green{
  color:#263d5e;
  background:#fff;
}

#appView .supportCaseCard{
  border:1px solid #dbe4ef;
  border-left:4px solid #91a8c5;
  border-radius:11px;
  padding:13px 14px;
  background:#fff;
  box-shadow:none;
}
#appView .supportCaseCard.top-priority{
  border-width:1px;
  border-left-width:4px;
  box-shadow:0 5px 15px rgba(23,51,96,.06);
}
#appView .supportCaseCardTitle{
  color:#1d3454;
  font-size:14px;
}
#appView .supportCaseCustomer{
  color:#5f6f86;
  font-size:11px;
}
#appView .supportCaseFact{
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f9fbfd;
}
#appView .supportCaseCardActions{
  padding-top:9px;
  border-top:1px solid #edf1f5;
}

#appView .supportTodayGrid{gap:8px}
#appView .supportTodayTile{
  min-height:86px;
  padding:12px;
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#fff;
}
#appView .supportTodayTile strong{
  margin-top:8px;
  color:#254a80;
  font-size:23px;
}
#appView .supportTodayTile em{
  margin-top:6px;
  color:#8490a1;
  font-size:9px;
}
#appView .supportTodayTile.danger,
#appView .supportTodayTile.warn{
  background:#fff;
}

#appView .internalHandoffFlow{
  border:1px solid #e1d6c9;
  border-radius:11px;
  padding:14px;
  background:#fffdfa;
  box-shadow:none;
}
#appView .internalHandoffSteps{
  gap:6px;
  margin-top:12px;
}
#appView .internalHandoffStep{
  border:1px solid #e1e7ef;
  border-radius:9px;
  background:#fff;
  min-height:70px;
}
#appView .internalHandoffStep.active{
  border:1px solid #e7b57d;
  background:#fff8ef;
}
#appView .internalHandoffStep.done{
  border-color:#d4e3dd;
  background:#f8fcfa;
}

/* Customer chart: same enterprise hierarchy as quote editor */
#appView .customerChartCard{
  padding:0;
  overflow:hidden;
  border-radius:14px;
}
#appView .customerChartTopbar{
  position:sticky;
  top:0;
  z-index:7;
  align-items:center;
  padding:16px 18px;
  margin:0;
  background:#fff;
  border-bottom:1px solid #dde6f1;
  box-shadow:0 4px 14px rgba(23,51,96,.05);
}
#appView .customerChartTopbar h2{
  margin:0 0 4px;
  padding:0;
  font-size:18px;
}
#appView .customerChartTopbar h2::before{display:none}
#appView .customerChartActions{justify-content:flex-end}
#appView .customerChartCard>.workspaceTabs{
  margin:14px 18px 0;
}
#appView .customerChartBody{
  padding:0 18px 18px;
}
#appView .customerTabLead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:15px 16px;
  margin:0 0 12px;
  border:1px solid #dbe4ef;
  border-radius:11px;
  background:#f9fbfe;
}
#appView .customerTabLead h3{
  margin:0 0 4px;
  color:#142849;
  font-size:15px;
}
#appView .customerTabLead p{
  margin:0;
  color:#6b7890;
  font-size:11px;
  line-height:1.6;
}
#appView .customerIdentitySummary{
  margin:0 0 14px;
  padding:16px;
  border:1px solid #dbe4ef;
  border-radius:11px;
  background:#fff;
  box-shadow:none;
}
#appView .customerIdentitySummary h3{
  position:relative;
  margin:0;
  padding-left:14px;
  color:#142849;
  font-size:16px;
}
#appView .customerIdentitySummary h3::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:4px;
  border-radius:4px;
  background:#2470e6;
}
#appView .customerDirectoryFacts{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:12px 0 0;
  border-top:1px solid #e9eef5;
  margin-top:12px;
}
#appView .customerDirectoryFacts>div{
  padding:9px 12px;
  border-right:1px solid #edf1f6;
  border-bottom:1px solid #edf1f6;
  min-height:66px;
}
#appView .customerDirectoryFacts>div:nth-child(4n){border-right:0}
#appView .customerDirectoryFacts small{
  color:#718097;
  font-size:10px;
  font-weight:800;
}
#appView .customerDirectoryFacts strong{
  color:#21344f;
  font-size:12px;
  line-height:1.5;
}
#appView .customerSupportSnapshot{
  margin:14px 0;
  padding:16px;
  border:1px solid #dbe4ef;
  border-radius:11px;
  background:#fff;
  box-shadow:none;
}
#appView .customerSupportSnapshotHead h3{
  color:#142849;
  font-size:15px;
}
#appView .customerSupportSnapshotHead p{
  color:#6b7890;
  font-size:11px;
}
#appView .customerQuickActions{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
}
#appView .customerQuickAction{
  min-height:68px;
  padding:10px 11px;
  border:1px solid #dbe4ef;
  border-radius:9px;
  background:#f9fbfe;
  box-shadow:none;
}
#appView .customerQuickAction:hover{
  border-color:#b8cbe6;
  background:#f2f7ff;
}
#appView .customerQuickAction strong{
  color:#253b5c;
  font-size:11px;
}
#appView .customerQuickAction small{
  color:#7b8798;
  font-size:10px;
}
#appView .customerQuickAction.primaryAction{
  border-color:#bdd1f0;
  background:#f0f6ff;
  color:#1f5fc8;
}
#appView .customerQuickAction.danger{
  border-color:#f3c5cd;
  background:#fff6f8;
  color:#c6335c;
}
#appView .customerSupportRecentItem{
  border:1px solid #e0e7f0;
  border-radius:9px;
  padding:10px 11px;
  background:#fbfcff;
}
#appView .customerChartBody>.modalGrid2{
  gap:10px;
}
#appView .customerChartBody>.modalGrid2>.card{
  border-radius:11px;
}
#appView .customerChartBody .unifiedToolbar{
  padding:12px 0;
  border-bottom:1px solid #e8edf4;
  margin-bottom:12px;
}
#appView .customerChartBody .unifiedToolbar h3{
  color:#142849;
  font-size:15px;
}
#appView .customerChartBody .section{
  margin-top:14px;
}
#appView .customerChartBody .section>h3,
#appView .customerChartBody .section>.row>h3{
  color:#263b5a;
  font-size:14px;
}
#appView .customerChartBody .notice{
  border:1px solid #d9e6f7;
  background:#f5f9ff;
  color:#315788;
}
#appView .customerChartBody .notice.error{
  border-color:#f3c7c7;
  background:#fff7f7;
  color:#a63e3e;
}
#appView .customerChartBody .notice.ok{
  border-color:#cce6da;
  background:#f5fbf8;
  color:#2f6f55;
}

/* Quote editor: reference-driven workflow layout */
#appView .quoteEditorCard{
  padding:0;
  overflow:hidden;
  border-radius:14px;
}
#appView .quoteEditorTopbar{
  position:sticky;
  top:0;
  z-index:7;
  padding:16px 18px;
  margin:0;
  background:#fff;
  border-bottom:1px solid #dde6f1;
  box-shadow:0 4px 14px rgba(23,51,96,.05);
}
#appView .quoteEditorTopbar h2{
  margin:0 0 4px;
  padding:0;
  font-size:18px;
}
#appView .quoteEditorTopbar h2::before{display:none}
#appView .quoteEditorTopActions{justify-content:flex-end}
#appView .quoteSaveTop{
  background:linear-gradient(180deg,#f04a76,#e73565);
  box-shadow:0 4px 10px rgba(231,53,101,.18);
}
#appView .quoteSaveTop:hover{background:linear-gradient(180deg,#e8406d,#d82d5c)}
#appView .quoteEditorCard>.notice,
#appView .quoteEditorCard>.quoteCustomerBanner,
#appView .quoteEditorCard>.quoteEditorTabs,
#appView .quoteEditorCard>form,
#appView .quoteEditorCard>#quoteEditMsg{
  margin-left:18px;
  margin-right:18px;
}
#appView .quoteCustomerBanner{
  border:1px solid #cfe0fb;
  background:#f6f9ff;
  color:#1d3e78;
}
#appView .quoteEditorTabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin-top:14px;
  margin-bottom:14px;
  padding:0 0 12px;
  border-bottom:1px solid #d9e3ef;
}
#appView .quoteEditorStep{
  min-height:40px;
  border:1px solid transparent;
  background:#e9eff7;
  color:#40506a;
  border-radius:8px;
  font-weight:800;
}
#appView .quoteEditorStep:hover{background:#dfe8f5}
#appView .quoteEditorStep.active{
  color:#fff;
  background:linear-gradient(180deg,#2c70e6,#2463d3);
  border-color:#2463d3;
  box-shadow:0 4px 11px rgba(36,99,211,.16);
}
#appView .quoteEditSection{
  scroll-margin-top:92px;
  border:1px solid #dbe4ef;
  border-radius:12px;
  padding:16px;
  margin:0 0 14px;
  box-shadow:none;
}
#appView .quoteEditSection .formSectionHead{
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:1px solid #e5eaf2;
}
#appView .quoteEditSection .sectionNo{
  width:26px;
  height:26px;
  border-radius:6px;
  background:#e8f1ff;
  color:#2467df;
}
#appView .quoteItemRow{
  padding:0;
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#fff;
  margin-top:8px;
  overflow:hidden;
}
#appView .quoteItemPrimary{
  display:grid;
  grid-template-columns:minmax(260px,2.1fr) 86px 86px 145px 145px;
  gap:0;
  align-items:stretch;
}
#appView .quoteItemSecondary{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(160px,1fr) 160px 140px 52px;
  gap:0;
  align-items:stretch;
  margin:0;
  padding:0;
  border-top:1px solid #e6ebf2;
}
#appView .quoteItemRow .field{
  margin:0;
  padding:9px 10px;
  border-right:1px solid #edf1f6;
  gap:5px;
}
#appView .quoteItemRow .field label{
  color:#65738a;
  font-size:10px;
}
#appView .quoteItemRow .field input,
#appView .quoteItemRow .field select{
  min-height:36px;
  padding:7px 9px;
}
#appView .quoteItemRow .quoteCostField{
  background:#fff9f2;
}
#appView .quoteItemRow .quoteCostField input{
  background:#fff;
  border-color:#f0c793;
}
#appView .quoteItemRow .quoteCostField label{color:#9a5a14}
#appView .quoteItemRow .procureField{
  margin:0!important;
  padding:12px 10px;
  align-self:stretch;
  border-right:1px solid #edf1f6;
  justify-content:center;
}
#appView .quoteItemRow .removeItem{
  margin:10px;
  height:36px;
  min-height:36px;
  padding:0;
  border:1px solid #f6c8d2;
  border-radius:8px;
  background:#fff;
  color:#d8325f;
}
#appView .quoteItemRow .removeItem:hover{background:#fff1f4}
#appView .residualRow{
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#fbfcff;
  box-shadow:none;
}
#appView .amountSummary{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
#appView .amountSummary .summaryBox{
  border:1px solid #dce5ef;
  border-radius:9px;
  padding:10px 12px;
  background:#f9fbfe;
}
#appView .amountSummary .summaryBox span{
  color:#6c7a90;
  font-size:10px;
}
#appView .amountSummary .summaryBox strong{
  margin-top:4px;
  color:#173158;
  font-size:17px;
}
#appView .amountSummary .summaryBox:nth-last-child(4){
  border-color:#bcd0ef;
  background:#f0f6ff;
}
#appView .amountSummary .summaryBox:nth-last-child(4) strong{color:#1f5fc8}
#appView .quoteEditorFooter{
  position:sticky;
  bottom:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:16px -16px -16px;
  padding:12px 16px;
  background:#edf3fb;
  border-top:1px solid #d7e1ed;
  box-shadow:0 -5px 15px rgba(23,51,96,.05);
}
#appView .quoteEditorFooterNote{
  color:#68778e;
  font-size:11px;
  line-height:1.5;
}
#appView .quoteEditorFooterActions{justify-content:flex-end}
#appView .quoteEditorFooter .primary[type="submit"]{
  min-width:130px;
  background:linear-gradient(180deg,#f04a76,#e73565);
}
#appView .quoteEditorFooter .green{min-width:150px}
#appView .quoteEditorCard .notice{font-size:12px}

/* Mobile/tablet: same information hierarchy, condensed */
@media(max-width:980px){
  #appView .supportWorkspaceHeaderRow{padding:12px}
  #appView .supportJourney{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    padding:6px;
  }
  #appView .supportJourney::-webkit-scrollbar{display:none}
  #appView .supportJourneyStep{
    flex:0 0 132px;
    min-height:56px;
  }
  #appView .supportTicketTopbar,
  #appView .internalTicketTopbar{
    position:static;
  }
  #appView .supportLinearHead{padding:10px 11px}
  #appView .supportLinearBody{padding:11px}
  #appView .supportMainActions{grid-template-columns:1fr}
  #appView .customerChartTopbar{
    position:static;
    padding:12px;
  }
  #appView .customerChartCard>.workspaceTabs{
    margin:10px 12px 0;
  }
  #appView .customerChartBody{padding:0 12px 14px}
  #appView .customerDirectoryFacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appView .customerDirectoryFacts>div:nth-child(4n){border-right:1px solid #edf1f6}
  #appView .customerDirectoryFacts>div:nth-child(2n){border-right:0}
  #appView .customerQuickActions{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appView .quoteEditorTopbar{
    position:static;
    padding:12px;
  }
  #appView .quoteEditorCard>.notice,
  #appView .quoteEditorCard>.quoteCustomerBanner,
  #appView .quoteEditorCard>.quoteEditorTabs,
  #appView .quoteEditorCard>form,
  #appView .quoteEditorCard>#quoteEditMsg{
    margin-left:12px;
    margin-right:12px;
  }
  #appView .quoteEditorTabs{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  #appView .quoteEditorTabs::-webkit-scrollbar{display:none}
  #appView .quoteEditorStep{flex:0 0 auto;min-width:110px}
  #appView .quoteItemPrimary,
  #appView .quoteItemSecondary{
    grid-template-columns:1fr 1fr;
  }
  #appView .quoteItemPrimary .descField{grid-column:1/-1}
  #appView .quoteItemRow .field{border-right:0;border-bottom:1px solid #edf1f6}
  #appView .quoteItemRow .procureField{
    border-right:0;
    border-bottom:1px solid #edf1f6;
    justify-content:flex-start;
  }
  #appView .quoteItemRow .removeItem{
    grid-column:1/-1;
    width:calc(100% - 20px);
  }
  #appView .amountSummary{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appView .quoteEditorFooter{
    align-items:stretch;
    flex-direction:column;
  }
  #appView .quoteEditorFooterActions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #appView .quoteEditorFooterActions .green{grid-column:1/-1}
  header{
    height:auto;
    min-height:62px;
    grid-template-columns:minmax(0,1fr) auto;
    padding:8px 10px;
    gap:8px;
    background:#fff;
  }
  header .brandBlock{
    height:auto;
    padding:0;
  }
  header .brand,
  header .brandText .sub{color:#153f91}
  header .brandCloud{color:#2670de}
  header .globalSearch{grid-column:1/-1;grid-row:2}
  .wrap{padding:0 8px 16px}
  #appView .appShell{display:block;min-height:auto}
  #appView .side{
    position:sticky;
    top:0;
    z-index:18;
    width:100%;
    height:auto;
    padding:8px;
    border-radius:0 0 12px 12px;
    box-shadow:0 8px 22px rgba(15,23,42,.14);
  }
  #appView .navGroupMenu{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  #appView .navGroupSwitch{
    min-height:50px;
    padding:7px 8px;
    gap:6px;
    font-size:10px;
    justify-content:flex-start;
  }
  #appView .navGroupSwitch::after{display:none}
  #appView .navGroupSwitchIcon{width:18px;height:18px}
  #appView .navGroupSwitchIcon svg{width:16px;height:16px}
  #appView #navMenu{
    margin-top:7px;
    padding:7px 0 0;
  }
  #appView #navMenu .navGroupTitle{display:none}
  #appView #navMenu .navGroupLinks{
    display:flex;
    gap:5px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  #appView #navMenu .navGroupLinks::-webkit-scrollbar{display:none}
  #appView #navMenu .navBtn{
    width:auto;
    flex:0 0 auto;
    white-space:nowrap;
    min-height:34px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
  }
  #appView #navMenu .navBtn::before{display:none}
  #appView #navMenu .navBtn.active{background:#fff;color:#1d4e9a}
  #appView .workspace{
    min-height:auto;
    padding:0 8px 20px;
  }
  #appView .workspaceHead{
    margin:0 -8px 12px;
    padding:10px 12px 12px;
  }
  #appView .workspaceHead h1{font-size:18px}
  #appView .workspacePageIcon{width:36px;height:36px;border-radius:10px}
  #appView .workspacePageIcon svg{width:20px;height:20px}
  #appView #home{overflow:visible;padding:0}
  #appView .workspaceTabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:10px;
    margin-bottom:12px;
  }
  #appView .workspaceTabs::-webkit-scrollbar{display:none}
  #appView .workspaceTab{
    flex:0 0 auto;
    min-height:38px;
    padding:8px 14px;
  }
  #appView .card{padding:14px;border-radius:12px}
  #appView .pageIntro h2{font-size:16px}
  #appView .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  #appView .navGroupMenu{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appView .workspaceTitleRow>div:first-child{column-gap:9px}
  #appView .workspaceHead .meta{display:none}
  #appView .grid{grid-template-columns:1fr 1fr}
  #appView .modalGrid2,
  #appView .modalGrid3,
  #appView .formInlineGrid{grid-template-columns:1fr}
}


/* Dedicated list -> detail workspace navigation */
.dedicatedWorkspaceBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:76px;
  z-index:12;
  border:1px solid #dbeafe;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
}
.dedicatedWorkspaceBar h2{margin:6px 0 0}
.dedicatedWorkspaceBar .sectionDesc{margin:4px 0 0}

/* Dedicated quote workspace: avoid nested sticky headers overlapping */
#appView [data-dedicated-quote-workspace="true"] .quoteEditorTopbar{
  position:static;
  top:auto;
  z-index:auto;
}
@media(max-width:720px){
  .dedicatedWorkspaceBar{
    position:static;
    align-items:stretch;
    flex-direction:column;
  }
  .dedicatedWorkspaceBar>.row{width:100%}
  .dedicatedWorkspaceBar>.row button{flex:1}
}


.customerRelatedFolderDivider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 12px;
  font-weight:700;
}
.customerRelatedFolderDivider::before,
.customerRelatedFolderDivider::after{
  content:"";
  height:1px;
  background:currentColor;
  opacity:.14;
  flex:1;
}
.customerRelatedM365Card{margin-top:0}


.knowledgeImageEditor{
  margin:16px 0;
  padding:14px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
}
.knowledgeImagePicker{cursor:pointer}
.knowledgeImageGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
  margin-top:12px;
}
.knowledgeImageCard{
  margin:0;
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.knowledgeImageCard img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.knowledgeImageCard>button{
  display:block;
  border:0;
  padding:0;
  width:100%;
  background:transparent;
  cursor:pointer;
}
.knowledgeImageCard figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  font-size:12px;
}
.knowledgeImageCard figcaption span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.knowledgeImageMissing{
  min-height:110px;
  display:grid;
  place-items:center;
  padding:12px;
  color:var(--muted,#64748b);
  background:#f8fafc;
}
.knowledgePendingGrid{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.knowledgePendingItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background:#f8fafc;
}
@media(max-width:720px){
  .knowledgeImageGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


.accountTypeGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.accountTypeCard{
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:150px;
  padding:18px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  transition:.16s ease;
}
.accountTypeCard:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.35);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.accountTypeCard.selected{
  border:2px solid #2563eb;
  background:#eff6ff;
}
.accountTypeCard strong{font-size:17px}
.accountTypeCard span{font-size:14px}
.accountTypeCard small{color:var(--muted,#64748b);line-height:1.5}

.accountCreateWizard{
  margin-top:18px;
  border-top:1px solid rgba(15,23,42,.10);
  padding-top:18px;
}
.accountWizardSteps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:14px;
}
.accountWizardStep{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border-radius:12px;
  background:#f8fafc;
  color:#64748b;
}
.accountWizardStep span{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border-radius:999px;
  background:#e2e8f0;
  font-weight:700;
}
.accountWizardStep small{font-size:12px;font-weight:700}
.accountWizardStep.active{
  background:#eff6ff;
  color:#1d4ed8;
}
.accountWizardStep.active span{
  background:#2563eb;
  color:#fff;
}
.accountWizardStep.done{
  background:#ecfdf5;
  color:#047857;
}
.accountWizardStep.done span{
  background:#10b981;
  color:#fff;
}
.accountWizardPanel{
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:18px;
  background:#fff;
}
.accountWizardTitle{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
}
.accountWizardTitle h3{margin:6px 0 0}
.accountWizardActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.accountRoleChoice,
.accountMethodGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.accountRoleChoice label,
.accountMethodCard{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
}
.accountRoleChoice label:has(input:checked),
.accountMethodCard.selected{
  border:2px solid #2563eb;
  background:#eff6ff;
}
.accountRoleChoice input,
.accountMethodCard input{accent-color:#2563eb}
.accountRoleChoice small,
.accountMethodCard small{color:var(--muted,#64748b);line-height:1.45}
.accountConfirmGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.accountConfirmGrid>div{
  padding:12px 14px;
  border-radius:12px;
  background:#f8fafc;
}
.accountConfirmGrid span{
  display:block;
  color:#64748b;
  font-size:12px;
  margin-bottom:4px;
}
.accountConfirmGrid strong{
  display:block;
  overflow-wrap:anywhere;
}

@media(max-width:820px){
  .accountTypeGrid{grid-template-columns:1fr}
  .accountTypeCard{min-height:auto}
  .accountWizardSteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .accountRoleChoice,.accountMethodGrid,.accountConfirmGrid{grid-template-columns:1fr}
  .accountWizardTitle{flex-direction:column}
  .accountWizardActions{position:sticky;bottom:0;background:#fff;padding-top:10px}
  .accountWizardActions button{flex:1}
}