/* =========================================================
   GLP + NADIR
   CUBAGEM / PADRAO VISUAL MONITORAMENTO
   ========================================================= */

:root{
  --glp-navy:#092f4d;
  --glp-navy-2:#113e5d;
  --glp-blue:#245edb;
  --glp-cyan:#0bb8c8;
  --glp-cyan-soft:#dbf5f7;
  --glp-green:#188351;
  --glp-green-soft:#e9f7ef;
  --glp-yellow:#d59c1a;

  --glp-text:#173650;
  --glp-muted:#70879a;

  --glp-line:#dbe7ef;
  --glp-line-2:#eaf0f4;

  --glp-bg:#f5f9fc;
  --glp-panel:#ffffff;

  --glp-radius:18px;
  --glp-radius-sm:12px;

  --glp-shadow:
    0 14px 45px rgba(14,56,83,.08);

  --glp-shadow-soft:
    0 7px 25px rgba(14,56,83,.06);
}


/* =========================================================
   BASE
   ========================================================= */

html{
  background:#f5f9fc;
}

body.glp-monitor-theme{
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(36,94,219,.06),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 12%,
      rgba(11,184,200,.07),
      transparent 26%
    ),
    #f6f9fc !important;

  color:var(--glp-text) !important;
}


/* =========================================================
   LOGIN
   ========================================================= */

body.glp-monitor-login{
  margin:0 !important;
  min-height:100vh !important;

  background:
    #f6fafc !important;

  overflow-x:hidden;
}

body.glp-monitor-login > *:not(.glp-login-shell){
  display:none !important;
}

.glp-login-shell{
  width:100%;
  min-height:100vh;

  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(480px,1fr);

  background:#fff;
}


/* ESQUERDA */

.glp-login-hero{
  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:center;

  min-height:100vh;

  padding:
    clamp(50px,6vw,110px)
    clamp(55px,7vw,130px);

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #f4faff 0%,
      #eef8fb 45%,
      #e0f7f8 100%
    );
}

.glp-login-hero::before{
  content:"";

  position:absolute;
  width:660px;
  height:660px;

  right:-280px;
  top:40px;

  border-radius:50%;

  border:
    1px solid
    rgba(55,137,211,.08);

  background:
    rgba(80,163,223,.05);
}

.glp-login-hero::after{
  content:"";

  position:absolute;

  width:760px;
  height:480px;

  left:-120px;
  bottom:-350px;

  border-radius:50%;

  background:
    rgba(33,108,220,.05);
}

.glp-login-brand{
  position:absolute;
  top:68px;
  left:clamp(55px,7vw,130px);

  display:flex;
  align-items:center;
  gap:20px;

  z-index:2;
}

.glp-login-glp-logo{
  width:54px;
  height:54px;

  object-fit:contain;

  padding:6px;

  border-radius:10px;

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

  box-shadow:
    0 8px 20px
    rgba(21,75,110,.06);
}

.glp-login-brand-divider{
  width:1px;
  height:42px;

  background:#c9dbe7;
}

.glp-login-nadir-logo{
  width:170px;
  height:auto;

  object-fit:contain;
}

.glp-login-hero-content{
  position:relative;
  z-index:2;

  max-width:750px;
}

.glp-login-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:22px;

  color:#088ea6;

  font-size:13px;
  font-weight:900;

  letter-spacing:.17em;

  text-transform:uppercase;
}

.glp-login-eyebrow::before{
  content:"";

  width:9px;
  height:9px;

  border-radius:50%;

  background:#14c0ce;

  box-shadow:
    0 0 0 6px
    rgba(20,192,206,.10);
}

.glp-login-title{
  margin:0;

  color:#0d3655;

  font-size:
    clamp(48px,5vw,88px);

  line-height:.98;

  letter-spacing:-.055em;

  font-weight:900;
}

.glp-login-description{
  max-width:690px;

  margin:
    28px 0 0;

  color:#547792;

  font-size:
    clamp(16px,1.15vw,21px);

  line-height:1.6;
}

.glp-login-features{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;

  margin-top:42px;

  max-width:760px;
}

