/* ============================================================================
   common.css — SkyBlue Pro Edition
   适用：JSP / FrameSet / 老式表格布局系统的 2025 现代化重构主题
   说明：
   - 与 modern-skin.css 统一采用天空蓝主题
   - 保留原有类名，保证所有 JSP / JS 逻辑继续可用
   - 移除老旧位图边框与强烈渐变，统一为现代扁平 + 阴影风格
   - 尽量不改变原有组件尺寸，避免布局错位
============================================================================ */

/* === 主题变量 === */
:root {
  --brand-main: #4da3ff;          /* 亮天空蓝 */
  --brand-main-dark: #1e6fdc;     /* 深蓝 hover */
  --brand-soft: #e9f4ff;          /* 浅蓝背景 */
  --brand-danger: #e15252;        /* 红色提示（必填等） */
  --border-subtle: #d1d5db;
  --text-main: #111827;
  --text-muted: #6b7280;
  --bg-main: #f3f6fc;
  --bg-card: #ffffff;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-soft: 0 1px 3px rgba(15,23,42,0.08);
  --shadow-md: 0 8px 22px rgba(15,23,42,0.10);
  --font-main: "Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
}

/* ========================================================================== */
/* 全局基础                                                                   */
/* ========================================================================== */

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-size: 14px;
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: var(--bg-main);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 兼容旧 body.normal / body.document */
body.normal {
  font-size: 14px;
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #ffffff;
}

body.document {
  font-size: 14px;
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #e5e7eb;
}

textarea {
  resize: none;
  font-family: var(--font-main);
}

A {
  text-decoration: none;
  color: #2563eb;
  cursor: pointer;
}

A:hover {
  text-decoration: underline;
}

TABLE {
  font-size: 12px;
  border-collapse: collapse;
}

input,
select,
textarea {
  font-size: 12px;
  font-family: var(--font-main);
}

/* 全局默认边框风格（会被具体类覆盖） */
input {
  border: 1px solid #9ca3af;
  box-sizing: border-box;
}

/* ========================================================================== */
/* 文本与简易排版                                                             */
/* ========================================================================== */

.show_txt {
  line-height: 25px;
  text-align: justify;
}

span.menu {
  color: var(--text-main);
  cursor: pointer;
}

span.normal {
  color: #2563eb;
  cursor: pointer;
}

span.link {
  color: #2563eb;
  cursor: pointer;
}

span.alert {
  color: #4b5bb5;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-main);
}

span.warm {
  color: #ef4444;
  cursor: pointer;
}

/* 上下凹凸边框兼容 */
td.downbox {
  border-top: 1px solid #111827;
  border-left: 1px solid #111827;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

td.upbox {
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #111827;
  border-bottom: 1px solid #111827;
}

/* ========================================================================== */
/* fieldset 与分组面板                                                       */
/* ========================================================================== */

fieldset.normal {
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--brand-main);
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow: var(--shadow-soft);
}

fieldset.normal legend {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 10px;
  color: var(--brand-main-dark);
}

.fieldset_title {
  margin-bottom: 10px;
  padding: 10px 0;
  border-width: 1px;
  border-style: solid;
  border-color: var(--brand-main);
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg,#4da3ff,#1e6fdc);
  box-shadow: var(--shadow-soft);
}

.fieldset_title legend {
  padding: 5px 10px;
  font-size: 14px;
  font-family: var(--font-main);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255,255,255,0.6);
  background-color: rgba(255,255,255,0.12);
  width: 90%;
  margin-left: 10px;
  box-sizing: border-box;
  border-radius: 999px;
  color: #ffffff;
}

/* jQuery UI close 按钮隐藏兼容 */
.no-close .ui-dialog-titlebar-close {
  display: none;
}

/* ========================================================================== */
/* 移动端标题栏 / 列表（mTitle / mList）                                     */
/* ========================================================================== */

