/*==============================================================================
//	Проект "Monitoring Home IoT"
// Home URL : https://mon.gate.r.bg/
// Created By : Gate.BG
// Contact Email : support@gate.bg
//==============================================================================
// Описание : Style CSS
// Последна промяна на файла на : 06.09.2026г. / 20:05ч.
// Последна промяна на файла от : Асен Сотиров
//============================================================================*/
/*--| root CSS |--------------------------------------------------------------*/
/*:root{ --def-color: #00AEEE; --color2: #fff;	--color3: #fff; --color4: #fff;}*/
/*--| CSS цветове |-----------------------------------------------------------*/
:root{
    --bg:            #0a121c;
    --bg-raise:      #101b28;
    --panel:         #12202f;
    --panel-border:  #233448;
    --text:          #e9eef4;
    --text-muted:    #90a3b8;
    --amber:         #f2a93b;
    --amber-dim:     #b9832f;
    --blue:          #4f8fe0;
    --teal:          #3fc1b0;
    --green:         #4ade80;
    --red:           #f2603b;
    --font-display:  'Space Grotesk', sans-serif;
    --font-mono:     'IBM Plex Mono', monospace;
    --font-body:     'Inter', sans-serif;
  }

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

  html,body{
    background-color:var(--bg) !important;
    color:var(--text);
    font-family:var(--font-body);
  }
  body{
    background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:26px 26px;
    min-height:100vh;
  }

  h1,h2,h3,h4,.brand{ font-family:var(--font-display); letter-spacing:-0.01em; }
  .mono{ font-family:var(--font-mono); }
  a{ color:var(--teal); }
  a:hover{ color:var(--amber); }
  ::selection{ background:var(--amber); color:#0a121c; }
  :focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

  /* ---------- Top bar ---------- */
  .mon-nav{
    background:rgba(10,18,28,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--panel-border);
    padding:.9rem 0;
    position:sticky; top:0; z-index:20;
  }
  .mon-nav .inner{
    max-width:1180px; margin:0 auto; padding:0 1.25rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  }
  .mon-brand{
    font-weight:600; font-size:1.02rem; color:var(--text);
    text-decoration:none; display:flex; align-items:center;
  }
  .mon-brand .dot{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--green); box-shadow:0 0 8px var(--green); margin-right:9px;
  }
  .mon-nav .clock{
    font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted);
  }
  .mon-nav .clock .cursor-blink{
    display:inline-block; width:6px; height:1em; background:var(--green);
    margin-left:3px; animation:blink 1.1s steps(1) infinite; vertical-align:middle;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  /* ---------- Page head ---------- */
  .mon-hero{
    max-width:1180px; margin:0 auto; padding:3rem 1.25rem 1.6rem;
  }
  .eyebrow{
    font-family:var(--font-mono); font-size:.78rem; color:var(--teal);
    letter-spacing:.06em; display:flex; align-items:center; gap:.6rem;
  }
  .eyebrow::before{ content:""; width:22px; height:1px; background:var(--teal); display:inline-block; }
  .mon-hero h1{
    font-size:clamp(1.7rem, 3.4vw, 2.3rem); font-weight:600; margin:.9rem 0 .5rem;
  }
  .mon-hero p{ color:var(--text-muted); max-width:38rem; line-height:1.65; margin-bottom:0; }

  .legend{
    display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.4rem;
    font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted);
  }
  .legend span{ display:inline-flex; align-items:center; gap:.5rem; }
  .legend i.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }

  /* ---------- Layout wrapper for device panels ---------- */
  .well.well-sm{
    max-width:1180px; margin:0 auto !important; padding:0 1.25rem 4rem !important;
    background:transparent !important; border:none !important; box-shadow:none !important;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:1.4rem;
  }
  .well.well-sm::after{ content:""; display:none; }

  /* ---------- Device / station cards (modern Bootstrap 5 .card + .list-group) ---------- */
  .device-card{
    background:linear-gradient(180deg, var(--bg-raise), #0c1622);
    border:1px solid var(--panel-border);
    border-radius:14px;
    box-shadow:0 20px 50px -24px rgba(0,0,0,0.6);
    transition:border-color .2s ease, transform .2s ease;
    overflow:hidden;
  }
  .device-card:hover{ border-color:var(--teal); transform:translateY(-2px); }

	.device-card i.status-ok{ color:var(--green); }
	.device-card i.status-warn{ color:var(--amber); }
	.device-card i.status-err{ color:var(--red); }

  .device-card .card-header{
    background:transparent; border-bottom:1px solid var(--panel-border);
    padding:.75rem 1.1rem;
  }
  .device-card .device-name{
    font-family:var(--font-mono); font-size:.78rem; font-weight:500;
    color:var(--text-muted); letter-spacing:.02em;
    display:flex; align-items:center; gap:.5rem; margin:0;
  }
  .device-card .device-name i.c-warning{ color:var(--amber); }
  .device-card .device-name i.c-danger{ color:var(--red); }
  .device-card .device-name i.c-success{ color:var(--green); }

  .device-card .list-group-item{
    background:transparent; border:none;
    border-bottom:1px solid var(--panel-border);
    border-radius:0 !important;
    padding:.75rem 1.1rem;
    display:flex; align-items:center; justify-content:space-between; gap:.8rem;
    font-size:.86rem; color:var(--text-muted);
    transition:background .15s ease;
  }
  .device-card .list-group-item:last-child{ border-bottom:none; }

  .device-card .list-group-item.meta-row{
    cursor:default;
    font-family:var(--font-mono); font-size:.72rem;
    color:var(--text-muted); letter-spacing:.02em;
    background:rgba(79,143,224,0.06);
    justify-content:flex-start; gap:.5rem;
  }
  .device-card .list-group-item.meta-row i{ color:var(--blue); width:14px; text-align:center; }

  .device-card .list-group-item.data-row{ cursor:pointer; }
  .device-card .list-group-item.data-row:hover{ background:rgba(63,193,176,0.06); }
  .device-card .list-group-item .val{
    font-family:var(--font-mono); font-weight:600; font-size:.92rem;
    color:var(--green); /* норма по подразбиране */
  }
  /* смяна на статус = смяна само на този клас на .data-row */
  .device-card .list-group-item.data-row.status-ok  .val{ color:var(--green); }
  .device-card .list-group-item.data-row.status-warn .val{ color:var(--amber); }
  .device-card .list-group-item.data-row.status-err  .val{ color:var(--red); }

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--panel-border);
    padding:1.6rem 1.25rem;
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:.78rem;
  }
  footer .footer-copyright{
    max-width:1180px; margin:0 auto;
  }
  footer a{ color:var(--text-muted); }
  footer a:hover{ color:var(--amber); }

  @media (max-width:576px){
    .mon-hero{ padding:2rem 1.1rem 1.2rem; }
    .well.well-sm{ padding:0 1.1rem 3rem !important; grid-template-columns:1fr; }
  }

  /* ---------- Lock screen ---------- */
  .lock-screen{
    position:fixed; inset:0; z-index:9999;
    background-color:var(--bg);
    background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:26px 26px;
    display:flex; align-items:center; justify-content:center;
    padding:1.5rem;
  }
  .lock-screen.hidden{ display:none; }
  .lock-card{
    width:100%; max-width:320px; text-align:center;
  }
  .lock-icon{
    width:52px; height:52px; margin:0 auto 1.2rem;
    border-radius:50%;
    background:rgba(63,193,176,0.10);
    color:var(--teal);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem;
  }
  .lock-title{
    font-family:var(--font-display); font-size:1.15rem; font-weight:600; margin-bottom:.3rem;
  }
  .lock-sub{
    font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); margin-bottom:1.6rem;
  }
  .lock-dots{
    display:flex; justify-content:center; gap:.6rem; margin-bottom:1.8rem;
  }
  .lock-dots .ld{
    width:13px; height:13px; border-radius:50%;
    border:1px solid var(--panel-border);
    background:transparent;
    transition:background .15s ease, border-color .15s ease;
  }
  .lock-dots .ld.filled{ background:var(--teal); border-color:var(--teal); }
  .lock-dots.err .ld{ border-color:var(--red) !important; }
  .lock-dots.err .ld.filled{ background:var(--red) !important; }
  .lock-keypad{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:.7rem;
  }
  .lock-key{
    font-family:var(--font-mono); font-size:1.15rem; font-weight:500;
    color:var(--text); background:var(--panel);
    border:1px solid var(--panel-border); border-radius:10px;
    padding:.85rem 0; cursor:pointer;
    transition:border-color .15s ease, background .15s ease, transform .1s ease;
    -webkit-tap-highlight-color:transparent; user-select:none;
  }
  .lock-key:hover{ border-color:var(--teal); }
  .lock-key:active{ transform:scale(.95); background:var(--bg-raise); }
  .lock-key.lock-key-ghost{ background:transparent; border:none; cursor:default; }
  .lock-key.lock-key-back{ color:var(--text-muted); font-size:1rem; }
  .lock-err-msg{
    font-family:var(--font-mono); font-size:.74rem; color:var(--red);
    margin-top:1.1rem; height:1em; opacity:0; transition:opacity .15s ease;
  }
  .lock-err-msg.show{ opacity:1; }
/*--| End of Style |----------------------------------------------------------*/