/* =========================================================
   SNS AI STUDIO DASHBOARD V6
   Reference-image based layout
========================================================= */

:root{
  --dash-bg:#f7f3eb;
  --dash-paper:#fffdfa;

  --dash-dark:#10251d;
  --dash-dark2:#19382a;
  --dash-dark3:#214735;

  --dash-green:#19724f;
  --dash-green2:#45b580;

  --dash-mint:#91e9bd;
  --dash-mint2:#dff7eb;

  --dash-text:#172920;
  --dash-muted:#6d7d75;

  --dash-line:rgba(34,78,57,.12);

  --dash-shadow:
    0 12px 32px rgba(25,55,40,.08);

  --dash-radius:20px;
}

/* =========================================================
   DOCUMENT
========================================================= */

html,
body{
  width:100% !important;
  min-width:0 !important;
  min-height:100% !important;

  margin:0 !important;

  overflow-x:hidden !important;

  background:#10231b !important;
}

*{
  box-sizing:border-box;
}

body{
  color:var(--dash-text) !important;
}

#app{
  width:100% !important;

  max-width:none !important;

  min-width:0 !important;

  min-height:100vh !important;

  overflow:visible !important;
}

/* =========================================================
   MAIN SHELL
========================================================= */

.shell{
  width:100% !important;

  max-width:none !important;

  min-height:100vh !important;

  margin:0 !important;

  background:
    #f8f4ec !important;
}

/* =========================================================
   TOP HEADER
========================================================= */

.topbar{
  position:sticky !important;

  top:0 !important;

  z-index:100 !important;

  min-height:68px !important;

  display:flex !important;

  align-items:center !important;

  gap:16px !important;

  padding:
    10px 26px !important;

  color:#fff !important;

  background:
    linear-gradient(
      110deg,
      #123126 0%,
      #174532 65%,
      #0e3325 100%
    ) !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;

  box-shadow:
    0 5px 18px rgba(0,0,0,.13) !important;
}

.brand{
  color:#fff !important;

  font-size:1.12rem !important;

  font-weight:950 !important;

  letter-spacing:.02em !important;
}

.account-switch{
  margin-left:0 !important;
}

.topbar .pill{
  min-height:46px !important;

  padding:0 17px !important;

  color:#182b22 !important;

  background:#fffdfa !important;

  border:
    1px solid rgba(255,255,255,.38) !important;

  border-radius:14px !important;

  box-shadow:
    0 4px 14px rgba(0,0,0,.12) !important;

  font-weight:800 !important;
}

.topbar .btn.tertiary{
  margin-left:auto !important;

  color:#fff !important;

  font-weight:800 !important;
}

/* =========================================================
   3 COLUMN LAYOUT
========================================================= */

.layout{
  display:grid !important;

  grid-template-columns:
    220px minmax(0,1fr) 318px !important;

  width:100% !important;

  min-width:0 !important;

  min-height:
    calc(100vh - 68px) !important;
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{
  position:sticky !important;

  top:68px !important;

  align-self:start !important;

  height:
    calc(100vh - 68px) !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  padding:
    24px 14px !important;

  color:#fff !important;

  background:
    radial-gradient(
      circle at 0% 90%,
      rgba(67,155,111,.13),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #142920,
      #102219
    ) !important;

  border-right:
    1px solid rgba(255,255,255,.06) !important;
}

.sidebar::before{
  content:"AI OFFICE";

  display:block;

  margin:
    0 12px 20px;

  color:
    rgba(147,221,182,.68);

  font-size:.68rem;

  font-weight:900;

  letter-spacing:.22em;
}

.nav{
  display:grid !important;

  gap:8px !important;
}

.nav button{
  width:100% !important;

  min-height:54px !important;

  margin:0 !important;

  padding:
    0 15px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:flex-start !important;

  gap:13px !important;

  color:#edf7f1 !important;

  background:transparent !important;

  border:
    1px solid transparent !important;

  border-radius:15px !important;

  font-size:.94rem !important;

  font-weight:800 !important;

  text-align:left !important;

  transition:.18s ease !important;
}

.nav button:hover{
  color:#fff !important;

  background:
    rgba(255,255,255,.065) !important;

  transform:
    translateX(2px);
}

.nav button.active{
  color:#12392a !important;

  background:
    linear-gradient(
      135deg,
      #aef1d1,
      #72dba9
    ) !important;

  border-color:
    rgba(255,255,255,.36) !important;

  box-shadow:
    0 10px 26px rgba(46,181,123,.19) !important;

  font-weight:950 !important;
}

/* =========================================================
   MAIN CONTENT
========================================================= */

.content{
  grid-column:2 !important;

  min-width:0 !important;

  width:100% !important;

  padding:
    22px 24px 110px !important;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(87,185,137,.09),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #fcf9f3,
      #f5f1e8
    ) !important;
}

