/* ============================================================
 * platform.css —— 全站公共样式（base.html 引入，所有页面共享）
 * 约定（D19）：公共样式一律写在这里；页面私有样式放各自的
 * static/css/<页面>.css；模板里不再写 <style>。
 * ============================================================ */

:root {
  --bar:#155b7a; --bar-dark:#0d4964; --bar-fg:#fff; --accent:#176f98;
  --primary:#176f98; --text:#1e292f; --link:#176f98;
  --border:#cfd6da; --workspace:#f1f3f4; --surface:#fff; --surface-soft:#f7f8f9;
  --hover:#e5f3fb; --muted:#68757c;
  --header-h:46px;
}
:root[data-theme="breeze"] {
  --bar:#213547; --bar-dark:#172638; --bar-fg:#fff; --accent:#00a4bd;
  --primary:#bd432b; --text:#33475b; --link:#007a8c;
  --border:#cbd6e2; --workspace:#f5f8fa; --surface:#fff; --surface-soft:#f5f8fa;
  --hover:#e5f5f8; --muted:#516f90;
  --header-h:54px;
}
* { box-sizing: border-box; }
body { margin:0; font-family:"Segoe UI", system-ui, Arial, sans-serif; color:var(--text); background:var(--workspace); font-size:14px; }
a { color:var(--link); }

/* ---------- 顶栏 ---------- */
header.topbar { background:var(--bar); color:var(--bar-fg); height:var(--header-h);
  padding:0 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--bar-dark);
  box-shadow:0 1px 3px rgba(0,0,0,.16); position:sticky; top:0; z-index:1100; }
