/* He thong nut/giao dien chung cua game tsudev - mau lay tu token tsudev (shared/tokens.css). */
:root {
  --font-sans-vi: 'Segoe UI', Tahoma, Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --ui-button-height: 44px;
  --ui-button-height-sm: 36px;
  --ui-button-height-lg: 52px;
  --ui-button-radius: 8px;
  --ui-button-gap: 8px;
  --ui-button-pad-x: 18px;
  --ui-button-font-size: 0.98rem;
  --ui-button-font-weight: 700;
  --ui-button-shadow: 0 8px 18px rgb(15 23 42 / 14%);
  --ui-button-shadow-hover: 0 12px 24px rgb(15 23 42 / 18%);
  --ui-button-transition:
    background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease,
    transform 160ms ease, filter 160ms ease;
  --ui-focus-ring: 0 0 0 3px rgb(14 165 233 / 34%);
  --ui-primary: var(--primary);
  --ui-primary-hover: var(--primary-hover);
  --ui-secondary: var(--info);
  --ui-secondary-hover: var(--primary-active);
  --ui-success: var(--success);
  --ui-success-hover: var(--success);
  --ui-danger: var(--danger);
  --ui-danger-hover: var(--danger);
  --ui-neutral: #253241;
  --ui-neutral-hover: #17212f;
  --ui-on-dark: #fff;
}

html,
body,
button,
input,
select,
textarea,
optgroup,
a {
  font-family: var(--font-sans-vi);
}

button,
[type='button'],
[type='submit'],
[type='reset'],
.btn,
.action-btn,
.action-button,
.action-button-modern,
.app-button,
.header-action-btn,
.back-button,
.modal-confirm-btn,
.modal-cancel-btn,
.settings-close,
.favorites-close,
.procedure-item-button,
.print-controls .action-button,
.modal-buttons .action-button {
  min-height: var(--ui-button-height);
  min-width: 44px;
  padding: 0 var(--ui-button-pad-x);
  border: 1px solid transparent;
  border-radius: var(--ui-button-radius);
  font-family: var(--font-sans-vi);
  font-size: var(--ui-button-font-size);
  font-weight: var(--ui-button-font-weight);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-button-gap);
  white-space: normal;
  text-align: center;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  color: var(--ui-on-dark);
  background: var(--ui-neutral);
  box-shadow: var(--ui-button-shadow);
  transition: var(--ui-button-transition);
}

button:hover:not(:disabled),
[type='button']:hover:not(:disabled),
[type='submit']:hover:not(:disabled),
[type='reset']:hover:not(:disabled),
.btn:hover:not(:disabled),
.action-btn:hover:not(:disabled),
.action-button:hover:not(:disabled),
.action-button-modern:hover:not(:disabled),
.app-button:hover:not(:disabled),
.header-action-btn:hover:not(:disabled),
.back-button:hover,
.modal-confirm-btn:hover:not(:disabled),
.modal-cancel-btn:hover:not(:disabled),
.settings-close:hover,
.favorites-close:hover,
.procedure-item-button:hover,
.print-controls .action-button:hover:not(:disabled),
.modal-buttons .action-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--ui-button-shadow-hover);
  filter: brightness(1.04);
}

button:active:not(:disabled),
[type='button']:active:not(:disabled),
[type='submit']:active:not(:disabled),
[type='reset']:active:not(:disabled),
.btn:active:not(:disabled),
.action-btn:active:not(:disabled),
.action-button:active:not(:disabled),
.action-button-modern:active:not(:disabled),
.app-button:active:not(:disabled),
.header-action-btn:active:not(:disabled),
.back-button:active,
.modal-confirm-btn:active:not(:disabled),
.modal-cancel-btn:active:not(:disabled),
.procedure-item-button:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

button:focus-visible,
[type='button']:focus-visible,
[type='submit']:focus-visible,
[type='reset']:focus-visible,
a:focus-visible,
.btn:focus-visible,
.action-btn:focus-visible,
.action-button:focus-visible,
.action-button-modern:focus-visible,
.app-button:focus-visible,
.header-action-btn:focus-visible,
.back-button:focus-visible,
.procedure-item-button:focus-visible {
  outline: none;
  box-shadow: var(--ui-button-shadow), var(--ui-focus-ring);
}

