/* =========================================
   BIVA INTERNET CONTROLLERS ADMIN PAGE
========================================= */


/* =========================================
   CONTROLLER LIST
========================================= */

.internet-controllers-list {
  display: grid;

  gap: 18px;

  padding:
    clamp(
      18px,
      2.5vw,
      30px
    );
}


.internet-controller-count {
  flex: 0 0 auto;

  padding:
    8px 12px;

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

  border-radius:
    999px;

  color:
    var(
      --biva-blue-700,
      #1d4ed8
    );

  background:
    var(
      --biva-blue-50,
      #eff6ff
    );

  font-size:
    0.7rem;

  font-weight:
    850;

  white-space:
    nowrap;
}


/* =========================================
   CONTROLLER CARD
========================================= */

.internet-controller-card {
  width:
    100%;

  min-width:
    0;

  padding:
    22px;

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

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

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(
        53,
        112,
        243,
        0.06
      ),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      var(
        --biva-surface-soft,
        #f8fafc
      )
    );

  box-shadow:
    0 14px 38px
    rgba(
      15,
      23,
      42,
      0.06
    );
}


.internet-controller-card__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    22px;
}


.internet-controller-card__identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    14px;
}


.internet-controller-card__icon {
  width:
    48px;

  height:
    48px;

  flex:
    0 0 48px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    15px;

  color:
    var(
      --biva-blue-700,
      #1d4ed8
    );

  background:
    var(
      --biva-blue-50,
      #eff6ff
    );
}