header.topbar .brand { color:var(--bar-fg); display:flex; align-items:center; gap:7px; font-weight:600; font-size:18px; white-space:nowrap; letter-spacing:.1px; text-decoration:none; }
header.topbar .brand:focus-visible { outline:2px solid #fff; outline-offset:4px; }
header.topbar .brand-mark { width:25px; height:25px; border-radius:3px; object-fit:cover; background:#fff; }
header.topbar .spacer { flex:1; }
header.topbar .user { font-size:13px; opacity:.9; }
header.topbar .work-topbar { text-decoration:none; }
header.topbar .work-topbar:hover { text-decoration:none; }
header.topbar .work-topbar-badge { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; color:var(--bar-fg); font-size:13px; font-weight:600; line-height:1; }
header.topbar .work-topbar-badge[data-has-work="true"] { color:#f05a43; }
header.topbar .notification-topbar { text-decoration:none; }
header.topbar .notification-topbar:hover { text-decoration:none; }
header.topbar .notification-topbar-badge { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; color:var(--bar-fg); font-size:13px; font-weight:600; line-height:1; }
header.topbar .notification-topbar-badge[data-has-notifications="true"] { color:#f05a43; }

/* 顶栏应用菜单：section 下拉 */
nav.topnav { display:flex; align-items:center; height:100%; margin-left:6px; }
nav.topnav > a, nav.topnav .dd-label {
  display:flex; align-items:center; height:100%; padding:0 13px; font-size:13px;
  color:var(--bar-fg); opacity:.96; text-decoration:none; cursor:pointer; white-space:nowrap; }
nav.topnav button.dd-label { border:0; border-radius:0; background:transparent; font:inherit; }
nav.topnav > a:hover, nav.topnav .dd:hover .dd-label { background:var(--bar-dark); opacity:1; }
nav.topnav .dd { position:relative; height:100%; }
nav.topnav .dd-menu { display:none; position:absolute; top:100%; left:0; min-width:200px;
  background:#fff; border:1px solid #aeb9bf; border-top:2px solid #005f99;
  box-shadow:0 5px 15px rgba(0,0,0,.2); padding:3px 0; z-index:1200; }
nav.topnav .dd:hover .dd-menu, nav.topnav .dd:focus-within .dd-menu { display:block; }
nav.topnav .dd.open .dd-menu { display:block; }
nav.topnav .dd-menu a { display:block; padding:7px 14px; color:#26343b;
  text-decoration:none; font-size:13px; white-space:nowrap; }
nav.topnav .dd-menu a:hover { background:#e5f3fb; color:var(--accent); }

[data-theme="breeze"] header.topbar { padding:0 20px; box-shadow:0 2px 8px rgba(33,53,71,.18); }
[data-theme="breeze"] header.topbar .brand { font-size:19px; font-weight:700; }
[data-theme="breeze"] header.topbar .brand-mark { background:#fff; border-radius:6px; }
[data-theme="breeze"] nav.topnav > a,
[data-theme="breeze"] nav.topnav .dd-label { padding:0 15px; font-weight:600; }
[data-theme="breeze"] nav.topnav .dd-menu { border:0; border-radius:0 0 8px 8px; overflow:hidden; }
[data-theme="breeze"] nav.topnav .dd-menu a:hover { background:var(--hover); color:var(--link); }

/* 顶栏右侧图标按钮（帮助/设置） */
header.topbar .icon-btn { width:26px; height:26px; border-radius:50%; flex:none;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.1);
  color:var(--bar-fg); cursor:pointer; font-size:14px; line-height:1; padding:0; }
header.topbar .icon-btn:hover { background:rgba(255,255,255,.25); }

header.topbar form.logout { display:inline; margin:0; }
header.topbar form.logout button { background:none; border:none; color:var(--bar-fg);
  font-size:13px; cursor:pointer; padding:0; text-decoration:underline; opacity:.9; }
header.topbar a.login { color:var(--bar-fg); font-size:13px; }

/* ---------- 弹窗（帮助/设置） ---------- */
dialog { border:none; border-radius:8px; padding:0; min-width:400px; max-width:540px;
         box-shadow:0 12px 40px rgba(0,0,0,.28); }
dialog::backdrop { background:rgba(0,0,0,.35); }
dialog[data-draggable] [data-drag-handle] { cursor:move; }
dialog.is-dragging { user-select:none; }
.dlg-head { display:flex; align-items:center; padding:11px 16px;
            background:var(--bar); color:#fff; font-size:14px; font-weight:600; }
.dlg-head .dlg-close { margin-left:auto; background:none; border:none; color:#fff;
                       font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.dlg-body { padding:16px 18px; font-size:13px; color:#333; }
.dlg-body ul { margin:0; padding-left:18px; }
.dlg-body li { margin:6px 0; line-height:1.6; }
.dlg-body h4 { margin:0 0 10px; font-size:13px; color:#264b5d; }
.dlg-body hr { border:none; border-top:1px solid var(--border); margin:16px 0; }
.set-row { display:flex; align-items:center; gap:10px; margin:10px 0; }
.set-row label { width:96px; color:#555; flex:none; }
.set-row input, .set-row select { flex:1; padding:6px 8px; border:1px solid var(--border);
                                  border-radius:4px; font:inherit; font-size:13px; }
.dlg-body .btn { background:var(--bar); color:#fff; border:none; border-radius:4px;
                 padding:7px 16px; cursor:pointer; font-size:13px; }
.dlg-body .btn:hover { opacity:.92; }
.pw-msg { font-size:12px; margin-top:8px; display:none; }
.pw-msg.ok  { display:block; color:#1a7f37; }
.pw-msg.err { display:block; color:#c0392b; white-space:pre-line; }
.dlg-note { color:#999; font-size:12px; }
dialog#dlg-help { width:min(980px, 92vw); max-width:none; min-height:min(640px, 88vh); max-height:min(820px, 88vh); }
.help-center { width:auto; max-height:inherit; overflow:hidden; padding:0; display:grid; grid-template-columns:205px minmax(0,1fr); align-items:start; }
.help-tabs { display:flex; flex-direction:column; gap:2px; width:auto; padding:14px 10px; background:#f1f5f7; border-right:1px solid var(--border); }
.help-tab { border:0; border-radius:4px; background:transparent; color:var(--text); cursor:pointer; padding:10px 12px; text-align:left; font:inherit; line-height:1.35; }
.help-tab:hover { background:#dcebf1; }
.help-tab.is-active { background:var(--bar); color:#fff; }
.help-panels { min-width:0; max-height:calc(88vh - 90px); padding:22px 26px; overflow:auto; }
.help-panel { line-height:1.7; }
.help-panel[hidden] { display:none; }
.help-panel h3 { margin:0 0 10px; color:var(--bar); font-size:19px; }
.help-panel h4 { margin:20px 0 5px; color:#264b5d; font-size:14px; }
.help-panel p { margin:0 0 12px; }
@media (max-width:720px) {
  dialog#dlg-help { width:94vw; min-height:min(520px, 84vh); max-height:84vh; }
  .help-center { width:auto; display:block; }
  .help-tabs { flex-direction:row; width:auto; overflow-x:auto; border-right:0; border-bottom:1px solid var(--border); }
  .help-tab { white-space:nowrap; }
  .help-panels { max-height:58vh; }
}

/* ---------- 内容区 ---------- */
main { min-height:calc(100vh - var(--header-h)); padding:14px 18px 24px; overflow-x:auto; }
body.embedded header.topbar,
body.embedded > dialog#dlg-help,
body.embedded > dialog#dlg-settings { display:none; }
body.embedded main { min-height:100vh; padding:10px 12px 16px; }
body.embedded .page-heading { min-height:40px; margin-bottom:8px; padding:5px 8px; }
h1.page-title { font-size:19px; font-weight:500; margin:0 0 12px; }

/* ---------- 可写业务页 adapter ---------- */
.page-heading { display:flex; align-items:center; gap:16px; min-height:48px; margin-bottom:12px;
  padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-bottom:2px solid var(--accent); }
.page-heading h1.page-title { margin:0; }
.page-actions { margin-left:auto; display:flex; gap:8px; }
.btn { display:inline-block; padding:6px 13px; border:1px solid #aeb9bf; border-radius:2px;
  background:#fff; color:#26343d; text-decoration:none; cursor:pointer; font:inherit; font-size:13px; line-height:1.35; }
.btn:hover { background:#e8f3f9; border-color:#6d9db6; }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--bar-dark); color:#fff; }
.btn-danger { background:#a61b1b; border-color:#a61b1b; color:#fff; }
.alert { padding:9px 11px; margin:0 0 10px; border-radius:2px; font-size:13px; }
.alert-error { color:#8a1717; background:#fff0f0; border:1px solid #e3aaaa; }
.alert-success { color:#17623a; background:#eef8f1; border:1px solid #a8d5b6; }
.alert-success p { margin:0 0 4px; }
.alert-success p:last-child { margin-bottom:0; }
.form-card { max-width:900px; padding:20px; border:1px solid var(--border); border-radius:2px;
  background:#fff; box-shadow:none; }
.form-card-wide { max-width:1200px; }
.login-card { width:min(420px,calc(100% - 32px)); margin:56px auto; padding:24px;
  border:1px solid var(--border); border-top:3px solid var(--accent); background:#fff;
  box-shadow:0 3px 14px rgba(30,48,60,.12); }
.login-card h1 { margin:0 0 6px; font-size:24px; }
.login-note { margin:0 0 18px; color:#68757c; }
.login-field { display:grid; gap:5px; margin:0 0 14px; }
.login-field label { color:#4e5d65; font-size:13px; font-weight:600; }
.login-field input { box-sizing:border-box; width:100%; min-height:38px; padding:7px 9px;
  border:1px solid #aeb9bf; border-radius:2px; font:inherit; }
.login-field input:focus { outline:2px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-color:var(--accent); }
.form-actions { display:flex; gap:8px; margin-top:20px; padding-top:14px; border-top:1px solid var(--border); }
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.detail-field { padding:10px; background:var(--surface-soft); border:1px solid #e0e5e8; border-radius:2px; }
.detail-field dt { color:#68757c; font-size:12px; }
.detail-field dd { margin:4px 0 0; }
[data-theme="breeze"] .page-heading { border-radius:8px; border-bottom-color:var(--accent); box-shadow:0 1px 3px rgba(33,53,71,.08); }
[data-theme="breeze"] .form-card,
[data-theme="breeze"] .login-card { border-radius:8px; box-shadow:0 4px 18px rgba(33,53,71,.10); }
[data-theme="breeze"] .btn { border-radius:5px; }
[data-theme="breeze"] .btn-primary:hover { background:#a83822; border-color:#a83822; }
[data-theme="breeze"] .dlg-body .btn { background:var(--primary); }

.home-page { width:100%; max-width:1320px; margin:auto; }
.home-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.home-heading p { color:var(--muted); margin:5px 0 0; }
.home-sections { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; margin:14px auto 0; }
.home-app { --section-accent:#176f98; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:6px 5px; color:var(--text); text-align:center; text-decoration:none; background:transparent; border:0; }
.home-app[data-section="acsic_purchases"] { --section-accent:#7658a8; }
.home-app[data-section="acsic_sales"] { --section-accent:#267f65; }
.home-app[data-section="finance"],.home-app[data-section="acsic_accounting"] { --section-accent:#a56716; }
.home-app[data-section="platform"] { --section-accent:#267d91; }
.home-app[data-section="admin"] { --section-accent:#97556e; }
.home-app-group { color:var(--section-accent); font-size:16px; font-weight:700; line-height:20px; min-height:20px; }
.home-app strong { font-size:12px; font-weight:600; line-height:13px; min-height:26px; overflow-wrap:anywhere; }
.home-app-tile { display:flex; align-items:center; justify-content:center; width:88px; height:88px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:linear-gradient(145deg,#274c67,#173246); box-shadow:0 5px 12px rgba(18,45,62,.18); transition:transform .14s ease,box-shadow .14s ease; }
.home-app-icon { height:68px; width:68px; }
.home-app:hover .home-app-tile,.home-app:focus-visible .home-app-tile { box-shadow:0 8px 18px rgba(18,45,62,.28); transform:translateY(-3px); }
.home-app:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[data-theme="breeze"] .home-app-tile { background:linear-gradient(145deg,#fff,#edf3f8); }
@media(max-width:760px){.home-sections{grid-template-columns:repeat(4,minmax(0,1fr))}.home-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:380px){.home-sections{grid-template-columns:repeat(3,minmax(0,1fr))}}
.error-page { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--accent); margin:8vh auto; max-width:640px; padding:34px; }
.error-page .error-code { color:var(--accent); font-size:44px; font-weight:700; line-height:1; margin:0; }
.error-page h1 { margin:10px 0; }
.error-page > p:not(.error-code) { color:var(--muted); }

/* DOC-WHO document workspace */
.card { background:var(--surface); border:1px solid var(--border); padding:16px; margin:0 0 12px; }
.button { display:inline-block; padding:7px 13px; border:1px solid #aeb9bf; border-radius:3px; background:#fff; color:var(--text); text-decoration:none; cursor:pointer; font:inherit; }
.button.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.button:hover { filter:brightness(.97); }
.document-toolbar form { display:flex; gap:8px; }
.document-toolbar input { min-height:34px; flex:1; padding:5px 8px; border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; }
.data-table th,.data-table td { border-bottom:1px solid var(--border); padding:9px 10px; text-align:left; }
.data-table th { background:var(--surface-soft); color:var(--muted); font-weight:600; }
.data-table a { color:var(--accent); }
.document-meta dl { display:grid; grid-template-columns:160px 1fr; gap:8px 16px; margin:0; }
.document-meta dt { color:var(--muted); }
.document-meta dd { margin:0; overflow-wrap:anywhere; }
.muted { color:var(--muted); }
.editor-launch { min-height:140px; }
.platform-busy { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.platform-busy[hidden] { display:none; }
.platform-busy-ring { width:56px; height:56px; box-sizing:border-box; border:6px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color:var(--accent); border-radius:50%; background:var(--surface); box-shadow:0 2px 12px rgba(0,0,0,.18); animation:platform-busy-spin .7s linear infinite; }
.platform-busy-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes platform-busy-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .platform-busy-ring { animation-duration:2.4s; } }
@media (max-width: 760px) {
  header.topbar { height:auto; min-height:var(--header-h); flex-wrap:wrap; padding:7px 10px; }
  nav.topnav { order:3; width:100%; overflow-x:auto; }
  main { padding:14px 12px; }
  .page-heading { align-items:flex-start; }
}