/* maisa panel: moliya markazi — komponentlar brandbook tokenlari ustida (faqat tokenlar). */
.hub-dot { display: inline-block; width: var(--mx-s-2); height: var(--mx-s-2); border-radius: var(--mx-r-pill); background: var(--mx-ac-fill); flex: none; }
.hub-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.hub-li { display: flex; align-items: center; gap: var(--mx-s-3); padding: var(--mx-s-3) 0; border-bottom: 1px solid rgb(var(--mx-border)); color: inherit; text-decoration: none; }
a.hub-li:hover { background: rgb(var(--mx-subtle)); }
.hub-li:last-child { border-bottom: 0; }
.hub-li__ico { width: var(--mx-s-10); height: var(--mx-s-10); border-radius: var(--mx-r-lg); display: grid; place-items: center; background: rgb(var(--mx-subtle)); flex: none; color: rgb(var(--mx-muted)); }
.hub-li__tx { flex: 1; min-width: 0; }
.hub-li__tx b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-li__tx span { color: rgb(var(--mx-faint)); font-size: 12px; }
.hub-li__am { font: 600 14px var(--mx-font-num); white-space: nowrap; text-align: right; }
.hub-li__am small { display: block; font: 500 11px var(--mx-font-num); color: rgb(var(--mx-faint)); }
.hub-pos { color: var(--mx-ok); } .hub-neg { color: var(--mx-err); } .hub-warn { color: var(--mx-wait); }
.hub-empty { text-align: center; color: rgb(var(--mx-faint)); padding: var(--mx-s-6) var(--mx-s-3); }
.hub-row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto; gap: var(--mx-s-3); align-items: center; margin-bottom: var(--mx-s-3); font-size: 13px; }
.hub-row__nm { display: flex; align-items: center; gap: var(--mx-s-2); font-weight: 600; }
.hub-filters { display: flex; gap: var(--mx-s-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--mx-s-4); }
.hub-filters select, .hub-filters input { height: var(--mx-control-h); }
.inp, .hub-filters select, .hub-filters input[type=text], .hub-filters input[type=date] { background: rgb(var(--mx-surface)); border: 1px solid rgb(var(--mx-control)); border-radius: var(--mx-r-md); color: rgb(var(--mx-ink)); padding: 0 var(--mx-s-3); font: inherit; min-height: var(--mx-control-h); width: 100%; }
textarea.inp { padding: var(--mx-s-2) var(--mx-s-3); min-height: 96px; }
.hub-filters .inp { width: auto; }
.inp:focus { outline: 2px solid var(--mx-ac-fill); outline-offset: -1px; }
.hub-chips { display: flex; gap: var(--mx-s-2); flex-wrap: wrap; align-items: center; }
.hub-range { display: inline-flex; gap: var(--mx-s-1); align-items: center; }
.hub-range .inp { width: auto; min-height: 32px; font: 500 12px var(--mx-font-num); }
.hub-form { max-width: 640px; }
.hub-form .mx-field { margin-bottom: var(--mx-s-4); }
.hub-alert { padding: var(--mx-s-3) var(--mx-s-4); border-radius: var(--mx-r-md); background: var(--mx-wait-bg); border: 1px solid var(--mx-wait-bd); color: var(--mx-wait); font-size: 13px; margin-bottom: var(--mx-s-4); }
.hub-flash { padding: var(--mx-s-3) var(--mx-s-4); border-radius: var(--mx-r-md); margin-bottom: var(--mx-s-4); background: var(--mx-ok-bg); border: 1px solid var(--mx-ok-bd); color: var(--mx-ok); font-weight: 600; }
.hub-flash.error { background: var(--mx-err-bg); border-color: var(--mx-err-bd); color: var(--mx-err); }
.hub-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mx-s-3); text-align: center; }
.hub-tri b { display: block; font: 700 22px var(--mx-font-num); }
.hub-tri span { font-size: 12px; color: rgb(var(--mx-faint)); }
.hub-tri a { color: inherit; text-decoration: none; }
.hub-stack { display: grid; gap: var(--mx-grid-gap, var(--mx-s-4)); align-content: start; min-width: 0; }
.hub-cardhead { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-s-2); flex-wrap: wrap; margin-bottom: var(--mx-s-3); }
.mx-input select { background: transparent; border: 0; color: inherit; font: inherit; width: 100%; height: 100%; outline: 0; }
.hub-form input[type=checkbox] { width: auto; min-height: 0; }
.hub-auth-sso { width: 100%; height: 44px; }
.hub-prod { color: rgb(var(--mx-ink)); }
@media (max-width: 480px) { .hub-tri { grid-template-columns: 1fr; } }
.hub-row { grid-template-columns: minmax(80px, 120px) minmax(48px, 1fr) auto; }
.hub-row > :last-child { text-align: right; min-width: 0; max-width: 100%; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 768px) { .mx-datepick { display: none; } }