.glp-login-feature{
  min-height:120px;

  padding:20px;

  border:
    1px solid
    rgba(120,165,194,.28);

  border-radius:18px;

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

  backdrop-filter:
    blur(7px);

  box-shadow:
    0 8px 30px
    rgba(30,80,110,.04);
}

.glp-login-feature-number{
  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:14px;

  border-radius:9px;

  background:#fff;

  box-shadow:
    0 5px 15px
    rgba(20,80,120,.07);

  color:#245edb;

  font-size:12px;
  font-weight:900;
}

.glp-login-feature strong{
  display:block;

  color:#173c57;

  font-size:14px;

  margin-bottom:6px;
}

.glp-login-feature span{
  color:#728b9f;

  font-size:12px;

  line-height:1.45;
}

.glp-login-footer-brand{
  position:absolute;

  left:clamp(55px,7vw,130px);
  bottom:55px;

  z-index:2;

  display:flex;
  align-items:center;
  gap:13px;

  color:#173650;

  font-size:11px;
  font-weight:800;
}

.glp-login-footer-brand::before{
  content:"";

  width:22px;
  height:1px;

  background:#95acbc;
}


/* DIREITA */

.glp-login-access{
  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:45px;

  background:#fff;
}

.glp-login-card{
  width:min(100%,600px);

  padding:
    clamp(42px,5vw,70px);

  border:
    1px solid
    #dce7ee;

  border-radius:32px;

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

  box-shadow:
    0 18px 60px
    rgba(18,65,95,.07);
}

.glp-login-card-logo{
  width:52px;
  height:52px;

  object-fit:contain;

  margin-bottom:25px;

  padding:5px;

  border:
    1px solid
    #e5eef3;

  border-radius:10px;
}

.glp-login-card-eyebrow{
  color:#0792aa;

  font-size:11px;
  font-weight:900;

  letter-spacing:.16em;

  text-transform:uppercase;
}

.glp-login-card-title{
  margin:
    14px 0 8px;

  color:#113b58;

  font-size:
    clamp(32px,3vw,48px);

  line-height:1.05;

  letter-spacing:-.04em;

  font-weight:900;
}

.glp-login-card-subtitle{
  margin:0 0 34px;

  color:#6e8597;

  font-size:15px;

  line-height:1.5;
}


/* FORM ORIGINAL PRESERVADO */

.glp-login-card form{
  display:block !important;
  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;

  box-shadow:none !important;
  border:0 !important;
}

.glp-login-card label{
  display:block !important;

  margin:
    0 0 8px !important;

  color:#163b56 !important;

  font-size:11px !important;
  font-weight:900 !important;

  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}

.glp-login-card input{
  width:100% !important;

  min-height:58px !important;

  box-sizing:border-box !important;

  margin:
    0 0 20px !important;

  padding:
    0 18px !important;

  border:
    1px solid
    #cdddea !important;

  border-radius:14px !important;

  outline:none !important;

  background:
    #f0f5fc !important;

  color:#173650 !important;

  font-size:14px !important;

  box-shadow:none !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease !important;
}

.glp-login-card input:focus{
  border-color:
    #46a7d7 !important;

  background:#fff !important;

  box-shadow:
    0 0 0 4px
    rgba(32,154,202,.10) !important;
}

.glp-login-card button[type="submit"],
.glp-login-card input[type="submit"]{
  width:100% !important;
  min-height:64px !important;

  margin-top:5px !important;

  border:0 !important;

  border-radius:14px !important;

  background:
    linear-gradient(
      100deg,
      #2861da 0%,
      #08b9c5 100%
    ) !important;

  color:#fff !important;

  font-size:16px !important;
  font-weight:900 !important;

  cursor:pointer !important;

  box-shadow:
    0 16px 30px
    rgba(20,128,187,.20) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease !important;
}

.glp-login-card button[type="submit"]:hover{
  transform:
    translateY(-1px);

  box-shadow:
    0 18px 34px
    rgba(20,128,187,.26) !important;
}

.glp-login-security{
  display:flex;
  align-items:flex-start;
  gap:12px;

  margin-top:22px;

  padding:14px 16px;

  border:
    1px solid
    #dfe9ef;

  border-radius:12px;

  background:#f8fbfd;

  color:#688094;

  font-size:11px;

  line-height:1.45;
}

