/* ============================================================
   泾东集团旗舰 UI · 深蓝金色主题（2025 现代化重制版）
   用途：替换老版 codeUI.css，无需修改 JSP、JS
   特色：无图标依赖，全 CSS 渐变 + 阴影 + 圆角
============================================================ */

/* --- 全局基础 --- */
:root {
    --brand-main: #1E3A8A;   /* 深蓝主色 */
    --brand-gold: #D4A017;   /* 金色高亮 */
    --brand-hover: #2544A8;  /* 深蓝 hover */
    --gray-100: #F5F6FA;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --radius: 8px;
    --shadow: 0 4px 12px rgba(0,0,0,0.12);
    --font: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

body {
    font-family: var(--font);
    background-color: #F8FAFF;
    color: #222;
}

/* ============================================================
   ICON 大图标（iconEx 系列）
============================================================ */
div.iconExContain_blur,
div.iconExContain_focus {
    position: relative;
    left: 50%;
    margin-left: -40px;
    top: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--gray-100), #fff);
    box-shadow: var(--shadow);
    transition: all .2s ease;
}
div.iconExContain_focus {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--brand-main), #2b4dbf);
}

div.iconExArea_blur,
div.iconExArea_focus {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 48px;
    height: 48px;
}

div.iconExTitle {
    font-size: 14px;
    padding-top: 6px;
    height: 40px;
    text-align: center;
    font-weight: 600;
}

/* Badge */
div.iconExBadges_blur,
div.iconExBadges_focus {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    background: var(--brand-gold);
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    line-height: 22px;
    text-align: center;
    box-shadow: var(--shadow);
}

/* ============================================================
   ICON 小图标（icon 系列）
============================================================ */
div.iconContain_blur,
div.iconContain_focus {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #fff, var(--gray-100));
    box-shadow: var(--shadow);
    transition: .2s;
}
div.iconContain_focus {
    background: linear-gradient(135deg, var(--brand-main), var(--brand-hover));
    transform: translateY(-3px);
}

div.iconImage {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 48px;
    height: 48px;
}

div.iconTitle {
    padding-top: 10px;
    color: #222;
    font-size: 14px;
    text-align: center;
}

/* Badge */
div.iconBadges_blur,
div.iconBadges_focus {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: var(--brand-gold);
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
}

/* ============================================================
   小图标（小尺寸）
============================================================ */
div.iconContainSmall_blur,
div.iconContainSmall_focus {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
div.iconContainSmall_focus {
    background: var(--brand-main);
}

div.iconTitleSmall {
    position: absolute;
    bottom: -18px;
    width: 48px;
    text-align: center;
    font-size: 12px;
    color: #444;
}
div.iconTitleSmall_focus {
    color: var(--brand-gold);
}

/* ============================================================
   按钮（Button）
============================================================ */
td.buttonArea {
    background: var(--brand-main);
    color: white;
    padding: 6px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: .15s;
}
td.buttonArea:hover {
    background: var(--brand-hover);
}

/* ============================================================
   折叠菜单（Accordion）
============================================================ */
table.accordion {
    background: var(--brand-main);
    color: white;
    height: 32px;
    border-bottom: 2px solid var(--brand-gold);
    font-size: 14px;
    padding: 0;
}

/* ============================================================
   GRID 表格（仅作用于表单 / 列表数据）
   目标：数据居中、结构清晰、不影响菜单
============================================================ */

/* 表格整体 */
table.grid_table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    border: 1px solid var(--gray-300);
}

/* 表体单元格：数据居中 */
table.grid_table td.gridBody,
table.grid_table td.gridBody_new {
    padding: 6px;
    font-size: 14px;
    text-align: center;                  /* 只让表格数据居中 */
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* 列分隔线 */
table.grid_table td.gridBody,
table.grid_table td.gridBody_new,
table.grid_table th.gridTitle {
    border-right: 1px solid var(--gray-300);
}

/* 最后一列不画线 */
table.grid_table td.gridBody:last-child,
table.grid_table td.gridBody_new:last-child,
table.grid_table th.gridTitle:last-child {
    border-right: none;
}

/* 新数据高亮 */
table.grid_table td.gridBody_new {
    color: var(--brand-main);
}

/* 表头 */
table.grid_table th.gridTitle {
    background:var(--brand-main);
    color: #fff;
    padding: 8px;
    font-size: 14px;
    text-align: center;
}

/* 行 hover / 选中 */
table.grid_table tr.gridrow_mouseover {
    background: var(--gray-100);
}
table.grid_table tr.gridrow_selected {
    background: rgba(30,58,138,0.1);
}

/* ============================================================
   顶部菜单 / 下拉菜单
============================================================ */
div.menu_fixed {
    background: var(--brand-main);
}

td.topMenuItem_onmouseout {
    background: var(--brand-main);
    color: white;
    text-align: center;
}
td.topMenuItem_onmouseover {
    background: var(--brand-gold);
    color: #222;
}

/* 下拉 */
div.menu_float {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-300);
    padding: 4px 0;
}

td.subMenuItem_onmouseover {
    background: var(--brand-main);
    color: #fff;
}
td.subMenuItem_onmouseout {
    background: #fff;
    color: #222;
}

/* ============================================================
   分页 Page
============================================================ */
.page_table {
    font-size: 14px;
}

div.page_first,
div.page_previous,
div.page_next,
div.page_last {
    width: 20px;
    height: 20px;
    background: var(--brand-main);
    border-radius: 4px;
}

/* ============================================================
   状态栏 Status
============================================================ */
div.statusContain {
    background: var(--gray-200);
    height: 30px;
    display: flex;
    align-items: center;
}

/* ============================================================
   TAB 页签
============================================================ */
td.tabText_mouseout {
    background: var(--brand-main);
    color: white;
    border-radius: 6px 6px 0 0;
    padding: 6px;
    font-weight: 600;
}

td.tabText_selected {
    background: #fff;
    border: 2px solid var(--brand-main);
    border-bottom: 0;
    color: var(--brand-main);
    border-radius: 6px 6px 0 0;
    padding: 6px;
    font-weight: 700;
}

/* ============================================================
   WINDOW 窗口框架
============================================================ */
td.windowContent {
    background: white;
    padding: 12px;
}

td.windowTitle {
    background: var(--brand-main);
    color: white;
    font-size: 16px;
    padding: 10px;
    font-weight: 600;
    border-radius: var(--radius) var(--radius) 0 0;
}

/* 去掉 PNG 边框 */
div.window_lefttop,
div.window_righttop,
td.window_leftbottom,
td.window_rightbottom,
td.window_top,
td.window_bottom,
td.window_left,
td.window_right {
    background: none !important;
}

/* ============================================================
   Tree 树
============================================================ */
div.treeArea {
    background: #fff;
}

SPAN.treeItemText_onmouseout {
    padding: 4px;
}
SPAN.treeItemText_onmousemove {
    background: var(--brand-main);
    color: white;
    border-radius: var(--radius);
    padding: 4px;
}
SPAN.treeItemText_selected {
    background: var(--brand-gold);
    color: #222;
    padding: 4px;
    border-radius: var(--radius);
}

/* ============================================================
   修复：左侧功能目录恢复左对齐
   原因：老 JSP 使用 <td align="center">
============================================================ */

td[align="center"] {
    text-align: left !important;
}

td > div.iconExContain_blur,
td > div.iconExContain_focus,
td > div.iconContain_blur,
td > div.iconContain_focus {
    margin-left: 0 !important;
    margin-right: auto !important;
}

div.iconExTitle,
div.iconTitle,
div.iconTitleSmall {
    text-align: left !important;
}