:root { --admin-sidebar-width: 248px; --admin-sidebar-collapsed-width: 68px; --admin-sidebar-bg: #172033; --admin-sidebar-text: #c9d3e3; --admin-sidebar-active: #2e73d2; }
.admin-body { min-height: 100vh; background: #f4f6f8; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: var(--admin-sidebar-width); background: var(--admin-sidebar-bg); color: var(--admin-sidebar-text); box-shadow: 2px 0 12px rgb(23 32 51 / 12%); transition: width .2s ease; }
.admin-sidebar.is-collapsed { width: var(--admin-sidebar-collapsed-width); }
.admin-sidebar__brand { display: flex; align-items: center; min-height: 64px; padding: 0 12px; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.admin-brand { display: flex; flex: 1; align-items: center; gap: 10px; color: #fff; font-weight: 750; text-decoration: none; overflow: hidden; white-space: nowrap; }
.admin-brand__icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 8px; background: #2e73d2; }
.admin-brand__icon svg, .admin-nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-toggle { width: 28px; height: 28px; padding: 0; border: 1px solid rgb(255 255 255 / 18%); border-radius: 7px; background: transparent; color: #fff; }
.admin-navigation { display: grid; gap: 4px; padding: 14px 10px; overflow-y: auto; }
.admin-nav-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 8px; color: var(--admin-sidebar-text); text-decoration: none; white-space: nowrap; }
.admin-nav-link:hover, .admin-nav-link:focus-visible { background: rgb(255 255 255 / 10%); color: #fff; outline: none; }
.admin-nav-link.is-active { background: var(--admin-sidebar-active); color: #fff; font-weight: 700; }
.admin-nav-icon { display: grid; width: 20px; flex: 0 0 20px; place-items: center; font-size: 18px; }
.admin-sidebar__account-actions { margin-top: auto; padding: 12px 10px; border-top: 1px solid rgb(255 255 255 / 10%); }
.admin-password-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; margin-bottom: 8px; background: #e9eef4; color: #263646; }
.admin-password-button:hover, .admin-password-button:focus-visible { background: #e9eef4; color: #263646; }
.admin-sidebar__logout { margin: 0; }
.admin-sidebar__logout button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; }
[v-cloak] { display: none !important; }
.admin-sidebar.is-collapsed .admin-brand__text, .admin-sidebar.is-collapsed .admin-nav-text { display: none; }
.admin-sidebar.is-collapsed .admin-sidebar__brand { padding: 8px; flex-direction: column; gap: 8px; }
.admin-sidebar.is-collapsed .admin-brand, .admin-sidebar.is-collapsed .admin-nav-link { justify-content: center; padding-inline: 0; }
.admin-shell--with-sidebar { width: calc(100% - var(--admin-sidebar-width) - 3rem); max-width: none; margin-left: calc(var(--admin-sidebar-width) + 1.5rem); margin-right: 1.5rem; transition: margin-left .2s ease, width .2s ease; }
.admin-sidebar.is-collapsed ~ .admin-shell--with-sidebar { width: calc(100% - var(--admin-sidebar-collapsed-width) - 3rem); margin-left: calc(var(--admin-sidebar-collapsed-width) + 1.5rem); }
.admin-shell--with-sidebar .panel, .admin-shell--with-sidebar .console-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
.admin-table-scroll { width: 100%; min-width: 0; max-width: 100%; max-height: min(62vh, 680px); overflow: auto; }
.admin-table-scroll .el-table { width: 100%; min-width: 0; }
.console-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.chats-table-card .el-card__body { padding: 14px; }
.chat-remark-form { display: block; margin: 0; }
.chat-remark-form .el-form-item, .chat-remark-form .el-select, .chat-remark-form .el-textarea { width: 100%; }
.chat-remark-form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.console-help { color: #667085; font-size: 13px; }
.admin-pagination { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; margin-top: 12px; flex-wrap: wrap; background: #fff; }
#admin-console .el-pagination { flex-wrap: wrap; }
#admin-console .el-form { margin-top: 20px; }
@media (max-width: 760px) { .admin-sidebar { width: var(--admin-sidebar-collapsed-width); } .admin-sidebar .admin-brand__text, .admin-sidebar .admin-nav-text, .admin-sidebar .sidebar-toggle { display: none; } .admin-sidebar .admin-brand, .admin-sidebar .admin-nav-link { justify-content: center; padding-inline: 0; } .admin-shell--with-sidebar, .admin-sidebar.is-collapsed ~ .admin-shell--with-sidebar { width: calc(100% - var(--admin-sidebar-collapsed-width) - 1.25rem); margin-left: calc(var(--admin-sidebar-collapsed-width) + .75rem); margin-right: .5rem; } }