@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=IBM+Plex+Mono:wght@400;700&display=swap");

:root{
  --font-login:"IBM Plex Mono", monospace;

  --primary-color:#b31d22;
  --primary-light-color:#e21a22;
  --primary-light-color-fade:#e21a222b;

  --secondary-color:#ff3b3f;
  --secondary-light-color:#ff8588;
  --secondary-lighter-color:#ffe5e6;
  --secondary-light-color-fade:#ffe5e62b;

  --third-color:#ffb300;
  --third-light-color:#ffcc33;
  --third-lighter-color:#fff0cc;
  --third-light-color-fade:#ffcc334b;

  --success-color:#198754;
  --success-light-color:#20c997;
  --success-light-color-fade:#1987542b;

  --error-color:#e21a22;
  --error-light-color:#ff6b6b;
  --error-light-color-fade:#e21a222b;

  --background-color:#eef5f4;
  --background-white:#ffffff;
  --text-color:#1a1a1b;
  --text-color-light:#f8f9fa;

  --header-bg-color:#1a0202;
  --header-bg-color-footer:#b31d22cc;

  --slider-active-color:#00d4ff;
  --inactive-color:#ced4da;

  --log-info-color:#00d4ff;
  --log-warning-color:#fd7e14;
  --log-error-color:#e21a22;
  --log-critical-color:#6610f2;

  --glass-bg-color:rgba(255,255,255,.10);
  --glass-border-color:rgba(255,255,255,.16);
  --glass-box-shadow:rgba(0,0,0,.30);

  --ui-bg0:#06070d;
  --ui-bg1:#0b0f1a;
  --ui-text:var(--text-color-light);
  --ui-muted:rgba(248,249,250,.72);

  --ui-glass:rgba(255,255,255,.07);
  --ui-glass-2:rgba(255,255,255,.10);
  --ui-border:rgba(255,255,255,.14);

  --ui-radius:22px;
  --ui-radius-lg:28px;

  --ui-shadow:0 22px 60px rgba(0,0,0,.55);
  --ui-shadow-soft:0 12px 30px rgba(0,0,0,.32);

  --ui-accent:var(--primary-light-color);
  --ui-cyan:var(--slider-active-color);
  --ui-success:var(--success-light-color);
  --ui-danger:var(--error-color);
  --ui-warning:var(--third-color);
}

*{box-sizing:border-box}
html,body{height:100%}

body.app-body{
  margin:0;
  color:var(--ui-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1100px 700px at 10% 10%, rgba(226,26,34,.28), transparent 62%),
    radial-gradient(900px 650px at 85% 12%, rgba(0,212,255,.22), transparent 60%),
    radial-gradient(900px 700px at 60% 95%, rgba(255,179,0,.12), transparent 60%),
    linear-gradient(180deg, var(--ui-bg0), var(--ui-bg1));
  overflow-x:hidden;
}