.glp-login-security-icon{
  width:26px;
  height:26px;

  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#e2f8f5;

  color:#0fa7ad;

  font-size:14px;
  font-weight:900;
}

.glp-login-back{
  display:inline-flex;

  margin-top:25px;

  color:#65819a;

  text-decoration:none;

  font-size:11px;
  font-weight:800;
}

.glp-login-back:hover{
  color:#245edb;
}


/* =========================================================
   AREA INTERNA
   ========================================================= */

body.glp-monitor-app{
  background:
    linear-gradient(
      180deg,
      #f3f8fb 0,
      #f7fafc 260px,
      #f6f9fb 100%
    ) !important;
}


/* HEADER */

body.glp-monitor-app header{
  background:
    rgba(255,255,255,.95) !important;

  border-bottom:
    1px solid
    #dbe7ef !important;

  box-shadow:
    0 3px 18px
    rgba(22,67,94,.04) !important;

  backdrop-filter:
    blur(12px);
}

body.glp-monitor-app header img{
  object-fit:contain;
}

body.glp-monitor-app header button,
body.glp-monitor-app header .btn{
  border-radius:999px !important;
}


/* MAIN */

body.glp-monitor-app main{
  width:
    min(100% - 36px,1680px);

  margin:
    0 auto !important;

  padding:
    26px 0 65px !important;
}


/* HERO / TOPO */

body.glp-monitor-app .hero,
body.glp-monitor-app .top-card,
body.glp-monitor-app .intro,
body.glp-monitor-app [class*="hero"]{
  border-radius:
    var(--glp-radius) !important;
}


/* PAINEIS */

body.glp-monitor-app .panel,
body.glp-monitor-app .card,
body.glp-monitor-app .kpi-card,
body.glp-monitor-app #glpC39 > *,
body.glp-monitor-app .glp-c312-plan,
body.glp-monitor-app .glp-c3122-rule{
  border:
    1px solid
    var(--glp-line) !important;

  border-radius:
    var(--glp-radius) !important;

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

  box-shadow:
    var(--glp-shadow-soft) !important;
}


/* KPI */

body.glp-monitor-app .kpi-grid{
  gap:14px !important;
}

body.glp-monitor-app .kpi-grid > *{
  position:relative;

  overflow:hidden;

  min-height:118px;

  padding:
    20px !important;

  border:
    1px solid
    var(--glp-line) !important;

  border-radius:
    17px !important;

  background:
    #fff !important;

  box-shadow:
    var(--glp-shadow-soft) !important;
}

body.glp-monitor-app .kpi-grid > *::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      #2861da,
      #09b7c5
    );
}


/* TITULOS */

body.glp-monitor-app h1,
body.glp-monitor-app h2,
body.glp-monitor-app h3,
body.glp-monitor-app h4{
  color:
    var(--glp-navy) !important;
}

body.glp-monitor-app h1{
  letter-spacing:-.035em;
}


/* INPUTS */

