:root {
  --admin-bg: #f4f0e7;
  --admin-bg-soft: #eee8dc;

  --admin-surface: #ffffff;
  --admin-surface-soft: #faf8f3;
  --admin-surface-hover: #f7f3eb;

  --admin-navy: #10283a;
  --admin-navy-soft: #20394b;

  --admin-gold: #b5965f;
  --admin-gold-soft: #d8c7a4;

  --admin-text: #10283a;
  --admin-text-soft: #4d5d68;
  --admin-muted: #7d858a;

  --admin-border: rgba(16, 40, 58, 0.10);
  --admin-border-strong: rgba(16, 40, 58, 0.16);

  --admin-radius: 14px;
  --admin-radius-small: 9px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--admin-bg);
}

.admin-body,
.admin-login-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 78% 0%,
      rgba(181, 150, 95, 0.08),
      transparent 32%
    ),
    var(--admin-bg);
  color: var(--admin-text);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.admin-header {
  position: sticky;
  top: 0;
  z-index: 20;

  background:
    rgba(244, 240, 231, 0.95);

  border-bottom:
    1px solid var(--admin-border);

  backdrop-filter:
    blur(18px);
}

.admin-header-inner {
  width:
    min(
      1180px,
      calc(100% - 44px)
    );

  min-height:
    66px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;
}

.admin-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  text-decoration:
    none;

  color:
    var(--admin-navy);
}

.admin-brand img {
  display:
    block;

  width:
    112px;

  height:
    auto;
}

.admin-brand-divider {
  width:
    1px;

  height:
    23px;

  background:
    var(--admin-border-strong);
}

.admin-brand-label {
  color:
    var(--admin-navy);

  font-size:
    13px;

  font-weight:
    700;
}

.admin-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;
}

.admin-nav-link {
  padding:
    8px 13px;

  border-radius:
    999px;

  color:
    var(--admin-navy);

  font-size:
    12px;

  font-weight:
    700;

  text-decoration:
    none;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.admin-nav-link:hover {
  background:
    rgba(16, 40, 58, 0.07);
}

.admin-nav-link--active {
  background:
    var(--admin-navy);

  color:
    #ffffff;
}


/*
|--------------------------------------------------------------------------
| MAIN
|--------------------------------------------------------------------------
*/

.admin-main {
  width:
    min(
      1180px,
      calc(100% - 44px)
    );

  margin:
    0 auto;

  padding:
    32px 0 64px;
}

.admin-overview {
  padding:
    2px 2px 22px;

  border-bottom:
    1px solid var(--admin-border);

  margin-bottom:
    27px;
}

.admin-overview-title {
  display:
    flex;

  align-items:
    center;

  gap:
    16px;
}

.admin-overview h1 {
  margin:
    5px 0 4px;

  color:
    var(--admin-navy);

  font-size:
    clamp(
      30px,
      3vw,
      41px
    );

  line-height:
    1;

  letter-spacing:
    -0.045em;
}

.admin-overview p {
  margin:
    7px 0 0;

  color:
    var(--admin-muted);

  font-size:
    12px;
}

.admin-eyebrow {
  color:
    var(--admin-gold);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.18em;
}

.admin-live {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--admin-muted);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.13em;
}

.admin-live span {
  width:
    7px;

  height:
    7px;

  border-radius:
    999px;

  background:
    #5da678;

  box-shadow:
    0 0 0 3px
    rgba(93, 166, 120, 0.12);
}


/*
|--------------------------------------------------------------------------
| SECTIONS
|--------------------------------------------------------------------------
*/

.admin-section {
  margin-top:
    28px;
}

.admin-section-head,
.admin-panel-head {
  margin-bottom:
    11px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    end;

  gap:
    18px;
}

.admin-section-head h2,
.admin-panel-head h2 {
  margin:
    4px 0 0;

  color:
    var(--admin-navy);

  font-size:
    18px;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;
}

.admin-note {
  color:
    var(--admin-muted);

  font-size:
    10px;
}


/*
|--------------------------------------------------------------------------
| METRICS
|--------------------------------------------------------------------------
*/

.admin-metric-grid {
  display:
    grid;

  gap:
    8px;
}