/* =========================================================
   HOME HEADER
========================================================= */

.dash-heading-row{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  align-items:start;

  gap:28px;

  margin-bottom:17px;
}

.dash-heading-left{
  min-width:0;
}

.eyebrow{
  display:inline-flex !important;

  align-items:center !important;

  gap:7px !important;

  margin-bottom:4px !important;

  color:#247858 !important;

  font-size:.72rem !important;

  font-weight:950 !important;

  letter-spacing:.13em !important;
}

.eyebrow::before{
  content:"";

  width:8px;

  height:8px;

  border-radius:50%;

  background:#47bd85;

  box-shadow:
    0 0 0 5px rgba(71,189,133,.12);
}

.title{
  margin:
    6px 0 7px !important;

  color:#12271e !important;

  font-size:
    clamp(2.15rem,3.5vw,3.4rem) !important;

  line-height:1.02 !important;

  font-weight:950 !important;

  letter-spacing:-.045em !important;
}

.sub{
  margin:0 !important;

  color:#68786f !important;

  font-size:.96rem !important;
}

.dash-home-meta{
  min-width:320px;

  display:grid;

  gap:11px;

  justify-items:end;
}

.dash-date{
  color:#193a2c;

  font-size:.90rem;

  font-weight:850;
}

.dash-greeting{
  width:100%;

  max-width:340px;

  min-height:78px;

  display:flex;

  align-items:center;

  gap:13px;

  padding:
    12px 17px;

  background:
    linear-gradient(
      135deg,
      #fff7df,
      #fffdf6
    );

  border:
    1px solid rgba(222,179,85,.18);

  border-radius:18px;

  box-shadow:
    0 9px 24px rgba(116,88,30,.07);
}

.dash-greeting-icon{
  font-size:2rem;
}

.dash-greeting strong{
  display:block;

  color:#24372d;

  font-size:.88rem;
}

.dash-greeting span{
  display:block;

  margin-top:3px;

  color:#78837c;

  font-size:.72rem;
}

/* =========================================================
   HERO
========================================================= */

#dashHero{
  position:relative;

  min-height:330px;

  margin-bottom:17px;

  overflow:hidden;

  display:grid;

  grid-template-columns:
    48% 52%;

  color:#fff;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      #10291f,
      #183c2d
    );

  box-shadow:
    0 15px 42px rgba(25,56,41,.14);
}

.dash-hero-copy{
  position:relative;

  z-index:3;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    30px 10px 30px 31px;
}

.dash-hero-kicker{
  color:#82dcb1;

  font-size:.70rem;

  font-weight:950;

  letter-spacing:.19em;
}

.dash-hero-title{
  margin:
    11px 0 13px;

  color:#fff;

  font-size:
    clamp(2rem,3vw,3rem);

  line-height:1.05;

  font-weight:950;

  letter-spacing:-.045em;
}

.dash-hero-copy p{
  max-width:530px;

  margin:
    0 0 18px;

  color:#d4dfd8 !important;

  font-size:.84rem;

  line-height:1.72;
}

.dash-hero-actions{
  display:flex;

  align-items:center;

  gap:13px;

  flex-wrap:wrap;
}

.dash-hero-btn{
  min-height:48px;

  padding:
    0 21px;

  color:#14382a;

  background:
    linear-gradient(
      135deg,
      #baf5d8,
      #76dfad
    );

  border:
    1px solid rgba(255,255,255,.56);

  border-radius:14px;

  font:inherit;

  font-weight:950;

  cursor:pointer;

  box-shadow:
    0 9px 22px rgba(70,199,142,.19);
}

.dash-online{
  display:inline-flex;

  align-items:center;

  gap:8px;

  color:#c6eed8;

  font-size:.72rem;

  font-weight:900;
}

