/* Brandloom Modern UI - visual layer only. No backend dependencies. */
:root{
  --ui-radius:18px;
  --ui-radius-sm:12px;
  --ui-shadow:0 18px 50px rgba(0,0,0,.18);
  --ui-shadow-hover:0 24px 70px rgba(0,0,0,.28);
  --ui-gradient:linear-gradient(135deg,var(--violet) 0%,var(--violet-deep) 55%,var(--teal) 140%);
}
html,body{min-height:100%;}
body{background:
 radial-gradient(circle at 12% 0%,rgba(var(--tblr-primary-rgb),.14),transparent 28rem),
 radial-gradient(circle at 92% 12%,rgba(63,224,197,.09),transparent 24rem),
 var(--bg)!important;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 28%);}
.page-root.has-sidebar{gap:0;}
.sidebar{width:248px!important;padding:18px 14px 16px!important;background:rgba(15,20,32,.82)!important;border-right:1px solid rgba(255,255,255,.08)!important;box-shadow:20px 0 60px rgba(0,0,0,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
:root[data-theme="light"] .sidebar{background:rgba(255,255,255,.86)!important;border-right-color:rgba(10,14,26,.08)!important;box-shadow:15px 0 45px rgba(40,35,80,.08);}
.sidebar-brand{padding:8px 10px 20px!important;margin-bottom:16px!important;border-bottom:1px solid var(--border)!important;}
.sidebar-brand .brand-logo{max-width:174px!important;}
.sidebar-nav{gap:6px!important;padding:0!important;}
.sidebar-nav a{position:relative;padding:11px 13px!important;border-radius:12px!important;font-size:13.5px!important;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease!important;}
.sidebar-nav a:before{content:"";width:4px;height:0;border-radius:9px;background:linear-gradient(180deg,var(--violet),var(--teal));position:absolute;left:0;top:50%;transform:translateY(-50%);transition:height .18s ease;}
.sidebar-nav a:hover{transform:translateX(3px);background:rgba(var(--tblr-primary-rgb),.09)!important;text-decoration:none!important;}
.sidebar-nav a.active{background:linear-gradient(90deg,rgba(var(--tblr-primary-rgb),.17),rgba(63,224,197,.04))!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px rgba(var(--tblr-primary-rgb),.12),0 8px 22px rgba(0,0,0,.08);}
.sidebar-nav a.active:before{height:22px;}
.sidebar-user{margin-top:auto!important;padding:14px 10px 0!important;border-top:1px solid var(--border)!important;}
.sidebar-user span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:8px;font-size:11px!important;color:var(--text-faint)!important;}
.sidebar-user a{font-size:12px;}
.page-main{min-width:0!important;}
.topbar{position:sticky;top:0;z-index:40;padding:14px 28px!important;background:rgba(15,20,32,.72)!important;border-bottom:1px solid var(--border)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
:root[data-theme="light"] .topbar{background:rgba(255,255,255,.78)!important;}
.topbar .user{gap:18px!important;}
.topbar .user a{font-size:12px;font-weight:600;}
.wrap{max-width:1440px!important;padding:38px 42px 70px!important;}
.wrap>h1:first-child{font-size:34px!important;letter-spacing:-1.2px;margin-bottom:5px!important;background:linear-gradient(110deg,var(--text) 15%,var(--violet) 70%,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;}
.wrap>p.text-secondary:first-of-type{font-size:14px!important;margin-bottom:28px!important;color:var(--muted)!important;}
.card{border:1px solid var(--border)!important;border-radius:var(--ui-radius)!important;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;box-shadow:0 10px 35px rgba(0,0,0,.12)!important;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
:root[data-theme="light"] .card{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,245,251,.92))!important;box-shadow:0 10px 30px rgba(44,38,85,.07)!important;}
.card:hover{border-color:rgba(var(--tblr-primary-rgb),.25)!important;box-shadow:var(--ui-shadow)!important;}
.card-header{padding:18px 22px!important;border-bottom:1px solid var(--border)!important;background:rgba(255,255,255,.018)!important;}
.card-body{padding:22px!important;}
.card-title{font-size:16px!important;font-weight:700!important;letter-spacing:-.2px;}
.form-label{font-size:12px!important;font-weight:700!important;color:var(--muted)!important;letter-spacing:.01em;}
.form-control,.form-select{min-height:44px!important;border-radius:12px!important;border:1px solid var(--border-strong)!important;background:var(--input-bg)!important;color:var(--text)!important;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;}
.form-control:focus,.form-select:focus{border-color:rgba(var(--tblr-primary-rgb),.8)!important;box-shadow:0 0 0 4px rgba(var(--tblr-primary-rgb),.12),0 8px 20px rgba(var(--tblr-primary-rgb),.08)!important;}
.form-control:focus{transform:translateY(-1px);}
/* form-select (native <select>) deliberately excluded from the lift transform above --
   a CSS transform on the <select> ELEMENT ITSELF (not just an ancestor) is a known
   Chromium quirk that breaks the native dropdown popup's own positioning the instant
   the select gets focus (which happens right as it opens), so combined with .card's
   overflow:hidden (rounded-corner clipping) the popup rendered clipped against the
   card boundary instead of opening freely above/below it -- real bug, reported via a
   live screenshot (test_output/WorkflowSelectionIssue.png) showing exactly this on
   the lead-detail Workflow picker, confirmed also affecting Add Lead's own selects. */
.btn{border-radius:11px!important;font-weight:700!important;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-primary{border:0!important;background:var(--ui-gradient)!important;box-shadow:0 10px 24px rgba(var(--tblr-primary-rgb),.25)!important;}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 14px 32px rgba(var(--tblr-primary-rgb),.35)!important;}
.btn-outline-primary{border-color:rgba(var(--tblr-primary-rgb),.38)!important;color:var(--violet)!important;background:rgba(var(--tblr-primary-rgb),.04)!important;}
.btn-outline-primary:hover{background:rgba(var(--tblr-primary-rgb),.1)!important;}
.btn-check:checked+.btn-outline-primary{background:var(--ui-gradient)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(var(--tblr-primary-rgb),.22);}
.list-group{gap:9px;display:flex;flex-direction:column;}
.list-group-item{border:1px solid var(--border)!important;border-radius:14px!important;background:rgba(255,255,255,.025)!important;color:var(--text)!important;padding:16px 18px!important;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.list-group-item:hover{transform:translateX(4px);border-color:rgba(var(--tblr-primary-rgb),.35)!important;background:rgba(var(--tblr-primary-rgb),.07)!important;box-shadow:0 12px 28px rgba(0,0,0,.1);}
:root[data-theme="light"] .list-group-item{background:rgba(255,255,255,.82)!important;}
.form-check-input{border-radius:6px!important;}
.form-text{font-size:11.5px!important;line-height:1.55!important;color:var(--text-faint)!important;}
.flash,.flashes .flash{border-radius:12px!important;border:1px solid rgba(63,224,197,.22)!important;box-shadow:0 12px 28px rgba(0,0,0,.1)!important;}
.empty{border:1px dashed var(--border-strong)!important;border-radius:14px!important;padding:30px!important;text-align:center;color:var(--muted)!important;background:rgba(var(--tblr-primary-rgb),.025);}
@media(max-width:900px){
 .page-root.has-sidebar{display:block!important;}
 .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:100;width:82px!important;padding:16px 9px!important;}
 .sidebar-brand{padding:8px 4px 16px!important;justify-content:center!important;}
 .sidebar-brand .brand-logo{max-width:48px!important;object-fit:cover;object-position:left;}
 .sidebar-nav a{font-size:0!important;text-align:center;padding:13px 6px!important;}
 .sidebar-nav a:after{content:"•";font-size:20px;color:currentColor;opacity:.8;}
 .sidebar-user{font-size:0!important;text-align:center;}
 .sidebar-user span{display:none!important;}
 .sidebar-user a{font-size:0;}
 .sidebar-user a:after{content:"↗";font-size:18px;}
 .page-root.has-sidebar .page-main{margin-left:82px;}
 .wrap{padding:28px 20px 50px!important;}
}
@media(max-width:600px){
 .topbar{padding:12px 16px!important;}
 .topbar .user a:not(:last-child),.topbar .user span{display:none;}
 .wrap{padding:22px 14px 42px!important;}
 .wrap>h1:first-child{font-size:28px!important;}
 .card-body{padding:17px!important;}
 .card-header{padding:15px 17px!important;}
 .row{--tblr-gutter-x:0.8rem;}
 .list-group-item{padding:14px!important;}
 .btn-group.w-100{display:flex;}
 .btn-group.w-100 .btn{flex:1;}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}

/* Client/team brand-portal sidebar (templates/base.html's is_brand_portal_shell)
   -- off-canvas + hamburger below 900px instead of the icon-rail collapse
   above. That collapse assumes every .sidebar-nav a has an icon (true for the
   agency sidebar it was designed for) and hides the text label via
   font-size:0, falling back to a "•" -- but this sidebar's links are plain
   text with no icon, so that left nothing but a column of dots, and this
   sidebar also carries a brand header/group labels/profile widget the
   icon-rail rules above never accounted for either. All !important here to
   win over the equal-or-lower-specificity !important rules above. */
@media(max-width:900px){
  .page-root.brand-portal-shell{display:flex!important;}
  .page-root.brand-portal-shell .sidebar{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;z-index:300!important;
    width:270px!important;max-width:82vw!important;padding:18px 14px 16px!important;
    /* flex-wrap:nowrap is load-bearing, not a default -- base.html's OWN
       @media(max-width:820px){.sidebar{flex-wrap:wrap;...}} (written for the
       agency sidebar's horizontal icon-row mobile treatment) is unscoped, so
       it hits this sidebar too and has no !important. Left unset here, that
       wrap + this rule's flex-direction:column combine into a MULTI-COLUMN
       wrap once content exceeds 100vh: back-link/brand-header/nav filled one
       column, then the profile widget and sidebar-user each restarted at the
       top of a phantom second column -- exactly the "floating" misplaced
       content seen live, 2026-09-04 screenshots. */
    flex-direction:column!important;flex-wrap:nowrap!important;height:100vh!important;overflow-y:auto!important;border-right:1px solid var(--border)!important;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:20px 0 60px rgba(0,0,0,.25)!important;
    /* Fully opaque, not the ambient sidebar's translucent-glass background --
       that's fine for the agency sidebar (sits sticky BESIDE the page, so
       there's nothing behind it to show through) but this sidebar sits
       fixed ON TOP of the page. If backdrop-filter's blur doesn't render
       (seen live, 2026-09-04 screenshots) the ~85%-opacity glass background
       alone isn't enough to hide the page underneath -- sharp text/cards
       bled straight through, making the profile widget look like it was
       floating loose in the main content. */
    background:var(--panel)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .page-root.brand-portal-shell .sidebar.is-open{transform:translateX(0);}
  .page-root.brand-portal-shell .sidebar-brand-portal{padding:4px 18px 16px!important;justify-content:flex-start!important;}
  .page-root.brand-portal-shell .sidebar-brand-portal .brand-logo-sq{max-width:none!important;}
  .page-root.brand-portal-shell .sidebar-nav{flex-direction:column!important;flex-wrap:nowrap!important;padding:0 10px!important;}
  .page-root.brand-portal-shell .sidebar-nav a{font-size:13.5px!important;text-align:left!important;padding:11px 13px!important;}
  .page-root.brand-portal-shell .sidebar-nav a:after{content:none!important;}
  .page-root.brand-portal-shell .sidebar-nav-group-label{display:block!important;}
  /* Sticky to the sidebar's own bottom edge, not just naturally-last in flow --
     with 10+ nav links plus the profile widget, this row landed below the
     fold with no visual hint to scroll for it, so Sign out was effectively
     unreachable (reported live, 2026-09-04). Sticks to the viewport-visible
     bottom of the (still-scrollable) sidebar instead. */
  .page-root.brand-portal-shell .sidebar-user{font-size:inherit!important;text-align:left!important;flex-direction:column!important;
    padding:14px 18px!important;margin-top:14px!important;border-top:1px solid var(--border)!important;
    position:sticky!important;bottom:0!important;background:var(--panel)!important;flex-shrink:0!important;}
  .page-root.brand-portal-shell .sidebar-user span{display:block!important;}
  .page-root.brand-portal-shell .sidebar-user a:after{content:none!important;}
  .page-root.brand-portal-shell .page-main{margin-left:0!important;}
  .sidebar-mobile-toggle{display:inline-flex!important;}
  /* base.html's .sidebar-backdrop defaults to display:none -- .is-open only
     toggles opacity/pointer-events, which never matter on an element that
     was never displayed in the first place. Without this, the backdrop
     never rendered and never received the outside-click that's supposed to
     close the sidebar (reported live, 2026-09-04). */
  .sidebar-backdrop{display:block;}
}