:root {
   --primary: #3498db;
   --dark: #2c3e50;
   --bg: #ffffff; 
}

/* Прилагаме го към абсолютно всичко */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;  padding: 0;
}
.clear  { clear:both; }

/* Синя тема */
[data-theme="blue"] {
  --dark: #1a252f;
  --dark-light: #2c3e50;
  --accent: #3498db;
  --text-gray: #bdc3c7;
    
  --login-border: #3498db;
  --login-footer: #2c3e50;
  --Left-Menu-Background: #1a252f;
  --button-color: #3498db;
  --edit-panel: #ddf0fd;
  --edit-panel-mid: #b3e1fe; /* Междинният цвят */
  --edit-panel-header: #71c6ff;
}

/* Зелена тема */
[data-theme="green"] {
  --dark: #162d21;
  --dark-light: #1f3d2e;
  --accent: #27ae60;
  --text-gray: #aab7ad;
  
  --login-border: #27ae60;
  --login-footer: #1f3d2e;
  --Left-Menu-Background: #162d21;
  --button-color: #2ecc71;
  --edit-panel: #e2fddd;
  --edit-panel-header: #82ff71;
}

/* Червена тема */
[data-theme="red"] {
  --dark: #2c1a1a;
  --dark-light: #3d2323;
  --accent: #e74c3c;
  --text-gray: #c7bcbc;
    
  --login-border: #e74c3c;
  --login-footer: #3d2323;
  --Left-Menu-Background: #2c1a1a;
  --button-color: #e74c3c;
  --edit-panel: #fddddd;
  --edit-panel-header: #ff7171;
}

/* Златна тема */
[data-theme="gold"] {
  --dark: #2d2616;
  --dark-light: #3d2323;
  --accent: #e7ab3c;
  --text-gray: #c7bcbc;
    
  --login-border: #e7ab3c;
  --login-footer: #3e3520;
  --Left-Menu-Background: #2c1a1a;
  --button-color: #f1c40f;
  --edit-panel: #fddddd;
  --edit-panel-header: #ffbd71;
}

body {
  &.login {
    --bg: #1a252f;
    justify-content: center;
    align-items: center; 
  }
 
  font-family: 'Segoe UI', sans-serif; 
  display: flex; 
  height: 100vh; 
  overflow: hidden; 
  background: var(--bg); 
}

main { 
  flex-grow: 1;
  display: flex;
  position: relative;
}

.btn_ok     { background-image: url("Images/dlg-but-ok.png"); }
.btn-save   { background-image: url("Images/dlg-but-ok.png"); }
.btn_add    { background-image: url("Images/dlg-but-add.png"); }
.btn_edit   { background-image: url("Images/dlg-but-edit.png"); }
.btn_undo   { background-image: url("Images/dlg-but-undo.png"); }
.btn_del    { background-image: url("Images/dlg-but-drop.png"); }
.btn_list   { background-image: url("Images/dlg-but-browse.png"); }
.btn_search { background-image: url("Images/dlg-but-search.png"); }
.btn_pass   { background-image: url("Images/dlg-but-pass.png"); }
.btn_close  { background-image: url("Images/dlg-but-close.png"); }
.btn_update { background-image: url("Images/dlg-but-reload.png"); }
.btn_print  { background-image: url("Images/dlg-but-print.png"); }
.btn_import { background-image: url("Images/dlg-but-import.png"); }
.btn_export { background-image: url("Images/dlg-but-export.png"); }