.app-decor{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.app-decor .orb{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:999px;
  filter:blur(28px);
  opacity:.55;
  transform:translateZ(0);
}
.app-decor .orb.orb-1{left:-180px;top:-190px;background:radial-gradient(circle at 30% 30%, rgba(226,26,34,.92), transparent 62%)}
.app-decor .orb.orb-2{right:-240px;top:-160px;background:radial-gradient(circle at 30% 30%, rgba(0,212,255,.85), transparent 62%)}
.app-decor .orb.orb-3{left:36%;bottom:-270px;background:radial-gradient(circle at 30% 30%, rgba(255,179,0,.45), transparent 64%)}

.app-shell{position:relative;z-index:1}

.navbar.navbar-glass{
  background:linear-gradient(180deg, rgba(26,2,2,.60), rgba(10,14,28,.45)) !important;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:var(--ui-shadow-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.navbar .navbar-brand{
  font-weight:750;
  letter-spacing:.2px;
}
.navbar .navbar-brand .brand-dot{
  display:inline-block;
  width:10px;
  height:10px;
  margin-left:8px;
  border-radius:999px;
  background:radial-gradient(circle, var(--ui-cyan), var(--ui-accent));
  box-shadow:0 0 18px rgba(0,212,255,.25);
}

.container-fluid.app-container{padding-left:18px;padding-right:18px}

.card{
  border-radius:var(--ui-radius-lg);
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid var(--ui-border);
  box-shadow:var(--ui-shadow);
  overflow:hidden;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .card{background:rgba(16,18,26,.94)}
}
.card-header{
  background:linear-gradient(90deg, rgba(226,26,34,.12), rgba(0,212,255,.08));
  border-bottom:1px solid rgba(255,255,255,.12);
  color:var(--ui-text);
  font-weight:700;
  padding:14px 16px;
}
.card-body{color:var(--ui-text)}

.row.g-3{--bs-gutter-x:18px;--bs-gutter-y:18px}

.text-muted,
.text-secondary{
  color:var(--ui-muted) !important;
}

#no-device-selected{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52vh;
  padding:18px;
}
#no-device-selected > *{
  max-width:560px;
  width:100%;
  padding:28px 22px;
  border-radius:var(--ui-radius-lg);
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow:var(--ui-shadow-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
#no-device-selected h4{
  margin:0 0 8px 0;
  color:rgba(248,249,250,.92);
  font-family:"Space Mono", monospace;
  font-weight:700;
}
#no-device-selected .small{
  color:rgba(248,249,250,.70) !important;
}

.btn{
  border-radius:999px !important;
  border-width:1px;
  padding:.55rem .95rem;
  font-weight:700;
  letter-spacing:.15px;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.btn:focus{box-shadow:0 0 0 .2rem rgba(0,212,255,.22) !important}

.btn-primary{
  background: var(--primary-light-color) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text-color-light) !important;
}
.btn-primary:hover{
  background: var(--primary-color) !important;
  filter:none !important;
}

.btn-success{
  background: var(--success-light-color) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text-color-light) !important;
}
.btn-success:hover{
  background: var(--success-color) !important;
}

.btn-danger{
  background: var(--error-color) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text-color-light) !important;
}
.btn-danger:hover{
  background: var(--primary-color) !important;
}

.btn-warning{
  background: var(--third-color) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text-color) !important;
}
.btn-warning:hover{
  background: var(--third-light-color) !important;
}
.btn-outline-secondary{
  color:rgba(248,249,250,.86) !important;
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.05);
}
.btn-outline-secondary:hover{background:rgba(255,255,255,.09)}
.btn-outline-danger{
  color:rgba(255,209,218,.95) !important;
  border-color:rgba(226,26,34,.55) !important;
  background:rgba(226,26,34,.12);
}

