/* No universal margin/padding reset — tablet.js injects after app CSS and
   would crush local padding (e.g. villa_tablet_organizacoes). */
.tablet,
.tablet *,
.tablet *::before,
.tablet *::after {
    box-sizing: border-box;
    font-family: var(--font);
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--text);
    background: transparent;
}

.hidden {
    display: none !important;
}

#app {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}


.tablet *::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

.tablet *::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
}

.tablet *::-webkit-scrollbar-thumb {
    background: var(--red);
    border-radius: 10px;
}

.tablet {
    position: relative;
    width: 1402px; /* 1402px */
    height: 837px; /* 837px */
    padding: 12px 17px 18px 16px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

@media (max-width: 1400px) {
    .tablet {
        zoom: 0.6;
    }
}

.tablet__frame {
    position: absolute;
    top: -35.71%;
    left: -5.07%;
    width: 110.07%;
    height: 170.58%;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.tablet__bezel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 29px;
    background: var(--screen-bg);
    padding: 18px;
    overflow: hidden;
}

.tablet__screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    overflow: hidden;
    background: var(--screen-bg);
}

.tablet__wallpaper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.panel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 29px;
    background: var(--panel-grad);
    display: flex;
    flex-direction: column;
    padding: 18px;
    overflow: hidden;
}

.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    flex-shrink: 0;
}

.panel__header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.panel__divider {
    height: 1.92px;
    background: var(--line);
    border-radius: 16px;
    margin: 14.4px 0;
    flex-shrink: 0;
}

.nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav__btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--white-2);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}

.nav__btn svg,
.nav__btn img,
.nav__btn img.nav__img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.nav__btn img,
.nav__btn img.nav__img {
    opacity: 0.15;
    filter: brightness(0) invert(1);
}

.nav__btn:hover {
    color: var(--white-7);
    background: var(--card-05);
}

.nav__btn:hover img,
.nav__btn:hover img.nav__img {
    opacity: 0.55;
}

.nav__btn.is-active {
    background: var(--red);
    color: var(--white);
}

.nav__btn.is-active img,
.nav__btn.is-active img.nav__img {
    opacity: 1;
    filter: brightness(0) invert(1);
}

.nav__btn--exit:hover {
    color: var(--red);
    background: var(--red-soft);
}

.nav__btn--exit:hover img,
.nav__btn--exit:hover img.nav__img {
    opacity: 1;
}

.infobar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-01);
    border-radius: 9.6px;
    padding: 14.4px 17.6px;
    margin-bottom: 14.4px;
    flex-shrink: 0;
}

.infobar__profile {
    display: flex;
    align-items: center;
    gap: 16.8px;
}

.infobar__profile img {
    width: 46px;
    height: 46px;
    border-radius: 5px;
    object-fit: cover;
    object-position: center;
    background: var(--card-01);
    flex-shrink: 0;
    overflow: hidden;
}

.infobar__hi {
    display: block;
    font-size: 11.2px;
    color: var(--white-7);
}

.infobar__name {
    display: block;
    font-size: 13.12px;
    font-weight: 600;
    margin-top: 2.4px;
}

.infobar__stats {
    display: flex;
    gap: 11.2px;
}

.stat {
    display: flex;
    align-items: center;
    gap: 9.6px;
    background: var(--card-01);
    border: 0.96px solid rgba(var(--white-rgb), 0.03);
    border-radius: 6.4px;
    padding: 8.8px 14.4px;
    min-width: 182.4px;
}

.stat__icon {
    width: 40px;
    height: 40px;
    border-radius: 6.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.stat__icon svg,
.stat__icon img {
    width: 15px;
    height: auto;
    aspect-ratio: 15 / 18;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.stat__icon--red {
    background: var(--red-soft);
    color: var(--red);
}

.stat__icon--green {
    background: var(--success-3);
    color: var(--green);
}

.stat__label {
    display: block;
    font-size: 11.52px;
    color: var(--muted);
}

.stat__value {
    display: block;
    font-size: 15.2px;
    font-weight: 600;
    margin-top: 1.6px;
}

.stat__value--green {
    color: var(--green);
}

.view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 9.6px;
    margin-bottom: 11.2px;
    flex-shrink: 0;
}

.search {
    position: relative;
    flex: 1;
}

.search svg,
.search img,
.search img.search__icon {
    position: absolute;
    left: 11.2px;
    top: 50%;
    transform: translateY(-50%);
    width: 12.8px;
    height: 12.8px;
    color: var(--muted-2);
    object-fit: contain;
    opacity: 0.55;
    pointer-events: none;
}

.search input {
    width: 100%;
    height: 37.6px;
    background: var(--card-05);
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 5.6px;
    padding: 0 12.8px 0 33.6px;
    color: var(--white);
    font-size: 12.48px;
    box-sizing: border-box;
}

.search input:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.search input::placeholder {
    color: var(--muted-2);
}

.icon-img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    aspect-ratio: 1;
}

