/* 兰华集团安全消防管理平台 — 科技风主题样式 */
/* 设计基准：背景 #0a1929，主色 #00d4ff，卡片 #112240，文字 #cfe8ff */

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

html, body {
    background: #0a1929;
    color: #cfe8ff;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: #00d4ff; text-decoration: none; }
a:hover { color: #5ce0ff; }

/* ===== 后台布局 ===== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 220px;
    background: #06111f;
    border-right: 1px solid #1a3a5c;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    overflow-y: auto;
    z-index: 100;
}
.sidebar .logo {
    padding: 18px 16px;
    font-size: 16px;
    font-weight: bold;
    color: #00d4ff;
    border-bottom: 1px solid #1a3a5c;
    letter-spacing: 1px;
}
.sidebar .logo small { display: block; font-size: 11px; color: #6b8fb5; font-weight: normal; margin-top: 4px; }
.sidebar .menu { list-style: none; padding: 10px 0; }
.sidebar .menu li a {
    display: block;
    padding: 10px 18px;
    color: #9bc4e8;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.sidebar .menu li a:hover { background: #0f2540; color: #fff; }
.sidebar .menu li a.active {
    background: linear-gradient(90deg, rgba(0,212,255,.15), transparent);
    color: #00d4ff;
    border-left-color: #00d4ff;
}

.main {
    margin-left: 220px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.topbar {
    height: 52px;
    background: #0d1e33;
    border-bottom: 1px solid #1a3a5c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar .title { color: #cfe8ff; font-size: 15px; }
.topbar .userinfo { color: #9bc4e8; font-size: 13px; }
.topbar .userinfo a { margin-left: 12px; }

.content { padding: 20px; flex: 1; }

/* ===== 卡片 ===== */
.card {
    background: #112240;
    border: 1px solid #1a3a5c;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.card h3 {
    color: #00d4ff;
    font-size: 15px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #1a3a5c;
}

/* 统计卡片 */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.stat-card {
    background: #112240;
    border: 1px solid #1a3a5c;
    border-radius: 8px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: #00d4ff;
}
.stat-card .label { color: #6b8fb5; font-size: 13px; }
.stat-card .num { font-size: 28px; color: #00d4ff; font-weight: bold; margin-top: 6px; }
.stat-card.warn::before { background: #ff9f43; }
.stat-card.warn .num { color: #ff9f43; }
.stat-card.danger::before { background: #ff5e57; }
.stat-card.danger .num { color: #ff5e57; }
.stat-card.ok::before { background: #2ed573; }
.stat-card.ok .num { color: #2ed573; }

/* ===== 表格 ===== */
table.tbl {
    width: 100%;
    border-collapse: collapse;
    background: #0d1e33;
    border-radius: 6px;
    overflow: hidden;
}
table.tbl th, table.tbl td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #1a3a5c;
    font-size: 13px;
}
table.tbl th {
    background: #0a1830;
    color: #00d4ff;
    font-weight: normal;
}
table.tbl tbody tr:hover { background: #163052; }
table.tbl tbody tr:last-child td { border-bottom: none; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}
.badge.open { background: rgba(255,159,67,.15); color: #ff9f43; }
.badge.closed { background: rgba(46,213,115,.15); color: #2ed573; }
.badge.normal { background: rgba(46,213,115,.15); color: #2ed573; }
.badge.abnormal { background: rgba(255,94,87,.15); color: #ff5e57; }
.badge.pending { background: rgba(255,159,67,.15); color: #ff9f43; }
.badge.processing { background: rgba(0,212,255,.15); color: #00d4ff; }
.badge.done { background: rgba(46,213,115,.15); color: #2ed573; }
.badge.disabled { background: rgba(107,143,181,.15); color: #6b8fb5; }

/* ===== 按钮 ===== */
.btn {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: #0a1929;
    font-weight: bold;
    transition: opacity .2s;
}
.btn:hover { opacity: .85; color: #0a1929; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.ghost {
    background: transparent;
    color: #00d4ff;
    border: 1px solid #00d4ff;
}
.btn.danger { background: linear-gradient(135deg, #ff5e57, #cc3a35); color: #fff; }
.btn.warn { background: linear-gradient(135deg, #ff9f43, #cc7a25); color: #fff; }
.btn-row { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== 表单 ===== */
.form-grid { display: grid; grid-template-columns: 180px 1fr; gap: 10px 14px; align-items: center; }
.form-grid label { color: #9bc4e8; font-size: 13px; text-align: right; }
input[type=text], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=datetime-local], input[type=time],
select, textarea {
    width: 100%;
    padding: 8px 10px;
    background: #0a1830;
    border: 1px solid #1a3a5c;
    border-radius: 4px;
    color: #cfe8ff;
    font-family: inherit;
    font-size: 13px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 0 2px rgba(0,212,255,.15);
}
textarea { resize: vertical; min-height: 80px; }
.checkbox-row { display: flex; align-items: center; gap: 6px; }
.checkbox-row input[type=checkbox] { width: auto; }

/* 时间线 */
.timeline { position: relative; padding-left: 24px; margin-top: 10px; }
.timeline::before {
    content: '';
    position: absolute; left: 8px; top: 0; bottom: 0;
    width: 2px; background: #1a3a5c;
}
.timeline .tl-item { position: relative; padding-bottom: 16px; }
.timeline .tl-item::before {
    content: '';
    position: absolute; left: -20px; top: 6px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #00d4ff;
    box-shadow: 0 0 0 3px rgba(0,212,255,.2);
}
.timeline .tl-time { color: #6b8fb5; font-size: 12px; }
.timeline .tl-body { color: #cfe8ff; margin-top: 4px; }
.timeline .tl-body img { max-width: 200px; border-radius: 4px; margin-top: 6px; border: 1px solid #1a3a5c; }

/* Tab */
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid #1a3a5c; }
.tabs a {
    padding: 8px 18px;
    color: #9bc4e8;
    border-bottom: 2px solid transparent;
}
.tabs a.active { color: #00d4ff; border-bottom-color: #00d4ff; }

/* 提示条 */
.alert {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 13px;
}
.alert.info { background: rgba(0,212,255,.1); color: #00d4ff; border: 1px solid rgba(0,212,255,.3); }
.alert.ok { background: rgba(46,213,115,.1); color: #2ed573; border: 1px solid rgba(46,213,115,.3); }
.alert.err { background: rgba(255,94,87,.1); color: #ff5e57; border: 1px solid rgba(255,94,87,.3); }

/* 登录页 */
.login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, #0f2540 0%, #0a1929 70%);
}
.login-card {
    width: 360px;
    background: #112240;
    border: 1px solid #1a3a5c;
    border-radius: 8px;
    padding: 30px 28px;
    box-shadow: 0 0 40px rgba(0,212,255,.15);
}
.login-card h2 {
    color: #00d4ff;
    text-align: center;
    margin-bottom: 6px;
    font-size: 20px;
}
.login-card .sub {
    text-align: center; color: #6b8fb5; font-size: 12px; margin-bottom: 20px;
}
.login-card .form-grid { grid-template-columns: 1fr; gap: 14px; }
.login-card .form-grid label { text-align: left; }

/* 加载中 */
.btn.loading { opacity: .6; pointer-events: none; }

/* ===== 移动端母版 ===== */
.m-layout {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: #0a1929;
    padding-bottom: 20px;
}
.m-header {
    background: #0d1e33;
    padding: 14px 16px;
    text-align: center;
    color: #00d4ff;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #1a3a5c;
    position: sticky; top: 0;
}
.m-body { padding: 14px; }

.m-entry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}
.m-entry {
    background: #112240;
    border: 1px solid #1a3a5c;
    border-radius: 8px;
    padding: 22px 14px;
    text-align: center;
    color: #cfe8ff;
    display: block;
}
.m-entry .icon { font-size: 32px; margin-bottom: 8px; }
.m-entry .name { color: #00d4ff; font-size: 14px; }

.m-form-item { margin-bottom: 14px; }
.m-form-item label {
    display: block; color: #9bc4e8; font-size: 13px; margin-bottom: 6px;
}
.m-form-item label .req { color: #ff5e57; margin-left: 2px; }

.m-radio-row { display: flex; gap: 10px; }
.m-radio-row label {
    flex: 1; text-align: center; padding: 10px;
    background: #0d1e33; border: 1px solid #1a3a5c; border-radius: 4px;
    cursor: pointer; margin: 0;
}
.m-radio-row input { display: none; }
.m-radio-row input:checked + span { color: #00d4ff; font-weight: bold; }
.m-radio-row label:has(input:checked) { border-color: #00d4ff; background: rgba(0,212,255,.1); }

.m-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-check-grid label {
    background: #0d1e33; border: 1px solid #1a3a5c; border-radius: 4px;
    padding: 10px; display: flex; align-items: center; gap: 6px;
}
.m-check-grid label:has(input:checked) { border-color: #2ed573; background: rgba(46,213,115,.08); }

.m-photo-preview img {
    max-width: 100%; border-radius: 4px; margin-top: 8px;
    border: 1px solid #1a3a5c;
}

.btn.block { display: block; width: 100%; padding: 12px; font-size: 15px; text-align: center; }

.m-info-card {
    background: #112240; border: 1px solid #1a3a5c; border-radius: 8px;
    padding: 12px 14px; margin-bottom: 12px;
}
.m-info-card .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.m-info-card .row .k { color: #6b8fb5; }
.m-info-card .row .v { color: #cfe8ff; }

/* 成功页 */
.m-success {
    text-align: center; padding: 60px 20px;
}
.m-success .circle {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(46,213,115,.15);
    color: #2ed573; font-size: 40px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.m-success h2 { color: #2ed573; margin-bottom: 10px; }
.m-success p { color: #9bc4e8; margin-bottom: 24px; }

/* ===== 响应式 ===== */
@media (max-width: 900px) {
    .sidebar { width: 60px; }
    .sidebar .logo small, .sidebar .menu li a span { display: none; }
    .sidebar .menu li a { padding: 12px; text-align: center; }
    .main { margin-left: 60px; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid label { text-align: left; }
}
@media (max-width: 600px) {
    .stat-row { grid-template-columns: 1fr; }
    table.tbl th, table.tbl td { padding: 8px 6px; font-size: 12px; }
}


/* 系统设置分组样式 */
.sidebar .menu .menu-group > a { font-weight: 600; color: #cfe8ff; cursor: pointer; }
.sidebar .menu .menu-sub { list-style: none; margin: 0; padding: 0; }
.sidebar .menu .menu-sub li a { padding-left: 34px; font-size: 13.5px; }
.sidebar .menu .menu-group-toggle .arr { color: #6b8fb5; font-size: 12px; }