div.mTitle_contain {
  background: linear-gradient(90deg,#4da3ff,#1e6fdc);
  padding: 0;
  height: 40px;
  position: relative;
  box-shadow: var(--shadow-soft);
}

div.mTitle_btnBack,
div.mTitle_btnMore {
  position: absolute;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 左侧返回 */
div.mTitle_btnBack {
  left: 8px;
}

/* 右侧更多 */
div.mTitle_btnMore {
  right: 8px;
}

/* 用伪元素画简单图标，避免依赖 PNG */
div.mTitle_btnBack::before {
  content: "‹";
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
}

div.mTitle_btnMore::before {
  content: "⋮";
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
}

div.mTitle_content {
  position: absolute;
  left: 40px;
  top: 0;
  right: 40px;
  bottom: 0;
  line-height: 40px;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.mListGroup_contain {
  background-color: #e5f0ff;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #c4ddff;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
}

div.mListItem_contain {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

div.mListItem_iconContain {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(135deg,#4da3ff,#1e6fdc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
}

div.mListItem_icon {
  width: 24px;
  height: 24px;
}

div.mListItem_iconBadges,
div.mListItem_extend,
div.mListItem_badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

div.mListItem_badge {
  position: relative;
  top: 0;
  right: 0;
}

div.mListItem_title {
  color: #111827;
  font-size: 14px;
  font-weight: 600;
}

div.mListItem_content {
  color: #4b5563;
  font-size: 12px;
  margin-top: 2px;
}

/* ========================================================================== */
/* 文本与输入组件（displayedit、gridcell 系列等）                             */
/* ========================================================================== */

/* 显示型文本（仅展示、不可编辑） */
.displayedit {
  width: 100%;
  height: 28px;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #111827;
  background-color: transparent;
  border-left: 1px solid transparent !important;
  border-top: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  border-bottom: 1px solid #d1d5db;
  box-sizing: border-box;
  pointer-events: none;
}

.displayedit:focus {
  outline: 0;
  border-bottom-color: #111827;
}

.displayedit[disabled],
.displayedit[readonly],
fieldset[disabled] .displayedit {
  background-color: #ffffff;
  opacity: 1;
  cursor: default;
}

textarea.displayedit {
  height: auto;
}

/* Grid 内编辑输入框 */
.gridcelledit,
.gridcellselect,
.gridcellfixed {
  width: 100%;
  height: 28px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #111827;
  background-color: transparent;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 可编辑 */
.gridcelledit:focus {
  border-color: #9ca3af;
  background-color: #ffffff;
  outline: 0;
  box-shadow: 0 0 0 1px rgba(148,163,184,0.55);
}

/* 选择框 */
.gridcellselect:focus {
  border-color: var(--brand-main);
  background-color: #e0f2fe;
  outline: 0;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.55);
}

/* 固定单元格（展示用） */
.gridcellfixed:focus {
  border-color: transparent;
  background-color: transparent;
  outline: 0;
}

/* 选中输入（比如批量操作时） */
.seleditex {
  width: 100%;
  height: 28px;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #111827;
  background-color: #e0f2fe;
  border: 1px solid #2563eb !important;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

.seleditex:focus {
  border-color: #2563eb;
  outline: 0;
  box-shadow: 0 0 0 1px rgba(37,99,235,.6);
}

/* 必填输入框 */
.musteditex {
  width: 100%;
  height: 28px;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #111827;
  background-color: #fff5f5;
  border: 1px solid var(--brand-danger) !important;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

.musteditex:focus {
  border-color: #2563eb;
  outline: 0;
  box-shadow: 0 0 0 1px rgba(37,99,235,.6);
}

/* 通用文本输入 */
.texteditex {
  width: 100%;
  height: 28px;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #9ca3af !important;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.texteditex:focus {
  border-color: #2563eb;
  outline: 0;
  box-shadow: 0 0 0 1px rgba(37,99,235,.6);
}

/* 固定不可编辑输入框 */
.fixededitex {
  width: 100%;
  height: 28px;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #4b5563;
  background-color: #e5e7eb;
  border: 1px solid #9ca3af !important;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

textarea.fixededit,
select.fixededit,
input.fixededit {
  font-size: 12px;
  border: 1px solid #9ca3af;
  background: #e5e7eb;
}

/* 必填（旧类名保留） */
textarea.mustedit,
select.mustedit,
input.mustedit {
  font-size: 12px;
  border: 1px solid var(--brand-danger);
  background: #ffe4e6;
}

/* 普通输入简化 */
input.textedit,
textarea.textedit {
  border: 1px solid #9ca3af;
  font-size: 12px;
}

/* 日期输入 */
input.date {
  border: 1px solid #9ca3af;
  font-size: 12px;
  width: 100px;
  border-radius: var(--radius-sm);
}

/* ========================================================================== */
/* 按钮体系 INPUT.button / INPUT.normal 等                                   */
/* ========================================================================== */

INPUT.normal {
  background: linear-gradient(180deg,#2563eb,#1d4ed8);
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

INPUT.normal:hover {
  background: #1d4ed8;
}

INPUT.button {
  background: linear-gradient(180deg,var(--brand-main),var(--brand-main-dark));
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 14px;
  height: 26px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

INPUT.button:hover {
  background: var(--brand-main-dark);
}

/* 选中态按钮 */
textarea.seledit,
select.seledit,
input.seledit {
  cursor: pointer;
  font-size: 12px;
  border: 1px solid #2563eb;
  background: #dbeafe;
}

/* ========================================================================== */
/* 表单布局表：brief / editex / edit / layout 等                              */
/* ========================================================================== */

/* 概览表（红框版，统一天空蓝） */
.brief {
  border: 1px solid var(--brand-main);
  border-radius: var(--radius-lg);
  background-color: #ffffff;
  color: #111827;
  font-size: 12px;
  width: 100%;
}

.brief tr {
  height: 30px;
}

.brief tbody tr td,
.brief tbody tr th {
  border-left: 1px solid var(--brand-main);
  border-top: 1px solid var(--brand-main);
  font-size: 12px;
}

.brief tbody tr td {
  text-align: left;
}

.brief tbody tr th {
  text-align: center;
  font-weight: 600;
}

.brief tbody tr:first-child td,
.brief tbody tr:first-child th {
  border-top: none;
}

.brief tbody tr td:first-child,
.brief tbody tr th:first-child {
  border-left: none;
}

.brief caption {
  font-size: 18px;
  font-weight: 700;
}

.brief thead td,
.brief thead th {
  border-top: 1px solid var(--brand-main);
  font-size: 14px;
  text-align: center;
  border-radius: 10px 10px 0 0;
  color: #ffffff;
  background-color: var(--brand-main);
}

.brief tfoot td,
.brief tfoot th {
  border-top: 1px solid var(--brand-main);
  font-size: 12px;
  text-align: center;
  border-radius: 0 0 10px 10px;
  color: #ffffff;
  background-color: var(--brand-main);
}

/* 编辑表：label + 输入型（灰色边框） */
.editext,
.editex,
.edit {
  background-color: #ffffff;
  color: #111827;
  font-size: 12px;
}

.editext,
.editex {
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.edit {
  border-right: 1px solid #111827;
  border-bottom: 1px solid #111827;
}

.editext tr,
.editex tr,
.edit tr {
  height: 30px;
}

.editext td,
.editex td,
.edit td {
  font-size: 12px;
  text-align: left;
}

.editext th,
.editex th,
.edit th {
  font-size: 12px;
  text-align: center;
  font-weight: 600;
}

/* 布局表（作为排版用） */
table.layout {
  color: #111827;
  font-size: 14px;
  font-family: var(--font-main);
}

/* ========================================================================== */
/* 列表 display / print / none / list                                        */
/* ========================================================================== */

table.display {
  border: 0;
  margin: 0;
  font-size: 12px;
  width: 100%;
}

.display td {
  border-bottom: 1px solid #e5e7eb;
}

.display tr {
  height: 35px;
}

.display th {
  text-align: center;
}

/* 打印表格 */
table.print {
  border-right: 2px solid #111827;
  border-bottom: 2px solid #111827;
  border-top: 1px solid #111827;
  border-left: 1px solid #111827;
  background-color: #ffffff;
  color: #111827;
  font-size: 12px;
  width: 100%;
}

.print caption {
  font-size: 18px;
  font-family: var(--font-main);
  font-weight: 700;
}

.print td,
.print th {
  border-left: 1px solid #111827;
  border-top: 1px solid #111827;
  font-size: 12px;
}

.print td {
  text-align: left;
}

.print th {
  text-align: center;
}

.print tr {
  height: 24px;
}

/* 空框架简表 */
table.none {
  border: 0;
  background-color: #ffffff;
  color: #111827;
  font-size: 12px;
}

.none td,
.none th {
  border: 0;
  font-size: 12px;
  text-align: center;
}

/* 标准列表（黑色边框老风格 → 现代化） */
table.list {
  border-right: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #111827;
  font-size: 13px;
  font-family: var(--font-main);
  width: 100%;
}

.list tr {
  height: 30px;
}

.list td,
.list th {
  border-left: 1px solid #d1d5db;
  border-top: 1px solid #d1d5db;
  font-size: 12px;
}

.list td {
  text-align: left;
  background-color: #ffffff;
}

.list th {
  text-align: center;
  color: #ffffff;
  background: linear-gradient(180deg,#4b5563,#111827);
}

.list input {
  border: 0;
  font-size: 12px;
  background-color: transparent;
}

.list caption {
  font-weight: 600;
  font-size: 13px;
}

/* ========================================================================== */
/* Panel 面板体系（Bootstrap 风兼容）                                        */
/* ========================================================================== */

.panel {
  box-sizing: border-box;
  margin-bottom: 16px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.panel-body {
  padding: 12px 15px;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  font-weight: 600;
  background: linear-gradient(90deg,#4da3ff,#1e6fdc);
  color: #ffffff;
}

.panel-title {
  margin: 0;
  font-size: 15px;
}

.panel-footer {
  padding: 10px 15px;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-bottom-right-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

/* 主色面板 */
.panel-primary {
  border-color: var(--brand-main);
}

.panel-primary > .panel-heading {
  background: linear-gradient(90deg,#4da3ff,#1e6fdc);
  border-color: var(--brand-main);
  color: #ffffff;
}

/* 其他状态面板简化为柔和配色 */
.panel-success {
  border-color: #bbf7d0;
}

.panel-success > .panel-heading {
  color: #166534;
  background-color: #dcfce7;
  border-color: #bbf7d0;
}

.panel-info {
  border-color: #bfdbfe;
}

.panel-info > .panel-heading {
  color: #1d4ed8;
  background-color: #dbeafe;
  border-color: #bfdbfe;
}

.panel-warning {
  border-color: #fed7aa;
}

.panel-warning > .panel-heading {
  color: #92400e;
  background-color: #ffedd5;
  border-color: #fed7aa;
}

.panel-danger {
  border-color: #fecaca;
}

.panel-danger > .panel-heading {
  color: #b91c1c;
  background-color: #fee2e2;
  border-color: #fecaca;
}

/* ========================================================================== */
/* Split 分隔区                                                               */
/* ========================================================================== */

div.split_vertical,
div.split_horizontal {
  border: 0;
  background: #f3f4f6;
}

/* ========================================================================== */
/* 兼容性：状态条 / 其他散落类                                               */
/* ========================================================================== */

div.statusContain {
  border: none;
  margin: 0;
  background-color: #e5e7eb;
  height: 30px;
}

.status {
  border: none;
  margin-left: 0;
  color: #111827;
  font-size: 12px;
}

.status tr {
  height: 22px;
}

.status td {
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid #9ca3af;
  border-top: 1px solid #9ca3af;
  font-size: 12px;
  text-align: center;
}

/* 普通状态按钮 */
td.status_button_normal {
  border: 1px solid #9ca3af;
  background-color: #fee2e2;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  color: #b91c1c;
  font-weight: 600;
}

/* 点击状态按钮 */
td.status_button_click {
  border: 1px solid #16a34a;
  background-color: #bbf7d0;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  color: #166534;
  font-weight: 600;
}

td.status_panel {
  border: none;
  font-size: 12px;
  text-align: center;
  color: #4b5563;
  font-weight: 600;
}

td.status_image {
  border: none;
  font-size: 12px;
  cursor: pointer;
}

/* ========================================================================== */
/* 结束                                                                       */
/* ========================================================================== */