:root{
 --bg:#05080d;
 --bg2:#09111a;
 --panel:#0c141f;
 --panel2:#101b28;
 --border:#24354a;

 --orange:#ff9418;
 --orange2:#ffb33e;
 --blue:#0fc6ec;

 --text:#f5f8fc;
 --muted:#8699ae;

 --green:#28da87;
 --red:#ff4864;
 --yellow:#ffc44d;
}

*{
 box-sizing:border-box;
}

html,body{
 margin:0;
 min-height:100%;
 font-family:Arial,Helvetica,sans-serif;
 color:var(--text);
 background:#05080d;
}

body{
 background:
 radial-gradient(circle at 85% 18%,rgba(0,190,235,.08),transparent 28%),
 radial-gradient(circle at 65% 90%,rgba(255,148,24,.07),transparent 30%),
 #05080d;
}

/* ==============================
   TOPO
   ============================== */

header{
 height:72px !important;
 display:flex !important;
 align-items:center !important;
 justify-content:space-between !important;
 padding:0 25px !important;

 background:rgba(7,13,21,.97) !important;
 border-bottom:1px solid var(--border) !important;
}

.logo{
 font-size:0 !important;
 display:flex;
 align-items:center;
 gap:11px;
}

.logo:before{
 content:"O";
 width:38px;
 height:38px;
 border-radius:11px;

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

 font-size:18px;
 font-weight:900;
 color:#111;

 background:linear-gradient(145deg,var(--orange2),var(--orange));

 box-shadow:
 0 0 0 1px rgba(255,255,255,.08),
 0 8px 25px rgba(255,148,24,.22);
}

.logo:after{
 content:"ONFIRST1 • DISCadora";
 font-size:17px;
 font-weight:900;
 color:white;
 letter-spacing:.3px;
}

.user{
 font-size:13px !important;
 color:#91a6bd !important;
}

/* ==============================
   LAYOUT
   ============================== */

.wrap{
 display:flex !important;
 min-height:calc(100vh - 72px);
}

aside{
 width:255px !important;
 padding:18px !important;

 background:#070d15 !important;
 border-right:1px solid var(--border) !important;
}

aside:before{
 content:"PAINEL DE CONTROLE";
 display:block;
 font-size:10px;
 font-weight:800;
 letter-spacing:1.5px;
 color:#53677e;
 margin:4px 5px 14px;
}

aside button{
 width:100%;
 text-align:left;

 padding:13px 14px !important;
 margin-bottom:8px !important;

 color:#a7b5c6 !important;
 background:#0d1723 !important;

 border:1px solid #1d3044 !important;
 border-radius:9px !important;

 cursor:pointer;
 transition:.16s;
}

aside button:hover{
 color:white !important;
 border-color:rgba(255,148,24,.55) !important;
 transform:translateX(2px);
}

aside button.active{
 color:var(--orange2) !important;

 border-color:var(--orange) !important;

 background:
 linear-gradient(
   90deg,
   rgba(255,148,24,.17),
   rgba(255,148,24,.025)
 ) !important;

 box-shadow:inset 3px 0 0 var(--orange);
}

main{
 flex:1 !important;
 padding:28px 32px !important;
}

h1{
 margin-top:0;
 letter-spacing:-.5px;
}

/* ==============================
   CARDS
   ============================== */

.card{
 background:
 linear-gradient(
  145deg,
  rgba(15,25,37,.98),
  rgba(8,15,23,.98)
 ) !important;

 border:1px solid var(--border) !important;
 border-radius:15px !important;

 box-shadow:0 16px 40px rgba(0,0,0,.18);
}

.topbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:20px;
 margin-bottom:20px;
}

/* ==============================
   TABELAS
   ============================== */

table{
 width:100%;
 border-collapse:collapse;
}

th,
td{
 padding:13px 12px !important;
 border-bottom:1px solid #1d2c3e !important;
 text-align:left;
 font-size:14px;
}

th{
 color:#f2a642 !important;
 font-size:12px !important;
 text-transform:uppercase;
 letter-spacing:.5px;
}

td{
 color:#d9e2ec;
}

/* ==============================
   BOTOES
   ============================== */

.btn{
 border:0 !important;
 border-radius:9px !important;

 padding:11px 16px !important;

 background:
 linear-gradient(
  135deg,
  var(--orange2),
  var(--orange)
 ) !important;

 color:#17100a !important;
 font-weight:800 !important;

 cursor:pointer;

 box-shadow:0 7px 22px rgba(255,148,24,.15);
}

.btn:hover{
 filter:brightness(1.07);
 transform:translateY(-1px);
}

.btn.secondary{
 color:#dbe6f1 !important;
 background:#26384c !important;
 box-shadow:none;
}