button:disabled,
[type='button']:disabled,
[type='submit']:disabled,
[type='reset']:disabled,
.btn:disabled,
.action-btn:disabled,
.action-button:disabled,
.action-button-modern:disabled,
.app-button:disabled,
.header-action-btn:disabled,
.procedure-item-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.1);
  box-shadow: none;
}

.btn-primary,
.action-btn.primary-btn,
.action-btn.confirm-btn,
.action-btn.edit-btn,
.action-button.primary,
.action-button-modern.add-button,
.action-button-modern.export-button,
.app-button.primary,
.modal-confirm-btn,
.header-action-btn.btn-display,
.header-action-btn.btn-form {
  background: var(--ui-primary);
  border-color: color-mix(in srgb, var(--ui-primary), #000 12%);
  color: var(--ui-on-dark);
}

.btn-primary:hover:not(:disabled),
.action-btn.primary-btn:hover:not(:disabled),
.action-btn.confirm-btn:hover:not(:disabled),
.action-btn.edit-btn:hover:not(:disabled),
.action-button.primary:hover:not(:disabled),
.action-button-modern.add-button:hover:not(:disabled),
.action-button-modern.export-button:hover:not(:disabled),
.app-button.primary:hover:not(:disabled),
.modal-confirm-btn:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}

.btn-secondary,
.action-button.secondary,
.action-button-modern.import-button,
.app-button.secondary,
.modal-cancel-btn,
.back-button {
  background: var(--ui-secondary);
  border-color: color-mix(in srgb, var(--ui-secondary), #000 12%);
  color: var(--ui-on-dark);
}

.btn-secondary:hover:not(:disabled),
.action-button.secondary:hover:not(:disabled),
.action-button-modern.import-button:hover:not(:disabled),
.app-button.secondary:hover:not(:disabled),
.modal-cancel-btn:hover:not(:disabled),
.back-button:hover {
  background: var(--ui-secondary-hover);
}

.btn-success,
.action-button.success,
.app-button.success {
  background: var(--ui-success);
  border-color: color-mix(in srgb, var(--ui-success), #000 12%);
  color: var(--ui-on-dark);
}

.btn-success:hover:not(:disabled),
.action-button.success:hover:not(:disabled),
.app-button.success:hover:not(:disabled) {
  background: var(--ui-success-hover);
}

.btn-danger,
.action-btn.delete-btn,
.action-button.danger,
.action-button-modern.delete-button,
.app-button.danger,
.header-action-btn.btn-copy,
.header-action-btn.btn-copy-icon {
  background: var(--ui-danger);
  border-color: color-mix(in srgb, var(--ui-danger), #000 12%);
  color: var(--ui-on-dark);
}

.btn-danger:hover:not(:disabled),
.action-btn.delete-btn:hover:not(:disabled),
.action-button.danger:hover:not(:disabled),
.action-button-modern.delete-button:hover:not(:disabled),
.app-button.danger:hover:not(:disabled) {
  background: var(--ui-danger-hover);
}

.btn.small,
.action-btn,
.action-button.small,
.app-button.small,
.btn-icon,
.settings-close,
.favorites-close {
  min-height: var(--ui-button-height-sm);
  padding-inline: 12px;
  font-size: 0.9rem;
}

.print-controls .action-button,
.modal-buttons .action-button {
  min-height: var(--ui-button-height-lg);
  padding-inline: 24px;
  font-size: 1.08rem;
}

.menu-button,
.general-button {
  font-family: var(--font-sans-vi);
  letter-spacing: 0;
}

.menu-button:focus-visible,
.general-button:focus-visible {
  outline: none;
  box-shadow:
    0 10px 24px rgb(0 0 0 / 18%),
    var(--ui-focus-ring);
}

input,
select,
textarea {
  letter-spacing: 0;
}