﻿/* 自定义Bootstrap主题颜色 */
:root {
    --bs-primary: #1e9fff;
    --bs-primary-rgb: 30, 159, 255;
    --bs-primary-text: #ffffff;
    --bs-primary-bg-subtle: #e6f3ff;
    --bs-primary-border-subtle: #b3d9ff;
    --bs-primary-text-emphasis: #0c4a6b;
    --bs-primary-border: #1e9fff;
    --bs-primary-hover-bg: #1a8ce6;
    --bs-primary-hover-border: #1a8ce6;
    --bs-primary-active-bg: #167acc;
    --bs-primary-active-border: #167acc;
    --bs-primary-focus-ring-color: rgba(30, 159, 255, 0.25);
    --bs-primary-focus-ring-rgb: 30, 159, 255;
}

.btn-primary {
    background-color: #1e9fff !important;
    border-color: #1e9fff !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #1a8ce6 !important;
    border-color: #1a8ce6 !important;
    color: #ffffff !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:focus:active,
.btn-primary.active:focus {
    background-color: #167acc !important;
    border-color: #167acc !important;
    color: #ffffff !important;
}

.btn-primary:focus {
    background-color: #1e9fff !important;
    border-color: #1e9fff !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(30, 159, 255, 0.25) !important;
}

.btn-primary:active:focus,
.btn-primary.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(30, 159, 255, 0.25) !important;
}

/* 覆盖Bootstrap outline primary按钮样式 */
.btn-outline-primary {
    color: #1e9fff !important;
    border-color: #1e9fff !important;
}

.btn-outline-primary:hover {
    background-color: #1e9fff !important;
    border-color: #1e9fff !important;
    color: #ffffff !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:focus:active,
.btn-outline-primary.active:focus {
    background-color: #167acc !important;
    border-color: #167acc !important;
    color: #ffffff !important;
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(30, 159, 255, 0.25) !important;
}

/* 覆盖Bootstrap下拉菜单项样式 */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #1e9fff !important;
    color: #ffffff !important;
}

/* 只有非激活状态的下拉菜单项才显示悬停效果 */
.dropdown-item:not(.active):hover {
    background-color: #e6f3ff !important;
    color: #0c4a6b !important;
}

/* 覆盖Bootstrap表单复选框选中状态 */
.form-check-input:checked {
    background-color: #1e9fff !important;
    border-color: #1e9fff !important;
}

.form-check-input:focus {
    border-color: #1e9fff !important;
    box-shadow: 0 0 0 0.25rem rgba(30, 159, 255, 0.25) !important;
}

/* 覆盖Bootstrap输入框焦点外发光状态 */
.form-control:focus {
    border-color: #1e9fff !important;
    box-shadow: 0 0 0 0.25rem rgba(30, 159, 255, 0.25) !important;
}

.form-select:focus {
    border-color: #1e9fff !important;
    box-shadow: 0 0 0 0.25rem rgba(30, 159, 255, 0.25) !important;
}

/* 覆盖Bootstrap文本和背景颜色工具类 */
.text-primary {
    color: #1e9fff !important;
}

.bg-primary {
    background-color: #1e9fff !important;
}

.text-bg-primary {
    color: #ffffff !important;
    background-color: #1e9fff !important;
}

.border-primary {
    border-color: #1e9fff !important;
}

/* 覆盖Bootstrap表格样式 */
.table-primary {
    background-color: #1e9fff !important;
}

.table-primary th,
.table-primary td {
    background-color: #1e9fff !important;
}

/* 覆盖Bootstrap列表组样式 */
.list-group-item-primary {
    color: #ffffff !important;
    background-color: #1e9fff !important;
}

.list-group-item-primary:hover {
    color: #ffffff !important;
    background-color: #1a8ce6 !important;
}

/* 覆盖Bootstrap警告框样式 */
.alert-primary {
    color: #0c4a6b !important;
    background-color: #e6f3ff !important;
    border-color: #b3d9ff !important;
}

/* 覆盖Bootstrap进度条样式 */
.progress-bar {
    background-color: #1e9fff !important;
}

/* 覆盖Bootstrap徽章样式 */
.badge-primary {
    color: #ffffff !important;
    background-color: #1e9fff !important;
}

/* 覆盖Bootstrap分页样式 */
.page-item.active .page-link {
    color: #ffffff !important;
    background-color: #1e9fff !important;
    border-color: #1e9fff !important;
}

.page-link {
    color: #1e9fff !important;
}

