/* =========================================
   BIVA ADMIN LAYOUT
   Shared shell for every admin page
========================================= */

:root {
  --biva-admin-sidebar-width:
    270px;
}


/* =========================================
   PAGE RESET
========================================= */

body:has(.biva-admin-layout) {
  overflow-x:
    hidden;
}


body:has(.biva-admin-layout)
  .portal-shell {
  width:
    100%;

  min-height:
    100vh;

  display:
    block;

  padding:
    0;
}


body:has(.biva-admin-layout)
  .portal-card {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  min-height:
    100vh;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;

  backdrop-filter:
    none;
}


/* =========================================
   ADMIN ROOT
========================================= */

.biva-admin-layout {
  width:
    100%;

  min-width:
    0;

  min-height:
    100vh;

  display:
    grid;

  grid-template-columns:
    var(--biva-admin-sidebar-width)
    minmax(0, 1fr);

  color:
    var(--biva-text, #334155);

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(53, 112, 243, 0.08),
      transparent 27%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 200, 46, 0.07),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #f9fbff 0%,
      var(--biva-page-bg, #f5f7fb) 100%
    );
}


/* =========================================
   MAIN COLUMN
========================================= */

.biva-admin-layout__main {
  min-width:
    0;

  min-height:
    100vh;

  overflow:
    hidden;
}


.biva-admin-layout__content {
  width:
    100%;

  max-width:
    1700px;

  min-width:
    0;

  margin:
    0 auto;

  padding:
    clamp(
      22px,
      3vw,
      48px
    );
}


/* =========================================
   PAGE HEADER
========================================= */

.biva-admin-layout__header {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    end;

  gap:
    clamp(
      20px,
      3vw,
      42px
    );

  margin-bottom:
    clamp(
      28px,
      4vw,
      48px
    );

  padding:
    clamp(
      24px,
      3vw,
      38px
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius:
    var(
      --biva-radius-xl,
      28px
    );

  color:
    #ffffff;

  background:
    radial-gradient(
      circle at 92% 7%,
      rgba(
        53,
        112,
        243,
        0.4
      ),
      transparent 36%
    ),
    radial-gradient(
      circle at 4% 100%,
      rgba(
        255,
        200,
        46,
        0.09
      ),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      var(
        --biva-black,
        #070b14
      ),
      var(
        --biva-black-soft,
        #0d1729
      )
      56%,
      #173675
    );

  box-shadow:
    0 28px 75px
    rgba(
      7,
      11,
      20,
      0.19
    );

  overflow:
    hidden;

  position:
    relative;
}


.biva-admin-layout__header::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    4px;

  background:
    linear-gradient(
      90deg,
      var(
        --biva-blue-500,
        #3570f3
      ),
      var(
        --biva-yellow-400,
        #ffcc33
      ),
      transparent
      88%
    );
}


.biva-admin-layout__header::after {
  content:
    "";

  position:
    absolute;

  width:
    250px;

  height:
    250px;

  right:
    -105px;

  bottom:
    -185px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );

  border-radius:
    50%;

  box-shadow:
    0 0 0 48px
    rgba(
      255,
      255,
      255,
      0.022
    ),
    0 0 0 96px
    rgba(
      255,
      255,
      255,
      0.012
    );

  pointer-events:
    none;
}


.biva-admin-layout__header-copy,
.biva-admin-layout__header-actions {
  position:
    relative;

  z-index:
    1;
}


.biva-admin-layout__header-copy {
  min-width:
    0;
}


.biva-admin-layout__eyebrow {
  display:
    block;

  margin-bottom:
    10px;

  color:
    var(
      --biva-yellow-400,
      #ffcc33
    );

  font-size:
    0.7rem;

  font-weight:
    850;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.biva-admin-layout__header h1 {
  max-width:
    900px;

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      2.1rem,
      4vw,
      4.4rem
    );

  font-weight:
    900;

  line-height:
    0.98;

  letter-spacing:
    -0.055em;
}


.biva-admin-layout__header p {
  max-width:
    760px;

  margin:
    17px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.67
    );

  font-size:
    clamp(
      0.84rem,
      1.1vw,
      0.98rem
    );

  line-height:
    1.7;
}


.biva-admin-layout__header-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    10px;
}


/* =========================================
   PAGE CONTENT
========================================= */

.biva-admin-layout__page-content {
  width:
    100%;

  min-width:
    0;
}


.biva-admin-layout__page-content
  > *:first-child {
  margin-top:
    0;
}


.biva-admin-layout__page-content
  > *:last-child {
  margin-bottom:
    0;
}


/* =========================================
   COMMON ADMIN SURFACE
========================================= */

