/* ============================================================
   DEBUG TRACE PANEL
   ============================================================ */

/* --- Плавающая кнопка --- */
.trace-btn
{
   position: fixed;
   bottom: 1.25rem;
   right: 1.25rem;
   z-index: 8900;
   display: flex;
   align-items: center;
   gap: 0.375rem;
   padding: 0.4rem 0.75rem 0.4rem 0.5rem;
   background: var(--brand-navy-light);
   color: #ffffff;
   border-radius: 2rem;
   font-size: 0.75rem;
   font-weight: 600;
   font-family: var(--font-family);
   box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.3);
   cursor: pointer;
   border: none;
   transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
   user-select: none;
}

.trace-btn:hover
{
   background: var(--brand-navy);
   transform: translateY(-0.125rem);
   box-shadow: 0 0.375rem 1.25rem rgba(0,0,0,0.35);
}

.trace-btn.has-errors
{
   background: var(--brand-red);
}

.trace-btn__icon
{
   width: 1.125rem;
   height: 1.125rem;
   flex-shrink: 0;
}

.trace-btn__count
{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 1.125rem;
   height: 1.125rem;
   padding: 0 0.25rem;
   background: rgba(255,255,255,0.22);
   border-radius: 1rem;
   font-size: 0.625rem;
   font-weight: 700;
   line-height: 1;
}

.trace-btn__count.has-errors
{
   background: var(--brand-red);
}

/* --- Панель --- */
.trace-panel
{
   position: fixed;
   bottom: 0;
   right: 0;
   z-index: 8800;
   width: 26rem;
   max-width: 100vw;
   height: 60vh;
   min-height: 20rem;
   max-height: 90vh;
   background: var(--bg-surface);
   border: 0.0625rem solid var(--border-color);
   border-bottom: none;
   border-radius: 0.75rem 0.75rem 0 0;
   box-shadow: var(--shadow-lg);
   display: flex;
   flex-direction: column;
   transform: translateY(100%);
   transition: transform var(--transition-slow);
   overflow: hidden;
}

.trace-panel.open
{
   transform: translateY(0);
}

/* Шапка панели */
.trace-panel__header
{
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.625rem 0.875rem;
   background: var(--brand-navy);
   color: #ffffff;
   flex-shrink: 0;
   cursor: ns-resize;
   user-select: none;
}

.trace-panel__title
{
   font-size: 0.8125rem;
   font-weight: 700;
   letter-spacing: 0.03em;
   flex: 1;
   display: flex;
   align-items: center;
   gap: 0.375rem;
}

.trace-panel__title svg
{
   width: 0.875rem;
   height: 0.875rem;
   color: var(--brand-red);
}

.trace-panel__actions
{
   display: flex;
   align-items: center;
   gap: 0.25rem;
}

.trace-panel__btn
{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1.625rem;
   height: 1.625rem;
   border-radius: 0.375rem;
   background: none;
   border: none;
   color: rgba(255,255,255,0.65);
   cursor: pointer;
   transition: background var(--transition), color var(--transition);
   font-family: var(--font-family);
   font-size: 0.6875rem;
   font-weight: 600;
}

.trace-panel__btn:hover
{
   background: rgba(255,255,255,0.15);
   color: #ffffff;
}

.trace-panel__btn svg
{
   width: 0.875rem;
   height: 0.875rem;
}

/* Фильтр-табы */
.trace-panel__filters
{
   display: flex;
   align-items: center;
   gap: 0;
   padding: 0 0.875rem;
   border-bottom: 0.0625rem solid var(--border-color);
   background: var(--bg-app);
   flex-shrink: 0;
   overflow-x: auto;
}

.trace-filter-tab
{
   display: flex;
   align-items: center;
   gap: 0.25rem;
   padding: 0.5rem 0.625rem;
   font-size: 0.6875rem;
   font-weight: 600;
   color: var(--text-muted);
   border-bottom: 0.125rem solid transparent;
   cursor: pointer;
   white-space: nowrap;
   transition: color var(--transition), border-color var(--transition);
   background: none;
   border-top: none;
   border-left: none;
   border-right: none;
   font-family: var(--font-family);
}

.trace-filter-tab:hover
{
   color: var(--text-secondary);
}

.trace-filter-tab.active
{
   color: var(--brand-navy);
   border-bottom-color: var(--brand-red);
}

[data-theme="dark"] .trace-filter-tab.active
{
   color: var(--text-primary);
}

.trace-filter-tab__badge
{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 1rem;
   height: 1rem;
   padding: 0 0.2rem;
   border-radius: 1rem;
   font-size: 0.5625rem;
   font-weight: 700;
   background: var(--bg-table-head);
   color: var(--text-muted);
}

.trace-filter-tab.active .trace-filter-tab__badge
{
   background: var(--brand-navy);
   color: #ffffff;
}

.trace-filter-tab.tab-error .trace-filter-tab__badge
{
   background: var(--color-error-bg);
   color: var(--color-error);
}

.trace-filter-tab.tab-error.active .trace-filter-tab__badge
{
   background: var(--color-error);
   color: #ffffff;
}

