/*
  JambuTech UI
  Humanized visual layer
  Identidade tecnica com acabamento escuro, verde jambu e circuitos sutis.
*/

:root {
  --jt-bg-0: #020806;
  --jt-bg-1: #04100b;
  --jt-bg-2: #071b12;
  --jt-card: rgba(9, 26, 18, .78);
  --jt-card-strong: rgba(10, 34, 23, .92);
  --jt-line: rgba(111, 214, 143, .18);
  --jt-line-strong: rgba(111, 214, 143, .34);
  --jt-green: #35d07f;
  --jt-green-soft: #6fffaa;
  --jt-green-deep: #0b3d28;
  --jt-yellow: #f2d64b;
  --jt-text: #eaffef;
  --jt-muted: #9bb8aa;
  --jt-danger: #ff9f9f;
  --jt-warn: #ffd37a;
  --jt-shadow: 0 24px 80px rgba(0, 0, 0, .36);
  --jt-radius: 22px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  accent-color: var(--jt-green);
  background:
    radial-gradient(circle at 10% 0%, rgba(53, 208, 127, .14), transparent 32rem),
    radial-gradient(circle at 92% 8%, rgba(242, 214, 75, .09), transparent 30rem),
    linear-gradient(145deg, var(--jt-bg-0), var(--jt-bg-1) 42%, #020705);
}

@media screen {
  body {
    color: var(--jt-text);
  }

  .shell {
    min-height: 100vh;
    background:
      linear-gradient(120deg, rgba(4, 16, 11, .72), rgba(3, 10, 8, .94)),
      radial-gradient(circle at 88% 12%, rgba(111, 255, 170, .09), transparent 28rem);
  }

  .side {
    border-right: 1px solid var(--jt-line);
    background:
      linear-gradient(180deg, rgba(5, 18, 12, .96), rgba(3, 9, 7, .98)),
      radial-gradient(circle at 0% 0%, rgba(53, 208, 127, .12), transparent 18rem);
    box-shadow: 18px 0 60px rgba(0, 0, 0, .28);
    backdrop-filter: blur(14px);
  }

  .brand {
    letter-spacing: -.04em;
    text-shadow: 0 0 24px rgba(111, 255, 170, .22);
  }

  .brand::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jt-green), var(--jt-yellow));
    box-shadow: 0 0 18px rgba(111, 255, 170, .35);
  }

  .sub,
  .muted,
  .hint {
    color: var(--jt-muted) !important;
  }

  .nav a {
    position: relative;
    border: 1px solid transparent;
    overflow: hidden;
  }

  .nav a::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--jt-green), var(--jt-yellow));
    opacity: 0;
    transform: translateX(-4px);
    transition: .18s ease;
  }

  .nav a:hover,
  .nav a.jt-active {
    border-color: var(--jt-line);
    background: rgba(111, 255, 170, .07);
    box-shadow: inset 0 0 0 1px rgba(111, 255, 170, .05);
  }

  .nav a:hover::before,
  .nav a.jt-active::before {
    opacity: 1;
    transform: translateX(0);
  }

  .main {
    background:
      radial-gradient(circle at 80% 0%, rgba(53, 208, 127, .09), transparent 24rem),
      radial-gradient(circle at 8% 95%, rgba(242, 214, 75, .06), transparent 22rem);
  }

  .top {
    gap: 18px;
  }

  .h1 {
    letter-spacing: -.04em;
  }

  .card {
    position: relative;
    border: 1px solid var(--jt-line) !important;
    border-radius: var(--jt-radius) !important;
    background:
      linear-gradient(145deg, rgba(12, 34, 23, .78), rgba(5, 15, 11, .88)),
      radial-gradient(circle at 100% 0%, rgba(111, 255, 170, .08), transparent 18rem) !important;
    box-shadow: var(--jt-shadow);
    backdrop-filter: blur(12px);
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%, rgba(111,255,170,.04));
    opacity: .58;
  }

  .card > * {
    position: relative;
  }

  input,
  select,
  textarea {
    border-color: var(--jt-line) !important;
    background: rgba(2, 8, 6, .42) !important;
    color: var(--jt-text) !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: rgba(111, 255, 170, .56) !important;
    box-shadow: 0 0 0 4px rgba(53, 208, 127, .13), 0 0 28px rgba(53, 208, 127, .09);
  }

  label {
    color: #d9f7e5;
  }

  .btn,
  button {
    border-color: var(--jt-line) !important;
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease,
      background .18s ease,
      opacity .18s ease;
  }

  .btn:hover,
  button:hover {
    transform: translateY(-1px);
    border-color: var(--jt-line-strong) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  }

  .btn.primary,
  button.primary {
    background: linear-gradient(135deg, #1fa463, #35d07f) !important;
    color: #031008 !important;
    font-weight: 900;
    border-color: rgba(111, 255, 170, .44) !important;
    box-shadow: 0 14px 32px rgba(53, 208, 127, .18);
  }

  .btn.danger {
    border-color: rgba(255, 159, 159, .32) !important;
    background: rgba(255, 159, 159, .08) !important;
    color: #ffd0d0 !important;
  }

  .table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
  }

  .table th {
    color: #c9f8dc;
    background: rgba(111, 255, 170, .06);
    border-bottom: 1px solid var(--jt-line);
  }

  .table td {
    border-bottom-color: rgba(111, 214, 143, .10) !important;
  }

  .table tr:hover td {
    background: rgba(111, 255, 170, .035);
  }

  .pill {
    border: 1px solid var(--jt-line);
    background: rgba(111, 255, 170, .07);
    color: #d8ffe7;
  }
}