.dash-online::before{
  content:"";

  width:8px;

  height:8px;

  border-radius:50%;

  background:#58e99b;

  box-shadow:
    0 0 12px rgba(88,233,155,.78);
}

.dash-hero-art{
  position:relative;

  min-width:0;

  background-image:
    linear-gradient(
      90deg,
      #18382b 0%,
      rgba(24,56,43,.22) 34%,
      rgba(0,0,0,.02) 100%
    ),
    url("./assets/ai-team/ai-team-sheet.png");

  background-repeat:no-repeat;

  background-size:
    100% 100%,
    cover;

  background-position:
    center,
    center 42%;
}

.dash-hero-art::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      to right,
      rgba(20,54,40,.74),
      rgba(20,54,40,.05) 46%
    );
}

/* =========================================================
   METRIC CARDS
========================================================= */

.dash-metrics{
  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  gap:14px !important;

  margin-bottom:17px;
}

.dash-metrics .card{
  min-height:118px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:18px 20px !important;

  background:
    rgba(255,255,255,.91) !important;

  border:
    1px solid rgba(43,84,64,.09) !important;

  border-radius:19px !important;

  box-shadow:
    0 9px 26px rgba(38,62,49,.065) !important;
}

.metric{
  color:#19714f !important;

  font-size:2rem !important;

  font-weight:950 !important;
}

/* =========================================================
   QUICK ACTION STRIP
========================================================= */

#dashQuickActions{
  margin-bottom:17px;

  padding:14px 15px 16px;

  background:
    rgba(255,255,255,.90);

  border:
    1px solid rgba(43,84,64,.09);

  border-radius:19px;

  box-shadow:
    0 9px 26px rgba(38,62,49,.06);
}

.dash-quick-head{
  display:flex;

  align-items:center;

  gap:10px;

  margin:
    0 3px 11px;

  color:#22372c;

  font-weight:950;
}

.dash-quick-head span{
  color:#7c8981;

  font-size:.72rem;

  font-weight:500;
}

.dash-quick-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:10px;
}

.dash-action{
  min-height:70px;

  display:flex;

  align-items:center;

  gap:11px;

  padding:
    10px 12px;

  border:0;

  border-radius:15px;

  text-align:left;

  cursor:pointer;

  font:inherit;

  transition:.16s ease;
}

.dash-action:hover{
  transform:translateY(-2px);
}

.dash-action:nth-child(1){
  background:#fff0f5;
}

.dash-action:nth-child(2){
  background:#edf5ff;
}

.dash-action:nth-child(3){
  background:#f5edff;
}

.dash-action:nth-child(4){
  background:#fff4df;
}

.dash-action-icon{
  width:40px;

  height:40px;

  display:grid;

  place-items:center;

  flex:none;

  border-radius:50%;

  font-size:1.15rem;

  background:rgba(255,255,255,.75);
}

.dash-action strong{
  display:block;

  color:#27392f;

  font-size:.77rem;
}

.dash-action small{
  display:block;

  margin-top:3px;

  color:#718078 !important;

  font-size:.64rem;
}

/* =========================================================
   CARDS
========================================================= */

.card{
  background:
    rgba(255,255,255,.91) !important;

  border:
    1px solid rgba(42,83,63,.09) !important;

  border-radius:
    19px !important;

  box-shadow:
    0 9px 26px rgba(38,62,49,.06) !important;
}

/* =========================================================
   AI SUGGESTIONS
========================================================= */

.dash-suggestion-card{
  border-left:
    4px solid #39a775 !important;
}

/* =========================================================
   RIGHT AI RAIL
========================================================= */

#dashAiRail{
  grid-column:3;

  position:sticky;

  top:68px;

  align-self:start;

  height:
    calc(100vh - 68px);

  overflow-y:auto;
  overflow-x:hidden;

  padding:
    13px 14px 20px;

  background:
    rgba(255,255,255,.96);

  border-left:
    1px solid rgba(37,80,59,.10);

  box-shadow:
    -8px 0 28px rgba(25,49,37,.04);
}

.dash-ai-rail-head{
  position:sticky;

  top:0;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:8px;

  padding:
    6px 2px 13px;

  background:
    rgba(255,255,255,.98);

  border-bottom:
    1px solid rgba(43,79,61,.10);
}