.icon-img--hire {
    width: 100%;
    height: 100%;
}

.icon-btn {
    width: 37.6px;
    height: 37.6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-05);
    border: none;
    border-radius: 5.6px;
    color: var(--white);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    padding: 0;
    overflow: hidden;
}

.icon-btn svg {
    width: 18px;
    height: auto;
}

.icon-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.icon-btn:hover {
    background: var(--white-2);
}

.icon-btn--solid {
    background: var(--red);
}

.icon-btn--solid:hover {
    background: var(--accent-9);
}

.icon-btn--solid:has(img.icon-img--hire) {
    background: transparent;
    padding: 0;
    overflow: hidden;
}

.icon-btn--solid:has(img.icon-img--hire):hover {
    background: transparent;
}

.icon-btn--solid img.icon-img--hire {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7.2px;
    height: 37.6px;
    border: none;
    border-radius: 5.6px;
    font-family: var(--font);
    font-size: 12.48px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    color: var(--white);
}

.btn:hover {
    opacity: 0.92;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn svg,
.btn img {
    width: 13.6px;
    height: 13.6px;
    object-fit: contain;
    flex-shrink: 0;
}

.btn--primary,
.btn--red {
    background: var(--red);
    color: var(--white);
    padding: 0 16px;
}

.btn--primary:hover,
.btn--red:hover {
    background: var(--accent-10);
    opacity: 1;
}

.btn--ghost {
    background: var(--card-05);
    color: var(--white-9);
    padding: 0 14.4px;
}

.btn--ghost:hover {
    background: var(--white-2);
    opacity: 1;
}

.btn--green {
    background: var(--green);
    color: var(--black);
    padding: 0 17.6px;
    font-weight: 600;
}

.btn--block {
    width: 100%;
}

.btn--sm {
    padding: 5.6px 10.4px;
    font-size: 10.88px;
    height: auto;
}

.empty-state {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 224px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 24px;
    box-sizing: border-box;
    text-align: center;
    color: var(--white-5);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
}

.empty-state__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--white-1);
    color: var(--white-4);
    flex-shrink: 0;
}

.empty-state__icon svg {
    width: 21.6px;
    height: 21.6px;
    display: block;
}

.empty-state__text {
    max-width: 320px;
}

.empty-hint,
.accusations-empty {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    color: var(--white-5);
    line-height: 1.35;
}

.sidecard__body > .empty-state,
.bank__extracts-body > .empty-state,
.vantagens-panel__body > .empty-state,
.announcement-panel > .empty-state {
    min-height: 128px;
}

.bank__chart > .empty-state {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: 20px;
}

.modal-root,
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black-8);
}

.modal-backdrop[hidden] {
    display: none !important;
}

.modal {
    width: 384px;
    max-width: 92vw;
    max-height: 85vh;
    background: var(--bg);
    border: none;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: none;
}

.modal-square,
.invite-card__head,
.invite-card__input,
.invite-card__btn,
.invite-card__body input,
.invite-card__body select,
.goals-card__head,
.goals-card__input,
.crimes-modal__head,
.crimes-modal__search {
    background: var(--white-1);
    border: none;
    border-radius: 5px;
    box-shadow: none;
}

.modal:has(.modal__header) {
    width: min(480px, 92vw);
    padding: 20px 21.6px;
    overflow-y: auto;
}

.modal--wide {
    width: 480px;
}

.modal--wide:has(.modal__header) {
    width: min(640px, 92vw);
}

.modal--crimes {
    width: 1001px;
    max-width: calc(100% - 32px);
    height: 500px;
    max-height: 85vh;
    padding: 20px;
    background: var(--bg);
    border: none;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14.4px 17.6px;
    border-bottom: none;
}

.modal__head--noborder {
    border-bottom: none;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17.6px;
}

.modal__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15.2px;
    font-weight: 600;
}

