html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}




/*#accordian*/

.device-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
    gap:15px;
    align-items:start;
}

.device-card{
    width:100%;
}


/* =========================
   ACCORDION CONTAINER
   ========================= */
.accordion {
    background-color: #121417;
    border-radius: 8px;
    overflow: hidden;
}


/* =========================
   ACCORDION CARD
   ========================= */
.accordion-item {
    background-color: #1a1d23;
    border: 1px solid rgba(0, 212, 255, 0.25);
    margin-bottom: 10px;
    border-radius: 8px;
    transition: all 0.25s ease;
}


    /* =========================
   HOVER / OPEN EFFECT
   ========================= */
    .accordion-item:hover,
    .accordion-item:has(.accordion-button:not(.collapsed)) {
        border-color: rgba(0, 212, 255, 0.5);
        box-shadow: 0 0 12px rgba(0, 212, 255, 0.12);
    }


/* =========================
   ACCORDION HEADER
   ========================= */
.accordion-button {
    background-color: #1a1d23 !important;
    color: #48CFCB !important;
    font-weight: 600;
    border: none;
    box-shadow: none !important;
}


    /* collapsed state */
    .accordion-button.collapsed {
        background-color: #1a1d23 !important;
        color: #48CFCB !important;
    }


    /* expanded state */
    .accordion-button:not(.collapsed) {
        background-color: #1a1d23 !important;
        color: #48CFCB !important;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
    }


    /* =========================
   REMOVE BOOTSTRAP FOCUS
   ========================= */
    .accordion-button:focus {
        box-shadow: none;
    }


/* =========================
   ACCORDION BODY
   ========================= */
.accordion-body {
    background-color: #15181c;
    color: #b0b8c1;
    font-size: 0.9rem;
    line-height: 1.5;
}


/* =========================
   STATUS COLORS
   ========================= */
.status-online {
    color: #00ffaa;
    font-weight: 600;
}

.status-offline {
    color: #ff7b7b;
}

.status-error {
    color: #ff4c4c;
}


/* =========================
   ARROW ICON COLOR
   ========================= */
.accordion-button::after {
    filter: brightness(0) invert(1);
}