*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body{
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(104deg, #204B66, #00324a);
      background-size: cover;
      margin: 0;
    }

/* TOP MENU BAR*/
.navbar {
  /* Not "hidden" — this is a flex container, so it was never doing real
     clearfix work (float/clear don't apply to flex items) and the language
     dropdown needs to render below the bar, not get clipped to its own
     height. */
  overflow: visible;
  background-color: #333;
  display: flex;
  align-items: stretch;
  /* Stays visible on scroll instead of scrolling away — sticky (not fixed)
     so it keeps its normal space in the flow and never overlaps the page
     title/content that follows it; no compensating top-padding needed
     anywhere. z-index keeps it (and its dropdowns) above scrolled-under
     page content. */
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar a {
  float: left;
  font-size: 13px;
  color: white;
  text-align: center;
  padding: 14px 11px;
  text-decoration: none;
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {
  font-size: 13px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 11px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .subnavbtn:hover, .subnav.open .subnavbtn {
  background-color: red;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: red;
  width: 100%;
  z-index: 500;
}

.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

.subnav-content.open {
  display: block;
}

.subnav-label {
  display: block;
  clear: both;
  padding: 6px 11px 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #ffdada;
  opacity: 0.85;
}
.subnav-label:first-child {
  padding-top: 4px;
}

/* Language switcher dropdown — reuses .subnav's click-toggle mechanism (same
   JS in nav.js's _attachNavEvents()) but needs its own compact, right-aligned
   look instead of .subnav-content's default full-viewport-width red mega-menu
   (fine for a multi-column nav section, wrong for a 2-4-item language list). */
#lang-menu {
  /* .subnav's own overflow:hidden (fine for the other menus — their
     .subnav-content isn't positioned relative to .subnav, so it never
     becomes part of .subnav's own clipped box) would otherwise clip this
     dropdown down to nothing the moment position:relative below makes
     #lang-menu the containing block for it. */
  position: relative;
  overflow: visible;
}
#lang-menu .subnav-content {
  left: auto;
  right: 0;
  top: 100%;
  width: auto;
  min-width: 130px;
  background-color: #163648;
  border-radius: 0 0 4px 4px;
}
#lang-menu .subnav-content .lang-btn {
  display: block;
  float: none;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  padding: 8px 14px;
  font-size: 0.85em;
  font-family: inherit;
  cursor: pointer;
}
#lang-menu .subnav-content .lang-btn:hover {
  background-color: #2d6186;
}
/* TOP MENU BAR*/

/* IDENTITY BAR */
#identity-bar {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
  white-space: nowrap;
  color: white;
}

.identity-chip {
  color: white;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background 0.15s;
}

.identity-chip:hover {
  background: rgba(255,255,255,0.15);
}

.identity-unset {
  color: #ffcc00;
}

.identity-loc {
  color: #aaa;
  font-size: 0.85em;
}

/* IMPERSONATION BANNER — platform admin viewing another company's account */
#impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  background: #c0392b;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 14px;
  z-index: 20000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
#impersonation-banner button {
  background: white;
  color: #c0392b;
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-weight: 700;
  cursor: pointer;
}
#impersonation-banner button:hover {
  background: #f4f4f4;
}

