DataScope26/WEB

1.am-card {2  /* Remove extra bottom margin to let cs-stack gap control spacing uniformly */3  margin-bottom: 0;4}5 6.am-card-header {7  display: flex;8  justify-content: space-between;9  align-items: center;10  margin-bottom: 1.25rem;11}12 13.am-card-header-left {14  display: flex;15  align-items: center;16  gap: 0.75rem;17}18 19.am-card-icon {20  font-size: 1.5rem;21}22 23.am-card-title {24  margin: 0;25  font-size: 1.125rem;26  font-weight: 600;27  color: var(--color-text);28}29 30/* Messages */31.am-message {32  padding: 0.75rem 1rem;33  border-radius: 0.5rem;34  margin-bottom: 1rem;35  display: flex;36  justify-content: space-between;37  align-items: center;38  font-size: 0.9rem;39}40 41.am-message--success {42  background-color: var(--green-20);43  color: var(--cta-text);44  border: 0.0625rem solid var(--green-20);45}46 47.am-message--error {48  background-color: var(--color-danger-bg);49  color: var(--color-danger);50  border: 0.0625rem solid var(--color-danger-border);51}52 53/* Form Section */54.am-form-section {55  padding: 1rem;56  border: 0.0625rem solid var(--color-border);57  border-radius: 0.5rem;58  margin-bottom: 1.25rem;59  background: var(--color-bg);60}61 62.am-section-title {63  margin: 0 0 0.75rem 0;64  font-size: 0.875rem;65  font-weight: 600;66  color: var(--color-text);67  text-transform: uppercase;68  letter-spacing: 0.0313rem;69}70 71/* Create Form */72.am-form {73  display: flex;74  gap: 0.5rem;75  align-items: center;76  margin-bottom: 1%;77}78 79.am-input {80  width: 100%;81  background: var(--surface-2);82  border: 0.0625rem solid var(--color-border);83  color: var(--color-text);84  padding: 0.625rem 0.75rem;85  border-radius: 0.5rem;86  outline: none;87  transition: border-color 0.2s ease;88  font-size: 0.875rem;89  line-height: 1.2;90  box-sizing: border-box;91}92 93.am-input:focus {94  border-color: var(--green);95}96 97.am-input--small {98  flex: 1;99  padding: 0.4375rem 0.625rem;100  font-size: 0.8125rem;101  border-radius: 0.4375rem;102}103 104/* Small Buttons - list/edit/delete actions */105.am-button--small {106  padding: 0.3125rem 0.625rem;107  font-size: 0.75rem;108  border-radius: 0.375rem;109}110 111/* Create button in the form: larger, matches input height and stands out */112.am-button--create {113  padding: 10px 14px;114  font-size: 14px;115  min-width: 140px;116}117 118.am-button--create:disabled {119  opacity: 0.6;120  cursor: not-allowed;121  transform: none;122  box-shadow: none;123}124 125/* List Section */126.am-list-section {127  padding: 1rem;128  border: 0.0625rem solid var(--color-border);129  border-radius: 0.5rem;130  background: var(--color-bg);131}132 133.am-loading,134.am-empty {135  color: var(--color-muted);136  font-size: 0.875rem;137  text-align: center;138  padding: 1.25rem;139}140 141.am-list {142  list-style: none;143  padding: 0;144  margin: 0;145  display: flex;146  flex-direction: column;147  gap: 0.375rem;148}149 150.am-list-item {151  padding: 0.5625rem 0.6875rem;152  border: 0.0625rem solid var(--color-border);153  border-radius: 0.5rem;154  background: var(--surface-2);155}156 157.am-item-content {158  display: flex;159  justify-content: space-between;160  align-items: center;161  gap: 0.625rem;162}163 164.am-item-name {165  flex: 1;166  font-weight: 500;167  color: var(--color-text);168}169 170.am-item-actions {171  display: flex;172  gap: 0.3125rem;173  position: relative;174}175 176/* Edit Form */177.am-edit-form {178  display: flex;179  gap: 0.4375rem;180  flex-wrap: wrap;181  align-items: center;182  justify-content: space-between; /* input left, actions right */183}184 185.am-edit-actions {186  display: flex;187  gap: 0.3125rem;188  flex: 0 0 auto; /* keep actions compact on the right */189}190 191/* Delete Confirmation */192.am-delete-confirm {193  position: absolute;194  top: 100%;195  right: 0;196  margin-top: 0.25rem;197  background: var(--color-surface);198  border: 0.0625rem solid var(--color-border);199  border-radius: 0.5rem;200  padding: 0.75rem;201  min-width: 17.5rem;202  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);203  z-index: 10;204}205 206.am-delete-confirm p {207  margin: 0 0 0.625rem 0;208  font-size: 0.8125rem;209  color: var(--color-text);210}211 212.am-confirm-actions {213  display: flex;214  gap: 0.3125rem;215}216 217.am-confirm-actions {218  flex: 1;219}220 221/* Responsive */222@media (max-width: 48rem) {223  .am-form {224    flex-direction: column;225    align-items: stretch;226  }227 228  .am-delete-confirm {229    position: fixed;230    top: 50%;231    left: 50%;232    right: auto;233    bottom: auto;234    transform: translate(-50%, -50%);235    min-width: 90%;236    max-width: 25rem;237  }238}