/* Soluti - Dark Theme (Bootstrap 5.3) */
:root{
  --bg0:#0b0f14;
  --bg1:#0f1620;
  --bg2:#121b27;
  --card:#0f1722;
  --card2:#101a28;
  --border:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.64);
  --accent:#4da3ff;
  --accent2:#00d1b2;
  --danger:#ff4d6d;
  --warn:#ffcc66;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:18px;
}

/* Page */
html,body{height:100%;}
body{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(77,163,255,.20), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(0,209,178,.18), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg2));
  color: var(--text);
}

/* Typography */
h1,h2,h3,h4,h5{letter-spacing:.2px;}
.small, .text-muted{color:var(--muted)!important;}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.card.card-body{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

/* Tables */
.table{
  color: var(--text);
}
.table thead th{
  background: rgba(255,255,255,.04)!important;
  color: rgba(255,255,255,.82)!important;
  border-bottom: 1px solid var(--border)!important;
}
.table td, .table th{
  border-color: var(--border)!important;
}
.table-hover tbody tr:hover{
  background: rgba(77,163,255,.06);
}

/* Inputs */
.form-control, .form-select{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
}
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.04);
  border-color: rgba(77,163,255,.55);
  box-shadow: 0 0 0 .25rem rgba(77,163,255,.15);
  color: var(--text);
}
.form-control[readonly]{
  opacity: .75;
}
::placeholder{color: rgba(255,255,255,.35)!important;}

/* Combobox/select aberto no padrão escuro do sistema */
.form-select,
select.form-select,
select{
  background-color: #111a26 !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.form-select option,
select option{
  background-color: #111a26 !important;
  color: #ffffff !important;
}
.form-select option:checked,
select option:checked{
  background-color: #2f80ed !important;
  color: #ffffff !important;
}
.form-select option:hover,
select option:hover{
  background-color: #1d3550 !important;
  color: #ffffff !important;
}
.form-select:disabled,
select:disabled{
  background-color: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.60) !important;
}


/* Buttons */
.btn{
  border-radius: 14px;
  font-weight: 600;
}
.btn-primary{
  background: linear-gradient(180deg, rgba(77,163,255,1), rgba(55,135,255,1));
  border: none;
  box-shadow: 0 8px 20px rgba(77,163,255,.25);
}
.btn-primary:hover{filter: brightness(1.05);}
.btn-outline-secondary, .btn-outline-primary, .btn-outline-success{
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
}
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-success:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.26);
}
.btn-dark{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.btn-dark:hover{background: rgba(255,255,255,.09);}

/* Alerts */
.alert{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(77,163,255,.08);
  color: rgba(255,255,255,.88);
}
.alert-warning{
  background: rgba(255,128,0,.22);
  border-color: rgba(255,128,0,.55);
}
.alert-barcode-exists{
  background: #f7931a !important;
  border-color: #ffab43 !important;
  color: #ffffff !important;
}
.alert-info{background: rgba(77,163,255,.10);}

/* Header spacing */
.container{max-width: 1100px;}


/* Tiles (menu buttons) */
.tile-card{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  text-decoration:none;
  color: var(--text);
  font-weight: 700;
  letter-spacing:.2px;
  padding: 18px;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
}

/* Painel: reduzir o tamanho do botão (aprox. -25% do original)
   Obs.: "reduzir em 75%" costuma ser interpretado como deixar com 25% do tamanho.
   Para manter usabilidade no celular, usamos 75% do tamanho original. */
.tile-compact{
  width: 75%;
  max-width: 340px;
}
.tile-compact .tile-head{font-size:.78rem;}
.tile-compact .tile-body{font-size:1.02rem;}
.tile-compact .tile-foot{font-size:.78rem;}
.tile-card:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  background: linear-gradient(180deg, rgba(77,163,255,.10), rgba(255,255,255,.02));
  color: var(--text);
}
.tile-card .tile-sub{
  display:block;
  margin-top:10px;
  font-weight:600;
  color: var(--muted);
  letter-spacing:0;
}


/* Painel - Status do servidor */
.tile-online{
  border-color: rgba(0,209,178,.95);
  background: linear-gradient(180deg, rgba(0,209,178,.55), rgba(0,0,0,.15));
  box-shadow: 0 14px 34px rgba(0,209,178,.18), var(--shadow);
}
.tile-offline{
  border-color: rgba(255,77,109,.95);
  background: linear-gradient(180deg, rgba(255,77,109,.60), rgba(0,0,0,.18));
  box-shadow: 0 14px 34px rgba(255,77,109,.18), var(--shadow);
}
.tile-head{
  font-size:.85rem;
  letter-spacing:.9px;
  color: var(--muted);
  margin-bottom: 10px;
}
.tile-body{
  font-size:1.15rem;
  line-height:1.15;
}
.tile-foot{
  margin-top: 14px;
  font-size:.85rem;
  color: var(--muted);
}
.tile-foot b{color: var(--text);}