.admin-metric-grid--website {
  grid-template-columns:
    1.25fr
    repeat(5, 1fr);
}

.admin-metric-grid--platform {
  grid-template-columns:
    repeat(7, 1fr);
}

.admin-metric {
  min-width:
    0;

  min-height:
    96px;

  padding:
    14px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  background:
    var(--admin-surface);

  border:
    1px solid var(--admin-border);

  border-radius:
    var(--admin-radius);

  box-shadow:
    0 6px 20px
    rgba(16, 40, 58, 0.025);
}

.admin-metric--dark {
  background:
    var(--admin-navy);

  border-color:
    var(--admin-navy);

  color:
    #ffffff;
}

.admin-metric-label {
  color:
    var(--admin-muted);

  font-size:
    10px;

  font-weight:
    700;
}

.admin-metric--dark
.admin-metric-label {
  color:
    rgba(255,255,255,0.68);
}

.admin-metric strong {
  margin:
    10px 0 0;

  display:
    block;

  color:
    var(--admin-navy);

  font-size:
    clamp(
      23px,
      2.4vw,
      31px
    );

  line-height:
    1;

  letter-spacing:
    -0.04em;
}

.admin-metric--dark strong {
  color:
    #ffffff;
}

.admin-metric small {
  margin-top:
    5px;

  color:
    var(--admin-muted);

  font-size:
    8px;

  text-transform:
    uppercase;

  letter-spacing:
    0.09em;
}

.admin-metric--dark small {
  color:
    rgba(255,255,255,0.52);
}


/*
|--------------------------------------------------------------------------
| DETAIL PANELS
|--------------------------------------------------------------------------
*/

.admin-detail-grid {
  margin-top:
    28px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, 0.8fr);

  gap:
    10px;
}

.admin-panel {
  min-width:
    0;

  padding:
    18px;

  background:
    var(--admin-surface);

  border:
    1px solid var(--admin-border);

  border-radius:
    var(--admin-radius);

  box-shadow:
    0 8px 24px
    rgba(16, 40, 58, 0.025);
}

.admin-chart {
  height:
    188px;

  display:
    flex;

  align-items:
    flex-end;

  gap:
    5px;

  padding-top:
    16px;
}

.admin-chart-day {
  flex:
    1;

  min-width:
    0;

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  gap:
    7px;
}

.admin-chart-bar-wrap {
  height:
    143px;

  display:
    flex;

  align-items:
    flex-end;
}

.admin-chart-bar {
  width:
    100%;

  min-height:
    3px;

  border-radius:
    5px 5px 2px 2px;

  background:
    linear-gradient(
      180deg,
      var(--admin-navy),
      #38596f
    );
}

.admin-chart-label {
  color:
    var(--admin-muted);

  text-align:
    center;

  white-space:
    nowrap;

  font-size:
    8px;
}


/*
|--------------------------------------------------------------------------
| TABLE
|--------------------------------------------------------------------------
*/

.admin-table-wrap {
  overflow:
    auto;
}

.admin-table {
  width:
    100%;

  border-collapse:
    collapse;
}

.admin-table th,
.admin-table td {
  padding:
    10px 4px;

  border-bottom:
    1px solid var(--admin-border);

  color:
    var(--admin-text-soft);

  font-size:
    10px;

  text-align:
    left;
}

.admin-table th {
  color:
    var(--admin-muted);

  font-weight:
    700;
}

.admin-table td:last-child,
.admin-table th:last-child {
  text-align:
    right;
}


/*
|--------------------------------------------------------------------------
| TOOLS
|--------------------------------------------------------------------------
*/

.admin-tools {
  display:
    grid;

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

  gap:
    10px;
}

.admin-tool {
  min-height:
    76px;

  padding:
    14px;

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    13px;

  background:
    var(--admin-surface);

  border:
    1px solid var(--admin-border);

  border-radius:
    var(--admin-radius);

  color:
    var(--admin-navy);

  text-decoration:
    none;

  box-shadow:
    0 6px 20px
    rgba(16, 40, 58, 0.025);

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.admin-tool:hover {
  transform:
    translateY(-1px);

  background:
    var(--admin-surface-hover);

  border-color:
    var(--admin-border-strong);
}

.admin-tool-icon {
  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  background:
    var(--admin-navy);

  color:
    #ffffff;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.07em;
}

.admin-tool strong {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--admin-navy);

  font-size:
    12px;
}

