/* UA Shell layout styles - extracted from main layout */

/* вимкнути transition/animation, поки ініціалізація не завершена */
html.ua-prep * { transition: none !important; animation: none !important; }
html.ua-prep #brand-logo { visibility: hidden; }

/* початкове змальовування згорнутого стану */
html.ua-prefers-collapsed #ua-shell .app{ grid-template-columns: var(--sidebar-mini) 1fr; }
html.ua-prefers-collapsed #ua-shell .sidebar{ width: var(--sidebar-mini); }
html.ua-prefers-collapsed #ua-shell .brand-title,
html.ua-prefers-collapsed #ua-shell .search,
html.ua-prefers-collapsed #ua-shell .menu a .text,
html.ua-prefers-collapsed #ua-shell .quick,
html.ua-prefers-collapsed #ua-shell .side-controls .label{ display:none; }

#ua-shell .app{ transition: grid-template-columns .2s ease; }
#ua-shell .sidebar{ transition: width .2s ease, transform .2s ease; }
html.ua-prep #ua-shell .toggle-btn { transition: none !important; }
html.ua-prefers-collapsed #ua-shell .toggle-btn{
  position: absolute;
  inset: auto auto auto 12px;
  opacity: 0;
  pointer-events: none;
}
html.ua-prefers-collapsed #ua-shell .side-head:hover .toggle-btn{
  opacity: 1;
  pointer-events: auto;
}

#ua-shell{ --sidebar-w:272px; --sidebar-mini:78px; --radius:14px; }
#ua-shell{
  --bg: #f7f8fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --ring: 0 0 0 3px rgba(13,110,253,.15);
  --shadow: 0 12px 30px rgba(2,6,23,.06);
  --shadow-sm: 0 6px 18px rgba(2,6,23,.06);
  --accent: #e02424;
  --accent-600:#cc1f1f;
  --hover:#f0f6f6;
}
html[data-bs-theme="dark"] #ua-shell{
  --bg:#0b111a;
  --panel:#0f1419;
  --text:#e7eaf0;
  --muted:#9aa4b2;
  --border:#1c222b;
  --hover:#141b23;
  --shadow: 0 18px 38px rgba(0,0,0,.35);
  --shadow-sm: 0 10px 26px rgba(0,0,0,.28);
}

#ua-shell, #ua-shell body{ height:100%; }
#ua-shell .page{
  min-height:100vh;
  background:
          radial-gradient(900px 450px at 95% -10%, rgba(224,36,36,.06), transparent 60%),
          radial-gradient(900px 450px at -10% 0%, rgba(21,128,61,.06), transparent 60%),
          var(--bg);
  color:var(--text);
}
#ua-shell .app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap:0;
  transition: grid-template-columns .2s ease;
  min-height:100vh;
}
#ua-shell.collapsed .app{
  grid-template-columns: var(--sidebar-mini) 1fr;
}

#ua-shell .sidebar{
  position:sticky; top:0; height:100vh;
  background: var(--panel);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 16px 14px;
  transition: width .2s ease, transform .2s ease;
  z-index: 1030;
}
#ua-shell .brand{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:12px;
}
#ua-shell .brand img{ height:32px; width:auto; margin-left: -10px; }
#ua-shell .brand-title{ font-weight:800; letter-spacing:.2px; }
#ua-shell .search{
  margin: 8px 8px 14px; position:relative;
}
#ua-shell .search input{
  width:100%; border:1px solid var(--border); border-radius:12px;
  background:#fff; color:var(--text); padding:10px 12px 10px 40px; outline:none;
}
html[data-bs-theme="dark"] #ua-shell .search input{ background:#11161d; }
#ua-shell .search i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--muted);
}

#ua-shell .menu{ margin:8px 6px; display:flex; flex-direction:column; gap:6px; }
#ua-shell .menu a{
  display:flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  color:var(--text); font-weight:450;
  transition:0s;
}
#ua-shell .menu a .icon{ width:20px; text-align:center; color:var(--muted); }
#ua-shell .menu a:hover{ background:#f9f9f9; }
html[data-bs-theme="dark"] #ua-shell .menu a:hover{ background:var(--hover); }
html[data-bs-theme="dark"] #ua-shell .menu a.active{
  background: #26313b;
  color:#ffffff;
}
#ua-shell .menu a.active {
  background:#f0f6f6;
  color: var(--text);
}
#ua-shell .menu a.active .icon{ color:var(--text); }

#ua-shell .quick{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 8px 0; }
#ua-shell .chip{
  border:1px solid var(--border); background:var(--panel);
  color:var(--text); border-radius:999px; padding:6px 10px; font-weight:600;
}
#ua-shell .side-controls{
  margin-top:auto; display:flex; align-items:center; gap:8px; padding:8px;
}
#ua-shell .btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background:var(--panel); color:var(--text);
}
#ua-shell .btn-icon:hover{ background:var(--hover); }

#ua-shell .content{
  min-width:0; display:flex; flex-direction:column;
  position:relative;
  z-index:1;
  color:var(--text);
  overflow:auto;
}
#ua-shell .topbar{
  height:60px; backdrop-filter:saturate(120%) blur(8px);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; border-bottom:1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  position:sticky; top:0;
  z-index:2;
}
#ua-shell .top-actions{display:flex; align-items:center; gap:8px;}
#ua-shell .main{ padding:20px; flex:1; }
.sidebar .minWrapLine{ display:flex; }

