/*!
 * Shibuya OS — Components.css
 * 通用玻璃组件：按钮 / 输入 / 卡片 / 徽章 / 对话框 / 空态 / 表单兼容层 /
 * 平台组件(toastr·layer·bootstrap-table·layui)玻璃化补丁。
 */

/* hidden 属性恢复原生语义：flex/grid 布局类不得压过它 */
html.sb-root [hidden] { display: none !important; }

/* ---------------- 按钮 ---------------- */
.sb-btn {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--sb-edge);
    background: var(--sb-field);
    color: var(--sb-text);
    font: 600 13px/1 var(--sb-font);
    border-radius: var(--sb-r-ctrl);
    height: 38px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    box-shadow: var(--sb-specular-soft);
    transition: all var(--sb-t-fast) var(--sb-ease);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}
.sb-btn:hover { background: var(--sb-field-focus); }
.sb-btn:active { transform: scale(.97); }
.sb-btn:disabled, .sb-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.sb-btn .material-icons-outlined { font-size: 18px; }
.sb-btn--primary {
    background: linear-gradient(160deg, rgba(var(--sb-accent-rgb), 1) 0%, var(--sb-accent-strong) 100%);
    border-color: rgba(var(--sb-accent-rgb), .6);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px -4px rgba(var(--sb-accent-rgb), .6);
}
.sb-btn--primary:hover { background: linear-gradient(160deg, rgba(var(--sb-accent-rgb), .92) 0%, var(--sb-accent-strong) 100%); filter: brightness(1.06); }
.sb-btn--danger { background: var(--sb-danger-soft); border-color: rgba(229, 72, 77, .3); color: var(--sb-danger); }
.sb-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.sb-btn--ghost:hover { background: var(--sb-hover); }
.sb-btn--lg { height: 46px; padding: 0 26px; font-size: 14px; border-radius: 12px; }
.sb-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.sb-btn--block { width: 100%; }
.sb-btn.is-loading { pointer-events: none; }

.sb-iconbtn {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    color: var(--sb-text-2);
    cursor: pointer;
    transition: background var(--sb-t-fast) var(--sb-ease), color var(--sb-t-fast) var(--sb-ease);
}
.sb-iconbtn:hover { background: var(--sb-hover); color: var(--sb-text); }
.sb-iconbtn .material-icons-outlined { font-size: 19px; }

.sb-textlink {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--sb-link);
    font: 12.5px var(--sb-font);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sb-textlink:hover { text-decoration: underline; }

/* ---------------- 输入 ---------------- */
.sb-field { display: flex; flex-direction: column; gap: 7px; }
.sb-field > span, .sb-field > label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sb-text-2);
    display: flex;
    align-items: center;
    gap: 5px;
}
.sb-input, .sb-appwin .form-control, .sb-appwin select.form-control, .sb-appwin textarea.form-control,
.sb-appwin .layui-input, .sb-appwin .layui-textarea, .sb-appwin .layui-select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--sb-outline);
    background: var(--sb-field);
    color: var(--sb-text);
    font: 13.5px var(--sb-font);
    border-radius: var(--sb-r-ctrl);
    height: 40px;
    padding: 0 13px;
    transition: all var(--sb-t-fast) var(--sb-ease);
    box-shadow: var(--sb-specular-soft);
}
.sb-appwin textarea.form-control, .sb-appwin .layui-textarea, textarea.sb-input { height: auto; min-height: 92px; padding: 10px 13px; line-height: 1.6; resize: vertical; }
.sb-input:hover, .sb-appwin .form-control:hover, .sb-appwin .layui-input:hover { border-color: var(--sb-text-3); }
.sb-input:focus, .sb-appwin .form-control:focus, .sb-appwin .layui-input:focus, .sb-appwin .layui-textarea:focus {
    background: var(--sb-field-focus);
    border-color: rgba(var(--sb-accent-rgb), .7);
    box-shadow: var(--sb-specular-soft), 0 0 0 3px rgba(var(--sb-accent-rgb), .16);
    outline: none;
}
.sb-input::placeholder, .sb-appwin .form-control::placeholder, .sb-appwin .layui-input::placeholder { color: var(--sb-text-3); }
.sb-input[aria-invalid="true"], .sb-appwin .form-control[aria-invalid="true"] { border-color: var(--sb-danger); }
.sb-appwin select.form-control, select.sb-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23888ea8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}
.sb-field-error { color: var(--sb-danger); font-size: 12px; }
.sb-hint { font-size: 12px; color: var(--sb-text-3); display: flex; align-items: center; gap: 5px; }
.sb-hint .material-icons-outlined { font-size: 15px; }