.admin-tool span {
  color:
    var(--admin-muted);

  font-size:
    9px;

  line-height:
    1.4;
}

.admin-tool-arrow {
  color:
    var(--admin-gold) !important;

  font-size:
    18px !important;
}


/*
|--------------------------------------------------------------------------
| LOGIN
|--------------------------------------------------------------------------
*/

.admin-login-body {
  display:
    grid;

  place-items:
    center;

  padding:
    28px 18px;
}

.admin-login-shell {
  width:
    min(
      410px,
      100%
    );
}

.admin-login-logo {
  display:
    block;

  width:
    132px;

  margin:
    0 auto 23px;
}

.admin-login-logo img {
  width:
    100%;

  display:
    block;
}

.admin-login-card {
  padding:
    28px;

  background:
    var(--admin-surface);

  border:
    1px solid var(--admin-border);

  border-radius:
    18px;

  box-shadow:
    0 20px 60px
    rgba(16, 40, 58, 0.08);
}

.admin-login-card h1 {
  margin:
    5px 0 9px;

  color:
    var(--admin-navy);

  font-size:
    27px;

  letter-spacing:
    -0.035em;
}

.admin-muted {
  margin:
    0 0 22px;

  color:
    var(--admin-muted);

  font-size:
    11px;

  line-height:
    1.5;
}

.admin-field {
  display:
    block;

  margin-bottom:
    14px;
}

.admin-field span {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--admin-text-soft);

  font-size:
    10px;

  font-weight:
    700;
}

.admin-field input {
  width:
    100%;

  min-height:
    45px;

  padding:
    0 13px;

  background:
    var(--admin-surface-soft);

  color:
    var(--admin-navy);

  border:
    1px solid var(--admin-border-strong);

  border-radius:
    9px;

  outline:
    none;

  font:
    inherit;
}

.admin-field input:focus {
  border-color:
    var(--admin-gold);
}

.admin-primary-button {
  width:
    100%;

  min-height:
    45px;

  margin-top:
    3px;

  border:
    0;

  border-radius:
    9px;

  background:
    var(--admin-navy);

  color:
    #ffffff;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    750;

  cursor:
    pointer;
}

.admin-primary-button:hover {
  background:
    var(--admin-navy-soft);
}

.admin-primary-button:disabled {
  opacity:
    0.5;
}

.admin-login-status {
  min-height:
    20px;

  margin-top:
    11px;

  color:
    var(--admin-muted);

  font-size:
    10px;

  line-height:
    1.4;
}