.internet-controller-card__icon svg {
  width:
    22px;

  height:
    22px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.9;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.internet-controller-card__identity > div {
  min-width:
    0;
}


.internet-controller-card__name-row {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    9px;
}


.internet-controller-card__name-row h3 {
  margin:
    0;

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

  font-size:
    1rem;

  font-weight:
    900;
}


.internet-controller-card__identity p {
  margin:
    6px 0 0;

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

  font-size:
    0.75rem;

  line-height:
    1.55;
}


.internet-controller-card__default-badge {
  padding:
    5px 8px;

  border:
    1px solid
    rgba(
      242,
      183,
      5,
      0.2
    );

  border-radius:
    999px;

  color:
    #805800;

  background:
    var(
      --biva-yellow-50,
      #fff9db
    );

  font-size:
    0.58rem;

  font-weight:
    900;

  text-transform:
    uppercase;
}


/* =========================================
   STATUS
========================================= */

.internet-controller-status {
  min-height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    5px 9px;

  border:
    1px solid
    transparent;

  border-radius:
    999px;

  font-size:
    0.62rem;

  font-weight:
    850;

  white-space:
    nowrap;
}


.internet-controller-status > span {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;
}


.internet-controller-status.is-success {
  color:
    var(
      --biva-success,
      #079455
    );

  border-color:
    rgba(
      7,
      148,
      85,
      0.14
    );

  background:
    var(
      --biva-success-soft,
      #ecfdf3
    );
}


.internet-controller-status.is-success > span {
  background:
    var(
      --biva-success,
      #079455
    );
}


.internet-controller-status.is-warning {
  color:
    #805800;

  border-color:
    rgba(
      242,
      183,
      5,
      0.18
    );

  background:
    var(
      --biva-yellow-50,
      #fff9db
    );
}


.internet-controller-status.is-warning > span {
  background:
    var(
      --biva-yellow-500,
      #f2b705
    );
}


.internet-controller-status.is-danger {
  color:
    var(
      --biva-danger,
      #d92d20
    );

  border-color:
    rgba(
      217,
      45,
      32,
      0.14
    );

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


.internet-controller-status.is-danger > span {
  background:
    var(
      --biva-danger,
      #d92d20
    );
}


.internet-controller-status.is-neutral {
  color:
    var(
      --biva-muted,
      #64748b
    );

  border-color:
    var(
      --biva-line,
      #e2e8f0
    );

  background:
    var(
      --biva-surface-muted,
      #f1f5f9
    );
}


.internet-controller-status.is-neutral > span {
  background:
    var(
      --biva-subtle,
      #94a3b8
    );
}


/* =========================================
   DETAILS GRID
========================================= */

.internet-controller-card__details {
  margin-top:
    22px;

  display:
    grid;

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

  gap:
    12px;
}


.internet-controller-card__details > div {
  min-width:
    0;

  padding:
    14px;

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

  border-radius:
    14px;

  background:
    rgba(
      255,
      255,
      255,
      0.78
    );
}


.internet-controller-card__details span {
  display:
    block;

  margin-bottom:
    5px;

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

  font-size:
    0.62rem;

  font-weight:
    750;

  text-transform:
    uppercase;
}


.internet-controller-card__details strong {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    0.73rem;

  font-weight:
    820;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.internet-controller-card__endpoint {
  overflow-wrap:
    anywhere;

  white-space:
    normal !important;
}


/* =========================================
   ERROR MESSAGE
========================================= */

.internet-controller-card__error {
  margin-top:
    14px;

  padding:
    14px;

  border:
    1px solid
    rgba(
      217,
      45,
      32,
      0.14
    );

  border-radius:
    14px;

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


.internet-controller-card__error strong {
  display:
    block;

  color:
    var(
      --biva-danger,
      #d92d20
    );

  font-size:
    0.68rem;

  font-weight:
    900;
}


.internet-controller-card__error p {
  margin:
    5px 0 0;

  color:
    var(
      --biva-danger,
      #d92d20
    );

  font-size:
    0.71rem;

  line-height:
    1.5;
}


/* =========================================
   CARD ACTIONS
========================================= */

.internet-controller-card__actions {
  margin-top:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    9px;
}


/* =========================================
   EMPTY STATE
========================================= */

.internet-controllers-empty {
  min-height:
    330px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    38px 22px;

  text-align:
    center;
}


.internet-controllers-empty > span {
  width:
    62px;

  height:
    62px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    20px;

  color:
    var(
      --biva-blue-700,
      #1d4ed8
    );

  background:
    var(
      --biva-blue-50,
      #eff6ff
    );
}


.internet-controllers-empty > span svg {
  width:
    28px;

  height:
    28px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.9;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.internet-controllers-empty h3 {
  margin:
    18px 0 0;

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

  font-size:
    1rem;

  font-weight:
    900;
}


.internet-controllers-empty p {
  max-width:
    520px;

  margin:
    8px 0 20px;

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

  font-size:
    0.76rem;

  line-height:
    1.6;
}


/* =========================================
   MODAL
========================================= */

body.internet-controller-modal-open {
  overflow:
    hidden;
}


.internet-controller-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    3000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    22px;

  background:
    rgba(
      7,
      11,
      20,
      0.72
    );

  backdrop-filter:
    blur(
      8px
    );
}


.internet-controller-modal.is-open {
  display:
    flex;
}


.internet-controller-modal__dialog {
  width:
    min(
      960px,
      100%
    );

  max-height:
    calc(
      100vh -
      44px
    );

  display:
    flex;

  flex-direction:
    column;

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

  border-radius:
    26px;

  background:
    #ffffff;

  box-shadow:
    0 34px 90px
    rgba(
      7,
      11,
      20,
      0.32
    );

  overflow:
    hidden;
}


.internet-controller-modal__header {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    22px;

  padding:
    24px 26px;

  color:
    #ffffff;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(
        53,
        112,
        243,
        0.38
      ),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      var(
        --biva-black,
        #070b14
      ),
      var(
        --biva-black-soft,
        #0d1729
      ),
      #173675
    );
}


.internet-controller-modal__header span {
  display:
    block;

  margin-bottom:
    7px;

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

  font-size:
    0.65rem;

  font-weight:
    850;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.internet-controller-modal__header h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    1.5rem;

  font-weight:
    900;
}


.internet-controller-modal__header p {
  max-width:
    680px;

  margin:
    8px 0 0;

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

  font-size:
    0.74rem;

  line-height:
    1.55;
}


.internet-controller-modal__close {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    12px;

  color:
    #ffffff;

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

  font-size:
    1.4rem;

  cursor:
    pointer;
}


/* =========================================
   FORM
========================================= */

.internet-controller-form {
  min-height:
    0;

  flex:
    1;

  padding:
    24px 26px
    26px;

  overflow-y:
    auto;
}


.internet-controller-form__section {
  margin-top:
    26px;

  padding-top:
    24px;

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


.internet-controller-form__section:first-of-type {
  margin-top:
    24px;
}


.internet-controller-form__section.is-hidden {
  display:
    none;
}


.internet-controller-form__section > header {
  margin-bottom:
    16px;
}


.internet-controller-form__section h3 {
  margin:
    0;

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

  font-size:
    0.9rem;

  font-weight:
    900;
}


.internet-controller-form__section p {
  margin:
    5px 0 0;

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

  font-size:
    0.7rem;

  line-height:
    1.5;
}


.internet-controller-form__grid {
  display:
    grid;

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

  gap:
    16px;
}


.internet-controller-field {
  min-width:
    0;

  display:
    grid;

  gap:
    7px;
}


.internet-controller-field--full {
  grid-column:
    1 /
    -1;
}


.internet-controller-field > span {
  color:
    var(
      --biva-ink,
      #0f172a
    );

  font-size:
    0.69rem;

  font-weight:
    800;
}


.internet-controller-field input,
.internet-controller-field select,
.internet-controller-field textarea {
  width:
    100%;

  min-width:
    0;

  min-height:
    44px;

  padding:
    10px 12px;

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

  border-radius:
    12px;

  outline:
    none;

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

  background:
    #ffffff;

  font:
    inherit;

  font-size:
    0.75rem;

  transition:
    border-color
    160ms ease,
    box-shadow
    160ms ease;
}


.internet-controller-field textarea {
  min-height:
    92px;

  resize:
    vertical;
}


.internet-controller-field input:focus,
.internet-controller-field select:focus,
.internet-controller-field textarea:focus {
  border-color:
    var(
      --biva-blue-500,
      #3570f3
    );

  box-shadow:
    0 0 0 4px
    rgba(
      53,
      112,
      243,
      0.1
    );
}


.internet-controller-form__switches {
  margin-top:
    24px;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    14px;
}


.internet-controller-form__switches label {
  min-height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    9px 12px;

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

  border-radius:
    12px;

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

  background:
    var(
      --biva-surface-soft,
      #f8fafc
    );

  font-size:
    0.72rem;

  font-weight:
    750;
}


.internet-controller-form__switches input {
  width:
    17px;

  height:
    17px;

  accent-color:
    var(
      --biva-blue-500,
      #3570f3
    );
}


.internet-controller-form__message {
  min-height:
    20px;

  margin:
    18px 0 0;

  font-size:
    0.72rem;

  font-weight:
    750;
}


.internet-controller-form__message[
  data-type="error"
] {
  color:
    var(
      --biva-danger,
      #d92d20
    );
}


.internet-controller-form__actions {
  margin-top:
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    10px;
}


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

@media (
  max-width:
  1250px
) {

  .internet-controller-card__details {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}


@media (
  max-width:
  760px
) {

  .internet-controller-card {
    padding:
      18px;
  }


  .internet-controller-card__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .internet-controller-card__details {
    grid-template-columns:
      1fr;
  }


  .internet-controller-card__actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .internet-controller-card__actions
    > * {
    width:
      100%;
  }


  .internet-controller-modal {
    align-items:
      flex-end;

    padding:
      0;
  }


  .internet-controller-modal__dialog {
    width:
      100%;

    max-height:
      94vh;

    border-radius:
      24px
      24px
      0
      0;
  }


  .internet-controller-modal__header {
    padding:
      21px 18px;
  }


  .internet-controller-form {
    padding:
      20px 18px
      24px;
  }


  .internet-controller-form__grid {
    grid-template-columns:
      1fr;
  }


  .internet-controller-field--full {
    grid-column:
      auto;
  }


  .internet-controller-form__switches {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .internet-controller-form__switches label {
    width:
      100%;
  }


  .internet-controller-form__actions {
    flex-direction:
      column-reverse;
  }


  .internet-controller-form__actions
    > * {
    width:
      100%;
  }

}




/* =========================================
   CONTROLLER HEALTH RESULT
========================================= */

.internet-controller-health-result {
  min-height: 0;
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.internet-controller-health-result.is-testing,
.internet-controller-health-result.is-success,
.internet-controller-health-result.is-danger {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.internet-controller-health-result__indicator {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  margin-top: 4px;
  border-radius: 50%;
}

.internet-controller-health-result > div {
  min-width: 0;
  flex: 1;
}

.internet-controller-health-result strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.35;
}

.internet-controller-health-result p {
  margin: 5px 0 0;
  font-size: 0.71rem;
  line-height: 1.55;
}

.internet-controller-health-result small {
  display: block;
  margin-top: 7px;
  font-size: 0.64rem;
  font-weight: 750;
  line-height: 1.45;
}

.internet-controller-health-result.is-testing {
  border-color: rgba(53, 112, 243, 0.16);
  background: var(--biva-blue-50, #eff6ff);
}

.internet-controller-health-result.is-testing
  .internet-controller-health-result__indicator {
  border: 2px solid rgba(53, 112, 243, 0.22);
  border-top-color: var(--biva-blue-600, #2563eb);
  background: transparent;
  animation: internet-controller-health-spin 0.8s linear infinite;
}

.internet-controller-health-result.is-testing strong,
.internet-controller-health-result.is-testing p,
.internet-controller-health-result.is-testing small {
  color: var(--biva-blue-700, #1d4ed8);
}

.internet-controller-health-result.is-success {
  border-color: rgba(7, 148, 85, 0.16);
  background: var(--biva-success-soft, #ecfdf3);
}

.internet-controller-health-result.is-success
  .internet-controller-health-result__indicator {
  background: var(--biva-success, #079455);
  box-shadow: 0 0 0 5px rgba(7, 148, 85, 0.1);
}

.internet-controller-health-result.is-success strong {
  color: var(--biva-success, #079455);
}

.internet-controller-health-result.is-success p,
.internet-controller-health-result.is-success small {
  color: #067647;
}

.internet-controller-health-result.is-danger {
  border-color: rgba(217, 45, 32, 0.16);
  background: var(--biva-danger-soft, #fff1f0);
}

.internet-controller-health-result.is-danger
  .internet-controller-health-result__indicator {
  background: var(--biva-danger, #d92d20);
  box-shadow: 0 0 0 5px rgba(217, 45, 32, 0.09);
}

.internet-controller-health-result.is-danger strong {
  color: var(--biva-danger, #d92d20);
}

.internet-controller-health-result.is-danger p,
.internet-controller-health-result.is-danger small {
  color: #b42318;
}

.internet-controller-test-btn {
  min-width: 142px;
}

.internet-controller-test-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.internet-controller-test-btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

@keyframes internet-controller-health-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .internet-controller-health-result {
    padding: 13px;
  }

  .internet-controller-test-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .internet-controller-health-result {
    transition: none;
  }

  .internet-controller-health-result.is-testing
    .internet-controller-health-result__indicator {
    animation: none;
  }
}


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

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

  .internet-controller-card,
  .internet-controller-field input,
  .internet-controller-field select,
  .internet-controller-field textarea {
    transition:
      none;
  }

}