.identity-modal-overlay {
  position: fixed;
  top: 46px; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.identity-modal-box {
  background: #fff;
  border-radius: 0 0 10px 10px;
  padding: 24px 32px;
  min-width: 320px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

.identity-modal-box h3 {
  color: #204B66;
  margin-bottom: 16px;
}

.identity-user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  max-height: 280px;
  overflow-y: auto;
}

.identity-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: #f9f9f9;
  cursor: pointer;
  font-size: 15px;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.identity-user-btn small {
  color: #888;
  font-size: 0.8em;
  margin-left: 4px;
}

.identity-user-btn:hover {
  border-color: #204B66;
  background: #e8f4fb;
}

.identity-user-btn.selected {
  border-color: #Dc005A;
  background: #fff0f5;
  font-weight: 700;
}

.identity-loc-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.identity-loc-row select {
  flex: 1;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.identity-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* IDENTITY BAR */

/*
.topnav {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0px;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
*/

    .table-container{
      display: flex;
      justify-content: center;
      margin:5vh auto;
      width: 95%;
      background-color: #fff;
      border-radius: 10px;
      padding: 5px;
    }

    table{
      width: 100%;
      box-shadow: 15px 15px #0000000d;
      border-collapse: collapse;
    }

    tr:nth-of-type(odd){
      background-color: #e6f4ff;
      color: #333;
    }
    tr:nth-of-type(even){
      background-color: #fff;
      color: #333;
    }
    tr.row-to-toggle {
      display: none;
    }

    th{
      background-color: #Dc005A;
      color: #fff;
      font-weight: 800;
      font-size: 13px;
      position: -webkit-sticky;
      position: sticky;
      /* Sticks just below the sticky navbar, not at the literal viewport
         top — see nav.js's _syncNavbarHeightVar() for why this can't be a
         hardcoded guess. 45px fallback covers the pre-JS/no-JS instant. */
      top: var(--navbar-h, 45px);
      z-index: 1;
      padding: 10px 7px;
      border: 1px solid #c0004e;
    }

    td{
      padding: 7px 8px;
      border: 1px solid #ddd;
      text-align: center;
      font-size: 0.87em;
      vertical-align: middle;
    }

    .label{
      display: inline;
      padding: 0.2em 0.6em 0.3em;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: 0.25em;
    }
    .label-success{
      background-color: #5cb85c;
    }

    .label-warning{
      background-color: #f0ad4e;
    }

    .label-danger{
      background-color: #d9534f;
    }

    .label-secondary{
      background-color: #aaa;
    }

    .label-grey{
      background-color: #e0e0e0;
      color: #333;
    }

    .qty-btn {
      width: 22px;
      height: 22px;
      border: 1px solid #bbb;
      border-radius: 3px;
      background: #f0f0f0;
      cursor: pointer;
      padding: 0;
      font-size: 1em;
      line-height: 1;
      flex-shrink: 0;
    }
    .qty-btn:hover { background: #ddd; }

    .btn{
      color: #fff;
      background-color: #37BC9B;
      font-size: 13px;
      padding: 5px 8px;
      border: none;
      border-radius: 2px;
      transition: all 0.3s ease;
      text-decoration: none;
    }
    .btn:hover{
      background-color: #2e9c81;
    }


    @media only screen and (max-width:768px),
    (min-device-width:768px) and (max-device-width:992px){
      .table-container{
        width:95%;
        background: transparent;
      }

      table,
      thead,
      tbody,
      th,
      td,
      tr{
        display: block;
      }

      thead tr{
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      tr{
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }

      td{
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: right;
      }

      td::before{
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
      }

      td:nth-of-type(1)::before{
        content: "#";
      }

      td:nth-of-type(2)::before{
        content: "Снимка";
      }

      td:nth-of-type(3)::before{
        content: "Консуматив";
      }

      td:nth-of-type(4)::before{
        content: "Вид";
      }

      td:nth-of-type(5)::before{
        content: "Съдържание";
      }

      td:nth-of-type(6)::before{
        content: "К-во";
      }
      td:nth-of-type(7)::before{
        content: "Текущо к-во";
      }

      

    }

.icon_50_50 img {
   width: 10vh;
   height: 10vh;
   object-fit: contain;
}

.truncate {
  /*display: inline-block;*/
  /*max-width: 20ch;*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  outline: none;
  /*overflow-wrap: normal;*/ /* Prevent breaking words */
  -webkit-line-break: none; /* Disable line breaking */
  line-break: none; /* Disable line breaking for compatibility */

  display: block; /* Ensure block-level behavior */
  /*max-width: 200px;*/ /* Set a maximum width for the div */
  max-width: 20ch;
  overflow-wrap: break-word; /* Break long words (like URLs) */
  word-break: break-word; /* Ensure compatibility */
  white-space: normal; /* Allow wrapping */
  overflow: hidden; /* Prevent overflow */
  text-overflow: ellipsis; /* Optional: Add ellipsis for overflow */
}

.truncate:focus {
  max-width: none; /* Remove width restriction when editing */
  overflow: visible; /* Allow full text to be visible */
  white-space: normal; /* Allow text to wrap */
  text-overflow: clip; /* Remove ellipsis when editing */
}

/* ── Extra labels ── */
.label-info { background-color: #5bc0de; }

/* ── Button variants ── */
.btn-danger { background-color: #d9534f; }
.btn-danger:hover { background-color: #c0392b; }
.btn-sm { padding: 3px 6px; font-size: 11px; }
.btn-cancel { background: #fff; color: #888; border: 1px solid #ccc; }
.btn-cancel:hover { background: #f5f5f5; color: #555; border-color: #aaa; }
.btn-print { background: #555; }
.btn-print:hover { background: #333; }
.btn-hide { background: #e67e22; }
.btn-hide:hover { background: #ca6f1e; }
.btn-order { background: #8e44ad; }
.btn-order:hover { background: #7d3c98; }
.btn-reinv {
  width: 20px; height: 20px;
  background: #204B66;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}
.btn-reinv:hover { background: #163850; }

/* ── Room badges ── */
.room-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.72em;
  font-weight: 600;
  color: #fff;
  margin-left: 4px;
  vertical-align: middle;
}
.room-warehouse { background: #37BC9B; }
.room-cabinet   { background: #aaa; }

/* ── TUZ (Time Until Zero) ── */
.tuz { font-size: 0.76em; color: #555; margin-top: 3px; border-top: 1px dashed #ccc; padding-top: 2px; }
.tuz-warn  { color: #e67e22; font-weight: 600; }
.tuz-ok    { color: #5cb85c; }
.tuz-empty { color: #bbb; font-style: italic; }

/* ── Reinventory status ── */
.reinv-ok   { color: #5cb85c; font-weight: 600; font-size: 0.85em; white-space: nowrap; }
.reinv-soon { color: #e67e22; font-weight: 600; font-size: 0.85em; white-space: nowrap; }
.reinv-due  { color: #d9534f; font-weight: 700; font-size: 0.85em; white-space: nowrap; }

/* ── Sub text ── */
.sub { font-size: 0.72em; color: #888; margin-top: 2px; }
.sub-danger { color: #d9534f; }
.sub-warn   { color: #e67e22; }

/* ── Order link ── */
.order-link { color: #8e44ad; text-decoration: none; font-size: 0.82em; }
.order-link:hover { text-decoration: underline; }

/* ── Filter bar ── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #f5f8fb;
  border-radius: 6px;
  border: 1px solid #e0e8f0;
}
.filter-bar label {
  font-size: 0.78em;
  color: #888;
  white-space: nowrap;
}
.filter-input {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.88em;
  background: #fff;
  outline: none;
}
.filter-input:focus { border-color: #204B66; }
.filter-input::placeholder { color: #bbb; }
.filter-select {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.88em;
  background: #fff;
  cursor: pointer;
  outline: none;
  color: #444;
}
.filter-select:focus { border-color: #204B66; }
.filter-divider {
  width: 1px;
  height: 22px;
  background: #ddd;
  flex-shrink: 0;
}
.filter-count {
  font-size: 0.8em;
  color: #888;
  margin-left: auto;
  white-space: nowrap;
}
.btn-clear {
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 0.82em;
  color: #888;
  cursor: pointer;
}
.btn-clear:hover { border-color: #d9534f; color: #d9534f; }

/* ── Quick-filter chips ── */
.chip {
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.78em;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  background: #eee;
  color: #555;
  transition: all 0.15s;
}
.chip:hover { opacity: 0.85; }
.chip.active { color: #fff; }
.chip-danger  { border-color: #d9534f; }
.chip-danger.active  { background: #d9534f; }
.chip-warning { border-color: #f0ad4e; }
.chip-warning.active { background: #f0ad4e; }
.chip-exp-soon      { border-color: #e67e22; }
.chip-exp-soon.active { background: #e67e22; }
.chip-reinv      { border-color: #204B66; }
.chip-reinv.active      { background: #204B66; }
.chip-reinv-soon { border-color: #e67e22; }
.chip-reinv-soon.active { background: #e67e22; }
.chip-order      { border-color: #3498db; }
.chip-order.active      { background: #3498db; }