/* ===== BELEGE PAGE ===== */
.bel-page {
  margin-top: 20px;
  margin-bottom: 40px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* HERO */
.bel-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card-bg, #fff);
  border-radius: 18px;
  border: 1px solid var(--c-border, rgba(15,23,42,.06));
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  padding: 20px 28px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.bel-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
}
.bel-hero-title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--fg,#0f172a); }
.bel-hero-sub   { margin: .2rem 0 0; font-size: .85rem; color: var(--fg-muted,#94a3b8); }

/* EXPLORER */
.bel-explorer {
  display: grid;
  grid-template-columns: 260px 4px 1fr;
  background: var(--card-bg,#fff);
  border-radius: 16px;
  border: 1px solid var(--c-border,rgba(15,23,42,.08));
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  overflow: hidden;
  min-height: 560px;
}

/* RESIZER */
.bel-resizer {
  background: var(--c-border, rgba(15,23,42,.08));
  cursor: col-resize;
  transition: background .15s;
  position: relative;
}
.bel-resizer:hover,
.bel-resizer:active { background: #6366f1; }

/* ===== ЛЕВАЯ ПАНЕЛЬ: ДЕРЕВО ===== */
.bel-tree-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface, #f8fafc);
  overflow: hidden;
  min-width: 160px;
  max-width: 520px;
}

.bel-tree-search-wrap {
  position: relative;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--c-border, rgba(15,23,42,.06));
}
.bel-tree-search-icon {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--fg-muted,#94a3b8);
  font-size: .85rem;
}
.bel-tree-search {
  width: 100%; padding: 6px 8px 6px 28px;
  border-radius: 8px;
  border: 1px solid var(--c-border,rgba(15,23,42,.1));
  background: var(--card-bg,#fff);
  font-size: .8rem; color: var(--fg,#0f172a);
  outline: none; box-sizing: border-box;
}
.bel-tree-search:focus { border-color: #6366f1; }

.bel-tree {
  flex: 1; overflow-y: auto;
  padding: 6px 0 12px;
}

/* Узел дерева */
.bel-tree-node {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 3px 6px;
  cursor: default;
  border-radius: 0;
  position: relative;
  min-height: 26px;
}
.bel-tree-node:hover { background: rgba(99,102,241,.06); }
.bel-tree-node--selected { background: rgba(99,102,241,.13) !important; }
.bel-tree-node--selected::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #6366f1;
  border-radius: 0 2px 2px 0;
}

/* Стрелки */
.bel-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--fg-muted,#94a3b8);
  font-size: .7rem;
  border-radius: 3px;
  transition: color .12s, background .12s;
}
.bel-tree-toggle:hover { color: #6366f1; background: rgba(99,102,241,.1); }
.bel-tree-toggle--spacer { cursor: default; pointer-events: none; }
.bel-tree-toggle--spacer:hover { background: none; }

/* Иконки */
.bel-tree-icon {
  font-size: .95rem;
  flex-shrink: 0;
  margin-right: 2px;
}
.bel-tree-icon--archive  { color: #6366f1; }
.bel-tree-icon--client   { color: #f59e0b; }
.bel-tree-icon--year     { color: #f97316; }
.bel-tree-icon--quarter  { color: #eab308; }
.bel-tree-icon--month    { color: #f59e0b; }

.bel-tree-label {
  font-size: .83rem;
  font-weight: 500;
  color: var(--fg,#0f172a);
  cursor: pointer;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.bel-tree-label:hover { color: #6366f1; }

.bel-tree-badge {
  font-size: .62rem;
  font-weight: 700;
  background: #6366f1;
  color: #fff;
  padding: 1px 5px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Дочерние узлы — отступ */
.bel-tree-children { padding-left: 18px; }
.bel-tree-children--hidden { display: none; }

.bel-tree-loading,
.bel-tree-err {
  font-size: .78rem;
  color: var(--fg-muted,#94a3b8);
  padding: 4px 8px;
}

/* ===== ПРАВАЯ ПАНЕЛЬ ===== */
.bel-content-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* TOOLBAR */
.bel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-border,rgba(15,23,42,.06));
  background: var(--surface,#f8fafc);
  min-height: 42px;
}

.bel-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: .82rem;
  min-width: 0;
}
.bel-bc-item { color: var(--fg-muted,#94a3b8); white-space: nowrap; }
.bel-bc-item--active { color: var(--fg,#0f172a); font-weight: 600; }
.bel-bc-item--link { cursor: pointer; color: #6366f1; }
.bel-bc-item--link:hover { text-decoration: underline; }
.bel-bc-sep { font-size: .65rem; color: var(--fg-muted,#94a3b8); }

.bel-view-switch { display: flex; gap: 3px; flex-shrink: 0; }
.bel-view-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--fg-muted,#94a3b8);
  font-size: .95rem;
  transition: all .12s;
}
.bel-view-btn:hover { background: rgba(99,102,241,.08); color: #6366f1; }
.bel-view-btn--active { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.3); color: #6366f1; }

.btn, .btn-outline-primary, .btn-success, .btn-sm, .ocr-verify-btn, .blt-dl-btn {
  box-shadow: none !important;
  transition: none !important;
  filter: none !important;
  background-image: none !important;
}

.btn:hover, .ocr-verify-btn:hover, .blt-dl-btn:hover { opacity: 0.95; }

/* PANE */
.bel-pane {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.bel-welcome, .bel-pane-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--fg-muted,#94a3b8);
  gap: 10px;
  font-size: .9rem;
}
.bel-welcome i { font-size: 2.5rem; }

/* GRID: папки и файлы */
.bel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 110px));
  gap: 6px;
  padding: 14px;
}

.bel-grid-folder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px 8px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  text-align: center;
  width: 110px;
}
.bel-grid-folder:hover { background: rgba(99,102,241,.07); }
.bel-grid-folder-icon { font-size: 4rem; color: #f59e0b; display: block; line-height: 1; margin-bottom: 5px; }
.bel-grid-badge {
  position: absolute;
  top: 6px; right: 6px;
  background: #6366f1;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
}
.bel-grid-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--fg,#0f172a);
  word-break: break-word;
  line-height: 1.3;
}

.blt-col.blt-name .blt-fname {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

.blt-row { align-items: center; }

.blt-col { min-width: 0; }
.blt-ocr { line-height: 1.3; }


/* Файлы в виде сетки */
.bel-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 110px));
  gap: 6px;
  padding: 14px;
}
.bel-file-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px 8px;
  border-radius: 8px;
  border: 2px solid transparent;
  text-align: center;
  width: 110px;
  transition: background .12s;
}
.bel-file-card:hover { background: rgba(99,102,241,.07); }
.bel-file-card-icon { font-size: 3.2rem; color: #6366f1; display: block; line-height: 1; margin-bottom: 5px; }
.bel-file-card-icon.bi-file-earmark-pdf   { color: #ef4444; }
.bel-file-card-icon.bi-file-earmark-image { color: #22c55e; }
.bel-file-card-icon.bi-file-earmark-word  { color: #3b82f6; }
.bel-file-card-icon.bi-file-earmark-excel { color: #16a34a; }
.bel-file-card-name {
  font-size: .7rem; font-weight: 500; color: var(--fg,#0f172a);
  word-break: break-all; line-height: 1.3; max-width: 100px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bel-file-card-dl {
  margin-top: 5px; color: var(--fg-muted,#94a3b8);
  font-size: .85rem; padding: 3px 6px; border-radius: 6px;
  transition: all .12s;
}
.bel-file-card-dl:hover { color: #6366f1; background: rgba(99,102,241,.1); }

/* LIST TABLE */
.bel-list-table { padding: 0 8px 16px; width: 100%; }
.bel-list-head {
  display: grid;
  grid-template-columns: 28px 338px 1fr 1fr 1fr 1fr 110px;
  padding: 7px 10px;
  border-bottom: 2px solid var(--c-border,rgba(15,23,42,.08));
  font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted,#94a3b8);
}
.bel-list-head .blt-col { text-align: center; }
.bel-list-head .blt-name { text-align: left; }
.blt-row {
  display: grid;
  grid-template-columns: 28px 338px 1fr 1fr 1fr 1fr 110px;
  padding: 9px 10px;
  border-radius: 6px;
  align-items: center;
  transition: background .12s;
}
.blt-name { min-width: 0; }
.blt-fname { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blt-col { min-width: 0; }
.blt-ocr { line-height: 1.3; }
.btn-outline-primary, .btn-success, .btn-sm { box-shadow: none !important; transition: none !important; }
.btn-outline-primary:hover, .btn-success:hover { background: rgba(99,102,241,.1) !important; }

.blt-row:hover { background: rgba(99,102,241,.05); }
.blt-row--folder { cursor: pointer; }
.blt-row--folder:hover { background: rgba(245,158,11,.06); }
.blt-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.blt-icon { font-size: 1rem; flex-shrink: 0; color: #6366f1; }
.blt-icon.bi-file-earmark-pdf   { color: #ef4444; }
.blt-icon.bi-file-earmark-image { color: #22c55e; }
.blt-icon.bi-file-earmark-word  { color: #3b82f6; }
.blt-icon.bi-file-earmark-excel { color: #16a34a; }
.blt-icon--folder { color: #f59e0b !important; }
.blt-fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; font-weight: 500; color: var(--fg,#0f172a); }
.blt-date, .blt-type, .blt-size { font-size: .8rem; color: var(--fg-muted,#94a3b8); }
.blt-tlink { font-size: .75rem; color: #6366f1; font-weight: 600; }
.blt-dl-btn { color: var(--fg-muted,#94a3b8); font-size: .9rem; padding: 4px 6px; border-radius: 6px; transition: all .12s; display: inline-flex; }
.blt-dl-btn:hover { color: #6366f1; background: rgba(99,102,241,.1); }

/* DARK */
[data-theme="dark"] .bel-hero,
[data-theme="dark"] .bel-explorer { background: var(--card-bg,#1e293b); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .bel-tree-panel { background: rgba(255,255,255,.03); }
[data-theme="dark"] .bel-toolbar { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .bel-tree-search { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #e2e8f0; }
[data-theme="dark"] .bel-tree-label, [data-theme="dark"] .blt-fname, [data-theme="dark"] .bel-grid-label, [data-theme="dark"] .bel-file-card-name { color: #e2e8f0; }
[data-theme="dark"] .blt-row:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .bel-resizer { background: rgba(255,255,255,.08); }

/* RESPONSIVE */
@media (max-width: 860px) {
  .bel-explorer { grid-template-columns: 1fr !important; }
  .bel-resizer { display: none; }
  .bel-tree-panel { max-height: 200px; border-bottom: 1px solid var(--c-border,rgba(15,23,42,.08)); }

  /* Таблица файлов — мобильный grid: чекбокс | имя | OCR-статус | кнопка */
  .bel-list-head,
  .blt-row {
    grid-template-columns: 24px 1fr 60px 80px !important;
  }

  /* Скрываем дату, тип, прогресс на мобиле */
  .blt-date,
  .blt-type,
  .blt-prog { display: none !important; }

  /* Имя файла — обрезаем */
  .blt-fname { font-size: .78rem; max-width: calc(100vw - 200px); }
  .blt-tnum  { font-size: .65rem; }

  /* Кнопка верификации — компактнее */
  .ocr-verify-btn { font-size: .68rem !important; padding: 2px 6px !important; }

  /* OCR статус — только иконка */
  .ocr-status { font-size: .68rem; padding: 2px 4px; }

  /* Тулбар — переносим на две строки */
  .bel-toolbar { flex-wrap: wrap; gap: 6px; }
  .bel-toolbar-actions { flex-wrap: wrap; gap: 4px; }
  #exportFormat { font-size: .75rem !important; }
}

@media (max-width: 480px) {
  .bel-list-head,
  .blt-row {
    grid-template-columns: 24px 1fr 80px !important;
  }
  /* На совсем маленьком — убираем OCR статус тоже */
  .blt-ocr { display: none !important; }
  .blt-verify { justify-content: flex-end; }
}

/* OCR verify button */
.ocr-verify-btn {
  font-size: .75rem !important;
  padding: 3px 8px !important;
  white-space: nowrap;
  background-image: none !important;
  background: transparent !important;
  border: 1px solid #6366f1 !important;
  color: #6366f1 !important;
  border-radius: 6px !important;
}
.ocr-verify-btn:hover {
  background: rgba(99,102,241,.1) !important;
}
.ocr-verify-btn:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
}
/* OCR status badge */
.ocr-status { font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 99px; }
.ocr-status--none     { background: rgba(148,163,184,.15); color: #94a3b8; }
.ocr-status--verified { background: rgba(34,197,94,.15);  color: #16a34a; }
.ocr-status--exported { background: rgba(99,102,241,.15); color: #6366f1; }

.blt-name-stack { display: flex; flex-direction: column; min-width: 0; }
.blt-tnum { font-size: .7rem; font-weight: 600; color: #6366f1; line-height: 1.2; white-space: nowrap; }
.blt-fname { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.blt-verify { display: flex; justify-content: flex-end; align-items: center; }

.blt-row .blt-date,
.blt-row .blt-type,
.blt-row .blt-ocr,
.blt-row .blt-prog { text-align: center; }

:root {
  --conf-high: #16a34a;
  --conf-mid:  #d97706;
  --conf-low:  #dc2626;
}
[data-theme="dark"] {
  --conf-high: #4ade80;
  --conf-mid:  #fbbf24;
  --conf-low:  #f87171;
}