/* 机善行德绿色品牌主题：最后加载，用来统一覆盖基础样式。 */
:root {
  --green: #0ba36c;
  --green-dark: #087b54;
  --green-deep: #064d39;
  --green-soft: #e9f8f2;
  --nav: #062e25;
  --bg: #f4f7f6;
  --text: #14241f;
  --muted: #728079;
  --line: #e3ebe7;
}

/* 登录层默认显示，只有服务端确认会话有效后才隐藏，避免页面先闪出敏感数据。 */
.auth-screen { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 78% 8%, rgba(44,216,155,.22), transparent 30%), linear-gradient(135deg,#05291f,#087151 62%,#0aa16b); }
.auth-screen.hidden { display: none; }
.auth-card { width: min(430px,92vw); padding: 38px; border: 1px solid rgba(255,255,255,.55); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 28px 90px rgba(0,35,25,.3); }
.auth-logo { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 16px; color: #fff; background: linear-gradient(135deg,#20cf91,#087b54); font-size: 25px; font-weight: 800; box-shadow: 0 12px 30px rgba(11,163,108,.25); }
.brand-logo-image { display:block; object-fit:cover; padding:0; background:#fff; }
.auth-card h1 { margin: 8px 0 8px; font-size: 28px; }
.auth-card > p { margin: 0 0 24px; color: var(--muted); }
.auth-card form { display: grid; gap: 15px; }
.auth-card label { display: grid; gap: 7px; color: #4b6259; font-size: 12px; font-weight: 650; }
.auth-card input { width: 100%; padding: 13px 14px; border: 1px solid #d9e7e1; border-radius: 10px; background: #fbfdfc; font-size: 14px; }
.auth-card input:focus { outline: 0; border-color: #29b986; box-shadow: 0 0 0 3px rgba(34,185,132,.12); }
.auth-submit { width: 100%; padding: 13px!important; margin-top: 4px; }
.auth-error { min-height: 18px; color: #bd4238; font-size: 12px; }
.auth-card > small { display: block; margin-top: 18px; color: #8b9993; text-align: center; }
.user-pill { display: inline-flex; align-items: center; padding: 8px 11px; border-radius: 99px; color: #176247; background: #e8f7f1; font-size: 12px; font-weight: 650; }
.password-dialog { width: min(480px,94vw); }
.one-column { grid-template-columns: 1fr!important; }
.credential-box { display: grid; gap: 6px; margin: 8px 0 18px; padding: 18px; border: 1px solid #cce8dd; border-radius: 12px; background: #eff9f5; }
.credential-box label { color: #71867d; font-size: 11px; }
.credential-box strong { margin-bottom: 10px; color: #075f43; font-family: Consolas, monospace; font-size: 18px; word-break: break-all; user-select: all; }
.staff-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.role-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 18px 0 4px; padding: 15px; border: 1px solid #dceae4; border-radius: 12px; background: #f8fcfa; }
.role-picker legend { padding: 0 7px; color: #31574a; font-size: 12px; font-weight: 700; }
.role-picker label { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 10px; border: 1px solid #e5eee9; border-radius: 9px; background: #fff; cursor: pointer; }
.role-picker input { width: auto; accent-color: var(--green); }
.status-disabled { color: #8b5550!important; background: #f7e9e7!important; }
.ledger-subtitle { margin: 20px 18px 8px; color: #3b5f52; font-size: 13px; }

body { background: radial-gradient(circle at 80% -10%, #dff6ec 0, transparent 26%), var(--bg); }
aside { width: 238px; padding: 25px 15px; background: linear-gradient(180deg, #073c30 0%, #05281f 100%); box-shadow: 10px 0 40px rgba(5, 47, 36, .08); }
.brand { padding: 0 10px 22px; font-size: 20px; letter-spacing: .2px; }
.brand img { width:42px; height:42px; flex:none; border-radius:13px; object-fit:cover; box-shadow:0 8px 24px rgba(21,196,133,.22); }
.welcome-logo { width:104px; height:104px; border-radius:25px; object-fit:cover; box-shadow:0 18px 45px rgba(4,79,54,.22); }
.brand span { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #2bd69b, #08a26d); box-shadow: 0 8px 24px rgba(21, 196, 133, .28); }
.brand small { color: #78ac9c; letter-spacing: 1.5px; font-size: 9px; }
.nav-caption { margin: 8px 13px 8px; color: #588a7a; font-size: 10px; letter-spacing: 2px; }
nav { gap: 5px; }
nav button { position: relative; padding: 12px 14px; color: #9bbcb1; border-radius: 10px; transition: .18s ease; }
nav button:hover { background: rgba(255,255,255,.06); color: #d7eee7; transform: translateX(2px); }
nav button.active { background: linear-gradient(90deg, rgba(21,184,125,.25), rgba(21,184,125,.08)); color: #fff; box-shadow: inset 3px 0 #21ce91; }
.aside-foot { color: #6f9c8e; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); border-radius: 12px; padding: 12px; }
.online-dot { color: #b7ddcf; margin-bottom: 4px; }
.online-dot::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #31df9f; box-shadow: 0 0 0 4px rgba(49,223,159,.12); }

main { margin-left: 238px; width: calc(100% - 238px); max-width: 1700px; padding: 30px 38px 45px; }
header { margin-bottom: 22px; }
h1 { font-size: 26px; letter-spacing: -.6px; }
header p { color: #829089; }
.header-actions { display: flex; gap: 9px; }
.soft { padding: 10px 15px; border: 1px solid #dce8e3; background: rgba(255,255,255,.85); color: #40534b; border-radius: 9px; }
.mobile-link { text-decoration: none; display: inline-flex; align-items: center; }
.soft:hover { border-color: #acd9c7; background: #fff; color: var(--green-dark); }
.primary { border-radius: 9px!important; border: 0!important; box-shadow: 0 8px 20px rgba(11,163,108,.18); font-weight: 600; }

.welcome { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; min-height: 145px; margin-bottom: 17px; padding: 27px 31px; border-radius: 16px; color: #fff; background: linear-gradient(120deg, #087d57 0%, #0ca56f 58%, #17b77c 100%); box-shadow: 0 14px 35px rgba(9,126,87,.18); }
.welcome::before,.welcome::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); }
.welcome::before { width: 250px; height: 250px; right: -50px; top: -120px; }
.welcome::after { width: 170px; height: 170px; right: 90px; bottom: -130px; }
.welcome h2 { margin: 8px 0 8px; font-size: 23px; font-weight: 650; }
.welcome p { margin: 0; color: #c9f1e2; font-size: 13px; }
.eyebrow { color: #9be3c9; font-size: 9px; font-weight: 700; letter-spacing: 2.3px; }
.welcome-mark { z-index: 1; display: grid; place-items: center; width: 74px; height: 74px; margin-right: 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 23px; background: rgba(255,255,255,.1); font-size: 34px; font-weight: 800; transform: rotate(6deg); backdrop-filter: blur(8px); }

.cards { gap: 14px; }
.cards article { position: relative; overflow: hidden; border: 1px solid rgba(221,233,228,.9); border-radius: 14px; padding: 20px; box-shadow: 0 6px 18px rgba(22,60,47,.045); transition: .18s ease; }
.cards article:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22,60,47,.08); }
.cards .metric { padding-left: 72px; min-height: 122px; }
.metric-icon { position: absolute; left: 20px; top: 21px; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: #087c55; background: #e5f7f0; font-size: 13px; font-weight: 800; }
.metric.value .metric-icon { color: #7c6510; background: #fbf3cf; }
.metric.sales .metric-icon { color: #226ca5; background: #e7f2fb; }
.cards .metric.profit { background: linear-gradient(140deg, #0a694c, #087c57); }
.metric.profit .metric-icon { color: #fff; background: rgba(255,255,255,.14); }
.cards strong { letter-spacing: -.8px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .78fr); gap: 15px; }
.panel { border-color: rgba(221,232,227,.9); border-radius: 14px; box-shadow: 0 5px 18px rgba(22,60,47,.035); }
.panel-head { padding: 17px 19px; }
.panel-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.alerts #alert-list { padding: 8px 18px; }
.alert-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf2ef; }
.alert-dot { width: 9px; height: 9px; border-radius: 50%; background: #efb94f; box-shadow: 0 0 0 5px #fff6e4; }
.alert-item.danger .alert-dot { background: #ed6a68; box-shadow: 0 0 0 5px #fdeceb; }
.alert-item.good .alert-dot { background: #15b87d; box-shadow: 0 0 0 5px #e8f8f2; }
.alert-item div { flex: 1; }
.alert-item b { display: block; font-size: 13px; }
.alert-item small { color: var(--muted); }
.alert-item strong { font-size: 18px; }
.category-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 15px 18px 18px; }
.category-chips span { padding: 6px 9px; border-radius: 7px; color: #33705a; background: #edf8f4; font-size: 11px; }

.quick-filters { display: flex; gap: 7px; margin: 0 0 13px; overflow-x: auto; }
.quick-filters button { white-space: nowrap; padding: 8px 13px; color: #66766f; border: 1px solid #e0e9e5; border-radius: 99px; background: #fff; }
.quick-filters button:hover,.quick-filters button.active { color: #087c56; border-color: #9dd9c3; background: #eaf8f3; }
.toolbar { padding: 11px; border: 1px solid #e1eae6; border-radius: 12px; background: rgba(255,255,255,.75); }
.toolbar input,.toolbar select { background: #fff; }
table { font-size: 12px; }
th { padding: 11px 14px; color: #789087; background: #f8faf9; border-bottom: 1px solid #e9efec; }
td { padding: 13px 14px; border-color: #edf2ef; }
tbody tr { transition: .15s ease; }
tbody tr:hover td { background: #f6fbf9; }
.tag { color: #0a7954; background: #e7f7f1; }
.tag.status-qc { color: #966612; background: #fff3d9; }
.tag.status-repair { color: #a24b3d; background: #fce9e5; }
.tag.status-sold { color: #667273; background: #edf1f1; }
.tag.status-transit { color: #3169a3; background: #e9f2fb; }
.action-btn { margin-right: 4px; transition: .15s; }
.action-btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.action-btn.detail { color: #4f625b; background: #eef2f0; }

dialog { border-radius: 18px; box-shadow: 0 30px 90px rgba(1,40,29,.28); }
dialog::backdrop { background: rgba(3,25,19,.62); backdrop-filter: blur(3px); }
.modal-head { position: sticky; z-index: 2; top: -24px; padding: 4px 0 17px; background: #fff; }
.form-section-title { display: flex; align-items: center; gap: 9px; margin: 18px 0 12px; color: #31574a; font-size: 12px; font-weight: 700; }
.form-section-title::before { content: ''; width: 4px; height: 15px; border-radius: 4px; background: var(--green); }
.grid label { color: #53675f; }
input,select,textarea { transition: .15s ease; }
.profit-preview { margin-top: 16px; padding: 14px 16px; border-radius: 10px; color: #47705f; background: #edf8f4; text-align: right; }
.profit-preview strong { margin-left: 8px; color: #078055; font-size: 20px; }
.batch-guide { padding: 12px 14px; border: 1px solid #d6ebe2; border-radius: 10px; color: #47705f; background: #f0f9f5; font-size: 12px; }

.detail-dialog { width: min(820px,94vw); }
.detail-shell { padding: 25px; }
.detail-top { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.detail-top h2 { margin: 6px 0; font-size: 22px; }
.detail-top p { margin: 0; color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 18px 0; }
.detail-cell { min-height: 69px; padding: 11px 13px; border: 1px solid #e7eeeb; border-radius: 10px; background: #fbfcfc; }
.detail-cell label { display: block; margin-bottom: 6px; color: #8a9892; font-size: 10px; }
.detail-cell b { font-size: 13px; word-break: break-all; }
.detail-section { margin-top: 20px; }
.detail-section h3 { margin: 0 0 10px; color: #37594d; font-size: 13px; }
.flow-line { position: relative; margin-left: 7px; padding: 0 0 16px 20px; border-left: 2px solid #d9ebe4; }
.flow-line::before { content: ''; position: absolute; left: -6px; top: 2px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #16ad76; box-shadow: 0 0 0 1px #8ed6bd; }
.flow-line b { font-size: 12px; }
.flow-line p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }

@media (max-width: 1150px) { .dashboard-grid { grid-template-columns: 1fr; } .welcome-mark { display: none; } }
@media (max-width: 900px) { aside { width: 74px; } main { margin-left: 74px; width: calc(100% - 74px); padding: 22px; } .nav-caption { display:none; } .header-actions .soft { display: none; } .detail-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { main { padding: 15px; } .welcome { min-height: 125px; padding: 22px; } .welcome h2 { font-size: 19px; } .cards .metric { padding-left: 67px; } .dashboard-grid { display: block; } .dashboard-grid>.panel { margin-bottom: 14px; } .detail-grid { grid-template-columns: 1fr; } .header-actions { gap: 5px; } .role-picker { grid-template-columns: 1fr 1fr; } }