@keyframes pulse-icon {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.8; //color: #fff; 
        filter: brightness(1.5) saturate(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

button.img {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 40px;
  height: 40px;
  position:relative;
  align-items: stretch;

  &::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 1.1em;
    color: var(--btn-color);
    transition: transform 0.2s ease, color 0.3s ease;
    display: inline-flex;
    align-items:center;
    padding: 0 12px;
  }

  &:not(.text) {
    justify-content: center;  /* Центрираме хоризонтално */
    &::before { padding: 0; } /* Махаме всякакви леви/десни padding-и, за да е перфектен център! */
  }

  &.accent::before { animation: pulse-icon 1.5s infinite ease-in-out; }

  &>span {
    display: none;
    color: #000;
    font-weight: 500;
    white-space: nowrap;
    align-items: center;
    padding-right:12px;
  }

  & .arrow-zone {
    border-left: 1px solid #ccc;
    justify-content: center;
    padding: 0 8px;
  }

  &.text {
    width: auto;
    &>span { display:inline-flex;}
  }

  &:hover {
    background-color: var(--btn-color);
    border-color: var(--btn-color);
    &::before, & span { color: #fff; }
    &::before { transform: scale(1.15); }
    &>span { color: white; }
  }

  /* Дефиниране на цветове за различните видове */
  &.add    { --btn-color: #2980b9;  &::before { content: "\f067"; } }
  &.edit   { --btn-color: #f39c12;  &::before { content: "\f044"; } }
  &.del    { --btn-color: #c0392b;  &::before { content: "\f2ed"; } }
  &.save   { --btn-color: #27ae60;  &::before { content: "\f0c7"; } }
  &.cancel { --btn-color: #e74c3c;  &::before { content: "\f05e"; } }
  &.print  { --btn-color: #7f8c8d;  &::before { content: "\f02f"; } }
  &.update { --btn-color: #380c8a;  &::before { content: "\f021"; } }
  &.info   { --btn-color: #3498db;  &::before { content: "\f05a"; } } 
  &.search { --btn-color: #3498db;  &::before { content: "\f002"; } } 
  &.filter { --btn-color: #3498db;  &::before { content: "\f0b0"; } } 
  &.ok     { --btn-color: #2ecc71;  &::before { content: "\f00c"; } } 
  &.apply  { --btn-color: #2ecc71;  &::before { content: "\f00c"; } } 

  &:disabled {
    background-color: #f5f5f5; /* Слаб сив фон */
    color: #aaaaaa;            /* Сив текст */
    border-color: #dddddd;     /* По-светла рамка */
    cursor: not-allowed;       /* Курсор, показващ забрана */
    filter: grayscale(1);      /* Прави иконката сива, ако е цветна */
    opacity: 0.6;              /* Допълнително избледняване */
    pointer-events: none; /* Ако искаш да премахнеш hover ефектите, когато е неактивен */
  }

  & .button-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 100px;
    
    /* Стилизираме блоковите дивове като бутони */
    & .subitem {
/*      display: block; /* Вече си е блоков по природа, но се застраховаме */
      background: #ffffff;
      color: #333333 !important; /* Пресичаме инхеританса от ховъра на бащата */
      padding: 10px 12px;
      text-align: left;
      font-weight: normal;
      font-size: 13px;
      cursor: pointer;
      transition: background-color 0.15s;
      
      &:hover {
        background-color: #d8d8d8 !important;
        color: black !important;
      }
    }
    &.Hidden { display:none; }
  }
}


/** **************** стилове за полетата във формата *************** **/
.NumField, .Right{ text-align: right; }
.Text2Upper { text-transform: uppercase; }
/*
.DateField
{ background-image: url("Images/iconCalendar.gif");
  background-repeat: no-repeat;
  background-position: 99% 50%;
  width: 100px; 
  cursor:pointer;
}*/

:root {
    /* Цветова палитра - промени тук, за да се смени в цялата система */
    --field-border: #dcdfe6;
    --field-border-focus: #3498db;
    --field-bg: #ffffff;
    --field-label: #909399;
    --field-text: #2c3e50;
    --field-shadow-focus: rgba(52, 152, 219, 0.15);
    --field-radius: 6px;
    --text-muted: #7f8c8d;
}

/* Контейнер на целия грид */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px; /* Разстояние между кутийките */
    width: calc(100% - 10px);
    margin:5px;
}

/* Основната "кутийка" за всяко поле */
.field-box {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    padding: 3px 6px;
    background-color: var(--field-bg);
    transition: all 0.2s ease-in-out;
    min-height: 40px; /* Гарантира еднаква височина */
 
    &:focus-within { /* Ефект при фокус на което и да е поле вътре */
      border-color: var(--field-border-focus);
      box-shadow: 0 0 0 3px var(--field-shadow-focus);
    }

    & > .caption { /* Етикетът над полето */
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      font-weight: 700;
      color: var(--field-label);
      text-transform: uppercase;
      text-align:left;
      margin-bottom: 1px;
      letter-spacing: 0.5px;
      user-select: none;
    }

    & > input, /* Стилизиране на самите контроли */
    & > select, 
    & > textarea {
      grid-column: 1;
      border: none !important;
      outline: none !important;
      width: 100%;
      padding: 0 !important;
      margin: 0 !important;
      font-size: 14px;
      font-weight: 600;
      color: var(--field-text);
      background: transparent;
    }

    & > select { /* Специално за select, за да има все пак някакъв индикатор */
      cursor: pointer;
      &:focus { background-color: #f0f7ff; } /* Много лек син фон само за активния селект */
    }
    & > textarea { resize:none;  grid-column: 1 / -1; }

    &.no-label { min-height: 30px; }

    &.checkbox {
      & > .caption {
        grid-column: 1;
        font-size: 14px;
        font-weight: 600;
        text-transform: none;
        color: var(--field-text);
        margin-bottom: 0;
      }

      & > input { display:none; }
      & > .slider { 
        grid-column: 2;
        width: 36px;
        height: 18px;
        background-color: #ccc;
        border-radius: 10px;
        position: relative;
        transition: 0.3s;
            
        &::before {
          content: "";
          position: absolute;
          height: 12px;
          width: 12px;
          left: 3px;
          bottom: 3px;
          background-color: white;
          border-radius: 50%;
          transition: 0.3s;
        }
      }

      & input:checked + .slider {  /* Логика за задействане */
        background-color: var(--field-border-focus);
        &::before { transform: translateX(18px); }
      }
    }
}

.unit-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  & input {
    flex: 1; /* Инпутът заема цялото налично място */
    min-width: 0; /* Важно за flex контейнери */
  }
  & .label {
    font-size: 12px;
    font-weight: bold;
    color: var(--field-label); /* Използваме същия цвят като етикета */
    margin-left: 5px;
    padding-left: 5px;
    border-left: 1px solid #eee; /* Тънка разделителна линия */
    white-space: nowrap; /* Да не пренася единицата на нов ред */
  }
}

/* Помощни класове за ширината (Grid Spans) */
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.row-2  { grid-row: span 2; }
.row-3  { grid-row: span 3; }
.row-4  { grid-row: span 4; }
.row-5  { grid-row: span 5; }

/* Респонсивност - при тесен екран всичко става на 12 колони (цял ред) */
@media (max-width: 600px) {
  .grid-12 > div {
    grid-column: span 12 !important;
  }
}

/************************ ConfirmBox style ************************/
#ConfirmBox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  & .dialog {
    background: white; 
    padding: 20px 25px;
    border-radius: 10px; 
    max-width: 320px; 
    width: 90%;
    text-align: center;
    font-family: Arial; 
    font-size: 15px;
    & .text { margin-bottom: 20px; }
    & .actions { 
      display:flex; 
      gap:10px; 
      justify-content:center; 
      & button {
        padding: 8px 18px;
        border: none;
        border-radius: 6px;
        color:white;
        cursor:pointer;
        &.yes { background:#d9534f; }
        &.no  { background:#6c757d; }
      }
    }
  }
}

#ModalFormBox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  & .dialog {
    background: white; 
    padding: 10px;
    border-radius: 10px; 
    max-width: 320px; 
    width: 90%;
    font-family: Arial; 
    font-size: 15px;
    &.size-sm { max-width: 350px; }
    &.size-md { max-width: 550px; }
    &.size-lg { max-width: 800px; }
    &.size-xl { max-width: 1100px; }
/*
    & .dataHeader {
      grid-area: header; 
      background-color: var(--edit-panel-header);
      & .title { padding: 6px 10px; margin:0; font-weight: bold; font-size: 1em; text-align: left; }
      &.changed { background-image: linear-gradient(225deg, transparent 85%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 0, 0, 0.4) 100%); }
    } 
    
    & .dataBody {
      grid-area: body;
      overflow-y: auto;
      & h1 { font-size: 1.1em; border-bottom: 1px solid black; padding-left:10px; margin-top:20px; }
      & .Controls {
        padding:5px;
        display: flex;
        align-items: center;
        & .Title {
          padding: 5px;
          margin: 0;
          font-weight: bold;
          font-size: 1.2em;
          flex: 1;
        }
        & .Buttons {
          display: flex;
          gap: 8px;
        }
      }
    }
    
    & .dataFooter {
      grid-area: footer;
      padding: 5px;
      border-top: 1px solid #333;
      display: flex;
      justify-content: space-evenly;
    }*/
  }
}
/************************ Printer style ************************/
@media screen { #PrintPage { display: none; } }

@media print {
  html, body { 
    margin: 0 !important;
    padding: 0 !important;
    height: 100%; 
  }
  body > * { display: none !important; }

  @page { 
    size: A4 portrait;
    margin: 10mm 10mm 10mm 15mm;
  }

  body.duplex-print { page: duplex; }
  @page duplex:right { margin: 10mm 10mm 10mm 15mm; }
  @page duplex:left  { margin: 10mm 15mm 10mm 10mm; }

  #PrintPage {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  
    & h1 { font-size: 1.4em;  font-weight: bold;  text-align: center; }
    & h2 { font-size: 1.2em;  font-weight: bold;  text-align: center; }
    & h3 { font-size: 1em;    font-weight: bold;  text-align: center;  margin-top: 6mm; }

    & p.center  { text-align: center; }
    & p.justify { text-align: justify; }
    & p.justify-indent { text-align: justify; text-indent: 7mm; }

    & table.Print_Grid
    { border-collapse: collapse;
      border:2px solid black;
      & thead { border: 2px solid black; }
      & tbody { border: 1px solid black; }
      & tbody.footer { border: 2px solid black; }
      & td { border: 1px solid black; padding: 0.5mm 1mm; }
      & th { border: 1px solid black; padding: 0 1mm; }
    }
  }
}