#ua-shell.collapsed .sidebar{ width: var(--sidebar-mini); }
#ua-shell.collapsed .brand-title,
#ua-shell.collapsed .search,
#ua-shell.collapsed .menu a .text,
#ua-shell.collapsed .quick,
#ua-shell.collapsed .side-controls .label,
#ua-shell.collapsed .nav-bottom .minWrapLine #miniName{ display:none; }
#ua-shell.collapsed .ua-hero__id{ margin-left: -10px; }
#ua-shell.collapsed .tag{ display: contents;
  /*color: #ffffff;*/
}
#miniName{
  max-height: 38px;
  overflow: hidden;
  font-size:.9em !important;
}

@media (max-width: 991.98px){
  #ua-shell .toggle-btn{ display:none !important; }
  #ua-shell .app, #ua-shell.collapsed .app{ grid-template-columns: 1fr !important; }
  #ua-shell .sidebar{
    position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
    transform:translateX(-100%); height:100%;
    overflow:auto;
    -webkit-overflow-scrolling:touch; /* smooth scroll on iOS */
  }
  #ua-shell.open .sidebar{ transform:translateX(0); }
  #ua-shell .backdrop{
    display:none; position:fixed; inset:0; z-index:1025;
    background:rgba(0,0,0,.35);
  }
  #ua-shell.open .backdrop{ display:block; }
  #ua-shell .brand img{ height:28px; margin-left:0; max-width:100%; }
}
@media (min-width: 992px){
  #ua-shell .backdrop{ display:none !important; }
}

[data-bs-theme="dark"] body {
  background: linear-gradient(180deg, #0c0f14, #0a0d11);
}
#ua-shell .content{ display:flex; flex-direction:column; }
#ua-shell .footer{
  border-top:1px solid var(--border);
  padding-left:18px; padding-right:18px;
  color:var(--muted);
  height:max-content;
  opacity: .9;
}

#ua-shell .side-head{
  position: relative;
  display:flex; align-items:center; gap:10px;
  padding:8px 8px 12px;
}
#ua-shell .brand{display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px;}
#ua-shell .brand img{ height:34px; width:auto; transition:opacity .15s ease; }
#ua-shell .toggle-btn{ margin-left:auto; transition:opacity .15s ease, transform .15s ease; }
#ua-shell.collapsed .side-head{ padding-bottom:8px; }
#ua-shell.collapsed .toggle-btn{
  position:absolute;
  inset: auto auto auto 6px;
  opacity:0; pointer-events:none;
}
#ua-shell.collapsed .side-head:hover .toggle-btn{
  opacity:1; pointer-events:auto;
}
#ua-shell.collapsed .side-head:hover #brand-logo{
  opacity:.15;
}

.d-none{display:none!important}
.main{ background: #f5f5f5; }
html[data-bs-theme="dark"] .main{
  background: linear-gradient(180deg, #0c0f14, #0a0d11);
}
.footer{ background-color: #fff; }
html[data-bs-theme="dark"] .footer{ background-color: #111419; }

.ua-cta.success { background: #198754; color: #fff; }
.ua-cta.danger { background: #fa3e30; color: #fff; }
.ua-user-mini{ display:flex; align-items:center; gap:10px; }
/*.ua-avatar*/
{
  width:32px; height:32px; border-radius:999px; display:inline-grid; place-items:center;
  background:#e02424; color:#fff; font-weight:800;
}
.ua-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  /*background: #e02424;*/
  color: #fff;
  font-weight: 400;
  margin-right: 5px;
  font-size: 14px;
}
.ua-user-info{ display:flex; flex-direction:column; line-height:1.1; }
.ua-user-name{ font-weight:800; }
.ua-user-meta{ display:flex; gap:8px; color:var(--muted,#6b7280); font-size:.875rem; }
.ua-user-meta .tag{ border:1px solid var(--border,#e5e7eb); border-radius:999px; padding:0 8px; }
.ua-cta{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; text-decoration:none; font-weight:700; }
.ua-cta.danger{ background:#fa3e30; color:#fff; }
.ua-cta.danger:hover{ background:#cc1f1f; color:#fff; }
.ua-user-mini.me-2{display: flex; align-items: center; gap: 8px; }
@media (max-width: 991.98px) {
  .topbar .ua-user-mini.me-2 { display: none; }
}

.menu .btn-icon.theme-toggle {
  all: unset;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.75rem 1rem;
  width: 100%;
}
.menu .btn-icon.theme-toggle i.icon { font-size: 1.2rem; margin-right: 0.5rem; }
.menu .btn-icon.theme-toggle .text { white-space: nowrap; }
.menu.collapsed .btn-icon.theme-toggle .text { display: none; }
#ua-shell .menu a:last-child { margin-bottom: 4px; }

:root{ --chrome-bar: #ffffff; }
html[data-bs-theme="dark"]{ --chrome-bar: #0f1419; }

.form-control{ transition:0s; }
html[data-bs-theme="dark"] .swiper-pagination-bullet{ background: #aeaeae; }
.menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu .text { white-space: nowrap; }

.newMinWrapper .amount-line .svPay,
  /*.ua-avatar, */
.newWrapMin .zero svg, .newMinWrapper .Loginlabel .svPay, .btn-success {
  background-color: #8999a7;
  border-color: #8999a7;
}
.ua-hero .ua-avatar {
  height: 25px !important;
  width: 25px !important;
  min-height: 25px !important;
  min-width: 25px !important;
  background-color: #8999a7;
  border-color: #8999a7;
}
html[data-bs-theme="dark"] .ua-hero .ua-avatar {
  background: #26313b !important;
  border-color: #1b222a;
}