/* public/css/style.css */
:root {
    --normal-color: #1e3a8a;
    --normal-hover: #1d4ed8;
    --excluded-color: #b45309;
    --excluded-hover: #dd5c14;
    --text-super: #38bdf8;
    --text-primary: #ffffff;
    --text-secondary: #64748b;
    --label: #7789a1;
    --bg-light-blue: rgba(14, 165, 233, 0.08);
    --bg-dark-blue: rgba(15, 23, 42, 0.65);
    --bg-input: #060912;
    --border-color: rgba(255, 255, 255, 0.12);
    --border-color-focus: #38bdf8;
    --border-table: rgba(14, 165, 233, 0.2);
    --btn-super: linear-gradient(90deg, #1d4ed8 0%, #2563eb 30%, #06b6d4 70%, #6366f1 100%);
    --success-color: #059669; /* Emerald Green */
    --danger-color: #dc2626; /* Rose Red */
    --warning-color: #d97706; /* Amber Yellow */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/*********** LOGIN & REGISTER PAGE ************/
/* 1. 全景深海港口实景底盘（100% 还原图片背景） */
body.logistics-gate-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* 🚢 直接提取自真实货运大港：夜幕下的码头、吊机与集装箱巨轮 */
    background: url('../uploads/images/login-background.jpg') no-repeat center center;
    background-size: cover;
    margin: 0;
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /*overflow: hidden;*/
    position: relative;
}

/* 🌌 遮罩暗流滤镜：对齐图片中深邃、带有未来蓝调的操控舱质感 */
body.logistics-gate-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(16, 24, 48, 0.75) 50%, rgba(3, 7, 18, 0.9) 100%);*/
    z-index: 1;
}

/* 🔮 【视觉灵魂一】：飞船控制舱曲面大屏外框（Glass Cover Panel） */
.premium-screen-frame {
    text-align: center;
    z-index: 10;
}

/* 🏛️ 顶层环球清关系统主标题（严格像素对齐设计图两行文字） */
.system-main-header {
    margin-bottom: 20px;
}

.system-main-header h1 {
    font-size: 32px;
    color: #9dfffe;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0 0 8px 0;
    /* 为文字注入图中那种尊贵的发光微晕 */
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.6), 0 0 40px rgba(56, 189, 248, 0.2);
}
.system-main-header p {
    font-size: 12px;
    color: #ade5ff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    font-weight: 600;
}

/* 🏢 【视觉灵魂二】：中央悬浮半透高反差控制台（Login Matrix Box） */
.login-card {
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: 16px !important;
    box-shadow: 
        0 30px 70px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
    width: 100% !important;
    max-width: 450px !important;
    margin: 0 auto;
    padding: 45px !important;
    /* 极细微冷光外切线 */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: all 0.3s ease-in-out;
}
.login-card:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.1);
}

