/* =============================================================
   开广纺纤生产管理系统 v1.0 · 全局样式
   配色取自公司 LOGO：亮蓝 #28A0E0 / 深蓝 #102880
   ============================================================= */
:root{
  --brand:#1573B0;          /* 主操作色（白字对比度 4.8:1，满足可读性） */
  --brand-dark:#116394;
  --brand-2:#28A0E0;        /* LOGO 亮蓝：强调、聚焦、高亮 */
  --brand-deep:#102880;     /* LOGO 深蓝：标题、侧栏 */
  --brand-soft:#EAF5FD;
  --bg:#F2F5F9;
  --panel:#FFFFFF;
  --ink:#182438;
  --ink-2:#5C6A7E;
  --ink-3:#8B97A8;
  --line:#E3E9F1;
  --line-2:#EFF3F8;
  --side-1:#0C1A38;
  --side-2:#122A57;
  --ok:#1F9D5B;
  --warn:#D9822B;
  --danger:#D33A3A;
  --shadow-sm:0 1px 2px rgba(16,40,128,.06),0 2px 8px rgba(16,40,128,.05);
  --shadow-md:0 8px 26px rgba(16,40,128,.10);
  --shadow-lg:0 30px 80px rgba(6,16,40,.45);
  --radius:12px;
  --radius-sm:9px;
  --sidebar-w:242px;
  --topbar-h:60px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
a{color:var(--brand);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#CBD6E4;border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#AEBCCE;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 启动loading ---------- */
.boot{padding:80px 20px;text-align:center;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:10px;font-size:13.5px}
.spinner{width:17px;height:17px;border:2px solid rgba(40,160,224,.25);border-top-color:var(--brand-2);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* =============================================================
   登录页
   ============================================================= */
.login-screen{
  position:fixed;inset:0;z-index:100;padding:24px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(1100px 620px at 8% 4%, #1C4A8F 0%, rgba(28,74,143,0) 62%),
    radial-gradient(900px 520px at 96% 100%, #0F3D6E 0%, rgba(15,61,110,0) 60%),
    linear-gradient(140deg,#091430 0%,#102A5C 52%,#0B1B3C 100%);
}
.login-wrap{
  width:min(1000px,100%);display:grid;grid-template-columns:1.06fr .94fr;
  background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);
  animation:lpop .34s ease;
}
@keyframes lpop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 左侧品牌区 */
.login-hero{
  position:relative;padding:46px 42px;display:flex;flex-direction:column;color:#fff;
  background:
    radial-gradient(560px 300px at 88% 6%, rgba(40,160,224,.40), rgba(40,160,224,0) 66%),
    radial-gradient(420px 320px at 0% 100%, rgba(40,160,224,.18), rgba(40,160,224,0) 70%),
    linear-gradient(160deg,#102A5C 0%,#0C1A38 100%);
}
.login-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 60% at 70% 30%,#000,transparent 75%);
          mask-image:radial-gradient(70% 60% at 70% 30%,#000,transparent 75%);
}
.hero-logo{width:212px;max-width:76%;height:auto;position:relative;z-index:1;filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}
.hero-badge{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  margin-top:26px;padding:4px 12px;border-radius:20px;font-size:11.5px;letter-spacing:.6px;
  color:#BFE3F8;background:rgba(40,160,224,.16);border:1px solid rgba(40,160,224,.42);
}
.hero-title{position:relative;z-index:1;margin:14px 0 6px;font-size:25px;font-weight:700;letter-spacing:1px;line-height:1.35}
.hero-sub{position:relative;z-index:1;margin:0;color:#A9C3E4;font-size:13.5px;letter-spacing:.4px}
.hero-feats{position:relative;z-index:1;list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.hero-feats li{position:relative;padding-left:24px;font-size:13px;color:#CFDDEF}
.hero-feats li::before{
  content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:4px;
  background:linear-gradient(135deg,var(--brand-2),#1B7BC4);box-shadow:0 0 0 3px rgba(40,160,224,.16);
}
.hero-foot{position:relative;z-index:1;margin-top:auto;padding-top:28px;font-size:11.5px;color:#7E96BB;letter-spacing:.4px}

/* 右侧表单区 */
.login-panel{display:flex;align-items:center;justify-content:center;padding:46px 44px;background:#fff}
.login-card{width:100%;max-width:336px}
.login-brand{display:none;align-items:center;gap:11px;margin-bottom:24px}
.login-brand img{width:38px;height:auto}
.login-brand .brand-title{color:var(--brand-deep);font-weight:700;font-size:15px}
.login-brand .brand-sub{font-size:11.5px;color:var(--ink-3);letter-spacing:.5px}
.login-title{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 4px;letter-spacing:.5px}
.login-desc{font-size:12.5px;color:var(--ink-3);margin:0 0 22px}
.login-form .field{margin-bottom:15px}
.login-form label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px;font-weight:500}
.login-form input{padding:11px 13px}
.login-btn{margin-top:6px}
.login-err{color:var(--danger);font-size:12.5px;margin-top:10px;min-height:17px}
.login-foot{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--ink-3);text-align:center;letter-spacing:.3px}

@media(max-width:900px){
  .login-wrap{grid-template-columns:1fr;max-width:400px}
  .login-hero{display:none}
  .login-brand{display:flex}
  .login-panel{padding:34px 26px}
}

/* =============================================================
   主框架
   ============================================================= */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--side-1) 0%,var(--side-2) 100%);
  color:#C7D3E6;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:11px;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-logo{width:30px;height:30px;flex:0 0 30px;filter:drop-shadow(0 2px 7px rgba(0,0,0,.4))}
.brand-text{min-width:0}
.brand-title{color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.4px;line-height:1.3;white-space:nowrap}
.brand-sub{font-size:11px;color:#8CA5CB;letter-spacing:.8px;margin-top:2px}
.brand-dot{width:12px;height:12px;border-radius:4px;background:var(--brand-2);box-shadow:0 0 0 4px rgba(40,160,224,.18)}

.nav{padding:8px 10px 20px;overflow-y:auto;flex:1}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);background-clip:content-box}
.nav-group{font-size:11px;color:#7B8FB4;padding:14px 12px 7px;letter-spacing:1.4px;font-weight:600}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:3px;
  border-radius:var(--radius-sm);color:#C7D3E6;cursor:pointer;font-size:13.5px;
  transition:background .16s,color .16s,box-shadow .16s;position:relative;
}
.nav-item .ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;opacity:.9}
.nav-item .ic svg{display:block}
.nav-item:hover{background:rgba(255,255,255,.075);color:#fff}
.nav-item.active{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(21,115,176,.45)}
.nav-item.active .ic{opacity:1}
.nav-item.muted{opacity:.45;cursor:not-allowed}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:var(--topbar-h);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 22px;
  position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:16.5px;margin:0;font-weight:600;letter-spacing:.4px;white-space:nowrap}
.topbar .spacer{flex:1}
.ver-tag{font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-soft);border:1px solid #CFE6F7;padding:2px 9px;border-radius:20px;letter-spacing:.4px}
.topbar .who{
  font-size:13px;color:var(--ink-2);background:#F4F7FB;border:1px solid var(--line);
  border-radius:20px;padding:5px 13px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
}
.topbar .who b{color:var(--ink)}
.topbar .who .role{font-size:11.5px;color:var(--brand);background:var(--brand-soft);border-radius:20px;padding:1px 8px}
.content{padding:22px;flex:1;overflow-y:auto}

/* 独立表格容器（订单/工序列表） */
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
.card .table td{word-break:break-word}

/* =============================================================
   卡片 / 栅格
   ============================================================= */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.card-h{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;background:#FCFDFF}
.card-h h3{margin:0;font-size:14.5px;font-weight:600;letter-spacing:.3px}
.card-b{padding:16px 18px}
.card-b>*:last-child{margin-bottom:0}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1180px){.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr}.sidebar{display:none}}

/* 汇总卡 */
.stat{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 15px 21px;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .16s,box-shadow .16s;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat .bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--brand-2),var(--brand))}
.stat .k{font-size:12.5px;color:var(--ink-2)}
.stat .v{font-size:27px;font-weight:700;margin-top:5px;letter-spacing:.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat.warn .bar{background:linear-gradient(180deg,#F0B44A,var(--warn))}
.stat.danger .bar{background:linear-gradient(180deg,#E87070,var(--danger))}
.stat.ok .bar{background:linear-gradient(180deg,#45C285,var(--ok))}
.stat.warn .v{color:#B96A15}
.stat.danger .v{color:#B92E2E}
.stat.ok .v{color:#177A47}

/* =============================================================
   表格
   ============================================================= */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th,.table td{padding:11px 14px;text-align:left}
.table th{
  color:var(--ink-2);font-weight:600;background:#F7FAFD;white-space:nowrap;
  border-bottom:1px solid var(--line);font-size:12.5px;letter-spacing:.3px;
}
.table td{border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background .14s}
.table tbody tr:hover td{background:#F6FAFE}
.table tr.warn-row td{background:#FFF9EC}
.table tr.danger-row td{background:#FEF0F0}
.table tr.warn-row:hover td{background:#FFF4DF}
.table tr.danger-row:hover td{background:#FDE6E6}
.table td a{color:var(--brand);font-weight:500}
.table td a:hover{text-decoration:underline}

/* 标签 */
.tag{display:inline-block;padding:2.5px 10px;border-radius:20px;font-size:12px;line-height:1.5;background:#EEF2F7;color:var(--ink-2);white-space:nowrap}
.tag.green{background:#E6F7EE;color:#1a7F4C}
.tag.orange{background:#FFF1E0;color:#C4621A}
.tag.red{background:#FDE7E7;color:#BE2B2B}
.tag.blue{background:#E7F1FD;color:#1B6FBF}
.tag.gray{background:#EEF2F7;color:#78859A}

/* =============================================================
   表单 / 按钮
   ============================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;
  font-size:13.5px;font-family:inherit;line-height:1.4;white-space:nowrap;
  transition:background .16s,border-color .16s,box-shadow .16s,transform .1s;
}
.btn:hover{border-color:#C9D6E6;background:#F7FAFD}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(21,115,176,.24)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);box-shadow:0 4px 14px rgba(21,115,176,.3)}
.btn-danger{background:#fff;border-color:#F0C6C6;color:#C22F2F}
.btn-danger:hover{background:#FDF0F0;border-color:#E7A9A9}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:#F1F5FA;border-color:transparent}
.btn-sm{padding:5px 11px;font-size:12.5px;border-radius:8px}
.btn-lg{padding:11px 16px;font-size:14.5px;border-radius:10px}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.input,.select{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);
  transition:border-color .16s,box-shadow .16s;
}
.input::placeholder{color:#A9B4C4}
.input:focus,.select:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(40,160,224,.15)}
.input:disabled,.select:disabled{background:#F4F7FB;color:#98A3B4;cursor:not-allowed}
select.select{
  appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6A7E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
}
input[type=file].input{padding:7px 10px;cursor:pointer}
input[type=checkbox]{accent-color:var(--brand);width:15px;height:15px;cursor:pointer}

.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:5px;font-weight:500}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar h3{letter-spacing:.3px}
.toolbar .spacer{flex:1}
.check{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;user-select:none}
.mini-label{font-size:11.5px;color:var(--ink-3);margin-bottom:4px;letter-spacing:.2px}

/* =============================================================
   高亮 / 部门板块 / 工序
   ============================================================= */
.warn-yellow{background:#FFF9EC !important}
.warn-red{background:#FEF0F0 !important}
.txt-red{color:#BE2B2B;font-weight:600}
.txt-orange{color:#C4621A;font-weight:600}

.dept-block{margin-bottom:16px}
.dept-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dept-head .name{font-weight:600;font-size:14px}
.rate{margin-left:auto;font-size:12.5px;color:var(--ink-3)}
.rate b{color:var(--brand);font-size:13.5px}

.proc{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px;background:#fff;transition:border-color .16s,box-shadow .16s}
.proc:last-child{margin-bottom:0}
.proc:hover{border-color:#CFE0F0;box-shadow:var(--shadow-sm)}
.proc.danger{border-color:#F1B9B9;background:#FFF8F8}
.proc .pname{font-weight:600;display:flex;align-items:center;gap:8px;font-size:14px}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
@media(max-width:900px){.proc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.proc-grid{grid-template-columns:1fr}}

/* =============================================================
   弹窗 / Toast
   ============================================================= */
#modal-root{position:fixed;inset:0;background:rgba(11,23,52,.5);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:90;padding:20px}
#modal-root.show{display:flex}
.modal{background:#fff;border-radius:16px;width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:mpop .18s ease}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--line-2);font-weight:600;font-size:15px;letter-spacing:.3px}
.modal-b{padding:18px 20px;overflow:auto}
.modal-f{padding:14px 20px;border-top:1px solid var(--line-2);display:flex;gap:10px;justify-content:flex-end;background:#FBFCFE;border-radius:0 0 16px 16px}
@keyframes mpop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

#toast-root{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#1B2A44;color:#fff;padding:10px 20px;border-radius:10px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.24);animation:tin .2s ease;letter-spacing:.3px}
.toast.ok{background:#1F9D5B}.toast.err{background:#D33A3A}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* =============================================================
   工具类
   ============================================================= */
.empty{padding:56px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}
.muted{color:var(--ink-3)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.flex{display:flex}
.gap8{gap:8px}
.center{align-items:center}