@import url('/customer/social-calendar-polish.css?v=20260813d');
@import url('/customer/social-redesign-v2.css?v=20260813b');

body{overflow-x:hidden}
.route-loading-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;background:radial-gradient(circle at 50% 42%,rgba(58,33,20,.42),transparent 30%),linear-gradient(180deg,#090706,#080908 52%,#060606);color:#f2ece8;text-align:center}
.route-loading-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font:800 18px Manrope;letter-spacing:-.02em}
.route-loading-brand .brand-mark{margin:0!important;width:52px;height:52px;border-radius:16px;box-shadow:0 14px 42px rgba(255,107,0,.18),inset 0 1px 0 rgba(255,255,255,.28)}
.route-loading-card{display:flex;align-items:center;justify-content:center;gap:10px;min-width:220px;padding:11px 16px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.025);color:#8e8782;font-size:12px;box-shadow:0 16px 46px rgba(0,0,0,.22)}
.route-loading-card i{width:16px;height:16px;flex:0 0 16px;border:2px solid #3a302a;border-top-color:var(--green);border-radius:50%;animation:route-spin .8s linear infinite}
@keyframes route-spin{to{transform:rotate(360deg)}}

/* Live /app Socials screen — match the approved command-center mockup. */
#customer-shell .socials-workspace{gap:14px!important;max-width:none!important}
#customer-shell .socials-toolbar{padding:4px 0 10px!important;border:0!important;background:transparent!important}
#customer-shell .socials-toolbar .eyebrow{display:none!important}
#customer-shell .socials-toolbar h2{font-size:28px!important;margin:0 0 5px!important}
#customer-shell .socials-toolbar p{margin:0!important;color:#8e8e96!important;font-size:11px!important}
#customer-shell .socials-toolbar [data-workspace-action="social"]{font-size:0!important;background:#f3f3f4!important;color:#111!important;border-color:#fff!important;min-width:132px!important;height:40px!important}
#customer-shell .socials-toolbar [data-workspace-action="social"]::before{content:'+  Create Post';font-size:11px!important;font-weight:800!important}

/* Turn the existing connection overview into the compact top summary bar. */
#customer-shell .social-overview{display:flex!important;min-height:76px!important;padding:14px 18px!important;border:1px solid #ffffff0d!important;border-radius:14px!important;background:linear-gradient(145deg,#171719,#111113)!important}
#customer-shell .social-overview-count{font-size:30px!important;color:#fff!important}
#customer-shell .social-overview-count small{font-size:12px!important;color:#777780!important}
#customer-shell .social-overview b{font-size:12px!important}
#customer-shell .social-overview p{font-size:9px!important;color:#7f7f87!important}
#customer-shell .social-overview-pips i{height:7px!important;min-width:32px!important;border-radius:99px!important;background:#29292e!important}

/* Calendar: five readable columns, no horizontal crop. */
#customer-shell .social-calendar{box-shadow:0 18px 50px #00000024!important}
#customer-shell .social-calendar-days{width:100%!important;min-width:0!important}
#customer-shell .social-calendar-days>article{min-width:0!important;min-height:300px!important}
#customer-shell .calendar-post{min-height:62px!important}
#customer-shell .calendar-post>small{font-size:9.5px!important}
#customer-shell .calendar-platform{width:22px!important;height:22px!important}

/* Queue becomes a compact management table instead of oversized cards. */
#customer-shell .social-queue-primary{box-shadow:0 18px 50px #00000020!important}
#customer-shell .social-queue-card{min-height:86px!important}
#customer-shell .social-queue-media{width:116px!important;height:64px!important}
#customer-shell .social-queue-copy h4{font-size:11px!important}
#customer-shell .social-queue-copy>p{font-size:8.5px!important}

/* Keep connected accounts lower-priority and compact below scheduling. */
#customer-shell .social-account-grid{margin-top:4px!important}
#customer-shell .social-account-card{opacity:.93!important}

@media(max-width:1200px){
  #customer-shell .social-calendar-days{grid-template-columns:repeat(5,minmax(180px,1fr))!important;overflow-x:auto!important}
  #customer-shell .social-calendar-days>article:nth-child(n){display:block!important}
  #customer-shell .social-calendar-days>article{min-width:180px!important}
  #customer-shell .social-queue-card{grid-template-columns:110px 120px minmax(210px,1fr) 150px 80px!important}
}
@media(max-width:760px){
  .route-loading-shell{min-height:100dvh;padding:24px}
  .route-loading-brand{font-size:17px}
  .route-loading-card{min-width:200px}
  #customer-shell .social-overview{align-items:flex-start!important;flex-direction:column!important}
  #customer-shell .social-calendar-days{display:flex!important}
  #customer-shell .social-calendar-days>article{min-width:86%!important}
}