.modal__title svg {
    width: 16px;
    height: 16px;
    color: var(--red);
}

.modal__title img {
    width: 19px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

.modal__close {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--card-05);
    border-radius: 5.6px;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s ease, color 0.15s ease;
}

.modal__close svg,
.modal__close img {
    width: 13.6px;
    height: 13.6px;
}

.modal__close:hover {
    color: var(--white);
    background: var(--red-soft);
}

.modal__body {
    padding: 17.6px;
    display: flex;
    flex-direction: column;
    gap: 11.2px;
    max-height: 416px;
    overflow-y: auto;
}

.modal__body input,
.modal__body textarea {
    width: 100%;
    background: var(--card-05);
    border: none;
    border-radius: 6.4px;
    padding: 11.2px 14.4px;
    color: var(--white);
    font-size: 12.48px;
}

.modal__body textarea {
    resize: none;
    min-height: 80px;
}

.modal__body input::placeholder,
.modal__body textarea::placeholder {
    color: var(--muted-2);
}

.modal__text {
    font-size: 13.12px;
    color: var(--white-9);
    line-height: 1.45;
}

.modal__text b {
    color: var(--white);
    font-weight: 600;
}

.modal__text .hl {
    color: var(--red);
    font-weight: 600;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8.8px;
    margin-top: 4px;
}

.modal__actions .btn {
    flex: 1;
}

.form-group {
    margin-bottom: 13.6px;
}

.form-group label {
    display: block;
    font-size: 10.88px;
    color: var(--muted);
    margin-bottom: 5.6px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: var(--card-05);
    border: none;
    border-radius: 5.6px;
    color: var(--white);
    font-family: var(--font);
    font-size: 12.48px;
    padding: 9.6px 12px;
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.list-mini {
    display: flex;
    flex-direction: column;
    gap: 5.6px;
    max-height: 192px;
    overflow-y: auto;
}

.list-mini__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10.4px;
    background: var(--card-01);
    border-radius: 5.6px;
    font-size: 12px;
}

.modal--invite {
    width: 350px;
    min-height: 198px;
    padding: 20px;
    background: var(--bg);
    border: none;
    border-radius: 5px;
    box-shadow: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal--invite:has(.invite-card__body--crime) {
    min-height: 456px;
}

.invite-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 16px;
    flex-shrink: 0;
}

.invite-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
}

.invite-card__title svg {
    width: 19px;
    height: 14px;
    color: var(--red);
    flex-shrink: 0;
}

.invite-card__title img {
    width: 19px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    color: var(--red);
}

.invite-card__title img.invite-card__title-icon {
    width: 15px;
    height: 15px;
    filter: none;
}

.invite-card__title img.icon-img--hire-person,
.invite-card__title .icon-img--hire-person {
    width: 19px;
    height: 14px;
    aspect-ratio: 19 / 14;
    color: var(--red);
}