/* Login refinado, ativado pelo app.js */
@media screen {
  body.jt-login-page {
    min-height: 100vh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 18% 16%, rgba(53, 208, 127, .20), transparent 26rem),
      radial-gradient(circle at 86% 18%, rgba(242, 214, 75, .12), transparent 24rem),
      radial-gradient(circle at 50% 110%, rgba(111, 255, 170, .12), transparent 28rem),
      linear-gradient(145deg, #020806, #06150e 48%, #020705);
  }

  body.jt-login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(111,255,170,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(111,255,170,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 72%);
    animation: jtGridDrift 18s linear infinite;
  }

  body.jt-login-page::after {
    content: "";
    position: fixed;
    width: 420px;
    height: 420px;
    right: -120px;
    top: -120px;
    border-radius: 999px;
    background:
      radial-gradient(circle, rgba(111,255,170,.18), transparent 58%),
      conic-gradient(from 90deg, transparent, rgba(53,208,127,.22), transparent, rgba(242,214,75,.16), transparent);
    filter: blur(.2px);
    opacity: .88;
    animation: jtOrbTurn 16s linear infinite;
    pointer-events: none;
  }

  body.jt-login-page .card {
    max-width: 460px;
    margin: min(10vh, 78px) auto;
    padding: clamp(22px, 4vw, 34px) !important;
  }

  body.jt-login-page .h1,
  body.jt-login-page h1 {
    font-size: clamp(28px, 5vw, 42px);
    line-height: .95;
  }

  .jt-circuit-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }

  .jt-circuit-field i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: rgba(111, 255, 170, .8);
    box-shadow: 0 0 16px rgba(111, 255, 170, .7);
    left: var(--x);
    top: var(--y);
    opacity: var(--o);
    animation: jtStarFloat var(--d) ease-in-out infinite;
  }

  body.jt-login-page > *:not(.jt-circuit-field) {
    position: relative;
    z-index: 1;
  }
}

.jt-fade-in {
  animation: jtFadeIn .32s ease both;
}

@keyframes jtFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.995);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes jtGridDrift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 88px 44px;
  }
}

@keyframes jtOrbTurn {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes jtStarFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: calc(var(--o) * .65);
  }

  50% {
    transform: translate3d(10px, -18px, 0);
    opacity: var(--o);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .jt-circuit-field {
    display: none !important;
  }
}