.dash-ai-rail-title{
  display:flex;

  align-items:center;

  gap:8px;

  color:#17392a;

  font-size:.95rem;

  font-weight:950;
}

.dash-ai-count{
  padding:
    5px 8px;

  color:#19744f;

  background:#e7f8ef;

  border-radius:999px;

  font-size:.62rem;

  font-weight:900;
}

.dash-ai-list{
  display:grid;
}

.dash-ai-row{
  display:grid;

  grid-template-columns:
    48px minmax(0,1fr) 16px;

  align-items:center;

  gap:10px;

  min-height:72px;

  padding:
    8px 1px;

  border-bottom:
    1px solid rgba(40,77,59,.09);
}

.dash-ai-avatar{
  --sx:405%;
  --sy:320%;
  --px:0%;
  --py:0%;

  position:relative;

  width:48px;

  height:48px;

  overflow:hidden;

  border-radius:50%;

  background-image:
    url("./assets/ai-team/ai-team-sheet.png");

  background-repeat:no-repeat;

  background-size:
    var(--sx) var(--sy);

  background-position:
    var(--px) var(--py);

  border:
    2px solid #fff;

  box-shadow:
    0 3px 11px rgba(28,60,44,.14);
}

.dash-ai-avatar::after{
  content:"";

  position:absolute;

  right:0;

  bottom:1px;

  width:9px;

  height:9px;

  border-radius:50%;

  background:#39d986;

  border:2px solid #fff;
}

.dash-ai-chief{
  --sx:405%;
  --sy:320%;
  --px:0%;
  --py:0%;
}

.dash-ai-trend{
  --sx:405%;
  --sy:320%;
  --px:33.3%;
  --py:0%;
}

.dash-ai-evidence{
  --sx:405%;
  --sy:320%;
  --px:66.6%;
  --py:0%;
}

.dash-ai-verify{
  --sx:405%;
  --sy:320%;
  --px:100%;
  --py:0%;
}

.dash-ai-writer{
  --sx:405%;
  --sy:320%;
  --px:0%;
  --py:50%;
}

.dash-ai-design{
  --sx:405%;
  --sy:320%;
  --px:33.3%;
  --py:50%;
}

.dash-ai-brand{
  --sx:405%;
  --sy:320%;
  --px:66.6%;
  --py:50%;
}

.dash-ai-qa{
  --sx:405%;
  --sy:320%;
  --px:100%;
  --py:50%;
}

.dash-ai-publish{
  --sx:305%;
  --sy:320%;
  --px:0%;
  --py:100%;
}

.dash-ai-analytics{
  --sx:305%;
  --sy:320%;
  --px:50%;
  --py:100%;
}

.dash-ai-revenue{
  --sx:305%;
  --sy:320%;
  --px:100%;
  --py:100%;
}

.dash-ai-name{
  color:#20372c;

  font-size:.78rem;

  font-weight:950;
}

.dash-ai-desc{
  margin-top:3px;

  color:#738078;

  font-size:.63rem;

  line-height:1.35;
}

.dash-ai-chevron{
  color:#4e6358;

  font-size:1rem;
}

/* =========================================================
   MOBILE/DRAWER BUTTON
========================================================= */

#dashAiToggle{
  display:none;

  position:fixed;

  right:14px;

  bottom:18px;

  z-index:160;

  min-height:48px;

  padding:0 15px;

  color:#143a2b;

  background:
    linear-gradient(
      135deg,
      #c1f5dc,
      #77dfad
    );

  border:
    1px solid rgba(255,255,255,.75);

  border-radius:999px;

  font:inherit;

  font-size:.75rem;

  font-weight:950;

  box-shadow:
    0 12px 30px rgba(32,88,59,.22);
}

.dash-ai-close{
  display:none;

  border:0;

  background:transparent;

  color:#273c31;

  font-size:1.3rem;

  cursor:pointer;
}

/* =========================================================
   OLD AI UI - DISABLE
========================================================= */

#aiOfficeTeamButton,
#aiOfficeTeamPanel{
  display:none !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1280px){

  .layout{
    grid-template-columns:
      210px minmax(0,1fr) !important;
  }

  #dashAiRail{
    position:fixed;

    top:68px;

    right:0;

    z-index:150;

    width:330px;

    height:
      calc(100vh - 68px);

    transform:
      translateX(105%);

    transition:
      transform .22s ease;

    box-shadow:
      -20px 0 55px rgba(0,0,0,.16);
  }

  body.dash-ai-open #dashAiRail{
    transform:
      translateX(0);
  }

  #dashAiToggle{
    display:block;
  }

  .dash-ai-close{
    display:block;
  }

}