.invite-card__close {
    background: none;
    border: none;
    color: var(--white-5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.2px;
    flex-shrink: 0;
}

.invite-card__close svg,
.invite-card__close img {
    width: 12px;
    height: 14px;
}

.invite-card__close:hover {
    color: var(--white);
}

.invite-card__input {
    width: 100%;
    height: 55px;
    padding: 0 16px;
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    flex-shrink: 0;
}

.invite-card__input::placeholder {
    color: var(--white-4);
}

.invite-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invite-card__body .form-group {
    margin-bottom: 0;
}

.invite-card__body .form-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.invite-card__body input,
.invite-card__body select {
    width: 100%;
    height: 45px;
    padding: 0 16px;
    color: var(--white);
    font-size: 12px;
}

.invite-card__body input::placeholder {
    color: var(--white-4);
}

.invite-card__btn {
    width: 100%;
    height: 38px;
    color: var(--white-4);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.invite-card__btn:not(:disabled) {
    background: var(--red);
    color: var(--white);
}

.invite-card__btn:not(:disabled):hover {
    background: var(--accent-10);
}

.invite-card__btn:disabled {
    cursor: default;
}

.invite-preview {
    display: none;
    align-items: center;
    gap: 11.2px;
    min-height: 44px;
    padding: 7.2px 13.6px;
    border-radius: 5px;
    background: var(--white-1);
    border: none;
    box-shadow: none;
}

.invite-preview.is-visible {
    display: flex;
}

.invite-preview__avatar {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--card-01);
}

.invite-preview__info {
    display: flex;
    flex-direction: column;
    gap: 1.6px;
    min-width: 0;
}

.invite-preview__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invite-preview__id {
    font-size: 10.4px;
    color: var(--white-5);
}

.invite-status {
    display: none;
    font-size: 11.2px;
    color: var(--white-5);
    padding: 0 2.4px;
}

.invite-status.is-visible {
    display: block;
}

.invite-status--error {
    color: var(--red);
}

.tablet-notify-host {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    padding: 28px 24px 24px;
}

.tablet-notify {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    min-width: 256px;
    max-width: min(384px, 90%);
    background: var(--bg-2);
    border: 0.96px solid var(--white-1);
    border-radius: 6px;
    box-shadow: 0 12px 28px var(--black-7);
    opacity: 0;
    transform: translateY(5.6px) scale(0.98);
    transition: opacity 0.16s ease, transform 0.16s ease;
    cursor: pointer;
    overflow: hidden;
}

.tablet-notify.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tablet-notify__bar {
    width: 3.2px;
    flex-shrink: 0;
    background: var(--white-4);
}

.tablet-notify--success .tablet-notify__bar {
    background: var(--green);
}

.tablet-notify--error .tablet-notify__bar {
    background: var(--red);
}

.tablet-notify--warn .tablet-notify__bar {
    background: var(--warning-10);
}

.tablet-notify--info .tablet-notify__bar {
    background: var(--info-10);
}

.tablet-notify__body {
    display: flex;
    flex-direction: column;
    gap: 2.4px;
    padding: 12px 15.2px;
    min-width: 0;
    text-align: left;
}

.tablet-notify__title {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.25;
}

.tablet-notify__msg {
    font-size: 11.2px;
    font-weight: 400;
    color: var(--white-7);
    line-height: 1.35;
}

.page-toolbar {
    width: 100%;
    max-width: 100%;
}

.page-toolbar--units {
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white-1);
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 5px;
    padding: 0 12px;
    height: 38px;
    width: 260px;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.search-field:focus,
.search-field:focus-within {
    border: none;
    outline: none;
    box-shadow: none;
}

.search-field--full,
.search-field--units {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
}

.search-field--full {
    width: 100%;
}

.search-field--units {
    height: 38px;
    background: var(--white-1);
    border: none;
}

.search-field--units input {
    width: 100%;
}

.search__icon-wrap {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 0;
}

.search-field img,
.search-field img.search__icon,
.search-field svg.search__icon,
.search__icon-wrap svg,
.search__icon-wrap img.search__icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px;
    min-height: 12px;
    max-width: 12px;
    max-height: 12px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    opacity: 0.55;
    flex-shrink: 0;
    display: block;
    color: var(--white-7);
}

.search-field input {
    flex: 1;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    min-width: 0;
}

.search-field input:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.search-field input::placeholder {
    color: var(--text-dim);
}

.search-field--manage {
    width: 260px;
    height: 38px;
    padding: 0 12px;
    background: var(--white-1);
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 5px;
}

.search-field--manage .search__icon-wrap {
    width: 12px;
    height: 12px;
}

.search-field--manage img,
.search-field--manage img.search__icon,
.search-field--manage svg.search__icon,
.search-field--manage .search__icon-wrap svg {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px;
    min-height: 12px;
    max-width: 12px;
    max-height: 12px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    opacity: 0.55;
    color: var(--white-7);
}

.search-field--manage input {
    font-size: 12px;
}

.search-field--manage input::placeholder {
    color: var(--text-dim);
}

.page-toolbar--units .btn--add,
.page-toolbar--units .btn--hire {
    flex-shrink: 0;
}

.toolbar--members,
.toolbar--logs,
.toolbar--compact,
.toolbar--end,
.toolbar--consult,
.split__main > .toolbar {
    width: 100%;
    max-width: 100%;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
}

.toolbar--compact .search,
.toolbar--end .search,
.toolbar--consult .search,
.toolbar--members .search,
.toolbar--logs .search,
.split__main > .toolbar .search {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
}

.search--sm,
.search--logs {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
}

.search--sm input,
.search--logs input {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    border-radius: 5px;
    font-size: 12px;
    padding: 0 12px 0 32px;
}

.search--sm .search__icon,
.search--sm img.search__icon,
.search--logs .search__icon,
.search--logs img.search__icon {
    width: 12px;
    height: 12px;
    left: 10px;
}

