/* Approved Branding mockup. Scoped to the Branding tab so tenant colors and
   unrelated administration cards keep their existing layout. */
#tab-branding{--branding-blue:#146ce6;--branding-ink:#0f1f3a;--branding-muted:#64748b;--branding-line:#d8e4f2;--branding-soft:#eef6ff}
#tab-branding>.brandingPanel{padding:18px!important;border:0!important;background:#f8fafc!important;color:#0f172a!important;box-shadow:none!important}
#tab-branding>.brandingPanel>.sectionTitle{display:block!important;min-height:0!important;height:auto!important;margin:0 0 8px!important;padding:0!important;border:0}
#tab-branding>.brandingPanel>.sectionTitle h3{font-size:25px;line-height:1.1;color:#0f172a!important;margin:0 0 4px}
#tab-branding>.brandingPanel>.sectionTitle small{font-size:13px;color:#64748b!important}
#tab-branding .brandingModeTabs{width:max-content;display:flex;gap:8px;margin:0 0 16px;padding:0;border:0;background:transparent}
#tab-branding .brandingModeTab{min-height:42px;padding:0 24px;border:1px solid #d8e4f2;border-radius:8px;background:#fff;color:#0f1f3a;font-weight:800}
#tab-branding .brandingModeTab.active{border-color:#146ce6;background:#146ce6;color:#fff;box-shadow:0 7px 18px rgba(20,108,230,.2)}

#tab-branding .brandingExecutiveLayout{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(360px,.96fr);gap:16px;align-items:stretch}
#tab-branding .brandingCompanyCard,#tab-branding .brandingCelebrationCard,#tab-branding .brandingUserPreference{border:1px solid #d8e4f2;border-radius:14px;background:#fff;color:#0f172a;box-shadow:0 8px 24px rgba(29,78,121,.06)}
#tab-branding .brandingCompanyCard{padding:16px;display:block;min-width:0}
#tab-branding .brandingCompanyCard h4{margin:0 0 14px;font-size:18px;color:#0f1f3a!important;-webkit-text-fill-color:#0f1f3a!important}
#tab-branding .brandingCompanyCard h5{margin:15px 0 8px;font-size:14px;color:#0f1f3a!important;-webkit-text-fill-color:#0f1f3a!important}
#tab-branding .brandingCompanyMetaGrid,#tab-branding .brandingUploadGrid,#tab-branding .brandingVisualGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#tab-branding .field{min-width:0}
#tab-branding .field>label:first-child{display:block;margin:0 0 5px;font-size:12px;font-weight:800;color:#0f1f3a!important;-webkit-text-fill-color:#0f1f3a!important}
#tab-branding input:not([type=checkbox]):not([type=color]),#tab-branding select{width:100%;min-height:38px;padding:7px 11px;border:1px solid #cbd5e1!important;border-radius:7px;background:#fff!important;color:#0f1f3a!important;-webkit-text-fill-color:#0f1f3a!important;font:inherit}
#tab-branding .brandingUploadDropzone{min-height:80px;border:1.5px dashed #9dc4f9;border-radius:8px;background:#fbfdff;display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;justify-content:center;align-content:center;column-gap:8px;margin:0!important;cursor:pointer;color:#146ce6!important;text-align:left}
#tab-branding .brandingUploadDropzone>span{grid-row:1/3;align-self:center;font-size:24px;font-weight:500}
#tab-branding .brandingUploadDropzone strong{font-size:13px;line-height:1.2}
#tab-branding .brandingUploadDropzone small{font-size:11px;color:#64748b;line-height:1.3}
#tab-branding .brandingUploadDropzone input{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0)}
#tab-branding .brandingRemoveAsset{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11px;color:#64748b!important;-webkit-text-fill-color:#64748b!important}

