.admin-grid.single { grid-template-columns: 1fr; }

.workflow-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -8px 0 20px;
  padding: 12px 16px;
  border: 1px solid #e1e5e8;
  border-radius: 12px;
  background: #fff;
  color: #71808c;
  font-size: 10px;
}
.workflow-strip span { display: flex; align-items: center; gap: 7px; }
.workflow-strip b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f7ead0; color: #976819; }
.workflow-strip i { color: #c8d0d6; font-style: normal; }

.assignment-chip { display: inline-grid; gap: 2px; min-width: 100px; }
.assignment-chip b { color: #253d50; font-size: 10px; }
.assignment-chip small { color: #8a98a3; font-size: 8px; }
.priority { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 8px; }
.priority.normal { background: #edf0f2; color: #60717f; }
.priority.high { background: #fff0d6; color: #976213; }
.priority.urgent { background: #f8dfdf; color: #9b3434; }
.order-head-badges { display: flex; align-items: center; gap: 10px; }

.assignment-card { margin-bottom: 14px; border-color: #e7d5aa; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.card-title-row h2 { margin: 6px 0 0; }
.card-title-row p { margin: 4px 0 0; color: #87949e; font-size: 9px; }
.assignment-current { padding: 8px 10px; border-radius: 8px; background: #f6f7f8; color: #71808c; font-size: 9px; }
.assignment-form { grid-template-columns: repeat(3, 1fr); }
.action-grid { align-items: start; }
.workflow-action { position: relative; overflow: hidden; }
.workflow-action:before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: #c79a3b; }
.korea-action:before { background: #3b82b2; }
.audit-action:before { background: #7b61a8; }
.payment-action:before { background: #3a9a70; }
.action-step { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #f5ead2; color: #976819; font-size: 8px; font-weight: 800; }
.decision-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.decision-buttons button { flex: 1; min-width: 150px; border: 0; border-radius: 9px; padding: 11px; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.success-button { background: #dff3e9; color: #236d4e; }
.danger-button { background: #f8e0e0; color: #933b3b; }
.plain-action { background: #eef1f3; color: #526574; }
.checkbox-line { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 9px !important; color: #5d6f7d !important; }
.checkbox-line input { width: 17px; height: 17px; accent-color: #b98524; }
.checkbox-line span { font-size: 10px; }
.payment-history { margin-bottom: 14px; }
.history-grid { align-items: start; }
.history-title { display: flex; align-items: center; gap: 8px; }
.visibility { padding: 4px 7px; border-radius: 999px; font-size: 7px; }
.visibility.public { background: #dff2e8; color: #26704f; }
.visibility.internal { background: #edf0f2; color: #697986; }
.assignment-log { display: grid; gap: 8px; }
.assignment-log article { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 11px; border: 1px solid #edf0f2; border-radius: 9px; }
.assignment-log article > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #f7ead0; color: #9b6d1e; }
.assignment-log strong { font-size: 11px; }
.assignment-log p { margin: 3px 0; color: #6f7d88; font-size: 9px; }
.assignment-log small { color: #9aa4ac; font-size: 8px; }

.staff-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.employee-form-card { position: sticky; top: 92px; }
.employee-form { display: grid; gap: 11px; }
.employee-form label { display: grid; gap: 6px; color: #71808c; font-size: 9px; }
.employee-form input,.employee-form select,.role-form input { width: 100%; border: 1px solid #dce2e5; border-radius: 8px; padding: 10px 11px; background: #fff; color: #263c4d; font: inherit; outline: none; }
.employee-form label > small { color: #98a2aa; font-size: 8px; }
.employee-state { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 8px; }
.employee-state.active { background: #ddf2e7; color: #26714f; }
.employee-state.inactive { background: #f5e1e1; color: #8d3c3c; }

.roles-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.role-list { display: grid; gap: 6px; position: sticky; top: 92px; }
.role-list > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; border: 1px solid #e0e5e8; border-radius: 10px; background: #fff; color: #5d6f7c; }
.role-list > a.active { border-color: #c79a3b; box-shadow: 0 8px 22px rgba(163,113,24,.08); }
.role-list > a span { display: grid; gap: 3px; }
.role-list strong { color: #253a4b; font-size: 11px; }
.role-list small,.role-list i { color: #919ca5; font-size: 8px; font-style: normal; }
.role-list .new-role { justify-content: center; border-style: dashed; border-color: #c99b3c; color: #94661b; font-weight: 800; }
.role-code { direction: ltr; padding: 6px 9px; border-radius: 7px; background: #eef1f3; color: #71808c; font-size: 9px; }
.security-notice { margin-bottom: 15px; padding: 11px; border-radius: 9px; background: #fff4dc; color: #82601e; font-size: 9px; }
.role-basic { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 11px; align-items: end; margin-bottom: 20px; }
.role-basic label { display: grid; gap: 6px; color: #71808c; font-size: 9px; }
.permission-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.permission-groups fieldset { margin: 0; padding: 15px; border: 1px solid #e1e5e8; border-radius: 11px; }
.permission-groups legend { padding: 0 7px; color: #8d641d; font-size: 10px; font-weight: 800; }
.permission-item { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; padding: 9px 0; border-bottom: 1px solid #eff1f2; cursor: pointer; }
.permission-item:last-child { border-bottom: 0; }
.permission-item input { width: 16px; height: 16px; margin-top: 2px; accent-color: #b98524; }
.permission-item span { display: grid; gap: 3px; }
.permission-item b { color: #415563; font-size: 9px; }
.permission-item small { direction: ltr; text-align: right; color: #9aa4ac; font-size: 7px; }
.role-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 13px; border: 1px solid #e0e5e8; border-radius: 10px; background: rgba(255,255,255,.96); }
.role-save p { margin: 0; color: #8c98a1; font-size: 9px; }

@media (max-width: 1100px) {
  .staff-layout { grid-template-columns: 1fr; }
  .employee-form-card { position: static; }
  .roles-layout { grid-template-columns: 210px minmax(0,1fr); }
  .assignment-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .workflow-strip { overflow-x: auto; white-space: nowrap; }
  .order-head-badges { align-items: flex-end; flex-direction: column; }
  .assignment-form,.role-basic,.permission-groups { grid-template-columns: 1fr; }
  .roles-layout { grid-template-columns: 1fr; }
  .role-list { position: static; grid-template-columns: 1fr 1fr; }
  .role-list .new-role { grid-column: 1/-1; }
  .role-editor { padding: 16px; }
  .decision-buttons { display: grid; }
}