.sb-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--sb-text-2); user-select: none; }
.sb-check input {
    -webkit-appearance: none;
    appearance: none;
    width: 17px; height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--sb-outline);
    background: var(--sb-field);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all var(--sb-t-fast) var(--sb-ease);
    margin: 0;
    flex: none;
}
.sb-check input:checked { background: var(--sb-accent); border-color: var(--sb-accent); }
.sb-check input:checked::after {
    content: "";
    width: 9px; height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

/* 带操作的输入（密码可见切换等） */
.sb-input-wrap { position: relative; display: flex; align-items: center; }
.sb-input-wrap .sb-input { padding-right: 42px; }
.sb-input-wrap .sb-input-action {
    position: absolute;
    right: 5px;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--sb-text-3);
    cursor: pointer;
}
.sb-input-wrap .sb-input-action:hover { background: var(--sb-hover); color: var(--sb-text); }
.sb-input-wrap .sb-input-action .material-icons-outlined { font-size: 18px; }

/* 图形验证码行 */
.sb-captcha { display: flex; gap: 10px; align-items: stretch; }
.sb-captcha .sb-input { flex: 1; }
.sb-captcha img {
    height: 40px;
    border-radius: var(--sb-r-ctrl);
    border: 1px solid var(--sb-outline);
    cursor: pointer;
    background: #fff;
}

/* 数量步进器 */
.sb-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--sb-outline);
    border-radius: var(--sb-r-ctrl);
    background: var(--sb-field);
    box-shadow: var(--sb-specular-soft);
    overflow: hidden;
    height: 40px;
}
.sb-stepper button {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    width: 40px;
    display: grid;
    place-items: center;
    color: var(--sb-text-2);
    cursor: pointer;
    transition: background var(--sb-t-fast) var(--sb-ease);
}
.sb-stepper button:hover:not(:disabled) { background: var(--sb-hover); color: var(--sb-text); }
.sb-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.sb-stepper button .material-icons-outlined { font-size: 18px; }
.sb-stepper input {
    width: 64px;
    border: none;
    background: transparent;
    text-align: center;
    font: 600 14px var(--sb-font);
    color: var(--sb-text);
    outline: none;
    -moz-appearance: textfield;
    border-left: 1px solid var(--sb-divider);
    border-right: 1px solid var(--sb-divider);
}
.sb-stepper input::-webkit-outer-spin-button, .sb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------- 卡片与面板 ---------------- */
.sb-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-edge);
    border-radius: var(--sb-r-card);
    box-shadow: var(--sb-specular-soft), var(--sb-shadow-card);
}
.sb-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px 0;
}
.sb-card__head .material-icons-outlined { color: var(--sb-accent); font-size: 21px; }
.sb-card__head strong { font-size: 14.5px; font-weight: 700; }
.sb-card__head small { font-size: 12px; color: var(--sb-text-2); margin-left: auto; }
.sb-card__body { padding: 16px 18px 18px; }

