/* === TSP technical support system custom styles === */

/* 全局 */
body {
    background: #f5f6fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
}

.market-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.12rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 4px;
    color: #fff;
    background: rgba(0, 0, 0, 0.16);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.market-badge-light {
    border-color: #c9ced5;
    color: #343a40;
    background: #fff;
    font-size: 0.78rem;
}

/* KPI数字 */
.kpi-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.kpi-label {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kpi-card {
    transition: transform 0.15s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
}

/* 状态色强化 */
.badge-status-open { background: #ffc107; color: #212529; }
.badge-status-processing { background: #0d6efd; }
.badge-status-replied { background: #6f42c1; }
.badge-status-resolved { background: #198754; }
.badge-status-closed { background: #6c757d; }

/* 消息时间线 */
.timeline {
    position: relative;
    padding-left: 40px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}
.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}
.timeline-avatar {
    position: absolute;
    left: -40px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    z-index: 1;
}
.timeline-avatar.dealer { background: #0d6efd; color: white; }
.timeline-avatar.support { background: #198754; color: white; }
.timeline-avatar.system { background: #6c757d; color: white; }

/* 内部备注 */
.internal-note {
    background: #fff9c4;
    border-left: 4px solid #ffc107;
}

/* 文件预览网格 */
.file-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.file-preview-item {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f8f9fa;
}
.file-preview-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.file-preview-item .file-icon {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #6c757d;
}
.file-preview-item .file-name {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-preview-item .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* 表格行悬停 */
.table-hover tbody tr {
    cursor: pointer;
}
.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05) !important;
}

/* 移动端表格替代 */
.ticket-mobile-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: white;
    transition: box-shadow 0.15s ease;
}
.ticket-mobile-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ticket-mobile-card a {
    text-decoration: none;
    color: inherit;
}

/* 上传区 */
.upload-zone {
    border: 2px dashed #0d6efd;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    background: #f0f7ff;
    cursor: pointer;
    transition: all 0.2s ease;
}
.upload-zone:hover, .upload-zone.drag-over {
    border-color: #0a58ca;
    background: #d9eeff;
}
.upload-zone i {
    font-size: 2.5rem;
    color: #0d6efd;
}
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.preview-item {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}
.preview-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.preview-item .file-icon {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    font-size: 2rem;
    color: #6c757d;
}
.preview-item .file-info {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preview-item .btn-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.upload-progress {
    margin-top: 0.75rem;
}

/* 后台长表滚动区 */
.admin-scroll-panel {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.admin-scroll-panel thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 响应式表格 */
@media (max-width: 767px) {
    .kpi-number {
        font-size: 1.5rem;
    }
    .card-body {
        padding: 0.75rem;
    }
    .nav-tabs {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .nav-tabs .nav-item {
        width: 100%;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        width: 100%;
        justify-content: center;
    }
    .mobile-stack {
        width: 100%;
    }
    .mobile-stack > * {
        width: 100%;
    }
    .mobile-stack .btn,
    .mobile-stack .form-control,
    .mobile-stack .form-select {
        width: 100%;
    }
    .urgency-radio {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .urgency-radio .form-check {
        min-height: 2.75rem;
        padding: 0.75rem 0.85rem;
        margin: 0;
    }
    .urgency-radio .form-check span {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
    }
    .btn-toolbar,
    .d-flex.flex-wrap.gap-2,
    .d-flex.gap-2.flex-wrap {
        row-gap: 0.5rem;
    }
    main > .d-flex.flex-wrap.justify-content-between > .btn,
    main > .d-flex.flex-wrap.justify-content-between > a.btn {
        width: 100%;
    }
    form > .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }
    form > .d-flex.justify-content-between.align-items-center > .d-flex {
        width: 100%;
        flex-direction: column;
    }
    form > .d-flex.justify-content-between.align-items-center .btn {
        width: 100%;
    }
    .table-responsive-stack td {
        display: block;
        border: none;
    }
    .upload-zone {
        padding: 1.25rem;
    }
    .preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    .timeline-line::before {
        display: none;
    }
    .message-item {
        gap: 0.75rem !important;
    }
}

/* 打印样式 */
@media print {
    .navbar, .btn, .alert, footer { display: none !important; }
    body { background: white; }
    .card { box-shadow: none !important; border: 1px solid #dee2e6; }
}
/* Developer permission and managed-file workspaces */
.developer-tool-strip{display:flex;align-items:center;gap:.45rem;overflow-x:auto;scrollbar-width:thin}
.developer-tool-strip a{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;color:#fff;text-decoration:none;padding:.38rem .62rem;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.developer-tool-strip a:hover{background:#fff;color:#151515}
.developer-role-directory .dropdown-menu,.tsp-data-menu .dropdown-menu{min-width:16rem;border:0;border-top:3px solid #c8102e;padding:.4rem}.developer-role-directory .dropdown-item,.tsp-data-menu .dropdown-item{display:grid;grid-template-columns:1.35rem 1fr;align-items:center;gap:.45rem;padding:.55rem .65rem}.developer-role-directory .dropdown-item small{grid-column:2;color:#6c757d;font-size:.68rem}.developer-role-directory .dropdown-item.active small{color:rgba(255,255,255,.8)}
.takeover-waiting-icon{display:grid;place-items:center;width:4rem;height:4rem;margin:0 auto 1rem;background:#f7e7ea;color:#c8102e;font-size:2rem}.takeover-waiting{min-height:19rem}.modal-content{border-radius:6px}
.permission-console,.file-tool-band{background:#fff;border:1px solid #d9dde2;padding:1.15rem}
.permission-console{border-top:4px solid #c8102e;box-shadow:0 .6rem 1.5rem rgba(24,30,36,.07)}
.permission-eyebrow{font-size:.68rem;font-weight:800;color:#c8102e}
.permission-role-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
.permission-role-tab{display:flex;justify-content:space-between;align-items:center;gap:.5rem;color:#343a40;text-decoration:none;border:1px solid #d8dde3;padding:.7rem .8rem;background:#f8f9fa;font-weight:700}
.permission-role-tab b{display:grid;place-items:center;min-width:1.6rem;height:1.6rem;background:#e9ecef;font-size:.76rem}
.permission-role-tab:hover,.permission-role-tab.active{color:#fff;background:#c8102e;border-color:#c8102e}
.permission-role-tab.active b,.permission-role-tab:hover b{background:#fff;color:#c8102e}
.permission-account-picker{background:#f3f4f6;border:1px solid #e0e3e7;padding:.8rem;margin-bottom:.8rem}
.permission-account-picker>label{display:block;font-size:.75rem;font-weight:800;margin-bottom:.4rem}
.permission-picker-controls{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(260px,1.3fr);gap:.65rem}
.permission-account-summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px solid #e1e4e8;margin-bottom:1rem}
.permission-account-summary>div:first-child{display:flex;align-items:center;gap:.65rem;min-width:0}
.permission-account-summary strong,.permission-account-summary small{display:block}
.permission-account-summary small{color:#6c757d;overflow-wrap:anywhere}
.permission-avatar{display:grid;place-items:center;flex:0 0 2.5rem;height:2.5rem;background:#20252b;color:#fff;font-size:1.05rem;font-weight:800}
.permission-summary-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}
.permission-summary-badges span{padding:.3rem .5rem;background:#e9ecef;color:#495057;font-size:.74rem;font-weight:700}
.permission-summary-badges .is-enabled{background:#d7f0e2;color:#126536}
.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.permission-grid fieldset{border:1px solid #dce0e4;padding:.75rem;min-width:0;background:#fcfcfd}
.permission-grid legend{float:none;width:auto;padding:0 .35rem;font-size:.9rem;font-weight:800;color:#292f35}
.permission-check{display:flex;align-items:flex-start;gap:.55rem;padding:.55rem .35rem;cursor:pointer;border-bottom:1px solid #eceff2}
.permission-check:last-child{border-bottom:0}
.permission-check>span{line-height:1.25;min-width:0}
.permission-check strong,.permission-check small,.permission-check code{display:block}
.permission-check strong{font-size:.84rem}
.permission-check small{color:#687078;font-size:.72rem;margin-top:.2rem}
.permission-check code{color:#a3172e;font-size:.64rem;margin-top:.25rem;overflow-wrap:anywhere}
.permission-save-bar{position:sticky;bottom:.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:#20252b;color:#fff;padding:.7rem .8rem;margin-top:1rem;box-shadow:0 .5rem 1.2rem rgba(0,0,0,.2);z-index:5}
.permission-developer-lock{display:flex;align-items:center;gap:.75rem;background:#f5f7f8;border-left:4px solid #c8102e;padding:1rem;margin-top:1rem}
.permission-developer-lock>i{font-size:1.8rem;color:#c8102e}.permission-developer-lock strong,.permission-developer-lock span{display:block}.permission-developer-lock span{color:#687078;font-size:.82rem;margin-top:.2rem}
.permission-bulk-panel{border:1px solid #d9dde2;background:#f8f9fa}.permission-bulk-panel>summary{cursor:pointer;padding:.8rem 1rem;font-weight:800;color:#20252b}.permission-bulk-panel>form{border-top:1px solid #d9dde2;padding:1rem;background:#fff}.permission-bulk-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:center;gap:.75rem;margin-bottom:.7rem}.permission-bulk-users{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;max-height:16rem;overflow:auto;padding:.25rem}.permission-bulk-users>label{display:flex;align-items:flex-start;gap:.45rem;border:1px solid #e0e3e7;background:#fff;padding:.55rem;min-width:0}.permission-bulk-users strong,.permission-bulk-users small{display:block}.permission-bulk-users small{color:#6c757d;font-size:.7rem;overflow-wrap:anywhere}
.permission-guide-shell{max-width:1120px;margin:0 auto}.permission-guide-intro{background:#f3f4f6;border-left:4px solid #c8102e;padding:1rem}.permission-guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem}.permission-guide-grid>div{display:flex;flex-direction:column;gap:.35rem;border:1px solid #dce0e4;padding:.85rem;background:#fff}.permission-guide-grid i{color:#c8102e;font-size:1.25rem}.permission-guide-grid span{color:#687078;font-size:.78rem}.permission-manual-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.permission-manual-list article{border:1px solid #dce0e4;padding:.8rem;background:#fff}.permission-manual-list article>div{display:flex;justify-content:space-between;gap:.5rem}.permission-manual-list code{font-size:.68rem;color:#a3172e}.permission-manual-list p{margin:.45rem 0 0;color:#687078;font-size:.82rem}
.file-category-strip{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:thin}
.file-category-strip .btn{flex:0 0 auto}
.file-name-cell{max-width:320px;overflow-wrap:anywhere}
.file-role-note{display:flex;align-items:center;gap:.8rem;background:#f4f5f6;border-left:4px solid #c8102e;padding:.85rem 1rem}.file-role-note>i{font-size:1.5rem;color:#c8102e}.file-role-note strong,.file-role-note span{display:block}.file-role-note span{color:#687078;font-size:.82rem;margin-top:.15rem}
.ticket-export-workspace{border:1px solid #d9dde2;border-top:4px solid #c8102e;background:#fff;padding:1rem;box-shadow:0 .5rem 1.2rem rgba(24,30,36,.06)}.ticket-export-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.ticket-export-rule{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem}.ticket-export-rule span{display:inline-flex;align-items:center;gap:.35rem;background:#f0f2f4;padding:.38rem .55rem;font-size:.75rem;color:#394047}.ticket-export-rule i{color:#c8102e}
@media (max-width: 991.98px){.permission-grid{grid-template-columns:1fr 1fr}.permission-role-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.permission-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.permission-manual-list{grid-template-columns:1fr}.permission-bulk-users{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 575.98px){.permission-grid,.permission-picker-controls,.permission-bulk-toolbar,.permission-bulk-users{grid-template-columns:1fr}.permission-role-tabs{display:flex;overflow-x:auto}.permission-role-tab{flex:0 0 8rem}.permission-account-summary,.permission-save-bar,.ticket-export-heading{align-items:stretch;flex-direction:column}.permission-summary-badges{justify-content:flex-start}.permission-save-bar .btn{width:100%}.permission-guide-grid{grid-template-columns:1fr 1fr}.managed-file-table table{min-width:900px}.file-tool-band,.ticket-export-workspace{padding:.75rem}.permission-console{padding:.75rem}}
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; z-index: 1000; min-width: 10rem; margin: 0; padding: .5rem 0; background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: .375rem; }
.dropdown-menu.show { display: block; }
.dropdown-menu-end { right: 0; left: auto; }
.dropdown-item { display: block; width: 100%; padding: .25rem 1rem; clear: both; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; }
.dropdown-item:hover, .dropdown-item:focus { color: #1e2125; background-color: #e9ecef; }
.navbar-collapse.show { display: flex !important; }
@media (max-width: 1399.98px) {
    .navbar-collapse.show { display: block !important; }
}

/* Assigned-ticket message center */
.notification-bell{position:relative;display:inline-grid;place-items:center;width:2.15rem;height:2.15rem;padding:0}
.notification-bell .badge{position:absolute;top:-.35rem;right:-.45rem;min-width:1.25rem}
.notification-toast-container{position:fixed;top:5.3rem;right:1rem;z-index:1080;width:min(390px,calc(100vw - 2rem));display:grid;gap:.65rem;pointer-events:none}
.tsp-notification-toast{pointer-events:auto;background:#fff;border:1px solid #d8dde3;border-left:4px solid #c8102e;box-shadow:0 .8rem 2rem rgba(23,29,36,.2);padding:.9rem}
.tsp-notification-toast .notification-toast-content{color:#343a40;line-height:1.45}
.tsp-notification-toast .notification-toast-meta{display:grid;gap:.2rem;color:#6c757d;font-size:.75rem;margin-top:.55rem}
.tsp-notification-toast .notification-toast-fault{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notification-list{border-radius:4px;overflow:hidden}
.notification-list-item{padding:1rem;border-bottom:1px solid #e5e8eb;background:#fff;transition:background-color .12s ease}
.notification-list-item:last-child{border-bottom:0}
.notification-list-item:hover,.notification-list-item:focus{background:#fff7f8}
.notification-list-item.is-unread{background:#fffafb;border-left:4px solid #c8102e;padding-left:calc(1rem - 4px)}
.notification-unread-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#c8102e;flex:0 0 auto}
.notification-meta{display:grid;gap:.3rem;color:#606870;font-size:.82rem}
.notification-meta span{overflow-wrap:anywhere}
.min-w-0{min-width:0}
@media (max-width: 1399.98px){.notification-toast-container{top:4.5rem}}
@media (max-width: 767.98px){.notification-toast-container{top:4.15rem;left:.6rem;right:.6rem;width:auto}.notification-toast-container .tsp-notification-toast:nth-child(n+3){display:none}.notification-list-item>.d-flex{display:block!important}.notification-list-item .text-end{text-align:left!important;margin-top:.75rem}.notification-list-item .btn{width:auto!important}}