body.glp-monitor-app input,
body.glp-monitor-app select,
body.glp-monitor-app textarea{
  min-height:46px;

  border:
    1px solid
    #ccdde8 !important;

  border-radius:
    11px !important;

  background:
    #f8fbfd !important;

  color:
    #173650 !important;

  box-shadow:
    none !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

body.glp-monitor-app input:focus,
body.glp-monitor-app select:focus,
body.glp-monitor-app textarea:focus{
  outline:none !important;

  border-color:
    #55acd3 !important;

  background:#fff !important;

  box-shadow:
    0 0 0 4px
    rgba(10,163,198,.09) !important;
}


/* BOTOES */

body.glp-monitor-app button:not(.glp-c39-cell),
body.glp-monitor-app .btn{
  border-radius:
    11px !important;

  font-weight:
    800 !important;
}

body.glp-monitor-app button.primary,
body.glp-monitor-app .btn-primary,
body.glp-monitor-app button[type="submit"]{
  border:
    0 !important;

  background:
    linear-gradient(
      100deg,
      #2861da,
      #09b7c5
    ) !important;

  color:#fff !important;

  box-shadow:
    0 10px 24px
    rgba(25,118,190,.16) !important;
}


/* TABS */

body.glp-monitor-app .tabs,
body.glp-monitor-app [role="tablist"]{
  padding:5px !important;

  border:
    1px solid
    var(--glp-line) !important;

  border-radius:
    13px !important;

  background:
    #eef4f7 !important;
}

body.glp-monitor-app .tab.active,
body.glp-monitor-app [role="tab"][aria-selected="true"]{
  border-radius:
    9px !important;

  background:#fff !important;

  color:
    var(--glp-navy) !important;

  box-shadow:
    0 4px 12px
    rgba(24,72,99,.08) !important;
}


/* TABELAS */

body.glp-monitor-app table{
  width:100%;

  border-collapse:
    separate !important;

  border-spacing:
    0 !important;

  background:#fff;
}

body.glp-monitor-app thead th{
  position:sticky;

  top:0;

  background:
    #f5f8fa !important;

  color:
    #657e92 !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .035em;

  text-transform:
    uppercase;

  border-bottom:
    1px solid
    #dde7ed !important;
}

body.glp-monitor-app tbody td{
  color:
    #35546b !important;

  border-bottom:
    1px solid
    #e7eef2 !important;
}

body.glp-monitor-app tbody tr:hover td{
  background:
    #f9fcfd !important;
}


/* STATUS */

body.glp-monitor-app .status,
body.glp-monitor-app [class*="badge"]{
  border-radius:
    999px !important;
}


/* =========================================================
   MAPA DE CARGA C3
   ========================================================= */

body.glp-monitor-app #glpC39{
  margin-top:18px;
}

body.glp-monitor-app
#glpC39
.glp-c39-grid{
  gap:16px !important;
}

body.glp-monitor-app
#glpC39
.glp-c39-stage{
  border-radius:
    22px !important;

  box-shadow:
    0 20px 50px
    rgba(1,29,49,.18) !important;
}

body.glp-monitor-app
#glpC39
.glp-c39-side{
  gap:12px !important;
}

body.glp-monitor-app
#glpC39
.glp-c39-side > *{
  border-radius:
    15px !important;

  box-shadow:
    none !important;
}


/* =========================================================
   PLANO PALETIZADO
   ========================================================= */

body.glp-monitor-app
.glp-c312-plan{
  padding:17px !important;
}

body.glp-monitor-app
.glp-c3121-summary > div{
  border:
    1px solid
    #e0e9ef !important;

  border-radius:
    11px !important;

  background:
    #f9fbfc !important;
}

body.glp-monitor-app
.glp-c3121-table-wrap{
  border-radius:
    12px !important;
}


/* =========================================================
   BASES
   ========================================================= */

body.glp-monitor-app
[id*="base"],
body.glp-monitor-app
[class*="base"]{
  scrollbar-color:
    #b8cbd7 #f3f7f9;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

body.glp-monitor-app ::-webkit-scrollbar{
  width:10px;
  height:10px;
}

body.glp-monitor-app ::-webkit-scrollbar-track{
  background:#f2f6f8;
}

body.glp-monitor-app ::-webkit-scrollbar-thumb{
  background:#bacbd6;

  border:
    2px solid
    #f2f6f8;

  border-radius:999px;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:1050px){

  .glp-login-shell{
    grid-template-columns:1fr;
  }

  .glp-login-hero{
    min-height:auto;

    padding:
      130px 40px 65px;
  }

  .glp-login-brand{
    top:40px;
    left:40px;
  }

  .glp-login-footer-brand{
    display:none;
  }

  .glp-login-access{
    min-height:auto;

    padding:
      50px 25px;
  }

}


@media(max-width:680px){

  .glp-login-hero{
    padding:
      120px 22px 42px;
  }

  .glp-login-brand{
    left:22px;
  }

  .glp-login-nadir-logo{
    width:135px;
  }

  .glp-login-features{
    grid-template-columns:1fr;
  }

  .glp-login-title{
    font-size:48px;
  }

  .glp-login-access{
    padding:
      25px 14px;
  }

  .glp-login-card{
    padding:
      32px 22px;

    border-radius:22px;
  }

  body.glp-monitor-app main{
    width:
      min(100% - 20px,1680px);
  }

}