/* 小标题：用户登录 / User Login */
.login-card-title {
    font-size: 17px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 28px;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 🛸 输入框组（失焦、聚焦全面优化，彻底干掉白底反噬） */
.form-group {
    margin-bottom: 14px !important;
    position: relative;
}
.form-group input, .form-group select {
    width: 100% !important;
    height: 46px !important;
    padding: 10px 16px 10px 45px !important; /* 给左侧小图标腾位置 */
    font-size: 13px !important;
    background: rgba(8, 12, 24, 0.85) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease-in-out !important;
}
/* 聚焦时：爆发图中那种霓虹冰川蓝科技边框 */
.form-group input:focus, .form-group select:focus {
    outline: none !important;
    background: #060912 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.35) !important;
}
.form-group input::placeholder { color: #475569 !important; }

/* 图标雷达定位器 */
.form-icon-radar {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 16px;
    height: 16px;
    color: #64748b;
    z-index: 5;
    transition: color 0.2s;
}
.form-group input:focus + .login-form-icon-radar {
    color: #38bdf8;
}

.form-group select {
    margin-left: 3px;
}

/* ⚠️ 警示红条 */
.error-banner {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.5);
    color: #fca5a5;
    font-size: 12px;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 🚀 【视觉灵魂三】：图中那颗带有梦幻“霓虹蓝紫电光流体”的极奢登录大按钮 */
.btn-login {
    width: 100% !important;
    height: 48px !important;
    /* 极其高保真地复刻图片中亮蓝、青蓝、冷紫交织的横向流体电光层 */
    background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 30%, #06b6d4 70%, #6366f1 100%) !important;
    background-size: 200% auto;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
    cursor: pointer !important;
    box-shadow: 
        0 10px 25px rgba(37, 99, 235, 0.45),
        inset 0 1px 1px rgba(255,255,255,0.3) !important;
    transition: all 0.3s ease-in-out !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 悬浮时流光暗中涌动并强化辉光 */
.btn-login:hover {
    background-position: right center;
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.6) !important;
}

/* 切换链路链接 */
.switch-mode-link {
    display: block;
    text-align: center;
    margin-top: 24px;
    font-size: 12px;
    color: #7789a1;
    font-weight: 600;
    user-select: none;
}
.switch-mode-link span {
    color: #38bdf8;
    transition: color 0.2s;
}
.switch-mode-link:hover span {
    color: #7dd3fc;
    text-decoration: underline;
}

/* 📄 底部厂商版权声明（100% 对齐照片最底端灰色文字） */
.portal-footer {
    text-align: center;
    width: 100%;
    margin-top: 30px;
    font-size: 11px;
    color: #aaaaaa;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.02em;
    padding-bottom: 10px;
}

/**************************************/

input:read-only { cursor: not-allowed; }

::placeholder {
  color: #475569;
}

/* Structural Container Card Layout */
.container { max-width: 1150px; margin: 0 auto; background: var(--bg-dark-blue); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); p-color: #fff; padding: 32px; border: 1px solid var(--border-color); }
.header-bar { border-bottom: 1px solid var(--border-color); padding-bottom: 24px; margin-bottom: 24px; display: flex; justify-content: space-between; items-center: center; }
.header-bar h1 { font-size: 24px; color: var(--text-super); font-weight: 700; }
.header-bar p { font-size: 14px; color: #6b7280; margin-top: 4px; }

/* Typography & Form Controls */
label { display: block; font-size: 12px; font-weight: 600; color: var(--label); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.05em; }
input[type="text"], input[type="number"], input[type="password"], input[type="email"], select, textarea { 
    width: 100%; padding: 10px 14px; 
    border: 1.5px solid var(--border-color); 
    border-radius: 8px; 
    font-size: 13px; 
    outline: none; 
    appearance: none; 
    -webkit-appearance: none; 
    background-color: var(--bg-dark-blue); 
    color: var(--text-primary);
    transition: border 0.2s; 
    
}
input:focus, select:focus, textarea:focus { 
    border-color: var(--border-color-focus);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.35);
    background: var(--bg-input); 
    
}
input:focus + i, select:focus + i { 
    color: #38bdf8
}

input[readonly] {
    width: 100%; padding: 10px 14px; 
    border: 1.5px solid var(--border-color); 
    border-radius: 8px; 
    font-size: 13px; 
    outline: none; 
    appearance: none; 
    -webkit-appearance: none; 
    background-color: var(--bg-light-blue); 
    color: var(--text-secondary);
    transition: border 0.2s;
    box-shadow: none;
}

.grid-3 { display: grid; grid-template-cols: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 32px; }

/* Buttons & Navigation Handles */
.btn { inline-flex: center; cursor: pointer; border-radius: 8px; font-size: 14px; font-weight: 600; padding: 10px 20px; border: 1px solid transparent; transition: all 0.2s; text-decoration: none; display: inline-block; text-align: center; }
.btn-normal { background-color: var(--normal-color); color: #ffffff; min-height: 35px; }
.btn-normal:hover { background-color: var(--normal-hover); }
.btn-excluded { background-color: var(--excluded-color); color: #ffffff; min-height: 35px; }
.btn-excluded:hover { background-color: var(--excluded-hover); }
.btn-success { background-color: var(--success-color); color: #ffffff; }
.btn-danger { background-color: var(--danger-color); color: #ffffff; }
.btn-secondary { background-color: #2D3748; color: #F8F9FA ; border-color: var(--border-color); }
.btn-secondary:hover { background-color: transparent; border-color: #6C757D; color: #ADB5BD; }
.flex-gap { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }

/* Complex Matrix Tables */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    border: 1px solid var(--border-table);
    border-radius: 12px;
    background-color: var(--bg-dark-blue);
}

.table-wrapper table {
    min-width: 900px;
}

table input { padding: 6px 10px; border-radius: 6px; }
.row-number { vertical-align: middle; color: #9ca3af; font-family: monospace; font-size: 12px; }
.btn-delete-row {
    background: none; border: none; color: #dc2626; font-size: 22px; font-weight: bold;
    cursor: pointer; padding: 2px 8px; border-radius: 6px; line-height: 1;
    transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center;
}
.btn-delete-row:hover { background-color: #fee2e2; color: #991b1b; transform: scale(1.1); }

/* 终极定型版布局样式 */
.office-grid-matrix {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 24px !important;
    width: 100% !important;
    margin-bottom: 24px !important;
}
.office-grid-matrix > div { grid-column: span 1 !important; width: 100% !important; display: block !important; }
.office-grid-matrix .customer-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

tr {
    height: 50px;
    max-height: 50px;
}

.table-wrapper th, 
.table-wrapper td {
    padding: 6px 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.modal-remarks-panel {
    border: 1px solid var(--border-table); 
    border-radius: 8px; padding: 16px; 
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.truncate-customer-box {
    max-width: 160px;
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-weight: 600;
}

.col-status   { width: 70px; text-align: center; }
.col-approval { width: 95px; text-align: center; }
.col-actions  { width: 110px; text-align: center; }

.table-responsive {
    background: var(--bg-dark-blue);
    border:1px solid var(--border-table);
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
    font-family:-apple-system,BlinkMacSystemFont,sans-serif;
}

table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
th { background-color: rgba(14, 165, 233, 0.08); color: #38bdf8; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
td { border-bottom: 1px solid rgba(255, 255, 255, 0.12); vertical-align: middle; }
tr:hover { background-color: rgba(14, 165, 233, 0.08); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-mono { font-family: monospace; font-weight: 600; }
tfoot tr { background-color: var(--bg-light); font-weight: 700; font-size: 15px; color: var(--primary-color); }
table input { padding: 6px 10px !important; border-radius: 6px; }
.row-number { vertical-align: middle; color: #9ca3af; font-family: monospace; font-size: 12px; }

/* 1. 审批列单元格：锁定宽度，确保上下按钮像素级居中对齐 */
.approval-matrix-cell {
    padding: 6px 10px;
    width: 170px;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
}

/* 2. 垂直弹性容器：将 Approve 和 Reject 强行转为垂直堆叠，并保持 4px 紧凑间距 */
.approval-horizontal-flex {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 3. 针对上下堆叠对齐微调胶囊按钮的物理高宽 */
.approval-horizontal-flex .btn-icon-approve,
.approval-horizontal-flex .btn-icon-reject,
.approval-horizontal-flex .btn-icon-return {
    width: 70px;
    height: 25px;
    font-size: 10px;
    font-weight: 700;
    padding: 0;
    line-height: 25px;
    border-radius: 6px;
}

.btn-icon-approve:hover, .btn-icon-reject:hover, .btn-icon-return:hover {
    transform: scale(1.1);
}

/* 1. 操作列单元格锁定，防止横向拉伸或换行 */
.action-matrix-cell {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
}

/* 2. 弹性容器：锁定内部图标按钮横向单行等距对齐 */
.action-matrix-flex {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 36px;
    overflow: hidden;
    margin-left: auto;
}

/* 3. 核心基础类：强制缩放为 28px * 28px 的方正小魔块，剥离 padding，利用 Flex 绝对居中 */
.btn-icon-square {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn-icon-square i {
    font-size: 15px;
    line-height: 1;
    font-weight: 400;
}

/* Action button color */
.btn-icon-pdf  { color: #007BFF; }
.btn-icon-view { color: #28A745; }
.btn-icon-edit { color: #FFD700; }
.btn-icon-del  { color: #ef4444; }

.btn-icon-view:hover {
    background-color: #28A745;
    color: white;
}

.btn-icon-pdf:hover {
    background-color: #007BFF;
    color: white;
}

.btn-icon-edit:hover {
    background-color: #FFD700;
    color: white;
}

.btn-icon-del:hover {
    background-color: #ef4444;
    color: white;
}

/* 6. 审批动作保持高对比度实色，确保管理层不容易点错（符合流程规范） */
.btn-icon-approve {
    background-color: #10b981; /* 翡翠绿 */
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    height: 22px;
    border: none;
}
.btn-icon-reject {
    background-color: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    height: 22px;
    border: none;
}

.btn-icon-return {
    background-color: #d97706;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    height: 22px;
    border: none;
}

.btn-icon-approve i, 
.btn-icon-reject i,
.btn-icon-return i {
    font-size: 10px !important;
    font-weight: 900 !important;
}

/* 完美复刻截图悬浮：鼠标移上去时，产生一个极其平滑的圆形微灰色浅背景罩 */
/*.btn-icon-square:hover:not(.btn-icon-approve):not(.btn-icon-reject) {*/
/*    background-color: #28A745;*/
/*    transform: scale(1.1);*/
/*}*/

/* Workflow Status Badges */
.badge { display: inline-block; padding: 4px 6px; font-size: 9px; font-weight: 700; border-radius: 9999px; text-transform: uppercase; border: 1px solid transparent; letter-spacing: 0.05em; }
.badge-draft { background-color: #fef3c7; color: var(--warning-color); border-color: #fde68a; }
.badge-approved { background-color: #d1fae5; color: var(--success-color); border-color: #a7f3d0; }
.badge-rejected { background-color: #fee2e2; color: var(--danger-color); border-color: #fca5a5; }

/* Interactive Catalog Modal Layout Popups */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; }
.modal-content { background: rgba(15, 23, 42, 0.9); border-radius: 12px; max-width: 600px; w-size: 100%; width: 100%; max-height: 80vh; display: flex; flex-direction: column; border: 1px solid var(--border-color-focus); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); overflow: hidden; }
.modal-header { padding: 16px 24px; border-bottom: 1px solid var(--border-color-focus); background: var(--bg-dark-blue); display: flex; justify-content: space-between; align-items: center; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.modal-header h3 { font-size: 16px; font-weight: 700; color: var(--text-super); }
.modal-body { padding: 16px 24px; overflow-y: auto; }
.modal-item-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid var(--border-color); transition: background 0.2s; }
.modal-item-row:last-child { border-bottom: none; }
.hidden { display: none !important; }

/* Custom Delete Button Style for Table Rows */
.btn-delete-row {
    background: none;
    border: none;
    color: #dc2626; /* Deep corporate red */
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Smooth hover indicator state feedback */
.btn-delete-row:hover {
    background-color: #fee2e2; /* Soft red tint background */
    color: #991b1b; /* Darker blood red text focus */
    transform: scale(1.1); /* Subtle zoom pull */
}

/* Ensure the center column alignment rule maps cleanly */
td.text-center {
    text-align: center;
    vertical-align: middle;
}

/* Form info */
.office-grid-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 精准均分两列：50% / 50% */
    gap: 20px 24px; /* 行间距 20px，列间距 24px */
    width: 100%;
    margin-bottom: 24px;
    float: none; /* 彻底切断任何可能存在的全局 Float 干扰 */
}

/* 2. 使用 :nth-child 选择器高级控制内部所有子单元格，锁定单列宽度 */
.office-grid-matrix > div:nth-child(n) {
    grid-column: span 1; /* 强制所有子项都只占用 1 个格子（即半幅宽度） */
    width: 100%;
    float: none;
    display: block;
    margin: 0;
}

/*.office-grid-matrix > div:nth-child(5),*/
/*.office-grid-matrix > div:nth-child(6),*/
/*.office-grid-matrix > div:nth-child(7) {*/
/*    grid-column: span 2;*/
/*    width: 100%;*/
/*    float: none;*/
/*    display: block;*/
/*    margin: 0;*/
/*}*/

.office-grid-matrix > div:nth-child(3) {
    grid-column: span 2;
    width: 100%;
    float: none;
    display: block;
    margin: 0;
}

/* 3. 针对客户下拉选择框上方的“快捷注册链接”进行 Flex 对齐微调 */
.office-grid-matrix .customer-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* 1. 全屏遮罩层：高档毛玻璃半透明滤镜，固定定位 */
.custom-confirm-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.4) !important; /* 优雅的灰蓝半透明 */
    backdrop-filter: blur(4px) !important; /* 核心：高级毛玻璃模糊动效 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    z-index: 9999 !important; /* 确保层级永远处于最顶层 */
    opacity: 0;
    transition: opacity 0.2s ease-in-out !important;
}

/* 遮罩层激活状态 */
.custom-confirm-overlay.active {
    opacity: 1 !important;
}

/* 2. 核心弹窗卡片：轻量化方正商务构造 */
.custom-confirm-card {
    background: #000000 !important;
    border-radius: 12px !important;
    max-width: 420px !important;
    width: 100% !important;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
    border: 1px solid #38bdf8 !important;
    padding: 24px !important;
    transform: scale(0.9) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* 优雅的轻微弹跳回馈 */
}

/* 卡片激活状态 */
.custom-confirm-overlay.active .custom-confirm-card {
    transform: scale(1) !important;
}

/* 3. 弹窗标题与文本控制 */
.custom-confirm-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #38bdf8 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.custom-confirm-body {
    font-size: 14px !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
}

/* 4. 按钮控制矩阵：精准继承系统风格 */
.custom-confirm-buttons {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

.custom-confirm-buttons .btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
}

/* 1. 大尺寸明细弹窗卡片：方正商务，带完美滚动条防护 */
.view-modal-card {
    background: var(--bg-dark-blue);
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid #38bdf8;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* 弹窗激活状态下的平滑浮现动效 */
.custom-confirm-overlay.active .view-modal-card {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

/* 2. 弹窗内部排版各区块控制 */
.view-modal-header {
    padding: 16px 24px !important;
    border-bottom: 1px solid #38bdf8 !important;
    background-color: var(--bg-dark-blue);
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.view-modal-body {
    padding: 24px !important;
    overflow-y: auto !important; /* 核心：允许表格明细在内部自由纵向滚动 */
    background-color: var(--bg-dark-blue);
}

/* 预设三种高保真信息区块卡片 */
.view-meta-panel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}
.view-meta-box {
    background: radial-gradient(circle at 50% 50%, #111d35 0%, #080d1a 60%, #03050a 100%);
    border: 1px solid var(--border-table);
    padding: 12px;
    border-radius: 8px;
}

.view-meta-box label {
    font-size: 11px;
    font-weight: 700; 
    color: var(--text-secondary); 
    text-transform: uppercase;
    text-decoration: underline;
}

.view-meta-box p { font-size: 13px !important; color: #ffffff !important; margin: 4px 0 0 0 !important; }

.filter-card input:focus, .filter-card select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.35) !important;
    background: #060912 !important;
}
.filter-card input:focus + i, .filter-card select:focus + i {
    color: #38bdf8 !important; /* 点击哪个输入框，哪个图标同步亮起电光蓝 */
}





/* 1. 主控制舱背景底盘 */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 50%, #111d35 0%, #080d1a 60%, #03050a 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #ffffff;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* 航线粒子网络背景层 */
body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(14, 165, 233, 0.1) 1px, transparent 0);
    background-size: 30px 30px;
    z-index: 1;
    pointer-events: none;
}

.logo-icon {
    width: 40px;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.6);
}

/* 2. 顶置数智星云控制头 (Top Navbar) */
.portal-top-navbar {
    height: 60px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-table);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
    position: relative;
}
.portal-logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.6), 0 0 40px rgba(56, 189, 248, 0.2);
}
.portal-logo-group h2 {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.05em;
    margin: 0;
}
.portal-logo-group p {
    font-size: 10px;
    color: #64748b;
    margin: 0;
    text-transform: uppercase;
}

/* 3. 核心布局隔离区：左侧边栏 + 右侧主数据舱 */
.portal-main-container {
    display: flex;
    flex: 1;
    z-index: 10;
    position: relative;
}

/* =========================================================================
   🛠️ 【全景复刻】：左侧双语硬核科技侧边栏 (Sidebar Menu) - 原装无损收缩升级
   ========================================================================= */
.portal-sidebar-menu {
    width: 240px;
    background: rgba(10, 17, 32, 0.7);
    backdrop-filter: blur(15px);
    border-right: 1px solid rgba(14, 165, 233, 0.15);
    padding: 24px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 🎯 【核心扩容】：为侧边栏赋予 0.3 秒的高阶缓动形变动画，并防止溢出漏边 */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s !important;
    position: relative !important;
}

/* 🎯 【绝杀 1】：当 JavaScript 激活 .collapsed 状态时，物理宽度强行缩窄至 64px */
.portal-sidebar-menu.collapsed {
    width: 64px !important;
    min-width: 64px !important;
    padding: 24px 8px !important;
}

/* 🎯 【绝杀 2】：收缩状态下，让所有的中英双语文字层、下挂的二级子菜单组无痕隐形 */
.portal-sidebar-menu.collapsed .menu-text-bilingual,
.portal-sidebar-menu.collapsed .sidebar-submenu-group {
    display: none !important;
}

/* 🎯 【绝杀 3】：收缩状态下，让剩余的核心功能图标在 64 像素的小格子里保持水平居中 */
.portal-sidebar-menu.collapsed .sidebar-menu-item {
    justify-content: center !important;
    padding: 12px 0 !important;
    gap: 0 !important;
}

/* 侧边栏一级菜单大项 */
.sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #94a3b8;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.sidebar-menu-item svg {
    width: 18px;
    height: 18px;
    color: #64748b;
    transition: color 0.2s;
}

/* 💡 子菜单组包裹器 */
.sidebar-submenu-group {
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    max-height: 500px; /* 默认展开状态下的最大高度占位 */
    overflow: hidden !important;
    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s !important;
    opacity: 1;
}

.sidebar-submenu-group.collapsed-menu {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.sidebar-submenu-item {
    display: block;
    padding: 8px 16px;
    color: #64748b;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s;
    position: relative;
}

.sidebar-submenu-item:hover, .sidebar-submenu-item.active {
    color: #38bdf8;
    background: rgba(14, 165, 233, 0.08);
}

.portal-sidebar-menu.collapsed .sidebar-menu-item::after {
    display: none !important;
}

.sidebar-menu-item.menu-closed svg.menu-arrow-indicator {
    transform: rotate(-90deg) !important;
}

.portal-sidebar-menu.collapsed svg.menu-arrow-indicator {
    display: none !important;
}

/* 🟢 【激活态特效】：精准复刻图中选中的“极光绿/电光蓝”激活舱位 */
.sidebar-menu-item.active, .sidebar-menu-item:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #38bdf8; /* 左侧激光蓝色定位线 */
}
.sidebar-menu-item.active svg, .sidebar-menu-item:hover svg {
    color: #10b981; /* 图标变为极光绿 */
}

/* 文本上下两行流双语排版 */
.menu-text-bilingual {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.menu-text-bilingual span.en-sub {
    font-size: 10px;
    color: #475569;
    font-weight: normal;
}
.sidebar-menu-item:hover .menu-text-bilingual span.en-sub,
.sidebar-menu-item.active .menu-text-bilingual span.en-sub {
    color: #94a3b8;
}

/* 4. 右侧主工作台数据舱 */
.portal-content-body {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

/* 折叠展开左侧菜单 */
.custom-sidebar-toggle-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 展开时靠左对齐，呈现文字 */
    width: 100% !important;
    height: 40px !important;
    padding: 0 16px !important;
    margin-bottom: 20px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(14, 165, 233, 0.18) !important; /* 荧光蓝细包边框 */
    border-radius: 8px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 悬浮变色反馈 */
.custom-sidebar-toggle-btn:hover {
    background: rgba(14, 165, 233, 0.06) !important;
    border-color: #10b981 !important; /* 悬浮整体变绿色 */
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

/* 🎯 矢量图标精准洗涤：锁定冷光蓝，悬浮同步变极光绿 */
.custom-sidebar-toggle-btn svg.icon-hamburger-bars {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    color: #38bdf8 !important; /* 默认冷光蓝 */
    transition: color 0.2s ease, transform 0.2s !important;
    flex-shrink: 0 !important;
}
.custom-sidebar-toggle-btn:hover svg.icon-hamburger-bars {
    color: #4ade80 !important;
}

/* 🎯 文本提示洗涤：锁定冷静灰 */
.custom-sidebar-toggle-btn .toggle-btn-label-text {
    color: #64748b !important;
    transition: color 0.2s !important;
    white-space: nowrap !important;
}
.custom-sidebar-toggle-btn:hover .toggle-btn-label-text {
    color: #ffffff !important; /* 悬浮时字变纯白 */
}

/* =========================================================================
   🚦 【状态自愈变身】：当侧边栏收缩 (.collapsed) 时的几何形变规则
   ========================================================================= */
.portal-sidebar-menu.collapsed .custom-sidebar-toggle-btn {
    justify-content: center !important; /* 收缩时强制绝对居中 */
    padding: 0 !important;
    width: 44px !important;
    margin: 0 auto 20px auto !important;
}

/* 🎯 收缩时，强行抹除文字，绝不允许漏字或撑破 64px 单元格 */
.portal-sidebar-menu.collapsed .custom-sidebar-toggle-btn .toggle-btn-label-text {
    display: none !important;
}

/* 🎯 收缩时，让内部的三道杠三道杠图形顺时针旋转 90 度，带极客机械转动感 */
.portal-sidebar-menu.collapsed .custom-sidebar-toggle-btn svg.icon-hamburger-bars {
    transform: rotate(90deg) !important;
}

/* 🏢 【核心复刻】：悬浮有机玻璃毛玻璃数据看板 (Dashboard Component Box) */
.dashboard-matrix-card {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    padding: 24px;
    height: 100%;
}

/* 看板头部信息流 */
.card-matrix-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}
.card-matrix-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-matrix-title span.en-title {
    font-size: 12px;
    color: #64748b;
    font-weight: normal;
}

/* 🚀 【精准复刻】：图片中那个极为标志性的“霓虹极光蓝” Create New Quote 按钮 */
.btn-blue-light {
    background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 30%, #06b6d4 70%, #6366f1 100%);
    color: #ffffff;
    border: none;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    text-align: center;
    min-height: 40px;
}

.btn-save {
    border-radius: 8px; 
    font-size: 14px; 
    font-weight: 600; 
    padding: 10px 20px; 
}

.btn-create-quote {
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    gap: 6px;
}

.btn-search {
    height: 44px; 
    padding: 10px 20px; 
    width: 100%; 
    border-radius: 8px; 
    font-size: 14px; 
    text-transform: uppercase; 
    align-items: center; 
    justify-content: center;
    gap: 8px;
}

.btn-blue-light:hover {
    background-position: right center;
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.6) !important;
}

/* 📄 页脚厂商版权声明 */
.portal-footer-line {
    text-align: center;
    font-size: 11px;
    color: #64748b;
    margin-top: auto;
}

.flag-icon {
  width: 24px;   /* 掌控图标大小 */
  height: 16px;  /* 保持标准国旗比例 */
  border-radius: 2px; /* 微圆角更精致，若要纯正圆形可设为 50% 并将宽高设为一致 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  object-fit: cover;
}