#tab-branding .brandingPaletteGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
#tab-branding .brandingCoreColors,#tab-branding #brandingThemeTokens,#tab-branding #brandingThemeTokenFields{display:contents}
#tab-branding .colorPickerRow{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;align-items:center}
#tab-branding .colorPickerRow input[type=color]{inline-size:42px;block-size:32px;padding:2px;border:1px solid #d8e4f2;border-radius:6px;background:#fff}
#tab-branding .colorPickerRow code{display:flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid #d8e4f2;border-radius:6px;background:#fff;color:#64748b!important;-webkit-text-fill-color:#64748b!important;font:700 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
#tab-branding #brandingThemeTokens>legend{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0)}
#tab-branding #brandingThemeTokens>p{display:none}
#tab-branding #brandingThemeTokenFields>.field{display:none}
#tab-branding #brandingThemeTokenFields>.field:has(#brandingToken-helpBackground),#tab-branding #brandingThemeTokenFields>.field:has(#brandingToken-textSecondary),#tab-branding #brandingThemeTokenFields>.field:has(#brandingToken-border),#tab-branding #brandingThemeTokenFields>.field:has(#brandingToken-cardBackground){display:block}
#tab-branding .brandingCoreColors>.field:nth-child(1){order:1}#tab-branding .brandingCoreColors>.field:nth-child(2){order:2}#tab-branding #brandingThemeTokenFields>.field:has(#brandingToken-helpBackground){order:3}#tab-branding #brandingThemeTokenFields>.field:has(#brandingToken-textSecondary){order:4}#tab-branding .brandingCoreColors>.field:nth-child(3){order:5}#tab-branding #brandingThemeTokenFields>.field:has(#brandingToken-cardBackground){order:6}#tab-branding .brandingCoreColors>.field:nth-child(4){order:7}#tab-branding #brandingThemeTokenFields>.field:has(#brandingToken-border){order:8}
#tab-branding .brandingVisualGrid{margin-top:2px}
#tab-branding .brandingActions{display:flex;gap:10px;align-items:center;margin-top:14px}
#tab-branding .brandingActions .btn{min-height:40px;border-radius:8px}
#tab-branding .brandingActions .primary{padding-inline:22px}
#tab-branding .brandingAuxAction{position:absolute!important;inline-size:1px!important;block-size:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;padding:0!important;border:0!important}

#tab-branding .brandingPreviewStack{display:grid;grid-template-rows:minmax(0,1.55fr) minmax(150px,.65fr);gap:16px;min-width:0}
#tab-branding #brandingPreview,#tab-branding .brandingCelebrationPreview{position:relative;overflow:hidden;border:1px solid #1c3d66!important;border-radius:14px;background:linear-gradient(135deg,#07111f 0%,#071a34 54%,#0b3975 100%)!important;color:#fff!important;box-shadow:0 10px 30px rgba(3,18,41,.18)}
#tab-branding #brandingPreview{min-height:360px!important;padding:16px 26px!important;display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;gap:5px!important;text-align:center}
#tab-branding #brandingPreview:before,#tab-branding #brandingPreview:after{content:"";position:absolute;border-radius:52% 48% 0 0;background:linear-gradient(140deg,transparent,rgba(21,96,180,.22));pointer-events:none}
#tab-branding #brandingPreview:before{width:72%;height:48%;right:-18%;top:-20%;transform:rotate(-8deg)}
#tab-branding #brandingPreview:after{width:68%;height:46%;left:-24%;bottom:-26%;transform:rotate(18deg)}
#tab-branding #brandingPreview>*{position:relative;z-index:1}
#tab-branding #brandingPreview>.eyebrow{margin-bottom:5px;padding:4px 13px;border-radius:999px;background:#fff!important;color:#146ce6!important;box-shadow:0 1px 8px rgba(0,0,0,.15);font-size:10px;font-weight:900;letter-spacing:.02em}
#tab-branding #brandingPreviewLogo.brandingPreviewLogo{width:48px!important;height:48px!important;min-height:48px!important;margin:0!important;background:transparent!important;overflow:hidden!important}
#tab-branding #brandingPreviewLogo.brandingPreviewLogo img{width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;object-fit:contain!important}
#tab-branding .brandingPreviewInitials{font-size:27px;line-height:1;letter-spacing:.04em}
#tab-branding #brandingPreview h2{margin:0;font-size:17px;color:#fff!important}
#tab-branding #brandingPreview p{margin:0 0 8px;color:#c8d8eb!important;font-size:11px}
#tab-branding #brandingPreview .brandingPreviewComponents{width:min(260px,86%);padding:12px!important;display:grid!important;grid-template-columns:1fr!important;gap:3px!important;border:1px solid rgba(196,216,240,.28)!important;border-radius:12px!important;background:rgba(3,13,28,.52)!important;text-align:left}
#tab-branding #brandingPreview .brandingPreviewComponents>div{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border-radius:7px;color:#d4dfec;font-size:12px;font-weight:750}
#tab-branding #brandingPreview .brandingPreviewComponents>.active{background:#fff;color:#24344e;box-shadow:0 3px 10px rgba(0,0,0,.22)}
#tab-branding .brandingCelebrationPreview{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
#tab-branding .brandingCelebrationPreview strong{font-size:14px}.brandingCelebrationPreview p{margin:0;color:#b9c9dd;font-size:11px}
#tab-branding .brandingTrophy{font-size:38px;filter:drop-shadow(0 0 9px rgba(255,193,7,.55))}
#tab-branding .brandingConfetti i{position:absolute;width:7px;height:14px;border-radius:2px;background:#146ce6;transform:rotate(35deg)}
#tab-branding .brandingConfetti i:nth-child(1){left:15%;top:22%;background:#0bbf9a}.brandingConfetti i:nth-child(2){left:28%;bottom:20%;background:#ffd23f}.brandingConfetti i:nth-child(3){right:17%;top:22%;background:#146ce6}.brandingConfetti i:nth-child(4){right:29%;bottom:18%;background:#f7c948}.brandingConfetti i:nth-child(5){left:9%;bottom:32%;background:#8b5cf6}.brandingConfetti i:nth-child(6){right:9%;bottom:29%;background:#0bbf9a}