/* ---------------- 徽章 ---------------- */
.sb-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 21px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    background: var(--sb-hover);
    color: var(--sb-text-2);
}
.sb-chip .material-icons-outlined { font-size: 13px; }
.sb-chip--ok { background: var(--sb-ok-soft); color: var(--sb-ok); }
.sb-chip--warn { background: var(--sb-warn-soft); color: var(--sb-warn); }
.sb-chip--danger { background: var(--sb-danger-soft); color: var(--sb-danger); }
.sb-chip--info { background: var(--sb-info-soft); color: var(--sb-info); }
.sb-chip--accent { background: var(--sb-accent-soft); color: var(--sb-accent-strong); }
:root[data-theme="dark"] .sb-chip--accent { color: #b8d8ff; }
.sb-chip--seckill { background: linear-gradient(120deg, rgba(255,90,60,.16), rgba(255,60,130,.16)); color: #ff5a3c; }

/* ---------------- 状态 / 空态 ---------------- */
.sb-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 44px 22px;
    text-align: center;
    color: var(--sb-text-2);
}
.sb-state .material-icons-outlined { font-size: 44px; color: var(--sb-text-3); }
.sb-state strong { font-size: 14px; color: var(--sb-text); font-weight: 600; }
.sb-state p { margin: 0; font-size: 12.5px; max-width: 340px; line-height: 1.7; }

/* 骨架屏 */
.sb-skeleton { position: relative; overflow: hidden; background: var(--sb-hover); border-radius: 10px; }
.sb-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
    animation: sb-shimmer 1.5s infinite;
    transform: translateX(-100%);
}
:root[data-theme="dark"] .sb-skeleton::after { background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%); }
@keyframes sb-shimmer { to { transform: translateX(100%); } }

/* ---------------- 玻璃对话框（主题自绘） ---------------- */
.sb-dialog {
    border: 1px solid var(--sb-edge);
    border-radius: var(--sb-r-panel);
    background: var(--sb-glass-menu);
    backdrop-filter: var(--sb-backdrop-heavy);
    -webkit-backdrop-filter: var(--sb-backdrop-heavy);
    box-shadow: var(--sb-specular), var(--sb-shadow-menu);
    color: var(--sb-text);
    padding: 0;
    max-width: min(92vw, 480px);
    width: 100%;
    animation: sb-menu-in var(--sb-t-slow) var(--sb-spring) both;
}
.sb-dialog::backdrop { background: rgba(8, 12, 26, .4); backdrop-filter: blur(3px); }
.sb-dialog__head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; }
.sb-dialog__head .material-icons-outlined { color: var(--sb-accent); }
.sb-dialog__head strong { font-size: 15px; flex: 1; }
.sb-dialog__body { padding: 14px 20px 4px; font-size: 13.5px; line-height: 1.7; color: var(--sb-text-2); user-select: text; }
.sb-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px 20px; }

/* 卡密/秘密文本块 */
.sb-secret {
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-divider);
    border-radius: 10px;
    padding: 12px 14px;
    font: 12.5px/1.8 var(--sb-font-mono);
    color: var(--sb-text);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 240px;
    overflow: auto;
    user-select: text;
}

/* =========================================================
   平台组件玻璃化补丁
   ========================================================= */
/* toastr → 玻璃通知 */
html.sb-root #toast-container > div {
    border-radius: 13px !important;
    background-color: var(--sb-glass-menu) !important;
    backdrop-filter: var(--sb-backdrop);
    -webkit-backdrop-filter: var(--sb-backdrop);
    color: var(--sb-text) !important;
    box-shadow: var(--sb-specular-soft), var(--sb-shadow-menu) !important;
    border: 1px solid var(--sb-edge) !important;
    opacity: 1 !important;
    padding: 14px 16px 14px 48px !important;
    font-family: var(--sb-font) !important;
}
html.sb-root #toast-container > .toast-success { background-image: none !important; }
html.sb-root #toast-container > .toast-error { background-image: none !important; }
html.sb-root #toast-container > .toast-info { background-image: none !important; }
html.sb-root #toast-container > .toast-warning { background-image: none !important; }
html.sb-root #toast-container > div::before {
    font-family: "Material Icons Outlined";
    font-size: 21px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}
html.sb-root #toast-container > .toast-success::before { content: "check_circle"; color: var(--sb-ok); }
html.sb-root #toast-container > .toast-error::before { content: "error_outline"; color: var(--sb-danger); }
html.sb-root #toast-container > .toast-info::before { content: "info"; color: var(--sb-info); }
html.sb-root #toast-container > .toast-warning::before { content: "warning_amber"; color: var(--sb-warn); }
html.sb-root .toast-message { font-size: 13px; }