.admin-back-link {
  display:
    inline-block;

  margin-top:
    17px;

  color:
    var(--admin-muted);

  font-size:
    10px;

  text-decoration:
    none;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

  .admin-metric-grid--website {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .admin-metric-grid--platform {
    grid-template-columns:
      repeat(4, 1fr);
  }

}

@media (max-width: 820px) {

  .admin-header-inner {
    width:
      min(
        100% - 28px,
        1180px
      );
  }

  .admin-main {
    width:
      min(
        100% - 28px,
        1180px
      );
  }

  .admin-detail-grid {
    grid-template-columns:
      1fr;
  }

  .admin-tools {
    grid-template-columns:
      1fr;
  }

}

@media (max-width: 650px) {

  .admin-header-inner {
    min-height:
      auto;

    padding:
      13px 0;

    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .admin-brand-label,
  .admin-brand-divider {
    display:
      none;
  }

  .admin-nav {
    width:
      100%;

    overflow-x:
      auto;
  }

  .admin-nav-link {
    white-space:
      nowrap;
  }

  .admin-main {
    padding-top:
      23px;
  }

  .admin-overview-title {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      8px;
  }

  .admin-metric-grid--website,
  .admin-metric-grid--platform {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .admin-section-head {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      7px;
  }

}


/*
|--------------------------------------------------------------------------
| SHARED ADMIN HEADER V4
|--------------------------------------------------------------------------
|
| One identical navigation system for all SIGBUY admin pages.
|
*/

.admin-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;

  background:
    rgba(244, 240, 231, 0.96);

  border-bottom:
    1px solid var(--admin-border);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.admin-header-inner {
  width:
    min(
      1180px,
      calc(100% - 44px)
    );

  min-height:
    66px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;
}

.admin-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  flex:
    0 0 auto;

  color:
    var(--admin-navy);

  text-decoration:
    none;
}

.admin-brand-logo {
  display:
    flex;

  align-items:
    center;

  text-decoration:
    none;
}

.admin-brand-logo img {
  display:
    block;

  width:
    112px;

  height:
    auto;
}

.admin-brand-divider {
  display:
    block;

  width:
    1px;

  height:
    23px;

  flex:
    0 0 auto;

  background:
    var(--admin-border-strong);
}

.admin-brand-label {
  display:
    block;

  color:
    var(--admin-navy);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1;
}

.admin-nav {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    4px;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.admin-nav-link {
  min-height:
    34px;

  padding:
    0 13px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid transparent;

  border-radius:
    999px;

  color:
    var(--admin-navy);

  background:
    transparent;

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.admin-nav-link:hover {
  background:
    rgba(16, 40, 58, 0.06);

  color:
    var(--admin-navy);
}

.admin-nav-link--active,
.admin-nav-link--active:hover {
  background:
    var(--admin-navy);

  border-color:
    var(--admin-navy);

  color:
    #ffffff;
}

@media (max-width: 650px) {

  .admin-header-inner {
    width:
      min(
        100% - 28px,
        1180px
      );

    min-height:
      auto;

    padding:
      13px 0;

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      11px;
  }

  .admin-brand-divider,
  .admin-brand-label {
    display:
      none;
  }

  .admin-nav {
    width:
      100%;

    justify-content:
      flex-start;

    overflow-x:
      auto;

    scrollbar-width:
      none;
  }

  .admin-nav::-webkit-scrollbar {
    display:
      none;
  }

}


/*
|--------------------------------------------------------------------------
| ADMIN TOP ALIGNMENT V5
|--------------------------------------------------------------------------
|
| Dashboard and Production must start at exactly the same vertical position.
|
*/

.admin-main,
.production-main {
  padding-top: 28px !important;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD INTRO
|--------------------------------------------------------------------------
*/

.admin-overview {
  min-height: 104px;

  margin: 0 0 27px;

  padding:
    0 2px 20px;

  display:
    flex;

  align-items:
    flex-start;

  border-bottom:
    1px solid var(--admin-border);
}

.admin-overview > div {
  width: 100%;
}

.admin-overview .admin-eyebrow {
  margin:
    0 0 5px;
}

.admin-overview-title {
  min-height:
    42px;

  display:
    flex;

  align-items:
    center;

  gap:
    16px;
}

.admin-overview h1 {
  margin:
    0;

  line-height:
    42px;
}

.admin-overview p {
  margin:
    5px 0 0;
}


/*
|--------------------------------------------------------------------------
| PRODUCTION INTRO
|--------------------------------------------------------------------------
*/

.production-intro {
  min-height: 104px;

  margin: 0 0 27px;

  padding:
    0 2px 20px;

  border-bottom:
    1px solid var(--admin-border);
}

.production-intro > .admin-eyebrow {
  margin:
    0 0 5px;
}

.production-title-row {
  min-height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;
}

.production-title-row > div {
  min-width:
    0;
}

.production-title-row h1 {
  margin:
    0;

  line-height:
    42px;
}

.production-title-row .intro {
  margin:
    5px 0 0;
}


/*
|--------------------------------------------------------------------------
| REFRESH BUTTON
|--------------------------------------------------------------------------
*/

.production-refresh {
  flex:
    0 0 auto;

  align-self:
    center;

  margin:
    0;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

  .admin-main,
  .production-main {
    padding-top:
      22px !important;
  }

  .admin-overview,
  .production-intro {
    min-height:
      auto;
  }

  .production-title-row {
    align-items:
      flex-start;

    flex-direction:
      column;

    min-height:
      auto;
  }

  .production-refresh {
    align-self:
      flex-start;
  }

}