/* Список записей */
.trace-panel__list
{
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0.375rem 0;
}

.trace-panel__empty
{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   color: var(--text-muted);
   font-size: 0.8125rem;
   gap: 0.5rem;
}

.trace-panel__empty svg
{
   width: 2rem;
   height: 2rem;
   opacity: 0.3;
}

/* Запись трассировки */
.trace-entry
{
   display: flex;
   gap: 0.5rem;
   padding: 0.3rem 0.875rem;
   font-size: 0.6875rem;
   line-height: 1.45;
   border-bottom: 0.0625rem solid var(--border-color);
   cursor: pointer;
   transition: background var(--transition);
   font-family: 'Consolas', 'Courier New', monospace;
}

.trace-entry:last-child
{
   border-bottom: none;
}

.trace-entry:hover
{
   background: var(--bg-table-hover);
}

.trace-entry.expanded
{
   background: var(--bg-table-alt);
}

.trace-entry__time
{
   color: var(--text-muted);
   white-space: nowrap;
   flex-shrink: 0;
   padding-top: 0.1rem;
   font-size: 0.625rem;
}

.trace-entry__icon
{
   flex-shrink: 0;
   width: 0.875rem;
   height: 0.875rem;
   margin-top: 0.15rem;
}

.trace-entry__body
{
   flex: 1;
   min-width: 0;
}

.trace-entry__msg
{
   color: var(--text-primary);
   word-break: break-word;
   white-space: pre-wrap;
}

.trace-entry__detail
{
   display: none;
   margin-top: 0.375rem;
   padding: 0.5rem;
   background: var(--bg-app);
   border-radius: 0.375rem;
   border: 0.0625rem solid var(--border-color);
   color: var(--text-secondary);
   white-space: pre-wrap;
   word-break: break-all;
   font-size: 0.625rem;
   max-height: 10rem;
   overflow-y: auto;
}

.trace-entry.expanded .trace-entry__detail
{
   display: block;
}

/* Типы */
.trace-entry--log    .trace-entry__icon { color: var(--text-muted); }
.trace-entry--info   .trace-entry__icon { color: var(--color-info); }
.trace-entry--warn   .trace-entry__icon { color: var(--color-warning); }
.trace-entry--error  .trace-entry__icon { color: var(--color-error); }
.trace-entry--ajax   .trace-entry__icon { color: var(--brand-navy); }
.trace-entry--ok     .trace-entry__icon { color: var(--color-success); }

.trace-entry--error  .trace-entry__msg  { color: var(--color-error); }
.trace-entry--warn   .trace-entry__msg  { color: var(--color-warning); }

/* Строка AJAX */
.trace-entry__ajax-meta
{
   display: flex;
   gap: 0.375rem;
   align-items: center;
   margin-top: 0.125rem;
}

.trace-method
{
   display: inline-block;
   padding: 0.0625rem 0.3rem;
   border-radius: 0.25rem;
   font-size: 0.5625rem;
   font-weight: 700;
   background: var(--brand-navy);
   color: #ffffff;
}

.trace-method--post   { background: var(--color-success); }
.trace-method--put    { background: var(--color-warning); color: #fff; }
.trace-method--delete { background: var(--color-error); }
.trace-method--patch  { background: var(--color-info); }

.trace-status
{
   font-size: 0.5625rem;
   font-weight: 700;
   padding: 0.0625rem 0.3rem;
   border-radius: 0.25rem;
}

.trace-status--ok     { background: var(--color-success-bg); color: var(--color-success); }
.trace-status--err    { background: var(--color-error-bg); color: var(--color-error); }
.trace-status--pend   { background: var(--color-info-bg); color: var(--color-info); }

.trace-duration
{
   color: var(--text-muted);
   font-size: 0.5625rem;
}

/* Подвал */
.trace-panel__footer
{
   padding: 0.375rem 0.875rem;
   border-top: 0.0625rem solid var(--border-color);
   display: flex;
   align-items: center;
   gap: 0.5rem;
   flex-shrink: 0;
   background: var(--bg-app);
}

.trace-panel__footer-info
{
   font-size: 0.625rem;
   color: var(--text-muted);
   flex: 1;
   font-family: 'Consolas', 'Courier New', monospace;
}

/* Анимация новой записи */
@keyframes trace-flash
{
   0%   { background: var(--accent-light); }
   100% { background: transparent; }
}

.trace-entry--new
{
   animation: trace-flash 0.6s ease forwards;
}

/* --- Позиция bottom-left --- */
.trace-btn.trace--bottom-left
{
   right: auto;
   left: 7.5rem;
   bottom:1.1rem;
}

.trace-panel.trace--bottom-left
{
   right: auto;
   left: 0;
   border-radius: 0.75rem 0.75rem 0 0;
}

/* Мобильный */
@media (max-width: 49.9375rem)
{
   .trace-panel
   {
      width: 100%;
      border-radius: 0.75rem 0.75rem 0 0;
   }

   .trace-btn
   {
      bottom: 1rem;
      right: 1rem;
   }
}