/* Native, low-cost workspace skin. All domain forms remain in index.html. */
:root {
  --bg: #f4f5f7; --surface: #fff; --surface-strong: #f7f8fa;
  --ink: #222936; --muted: #657080; --line: #dce0e7;
  --brand: #2467d6; --brand-strong: #1752b2; --brand-soft: #e8f0ff;
  --blue: #2467d6; --blue-soft: #edf3ff; --radius: 18px;
  --shadow: 0 4px 20px rgba(27, 43, 65, .045);
}
.employee-workspace { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 15px; }
.employee-workspace .app-shell { grid-template-columns: 228px minmax(0, 1fr); }
.employee-workspace .sidebar { background: #eaecef; border-color: #dce0e7; padding: 24px 14px 14px; gap: 20px; overflow-y: auto; }
.employee-workspace .brand { padding: 0 6px 20px; border-color: #d5dae1; gap: 10px; }
.employee-workspace .brand-mark { border-radius: 13px; background: #253b5d; color: white; width: 38px; height: 38px; }
.employee-workspace .brand-title { font-family: inherit; font-size: 16px; color: #273246; letter-spacing: 0; }
.employee-workspace .brand-subtitle { color: #6a7380; font-size: 11px; }
.employee-workspace .nav-list { gap: 4px; }
.employee-workspace .nav-item { border-radius: 10px; min-height: 44px; color: #4a5668; font-size: 14px; grid-template-columns: 22px 1fr; padding: 7px 10px; }
.employee-workspace .nav-item.active { background: #d8e5fb; color: #164ea4; font-weight: 650; }
.employee-workspace .nav-item:hover { background: #dfe4ed; color: #164ea4; }
.workspace-nav-mark { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 7px; font-size: 11px; opacity: .8; }
.employee-workspace .sidebar-note { margin-top: auto; background: #e1e5ea; color: #586375; border-radius: 14px; font-size: 12px; }
.employee-workspace .main { padding: 24px 32px 72px; min-width: 0; }
.employee-workspace .topbar { align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.employee-workspace .topbar h1 { font-size: 26px; letter-spacing: -.5px; }
.employee-workspace .topbar p { font-size: 13px; color: var(--muted); }
.employee-workspace .top-actions { gap: 8px; flex-wrap: wrap; }
.employee-workspace .identity-switcher, .employee-workspace .timeout-control { border-radius: 10px; background: #fff; border-color: var(--line); font-size: 12px; }
.employee-workspace .panel { border-radius: 18px; border: 1px solid #dfe3e9; box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px; }
.employee-workspace .panel-heading { gap: 12px; flex-wrap: wrap; }
.employee-workspace .panel-heading h2 { font-size: 18px; color: #273246; }
.employee-workspace input, .employee-workspace select, .employee-workspace textarea { border-color: #d6dce5; border-radius: 10px; min-height: 40px; background: #fff; color: #253144; padding: 9px 11px; }
.employee-workspace input:focus, .employee-workspace select:focus, .employee-workspace textarea:focus { outline: 3px solid #c7ddff; outline-offset: 1px; border-color: #4b88e8; box-shadow: none; }
.employee-workspace input[readonly] { background: #f0f4fa; color: #526174; }
.employee-workspace label { color: #5d6878; font-size: 13px; }
.employee-workspace .primary-button, .employee-workspace .ghost-button { border-radius: 10px; min-height: 40px; padding: 8px 14px; }
.employee-workspace .primary-button { color: #fff; background: var(--brand); border-color: var(--brand); }
.employee-workspace .primary-button:hover { background: var(--brand-strong); }
.employee-workspace .ghost-button { color: #3d4b61; background: #fff; border-color: #d8dee7; }
.employee-workspace .danger-action { color: #b42318; border-color: #efcbc7; }
.employee-workspace .danger-action:hover { background: #fff0ed; }
.employee-workspace button:disabled { opacity: .5; cursor: not-allowed; }
.employee-workspace button:focus-visible, .employee-workspace a:focus-visible, .employee-workspace summary:focus-visible { outline: 3px solid #6da5ff; outline-offset: 3px; }
.employee-workspace .material-style-group, .employee-workspace .material-progress-card, .employee-workspace .style-items-table { border-radius: 14px; background: #f8f9fb; border-color: #dee3ea; }
.employee-workspace .upload-dropzone, .employee-workspace .file-drop-zone, .employee-workspace .production-upload { background: #f5f8fd; border-radius: 12px; border-color: #bacce6; }
.employee-workspace th { background: #f5f7fa; color: #657080; font-size: 12px; }
.employee-workspace td { background: #fff; border-color: #e6eaf0; font-size: 14px; }
.employee-workspace .table-wrap { border-radius: 12px; border: 1px solid #e4e8ee; overflow: auto; max-width: 100%; }
.employee-workspace .table-wrap thead th { position: sticky; top: 0; z-index: 1; }
.employee-workspace .table-wrap tbody tr:hover td { background: #fafcff; }
.employee-workspace .production-card, .employee-workspace .payment-card { border: 1px solid #e0e5ed; border-radius: 14px; box-shadow: none; }
.employee-workspace .metric { background: white; border-radius: 14px; box-shadow: none; border-color: #e0e5ed; }
.employee-workspace .meta-box { background: #f5f7fa; border-color: #e4e8ee; border-radius: 10px; }
.employee-workspace .role-entry { border-color: #e1e6ee; background: #f7f9fc; border-radius: 14px; }
.employee-workspace .mobile-module-index, .employee-workspace .mobile-panel-summary, .workspace-route-hidden { display: none !important; }
.workspace-tabs { display: flex; align-items: center; gap: 6px; margin: 0 0 22px; padding: 5px; background: #e9edf3; border: 1px solid #e0e5ed; border-radius: 12px; overflow-x: auto; }
.workspace-tab { border: none; background: transparent; white-space: nowrap; border-radius: 8px; padding: 10px 16px; color: #5e6877; font-size: 14px; min-height: 40px; }
.workspace-tab.active { background: #fff; color: #235fbc; box-shadow: 0 1px 4px #22375317; font-weight: 600; }
.workspace-hero { padding: 10px 0 20px; }
.workspace-hero h2 { margin: 10px 0; font-size: 29px; letter-spacing: -.5px; }
.workspace-hero p, .workspace-task-row p { color: var(--muted); font-size: 13px; margin: 6px 0; }
.workspace-eyebrow { color: #536d96; font-size: 12px; }
.workspace-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.workspace-stat-row article { border-radius: 17px; background: #fff; border: 1px solid #e0e5ed; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.workspace-stat-row article span { color: var(--muted); font-size: 13px; }
.workspace-stat-row article strong { font-size: 30px; font-weight: 650; }
.workspace-task-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px 0; border-bottom: 1px solid #e8ecf1; }
.workspace-task-row:last-child { border: none; }
.workspace-task-row strong { font-size: 15px; }
.workspace-task-row button { flex-shrink: 0; }
.workspace-welcome { display: flex; gap: 12px; align-items: center; padding: 16px 20px; background: #eaf2ff; border: 1px solid #d6e4fc; border-radius: 16px; margin-bottom: 20px; }
.workspace-welcome div { flex: 1; }
.workspace-welcome p { margin: 5px 0 0; color: #5e718e; font-size: 12px; }
.workspace-pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; padding-top: 14px; font-size: 12px; color: var(--muted); }
.workspace-pager span { margin-right: auto; }
.workspace-dialog { border: 1px solid #d8e0ec; border-radius: 22px; padding: 26px; width: min(650px, calc(100vw - 28px)); max-height: 86vh; overflow: auto; box-shadow: 0 20px 60px #12284933; color: var(--ink); }
.workspace-dialog::backdrop { background: #20334b55; }
.workspace-dialog p { line-height: 1.8; }
.workspace-dialog .card-actions { flex-wrap: wrap; margin: 22px 0; }
.workspace-entry-map { display: grid; gap: 8px; padding: 16px 0; }
.workspace-entry-map button { text-align: left; padding: 8px; }
.workspace-menu-toggle { display: none; }
.workspace-list-search { display: grid; gap: 6px; max-width: 480px; margin: 18px 0 12px; }
.employee-workspace .production-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.employee-workspace .production-form > *, .employee-workspace .material-style-group { min-width: 0; }
.employee-workspace .material-style-group { overflow-x: auto; }
.employee-workspace .material-item-row { min-width: 900px; }
.form-save-feedback, .form-draft-recovery { grid-column: 1 / -1; border: 1px solid #e0bf73; border-radius: 12px; background: #fff8e7; color: #805600; padding: 14px; font-size: 14px; line-height: 1.7; }
.form-save-feedback button, .form-draft-recovery button { margin: 8px 8px 0 0; }
.form-save-feedback[data-tone="success"] { color: #116548; background: #edf8f2; border-color: #b7dfcc; }
.form-save-feedback[data-tone="danger"] { color: #9b3228; background: #fff2ee; border-color: #eac2bc; }
@media (max-width: 1100px) { .employee-workspace .main { padding: 20px 20px 72px; } .employee-workspace .top-actions { width: 100%; } }
@media (max-width: 820px) {
  .employee-workspace .app-shell { display: block; }
  .employee-workspace .sidebar { display: none; position: fixed; width: min(300px, 85vw); inset: 0 auto 0 0; z-index: 60; box-shadow: 6px 0 30px #20334b35; height: 100dvh; }
  .employee-workspace.workspace-menu-open .sidebar { display: flex; }
  .employee-workspace .main { padding: 16px 12px calc(84px + env(safe-area-inset-bottom)); }
  .employee-workspace .topbar h1 { font-size: 23px; }
  .employee-workspace .topbar { gap: 12px; }
  .employee-workspace .panel { padding: 16px 12px; border-radius: 16px; }
  .employee-workspace .production-form { grid-template-columns: minmax(0, 1fr); }
  .employee-workspace .production-form > * { grid-column: auto; }
  .employee-workspace .material-item-row { min-width: 0; }
  .workspace-menu-toggle { display: inline-flex; }
  .workspace-stat-row { gap: 8px; }
  .workspace-stat-row article { padding: 14px 12px; }
  .workspace-stat-row article strong { font-size: 25px; }
  .workspace-hero h2 { font-size: 25px; }
  .workspace-welcome { flex-wrap: wrap; padding: 14px; }
  .workspace-welcome div { flex-basis: 100%; }
  .workspace-tabs { position: sticky; top: 0; z-index: 5; }
  .employee-workspace button, .employee-workspace input, .employee-workspace select { min-height: 44px; }
  .employee-workspace input, .employee-workspace select, .employee-workspace textarea { font-size: 16px; }
  .workspace-task-row { gap: 10px; align-items: flex-start; }
  .workspace-task-row div { min-width: 0; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .employee-workspace *, .employee-workspace *::before, .employee-workspace *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }