@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sigmar&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* Default tokens (light) */
:root {
  color-scheme: light dark; /* lets form controls follow theme */
  --color-primary:#73879C;
  --color-primary-button:#1ABB9C;

  --color-secondary-button:#73879C5E;
  --color-secondary: #fd7e14;

  --color-bg-primary: #EDEDED;
  --color-bg-secondary: #fff;
  --color-bg-card: #fff;

  /* tipografie */
  --font-scale: 1;              /* 0.9 .. 1.3 */
  --line-height: 1.55;
  --letter-spacing: 0px;
  --content-width: 1100px;

  /* accent */
  --accent: #3b82f6;
}

/* Dark overrides */
:root[data-theme="dark"]{
  --color-bg-primary: #373737;
  --color-bg-secondary: #21202d;

  --color-primary-button:#1ABB9C;
  --color-secondary-button:#73879C5E;

  --color-primary: #e5e7eb;
  --color-bg-card: #000;
}

/* high contrast */
:root[data-contrast="high"]{
  --bg:#000;
  --fg:#fff;
  --card:#000;
  --border:#fff;
  --accent:#ffd000;
}

:root[data-theme="snow"] {
  /* Adapt these to your existing design system */
  --bg: #020617;
  --card: rgba(15, 23, 42, 0.96);
  --text: #f9fafb;
  --muted: rgba(148, 163, 184, 0.9);
}

/* Slightly different background when snow is active */
body.snow-mode {
  background-color: #000!important;
  background-image:
  radial-gradient(circle at 10% 20%, rgba(255,255,255,0.12) 0, transparent 55%),
  radial-gradient(circle at 90% 0%, rgba(255,255,255,0.08) 0, transparent 55%);
}

/* Snow container & flakes */
#snowLayer {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 9999; /* above content but below modals if you want */
}

#snowLayer .snowflake {
position: absolute;
top: -10vh;
color: #fff;
text-shadow: 0 0 4px rgba(255,255,255,0.7);
animation-name: snowfall;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
}

/* Draw the actual snowflake char */
#snowLayer .snowflake::before {
content: "❄";
}

/* Falling animation */
@keyframes snowfall {
  to {
    transform: translate3d(10vw, 110vh, 0);
  }
}











a{ color: var(--accent); }

/* focus vizibil */
:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

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





.sigmar-regular {
  font-family: "Sigmar", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
  "wdth" 100;
}
.roboto-thin {
  font-family: "Roboto", sans-serif;

}