.toolbar--members .icon-btn,
.toolbar--logs .dropdown,
.toolbar--logs .icon-btn {
    flex-shrink: 0;
}

.toolbar--members .icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 5px;
}

.toolbar--logs .icon-btn--filter {
    color: var(--red);
}

.toolbar--logs .icon-btn--filter:hover {
    color: var(--white);
}

.toolbar--logs .icon-btn--filter svg,
.toolbar--logs .icon-btn--filter img {
    width: 16px;
    height: 16px;
}

.dot,
.status-dot {
    width: 11px;
    height: 11px;
    min-width: 11px;
    min-height: 11px;
    max-width: 11px;
    max-height: 11px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    box-shadow: none;
}

.dot--on,
.status-dot--online {
    background: var(--green);
    box-shadow: 0 0 6.4px var(--success-7);
}

.dot--service,
.status-dot--service {
    background: var(--info);
    box-shadow: 0 0 6.4px var(--info-7);
}

.dot--afk,
.status-dot--idle {
    background: var(--yellow);
}

.dot--off,
.status-dot--offline {
    background: var(--white-5);
}

.status-txt {
    font-size: 10.88px;
    color: var(--muted);
}

.c-status,
.cell-status {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-status.tip,
.c-status.tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.tip {
    position: relative;
}

.tip:hover {
    z-index: 400;
}

.tip:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7.2px);
    transform: translateX(-50%);
    background: var(--bg);
    color: var(--white);
    font-size: 8.96px;
    font-weight: 500;
    padding: 8.8px 11.2px;
    border-radius: 4.8px;
    white-space: nowrap;
    z-index: 401;
    pointer-events: none;
    box-shadow: 0 6.4px 16px var(--black-6);
}

.tip:hover::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3.2px);
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--bg);
    z-index: 401;
}

.table {
    width: 100%;
}

.tablewrap {
    flex: 1;
    min-height: 0;
    background: transparent;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.table__head,
.table__row {
    display: grid;
    align-items: center;
    column-gap: 0;
    box-sizing: border-box;
}

.table__head {
    height: 36px;
    margin: 0;
    padding: 0 10px;
    background: var(--white-1);
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.table__head span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    padding: 0;
}

.table__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 7.2px 10px 10.4px;
    display: flex;
    flex-direction: column;
    gap: 7.2px;
    position: relative;
    z-index: 2;
}

.table__row {
    min-height: 46px;
    padding: 0;
    border-radius: 5px;
    background: var(--card-01);
    font-size: 14px;
    font-weight: 400;
    color: var(--white-3);
    transition: background 0.12s ease, color 0.12s ease;
    overflow: visible;
    position: relative;
}

.table__row.is-online,
.table__row.is-active {
    background: var(--white-1);
    color: var(--white);
}

.table__row .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding: 0;
}

.table__row .cell.tip,
.table__row .cell.c-status,
.table-row .cell.tip,
.table-row .cell.c-status {
    overflow: visible;
}

.table__row:has(.tip:hover),
.table-row:has(.tip:hover) {
    z-index: 400;
    overflow: visible;
}

.tablewrap:has(.tip:hover) .table__head,
.table-wrap:has(.tip:hover) .table-head {
    position: relative;
    z-index: 0;
}

.tablewrap:has(.tip:hover) .table__body,
.table-wrap:has(.tip:hover) .table-body,
.table-wrap:has(.tip:hover) .table-body--manage {
    position: relative;
    z-index: 20;
}

.row-act {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: none;
    background: var(--white-1);
    color: var(--white-7);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.row-act svg,
.row-act img {
    width: 11px;
    height: auto;
}

.row-act:hover {
    color: var(--white);
    background: var(--red-soft);
}

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 63px;
    height: 23px;
    padding: 0 8.8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    border: none;
    box-shadow: inset 0 0 0 0.96px transparent;
    box-sizing: border-box;
    white-space: nowrap;
    text-transform: none;
}

.tag--high {
    background: var(--success-3);
    box-shadow: inset 0 0 0 0.96px var(--success-4);
    color: var(--success-10);
}

.tag--medium {
    background: var(--warning-4);
    box-shadow: inset 0 0 0 0.96px var(--warning-4);
    color: var(--warning-10);
}

.tag--low {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 0.96px var(--accent-4);
    color: var(--accent);
}