.badge{
  border-radius:999px;
  padding:.48em .72em;
  font-weight:800;
  letter-spacing:.15px;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.badge.bg-success{background:rgba(32,201,151,.18) !important;color:#c9ffe3}
.badge.bg-danger{background:rgba(226,26,34,.18) !important;color:#ffd1da}
.badge.bg-secondary{background:rgba(255,255,255,.10) !important;color:rgba(248,249,250,.72)}

.list-group{background:transparent}
.list-group-flush{border-radius:var(--ui-radius-lg)}
.list-group-item{
  background:transparent;
  color:rgba(248,249,250,.90);
  border-color:rgba(255,255,255,.10) !important;
}

.device-list-item{
  cursor:pointer;
  border-radius:18px !important;
  margin:6px 8px;
  border:1px solid transparent !important;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.device-list-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14) !important;
}
.device-list-item.active{
  background:rgba(226,26,34,.16) !important;
  border-color:rgba(226,26,34,.42) !important;
  box-shadow:0 0 0 1px rgba(0,212,255,.10) inset;
}

.form-control,.form-select{
  border-radius:16px !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:rgba(248,249,250,.92) !important;
}
.form-control::placeholder{color:rgba(248,249,250,.48)}
.form-control:focus,.form-select:focus{
  border-color:rgba(0,212,255,.55) !important;
  box-shadow:0 0 0 .2rem rgba(0,212,255,.18) !important;
}
.input-group > .btn{box-shadow:none}

.form-check-input{
  width:2.6em !important;
  height:1.35em !important;
  border-radius:999px !important;
  background-color:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
}
.form-check-input:checked{
  background-color:rgba(0,212,255,.80);
  border-color:rgba(0,212,255,.55);
  box-shadow:0 0 0 .2rem rgba(0,212,255,.16);
}

.led{
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-block;
  margin-bottom:6px;
  border:1px solid rgba(255,255,255,.22);
  position:relative;
  z-index:1;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  transition:transform .15s ease, filter .15s ease;
}
.led::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:inherit;
  filter:blur(12px);
  opacity:.55;
  z-index:-1;
}
.led:hover{transform:translateY(-1px)}

#logs-table{
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.90em;
}
.table{
  color:rgba(248,249,250,.88) !important;
  margin-bottom:0;
}
.table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:linear-gradient(90deg, rgba(226,26,34,.20), rgba(0,212,255,.10)) !important;
  color:rgba(248,249,250,.92) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.table td,.table th{
  border-color:rgba(255,255,255,.10) !important;
  vertical-align:middle;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background-color:rgba(255,255,255,.04) !important;
  color:rgba(248,249,250,.90) !important;
}
.table-hover>tbody>tr:hover>*{
  background-color:rgba(0,212,255,.08) !important;
}
.table td pre{
  margin:0;
  color:rgba(248,249,250,.88) !important;
  background:transparent !important;
  border:0 !important;
  white-space:pre-wrap;
  word-break:break-word;
}

.log-in{color:var(--ui-cyan);font-weight:800}
.log-out{color:rgba(255,179,0,.95);font-weight:800}
.log-internal{color:rgba(248,249,250,.55);font-style:italic}

hr{border-color:rgba(255,255,255,.12);opacity:1}

.modal-dialog{pointer-events:auto}
.modal-content{
  border-radius:var(--ui-radius-lg);
  background:linear-gradient(135deg, rgba(12,14,22,.86), rgba(12,14,22,.70));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--ui-shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:rgba(248,249,250,.92);
}
.modal-header,.modal-footer{border-color:rgba(255,255,255,.12) !important}
.modal .btn-close{
  filter:invert(1);
  opacity:.85;
}
.modal .btn-close:hover{opacity:1}

::selection{background:rgba(0,212,255,.25);color:rgba(248,249,250,.98)}

@media (max-width: 991.98px){
  .container-fluid.app-container{padding-left:12px;padding-right:12px}
  .card-header{padding:12px 14px}
  .device-list-item{margin:6px 6px}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* ───────────── Intro / Empty state (fix “two pills”) ───────────── */
#no-device-selected{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52vh;
  padding:18px;
}

#no-device-selected > *{
  /* cancel previous rule that styled every direct child as its own pill */
  max-width:unset;
  width:auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#no-device-selected .empty-state{
  width:min(560px, 100%);
  padding:26px 22px;
  border-radius:var(--ui-radius-lg);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:var(--ui-shadow-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  text-align:left;
}

#no-device-selected .empty-state-icon{
  width:46px;height:46px;
  border-radius:14px;
  display:grid;place-items:center;
  color:rgba(248,249,250,.88);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  margin-bottom:14px;
}

#no-device-selected .empty-state-title{
  margin:0 0 6px 0;
  color:rgba(248,249,250,.94);
  font-family:"Space Mono", monospace;
  font-weight:700;
  font-size:1.15rem;
}

#no-device-selected .empty-state-sub{
  color:rgba(248,249,250,.70) !important;
  margin-bottom:14px;
}

#no-device-selected .empty-state-actions{
  display:flex;
  gap:10px;
}

/* ───────────── Card headers: remove gradient ───────────── */
.card-header{
  background:rgba(255,255,255,.05) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}

/* (optional) table header: also remove gradient */
.table thead th{
  background:rgba(10,14,28,.72) !important;
}