.page-link:hover {
    color: #0c4a6b !important;
    background-color: #e6f3ff !important;
    border-color: #b3d9ff !important;
}

/* 覆盖Bootstrap导航栏样式 */
.navbar-light .navbar-nav .nav-link.active {
    color: #ffffff !important;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #b3d9ff !important;
}

/* 覆盖Bootstrap输入组样式 */
.input-group-text {
    color: #ffffff !important;
    background-color: #1e9fff !important;
    border-color: #1e9fff !important;
}

/* 覆盖Bootstrap按钮禁用状态 */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #1e9fff !important;
    border-color: #1e9fff !important;
    color: #ffffff !important;
    opacity: 0.65 !important;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: #1e9fff !important;
    border-color: #1e9fff !important;
    background-color: transparent !important;
    opacity: 0.65 !important;
}

/* 覆盖Bootstrap链接样式 */
.link-primary {
    color: #1e9fff !important;
}

.link-primary:hover,
.link-primary:focus {
    color: #1a8ce6 !important;
}

/* 覆盖Bootstrap文本强调样式 */
.text-primary-emphasis {
    color: #0c4a6b !important;
}

/* 覆盖Bootstrap背景微妙样式 */
.bg-primary-subtle {
    background-color: #e6f3ff !important;
}

/* 覆盖Bootstrap边框微妙样式 */
.border-primary-subtle {
    border-color: #b3d9ff !important;
}

* {
    font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"PingFang SC Regular","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    text-decoration: none;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
.navbar {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
    display: flex;
    align-items: center;
}
.navbar-brand img {
    max-height: 30px;
    margin-right: 5px;
}
.navbar-brand .logo-text {
    display: inline-block;
    font-size: 17px;
}

.dropdown-menu{
    border: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.card {
    border: 1px solid #eeeeee;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.card-header{
    border-bottom: 1px solid #dddddd;
}

.input-group-text {
    border: none;
}

.container{
    max-width:1140px;
}

footer a, footer small, footer span {
    color: #777;
    font-size: 12px;
}
footer a:link, footer a:hover {
    color: #555;
    font-size: 12px;
}

/* Message 组件样式 */
#message-container {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
    box-sizing: border-box;
}

.message {
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    color: #1d2129;
    min-width: 150px;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
}

.message.show {
    opacity: 1;
    transform: translateY(0);
}

.message.hide {
    opacity: 0;
    transform: translateY(-10px);
}

.message.message,
.message.loading,
.message.info,
.message.success,
.message.warning,
.message.error {
    background: #ffffff;
    border: 1px solid #e5e6eb;
}

.message-icon {
    margin-right: 8px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


.message-text {
    flex: 1;
}

/* 图标旋转动画 */
.message-loading {
    animation: msgSpin 1s linear infinite;
}

@keyframes msgSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Message 组件响应式调整 - 容器缩放设计 */
/* 平板设备 (768px 以下) */
@media (max-width: 768px) {
    #message-container {
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100vw - 20px);
    }
    
    .message {
        width: 100%;
        min-width: 200px;
        max-width: 100%;
        padding: 8px 12px;
        margin-bottom: 8px;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .message-icon {
        margin-right: 6px;
    }
}

/* 手机设备 (480px 以下) */
@media (max-width: 480px) {
    #message-container {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100vw - 16px);
    }
    
    .message {
        width: 100%;
        min-width: 200px;
        max-width: 100%;
        padding: 8px 10px;
        margin-bottom: 8px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .message-icon {
        margin-right: 5px;
    }
}

/* 小屏手机设备 (360px 以下) */
@media (max-width: 360px) {
    #message-container {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100vw - 12px);
    }
    
    .message {
        width: 100%;
        min-width: 180px;
        max-width: 100%;
        padding: 5px 8px;
        margin-bottom: 6px;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .message-icon {
        margin-right: 5px;
    }
    
}

/* 结果展示淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 工具类：通用结果淡入效果 */
.result-fade-in {
    animation: fadeIn 1s;
}

/* 结果展示淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 小屏幕下 大于等于768px 布局容器改为 720px */
@media screen and (min-width: 768px) {
    .container {
        width: 720px;
    }
    
    .w-md-auto {
        width: auto !important;
    }
}

/* 中等屏幕下 大于等于992px 布局容器修改为 960px */
@media screen and (min-width: 992px) {
    .container {
        width: 960px;
    }
}

/* 大屏幕下 大于等于1200px 布局容器修改为 1140px */
@media screen and (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