@media(max-width:1000px){

  #dashHero{
    grid-template-columns:
      55% 45%;
  }

  .dash-quick-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .dash-heading-row{
    grid-template-columns:
      1fr;
  }

  .dash-home-meta{
    min-width:0;

    justify-items:start;

    grid-template-columns:
      auto minmax(240px,340px);

    align-items:center;
  }

}

@media(max-width:820px){

  .layout{
    display:block !important;
  }

  .sidebar{
    position:fixed !important;

    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;

    z-index:120 !important;

    width:100% !important;
    height:auto !important;

    padding:
      5px !important;

    background:
      rgba(15,38,28,.98) !important;

    border-top:
      1px solid rgba(255,255,255,.09) !important;
  }

  .sidebar::before{
    display:none;
  }

  .nav{
    grid-template-columns:
      repeat(6,1fr) !important;

    gap:2px !important;
  }

  .nav button{
    min-height:56px !important;

    justify-content:center !important;

    padding:
      5px 2px !important;

    font-size:.66rem !important;

    text-align:center !important;
  }

  .content{
    width:100% !important;

    padding:
      18px 13px 145px !important;
  }

  #dashHero{
    grid-template-columns:
      1fr;

    min-height:0;
  }

  .dash-hero-copy{
    padding:
      24px 21px 18px;
  }

  .dash-hero-art{
    min-height:230px;
  }

  .dash-metrics{
    grid-template-columns:
      1fr !important;
  }

  .dash-home-meta{
    grid-template-columns:
      1fr;

    width:100%;
  }

  .dash-greeting{
    max-width:none;
  }

  #dashAiToggle{
    bottom:74px;
  }

}

@media(max-width:540px){

  .topbar{
    padding:
      8px 10px !important;

    gap:8px !important;
  }

  .brand{
    font-size:.86rem !important;
  }

  .topbar .pill{
    max-width:47vw;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
  }

  .dash-quick-grid{
    grid-template-columns:
      1fr;
  }

  #dashAiRail{
    width:
      min(92vw,350px);
  }

  .dash-hero-title{
    font-size:
      2rem;
  }

}

/* END DASHBOARD V6 */


/* AI_INDIVIDUAL_ICONS_V1
   Individual character portraits from the approved SNS AI Studio team art.
*/
.dash-ai-avatar{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.dash-ai-chief{background-image:url("./assets/ai-team/icons/chief.png") !important;}
.dash-ai-trend{background-image:url("./assets/ai-team/icons/trend.png") !important;}
.dash-ai-evidence{background-image:url("./assets/ai-team/icons/evidence.png") !important;}
.dash-ai-verify{background-image:url("./assets/ai-team/icons/verify.png") !important;}
.dash-ai-writer{background-image:url("./assets/ai-team/icons/writer.png") !important;}
.dash-ai-design{background-image:url("./assets/ai-team/icons/design.png") !important;}
.dash-ai-brand{background-image:url("./assets/ai-team/icons/brand.png") !important;}
.dash-ai-qa{background-image:url("./assets/ai-team/icons/qa.png") !important;}
.dash-ai-publish{background-image:url("./assets/ai-team/icons/publish.png") !important;}
.dash-ai-analytics{background-image:url("./assets/ai-team/icons/analytics.png") !important;}
.dash-ai-revenue{background-image:url("./assets/ai-team/icons/revenue.png") !important;}



/* DASHBOARD_V8_FORCE_SHEET */

.dash-ai-avatar{
  background-image:
    url("./assets/ai-team/ai-team-sheet.png?v=8") !important;
  background-repeat:no-repeat !important;
}

.dash-hero-art{
  background-image:
    linear-gradient(
      90deg,
      #18382b 0%,
      rgba(24,56,43,.28) 30%,
      rgba(0,0,0,0) 72%
    ),
    url("./assets/ai-team/ai-team-sheet.png?v=8") !important;

  background-repeat:no-repeat !important;
  background-size:100% 100%, cover !important;
  background-position:center, center center !important;
}

/* END_DASHBOARD_V8_FORCE_SHEET */