/* ============================== */
/* ====                       === */
/* ==== Базові блоки/анімації === */
/* ====                       === */
/* ============================== */


/* ===== Level 1 ================ */
/* === Контейнер Підсумки ======= */
/* ============================== */
.totalsum {
 display: flex;                 /* flex-контейнер */
 flex-direction: column;        /* елементи вертикально */
 width: 100%;
 max-width: 100%;
 align-items: stretch;          /* всі кнопки однакової висоти */
 margin: 8px auto;
 padding: 6px 10px;
 background: #f0f8ff;           /* світло-блакитний фон */
 border: 1px solid #0078d7;     /* синя рамка */
 border-radius: 6px;
 box-sizing: border-box;
 font-family: "Segoe UI", Arial, sans-serif;
 text-align: center;            /* центрує кнопки всередині */
}


/* ===== Level 1/2 ============== */
/* === Лоадер Підсумків ========= */
/* ============================== */
.percent-container {
 width: 100%;                   /* завжди на всю ширину */
 text-align: center;
 align-items: center;            /* вертикальне вирівнювання */
 background: #f9fbff;
 border: 1px solid #0078d7;
 border-radius: 6px;
 padding: 6px;
 box-sizing: border-box;
 font-size: 14px;
}
.loader-bar {
 width: 100%;                   /* полоса на всю ширину */
 height: 24px;
 overflow: hidden;
 align-items: center;
 background: #f9fbff;
 border: 1px solid #0078d7;
 border-radius: 6px;
 padding: 6px;
 box-sizing: border-box;
 font-size: 14px;
}
.loader-progress {
 height: 100%;
 width: 0%;                     /* динамічно змінюється через JS */
 font-size: 18px;
 background: linear-gradient(90deg, #2a7a2a, #4CAF50);
 transition: width 0.4s ease;
}
.loader-text {
 font-size: 16px;
 font-weight: 600;
 color: #2a7a2a;
}
.content-ready {
 font-size: 16px;
 font-weight: bold;
 color: #1f6d1f;
}


/* ===== Level 2/1 ============== */
/* === Таблиця Підсумки ========= */
/* ============================== */
.table-total {
 display: flex;
 flex-direction: column;
 width: 100%;
 max-width: 100%;
 padding: 6px 10px;
 font-size: 14px;
 border: 1px solid #0078d7;
 border-radius: 6px;
 background: #f9fbff;
 box-sizing: border-box;
 transition: border-color 0.3s ease, box-shadow 0.3s ease;
 font-family: "Segoe UI", Arial, sans-serif;
}
.table-total-row {
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
 align-items: center;
 background: #f9fbff;
 border: 1px solid #0078d7;
 border-radius: 6px;
 padding: 6px;
 box-sizing: border-box;
 font-size: 14px;
}
.table-total-row .cell {
 flex: 1 1 auto;
 padding: 2px 4px;
 box-sizing: border-box;
}
.table-total-row .cell:last-child {
 text-align: right;
 font-weight: 800;
}
.table-total-row .cell.balance {
 min-width: 100px;
 text-align: right;
 font-weight: 700;
 color: #101484;     /* сума загальна по підрозділах */
}

/* ===== Внутрішня таблиця ====== */
.inner-table {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-top: 6px;
 width: 100%;
 box-sizing: border-box;
}
.inner-row {
 display: flex;
 justify-content: space-between;
 padding: 4px 6px;
 border: 1px solid #eee;
 border-radius: 6px;
 background: #fafafa;
 box-sizing: border-box;
}
.inner-cell {
 flex: 1 1 0;
 padding: 2px 4px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.inner-sum {
 text-align: right;
 font-weight: 700;
 color: #10651a;     /* сума залишку по фірмі */
}

/* ===== Details / Summary ====== */
.details {
 width: 100%;
 padding: 2px 6px;
 text-align: left;
 color: #8d8f96;     /* назва фірми */
 transition: color 0.3s ease; /* плавна зміна кольору */
}
.details summary:hover {
 color: #734e5d;     /* інший відтінок при наведенні */
 font-weight: 700;
}
.details summary {
 cursor: pointer;
 font-weight: 600;
 color: #3d2931;     /* Напис Доступний залишок: */
}
.details summary::-webkit-details-marker {
 display: none;      /* прибирає маркер у Chrome/Safari */
}


/* ===== Level 1/2 ============== */
/* === Контейнер фірми/рахунки == */
/* ============================== */
.firm-block {
 display: flex;
 flex-direction: column;
 width: 100%;
 max-width: 100%;
 align-items: stretch;
 margin: 8px auto;
 padding: 6px 10px;
 background: #f0f8ff;
 border: 1px solid #0078d7;
 border-radius: 6px;
 box-sizing: border-box;
 font-family: "Segoe UI", Arial, sans-serif;
 text-align: center;
}


/* ===== Level 1/2/1 ============ */
/* === Шапка фірми (id/Назва) === */
/* ============================== */

.table-firm-row {
  display: flex;
  justify-content: center;   /* центрує всю групу */
#  justify-content: flex-start; /* тепер контент прилипає до лівого краю */
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  box-sizing: border-box;
  transition: background 0.2s ease;
  text-decoration: none;
  color: inherit;
  margin-bottom: 10px;       /* відступ між рядками */
}
.table-firm-row:hover {
  background: #f0f6ff;
}

/* внутрішній контейнер */
.firm-content {
  display: flex;
  justify-content: space-between; /* ліва частина зліва, права справа */
  align-items: center;
  gap: 20px;                      /* рівний відступ між колонками */
  width: 100%;                    /* займає всю ширину */
  max-width: 960px;               /* обмеження ширини */
}

.firm-link {
  display: flex;
  justify-content: flex-start; /* прилипає до лівого краю */
  align-items: center;         /* вирівнює по вертикалі */
  width: 100%;                 /* статична ширина */
  height: 100%;                /* статична висота */
  min-width: 600px;            /* не менше ніж 560px */
  gap: 10px;                   /* відступи між елементами */
  padding: 10 20px; /* відступи зліва і справа */
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  box-sizing: border-box;
  transition: background 0.2s ease;
  text-decoration: none;
  color: inherit;
  margin: 0 20px;
}

.firm-link:hover {
  background: #f0f6ff;
  text-decoration: none;
}

/* ліва колонка */
.firm-left {
  display: flex;
  flex: 1;
  flex-direction: row;   /* елементи в один ряд */
  gap: 10px;             /* відступи між елементами */
  justify-content: start;
  text-align: left;
}
.firm-left .firm-id {
  margin-left: 10px; /* однаковий відступ від лівого краю */
  font-size: 12px;
  color: #555;
}
.firm-left .firm-name {
  margin-left: 30px; /* однаковий відступ від лівого краю */
  font-weight: 700;
  font-size: 16px;
  color: #222;
}
.firm-left .firm-edrpou {
  margin-left: 40px; /* однаковий відступ від лівого краю */
  font-size: 14px;
  color: #333;
}
.firm-left .firm-iban {
  margin-left: 30px; /* однаковий відступ від лівого краю */
  font-size: 14px;
  color: #333;
}


/* права колонка */
.firm-right {
  display: flex;             /* робимо контейнером */
  flex: 0 0 360px;           /* ширина колонки */
  justify-content: flex-end; /* вирівнювання вправо */
  align-items: center;       /* вирівнює по вертикалі */
  gap: 10px;                 /* відстань між кнопкою і текстом */
}

.firm-right .pidr-name {
 margin-right: 10;
 font-weight: 600;
 font-size: 16px;
 color: #222;
}

.balances-row {
  display: flex;
  justify-content: space-between; /* баланси зліва, кнопка справа */
  align-items: stretch;           /* вирівнює елементи по висоті */
  gap: 10px;
}

.balances {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 2 1 0; /* росте вдвічі швидше ніж інші */
#  flex-shrink: 1;
#  flex-basis: 0;
  min-width: 350px; /* гарантує ширину */
}

.balance-actions {
  display: flex;
  justify-content: flex-end; /* кнопка справа */
  flex: 0 0 auto;            /* фіксована ширина */
  flex: 1 1 0; /* росте вдвічі менше */
  width: 100px; /* задає конкретну ширину */
  max-width: 160px; /* обмеження ширини кнопки */
}

.copy-btn {
  flex: 1;
  display: flex;
  flex-direction: row;        /* іконка зліва, текст справа */
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 13px;
  height: 100%;
  border-radius: 6px;         /* округлені кути */
  background-color: #0078d7;  /* синій фон */
  color: #fff;                /* білий текст */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.copy-btn:hover {
  background-color: #005a9e;  /* темніший при наведенні */
}

.copy-btn .btn-text {
  margin-left: 6px;
}



/* ===== Level 1/2/2 ============ */
/* === Блок фірми з рахунками === */
/* ============================== */
.firm-dynamic {
 width: 100%;
 max-width: 100%;
 padding: 0;
 background: #fafafa;
 border-radius: 8px;
 box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
 font-size: 16px;
 line-height: 1.5;
 color: #333;
 box-sizing: border-box;
}


/* ===== Level 1/2/3 ============ */
/* === Лоадер рахунків ========== */
/* ============================== */
.firm-loader {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 32px;
 padding: 3px 6px;
 color: #555;
 font-size: 14px;
 box-sizing: border-box;
}
.firm-loader i {
 margin-right: 8px;
 color: #006699;
}


/* ===== Level 2/1 ============== */
/* === Таблиця з рахунками ====== */
/* ============================== */
.table-acc {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 6px 10px;
  background: #f0f8ff;
  border: 1px solid #0078d7;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}

/* робимо сам <a> контейнером рядка */
.table-acc-row-link {
  text-decoration: none;   /* прибирає підкреслення */
  color: inherit;          /* успадковує колір тексту */
  display: flex;           /* поводиться як .table-acc-row */
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  box-sizing: border-box;
  animation: fadeInUp 0.3s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.table-acc-row-link:hover {
  text-decoration: none; /* прибирає підкреслення і при наведенні */
  transform: translateY(-2px) scale(1.01);   /* легкий підйом і масштаб */
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);   /* тінь при наведенні */
  background: #f0f8ff;                       /* легкий фон при наведенні */
}

/* Ліва частина */
.acc-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-start;               /* вирівнювання по лівому краю */
}
.acc-row .acc {
 flex: 2 1 40%;
 min-width: 160px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 margin-right: 10;
 font-weight: 700;
 font-size: 14px;
 color: #2c3e50;
}
.acc-row .currency {
 flex: 0 0 80px;
 text-align: center;
 font-weight: 600;
 font-size: 12px;
 color: #006699;
}

/* Права частина */
.balance-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;                 /* вирівнювання по правому краю */
}
.balance-row .balanceIn,
.balance-row .turnoverDebt,
.balance-row .turnoverCred,
.balance-row .balanceOut {
  flex: 1 1 0;
  text-align: right;
  box-sizing: border-box;
}
.balance-row .balanceIn,
.balance-row .balanceOut {
  flex: 0 0 110px;
#  min-width: 110px;
}
.balance-row .balanceIn {
  font-weight: 700;
  font-size: 14px;
  color: #636965;
}
.balance-row .balanceOut {
  font-weight: 700;
  font-size: 16px;
  color: #233c1a;
}
.balance-row .turnoverDebt,
.balance-row .turnoverCred {
  flex: 0 0 90px;
#  min-width: 90px;
  font-weight: 500;
  font-size: 12px;
  color: #c8ccd0;
}
.balance-row .turnoverDebt i { color: #fb7474; }  /* червоний акцент */
.balance-row .turnoverCred i { color: #82d080; }  /* зелений акцент */
.balance-row .woid {
  flex: 0 0 30px;
#  min-width: 30px;
  font-weight: 500;
  font-size: 10px;
  color: #5f6486;
}

/* Анімація fadeInUp */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===== Level 2/2 ============== */
/* === Час оновлення ============ */
/* ============================== */
.update-time {
 margin-top: 3px;
 font-size: 14px;
 font-style: italic;
 text-align: right;
 color: #666;              /* середньо-сірий текст */
 background: #f2f2f2;      /* світло-сірий фон */
 border: 1px solid #ccc;   /* нейтральна сіра рамка */
 border-radius: 6px;
 padding: 4px 6px;
 box-sizing: border-box;
}
.update-time::before {
 content: "⏱ ";
 color: #888;              /* трохи темніший сірий для іконки */
 font-weight: bold;
}



/* ============================== */
/* ===== Адаптивність ============ */
/* ============================== */

/* ≤1024px: компактніше, але структура та сама */
@media (max-width: 1024px) {

.firm-left .firm-id {
 font-weight: 500;
 font-size: 20px;
 color: #222;
}
.firm-left .firm-name {
 margin-left: 10;
 font-weight: 800;
 font-size: 32px;
 color: #222;
}
.firm-left .firm-edrpou {
 margin-right: 12;
 font-weight: 600;
 font-size: 20px;
 color: #222;
# display: none;
}
.firm-right {
 flex: 0 0 auto;
 text-align: right;
}
.firm-right .pidr-name {
 margin-right: 10;
 font-weight: 600;
 font-size: 18px;
 color: #222;
}

.table-acc-row {
 display: grid;
 grid-template-columns: 1fr;
 row-gap: 6px;
 padding: 3px 4px;
 max-width: 100%;
 box-sizing: border-box;
}
.acc-row,
.balance-row {
 display: flex;          /* flex замість inline-flex */
 flex-wrap: wrap;        /* дозволяє переносити елементи */
 gap: 6px;
 max-width: 100%;
 margin: 0 6px;          /* симетричні відступи */
}
.acc-row .acc {
 font-size: 20px;
 flex: 1 1 auto;      /* адаптивна ширина */
 min-width: 200px;
 text-align: left;    /* вирівнювання по лівому */
}
.acc-row .currency {
 font-size: 16px;
 flex: 0 0 70px;      /* фіксована ширина */
 min-width: 50px;
 text-align: right;   /* вирівнювання по правому */
}
.balance-row .balanceIn {
 font-size: 18px;
 flex: 1 1 90px;         /* базова ширина 40px, але може стискатись */
 margin-right: 5px 0;
 display: none;
}
.balance-row .balanceOut {
 font-size: 22px;
 flex: 1 1 100px;
}
.balance-row .turnoverDebt,
.balance-row .turnoverCred {
 font-size: 16px;
 flex: 1 1 80px;
 white-space: nowrap;
 margin: 5px 0;
}
.balance-row .woid {
 font-size: 16px;
 flex: 1 1 40px;
 white-space: nowrap;
 margin: 5px 0;
}

}

/* ≤768px: планшет — два рядки для рахунку */
@media (max-width: 768px) {

 .firm-left .firm-id {
  font-weight: 500;
  font-size: 18px;
  color: #222;
 }
.firm-left .firm-name {
 margin-left: 10;
 font-weight: 800;
 font-size: 24px;
 color: #222;
}
.firm-left .firm-edrpou {
 display: none;
}
.firm-right {
 flex: 0 0 auto;
 text-align: right;
}
.firm-right .pidr-name {
 margin-right: 10;
 font-weight: 600;
 font-size: 16px;
 color: #222;
}

 .table-acc-row {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;
  padding: 3px 4px;
  max-width: 100%;
  box-sizing: border-box;
 }
 .acc-row,
 .balance-row {
  display: flex;          /* flex замість inline-flex */
  flex-wrap: wrap;        /* дозволяє переносити елементи */
  gap: 6px;
  max-width: 100%;
  margin: 0 6px;          /* симетричні відступи */
 }
 .acc-row .acc {
  font-size: 20px;
  flex: 1 1 auto;      /* адаптивна ширина */
  min-width: 160px;
  text-align: left;    /* вирівнювання по лівому */
 }
 .acc-row .currency {
  font-size: 16px;
  flex: 0 0 60px;      /* фіксована ширина */
  min-width: 60px;
  text-align: right;   /* вирівнювання по правому */
 }
 .balance-row .balanceIn {
  font-size: 12px;
  flex: 1 1 50px;         /* базова ширина 40px, але може стискатись */
  margin-right: 5px 0;
  display: none;
 }
 .balance-row .balanceOut {
  font-size: 18px;
  flex: 1 1 60px;
 }
 .balance-row .turnoverDebt,
 .balance-row .turnoverCred {
  font-size: 16px;
  flex: 1 1 60px;
  white-space: nowrap;
  margin: 5px 0;
 }
 .balance-row .woid {
  font-size: 14px;
  font-size: 20px;
  flex: 1 1 20px;
  white-space: nowrap;
  margin: 5px 0;
 }

}

/* ≤480px: телефон — кожне значення з нового рядка */
@media (max-width: 480px) {
 .table-acc-row {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;
  padding: 2px;
 }

 .acc-row { justify-self: start; display: block; }
 .balance-row { justify-self: end; display: block; }

 /* ліва частина */
 .acc-row .acc,
 .acc-row .currency {
  display: block;
  text-align: left;              /* завжди ліворуч */
  white-space: normal;
  word-break: break-word;
  padding: 2px 4px;
  box-sizing: border-box;
  font-size: 14px;
 }

 /* права частина */
 .balance-row .balanceIn,
 .balance-row .turnoverDebt,
 .balance-row .turnoverCred,
 .balance-row .woid,
 .balance-row .balanceOut {
  display: block;
  text-align: right;             /* завжди праворуч */
  white-space: normal;
  word-break: break-word;
  padding: 2px 4px;
  box-sizing: border-box;
 }

 .balance-row .balanceIn,
 .balance-row .balanceOut { font-size: 14px; }

 .balance-row .turnoverDebt,
 .balance-row .turnoverCred {
  font-size: 12px;
  color: #999;
 }
}


/* Повідомлення копіювання */
.toast {
  position: fixed;
  top: 50%;
  left: 50px;
#  transform: translateX(-50%);
  width: 500px;   /* ширина контейнера */
  max-width: 90%;  /* адаптивно для мобільних */
  min-height: 60px;
  background: #0078d7;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
}