.biva-admin-surface {
  width:
    100%;

  min-width:
    0;

  border:
    1px solid
    var(
      --biva-line,
      #e2e8f0
    );

  border-radius:
    var(
      --biva-radius-xl,
      28px
    );

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  box-shadow:
    var(
      --biva-shadow-sm,
      0 18px 50px
      rgba(
        15,
        23,
        42,
        0.08
      )
    );

  overflow:
    hidden;
}


.biva-admin-surface__header {
  padding:
    22px 24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  border-bottom:
    1px solid
    var(
      --biva-line,
      #e2e8f0
    );

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(
        53,
        112,
        243,
        0.07
      ),
      transparent 36%
    ),
    var(
      --biva-surface-soft,
      #f8fafc
    );
}


.biva-admin-surface__header-copy {
  min-width:
    0;
}


.biva-admin-surface__header-copy span {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(
      --biva-blue-600,
      #2563eb
    );

  font-size:
    0.66rem;

  font-weight:
    850;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.biva-admin-surface__header-copy h2 {
  margin:
    0;

  color:
    var(
      --biva-ink,
      #0f172a
    );

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

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.biva-admin-surface__header-copy p {
  margin:
    8px 0 0;

  color:
    var(
      --biva-muted,
      #64748b
    );

  font-size:
    0.75rem;

  line-height:
    1.55;
}


.biva-admin-surface__body {
  padding:
    clamp(
      18px,
      2.5vw,
      30px
    );
}


/* =========================================
   EMPTY / LOADING / ERROR STATES
========================================= */

.biva-admin-layout__loading,
.biva-admin-layout__empty,
.biva-admin-layout__error {
  width:
    100%;

  padding:
    34px 24px;

  text-align:
    center;
}


.biva-admin-layout__loading {
  color:
    var(
      --biva-muted,
      #64748b
    );

  font-size:
    0.78rem;
}


.biva-admin-layout__empty strong,
.biva-admin-layout__error strong {
  display:
    block;

  font-size:
    0.92rem;

  font-weight:
    850;
}


.biva-admin-layout__empty strong {
  color:
    var(
      --biva-ink,
      #0f172a
    );
}


.biva-admin-layout__error strong {
  color:
    var(
      --biva-danger,
      #d92d20
    );
}


.biva-admin-layout__empty p,
.biva-admin-layout__error p {
  margin:
    7px 0 0;

  font-size:
    0.75rem;

  line-height:
    1.5;
}


.biva-admin-layout__empty p {
  color:
    var(
      --biva-muted,
      #64748b
    );
}


.biva-admin-layout__error {
  border:
    1px solid
    rgba(
      217,
      45,
      32,
      0.14
    );

  border-radius:
    var(
      --biva-radius-lg,
      22px
    );

  background:
    var(
      --biva-danger-soft,
      #fff1f0
    );
}


.biva-admin-layout__error p {
  color:
    var(
      --biva-danger,
      #d92d20
    );
}


/* =========================================
   TABLET
========================================= */

@media (
  max-width:
  980px
) {

  :root {
    --biva-admin-sidebar-width:
      84px;
  }


  .biva-admin-layout {
    grid-template-columns:
      84px
      minmax(
        0,
        1fr
      );
  }


  .biva-admin-layout__content {
    padding:
      24px 20px
      38px;
  }


  .biva-admin-layout__header {
    grid-template-columns:
      1fr;

    align-items:
      start;
  }


  .biva-admin-layout__header-actions {
    justify-content:
      flex-start;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (
  max-width:
  700px
) {

  .biva-admin-layout {
    display:
      block;
  }


  .biva-admin-layout__main {
    min-height:
      auto;
  }


  .biva-admin-layout__content {
    padding:
      14px 12px
      34px;
  }


  .biva-admin-layout__header {
    margin-bottom:
      24px;

    padding:
      25px 18px;

    border-radius:
      22px;
  }


  .biva-admin-layout__header h1 {
    font-size:
      clamp(
        2rem,
        11vw,
        3.1rem
      );
  }


  .biva-admin-layout__header p {
    margin-top:
      14px;

    font-size:
      0.81rem;
  }


  .biva-admin-layout__header-actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .biva-admin-layout__header-actions
    > * {
    width:
      100%;
  }


  .biva-admin-surface {
    border-radius:
      21px;
  }


  .biva-admin-surface__header {
    align-items:
      flex-start;

    flex-direction:
      column;

    padding:
      20px 17px;
  }


  .biva-admin-surface__body {
    padding:
      17px;
  }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (
  max-width:
  390px
) {

  .biva-admin-layout__content {
    padding-left:
      10px;

    padding-right:
      10px;
  }


  .biva-admin-layout__header {
    padding-left:
      15px;

    padding-right:
      15px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .biva-admin-layout *,
  .biva-admin-layout *::before,
  .biva-admin-layout *::after {
    scroll-behavior:
      auto !important;
  }

}