/* layer 弹层 → 玻璃 */
html.sb-root .layui-layer {
    border-radius: var(--sb-r-panel) !important;
    background: var(--sb-glass-menu) !important;
    backdrop-filter: var(--sb-backdrop-heavy);
    -webkit-backdrop-filter: var(--sb-backdrop-heavy);
    box-shadow: var(--sb-specular-soft), var(--sb-shadow-menu) !important;
    border: 1px solid var(--sb-edge);
    color: var(--sb-text);
    overflow: hidden;
}
html.sb-root .layui-layer-title {
    background: transparent !important;
    border-bottom: 1px solid var(--sb-divider) !important;
    color: var(--sb-text) !important;
    font: 600 14px var(--sb-font) !important;
    height: 48px !important;
    line-height: 48px !important;
    padding-left: 18px !important;
    border-radius: var(--sb-r-panel) var(--sb-r-panel) 0 0 !important;
}
html.sb-root .layui-layer-content { color: var(--sb-text); }
html.sb-root .layui-layer-btn {
    border-top: 1px solid var(--sb-divider);
    padding: 12px 16px !important;
    background: transparent !important;
}
html.sb-root .layui-layer-btn a {
    border-radius: var(--sb-r-ctrl) !important;
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 18px;
    font-weight: 600;
    font-family: var(--sb-font);
    transition: all var(--sb-t-fast) var(--sb-ease);
}
html.sb-root .layui-layer-btn .layui-layer-btn0 {
    background: var(--sb-accent) !important;
    border-color: var(--sb-accent) !important;
    color: #fff !important;
}
html.sb-root .layui-layer-btn a:not(.layui-layer-btn0) {
    background: var(--sb-field) !important;
    border: 1px solid var(--sb-outline) !important;
    color: var(--sb-text) !important;
}
html.sb-root .layui-layer-setwin .layui-layer-close1, html.sb-root .layui-layer-setwin .layui-layer-close2 { filter: grayscale(1); opacity: .6; }
html.sb-root .layui-layer-shade { background-color: rgba(8, 12, 26, .45) !important; opacity: 1 !important; backdrop-filter: blur(2px); }

/* sweetalert2(message.prompt 人机验证) → 玻璃 */
html.sb-root .swal2-popup {
    border-radius: var(--sb-r-panel) !important;
    background: var(--sb-glass-menu) !important;
    backdrop-filter: var(--sb-backdrop-heavy);
    -webkit-backdrop-filter: var(--sb-backdrop-heavy);
    box-shadow: var(--sb-specular-soft), var(--sb-shadow-menu) !important;
    border: 1px solid var(--sb-edge);
    color: var(--sb-text) !important;
    font-family: var(--sb-font) !important;
}
html.sb-root .swal2-title { color: var(--sb-text) !important; font-size: 17px !important; }
html.sb-root .swal2-html-container { color: var(--sb-text-2) !important; }
html.sb-root .swal2-input {
    border-radius: var(--sb-r-ctrl) !important;
    border: 1px solid var(--sb-outline) !important;
    background: var(--sb-field) !important;
    color: var(--sb-text) !important;
    box-shadow: var(--sb-specular-soft) !important;
    font-family: var(--sb-font) !important;
}
html.sb-root .swal2-input:focus { border-color: rgba(var(--sb-accent-rgb), .7) !important; box-shadow: 0 0 0 3px rgba(var(--sb-accent-rgb), .16) !important; }
html.sb-root .swal2-confirm {
    background: var(--sb-accent) !important;
    border-radius: var(--sb-r-ctrl) !important;
    font-weight: 600;
    box-shadow: 0 4px 14px -4px rgba(var(--sb-accent-rgb), .6) !important;
}
html.sb-root .swal2-cancel { border-radius: var(--sb-r-ctrl) !important; }
html.sb-root .prompt-image-code { border-radius: 10px; border: 1px solid var(--sb-divider); }