/* HUMANIZED_JAMBU_UI_V1 */
@media screen {
  :root {
    --jt-bg-0: #020705;
    --jt-bg-1: #06110d;
    --jt-bg-2: #0a1c15;
    --jt-card: rgba(8, 24, 17, .82);
    --jt-card-strong: rgba(9, 31, 22, .94);
    --jt-line: rgba(123, 181, 107, .20);
    --jt-line-strong: rgba(117, 205, 141, .38);
    --jt-green: #2dbf72;
    --jt-green-soft: #9be6b1;
    --jt-green-deep: #0b3525;
    --jt-yellow: #d8bd4a;
    --jt-text: #edf8f1;
    --jt-muted: #9fb8aa;
    --jt-shadow: 0 18px 54px rgba(0, 0, 0, .30);
    --jt-radius: 10px;
  }

  body {
    background:
      radial-gradient(circle at 14% 4%, rgba(45, 191, 114, .10), transparent 28rem),
      radial-gradient(circle at 92% 0%, rgba(216, 189, 74, .055), transparent 26rem),
      linear-gradient(145deg, var(--jt-bg-0), var(--jt-bg-1) 46%, #020604) !important;
  }

  .shell {
    position: relative;
    isolation: isolate;
    background:
      linear-gradient(120deg, rgba(4, 14, 10, .80), rgba(3, 8, 6, .96)),
      radial-gradient(circle at 88% 10%, rgba(45, 191, 114, .055), transparent 26rem) !important;
  }

  .shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .34;
    background-image:
      linear-gradient(90deg, rgba(123,181,107,.16) 1px, transparent 1px),
      linear-gradient(0deg, rgba(123,181,107,.10) 1px, transparent 1px),
      linear-gradient(90deg, transparent 0 46px, rgba(45,191,114,.14) 46px 48px, transparent 48px 96px),
      radial-gradient(circle at 24px 24px, rgba(155,230,177,.28) 0 1px, transparent 2px);
    background-size: 96px 96px, 96px 96px, 192px 192px, 96px 96px;
    mask-image: linear-gradient(90deg, transparent, black 16%, black 86%, transparent), linear-gradient(180deg, black, transparent 88%);
    mask-composite: intersect;
  }

  .side,
  .main {
    position: relative;
    z-index: 1;
  }

  .side {
    background:
      linear-gradient(180deg, rgba(5, 17, 12, .98), rgba(3, 9, 7, .98)),
      radial-gradient(circle at 16% 0%, rgba(45, 191, 114, .09), transparent 16rem) !important;
    box-shadow: 12px 0 44px rgba(0, 0, 0, .24) !important;
  }

  .brand {
    letter-spacing: 0 !important;
    text-shadow: none !important;
  }

  .brand::after {
    width: 42px !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--jt-green), rgba(216,189,74,.72)) !important;
    box-shadow: none !important;
  }

  .nav a {
    border-radius: 8px !important;
    color: #dcefe5 !important;
  }

  .nav a:hover,
  .nav a.jt-active {
    background: rgba(45, 191, 114, .075) !important;
    border-color: rgba(123, 181, 107, .26) !important;
    box-shadow: none !important;
  }

  .main {
    background:
      radial-gradient(circle at 82% 2%, rgba(45, 191, 114, .045), transparent 22rem),
      radial-gradient(circle at 8% 96%, rgba(216, 189, 74, .035), transparent 20rem) !important;
  }

  .h1 {
    letter-spacing: 0 !important;
  }

  .card {
    border-radius: 10px !important;
    border-color: rgba(123, 181, 107, .22) !important;
    background:
      linear-gradient(145deg, rgba(10, 29, 21, .90), rgba(5, 13, 10, .94)),
      radial-gradient(circle at 100% 0%, rgba(45, 191, 114, .055), transparent 16rem) !important;
    box-shadow: var(--jt-shadow) !important;
  }

  .card::before {
    background:
      linear-gradient(135deg, rgba(255,255,255,.045), transparent 42%),
      linear-gradient(90deg, transparent, rgba(123,181,107,.055), transparent) !important;
    opacity: .50 !important;
  }

  .btn,
  button {
    border-radius: 8px !important;
  }

  .btn:hover,
  button:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .20) !important;
  }

  .btn.primary,
  button.primary {
    background: linear-gradient(135deg, #24985d, #7bb56b) !important;
    box-shadow: 0 10px 22px rgba(45, 191, 114, .15) !important;
  }

  input,
  select,
  textarea {
    border-radius: 8px !important;
    background: rgba(2, 9, 7, .58) !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    box-shadow: 0 0 0 3px rgba(45, 191, 114, .12) !important;
  }

  .table th {
    background: rgba(45, 191, 114, .055) !important;
    color: #d9f3e2 !important;
  }

  .table tr:hover td {
    background: rgba(45, 191, 114, .028) !important;
  }

  .pill {
    background: rgba(45, 191, 114, .065) !important;
    color: #ddf7e6 !important;
  }

  body.jt-login-page {
    background:
      radial-gradient(circle at 18% 18%, rgba(45, 191, 114, .13), transparent 25rem),
      radial-gradient(circle at 84% 16%, rgba(216, 189, 74, .07), transparent 24rem),
      linear-gradient(145deg, #020705, #06120d 52%, #020604) !important;
  }

  body.jt-login-page::before {
    opacity: .42 !important;
    background-image:
      linear-gradient(90deg, rgba(123,181,107,.16) 1px, transparent 1px),
      linear-gradient(0deg, rgba(123,181,107,.10) 1px, transparent 1px),
      radial-gradient(circle at 24px 24px, rgba(155,230,177,.28) 0 1px, transparent 2px) !important;
    background-size: 96px 96px, 96px 96px, 96px 96px !important;
    animation: none !important;
    mask-image: radial-gradient(circle at 50% 48%, black, transparent 76%) !important;
  }

  body.jt-login-page::after {
    display: none !important;
  }

  body.jt-login-page .login .card,
  body.jt-login-page .card {
    border-radius: 12px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .36) !important;
  }

  body.jt-login-page .login .card::after {
    height: 2px !important;
    background: linear-gradient(90deg, #2dbf72, rgba(216,189,74,.78)) !important;
    opacity: .82 !important;
  }

  body.jt-login-page .jt-login-brand {
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  body.jt-login-page .jt-login-brand img {
    display: block !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 13px !important;
    transform: translateY(1px);
  }

  body.jt-login-page .jt-login-brand > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
  }

  body.jt-login-page .jt-login-brand-title {
    line-height: 1.02 !important;
  }

  body.jt-login-page .jt-login-brand .sub {
    margin: 4px 0 0 !important;
    line-height: 1.25 !important;
  }

  body.jt-login-page .jt-login-kicker {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 800 !important;
    color: #dff6e7 !important;
    background: rgba(45, 191, 114, .075) !important;
  }

  body.jt-login-page .jt-login-note {
    color: #a8bdaf !important;
  }

  .jt-circuit-field i {
    width: 2px !important;
    height: 2px !important;
    background: rgba(155, 230, 177, .45) !important;
    box-shadow: 0 0 8px rgba(45, 191, 114, .22) !important;
  }
}

@media screen and (min-width: 821px) {
  body.jt-login-page {
    min-height: 100svh;
  }

  body.jt-login-page .login.login {
    min-height: 100svh !important;
    padding: 14px 22px !important;
    align-items: center !important;
  }

  body.jt-login-page .login > .card.card {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 20px 24px !important;
  }

  body.jt-login-page .login .card.card::after {
    left: 18px !important;
    right: 18px !important;
  }

  body.jt-login-page .jt-login-brand.jt-login-brand {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  body.jt-login-page .jt-login-brand img {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
  }

  body.jt-login-page .jt-login-brand > div {
    min-height: 46px !important;
  }

  body.jt-login-page .jt-login-brand-title {
    font-size: 25px !important;
    line-height: 1 !important;
  }

  body.jt-login-page .jt-login-brand .sub {
    margin-top: 2px !important;
    line-height: 1.18 !important;
  }

  body.jt-login-page .jt-login-kicker.jt-login-kicker {
    margin-bottom: 9px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
  }

  body.jt-login-page .login label {
    margin: 8px 0 5px !important;
  }

  body.jt-login-page .login input {
    min-height: 43px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    border-radius: 10px !important;
  }

  body.jt-login-page .login .btn {
    min-height: 43px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    border-radius: 10px !important;
  }

  body.jt-login-page .jt-login-note.jt-login-note {
    margin-top: 11px !important;
    font-size: 12.5px !important;
    line-height: 1.32 !important;
  }
}

@media screen and (max-width: 820px) {
  .shell::before {
    opacity: .22;
    background-size: 80px 80px, 80px 80px, 160px 160px, 80px 80px;
  }

  .card {
    border-radius: 8px !important;
  }
}
/* HUMANIZED_JAMBU_UI_V1_END */