#tab-branding .brandingCelebrationCard{margin:14px 0 0!important;padding:14px 16px!important}
#tab-branding .brandingCelebrationCard legend{padding:0;font-size:17px;font-weight:900;color:#0f1f3a!important;-webkit-text-fill-color:#0f1f3a!important}
#tab-branding .brandingCelebrationCard>p{margin:2px 0 8px;color:#64748b!important;-webkit-text-fill-color:#64748b!important;font-size:11px}
#tab-branding .brandingCelebrationCard .winToggle{margin:6px 0 10px}
#tab-branding .brandingCelebrationCard .formGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 12px}
#tab-branding .brandingCelebrationCard .brandingAudienceField{grid-column:span 2}
#tab-branding .brandingCelebrationCard .winChecks{display:flex;justify-content:flex-end;gap:15px;margin:10px 0;flex-wrap:wrap}
#tab-branding .brandingCelebrationCard .winChecks label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:750;white-space:nowrap}
#tab-branding #previewWinCelebrationBtn{min-height:38px;padding-inline:18px;border-color:#9dc4f9;color:#146ce6;background:#edf6ff}
#tab-branding .brandingUserPreference{margin-top:14px!important;padding:11px 16px!important;border-radius:12px!important}
#tab-branding .brandingCelebrationCard :is(.winToggle,.winChecks label),#tab-branding .brandingUserPreference :is(strong,small){color:#0f1f3a!important;-webkit-text-fill-color:#0f1f3a!important}
#tab-branding .brandingUserPreference small{color:#64748b!important;-webkit-text-fill-color:#64748b!important}
#tab-branding #brandingMode-dark>.brandingLayout>.brandingForm{padding:16px;border:1px solid #d8e4f2;border-radius:14px;background:#fff;color:#0f172a}
#tab-branding .processResult:empty{display:none}

@media (max-width: 1100px){
  #tab-branding .brandingExecutiveLayout{grid-template-columns:1fr}
  #tab-branding .brandingPreviewStack{grid-template-columns:1fr 1fr;grid-template-rows:none}
  #tab-branding #brandingPreview,#tab-branding .brandingCelebrationPreview{min-height:240px!important}
  #tab-branding .brandingCelebrationCard .formGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 680px){
  #tab-branding>.brandingPanel{padding:12px!important}
  #tab-branding .brandingModeTabs{width:100%;display:grid;grid-template-columns:1fr 1fr}
  #tab-branding .brandingModeTab{padding-inline:8px}
  #tab-branding .brandingCompanyMetaGrid,#tab-branding .brandingUploadGrid,#tab-branding .brandingVisualGrid,#tab-branding .brandingPaletteGrid,#tab-branding .brandingPreviewStack,#tab-branding .brandingCelebrationCard .formGrid{grid-template-columns:1fr}
  #tab-branding .brandingCelebrationCard .brandingAudienceField{grid-column:auto}
  #tab-branding .brandingActions{display:grid;grid-template-columns:1fr}
  #tab-branding .brandingActions .btn{width:100%}
  #tab-branding .brandingCelebrationCard .winChecks{display:grid;grid-template-columns:1fr 1fr;justify-content:start}
  #tab-branding .brandingUserPreference{grid-template-columns:1fr!important}
}