body {
  /* set the image URL */
  /*background-image: url('https://static.vecteezy.com/system/resources/previews/027/850/814/large_2x/3d-illustration-of-abstract-technology-digital-background-big-data-visualization-abstract-digital-technology-wallpaper-with-flowing-binary-waves-and-data-points-ai-generated-free-photo.jpg');*/
  /* prevent tiling */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-color: var(--color-bg-primary) !important;
  font-family:sans-serif;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  font-family:Hkgrotesk,sans-serif;
  color:var(--color-primary)!important;
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  transition: background 500ms ease-in-out, color 200ms ease;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

html{ font-size: calc(16px * var(--font-scale)); }


a, .a {
  color: #939ba2;
  text-decoration:none;

}
.text-color {

 color: var(--color-primary) !important;
}

.container,.container-fluid{
  background-color: transparent!important;

}



.card {
  box-shadow: 0 0 .875rem 0 rgba(33,37,41,.05);
  border: thin solid #64635f;
   color: var(--color-primary) !important;
  padding-bottom: 0px;
  background-color: var(--color-bg-secondary) !important;
}



.card.bg-fundal {
 background-color: var(--color-bg-secondary) !important;
}



.card.card-on {
  box-shadow: 0 0 .875rem 0 rgba(33,37,41,.05);
  margin-bottom: 24px;
  border-left:10px solid --color-primary;
  border-right: thin solid --color-primary;
  border-top: thin solid --color-primary;
  border-bottom: thin solid --color-primary;
}


.card-off {
  box-shadow: 0 0 .875rem 0 rgba(33,37,41,.05);
  margin-bottom: 24px;
  /*    border-left:10px solid transparent;*/
}



.card-flash {

  border-left:10px solid transparent;
  border-right: thin solid transparent;
  border-top: thin solid transparent;
  border-bottom: thin solid  transparent;
  animation: blinker 1s step-start infinite;
}

.modal-title{

   color: var(--color-primary) !important;
}


.panel {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 17px;
  display: inline-block;
  background: #fff;
  border: 1px solid #E6E9ED;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  opacity: 1;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.panel_title {
  border-bottom: 2px solid #E6E9ED;
  padding: 1px 5px 6px;
  margin-bottom: 10px;
}






.panel_title h2 {
  margin: 5px 0 6px;
  float: left;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 400;
}








.strech-button {
 background-color: var(--color-bg-secondary) !important;
  border-radius: 0.5rem;
  padding: 3px;
  margin: 5px;
  text-align: left;
  width: 100%;
  min-height: 50px;
  /*  display: inline-block;*/
  box-shadow: 0 0 0.875rem 0 rgba(33,37,41,0.05);
  border: thin solid #000;
  color: #4e5460;
}

.strech-button i {
  font-size: 2.5rem;
}

.strech-button span {
/*  display: block;*/
  font-size: 1rem;
}

.strech-button {

  border-left: 10px solid var(--color-secondary-button);
  border-right: 1px solid var(--color-secondary-button);
  border-top: 1px solid var(--color-secondary-button);
  border-bottom: 1px solid var(--color-secondary-button);
  padding-left: 9px;
  cursor: pointer;
}

.strech-button.is-on {
  border-left: 10px solid var(--color-primary-button); /* Bootstrap success */
  border-right: 1px solid var(--color-secondary-button);
  border-top: 1px solid var(--color-secondary-button);
  border-bottom: 1px solid var(--color-secondary-button);
  color: var(--color-primary-button);
  cursor: pointer;
}

.strech-button.is-on .icon-status {
  filter: brightness(1.2);
}

.relay-label {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight:bold;
  color:var(--color-primary)!important;
}

.relay-status {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}



.modal-content {
  background-color: var(--color-bg-secondary)!important;

}


.list-inline{
margin-bottom: 0px!important;
}

.meniu-button {
  background-color: #192131;
  border-radius: 0.5rem;
  padding: 2px;
  margin: 5px;
  text-align: center;
  width: 120px;
  min-height: 120px;
  display: inline-block;
  box-shadow: 0 0 0.875rem 0 rgba(33,37,41,0.05);
  border: thin solid #4e5460;
  color: #fff;
}


.meniu-button i {
  font-size: 2.5rem;
}

.meniu-button span {
  display: block;
  font-size: 1rem;
}







.ambient-button {
  background-color: #192131;
  border-radius: 0.5rem;
  padding: 10px;
  margin: 5px;
  text-align: center;
  width: 100%;
  min-height: 30px;
  display: inline-block;
  box-shadow: 0 0 0.875rem 0 rgba(33,37,41,0.05);
  border: thin solid #000;
  color: #cdd4e3;
}


/* Class for active (ON) border state */
.active-border {
  border-right: 1px solid transparent;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 10px solid --color-primary;
}



.inactive-border {
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 10px solid #000;
}

.text-header {
  color: #4e5460 !important;
  height: 30px;
  margin-top: 0px!important;
}



.text-info {
  color: #4e5460!important;
}

.text-warning {
  color: --color-primary !important;


}

.text-green {
  color: #87e29b;
}

.text-yellow {
  color: #fdfb8c;
}

.text-blue {
  color: #b3fcfd;
}


.bg-fundal {
  --bs-bg-opacity: 1;
  background-color: var(--color-bg-secondary) !important;
}

fieldset {
  margin-bottom:10px;
  color: #4e5460 !important;
}


legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  font-size: 1rem !important;
  color: #fff !important;

}

.border {
  border: var(--bs-border-width) var(--bs-border-style) #4e5460 !important;
}


.offcanvas {

  color: #fff!important;
  background-color: #00000073 !important

}
.list-group {
  --bs-list-group-border-color: transparent!important;

}
.list-group-item{
  padding:20px;
  background-color: #220a0a00!important;
  color: #fff!important;
}

.modal-content {
  background-color: #192131;
  color: #fff;
}









.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .35rem;
  background-color: #22c55e;
}
.status-dot.offline {
  background-color: #900;
}


.image-area {
  position: relative;
  padding: 1rem;
  background-size: cover;
  background-position: center;
}





/* Base style for room tabs */
#roomsList .nav-link {
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
transition:
background-color 0.15s ease, color 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
color:var(--color-primary)!important;
}

/* Hover effect */
#roomsList .nav-link:hover {
background-color: rgba(255, 255, 255, 0.06); /* subtle highlight on dark UIs */
color:var(--color-primary)!important;
transform: translateX(2px);
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Active state (clicked/selected tab) */
#roomsList .nav-link.active,
#roomsList .nav-link.active-room {
background-color: var(--bs-primary);
color:var(--color-primary)!important;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
transform: translateX(0); /* keep active nicely aligned */
}

/* Optional: device count text a bit softer but visible on hover/active */
#roomsList .nav-link:hover .text-secondary,
#roomsList .nav-link.active .text-secondary,
#roomsList .nav-link.active-room .text-secondary {
color: rgba(255, 255, 255, 0.7) !important;
}