/* bootstrap-table / 平台表格容器：md-components 已按 --md-* 上色，这里补玻璃感 */
html.sb-root .bootstrap-table .fixed-table-container {
    border-radius: var(--sb-r-card);
    border: 1px solid var(--sb-divider);
    background: var(--sb-surface-2);
}
html.sb-root .bootstrap-table { font-family: var(--sb-font); }
html.sb-root .fixed-table-body { border-radius: 0 0 var(--sb-r-card) var(--sb-r-card); }
html.sb-root .bootstrap-table .table thead th { background: transparent; color: var(--sb-text-2); font-size: 12px; }
html.sb-root .bootstrap-table .table { color: var(--sb-text); }
html.sb-root .fixed-table-toolbar .search input { border-radius: var(--sb-r-ctrl); }
html.sb-root .page-item.active .page-link { background: var(--sb-accent) !important; border-color: var(--sb-accent) !important; }

/* layui form 内嵌（switch/radio 等由 md-components 上色；对齐字体） */
html.sb-root .layui-form, html.sb-root .layui-form-label { font-family: var(--sb-font); color: var(--sb-text); }
html.sb-root .layui-form-select dl { border-radius: var(--sb-r-menu); background: var(--sb-surface-2); border: 1px solid var(--sb-edge); box-shadow: var(--sb-shadow-menu); }
html.sb-root .layui-form-select dl dd { color: var(--sb-text); }
html.sb-root .layui-form-select dl dd.layui-this { background: var(--sb-accent-soft); color: var(--sb-accent-strong); }

/* select2 */
html.sb-root .select2-container--default .select2-selection--single {
    border-radius: var(--sb-r-ctrl);
    border: 1px solid var(--sb-outline);
    background: var(--sb-field);
}
html.sb-root .select2-dropdown { border-radius: var(--sb-r-menu); background: var(--sb-surface-2); border: 1px solid var(--sb-edge); box-shadow: var(--sb-shadow-menu); color: var(--sb-text); }

/* bootstrap-table 分页条 */
html.sb-root .fixed-table-pagination { color: var(--sb-text-2); font-size: 12.5px; }
html.sb-root .fixed-table-pagination .page-list .btn-group .btn {
    border-radius: var(--sb-r-ctrl);
    border: 1px solid var(--sb-outline);
    background: var(--sb-field);
    color: var(--sb-text);
    font: 600 12px var(--sb-font);
    padding: 4px 10px;
    box-shadow: var(--sb-specular-soft);
}
html.sb-root .fixed-table-pagination .page-list .dropdown-menu {
    min-width: 72px;
    border-radius: var(--sb-r-menu);
    border: 1px solid var(--sb-edge);
    background: var(--sb-glass-menu);
    backdrop-filter: var(--sb-backdrop);
    -webkit-backdrop-filter: var(--sb-backdrop);
    box-shadow: var(--sb-specular-soft), var(--sb-shadow-menu);
    padding: 5px;
    overflow: hidden;
}
html.sb-root .fixed-table-pagination .page-list .dropdown-menu .dropdown-item,
html.sb-root .fixed-table-pagination .page-list .dropdown-menu a {
    display: block;
    border-radius: 7px;
    padding: 6px 12px;
    font: 12.5px var(--sb-font);
    color: var(--sb-text);
    text-decoration: none;
    cursor: pointer;
}
html.sb-root .fixed-table-pagination .page-list .dropdown-menu .dropdown-item:hover,
html.sb-root .fixed-table-pagination .page-list .dropdown-menu a:hover { background: var(--sb-hover); }
html.sb-root .fixed-table-pagination .page-list .dropdown-menu .active a,
html.sb-root .fixed-table-pagination .page-list .dropdown-menu .dropdown-item.active { background: var(--sb-accent-soft); color: var(--sb-accent-strong); }
html.sb-root .fixed-table-pagination .pagination .page-link {
    border-radius: 9px !important;
    margin: 0 2px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sb-text-2);
    font: 600 12.5px var(--sb-font);
    min-width: 30px;
    text-align: center;
    box-shadow: none;
}
html.sb-root .fixed-table-pagination .pagination .page-link:hover { background: var(--sb-hover); color: var(--sb-text); }
html.sb-root .fixed-table-pagination .pagination .page-item.active .page-link {
    background: var(--sb-accent) !important;
    border-color: var(--sb-accent) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px -3px rgba(var(--sb-accent-rgb), .6);
}

/* net-loading（平台全局转圈） */
html.sb-root .net-loading { position: fixed; inset: 0; z-index: 5000; display: none; }