.small{
 padding:7px 11px !important;
 font-size:12px !important;
}

/* ==============================
   FORMULARIOS
   ============================== */

label{
 color:#91a5bb !important;
 font-size:12px !important;
 font-weight:700;
}

input,
select,
textarea{
 width:100%;

 padding:12px !important;

 background:#08111a !important;

 color:white !important;

 border:1px solid #2a3b50 !important;
 border-radius:9px !important;

 outline:none;
}

input:focus,
select:focus,
textarea:focus{
 border-color:var(--orange) !important;
 box-shadow:0 0 0 3px rgba(255,148,24,.10);
}

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

.modal-bg{
 background:rgba(0,0,0,.76) !important;
 backdrop-filter:blur(3px);
}

.modal{
 background:#0d1621 !important;

 border:1px solid #304156 !important;
 border-radius:17px !important;

 box-shadow:0 30px 90px rgba(0,0,0,.55);
}

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

.ativo,
.online{
 color:var(--green) !important;
 font-weight:800;
}

.bloqueado,
.offline{
 color:var(--red) !important;
 font-weight:800;
}

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

.onfirst-login{
 min-height:100vh;

 display:flex;
 align-items:center;

 padding-left:8%;

 position:relative;
 overflow:hidden;

 background:
 linear-gradient(
  90deg,
  rgba(1,5,9,.98) 0%,
  rgba(2,7,12,.94) 36%,
  rgba(3,10,16,.68) 72%,
  rgba(3,10,16,.52) 100%
 ),
 radial-gradient(
  circle at 78% 38%,
  rgba(0,196,235,.22),
  transparent 34%
 ),
 radial-gradient(
  circle at 58% 85%,
  rgba(255,148,24,.16),
  transparent 25%
 ),
 #06101a;
}

.onfirst-login:after{
 content:"";
 position:absolute;
 inset:0;

 background:
 linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);

 background-size:35px 35px;

 pointer-events:none;
}

.login-card{
 width:430px;
 max-width:92%;

 position:relative;
 z-index:2;

 padding:36px;

 background:rgba(9,16,25,.92);

 border:1px solid #293d54;
 border-radius:22px;

 backdrop-filter:blur(18px);

 box-shadow:0 30px 100px rgba(0,0,0,.60);
}

.login-brand{
 display:flex;
 align-items:center;
 gap:12px;

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

.login-brand-mark{
 width:44px;
 height:44px;

 border-radius:13px;

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

 background:linear-gradient(145deg,var(--orange2),var(--orange));

 color:#14100b;
 font-weight:900;
}

.login-title{
 font-size:30px;
 font-weight:900;
 margin:30px 0 6px;
}

.login-subtitle{
 color:#8397ad;
 margin-bottom:29px;
}

.login-card label{
 display:block;
 margin:15px 0 7px;
}

.login-card input{
 padding:14px !important;
}

.login-enter{
 width:100%;

 padding:14px;

 margin-top:23px;

 border:0;
 border-radius:10px;

 background:
 linear-gradient(
  135deg,
  var(--orange2),
  var(--orange)
 );

 color:#18110a;

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

 cursor:pointer;
}

.login-footer{
 margin-top:25px;
 text-align:center;

 color:#586b80;
 font-size:11px;
 letter-spacing:.4px;
}

@media(max-width:850px){

 aside{
   width:200px !important;
 }

 main{
   padding:20px !important;
 }

 .onfirst-login{
   padding:20px;
   justify-content:center;
 }

}

/* ==========================================
   ONFIRST1 - BACKGROUNDS FINAIS
   ========================================== */

.onfirst-login{
    background:
        linear-gradient(
            90deg,
            rgba(1,5,10,.96) 0%,
            rgba(1,5,10,.88) 35%,
            rgba(1,5,10,.42) 100%
        ),
        url('/assets/login-bg.jpg') center center / cover no-repeat fixed !important;
}

body{
    background:#04080d !important;
}

body:after{
    content:"";
    position:fixed;
    top:72px;
    left:255px;
    right:0;
    bottom:0;

    background:
        linear-gradient(
            rgba(3,8,13,.84),
            rgba(3,8,13,.91)
        ),
        url('/assets/painel-bg.jpg') center center / cover no-repeat;

    z-index:-20;
    pointer-events:none;
}

main{
    background:transparent !important;
}

.card{
    background:rgba(9,18,28,.90) !important;
    backdrop-filter:blur(4px);
}

header{
    background:rgba(5,12,20,.97) !important;
}

aside{
    background:rgba(5,12,20,.97) !important;
}

.modal{
    background:rgba(9,18,28,.98) !important;
}